refactor: runtime structure #63

SoloJiang · 2022-04-25T02:12:57Z

refactor: runtime structure [Enhance] 修改事件字符并增加模板标识 #59
feat: multiple html method render

* 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]>

cryzzchen · 2022-04-27T02:52:07Z

@SoloJiang 没有考虑数组中存在非模板节点的情况，TEMPLATES 命名应当为 MULTI 或其他单纯表示数组的名称

cryzzchen · 2022-04-27T03:08:17Z

packages/pwc/src/elements/reactiveElementFactory.ts

-            this.#reactiveNodes[index].commitValue(values[index]);
-          }
-        }
+      const currentElementTemplate = this.template;


组件的整个模板结构应当为一个 templateNode,在这里 commitValue，把 updateView 的逻辑移到 templateNode 中去

是的，我也这么想的，有一些细节还要处理下

codecov-commenter · 2022-05-06T07:54:42Z

Codecov Report

Merging #63 (87202f1) into main (e5b302d) will increase coverage by 1.72%.
The diff coverage is 93.40%.

@@            Coverage Diff             @@
##             main      #63      +/-   ##
==========================================
+ Coverage   85.57%   87.29%   +1.72%     
==========================================
  Files          41       45       +4     
  Lines         804      921     +117     
  Branches      182      204      +22     
==========================================
+ Hits          688      804     +116     
- Misses        116      117       +1

Impacted Files	Coverage Δ
...kages/pwc-compiler/src/compileTemplateInRuntime.ts	`0.00% <0.00%> (ø)`
packages/pwc/src/elements/renderElementTemplate.ts	`86.95% <86.95%> (ø)`
packages/pwc/src/elements/reactiveNode.ts	`97.64% <97.33%> (-2.36%)`	⬇️
packages/pwc-compiler/src/compileScript.ts	`100.00% <100.00%> (ø)`
packages/pwc-compiler/src/compileTemplate.ts	`95.77% <100.00%> (ø)`
...ages/pwc-compiler/src/transform/autoAddAccessor.ts	`100.00% <100.00%> (ø)`
...pwc-compiler/src/transform/genGetTemplateMethod.ts	`100.00% <100.00%> (ø)`
packages/pwc-compiler/src/transform/index.ts	`100.00% <100.00%> (ø)`
packages/pwc/src/constants.ts	`100.00% <100.00%> (ø)`
packages/pwc/src/decorators/attribute/index.ts	`81.57% <100.00%> (ø)`
... and 9 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e5b302d...87202f1. Read the comment docs.

packages/pwc/src/decorators/__tests__/attribute.test.js

packages/pwc/src/elements/commitAttributes.ts

packages/pwc/src/elements/__tests__/HTMLElement.test.js

cryzzchen · 2022-05-09T09:33:02Z

packages/pwc/src/elements/getTemplateInfo.ts

