raxjs · cryzzchen · May 9, 2022 · May 13, 2022 · May 13, 2022 · May 16, 2022
diff --git a/examples/basic/main.js b/examples/basic/main.js
@@ -2,7 +2,8 @@ import { reactive, customElement, attribute, html } from 'pwc';
 
 @customElement('child-element')
 class Child extends HTMLElement {
-  name = 'Child';
+  @reactive
+  accessor data = {};
 
   @reactive
   @attribute('data-class-name')

diff --git a/examples/condition/index.html b/examples/condition/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/condition/main.js b/examples/condition/main.js
@@ -0,0 +1,41 @@
+import { reactive, customElement, html } from 'pwc';
+
+@customElement('child-element')
+class ChildElement extends HTMLElement {
+  @reactive
+  accessor data = { foo: 0 }
+  get template() {
+    console.log('>>>');
+    return html`<div>${this.data.foo}</div>`;
+  }
+}
+
+@customElement('custom-element')
+class CustomElement extends HTMLElement {
+  @reactive
+  accessor #condition = true;
+
+  @reactive
+  accessor #icon = '';
+
+  @reactive
+  accessor #data = { foo: 1 }
+
+
+  handleClick() {
+    console.log('click');
+    this.#condition = !this.#condition;
+    this.#icon += '!';
+  }
+
+  get template() {
+    const result = html`<div>
+      <p @click=${this.handleClick}>Condition is ${this.#condition + ''}</p>
+      ${this.#condition ? html`<p>True Condition${this.#icon}</p>` : html`<p>False Condition${this.#icon}</p>`}
+      <child-element data=${this.#data}></child-element>
+    </div>`;
+
+    console.log(result);
+    return result;
+  }
+}
diff --git a/examples/condition/package.json b/examples/condition/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/condition/vite.config.js b/examples/condition/vite.config.js
@@ -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/examples/list/main.js b/examples/list/main.js
@@ -17,18 +17,18 @@ class CustomElement extends HTMLElement {
   }
 
   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>`;
+    return html`<div @click=${this.handleToggle}>
+        ${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/jest.config.js b/jest.config.js
@@ -1,7 +1,14 @@
 module.exports = {
   coverageDirectory: './coverage/',
   collectCoverage: true,
-  collectCoverageFrom: ['packages/pwc/src/**/*.{js,ts}', 'packages/pwc-compiler/esm/**/*.{js,ts}', '!packages/**/*.d.ts', '!packages/**/type.ts', '!packages/*/src/index.{js,ts}'],
+  collectCoverageFrom: [
+    'packages/pwc/src/**/*.{js,ts}',
+    'packages/pwc-compiler/esm/**/*.{js,ts}',
+    '!packages/**/*.d.ts',
+    '!packages/**/type.ts',
+    '!packages/*/src/index.{js,ts}',
+    '!packages/*/src/utils/*.{js,ts}',
+  ],
   coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
   roots: ['<rootDir>/packages'],
   testPathIgnorePatterns: ['/node_modules/', '/cjs/', '/esm/', '/es2017/', '/dist/', '.d.ts'],

diff --git a/packages/pwc/build.config.ts b/packages/pwc/build.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from '@ice/pkg';
 
 export default defineConfig({
-  sourceMaps: 'inline',
+  sourceMaps: false,
 
   transform: {
     excludes: ['**/__tests__/**'],

diff --git a/packages/pwc/package.json b/packages/pwc/package.json
@@ -4,7 +4,8 @@
   "author": "Rax Team",
   "homepage": "https://github.com/raxjs/pwc#readme",
   "license": "MIT",
-  "main": "esm/index.js",
+  "main": "cjs/index.js",
+  "module": "",
   "files": [
     "esm/",
     "es2017/",

diff --git a/packages/pwc/src/constants.ts b/packages/pwc/src/constants.ts
@@ -3,6 +3,8 @@ export const TEXT_COMMENT_DATA = '?pwc_t';
 export const PLACEHOLDER_COMMENT_DATA = '?pwc_p';
 export const enum ReactiveFlags {
   RAW = '__p_raw__',
+  PROPERTY = '__p_property__',
+  IS_REACTIVE = '__p_is_reactive__',
 }
 
 export const TemplateString = 'templateString';

diff --git a/packages/pwc/src/elements/__tests__/HTMLElement.test.ts b/packages/pwc/src/elements/__tests__/HTMLElement.test.ts
@@ -156,7 +156,8 @@ describe('Render HTMLElement', () => {
 
     const container = document.getElementById('reactive-container');
     container.click();
-
+    // @ts-ignore
+    expect(element._getChangedProperties()).toEqual(new Set(['#data', '#text', '#className']));
     await nextTick();
     expect(element.innerHTML).toEqual(
       '<!--?pwc_p--><div id="reactive-container" class="green">hello?<!--?pwc_t--> - jack!<!--?pwc_t--></div><!--?pwc_t-->',
@@ -264,32 +265,48 @@ describe('Render nested components', () => {
 
   it('any reactive data should trigger the update of child components', async () => {
     const parentBtn = document.getElementById('parent-btn');
-    const childElement = document.getElementById('child-container');
-    expect(childElement.innerHTML).toEqual(
+    const childContainer = document.getElementById('child-container');
+    expect(childContainer.innerHTML).toEqual(
       '\n      <!--?pwc_p--><div>Hello<!--?pwc_t--> - World<!--?pwc_t--> - <!--?pwc_t--></div>\n    ',
     );
     expect(mockChildFn).toBeCalledTimes(1);
 
+    const parentElement = element;
+    const childElement = document.getElementsByTagName('child-element')[0];
+    // @ts-ignore
+    expect(parentElement._getChangedProperties()).toEqual(new Set());
+    // @ts-ignore
+    expect(childElement._getChangedProperties()).toEqual(new Set());
+
     // primity type
     parentBtn.click();
+    // @ts-ignore
+    expect(parentElement._getChangedProperties()).toEqual(new Set(['#title']));
+
     await nextTick();
-    expect(childElement.innerHTML).toEqual(
+    expect(childContainer.innerHTML).toEqual(
       '\n      <!--?pwc_p--><div>Hello!<!--?pwc_t--> - World<!--?pwc_t--> - <!--?pwc_t--></div>\n    ',
     );
     expect(mockChildFn).toBeCalledTimes(2);
 
     // object type
     parentBtn.click();
+    // @ts-ignore
+    expect(parentElement._getChangedProperties()).toEqual(new Set(['#data']));
+
     await nextTick();
-    expect(childElement.innerHTML).toEqual(
+    expect(childContainer.innerHTML).toEqual(
       '\n      <!--?pwc_p--><div>Hello!<!--?pwc_t--> - World!<!--?pwc_t--> - <!--?pwc_t--></div>\n    ',
     );
     expect(mockChildFn).toBeCalledTimes(3);
 
     // array type
     parentBtn.click();
+    // @ts-ignore
+    expect(parentElement._getChangedProperties()).toEqual(new Set(['#items']));
+
     await nextTick();
-    expect(childElement.innerHTML).toEqual(
+    expect(childContainer.innerHTML).toEqual(
       '\n      <!--?pwc_p--><div>Hello!<!--?pwc_t--> - World!<!--?pwc_t--> - 2<!--?pwc_t--></div>\n    ',
     );
     expect(mockChildFn).toBeCalledTimes(4);
@@ -323,6 +340,65 @@ describe('Render nested components', () => {
     );
     expect(mockChildFn).toBeCalledTimes(6);
   });
+
+  it('keep track of changed properties', async () => {
+    const mockFn1 = jest.fn();
+    const mockFn2 = jest.fn();
+    @customElement('child-element-1')
+    class ChildElement1 extends HTMLElement {
+      @reactive
+      accessor data = {}
+      get template() {
+        return mockFn1();
+      }
+    }
+
+    @customElement('child-element-2')
+    class ChildElement2 extends HTMLElement {
+      @reactive
+      accessor data = {}
+      get template() {
+        return mockFn2();
+      }
+    }
+
+
+    @customElement('track-element')
+    class ParentElement extends HTMLElement {
+      @reactive
+      accessor #data1 = { foo: 1 }
+
+      @reactive
+      accessor #data2 = { foo: 2};
+
+      handleClick() {
+        this.#data2.foo = 3;
+      }
+
+      get template() {
+        return html`
+          <div id="track-btn" @click=${this.handleClick}>Click</div>
+          <child-element-1 data=${this.#data1}></child-element-1>
+          <child-element-2 data=${this.#data2}></child-element-2>
+        `
+      }
+    }
+
+    const element = document.createElement('track-element');
+    document.body.append(element);
+    const btn = document.getElementById('track-btn');
+
+    expect(mockFn1).toBeCalledTimes(1);
+    expect(mockFn2).toBeCalledTimes(1);
+
+    btn.click();
+    // @ts-ignore
+    expect(element._getChangedProperties()).toEqual(new Set(['#data2']));
+
+    await nextTick();
+    expect(mockFn1).toBeCalledTimes(1);
+    expect(mockFn2).toBeCalledTimes(2);
+  });
 });
 
 describe('render multiple kinds template', () => {
@@ -443,7 +519,7 @@ describe('render multiple kinds template', () => {
     document.body.appendChild(el2);
 
     expect(el2.innerHTML).toEqual(
-      '<span>1<!--?pwc_t--></span><span>3<!--?pwc_t--></span><span>2<!--?pwc_t--></span><!--?pwc_t-->',
+      '<span>1<!--?pwc_t--></span><span>3<!--?pwc_t--></span><span>2<!--?pwc_t--></span><!--?pwc_t--><!--?pwc_t-->',
     );
 
     @customElement('hybrid-list')
@@ -493,7 +569,7 @@ describe('render multiple kinds template', () => {
                 inside list: 2<!--?pwc_t-->
               </div><!--?pwc_p--><div class=\"item3\">
                 inside list: 3<!--?pwc_t-->
-              </div><!--?pwc_p--><div class=\"item4\">item4<!--?pwc_t--></div><!--?pwc_t--><!--?pwc_t-->`);
+              </div><!--?pwc_t--><!--?pwc_p--><div class=\"item4\">item4<!--?pwc_t--></div><!--?pwc_t--><!--?pwc_t-->`);
     const item3 = document.getElementsByClassName('item3')[0];
     item3.click();
     await nextTick();
@@ -585,3 +661,5 @@ describe('render with rax', () => {
     );
   });
 });
+
+