feat: 0.0.36

alinsjs · Oct 9, 2023 · 35cbe43 · 35cbe43
1 parent 9ae0a54
commit 35cbe43
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 47 deletions.
diff --git a/packages/client-core/README.md b/packages/client-core/README.md
@@ -39,6 +39,8 @@
 
 **[中文](https://github.com/alinsjs/alins/blob/master/README.cn.md) | [Documentation](https://alinsjs.github.io/docs) | [Playground](https://alinsjs.github.io/playground/) | [Update Log](https://github.com/alinsjs/alins/blob/master/scripts/helper/version.md) | [Feedback Errors/Defects](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [Message Board](https://theajack.github.io/message-board/?app=alins)**
 
+**国内高速访问地址: [文档](https://alinsjs.gitee.io/docs-cn) | [演练场](https://alinsjs.gitee.io/playground/)**
+
 ## 0 Introduction
 
 ### 0.0 Why Alins

diff --git a/packages/client-core/src/element/alins.d.ts b/packages/client-core/src/element/alins.d.ts
@@ -686,7 +686,22 @@ export interface IBaseAttributes extends IEventAttributes {
 
 export interface IControlAttributes {
     $mount?: ITrueElement|string|HTMLElement;
-    $show?: boolean|(()=>boolean);
+    $for?: any[],
+    $item?: string,
+    $index?: string,
+    $if?: boolean|(()=>boolean),
+    $elseif?: boolean|(()=>boolean),
+    $else?: undefined,
+    $switch?: any|(()=>any),
+    $case?: any;
+    $default?: undefined;
+    $async?: Promise<any>;
+    $name?: string;
+    $show?: boolean|(()=>boolean),
+    $created?: ILifeListener;
+    $appended?: ILifeListener;
+    $mounted?: ILifeListener<void|ILifeListener>;
+    $removed?: ILifeListener;
 }
 
 export type ILifeListener<T=void> = (dom: IElement)=>T;
@@ -697,26 +712,11 @@ export interface IAttributes extends IBaseAttributes, IControlAttributes {
     } & {
         [prop: string]: any;
     };
-    $created?: ILifeListener;
-    $appended?: ILifeListener;
-    $mounted?: ILifeListener<void|ILifeListener>;
-    $removed?: ILifeListener;
     $html?: any;
     $ref?: any;
     'value:string'?: any;
     'value:number'?: any;
     'value:boolean'?: any;
-
-    $if?: any;
-    $elseif?: any;
-    $else?: any;
-    $case?: any;
-    $default?: any;
-    $break?: boolean;
-    $item?: string;
-    $index?: number;
-    $name?: string;
-
     [prop: string]: any;
 }
 export interface ITextNode {

diff --git a/packages/client-core/src/element/attributes.ts b/packages/client-core/src/element/attributes.ts
@@ -11,20 +11,25 @@ export function parseAttributes (
     dom: IElement,
     value: IBaseAttributes | string | (()=>string)
 ): boolean {
+    const REG = /(.*?)=(.*?)(&|$)/g;
     if (value === null || typeof value === 'undefined') return false;
 
     if (typeof value === 'function' || isProxy(value)) {
         // @ts-ignore
         reactiveBindingEnable(value, (v: any, ov: any, path, prop, remove) => {
             if (typeof v === 'string') {
                 if (!prop || prop === 'v') {
-                    const r1 = v.matchAll(/(.*?)=(.*?)(&|$)/g);
+                    const r1 = v.matchAll(REG);
                     v = {};
-                    // @ts-ignore
-                    for (const item of r1) v[item[1]] = item[2];
-                    const r2 = ov.matchAll(/(.*?)=(.*?)(&|$)/g);
-                    ov = {};
-                    for (const item of r2) ov[item[1]] = item[2];
+                    let item: any;
+                    while (!(item = r1.next()).done) v[item.value[1]] = item.value[2];
+                    if (ov) {
+                        const r2 = ov.matchAll(REG);
+                        ov = {};
+                        while (!(item = r2.next()).done) ov[item.value[1]] = item.value[2];
+                    } else {
+                        ov = {};
+                    }
                 } else {
                     !!remove ?
                         dom.removeAttribute(prop) :
@@ -33,9 +38,10 @@ export function parseAttributes (
                 }
             }
             for (const k in v) dom.setAttribute(k, v[k]);
-            for (const k in ov)
+            for (const k in ov) {
                 if (typeof v[k] === 'undefined')
                     dom.removeAttribute(k);
+            }
         });
     } else if (typeof value === 'object') {
         for (const k in value) {
@@ -46,6 +52,12 @@ export function parseAttributes (
                     dom.setAttribute(k, v);
             });
         }
+    } else if (typeof value === 'string') {
+        const r1 = value.matchAll(REG);
+        let item: any;
+        while (!(item = r1.next()).done) {
+            dom.setAttribute(item.value[1], item.value[2]);
+        }
     } else {
         return false;
     }

diff --git a/packages/client-core/src/element/class.ts b/packages/client-core/src/element/class.ts
@@ -21,8 +21,7 @@ function setClass (dom: IElement, name: string, isRemove = false, single = false
 function replaceClass (dom: IElement, v: string) {
     dom.className = Array.from(new Set(v.split(' '))).join(' ');
     const sc = dom[SC];
-    if (sc)
-        for (const k of sc) dom.classList.add(k);
+    if (sc) sc.forEach((k: string) => {dom.classList.add(k);});
 }
 
 export function parseClassName (

diff --git a/packages/client-core/src/element/jsx.d.ts b/packages/client-core/src/element/jsx.d.ts
@@ -5,7 +5,7 @@ import { IAttributes } from 'packages/core/src/element/jsx';
  * @Description: Coding something
  */
 
-import type { IAttributes, IElement } from './alins.d';
+import type { IAttributes, IControlAttributes, IElement } from './alins.d';
 
 // tslint:disable-next-line:export-just-namespace
 
@@ -19,7 +19,6 @@ declare global {
     }
     namespace JSX {
         interface Element extends Promise<IElement>, IElement {
-            (props: {a:number}): IElement;
         }
         // interface ElementClass {
         //     render():void;
@@ -112,6 +111,12 @@ declare global {
             var: IAttributes;
             [prop: string]: IAttributes;
         }
+
+        type Props<T extends Record<string, any> = Record<string, any>> = IControlAttributes & {
+            [prop in keyof T]: T[prop];
+        };
+
+        type Children = JSX.Element[];
     }
 
     type JSXInnerComp<T> = (attrs: T & {[prop: string]:any}) => JSX.Element;

diff --git a/packages/client-utils/README.md b/packages/client-utils/README.md
@@ -39,6 +39,8 @@
 
 **[中文](https://github.com/alinsjs/alins/blob/master/README.cn.md) | [Documentation](https://alinsjs.github.io/docs) | [Playground](https://alinsjs.github.io/playground/) | [Update Log](https://github.com/alinsjs/alins/blob/master/scripts/helper/version.md) | [Feedback Errors/Defects](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [Message Board](https://theajack.github.io/message-board/?app=alins)**
 
+**国内高速访问地址: [文档](https://alinsjs.gitee.io/docs-cn) | [演练场](https://alinsjs.gitee.io/playground/)**
+
 ## 0 Introduction
 
 ### 0.0 Why Alins
@@ -138,7 +140,7 @@ After following the steps, execute the following command to install and run it.
 ```
 cd <project>
 npm i
-npm rundev
+npm run dev
 ```
 
 You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)

diff --git a/packages/plugin-esbuild/README.md b/packages/plugin-esbuild/README.md
@@ -1,3 +1,8 @@
+<!--
+ * @Author: chenzhongsheng
+ * @Date: 2023-09-22 23:38:20
+ * @Description: Coding something
+-->
 
 <p align="center">
     <img src='https://shiyix.cn/images/alins.png' width='100px'/>
@@ -48,4 +53,6 @@ import alins from 'esbuild-plugin-alins'
 build({
    plugins: [alins()],
 });
-```
+```
+
+Note: Alins will compile files named with `jsx` and `tsx` suffixes by default.
diff --git a/packages/plugin-rollup/README.md b/packages/plugin-rollup/README.md
@@ -50,4 +50,6 @@ export default {
      alins()
    ]
 }
-```
+```
+
+Note: Alins will compile files named with `jsx` and `tsx` suffixes by default.
diff --git a/packages/plugin-vite/README.md b/packages/plugin-vite/README.md
@@ -49,4 +49,6 @@ import alins from 'vite-plugin-alins'
 export default defineConfig({
    plugins: [alins()],
 })
-```
+```
+
+Note: Alins will compile files named with `jsx` and `tsx` suffixes by default.
diff --git a/scripts/dev/samples/playground.jsx b/scripts/dev/samples/playground.jsx
@@ -1,3 +1,8 @@
+/*
+ * @Author: chenzhongsheng
+ * @Date: 2023-10-06 23:37:14
+ * @Description: Coding something
+ */
 
 // let a = 1; // @reactive
 // let b = false; // @reactive
@@ -16,20 +21,32 @@
 // // b = true;
 // // 预期绿色
 
-let count = 1;
-const countAdd2 = count + 2;
-const countAdd3 = countAdd2 + 1;
-function countMultiply2 () {
-    return count * 2;
+// const classList = ['a1'];
+// let a2Flag = false;
+// let i = 1;
+// function toggleClass(e){
+//     classList.push(`n${i++}`)
+//     a2Flag = !a2Flag;
+//     console.log(e.target.className)
+// }
+// <button $mount='#App'
+//     class={`a ${classList.join(' ')}`}
+//     class:a2={a2Flag}
+//     class:a3={true}
+//     onclick={toggleClass}
+// >Toggle Class a2</button>;
+
+const attrStr = 'a=va&b=vb&c=vc';
+function logAttributes (e) {
+    const attrs = e.target.attributes;
+    for (const item of attrs) {
+        console.log(`${item.name}=${item.value}`);
+    }
 }
-<div $:App>
-    <button onclick={count++}>
-         click:{count}
-    </button>
-    <div>count + 2 = {countAdd2}</div>
-    <div>count + 3 = {countAdd3}</div>
-    <div>count + 4 = {countAdd3 + 1}</div>
-    <div>count * 2 = {countMultiply2}</div>
-    <div>count * 2 = {countMultiply2()}</div>
-    <div>count * 4 = {countMultiply2() * 2}</div>
-</div>;
+const data = 'a'; // @reactive
+<button $mount='#App'
+    inner-attr="test"
+    $attributes={attrStr}
+    onclick={logAttributes}
+>Click Me!</button>;
+
diff --git a/scripts/helper/version.md b/scripts/helper/version.md
@@ -26,6 +26,13 @@
 - [ ] 模版语法支持 html 文件作为模版语言
 - [ ] computed 重构；dirty 标记。优化 const b = a++; 逻辑
 
+## 0.0.36
+
+- [x] fix for of 打包导致的问题
+- [x] fix $attributes 属性使用响应式字符串作为值时遇到的响应式问题
+- [x] fix $attributes 属性使用字符串无效的问题
+- [x] 增加 JSX.Props JSX.Children 接口
+
 ## 0.0.35
 
 - [x] alins-standalone 优化Api，使其更易用
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,4 +50,6 @@ export default { @@
          alins()
        ]
     }
-    ```
+    ```
+    Note: Alins will compile files named with `jsx` and `tsx` suffixes by default.