From 21d80f966dfebdecca46e74329a8382b7bab7cfc Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Sat, 2 Apr 2022 11:55:31 +0800
Subject: [PATCH 1/4] fix: get template method trigger times

---
 examples/runtime/src/index.pwc                | 24 ++++++++++---------
 package.json                                  |  2 +-
 packages/pwc/src/decorators/reactive.ts       |  4 +++-
 .../elements/__tests__/HTMLElement.test.js    | 23 ++++++++++++++++++
 .../__tests__/commitAttributes.test.ts        | 18 ++++++++++++++
 packages/pwc/src/elements/commitAttributes.ts |  6 +++--
 .../src/elements/reactiveElementFactory.ts    | 13 ++++++----
 packages/pwc/src/index.ts                     |  2 +-
 .../src/reactivity/__tests__/reactive.test.ts |  7 +++---
 packages/pwc/src/reactivity/reactive.ts       | 17 ++++++++++---
 packages/pwc/src/utils/common.ts              |  6 ++++-
 11 files changed, 95 insertions(+), 27 deletions(-)

diff --git a/examples/runtime/src/index.pwc b/examples/runtime/src/index.pwc
index ca9f84e..ce762da 100644
--- a/examples/runtime/src/index.pwc
+++ b/examples/runtime/src/index.pwc
@@ -1,20 +1,22 @@
 <script>
-import { compile, reactive  } from 'pwc';
+  import { html, reactive } from 'pwc';
 
-export default class RuntimeComponent extends HTMLElement {
-  title = 'pwc';
+  export default class RuntimeComponent extends HTMLElement {
+    @reactive
+    accessor name = 'pwc';
 
-  className = 'container'
+    className = 'container';
 
-  handleClick() {
-    this.title = 'changed title';
-  }
-
-  get template() {
-    return compile`<div class="${this.className}" @click.capture=${this.handleClick}>${this.title}</div>`;
+    handleClick = () => {
+      console.log('click');
+      this.name = 'changed title';
+    };
 
+    get template() {
+      console.log(1);
+      return html`<div class="${this.className}" @click.capture=${this.handleClick}>${this.name}${this.name}</div>`;
+    }
   }
-}
 </script>
 
 <style>
diff --git a/package.json b/package.json
index b8abb73..fac4e2c 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "setup": "npm run clean && pnpm install --reporter=append-only  --registry=https://registry.npmjs.org/",
+    "setup": "npm run clean && pnpm install --reporter=append-only  --registry=https://registry.npmjs.org/ && npm run build",
     "clean": "rm -rf node_modules && rm -rf ./**/*/node_modules && npm run clean:result",
     "clean:result": "rm -rf ./packages/*/lib ./packages/*/es ./packages/*/esnext ./packages/*/dist",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./",
diff --git a/packages/pwc/src/decorators/reactive.ts b/packages/pwc/src/decorators/reactive.ts
index 5c7d596..e3991c5 100644
--- a/packages/pwc/src/decorators/reactive.ts
+++ b/packages/pwc/src/decorators/reactive.ts
@@ -5,10 +5,12 @@ export function reactive(value, { kind, name }) {
         return this.getReactiveValue(name);
       },
       set(val) {
+        console.log('set ====>', val);
         this.setReactiveValue(name, val);
       },
       init(initialValue) {
-        this.setReactiveValue(name, initialValue);
+        this.initReactiveValue(name, initialValue);
+        return initialValue;
       },
     };
   }
diff --git a/packages/pwc/src/elements/__tests__/HTMLElement.test.js b/packages/pwc/src/elements/__tests__/HTMLElement.test.js
index acbdd41..eba757e 100644
--- a/packages/pwc/src/elements/__tests__/HTMLElement.test.js
+++ b/packages/pwc/src/elements/__tests__/HTMLElement.test.js
@@ -1,6 +1,7 @@
 import '../native/HTMLElement';
 import { reactive } from '../../decorators/reactive';
 import { nextTick } from '../sheduler';
+import { compileTemplateInRuntime as html } from '@pwc/compiler';
 
 function getSimpleCustomElement() {
   return class CustomElement extends HTMLElement {
@@ -138,4 +139,26 @@ describe('Render HTMLElement', () => {
       expect(element.innerHTML).toEqual('<!--?pwc_p--><div id="reactive-container" class="green">hello?<!--?pwc_t--> - jack!<!--?pwc_t--></div>');
     });
   });
