elmer-ui-core/example/index.ts

web app framework

import { ElmerUI } from "../src/render/ElmerUI";
import { useState, useCallback } from "../src/hooks";
import App from "./App";
import { Loadable, useComponent } from "../src";
const AsyncApp = Loadable({
    loader: () => import("./AsyncApp")
})
const exampApp = () => {
    return `<button><Context_Top />Example<Context_Bottom /></button>`;
};
const exampleInput = () => {
    return "<input />"
};
const ui = new ElmerUI();

ui.onReady(() => {
    console.time("DemoApp");
    console.timeLog("DemoApp", "start render");
     ui.render(document.getElementById("app"), () => {
        const [ setTest, getTest ] = useState("test", 1);
        const [ setShowText,getShowText ] = useState("showText",false);
        const [ setListData ] = useState("listData", [
            {label: "text1", value: "text1"},
            {label: "text2", value: "text2"},
            {label: "text3", value: "text3"},
            {label: "text4", value: "text4"},
        ]);
        useComponent("AsyncApp",AsyncApp);
        useComponent("Input",exampleInput);
        useComponent("Button",exampApp);
        useCallback(() => {
            setTest((new Date()).toLocaleString(), true);
            setShowText(!getShowText());
        }, { name: "onClick", event: true});
        useCallback(() => {
            const maxNums = Math.floor(Math.random()*10);
            const newList = [];
            for(let i=0;i<maxNums;i++) {
                newList.push({label: "text1" + i, value: "text1" + i});
            }
            setListData(newList);console.log("lll", newList);
        }, { name: "onRefresh", event: true});
        return `<div class="hello" title="test" style="display: block;padding: 10px;background: pink;">
            <button et:click="onClick">渲染测试{{state.test}}--{{state.showText}}</button>
            <TestApp em:if='{{state.showText}}'>显示文本测试</TestApp>
        </div>`;
     }, { 
         components: {
            App: App,
            TestApp: () => "<textarea>New Component</textarea>",
            ExApp: () => "<App />",
            AsyncApp: AsyncApp
         }
     });
    console.timeEnd("DemoApp");
});