Mini app open source projects

Thomas Steiner

kbone

The kbone project (open source on GitHub) implements an adapter that simulates a browser environment in the adaptation layer, so that code written for the web can run without changes in a mini app. Several starter templates (among them Vue, React, and Preact) exist that make the onboarding experience for web developers coming from these frameworks easier.

A new project can be created with the kbone-cli tool. A wizard asks what framework to initiate the project with. The code snippet below shows the Preact demo. In the code snippet below, the mp command builds the mini app, the web command builds the web app, and build creates the production web app.

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

The code snippet below shows a simple counter component that then gets isomorphically rendered in a mini app and a web app. The overhead of the mini app is significant, purely judging from the DOM structure.

import { h, Component } from "preact";
import "./index.css";

class Counter extends Component {
  state = { count: 1 };

  sub = () => {
    this.setState((prevState) => {
      return { count: --prevState.count };
    });
  };

  add = () => {
    this.setState((prevState) => {
      return { count: ++prevState.count };
    });
  };

  clickHandle = () => {
    if ("undefined" != typeof wx && wx.getSystemInfoSync) {
      wx.navigateTo({
        url: "../log/index?id=1",
      });
    } else {
      location.href = "log.html";
    }
  };

  render({}, { count }) {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{count}</span>
        <button onClick={this.add}>+</button>
        <div onClick={this.clickHandle}>跳转</div>
      </div>
    );
  }
}

export default Counter;