docs: update README.md

showlotus · Jan 11, 2024 · 1c5b4bc · 1c5b4bc
1 parent c4fac7f
commit 1c5b4bc
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git a/packages/babel-plugin-jsx/README.md b/packages/babel-plugin-jsx/README.md
@@ -20,6 +20,40 @@ npm install @showlotus/babel-plugin-jsx
 }
 ```
 
+配置 Webpack
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+
+        test: /\.(jsx|tsx)$/i,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                [
+                  '@showlotus/babel-plugin-jsx',
+                  {
+                    isReactiveRoot: true,
+                    librarySource: 'vue',
+                  },
+                ],
+                // 解析 tsx 时，需要额外引入插件 @babel/plugin-transform-typescript
+                ['@babel/plugin-transform-typescript', { isTSX: true, allExtensions: true }],
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+```
+
 ## 使用
 
 ### 参数
@@ -167,34 +201,6 @@ function useFn() {
   }
   ```
 
-- 指定 `customKey` 为一个函数，则需要确保每次调用时，都返回一个唯一的结果，否则可能会导致不同组件有相同的 `key`：
-
-  ```js
-  let count = 1;
-  function customKey() {
-    return `Custom_Key_${count++}`;
-  }
-  ```
-
-  ```js
-  import { Fragment, Select } from '.';
-  function useFn() {
-    return {
-      key: 'Custom_Key_2',
-      props: {
-        title: 'name',
-        showOverflow: true,
-      },
-      slots: {
-        default: {
-          key: 'Custom_Key_1',
-          component: Select,
-        },
-      },
-    };
-  }
-  ```
-
 ## 组件
 
 ### Dialog

diff --git a/packages/jsx-explorer/src/options.ts b/packages/jsx-explorer/src/options.ts
@@ -21,16 +21,14 @@ const App = {
     return () => [
       h(
         'h1',
-        {
-          style: {
-            cursor: 'pointer',
-            userSelect: 'none',
-          },
-          onClick() {
-            window.open('https://showlotus.github.io/babel-plugin-jsx/website');
-          },
-        },
-        `@showlotus/babel-plugin-jsx@${babelPluginJsxPackage.version}`
+        [
+          h('span', '@showlotus/babel-plugin-jsx@'),
+          h('span', babelPluginJsxPackage.version),
+          h('sup', { style: { fontStyle: 'italic' } }, [
+            h('span', ' Forked from '),
+            h('a', { href: "https://github.com/vuejs/babel-plugin-jsx", target: '_blank' }, 'vuejs/babel-plugin-jsx'),
+          ]),
+        ]
       ),
 
       h('div', { id: 'options-wrapper' }, [