diff --git a/.eslintrc.js b/.eslintrc.js
index 57ae1e1..72594a6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,60 +1,60 @@
-// /*
-// * @Author: tackchen
-// * @Date: 2022-09-04 08:02:56
-// * @Description: Coding something
-// */
-// module.exports = {
-// parser: '@typescript-eslint/parser',
-// plugins: [
-// 'eslint-plugin-react',
-// '@typescript-eslint',
-// ],
-// 'env': {
-// 'node': true,
-// },
-// rules: {
-// 'no-var': 'error',
-// 'no-extend-native': 0,
-// 'no-new': 0,
-// 'no-useless-escape': 0,
-// 'no-useless-constructor': 0,
-// 'no-trailing-spaces': [ 'error', { 'skipBlankLines': true } ],
-// 'indent': [ 'error', 4, {
-// 'SwitchCase': 1
-// } ],
-// 'space-infix-ops': [ 'error', { 'int32Hint': false } ],
-// 'space-before-function-paren': [ 'error', {
-// 'anonymous': 'always',
-// 'named': 'always',
-// 'asyncArrow': 'always'
-// } ],
-// 'semi': [ 'error', 'always' ],
-// 'comma-dangle': 0,
-// 'no-console': 0,
-// 'no-debugger': 0,
-// 'id-length': 0,
-// 'eol-last': 0,
-// 'object-curly-spacing': [ 'error', 'always' ],
-// 'array-bracket-spacing': [ 'error', 'always' ],
-// 'arrow-spacing': 'error',
-// 'no-multiple-empty-lines': 'error',
-// // 'no-unused-vars': 'error',
-// 'spaced-comment': 'error',
-// 'quotes': [ 'error', 'single', { 'allowTemplateLiterals': true } ],
-// 'no-unreachable': 'error',
-// 'keyword-spacing': 'error',
-// 'space-before-blocks': 'error',
-// 'semi-spacing': 'error',
-// 'comma-spacing': 'error',
-// 'key-spacing': 'error',
-// 'prefer-const': [ 'error', {
-// 'destructuring': 'any',
-// 'ignoreReadBeforeAssign': false
-// } ],
-// 'space-infix-ops': 2,
-// 'no-irregular-whitespace': 2, // 不规则的空白不允许
-// 'no-trailing-spaces': 2, // 一行结束后面有空格就发出警告
-// '@typescript-eslint/ban-ts-comment': 'off',
-// '@typescript-eslint/no-unused-vars': 'error',
-// }
-// };
+/*
+ * @Author: tackchen
+ * @Date: 2022-09-04 08:02:56
+ * @Description: Coding something
+ */
+module.exports = {
+ parser: '@typescript-eslint/parser',
+ plugins: [
+ 'eslint-plugin-react',
+ '@typescript-eslint',
+ ],
+ 'env': {
+ 'node': true,
+ },
+ rules: {
+ 'no-var': 'error',
+ 'no-extend-native': 0,
+ 'no-new': 0,
+ 'no-useless-escape': 0,
+ 'no-useless-constructor': 0,
+ 'no-trailing-spaces': [ 'error', { 'skipBlankLines': true } ],
+ 'indent': [ 'error', 4, {
+ 'SwitchCase': 1
+ } ],
+ 'space-infix-ops': [ 'error', { 'int32Hint': false } ],
+ 'space-before-function-paren': [ 'error', {
+ 'anonymous': 'always',
+ 'named': 'always',
+ 'asyncArrow': 'always'
+ } ],
+ 'semi': [ 'error', 'always' ],
+ 'comma-dangle': 0,
+ 'no-console': 0,
+ 'no-debugger': 0,
+ 'id-length': 0,
+ 'eol-last': 0,
+ 'object-curly-spacing': [ 'error', 'always' ],
+ 'array-bracket-spacing': [ 'error', 'always' ],
+ 'arrow-spacing': 'error',
+ 'no-multiple-empty-lines': 'error',
+ // 'no-unused-vars': 'error',
+ 'spaced-comment': 'error',
+ 'quotes': [ 'error', 'single', { 'allowTemplateLiterals': true } ],
+ 'no-unreachable': 'error',
+ 'keyword-spacing': 'error',
+ 'space-before-blocks': 'error',
+ 'semi-spacing': 'error',
+ 'comma-spacing': 'error',
+ 'key-spacing': 'error',
+ 'prefer-const': [ 'error', {
+ 'destructuring': 'any',
+ 'ignoreReadBeforeAssign': false
+ } ],
+ 'space-infix-ops': 2,
+ 'no-irregular-whitespace': 2, // 不规则的空白不允许
+ 'no-trailing-spaces': 2, // 一行结束后面有空格就发出警告
+ '@typescript-eslint/ban-ts-comment': 'off',
+ '@typescript-eslint/no-unused-vars': 'error',
+ }
+};
diff --git a/README.cn.md b/README.cn.md
index 67de50c..839c65e 100644
--- a/README.cn.md
+++ b/README.cn.md
@@ -50,7 +50,7 @@
Alins是一款极致纯粹、简洁、优雅的Web UI框架。秉持0-API、Less is More 的开发理念，旨在帮助开发者摆脱UI框架繁杂的API调用困境，以最直观、最纯粹、最贴近vanillajs的开发方式。
-您只需要了解jsx的书写规则（类似html的语法）便可以没有任何阻碍的开发 alins web应用，下面是一个最基本的计数器示例，你可以[在演练场中在线体验](https://alinsjs.github.io/playground/)：
+您只需要了解jsx的书写规则（类似html的语法）便可以没有任何阻碍的开发 alins web应用，下面是一个最基本的计数器示例，你可以[在演练场中在线体验](https://alinsjs.github.io/playground/#4)：
```jsx
let count = 1;
@@ -83,6 +83,7 @@ let count = 1;
3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui)：官方UI库 （考虑实现ant-design或者meterial-design）
3. [ ] [alins-v](https://github.com/alinsjs/alins-v)：官方表单验证库
4. [ ] [alins-term](https://github.com/alinsjs/alins-term)：基于自定义渲染器开发命令行应用程序的工具
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): 基于自定义渲染器开发使用canvas渲染ui的应用程序的工具
## 1 快速开始
@@ -118,16 +119,23 @@ npm run dev
1. 该方式不建议在生产环境使用
2. 可以使用 type='text/babel'，这样可以获得编辑器自带的语法高亮
-您也可以在 [演练场](https://alinsjs.github.io/playground/) 中自由使用，演练场也是使用Web编译器
-
+您也可以在 [演练场](https://alinsjs.github.io/playground/#48) 中自由使用，演练场也是使用Web编译器
## 2 比较
-### 2.1 js-framework-benchmark 数据
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) 数据
+
+
+
+注：分数越低表示性能越好
### 2.2 代码对比
-### 2.3 打包产物对比
+
+
+### 2.3 编译产物对比
+
+
综合源码体积、打包代码体积和框架运行时体积，整理出表格
diff --git a/README.md b/README.md
index ba59f8e..4603226 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,7 @@
Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
-You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/):
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
```jsx
let count = 1;
@@ -78,6 +78,7 @@ The following peripheral tools are currently under development, and we also hope
3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
## 1 Quick Start
@@ -113,18 +114,25 @@ Note:
1. This approach is not recommended for production environments.
2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-You can also freely use it in the [playground](https://alinsjs.github.io/playground/), which also utilizes a web compiler.
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
## 2 Compare
-### 2.1 js-framework-benchmark data
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
+
+
+
+Note: The lower the score, the better the performance.
### 2.2 Code comparison
-### 2.3 Comparison of packaged products
+
+
+### 2.3 Comparing the Compilation Products.
+
-Combine the source code volume, packaged code volume and framework runtime volume, and sort out the table
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
| metrics | alins | vue3 | react |
| :----: | :----: | :----: | :----: |
diff --git a/packages/client-core/README.md b/packages/client-core/README.md
index e47f4ab..4603226 100644
--- a/packages/client-core/README.md
+++ b/packages/client-core/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/client-core/package.json b/packages/client-core/package.json
index 787b46e..c916c25 100644
--- a/packages/client-core/package.json
+++ b/packages/client-core/package.json
@@ -1,6 +1,6 @@
{
"name": "alins",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -19,8 +19,8 @@
"license": "MIT",
"type": "module",
"dependencies": {
- "alins-reactive": "^0.0.27",
- "alins-utils": "^0.0.27"
+ "alins-reactive": "^0.0.28",
+ "alins-utils": "^0.0.28"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
diff --git a/packages/client-core/src/branch/branch-block.ts b/packages/client-core/src/branch/branch-block.ts
index efc6334..2306bc8 100644
--- a/packages/client-core/src/branch/branch-block.ts
+++ b/packages/client-core/src/branch/branch-block.ts
@@ -32,11 +32,15 @@ const BranchTree = (() => {
}
},
- visit (branch: BranchBlock) {
- if (!initialized || currentBranch === branch) return;
+ visit (branch: BranchBlock, call: any) {
+ if (!initialized || currentBranch === branch) return call();
// ! 访问某个分支之后 将该分支作为stack起点 作为还未加载节点的父分支
stack = [ branch ];
currentBranch = branch;
+ const result = call();
+ stack = [];
+ currentBranch = null;
+ return result;
},
current () {
return currentBranch;
@@ -81,12 +85,13 @@ export class BranchBlock {
}
add (call: IReturnCall) {
+ // console.warn('add', this.end);
this.branchCalls.push(call);
}
getCache (call: IReturnCall) {
- BranchTree.visit(this);
- return this.cache.get(call);
+ // console.warn('getCache', this.end);
+ return BranchTree.visit(this, () => this.cache.get(call));
}
private initAnchor (dom: any) {
@@ -103,6 +108,7 @@ export class BranchBlock {
}
replace (i: number) {
+ // console.warn('replace i', this.end);
if (i === this.activeIndex) return;
const call = this.branchCalls[i];
this.activeIndex = i;
@@ -174,10 +180,6 @@ export class BranchBlock {
}
return true;
}
-
- // ! 解决 for 与 if 组合使用时的问题
-
-
}
export function createDomCacheManager () {
@@ -203,7 +205,8 @@ export function createDomCacheManager () {
try {
parent.insertBefore(node, child);
} catch (e) {
- debugger;
+ // debugger;
+ console.warn(e);
}
});
}
diff --git a/packages/client-core/src/branch/cache.ts b/packages/client-core/src/branch/cache.ts
index 346cbe9..1010671 100644
--- a/packages/client-core/src/branch/cache.ts
+++ b/packages/client-core/src/branch/cache.ts
@@ -95,6 +95,7 @@ export class BranchCache {
break;
}
}
+ // console.warn('cache splice', index1, index2, nodes);
this.curCache.splice(index1 + 1, index2 - index1 - 1, ...nodes);
}
diff --git a/packages/client-core/src/element/renderer.ts b/packages/client-core/src/element/renderer.ts
index ee7bf6c..f66c470 100644
--- a/packages/client-core/src/element/renderer.ts
+++ b/packages/client-core/src/element/renderer.ts
@@ -50,7 +50,7 @@ export interface ITextNode {
get textContent(): string;
set textContent(value: string);
}
-let id = 0;
+// let id = 0;
export const Renderer = {
createElement (tag: string): IElement {
const el = document.createElement(tag);
@@ -65,7 +65,8 @@ export const Renderer = {
return el as ITextNode;
},
createEmptyMountNode (): IElement {
- return document.createComment('' + (id++)) as any;
+ return document.createComment('') as any;
+ // return document.createComment('' + (id++)) as any;
},
createDocumentFragment (): IFragment {
return document.createDocumentFragment();
diff --git a/packages/client-core/src/index.ts b/packages/client-core/src/index.ts
index 5ae5236..bd62878 100644
--- a/packages/client-core/src/index.ts
+++ b/packages/client-core/src/index.ts
@@ -16,6 +16,6 @@ export * from './element/renderer';
export * from 'alins-reactive';
-export const version = '__VERSION__';
+export const version = __VERSION__;
export { reactiveBindingEnable } from './element/dom-util';
diff --git a/packages/client-core/src/utils.ts b/packages/client-core/src/utils.ts
index 4b192b3..96770bd 100644
--- a/packages/client-core/src/utils.ts
+++ b/packages/client-core/src/utils.ts
@@ -25,10 +25,11 @@ export function insertBefore (array: any[], node: any, child: any) {
} else {
node = [ node ];
}
+ // console.log('insertBefore', node, index);
if (index === 0) {
// @ts-ignore
array.unshift(...node);
} else {
- array.splice(index - 1, 0, ...node);
+ array.splice(index, 0, ...node);
}
}
\ No newline at end of file
diff --git a/packages/client-reactive/README.md b/packages/client-reactive/README.md
index e47f4ab..4603226 100644
--- a/packages/client-reactive/README.md
+++ b/packages/client-reactive/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/client-reactive/package.json b/packages/client-reactive/package.json
index 8659b49..4804f1d 100644
--- a/packages/client-reactive/package.json
+++ b/packages/client-reactive/package.json
@@ -1,6 +1,6 @@
{
"name": "alins-reactive",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -19,7 +19,7 @@
"license": "MIT",
"type": "module",
"dependencies": {
- "alins-utils": "^0.0.27"
+ "alins-utils": "^0.0.28"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
diff --git a/packages/client-standalone/README.md b/packages/client-standalone/README.md
index e47f4ab..4603226 100644
--- a/packages/client-standalone/README.md
+++ b/packages/client-standalone/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/client-standalone/package.json b/packages/client-standalone/package.json
index d736c01..ce68c7b 100644
--- a/packages/client-standalone/package.json
+++ b/packages/client-standalone/package.json
@@ -1,6 +1,6 @@
{
"name": "alins-standalone",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -24,7 +24,7 @@
"unpkg": "dist/alins-standalone.iife.min.js",
"jsdelivr": "dist/alins-standalone.iife.min.js",
"dependencies": {
- "alins": "^0.0.27"
+ "alins": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/packages/client-utils/README.md b/packages/client-utils/README.md
index e47f4ab..4603226 100644
--- a/packages/client-utils/README.md
+++ b/packages/client-utils/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/client-utils/package.json b/packages/client-utils/package.json
index 6bc32e5..70e0334 100644
--- a/packages/client-utils/package.json
+++ b/packages/client-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "alins-utils",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
diff --git a/packages/compiler-core/README.md b/packages/compiler-core/README.md
index e47f4ab..4603226 100644
--- a/packages/compiler-core/README.md
+++ b/packages/compiler-core/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index 6fdfae1..a1dc797 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -1,6 +1,6 @@
{
"name": "alins-compiler-core",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
diff --git a/packages/compiler-core/src/scope.ts b/packages/compiler-core/src/scope.ts
index d7f87fc..16c8ae4 100644
--- a/packages/compiler-core/src/scope.ts
+++ b/packages/compiler-core/src/scope.ts
@@ -145,20 +145,8 @@ export class Scope {
if (isFunc && path.node._variable) {
this.funcScope = new FuncReactiveScope(this, path);
}
- // window.s.push(this);
- // window.scope ? window.scope.push(this) : window.scope = [ this ];
}
- // // 解析变量声明 将可能为
- // parseVarDeclaration (d: VariableDeclaration) {
- // const type = d.kind;
- // const isConst = type === 'const';
- // for (const node in d) {
-
- // }
- // }
-
-
private curVarNode: IScopeVariable|null = null; // 记录当前变量声明表达式
private processComputedNode (variable: IScopeVariable) {
@@ -438,25 +426,13 @@ export class Scope {
// ! 找到当前标识的变量
// @ts-ignore
const variable = this.findVarDeclare(node.name);
- // console.log('collectIdentifier222', this.module.inMap, path.node.name, variable?.name);
-
// if (variable?.path.node.name === 'a') debugger;
if (!variable) {
- // debugger;
// return console.warn(`未找到变量声明${node.name}`);
return;
}
if (typeof node.start !== 'undefined' && variable.path.node.start === node.start) return;
- // console.log(variable.path.getNextSibling().toString(), variable.path.toString());
- // console.log('collectIdentifier', variable.name, variable.isComputed, node.name);
- // // todo 这里map会无线循环函数参数
- // debugger;
-
- // if (variable.name === 'a') {
- // debugger;
- // }
- // debugger;
// console.log('FOR_DEBUG collectIdentifier', variable.path.toString(), this.currentJSXExpression);
if (this.currentJSXExpression) {
this.processJSXNode(variable);
@@ -464,7 +440,6 @@ export class Scope {
this.processComputedNode(variable);
}
this.funcScope?.collectIdentifier(variable);
- // if (variable.name === 'fn2') debugger;
// console.log('---variable.isReactive', variable.isReactive, variable.name, path.toString());
if (variable.isReactive) { //
this._replaceReadValuePath(path, variable);
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 0358a26..5030a0b 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -153,7 +153,6 @@ export function createNodeVisitor (t: IBabelType, useImport = true) {
// console.log('VariableDeclaration:', path.toString());
if (!ctx.enter(path)) return;
// todo init = null 时 设置为 void 0;
- // if (path.node.id.name === 'c') debugger;
if (path.node.id.type === 'ObjectPattern') return;
ctx.collectVar(path);
},
diff --git a/packages/compiler-node/README.md b/packages/compiler-node/README.md
index e47f4ab..4603226 100644
--- a/packages/compiler-node/README.md
+++ b/packages/compiler-node/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/compiler-node/package.json b/packages/compiler-node/package.json
index 75d31d7..b47fed6 100644
--- a/packages/compiler-node/package.json
+++ b/packages/compiler-node/package.json
@@ -1,6 +1,6 @@
{
"name": "alins-compiler-node",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -25,7 +25,7 @@
"@babel/core": "^7.22.9",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
- "alins-compiler-core": "^0.0.27"
+ "alins-compiler-core": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/packages/compiler-web/README.md b/packages/compiler-web/README.md
index e47f4ab..4603226 100644
--- a/packages/compiler-web/README.md
+++ b/packages/compiler-web/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/compiler-web/package.json b/packages/compiler-web/package.json
index ca56797..4112a5e 100644
--- a/packages/compiler-web/package.json
+++ b/packages/compiler-web/package.json
@@ -1,6 +1,6 @@
{
"name": "alins-compiler-web",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -22,8 +22,8 @@
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
- "alins": "^0.0.27",
- "alins-compiler-core": "^0.0.27"
+ "alins": "^0.0.28",
+ "alins-compiler-core": "^0.0.28"
},
"unpkg": "dist/alins-compiler-web.iife.min.js",
"jsdelivr": "dist/alins-compiler-web.iife.min.js",
diff --git a/packages/compiler-web/src/boot.ts b/packages/compiler-web/src/boot.ts
index ae1226d..bfd09ae 100644
--- a/packages/compiler-web/src/boot.ts
+++ b/packages/compiler-web/src/boot.ts
@@ -6,7 +6,9 @@
import {
version,
- _$c, _$cc, _$ce, _$e, _$es, _$if, _$mf, _$mm, _$mnr, _$mu, _$r, _$sw, _$w,
+ createStore,
+ _$c, _$cc, _$ce, _$e, _$es, _$if, _$mf, _$mm, _$mnr,
+ _$mu, _$r, _$sw, _$w,
} from 'alins';
import { parseWebAlins } from './parser';
@@ -52,7 +54,10 @@ async function onSingleScript (script: HTMLScriptElement, web = true, ts = false
if (typeof window !== 'undefined') {
// @ts-ignore
- window.Alins = { _$c, _$cc, _$ce, _$e, _$es, _$mf, _$mm, _$mnr, _$mu, _$r, _$sw, _$w, _$if, version };
+ window.Alins = {
+ _$c, _$cc, _$ce, _$e, _$es, _$mf, _$mm, _$mnr,
+ _$mu, _$r, _$sw, _$w, _$if, version, createStore
+ };
window.addEventListener('DOMContentLoaded', onDOMContentLoaded, false);
}
diff --git a/packages/plugin-babel-preset/README.md b/packages/plugin-babel-preset/README.md
index e47f4ab..4603226 100644
--- a/packages/plugin-babel-preset/README.md
+++ b/packages/plugin-babel-preset/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/plugin-babel-preset/package.json b/packages/plugin-babel-preset/package.json
index 8989123..45d6d44 100644
--- a/packages/plugin-babel-preset/package.json
+++ b/packages/plugin-babel-preset/package.json
@@ -1,6 +1,6 @@
{
"name": "babel-preset-alins",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -24,7 +24,7 @@
"dependencies": {
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
- "babel-plugin-alins": "^0.0.27"
+ "babel-plugin-alins": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/packages/plugin-babel/README.md b/packages/plugin-babel/README.md
index e47f4ab..4603226 100644
--- a/packages/plugin-babel/README.md
+++ b/packages/plugin-babel/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/plugin-babel/package.json b/packages/plugin-babel/package.json
index b1a5112..e50e0ff 100644
--- a/packages/plugin-babel/package.json
+++ b/packages/plugin-babel/package.json
@@ -1,6 +1,6 @@
{
"name": "babel-plugin-alins",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -22,7 +22,7 @@
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
- "alins-compiler-core": "^0.0.27"
+ "alins-compiler-core": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/packages/plugin-esbuild/README.md b/packages/plugin-esbuild/README.md
index e47f4ab..4603226 100644
--- a/packages/plugin-esbuild/README.md
+++ b/packages/plugin-esbuild/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/plugin-esbuild/package.json b/packages/plugin-esbuild/package.json
index 2b92ae0..3b43f13 100644
--- a/packages/plugin-esbuild/package.json
+++ b/packages/plugin-esbuild/package.json
@@ -1,6 +1,6 @@
{
"name": "esbuild-plugin-alins",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -22,7 +22,7 @@
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
- "alins-compiler-node": "^0.0.27"
+ "alins-compiler-node": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/packages/plugin-eslint/README.md b/packages/plugin-eslint/README.md
index e47f4ab..4603226 100644
--- a/packages/plugin-eslint/README.md
+++ b/packages/plugin-eslint/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/plugin-eslint/package.json b/packages/plugin-eslint/package.json
index 957d3c6..39895b4 100644
--- a/packages/plugin-eslint/package.json
+++ b/packages/plugin-eslint/package.json
@@ -1,6 +1,6 @@
{
"name": "eslint-config-alins",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"repository": "git@github.com:alinsjs/alins.git",
diff --git a/packages/plugin-rollup/README.md b/packages/plugin-rollup/README.md
index e47f4ab..4603226 100644
--- a/packages/plugin-rollup/README.md
+++ b/packages/plugin-rollup/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/plugin-rollup/package.json b/packages/plugin-rollup/package.json
index ad824d0..e3a644e 100644
--- a/packages/plugin-rollup/package.json
+++ b/packages/plugin-rollup/package.json
@@ -1,6 +1,6 @@
{
"name": "rollup-plugin-alins",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -22,7 +22,7 @@
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
- "alins-compiler-node": "^0.0.27"
+ "alins-compiler-node": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/packages/plugin-vite/README.md b/packages/plugin-vite/README.md
index e47f4ab..4603226 100644
--- a/packages/plugin-vite/README.md
+++ b/packages/plugin-vite/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/plugin-vite/package.json b/packages/plugin-vite/package.json
index 3d16105..30c0fb7 100644
--- a/packages/plugin-vite/package.json
+++ b/packages/plugin-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "vite-plugin-alins",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -22,7 +22,7 @@
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
- "alins-compiler-node": "^0.0.27"
+ "alins-compiler-node": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/packages/plugin-webpack/README.md b/packages/plugin-webpack/README.md
index e47f4ab..4603226 100644
--- a/packages/plugin-webpack/README.md
+++ b/packages/plugin-webpack/README.md
@@ -1,8 +1,3 @@
-
@@ -24,7 +19,7 @@
-
+
@@ -40,164 +35,115 @@
-### 🚀 [Alins](https://github.com/alinsjs/alins): `Al`l-`in`-j`s` web ui Framework，No jsx/template/vdom/css/html
+## 🚀 [Alins](https://github.com/alinsjs/alins): The most pure and elegant WebUI framework
-
+**[中文](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://github.com/alinsjs/alins/blob/master/README.cn.md) | [Docs](https://alinsjs.github.io/docs) | [VersionLog](https://github.com/alinsjs/alins/blob/master/helper/version.md) | [FeedBacl](https://github.com/alinsjs/alins/issues/new) | [Gitee](https://gitee.com/alinsjs/alins) | [MessageBoard](https://theajack.github.io/message-board/?app=alins)**
+## 0 Introduction
-## 0 Quick Start
+### 0.1 Preface
-### 0.1 npm
+Alins is an extremely pure, simple, and elegant web UI framework. It adheres to the development philosophy of 0-API and Less is More, aiming to help developers escape the dilemma of complex API calls in UI frameworks and provide the most intuitive, pure, and close-to-vanillajs development approach.
+
+You only need to understand the syntax rules of JSX (similar to HTML) to develop Alins web applications without any obstacles. Below is a basic counter example that you can [experience online in the playground](https://alinsjs.github.io/playground/#4):
+
+```jsx
+let count = 1;
+;
+```
+
+### 0.2 Features
+
+1. [x] 0-API, Less is More, closest to native JavaScript development.
+2. [x] Powerful reactivity, supports reactive updates for properties, styles, text, HTML, and other elements.
+3. [x] High performance (superior to Vue3 and React).
+4. [x] Does not use virtual DOM (vdom), directly updates UI at a granular level.
+5. [x] Extremely small runtime and bundle size (better than Vue3 and React).
+6. [x] Supports two-way data binding, component development, and follows a unidirectional data flow.
+7. [x] Built-in data sharing solution, easily manages shared data among components.
+8. [x] Rich ecosystem support, compatible with plugins such as Vite, Rollup, Webpack, and esbuild. It can also customize third-party tools based on the underlying compilation module.
+9. [x] Supports if and switch logic, as well as If, Switch, For, and other logical components.
+10. [x] Supports custom renderers for cross-platform development.
+11. [x] Uses JSX and TSX to describe UI, with built-in TypeScript compilation support.
+12. [x] Developed using TypeScript, with highly friendly type support.
+
+### 0.3 TODO
+
+The following peripheral tools are currently under development, and we also hope that interested developers can participate together:
+
+1. [ ] [alins-router](https://github.com/alinsjs/alins-router): Single-page application routing solution
+2. [ ] [alins-ssr](https://github.com/alinsjs/alins-ssr): Server-side rendering solution
+3. [ ] [alins-ui](https://github.com/alinsjs/alins-ui): Official UI library (consider implementing ant-design or meterial-design)
+3. [ ] [alins-v](https://github.com/alinsjs/alins-v): Official form validation library
+4. [ ] [alins-term](https://github.com/alinsjs/alins-term): Tool for developing command line applications based on custom renderers
+5. [ ] [alins-canvas](https://github.com/alinsjs/alins-canvas): Tool for developing applications with canvas based on custom renderers
+
+## 1 Quick Start
+
+### 1.1 Command line creation
```
-npm i alins
+npm create alins
```
-```js
-import {div} from 'alins';
-div('Hello World!').mount();
+After following the steps, execute the following command to install and run it.
+
+```
+cd
+npm i
+npm rundev
```
-### 0.2 cdn
+You can also directly clone the [template code repository](https://github.com/alinsjs/ebuild-template-alins)
+
+### 1.2 Using the Web Compiler
```html
-
-
+
```
-## 1. Features
+Note:
+1. This approach is not recommended for production environments.
+2. You can use type='text/babel' to enable syntax highlighting provided by the editor.
-Alins is an All in js web ui framework, which is highly flexible. You can use js/ts code to combine your dom/css/state into a web application like building blocks. At the same time, Alins is highly responsive to both dom and css
+You can also freely use it in the [playground](https://alinsjs.github.io/playground/#48), which also utilizes a web compiler.
-1. No vdom, the listening data is accurately modified to dom/textNode, and the dom node is reused
-2. Alins-style CSS-in-JS scheme, atomic properties/building block combinations/style response changes
-3. Good componentization support
-4. Support for, if, show, switch, model controller
-5. Support computed and watch
-6. One-way data flow + two-way binding
-7. Good TS support
+## 2 Compare
-For more detailed functions, please refer to [Online Documentation](https://shiyix.cn/alins)
+### 2.1 [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) data
-## 2. Samples
+
-### 2.0 Application Based on Alins
+Note: The lower the score, the better the performance.
-[Webos](https://theajack.github.io/webos)
+### 2.2 Code comparison
-### 2.1. Counter [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/count.js)
+
-```js
-import { button, comp, click, $, mount } from 'alins';
+### 2.3 Comparing the Compilation Products.
-function Count () {
- const count = $(0);
- return button(
- click(() => {count.value++;}),
- $`Count is ${count}`
- );
-}
+
-comp(Count).mount();
-```
+Organizing a table to comprehensively compare the source code volume, packed code volume, and framework runtime volume of various products.
-### 2.2. Components & Model [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/model.js)
+| metrics | alins | vue3 | react |
+| :----: | :----: | :----: | :----: |
+| Source size | 90byte | 281byte | 302byte |
+| Compiled product size | 140byte | 620byte | 435byte |
+| Runtime Size | 26.6kb | 474kb | 139kb |
-```js
-import {
- button, comp, prop, click, $, input, span,
-} from '../alins';
+Note: This comparison is only for the current counter example and is for reference only
-export function Count () {
- const count = $(0);
- return [
- span('input count'),
- input.model(count, 'number'),
- comp(CountProps)(prop({value: count})),
- button('add', click(() => {count.value++;})),
- ];
-};
+## 3 Documentation
-export function CountProps ({props}) {
- return span($`Count is ${props.value}`);
-}
+Please refer to the following online documentation
-comp(Count).mount();
-```
-
-## 3. todolist [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/todo-list.js)
-
-```js
-import {comp, button, div, input, click, $} from '../alins';
-import {style} from '../alins-style';
-
-
-export function todoList () {
- const edit = $('');
- const list = $([]);
- const addItem = () => {
- list.push({content: edit.value, done: false});
- edit.value = '';
- };
- const removeItem = (index) => { list.splice(index.value, 1); };
- const finishItem = (item) => { item.done = !item.done.value; };
-
- const itemStyle = (item) => {
- return style.textDecoration(() => item.done.value ? 'line-through' : 'none')
- .color(() => item.done.value ? '#888' : '#222');
- }
-
- return [
- input.model(edit),
- button('submit', click(addItem)),
- div('.todo-list',
- div.for(list)((item, index) => [
- itemStyle(item),
- $`${() => index.value + 1}:${item.content}`,
- button('delete', click(removeItem).args(index)),
- button(
- $`${() => item.done.value ? 'undo' : 'done'}`,
- click(finishItem).args(item)
- ),
- ]),
- ),
- ];
-}
-comp(todoList).mount();
-```
-
-## 4. css in js [Playground](https://shiyix.cn/jsbox?github=alinsjs.docs.samples/style.js)
-
-```js
-import {
- div, $ , button, hover, click, input, cls
-} from 'alins';
-import {css, style} from '../alins-style';
-
-function Style () {
- const num = $(30);
- const active = $(false);
-
- css('.main')(
- style({
- color: '#888',
- marginLeft: $`${num}px`,
- }),
- ['&.active', style.fontSize(num)],
- ['.child', style.marginTop(num)]
- ).mount();
-
- return div(`parent.main`,
- cls({active}),
- hover('color: #f44'),
- input.model(num, 'number'),
- button('toggle active', click(() => active.value = !active.value)),
- div('child.child'),
- );
-}
-
-comp(Style).mount();
-```
+[English](https://alinsjs.github.io/docs/) | [中文](https://alinsjs.github.io/docs-cn/)
\ No newline at end of file
diff --git a/packages/plugin-webpack/package.json b/packages/plugin-webpack/package.json
index 6403a9d..e4682d2 100644
--- a/packages/plugin-webpack/package.json
+++ b/packages/plugin-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "alins-loader",
- "version": "0.0.27",
+ "version": "0.0.28",
"description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
"main": "src/index.ts",
"typings": "src/index.ts",
@@ -22,7 +22,7 @@
"registry": "https://registry.npmjs.org/"
},
"dependencies": {
- "alins-compiler-node": "^0.0.27"
+ "alins-compiler-node": "^0.0.28"
},
"module": "src/index.ts"
}
\ No newline at end of file
diff --git a/README_DEV.md b/scripts/helper/README_DEV.md
similarity index 100%
rename from README_DEV.md
rename to scripts/helper/README_DEV.md
diff --git a/scripts/helper/version.md b/scripts/helper/version.md
index 6dc9d93..7753d98 100644
--- a/scripts/helper/version.md
+++ b/scripts/helper/version.md
@@ -6,6 +6,9 @@
### Next Version TODO
+fix:
+
+- [ ] Branch 内存占用问题
- [ ] For 类型提示
- [ ] Async Data 类型标注
- [ ] alins-router - 官方路由库 （尽可能通用 能够直接使用原生js调用）
@@ -25,8 +28,9 @@
- [ ] 运行时代码重构 - 优化内存空间占用和运行时间
- [ ] 生命周期优化，支持组件内使用；+ 语法糖 $remove:el,xxx();
-## 0.0.18 - 0.0.27
+## 0.0.18 - 0.0.28
+- [x] Branch 元素父子关系
- [x] switch case 完善
- [x] map 编译器
- [x] style 简单处理
@@ -24,7 +19,7 @@
