diff --git a/packages/client-core/README.md b/packages/client-core/README.md index 68386dc..4bb5e09 100644 --- 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 index 7c59b3e..d6f8071 100644 --- 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; + $name?: string; + $show?: boolean|(()=>boolean), + $created?: ILifeListener; + $appended?: ILifeListener; + $mounted?: ILifeListener; + $removed?: ILifeListener; } export type ILifeListener = (dom: IElement)=>T; @@ -697,26 +712,11 @@ export interface IAttributes extends IBaseAttributes, IControlAttributes { } & { [prop: string]: any; }; - $created?: ILifeListener; - $appended?: ILifeListener; - $mounted?: 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 index 1778a8f..40f3a42 100644 --- a/packages/client-core/src/element/attributes.ts +++ b/packages/client-core/src/element/attributes.ts @@ -11,6 +11,7 @@ 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)) { @@ -18,13 +19,17 @@ export function parseAttributes ( 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 index 8344cb0..4628bec 100644 --- 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 index f7726c8..077c77f 100644 --- 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 { - (props: {a:number}): IElement; } // interface ElementClass { // render():void; @@ -112,6 +111,12 @@ declare global { var: IAttributes; [prop: string]: IAttributes; } + + type Props = Record> = IControlAttributes & { + [prop in keyof T]: T[prop]; + }; + + type Children = JSX.Element[]; } type JSXInnerComp = (attrs: T & {[prop: string]:any}) => JSX.Element; diff --git a/packages/client-utils/README.md b/packages/client-utils/README.md index 68386dc..589b35e 100644 --- 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 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 index 141f101..05b4f28 100644 --- a/packages/plugin-esbuild/README.md +++ b/packages/plugin-esbuild/README.md @@ -1,3 +1,8 @@ +

@@ -48,4 +53,6 @@ import alins from 'esbuild-plugin-alins' build({ plugins: [alins()], }); -``` \ No newline at end of file +``` + +Note: Alins will compile files named with `jsx` and `tsx` suffixes by default. \ No newline at end of file diff --git a/packages/plugin-rollup/README.md b/packages/plugin-rollup/README.md index 8f0093d..ff3f468 100644 --- a/packages/plugin-rollup/README.md +++ b/packages/plugin-rollup/README.md @@ -50,4 +50,6 @@ export default { alins() ] } -``` \ No newline at end of file +``` + +Note: Alins will compile files named with `jsx` and `tsx` suffixes by default. \ No newline at end of file diff --git a/packages/plugin-vite/README.md b/packages/plugin-vite/README.md index 6af9fb5..3b5c0b8 100644 --- 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()], }) -``` \ No newline at end of file +``` + +Note: Alins will compile files named with `jsx` and `tsx` suffixes by default. \ No newline at end of file diff --git a/scripts/dev/samples/playground.jsx b/scripts/dev/samples/playground.jsx index 96bf6e8..8bf713a 100644 --- 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) +// } +// ; + +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}`); + } } -

- -
count + 2 = {countAdd2}
-
count + 3 = {countAdd3}
-
count + 4 = {countAdd3 + 1}
-
count * 2 = {countMultiply2}
-
count * 2 = {countMultiply2()}
-
count * 4 = {countMultiply2() * 2}
-
; \ No newline at end of file +const data = 'a'; // @reactive +; + diff --git a/scripts/helper/version.md b/scripts/helper/version.md index ed25be2..d44cfb3 100644 --- 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，使其更易用