+
+  it('should trigger template method as expected', (done) => {
+    const mockFn = jest.fn().mockImplementation((text) => {
+      return html`<div>${text}</div>`;
+    });
+    class CustomElement extends HTMLElement {
+      @reactive
+      accessor text = 'hello';
+      get template() {
+        return mockFn(this.text);
+      }
+    }
+    window.customElements.define('custom-runtime-component', CustomElement);
+    const element = document.createElement('custom-runtime-component');
+    document.body.appendChild(element);
+    expect(mockFn).toBeCalledTimes(1);
+    element.text = 'world';
+    nextTick(() => {
+      expect(mockFn).toBeCalledTimes(2);
+      done();
+    });
+  });
 });
diff --git a/packages/pwc/src/elements/__tests__/commitAttributes.test.ts b/packages/pwc/src/elements/__tests__/commitAttributes.test.ts
index 9aeffde..9526ac3 100644
--- a/packages/pwc/src/elements/__tests__/commitAttributes.test.ts
+++ b/packages/pwc/src/elements/__tests__/commitAttributes.test.ts
@@ -122,4 +122,22 @@ describe('Set element attribute/property/event handler', () => {
     // @ts-ignore
     expect(customElement.description).toEqual('This is custom element');
   });
+
+  it('should only add event listener once with component update', () => {
+    const mockClickHandler = jest.fn();
+    const div = document.createElement('div');
+    const attrs = [
+      {
+        name: 'onclick',
+        value: mockClickHandler,
+        capture: true,
+      }
+    ];
+    commitAttributes(div, attrs, true);
+    div.click();
+    expect(mockClickHandler).toBeCalledTimes(1);
+    commitAttributes(div, attrs);
+    div.click();
+    expect(mockClickHandler).toBeCalledTimes(2);
+  });
 });
diff --git a/packages/pwc/src/elements/commitAttributes.ts b/packages/pwc/src/elements/commitAttributes.ts
index 781d45a..8d2ecf0 100644
--- a/packages/pwc/src/elements/commitAttributes.ts
+++ b/packages/pwc/src/elements/commitAttributes.ts
@@ -1,10 +1,12 @@
 import { isEventName } from '../utils/isEventName';
 import type { Attributes } from '../type';
 