+import { ElementTemplate, PWCElementTemplate } from '../type';
+import { elementTemplateManager } from './elementTemplateManager';
+
+export function getTemplateInfo(elementTemplate: ElementTemplate): PWCElementTemplate {


这个函数名要不改成 formatTemplateInfo ?

cryzzchen · 2022-05-09T09:34:48Z

packages/pwc/src/elements/reactiveElementFactory.ts

+        const commentNode = document.createComment(TEXT_COMMENT_DATA);
+        this.appendChild(commentNode);
+        if (isArray(this.#currentTemplate)) {
+          this.#reactiveNodes.push(


reactiveNode 应该只有一个了，不需要 push 到一个数组里面？

cryzzchen · 2022-05-09T09:46:43Z

packages/pwc/src/elements/reactiveNode.ts

+  }
+}
+
+function deleteChildren(targetReactiveNode: ReactiveNode) {


这里的 deleteChildren 其实现与 TemplatesNode 耦合，且不存在其他脱离 TemplatesNode 调用的情况，因此放在 TemplatesNode 中是否更好？OO思想

嗯，原本是这么设计的，只是希望可以针对方法补充测试用例，现在来看这个方法比较简单似乎没有必要

cryzzchen · 2022-05-09T09:47:06Z

packages/pwc/src/elements/reactiveNode.ts

+  targetReactiveNode.reactiveNodes = [];
+}
+
+export function updateView(


这个也是

cryzzchen · 2022-05-09T09:48:18Z

packages/pwc/src/utils/checkTypes.ts

@@ -31,3 +33,11 @@ export function isMap(value: unknown) {
 export function isPrivate(name: string) {
  return name.startsWith('#');
 }
+
+export function isTemplate(value: unknown): boolean {
+  return value && value[TemplateFlag] === true;


我记得当时的讨论结果是，同时判断三个属性

cryzzchen · 2022-05-09T09:50:09Z

packages/pwc/src/elements/initRenderTemplate.ts

+import { throwError } from '../error';
+import { elementTemplateManager } from './elementTemplateManager';
+
+export function initRenderTemplate(


增加注释

cryzzchen · 2022-05-10T07:11:27Z

packages/pwc/src/elements/reactiveElementFactory.ts

+        }
+        this.#currentTemplate = this.template;
+        this.#root = this.shadowRoot || this;
+        const commentNode = document.createComment(TEXT_COMMENT_DATA);


这个位置加一个注释，说明一下根位置增加一个注释节点的原因吧

cryzzchen · 2022-05-10T07:16:35Z

packages/pwc/src/elements/reactiveElementFactory.ts

+          // @ts-ignore
+          this.__init_task__();
+        }
+        this.#currentTemplate = this.template;


this.template format 之后赋值给 this.#currentTemplate，删除 44 行

SoloJiang and others added 9 commits April 25, 2022 10:12

refactor: runtime structure

3482953

chore: lint

42aa51b

feat: support element template diff

1949423

chore: lint

b38fee5

chore: resolve conflict

7c7a6af

feat: html method support new structure

271da66

feat: html method support new structure

5dae056

fix(compiler): inject wrong value in runtime compiler

57a434b

cryzzchen reviewed Apr 27, 2022

View reviewed changes

SoloJiang and others added 4 commits May 6, 2022 11:53

refactor: reactive node

739ce9e

chore: test case

83eb345

fix(compiler): replace values with templateData in template result

00d3192

chore: test case

c30711b

SoloJiang added 10 commits May 6, 2022 20:03

chore: add test case

3c04a3d

refactor: base render

3d77430

chore: revert code

a7a4316

chore: test case

086d62f

chore: resolve conflict

32bec4f

chore: lint

32cabcd

chore: ts type

24bb23b

chore: test case

7d78381

chore: add comment

56614ee

chore: remove useless comment

39398dc

cryzzchen reviewed May 9, 2022

View reviewed changes

packages/pwc/src/decorators/__tests__/attribute.test.js Show resolved Hide resolved

packages/pwc/src/elements/commitAttributes.ts Outdated Show resolved Hide resolved

cryzzchen reviewed May 9, 2022

View reviewed changes

packages/pwc/src/elements/__tests__/HTMLElement.test.js Show resolved Hide resolved

SoloJiang added 2 commits May 9, 2022 17:11

chore: add test case

e7e4c36

chore: optimize code

13cea0b

cryzzchen reviewed May 10, 2022

View reviewed changes

SoloJiang added 2 commits May 10, 2022 14:41

chore: optimize code

b2be016

chore: link

44f9f5b

cryzzchen reviewed May 10, 2022

View reviewed changes

chore: optimize code

87202f1

cryzzchen approved these changes May 10, 2022

View reviewed changes

ChrisCindy approved these changes May 11, 2022

View reviewed changes

SoloJiang merged commit 6eddb4f into main May 11, 2022

delete-merged-branch bot deleted the refactor/runtime-structure branch May 11, 2022 07:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: runtime structure #63

refactor: runtime structure #63

SoloJiang commented Apr 25, 2022

cryzzchen commented Apr 27, 2022

cryzzchen Apr 27, 2022

SoloJiang Apr 28, 2022

codecov-commenter commented May 6, 2022 •

edited

Loading

cryzzchen May 9, 2022

cryzzchen May 9, 2022

cryzzchen May 9, 2022

SoloJiang May 10, 2022

cryzzchen May 9, 2022

cryzzchen May 9, 2022

cryzzchen May 9, 2022

cryzzchen May 10, 2022

cryzzchen May 10, 2022

refactor: runtime structure #63

refactor: runtime structure #63

Conversation

SoloJiang commented Apr 25, 2022

cryzzchen commented Apr 27, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-commenter commented May 6, 2022 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-commenter commented May 6, 2022 •

edited

Loading