feat(jsx): 支持jsx通用方法 (#176)

PUBLISH.md

@@ -0,0 +1,20 @@
+# 版本发布流程
+
+## 发布频率
+
+组件库正常每两周滚动发布版本，一般在周三/周四，尽量不在周五或晚上发布，防止周末非工作时间响应不及时
+
+如果遇到用户要求紧急修复 bug，可以视情况发布 PATCH 或先行版本，判断标准：
+
+- 影响范围大，大多数用户都可能会遇到问题：请遵照正常发布流程严格测试产物质量及整理 CHANGELOG 后发布 PATCH 版本，以使用户可以自动更新到
+- 新上线的功能，仅有少量用户使用：可以不整理 changelog，直接发布先行版本供用户使用，如 `x.y.z-alpha`
+
+## 发布流程
+
+- 从 `develop` 新建 `release/x.y.z` 分支，并修改 `package.json` 中的版本号，推送分支至远程仓库，并提交一个合入`develop`的 Pull Request 到仓库
+- 仓库的 Github Action 会自动整理上个版本至今 commit 对应的 CHANGELOG，并将 CHANGELOG 的 draft 作为一个评论推送到该 Pull Request 上
+- 发布人检查 CHANGELOG，并优化内容逻辑结构
+- 确认无误后删除对应评论的首行提示（即 `删除此行代表确认该日志` 所在行）<font color="red">（注:需要等待 Github Action 将修改后的内容写入 `CHANGELOG.md` 内）</font>
+- 确认无误后，合并分支入`develop`
+- 合入 `develop` 后，仓库会触发 Github Action 合入`main`分支，并将版本号作为 `tag` 打在仓库上，并触发 Github Action 执行 npm 版本发布流程
+- 合入 `main` 分支后，站点的部署流水线 web hook 会监听到 `main` 分支的新增 commit，并触发流水线，官网更新站点

README-zh_CN.md

@@ -50,10 +50,12 @@ pnpm add tdesign-web-components
 推荐使用 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：
 
 ```tsx
-import 'tdesign-web-components/lib/button'
 import 'tdesign-web-components/lib/style/index.css'
+import 'tdesign-web-components/lib/button'
+
+import 'tdesign-web-components/lib/jsx';
 
-document.querySelector('#app').innerHTML = `<t-button>Hello TDesign</t-button>`
+render(jsx`<t-button>Hello TDesign</t-button>`, document.body);
 ```
 
 更多使用方式请点击 👉🏻 [快速开始](./site/docs/getting-started.md)

README.md

@@ -48,10 +48,12 @@ pnpm add tdesign-web-components
 # 🔨 Usage
 
 ```tsx
-import 'tdesign-web-components/lib/button'
 import 'tdesign-web-components/lib/style/index.css'
+import 'tdesign-web-components/lib/button'
+
+import 'tdesign-web-components/lib/jsx';
 
-document.querySelector('#app').innerHTML = `<t-button>Hello TDesign</t-button>`
+render(jsx`<t-button>Hello TDesign</t-button>`, document.body);
 ```
 
 More ways to use please click 👉🏻 [getting-started](./site/docs/getting-started.md)

package.json

@@ -32,6 +32,7 @@
     "lib",
     "cjs",
     "dist",
+    "plugins",
     "LICENSE",
     "README.md",
     "CHANGELOG.md"
@@ -68,6 +69,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
+    "htm": "^3.1.1",
     "lodash": "~4.17.15",
     "omi-transition": "^0.1.11",
     "tailwind-merge": "^2.2.1",

site/docs/getting-started.md

@@ -79,6 +79,9 @@ export default defineConfig({
 ### 在React中使用
 
 ```js
+
+import renderReact from 'tdesign-web-components/lib/react';
+
 const App = () => {
   const wrapper = React.useRef();
   const button = React.useRef();
@@ -107,6 +110,8 @@ const App = () => {
 ### 在Vue中使用
 
 ```js
+import renderVue from 'tdesign-web-components/lib/vue';
+
 export default {
   name: 'App',
   setup() {

src/jsx.ts

@@ -0,0 +1,19 @@
+import htm from 'htm';
+import { h, render } from 'omi';
+
+declare global {
+  interface Window {
+    h: typeof h;
+    jsx: (strings: TemplateStringsArray, ...values: any[]) => Omi.VNode<any> | Omi.VNode<any>[];
+    render: typeof render;
+  }
+}
+const jsx = htm.bind(window.h);
+
+window.jsx = jsx;
+
+window.render = render;
+
+export default jsx;
+
+export { render };

src/react.ts

@@ -54,4 +54,6 @@ const convertReactToOmi = (r: any): Omi.ComponentChild => {
 const renderReact = <T = any>(reactVNode: T, root: HTMLElement): ExtendedElement =>
   render(convertReactToOmi(reactVNode), root);
 
-export { renderReact, convertReactToOmi };
+export default renderReact;
+
+export { convertReactToOmi };

src/vue.ts

@@ -53,4 +53,6 @@ const convertVueToOmi = (r: any): Omi.ComponentChild => {
 const renderVue = <T = any>(reactVNode: T, root: HTMLElement): ExtendedElement =>
   render(convertVueToOmi(reactVNode), root);
 
-export { renderVue, convertVueToOmi };
+export default renderVue;
+
+export { convertVueToOmi };