refactor: runtime structure (#63)

* refactor: runtime structure * chore: lint * feat: support element template diff * chore: lint * feat(compiler): update structure in get template method (#62) * feat: support svg elements (#60) * feat: support svg elements * chore: fix lint and add notes * feat(compiler): update structure in get template method * fix(compiler): lint error * feat(compiler): use handler to distinguish events and on props * chore(compiler): add EventAttributeDescriptor interface Co-authored-by: Rongyan Chen <[email protected]> Co-authored-by: 狒狒神 <[email protected]> * feat: html method support new structure * feat: html method support new structure * fix(compiler): inject wrong value in runtime compiler * refactor: reactive node * chore: test case * fix(compiler): replace values with templateData in template result * chore: test case * chore: add test case * refactor: base render * chore: revert code * chore: test case * chore: lint * chore: ts type * chore: test case * chore: add comment * chore: remove useless comment * chore: add test case * chore: optimize code * chore: optimize code * chore: link * chore: optimize code Co-authored-by: NK <[email protected]> Co-authored-by: Rongyan Chen <[email protected]> Co-authored-by: 逆葵 <[email protected]>
raxjs · May 11, 2022 · 6eddb4f · 6eddb4f
1 parent e5b302d
commit 6eddb4f
Show file tree

Hide file tree

Showing 36 changed files with 2,213 additions and 1,308 deletions.
diff --git a/examples/basic/main.js b/examples/basic/main.js
@@ -14,11 +14,11 @@ class Child extends HTMLElement {
   connectedCallback() {
     super.connectedCallback();
     console.log('connected');
-    console.log('checked => ', this.checked);
+    console.log(this.className)
   }
 
   get template() {
-    return html`<div>
+    return html`<div id="container">
       Child ${this.name}
       <div>parent class name is ${this.className}</div>
     </div>`;
@@ -49,13 +49,13 @@ class CustomElement extends HTMLElement {
   onClick() {
     this.#data.name += '!';
     this.#text += '?';
-    this.className = this.className === 'green' ? 'red' : 'green';
+    this.#className = this.#className === 'green' ? 'red' : 'green';
   };
 
   get template() {
-    return html`<div class=${this.className} @click=${this.onClick}>
+    return html`<div class=${this.#className} @click=${this.onClick}>
       ${this.#text} - ${this.#data.name}
-      <child-element name=${this.#data.name} checked=${true} data-class-name=${this.className} />
+      <child-element name=${this.#data.name} checked=${true} data-class-name=${this.#className} />
     </div>`;
   }
 }
diff --git a/examples/list/index.html b/examples/list/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Basic</title>
+    <style>
+      .red {
+        color: red;
+      }
+      .green {
+        color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <custom-element>
+    </custom-element>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/examples/list/main.js b/examples/list/main.js
@@ -0,0 +1,34 @@
+import { reactive, customElement, html } from 'pwc';
+
+@customElement('custom-element')
+class CustomElement extends HTMLElement {
+  @reactive
+  accessor #title = 'default title';
+
+  @reactive
+  accessor #list = ['item 1', 'item 2', 'item 3', 'item 4'];
+
+  onClick() {
+    this.#list.push('item 5');
+  }
+
+  handleItemClick(index) {
+    this.#list = [...this.#list.slice(0, index), ...this.#list.slice(index + 1)];
+  }
+
+  get template() {
+    return html`<div @click=${this.onClick}>
+      ${html`${this.#list.map((item, index) => {
+        if (item === 'item 2') {
+          return null;
+        }
+        if (item === 'item 3') {
+          return [1, 2, 3].map((insideItem) => {
+            return html`<div @click=${() => this.handleItemClick(index)}>inside list: ${insideItem}</div>`;
+          });
+        }
+        return html`<div @click=${() => this.handleItemClick(index)}>${item}</div>`;
+      })}`}
+    </div>`;
+  }
+}
diff --git a/examples/list/package.json b/examples/list/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "basic",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "rollup": "^2.0.0",
+    "vite": "^2.7.2",
+    "vite-plugin-babel": "^1.0.0"
+  },
+  "dependencies": {
+    "pwc": "workspace:*"
+  },
+  "browserslist": "chrome > 60"
+}
diff --git a/examples/list/vite.config.ts b/examples/list/vite.config.ts
@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import babel from 'vite-plugin-babel';
+
+export default defineConfig({
+  plugins: [
+    babel({
+      babelConfig: {
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                chrome: 99,
+              },
+              modules: false,
+            },
+          ],
+        ],
+        plugins: [
+          [
+            '@babel/plugin-proposal-decorators',
+            {
+              version: '2021-12',
+            },
+          ],
+          '@babel/plugin-proposal-class-properties',
+          '@babel/plugin-proposal-class-static-block',
+          '@babel/plugin-proposal-private-methods'
+        ],
+      },
+    }),
+  ],
+});
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.21",
     "chalk": "^4.1.2",
