feat: html method support new structure

examples/list/main.js

@@ -3,41 +3,13 @@ import { reactive, customElement, html } from 'pwc';
 @customElement('custom-element')
 class CustomElement extends HTMLElement {
   @reactive
-  accessor #title;
+  accessor #title = 'default title';
 
   onClick() {
     this.#title = '123';
   }
 
   get template() {
-    return {
-      templateString: '<!--?pwc_p--><div>map: <!--?pwc_t--><!--?pwc_t--></div>',
-      templateData: [
-        [
-          {
-            name: 'onclick',
-            handler: this.onClick
-          },
-        ],
-        {
-          templateString: 'title is <!--?pwc_t-->',
-          templateData: [this.#title],
-          template: true
-        },
-        [
-          {
-            templateString: 'title is <!--?pwc_t-->',
-            templateData: [this.#title],
-            template: true
-          },
-          {
-            templateString: 'title is <!--?pwc_t-->',
-            templateData: [this.#title],
-            template: true
-          }
-        ]
-      ],
-      template: true
-    };
+    return html`<div @click=${this.onClick}>title is ${this.#title}</div>`;
   }
 }

packages/pwc-compiler/src/compileScript.ts

@@ -17,10 +17,10 @@ export function compileScript(descriptor: SFCDescriptor): SFCScriptCompileResult
   // With template block
   const hasTemplate = !!descriptor.template;
   if (hasTemplate) {
-    const { templateString, values } = compileTemplate(descriptor);
+    const { templateString, templateData } = compileTemplate(descriptor);
     transformScript(ast, {
       templateString,
-      values,
+      templateData,
     });
   } else {
     transformScript(ast, { templateString: null });

packages/pwc-compiler/src/compileTemplate.ts

@@ -19,7 +19,7 @@ export type ValueDescriptor = Array<string | Array<AttributeDescriptor>>;
 
 export interface CompileTemplateResult {
   templateString?: string;
-  values?: ValueDescriptor;
+  templateData?: ValueDescriptor;
 }
 
 const TEXT_COMMENT_DATA = '?pwc_t';
@@ -151,7 +151,7 @@ export function compileTemplate(descriptor: SFCDescriptor): CompileTemplateResul
 
 export function compileTemplateAST(ast: ElementNode): CompileTemplateResult {
   const nodes = dfs(ast);
-  const values = transformTemplateAst(nodes);
+  const templateData = transformTemplateAst(nodes);
   const templateString = genTemplateString(ast);
-  return { templateString, values };
+  return { templateString, templateData };
 }

packages/pwc-compiler/src/compileTemplateInRuntime.ts

@@ -3,8 +3,9 @@ import { compileTemplateAST } from './compileTemplate';
 import type { CompileTemplateResult } from './compileTemplate';
 
 interface CompileTemplateInRuntimeResult {
-  [0]: CompileTemplateResult['templateString'];
-  [1]: CompileTemplateResult['values'];
+  templateString: CompileTemplateResult['templateString'];
+  templateData: CompileTemplateResult['templateData'];
+  template: true;
 }
 
 /**
@@ -13,7 +14,7 @@ interface CompileTemplateInRuntimeResult {
  * originalValues: [[{name: 'class', value: ''}, {name: 'onclick', value: '', capture: false}], '']
  * result: [[{name: 'class', value: 'className'}, {name: 'onclick', value: function, capture: false}], 'title']
  */
-function injectRuntimeValue(bindings, originalValues): CompileTemplateResult['values'] {
+function injectRuntimeValue(bindings, originalValues): CompileTemplateResult['templateData'] {
   let bindingIndex = 0;
   return originalValues.map(val => {
     if (typeof val === 'string') {
@@ -24,7 +25,7 @@ function injectRuntimeValue(bindings, originalValues): CompileTemplateResult['va
       });
       return val;
     }
-  }) as CompileTemplateResult['values'];
+  }) as CompileTemplateResult['templateData'];
 }
 
 export function compileTemplateInRuntime(strings: Array<string>, ...runtimeValues): CompileTemplateInRuntimeResult {
@@ -36,9 +37,13 @@ export function compileTemplateInRuntime(strings: Array<string>, ...runtimeValue
   } catch (err) {
     throw new Error(`template compile error: ${err}`);
   }
-  const { templateString, values: originalValues } = compileTemplateAST(dom);
+  const { templateString, templateData: originalTemplateData } = compileTemplateAST(dom);
   // bindings in originalValues is empty and actual values is in runtimeValues
   // injectRuntimeValue will inject corresponding runtime values into originalValues
-  const values = injectRuntimeValue(runtimeValues, originalValues);
-  return [templateString, values];
+  const templateData = injectRuntimeValue(runtimeValues, originalTemplateData);
+  return {
+    templateString,
+    templateData,
+    template: true,
+  };
 }

packages/pwc-compiler/src/transform/index.ts

@@ -9,19 +9,19 @@ import type { CompileTemplateResult } from '../compileTemplate';
 
 export interface TransformScriptOptions {
   templateString: string | null;
-  values?: CompileTemplateResult['values'];
+  templateData?: CompileTemplateResult['templateData'];
 }
 
 export default function transformScript(ast: File, {
   templateString,
-  values,
+  templateData,
 }: TransformScriptOptions): void {
   autoAddCustomElementDecorator(ast);
   let shouldImportReactive = false;
   if (templateString !== null) {
-    shouldImportReactive = autoAddReactiveDecorator(ast, values);
+    shouldImportReactive = autoAddReactiveDecorator(ast, templateData);
     autoAddAccessor(ast);
-    genGetTemplateMethod(ast, { templateString, values });
+    genGetTemplateMethod(ast, { templateString, templateData });
   }
   autoInjectImportPWC(ast, shouldImportReactive);
 }

packages/pwc/src/elements/reactiveElementFactory.ts

@@ -1,12 +1,12 @@
 import type { ElementTemplate, PWCElement, PWCElementTemplate, ReflectProperties, RootElement } from '../type';
 import { Reactive } from '../reactivity/reactive';
-import { ReactiveNode } from './reactiveNode';
+import type { ReactiveNode } from './reactiveNode';
 import { generateUid } from '../utils';
 import { enqueueJob, nextTick } from './sheduler';
 import { initRenderTemplate } from './initRenderTemplate';
 import { getTemplateInfo } from './getTemplateInfo';
 import { validateElementTemplate } from './validateElementTemplate';
-import { updateView } from './updateView';
+import { updateView } from './reactiveNode';
 
 export default (Definition: PWCElement) => {
   return class extends Definition {

packages/pwc/src/elements/reactiveNode.ts

@@ -1,7 +1,6 @@
 import { commitAttributes } from './commitAttributes';
 import type { Attributes, PWCElementTemplate, PWCElement, TemplateNodeValue } from '../type';
-import { isTemplate } from '../utils';
-import { updateView } from './updateView';
+import { isTemplate, shallowEqual } from '../utils';
 
 export interface ReactiveNode {
   commitValue: (value: any) => void;
@@ -66,3 +65,32 @@ export class TemplateNode implements ReactiveNode {
     }
   }
 }
+
+export function updateView(
+  oldElementTemplate: PWCElementTemplate,
+  newElementTemplate: PWCElementTemplate,
+  reactiveNodes: ReactiveNode[],
+) {
+  const {
+    templateString: oldTemplateString,
+    templateData: oldTemplateData,
+  } = oldElementTemplate;
+  const {
+    templateString,
+    templateData,
+  } = newElementTemplate;
+  // While template strings is constant with prev ones,
+  // it should just update node values and attributes
+  if (oldTemplateString === templateString) {
+    for (let index = 0; index < oldTemplateData.length; index++) {
+      const reactiveNode = reactiveNodes[index];
+      // Avoid html fragment effect
+      if (reactiveNode instanceof TemplateNode) {
+        // TODO more diff
+        reactiveNode.commitValue([oldTemplateData[index], templateData[index]] as TemplateNodeValue);
+      } else if (!shallowEqual(oldTemplateData[index], templateData[index])) {
+        reactiveNode.commitValue(templateData[index]);
+      }
+    }
+  }
+}

packages/pwc/src/elements/validateElementTemplate.ts

@@ -3,6 +3,7 @@ import { ElementTemplate } from '../type';
 
 export function validateElementTemplate(elementTemplate: ElementTemplate) {
   if (typeof elementTemplate === 'string') return;
+  console.log(elementTemplate)
 
   if (elementTemplate.template !== true) {
     throwError('Invalid template, it should return type field.');