[Discussion] PWC 产物导出的方式

[SoloJiang]

背景

当前 PWC 文件的写法如下：

<template>
  <div>Hello</div>
</template>

<script>
  export default class EditWord extends HTMLElement {}
</script>

本 issue 主要讨论的是这个包的导出是什么？核心关系到在其他框架中的使用方式以及在 PWC 单文件体系内的使用方式

原来的方案

在 React 体系内

import 'pwc-picture';


export default function App() {
  return <pwc-picture />
}

当 pwc-picture 发生 break change 的时候，开发者需要去关注组件的文档上标明的标签名是什么，比如标签名的定义从 pwc-picture => pwc-picture-v2

在 PWC 单文件体系内

<template>
  <div>Hello</div>
  <Child />
</template>

<script>
  import Child from './child';

  export default class EditWord extends HTMLElement {}
</script>

在该父组件的 template 内使用的 Child 最终会被映射修改为 Child 被定义的标签名

存在的问题是什么？

• PWC 组件本身确实是有导出的，导出的是一个 HTMLElement 类，在 React 体系中是利用 JS 文件引入的副作用定义的自定义标签
• PWC 体系中，使用到了 export default 的值，并且导出的时候是当做字符串来用的

解决方案

方案一（个人推荐）

在 PWC 导出的组件中添加一个 named 导出 -- LocalName，并且统一 React 体系和 PWC 体系使用组件的方式：

React:

import { LocalName: Picture } from 'pwc-picture';
// 或者
// import * as Picture from 'pwc-picture';
// return <Picture.LocalName />


export default function App() {
  return <Picture />
}

PWC:

<template>
  <div>Hello</div>
  <Child />
</template>

<script>
  import { LocalName: Child } from './child';

  export default class EditWord extends HTMLElement {}
</script>

优势：

• 无论是哪一个体系，开发者几乎不用关心标签名是什么，避免了组件 break change 之后，开发者的使用成本
• 导出以及形式统一，符合规范

劣势：

• 相比原方案，在 PWC 体系中使用的时候需要解构使用

方案二

忽略 PWC 单文件中原有的 export default，改为默认导出标签名，即写法为：

import Picture from 'pwc-picture';


export default function App() {
  return <Picture />
}

优势：

• 写法比方案一简单点

劣势：

• 开发者 export default 导出的，和真实 export default 导出的东西不一样

方案三

维持原有的方案

[cryzzchen]

方案一，PWC 的模板写法需要和 #41 结合来看。