+    "codecov": "^3.8.3",
     "esbuild": "^0.14.27",
     "eslint": "^7.32.0",
     "esno": "^0.14.1",
@@ -47,6 +48,7 @@
     "prettier": "^2.6.0",
     "stylelint": "^14.6.0",
     "typescript": "^4.6.2",
-    "codecov": "^3.8.3"
+    "driver-dom": "^2.2.2",
+    "rax": "^1.2.2"
   }
 }
diff --git a/packages/pwc-compiler/__tests__/compileScript.test.ts b/packages/pwc-compiler/__tests__/compileScript.test.ts
@@ -25,6 +25,7 @@ const multipleKindsOfUsingBindingsComponent = `
     attr3="{{this.data3.arr1[0]}}"
     attr4="{{this['data-five']}}"
     @click="{{this.#fn}}"
+    onevent="{{this.#fn}}"
     @input="{{this.methods.fn2}}"
   >
     <div>{{ this.#data1 }}</div>
@@ -63,7 +64,11 @@ describe('compileScript', () => {
     const result = compileScript(descriptor);
 
     expect(result.content).toContain(`get template() {
-    return [\"\\n  <p><!--?pwc_t--></p>\\n\", [this.#text]];
+    return {
+      templateString: \"\\n  <p><!--?pwc_t--></p>\\n\",
+      templateData: [this.#text],
+      template: true
+    };
   }`);
   });
 
@@ -105,27 +110,34 @@ export default class CustomElement extends HTMLElement {
   };
 
   get template() {
-    return ["\\n  <!--?pwc_p--><div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n  </div>\\n", [[{
-      name: "attr1",
-      value: this.#data1
-    }, {
-      name: "attr2",
-      value: this.#data2.name1
-    }, {
-      name: "attr3",
-      value: this.data3.arr1[0]
-    }, {
-      name: "attr4",
-      value: this['data-five']
-    }, {
-      name: "onclick",
-      value: this.#fn,
-      capture: false
-    }, {
-      name: "oninput",
-      value: this.methods.fn2,
-      capture: false
-    }], this.#data1, this.#data2.name1, this.data3.arr1[0], this.data4.obj1.name2, this['data-five']]];
+    return {
+      templateString: "\\n  <!--?pwc_p--><div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n    <div><!--?pwc_t--></div>\\n  </div>\\n",
+      templateData: [[{
+        name: "attr1",
+        value: this.#data1
+      }, {
+        name: "attr2",
+        value: this.#data2.name1
+      }, {
+        name: "attr3",
+        value: this.data3.arr1[0]
+      }, {
+        name: "attr4",
+        value: this['data-five']
+      }, {
+        name: "onclick",
+        handler: this.#fn,
+        capture: false
+      }, {
+        name: "onevent",
+        value: this.#fn
+      }, {
+        name: "oninput",
+        handler: this.methods.fn2,
+        capture: false
+      }], this.#data1, this.#data2.name1, this.data3.arr1[0], this.data4.obj1.name2, this['data-five']],
+      template: true
+    };
   }
 
 }`);