fix problam & move example to file

Author: Bayn-Web

dist/miniFrame.js.js dist/miniFrame.js

@@ -1,4 +1,4 @@
-import { startEngine, data, createEffect, css, makeFunc } from "@bayn/miniframe"
+import { startEngine, data, createEffect, css, makeFunc } from "../lib/index"
 
 data.color = 'blue'
 data.a = 1;
@@ -18,14 +18,14 @@ startEngine(() => [`
         color:$color
     </div>
     <div class="$textColor">
-        color:$textColor
+        textColor:$textColor
     </div>
     <label>
-        <div class="round">   
+        <div class="round">
             color:$textColor 
         </div>
     </label>
-    <a click="switchColor">switchColor</a>
+    <button click="switchColor">switchColor</button>
 </div>`,
     css`
     .blue {
@@ -44,8 +44,5 @@ startEngine(() => [`
          border-radius: 50%;
          color: white;
      }
-     a{
-        cursor: pointer;
-     }
  `]
 )

dist/miniFrame.js.umd.cjs dist/miniFrame.umd.cjs

@@ -3,11 +3,12 @@ import { data } from "../index"
 const htmlCompile = (htmlString: string) => {
     const parser = new DOMParser();
     const replaceAttrs = ['class', 'id', 'click']
-    // 解析HTML字符串为DOM对象
+    // should replace frame own func
     const dom = parser.parseFromString(htmlString, 'text/html');
+    // have to be
     let target = dom.childNodes[0].childNodes[1].childNodes[0]
     const replaceParms = (target: HTMLElement) => {
-        target.childNodes.forEach((res) => {
+        (target.childNodes as unknown as HTMLElement[]).forEach((res) => {
             if (res.nodeType === 3 && res.textContent?.trim() == '') return;
             if (res.nodeType === 3) {
                 (res.textContent as string | undefined) = res.textContent?.replace(/\$(.*?)\s/g, (match) => {
@@ -16,17 +17,17 @@ const htmlCompile = (htmlString: string) => {
             }
             if (res.nodeType === 1) {
                 replaceAttrs.forEach((attr) => {
-                    if ((res as HTMLElement).getAttribute(attr)) {
-                        (res as HTMLElement).setAttribute(attr, (res as HTMLElement).getAttribute(attr)!.replace(/\$(.*?)\s/g, (match) => {
+                    if (res.getAttribute(attr)) {
+                        res.setAttribute(attr, res.getAttribute(attr)!.replace(/\$(.*?)\s/g, (match) => {
                             return String(data[match.slice(1, match.length - 1)])
                         }))
                         if (attr === 'click') {
-                            (res as HTMLElement).onclick = data.func[(res as HTMLElement).getAttribute(attr)!]
+                            res.onclick = data.func[res.getAttribute(attr)!]
                         }
                     }
                 })
             }
-            replaceParms(res as HTMLElement)
+            replaceParms(res)
         })
     }
     replaceParms(target as HTMLElement)

index.css example/index.css

@@ -1,9 +1,10 @@
+import type { dataParams } from "../type/global"
 /**
  * @description Render css
  * @param tokens TemplateStringsArray
  * @param expressions (string|number)[]
 */
-function css(tokens: TemplateStringsArray, ...expressions: (string | number)[]) {
+function css(tokens: TemplateStringsArray, ...expressions: (dataParams)[]) {
     const cssString = tokens.map((token, index) => {
         return (expressions[index - 1] ?? '') + token;
     }).join('');

index.html example/index.html

@@ -15,9 +15,9 @@ const startEngine = (render: () => [string, HTMLStyleElement], el?: string) => {
         let html = htmlCompile(dom[0])
         if (container!.firstElementChild) {
             container!.childNodes.forEach(child => child.remove())
-            container!.firstElementChild.replaceWith(html, dom[1])
+            container!.firstElementChild.replaceWith(html!, dom[1])
         } else {
-            container!.appendChild(html)
+            container!.appendChild(html!)
             container!.appendChild(dom[1])
         }
     })

index.ts example/index.ts

@@ -2,15 +2,6 @@ const propsToEffects: any = {}
 const dirtyEffects: any = []
 let queued = false
 let currentEffect: Function | undefined = undefined;
-
-type data = {
-    func: {
-        [key: string]: (this: GlobalEventHandlers, ev: MouseEvent) => any;
-    }
-} & {
-    [key: string]: string | number;
-};
-
 /**
  * @description reative data, can refresh dom.
 */

lib/compiler/html.ts

@@ -1,4 +1,18 @@
 type clickEvent = (this: GlobalEventHandlers, ev: MouseEvent) => any
+
+type data = {
+    func: {
+        [key: string]: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    }
+} & {
+    [key: string]: dataParams;
+};
+
+type dataParams = string | number | Date | boolean | null | undefined | Function | (() => void)
+
+
 export {
-    clickEvent
+    clickEvent,
+    data,
+    dataParams
 }

lib/css/compile.ts

@@ -4,4 +4,12 @@ declare module '@bayn/miniframe' {
     function createEffect(effect: Function);
     function makeFunc(name: string, cb: clickEvent);
     const data: data;
-}
+}
+
+type data = {
+    func: {
+        [key: string]: (this: GlobalEventHandlers, ev: MouseEvent) => any;
+    }
+} & {
+    [key: string]: string | number | Date | boolean | null | undefined | Function | (() => void);
+};

lib/engine/index.ts

@@ -1,16 +1,16 @@
 {
   "name": "@bayn/miniframe",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.4",
   "repository": {
     "type": "git",
     "url": "[email protected]:Bayn-Web/miniframe.git"
   },
-  "description": "",
+  "description": "the minimal reactive front-end frame by signal engine",
   "type": "module",
   "types": "./lib/package.d.ts",
   "module": "./lib/index.ts",
   "scripts": {
-    "dev": "vite --open",
+    "dev": "vite --open ./example/index.html",
     "build": "vite build"
   },
   "keywords": [

lib/reactive/data.ts

@@ -23,5 +23,5 @@
     "lib/**/*.ts",
     "lib/*.ts",
     "*.ts"
-  ]
+, "example/index.ts"  ]
 }

lib/type/global.d.ts

@@ -5,7 +5,7 @@ export default defineConfig({
         lib: {
             entry: './lib/index.ts',
             name: 'miniFrame',
-            fileName: `miniFrame.js`,
+            fileName: `miniFrame`,
         },
     },
 });