-export function commitAttributes(element: Element, attrs: Attributes, isInitial: boolean) {
+export function commitAttributes(element: Element, attrs: Attributes, isInitial: boolean = false) {
   for (const attr of attrs) {
     const { name, value } = attr;
-    if (isEventName(name) && isInitial) {
+    if (isEventName(name)) {
+      // Only add event listener at the first render
+      if (!isInitial) return;
       const { capture = false } = attr;
       // If capture is true, the event should be triggered when capture stage
       element.addEventListener(name.slice(2).toLowerCase(), value, capture);
diff --git a/packages/pwc/src/elements/reactiveElementFactory.ts b/packages/pwc/src/elements/reactiveElementFactory.ts
index 32c3470..142eb89 100644
--- a/packages/pwc/src/elements/reactiveElementFactory.ts
+++ b/packages/pwc/src/elements/reactiveElementFactory.ts
@@ -10,7 +10,7 @@ export default (Definition) => {
   return class extends Definition implements PWCElement {
     #uid: number = generateUid();
     // Component initial state
-    #initialized = false;
+    __initialized = false;
     // The root fragment
     #fragment: Node;
     // Template info
@@ -22,7 +22,7 @@ export default (Definition) => {
 
     // Custom element native lifecycle
     connectedCallback() {
-      if (!this.#initialized) {
+      if (!this.__initialized) {
         if (this.__init_task__) {
           this.__init_task__();
         }
@@ -34,7 +34,7 @@ export default (Definition) => {
         this.#initRenderTemplate(this.#fragment, values);
         this.appendChild(this.#fragment);
       }
-      this.#initialized = true;
+      this.__initialized = true;
     }
     disconnectedCallback() {}
     attributeChangedCallback() {}
@@ -90,7 +90,8 @@ export default (Definition) => {
           }
         }
       }
-      this.#currentTemplate = this.template;
+      // It will trigger get template method if there use this.template
+      this.#currentTemplate = [strings, values];
     }
 
     requestUpdate(): void {
@@ -107,5 +108,9 @@ export default (Definition) => {
     setReactiveValue(prop: string, val: unknown) {
       this.#reactive.setReactiveValue(prop, val);
     }
+
+    initReactiveValue(prop: string, val: unknown) {
+      this.#reactive.initReactiveValue(prop, val);
+    }
   };
 };
diff --git a/packages/pwc/src/index.ts b/packages/pwc/src/index.ts
index d1d559f..8604ddc 100644
--- a/packages/pwc/src/index.ts
+++ b/packages/pwc/src/index.ts
@@ -2,4 +2,4 @@ import './elements';
 
 export * from './decorators';
 
-export { compileTemplateInRuntime as compile } from '@pwc/compiler/compileTemplateInRuntime';
+export { compileTemplateInRuntime as html } from '@pwc/compiler/compileTemplateInRuntime';
diff --git a/packages/pwc/src/reactivity/__tests__/reactive.test.ts b/packages/pwc/src/reactivity/__tests__/reactive.test.ts
index 29c66b2..3fd18bb 100644
--- a/packages/pwc/src/reactivity/__tests__/reactive.test.ts
+++ b/packages/pwc/src/reactivity/__tests__/reactive.test.ts
@@ -2,9 +2,10 @@ import { Reactive } from '../reactive';
 class MockElement {
   isUpdating: boolean = false;
   reactive = new Reactive(this);
+  __initialized = false;
   constructor(initialValue) {
-    this.reactive.setReactiveValue('data', initialValue);
-    this.isUpdating = false;
+    this.reactive.initReactiveValue('data', initialValue);
+    this.__initialized = true;
   }
   set data(val) {
     this.reactive.setReactiveValue('data', val);
@@ -63,4 +64,4 @@ describe('Create a reactive property', () => {
     expect(element.isUpdating).toBe(true);
     expect(element.data).toEqual(['Jack']);
   });
-})
\ No newline at end of file
+})
diff --git a/packages/pwc/src/reactivity/reactive.ts b/packages/pwc/src/reactivity/reactive.ts
index e3618de..a602a30 100644
--- a/packages/pwc/src/reactivity/reactive.ts
+++ b/packages/pwc/src/reactivity/reactive.ts
@@ -1,4 +1,5 @@
 import { getProxyHandler } from './handler';
+import { isObject } from '../utils';
 
 interface ReactiveType {
   setReactiveValue: (prop: string, val: unknown) => void;
@@ -30,14 +31,24 @@ export class Reactive implements ReactiveType {
     return this.#element[key];
   }
 
-  setReactiveValue(prop: string, value: unknown) {
+  initReactiveValue(prop: string, value: unknown) {
     const key = Reactive.getKey(prop);
-    if (typeof value === 'object') {
+
+    if (isObject(value)) {
       this.#createReactiveProperty(key, value);
     } else {
       this.#element[key] = value;
     }
-    this.requestUpdate();
+  }
+
+  setReactiveValue(prop: string, value: unknown) {
+    if (this.#element.__initialized) {
+      this.initReactiveValue(prop, value);
+      this.requestUpdate();
+    } else {
+      // For Object.defineProperty case
+      this.initReactiveValue(prop, value);
+    }
   }
 
   #createReactiveProperty(key: string, initialValue: any) {
diff --git a/packages/pwc/src/utils/common.ts b/packages/pwc/src/utils/common.ts
index 3517b76..1b6ae30 100644
--- a/packages/pwc/src/utils/common.ts
+++ b/packages/pwc/src/utils/common.ts
@@ -10,6 +10,10 @@ export function isPrimitive(value: unknown) {
   return value === null || (typeof value !== 'object' && typeof value !== 'function');
 }
 
+export function isObject(value: unknown) {
+  return typeof value === 'object';
+}
+
 export function is(prev, curr): boolean {
   // SameValue algorithm
   if (prev === curr) {
@@ -20,4 +24,4 @@ export function is(prev, curr): boolean {
     // Step 6.a: NaN == NaN
     return prev !== prev && curr !== curr; // eslint-disable-line no-self-compare
   }
-}
\ No newline at end of file
+}

From 24126fec0e0d4829038aac1764d684de13f60e30 Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Sat, 2 Apr 2022 11:56:06 +0800
Subject: [PATCH 2/4] fix: get template method trigger times

---
 packages/pwc/src/elements/commitAttributes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pwc/src/elements/commitAttributes.ts b/packages/pwc/src/elements/commitAttributes.ts
index 8d2ecf0..8aad8f1 100644
--- a/packages/pwc/src/elements/commitAttributes.ts
+++ b/packages/pwc/src/elements/commitAttributes.ts
@@ -1,7 +1,7 @@
 import { isEventName } from '../utils/isEventName';
 import type { Attributes } from '../type';
 
-export function commitAttributes(element: Element, attrs: Attributes, isInitial: boolean = false) {
+export function commitAttributes(element: Element, attrs: Attributes, isInitial = false) {
   for (const attr of attrs) {
     const { name, value } = attr;
     if (isEventName(name)) {

From 4f4988c0631f7db72d6ba5c5129c50670fc54228 Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Sat, 2 Apr 2022 11:59:49 +0800
Subject: [PATCH 3/4] chore: remove useless code

---
 examples/runtime/src/index.pwc          | 1 -
 packages/pwc/src/decorators/reactive.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/examples/runtime/src/index.pwc b/examples/runtime/src/index.pwc
index ce762da..5ad236a 100644
--- a/examples/runtime/src/index.pwc
+++ b/examples/runtime/src/index.pwc
@@ -13,7 +13,6 @@
     };
 
     get template() {
-      console.log(1);
       return html`<div class="${this.className}" @click.capture=${this.handleClick}>${this.name}${this.name}</div>`;
     }
   }
diff --git a/packages/pwc/src/decorators/reactive.ts b/packages/pwc/src/decorators/reactive.ts
index e3991c5..9f9b2de 100644
--- a/packages/pwc/src/decorators/reactive.ts
+++ b/packages/pwc/src/decorators/reactive.ts
@@ -5,7 +5,6 @@ export function reactive(value, { kind, name }) {
         return this.getReactiveValue(name);
       },
       set(val) {
-        console.log('set ====>', val);
         this.setReactiveValue(name, val);
       },
       init(initialValue) {

From b867993b8dab0e51b6483a8d1cd6a8e8ce5f10a7 Mon Sep 17 00:00:00 2001
From: fushen <fushen.jzw@alibaba-inc.com>
Date: Sat, 2 Apr 2022 12:10:21 +0800
Subject: [PATCH 4/4] chore: typo

---
 packages/pwc/src/elements/reactiveElementFactory.ts    | 10 +++++++---
 packages/pwc/src/reactivity/__tests__/reactive.test.ts |  7 +++++--
 packages/pwc/src/reactivity/reactive.ts                |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/pwc/src/elements/reactiveElementFactory.ts b/packages/pwc/src/elements/reactiveElementFactory.ts
index 142eb89..3f99df2 100644
--- a/packages/pwc/src/elements/reactiveElementFactory.ts
+++ b/packages/pwc/src/elements/reactiveElementFactory.ts
@@ -10,7 +10,7 @@ export default (Definition) => {
   return class extends Definition implements PWCElement {
     #uid: number = generateUid();
     // Component initial state
-    __initialized = false;
+    #initialized = false;
     // The root fragment
     #fragment: Node;
     // Template info
@@ -22,7 +22,7 @@ export default (Definition) => {
 
     // Custom element native lifecycle
     connectedCallback() {
-      if (!this.__initialized) {
+      if (!this.#initialized) {
         if (this.__init_task__) {
           this.__init_task__();
         }
@@ -34,13 +34,17 @@ export default (Definition) => {
         this.#initRenderTemplate(this.#fragment, values);
         this.appendChild(this.#fragment);
       }
-      this.__initialized = true;
+      this.#initialized = true;
     }
     disconnectedCallback() {}
     attributeChangedCallback() {}
     adoptedCallback() {}
 
     // Extension methods
+    _getInitialState() {
+      return this.#initialized;
+    }
+
     #createTemplate(source: string): Node {
       const template = document.createElement('template');
 
diff --git a/packages/pwc/src/reactivity/__tests__/reactive.test.ts b/packages/pwc/src/reactivity/__tests__/reactive.test.ts
index 3fd18bb..2ee0649 100644
--- a/packages/pwc/src/reactivity/__tests__/reactive.test.ts
+++ b/packages/pwc/src/reactivity/__tests__/reactive.test.ts
@@ -1,11 +1,14 @@
 import { Reactive } from '../reactive';
 class MockElement {
+  #initialized = false;
   isUpdating: boolean = false;
   reactive = new Reactive(this);
-  __initialized = false;
+  _getInitialState() {
+    return this.#initialized;
+  };
   constructor(initialValue) {
     this.reactive.initReactiveValue('data', initialValue);
-    this.__initialized = true;
+    this.#initialized = true;
   }
   set data(val) {
     this.reactive.setReactiveValue('data', val);
diff --git a/packages/pwc/src/reactivity/reactive.ts b/packages/pwc/src/reactivity/reactive.ts
index a602a30..67c19c2 100644
--- a/packages/pwc/src/reactivity/reactive.ts
+++ b/packages/pwc/src/reactivity/reactive.ts
@@ -42,7 +42,7 @@ export class Reactive implements ReactiveType {
   }
 
   setReactiveValue(prop: string, value: unknown) {
-    if (this.#element.__initialized) {
+    if (this.#element._getInitialState()) {
       this.initReactiveValue(prop, value);
       this.requestUpdate();
     } else {