diff --git a/demos/v2/index.html b/demos/v2/index.html index 28fb9622..31a50a25 100644 --- a/demos/v2/index.html +++ b/demos/v2/index.html @@ -7,6 +7,6 @@
- + diff --git a/demos/v2/src/App.view.tsx b/demos/v2/src/App.view.tsx index 4fed859c..2bb8fe12 100644 --- a/demos/v2/src/App.view.tsx +++ b/demos/v2/src/App.view.tsx @@ -16,9 +16,7 @@ import { } from '@openinula/next'; // @ts-ignore -function Button({ children: content, onClick }) { - console.log(content); - +function Button({ children, onClick }) { return ( ); } + function ArrayModification() { const arr = []; willMount(() => {}); @@ -47,9 +46,69 @@ function ArrayModification() { ); } +function Counter() { + let count = 0; + const doubleCount = count * 2; // 当count变化时，doubleCount自动更新 + + // 当count变化时，watch会自动执行 + watch(() => { + uploadToServer(count); + console.log(`count has changed: ${count}`); + }); + + // 只有在init的时候执行一次 + console.log(`Counter willMount with count ${count}`); + // 在elements被挂载到DOM之后执行 + didMount(() => { + console.log(`Counter didMount with count ${count}`); + }); + + return ( +
+ count: {count}, double is: {doubleCount} + +
+ ); +} + +function Counter() { + let count = 0; + const doubleCount = count * 2; // 当count变化时，doubleCount自动更新 + + uploadToServer(count); // 当count变化时，uploadToServer会自动执行 + console.log(`count has changed: ${count}`); // 当count变化时，console.log会自动执行 + + // 只有在init的时候执行一次 + willMount(() => { + console.log(`Counter willMount with count ${count}`); + }); + // 在elements被挂载到DOM之后执行 + didMount(() => { + console.log(`Counter didMount with count ${count}`); + }); + + return ( +
+ count: {count}, double is: {doubleCount} + +
+ ); +} + function MyComp() { let count = 0; - const db = count * 2; + + { + console.log(count); + const i = count * 2; + console.log(i); + } + + console.log(count); + const i = count * 2; + console.log(i); + + const XX = () => {}; return ( <> @@ -58,7 +117,7 @@ function MyComp() { count: {count}, double is: {db} - + diff --git a/packages/transpiler/babel-preset-inula-next/CHANGELOG.md b/packages/transpiler/babel-preset-inula-next/CHANGELOG.md index 4ba791fd..263ea4f5 100644 --- a/packages/transpiler/babel-preset-inula-next/CHANGELOG.md +++ b/packages/transpiler/babel-preset-inula-next/CHANGELOG.md @@ -1,5 +1,12 @@ # babel-preset-inula-next +## 0.0.3 + +### Patch Changes + +- Updated dependencies + - @openinula/class-transformer@0.0.2 + ## 0.0.2 ### Patch Changes diff --git a/packages/transpiler/babel-preset-inula-next/package.json b/packages/transpiler/babel-preset-inula-next/package.json index 91a14b05..2acb81e8 100644 --- a/packages/transpiler/babel-preset-inula-next/package.json +++ b/packages/transpiler/babel-preset-inula-next/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-inula-next", - "version": "0.0.2", + "version": "0.0.3", "author": { "name": "IanDx", "email": "iandxssxx@gmail.com" diff --git a/packages/transpiler/class-transformer/CHANGELOG.md b/packages/transpiler/class-transformer/CHANGELOG.md new file mode 100644 index 00000000..f030ae17 --- /dev/null +++ b/packages/transpiler/class-transformer/CHANGELOG.md @@ -0,0 +1,7 @@ +# @openinula/class-transformer + +## 0.0.2 + +### Patch Changes + +- feat: add lifecycles and watch diff --git a/packages/transpiler/class-transformer/package.json b/packages/transpiler/class-transformer/package.json index bf0fb948..781f3f83 100644 --- a/packages/transpiler/class-transformer/package.json +++ b/packages/transpiler/class-transformer/package.json @@ -1,6 +1,6 @@ { "name": "@openinula/class-transformer", - "version": "0.0.1", + "version": "0.0.2", "description": "Inula view generator", "keywords": [ "inula" diff --git a/packages/transpiler/class-transformer/src/pluginProvider.ts b/packages/transpiler/class-transformer/src/pluginProvider.ts index 0766f562..ae799527 100644 --- a/packages/transpiler/class-transformer/src/pluginProvider.ts +++ b/packages/transpiler/class-transformer/src/pluginProvider.ts @@ -53,6 +53,14 @@ export class PluginProvider { return; } + // ---- handle lifecycles + const lifecycles = ['willMount', 'didMount', 'willUnmount', 'didUnmount']; + if (this.t.isLabeledStatement(node) && lifecycles.includes(node.label.name)) { + // transform the lifecycle statement to lifecycle method + classTransformer.transformLifeCycle(node); + return; + } + // handle watch if (this.t.isLabeledStatement(node) && node.label.name === 'watch') { // transform the watch statement to watch method @@ -172,7 +180,19 @@ class ClassComponentTransformer { this.addProperty(body, 'Body'); } - transformLifeCycle() {} + transformLifeCycle(node: t.LabeledStatement) { + // transform the lifecycle statement to lifecycle method + const methodName = node.label.name; + const method = this.t.classMethod( + 'method', + this.t.identifier(methodName), + [], + this.t.blockStatement(node.body.body), + false, + false + ); + this.addProperty(method, methodName); + } transformComputed() {} @@ -218,7 +238,7 @@ class ClassComponentTransformer { */ transformWatch(node: t.LabeledStatement) { const id = this.functionScope.generateUidIdentifier(DECORATOR_WATCH.toLowerCase()); - const method = this.t.classMethod('method', id, [], this.t.blockStatement([node]), false, false); + const method = this.t.classMethod('method', id, [], this.t.blockStatement([node.body]), false, false); method.decorators = [this.t.decorator(this.t.identifier(DECORATOR_WATCH))]; this.addProperty(method); } diff --git a/packages/transpiler/vite-plugin-inula-next/CHANGELOG.md b/packages/transpiler/vite-plugin-inula-next/CHANGELOG.md index 4571c28b..b7ffd1e2 100644 --- a/packages/transpiler/vite-plugin-inula-next/CHANGELOG.md +++ b/packages/transpiler/vite-plugin-inula-next/CHANGELOG.md @@ -1,5 +1,11 @@ # vite-plugin-inula-next +## 0.0.3 + +### Patch Changes + +- babel-preset-inula-next@0.0.3 + ## 0.0.2 ### Patch Changes diff --git a/packages/transpiler/vite-plugin-inula-next/package.json b/packages/transpiler/vite-plugin-inula-next/package.json index 932a7fa0..ef0360d5 100644 --- a/packages/transpiler/vite-plugin-inula-next/package.json +++ b/packages/transpiler/vite-plugin-inula-next/package.json @@ -1,6 +1,6 @@ { "name": "vite-plugin-inula-next", - "version": "0.0.2", + "version": "0.0.3", "author": { "name": "IanDx", "email": "iandxssxx@gmail.com" @@ -39,6 +39,7 @@ "esm" ], "clean": true, - "dts": true + "dts": true, + "minify": true } }