[Enhance] 修改事件字符并增加模板标识

[cryzzchen]

问题描述

目前我们的模板结构为： [ 'templateString', [ values ]]，即数组格式，数组第一项为带有特殊注释字符的字符串，标识节点的静态结构，第二项为数组，单项为注释字符的数据。

问题一：事件绑定与函数回调

[
  '<!--?pwc_p--><custom-element>hello</custom-element>',
  [{
      name: 'onClick',
      value: this.handleClick
   }]
]

以上结构目前我们认为其为绑定了一个 click 事件的节点：

<custom-element @click={{ this.handleClick }}>hello</custom-element>

但实际上也可能是传给 custom-element 名为 onClick 的属性：

<custom-element onClick={{ this.handleClick }}>hello</custom-element>

问题二：节点模板和数组类型属性传递

[
    '<div><!--?pwc_t--></div>',
    [{
         name: 'child',
         value: [ '<div>Child</div>', []] 
      } ]
]

以上结构存在二义性：

get template() {
  return html`<custom-element child=${html`<div>Child</div>`}></custom-element>`;    
  // 或
 // return html`<custom-element child=${['<div>Child</div>', []]}></custom-element>`;
}

模板标识

修改事件结构

将绑定事件和普通属性进行区分：
绑定事件的结构为: { name, handler }
普通属性的结构为：{ name, value }

修改模板结构

• 增加 template 属性，表示当前对象是 pwc 接收的模板对象。
• 从数组改为对象，易于后期扩展

静态模板的键值：
TemplateString

数据的键值：
TemplateData

类型:
template: true

[SoloJiang]

直接改成对象吧：

{
 template: string;
 values: unknow[];
 type: '__pwc_tpl__';
}

[SoloJiang]

这里的本质是对 values 这个数组的成员进行类型定义，可能是字符串、element attribute、element template、element template 数组

1. type 的命名是不是应该更明确点，比如从现有类型定义来看属于 elementTemplateType 又或者是 partType，备选名：type/elementTemplateType/templateType/partType/domPartType，个人倾向 partType
2. type 的值应该是可以枚举的，所以不宜用下划线字符串表达，参考 nodeType

[cryzzchen]

这里的本质是对 values 这个数组的成员进行类型定义，可能是字符串、element attribute、elememt template、element template 数组

1. type 的命名是不是应该更明确点，比如从现有类型定义来看属于 elementTemplateType 又或者是 partType，备选名：type/elementTemplateType/templateType/partType/domPartType，个人倾向 partType
2. type 的值应该是可以枚举的，所以不宜用下划线字符串表达，参考 nodeType

type 是表示当前对象是 PWC 接收的模板对象，而不是对 values 这个数组的成员进行类型定义

[SoloJiang]

对于 PWC 接收的模板对象加上 type 的目的是？如果是模板对象，那一定是明确的数据结构，为什么会存在通过 type 区分的场景？

[cryzzchen]

解决 issue 中问题二，区分 pwc 接收的模板对象和用户在组件间传递对象

[SoloJiang]

本质问题还是 values 的成员类型存在不确定性吧？

[cryzzchen]

本质问题还是 values 的成员类型存在不确定性吧？

不是，跟 values 没有关系

[SoloJiang]

额，为啥没关系。。。我举一个例子：

a:

get template() {
 return html`<div>${html`<span>123</span>`}</div>`
}

b:

get template() {
 return html`<div>${'123'}</div>`
}

c:

get template() {
 return html`<div>${[1, 2, 3].map(i => html`<span>${i}</span>`)}</div>`
}

d:

get template() {
 return html`<div attr-text=${this.text}>123</div>`
}

以上四个例子，处理的时候需要对 values 成员的类型进行完全不同的逻辑处理

[ChrisCindy]

type 定义太宽泛，确实不够明确。改名的话可以将其可能存在的值及其表示的含义列出来再讨论一下命名为什么比较合适

[cryzzchen]

静态模板的键值：
TemplateString

数据的键值：
TemplateData

类型:
template: true

[SoloJiang]

针对问题一，我认为将 @ 语法糖留存到运行时处理不妥当，社区一般做法会把语法糖编译到可执行的代码