feat(publish): 修复在vite、webpack环境中使用问题

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "tdesign-web-components",
+  "name": "@tencent/tdesign-web-components",
   "purename": "tdesign",
-  "private": true,
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.6",
   "type": "module",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -40,7 +39,10 @@
   "sideEffects": [
     "dist/*",
     "site/**/*.{ts,tsx}",
-    "src/**/*.{ts,tsx}"
+    "src/**/*.{ts,tsx}",
+    "cjs/**",
+    "esm/**",
+    "lib/**"
   ],
   "lint-staged": {
     "src/**/*.{ts,tsx}": [
@@ -57,17 +59,19 @@
       "path": "@commitlint/cz-commitlint"
     }
   },
+  "peerDependencies": {
+    "omi": ">=7.7.1"
+  },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@popperjs/core": "^2.11.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
     "lodash": "~4.17.15",
-    "omi": "^7.7.1",
     "omi-transition": "^0.1.11",
     "tailwind-merge": "^2.2.1",
-    "tdesign-icons-web-components": "^0.1.4"
+    "tdesign-icons-web-components": "^0.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

script/rollup.config.js

@@ -17,7 +17,7 @@ import { terser } from 'rollup-plugin-terser';
 
 import pkg from '../package.json';
 
-const name = 'tdesign';
+const name = 'Tdesign Web Components';
 const externalDeps = Object.keys(pkg.dependencies || {});
 const externalPeerDeps = Object.keys(pkg.peerDependencies || {});
 const banner = `/**
@@ -78,7 +78,7 @@ const getPlugins = ({ env, isProd = false, ignoreLess = false } = {}) => {
   } else {
     plugins.push(
       staticImport({
-        include: ['src/**/style/index.js', 'src/_common/style/web/**/*.less'],
+        include: ['src/**/style/index.js', 'src/_common/style/web/**/*.less', 'src/**/style/*.less'],
       }),
       ignoreImport({
         include: ['src/*/style/*'],
@@ -146,14 +146,14 @@ const libConfig = {
     format: 'esm',
     sourcemap: true,
     chunkFileNames: '_chunks/dep-[hash].js',
-    intro: `import { h } from 'omi';`,
+    intro: `import { h } from 'omi';\nwindow.h = h;`,
   },
 };
 
 // 按需加载组件 带原始 less 文件，可定制主题
 const esmConfig = {
   input: inputList.concat('!src/index-lib.ts'),
-  treeshake: false,
+  // treeshake: false,
   // preserveModules: true,
   external: externalDeps.concat(externalPeerDeps),
   plugins: [multiInput()].concat(getPlugins({ ignoreLess: true })),
@@ -163,7 +163,7 @@ const esmConfig = {
     format: 'esm',
     sourcemap: true,
     chunkFileNames: '_chunks/dep-[hash].js',
-    intro: `import { h } from 'omi';`,
+    intro: `import { h } from 'omi';\nwindow.h = h;`,
   },
 };
 
@@ -179,7 +179,7 @@ const cjsConfig = {
     sourcemap: true,
     exports: 'named',
     chunkFileNames: '_chunks/dep-[hash].js',
-    intro: `var { h } = require('omi');`,
+    intro: `var { h } = require('omi');\nwindow.h = h;`,
   },
 };
 

site/docs/getting-started.md

@@ -15,17 +15,7 @@ isGettingStarted: true
 npm i tdesign-web-components
 ```
 
-#### 浏览器引入
-
-目前可以通过 [unpkg.com/tdesign-react](https://unpkg.com/tdesign-react) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/tdesign-react/dist/tdesign.min.css" />
-<script src="https://unpkg.com/tdesign-react/dist/tdesign.min.js"></script>
-```
-> 请注意，我们不推荐使用这种方式，这样无法实现按需加载等优化手段，生产项目会直接受版本更新影响，同时也可能受到 CDN 的稳定性的影响。
-
-npm package 中提供了多种构建产物，可以阅读 [这里](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) 了解不同目录下产物的差别。
+#### 浏览器引入（敬请期待）
 
 ### 基础使用
 
@@ -43,6 +33,36 @@ import 'tdesign-web-components/lib/style/index.css'; // 少量公共样式
 import 'tdesign-web-components';
 ```
 
+如果使用vite打包工具，需要在`vite.config.ts`中添加以下配置，设置vite解析`jsx`的逻辑：
+
+```javascript
+import { defineConfig } from 'vite'
+export default defineConfig({
++   esbuild: {
++     jsxFactory: 'h',
++     jsxFragment: 'h.f',
++   },
+})
+```
+
+如果使用webpack打包工具，需要在`babel`中设置`jsx`的解析逻辑：
+
+```json
+{
+  "presets": [
+    ...
++   [
++     "@babel/preset-react",
++     {
++       "pragma": "h",
++       "pragmaFrag": "h.f"
++     }
++   ]
++  ],
+   ...
+}
+```
+
 ### 更改主题
 
 由于原始样式基于 less 编写，需要自行处理 less 文件的编译（例如安装 less、less-loader）
@@ -79,9 +99,10 @@ module.exports = {
   rules: [{
     test: /\.less$/,
     use: [{
-      loader: 'style-loader',
-    }, {
-      loader: 'css-loader', // translates CSS into CommonJS
+      loader: 'css-loader',
+      options: {
++       exportType: 'string', // translates CSS into string
+      },
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
@@ -93,6 +114,7 @@ module.exports = {
 +       },
 +     },
     }],
++   include: /node_modules\/tdesign-web-components/, // 建议对组件库中的less单独处理
   }],
 }
 ```

src/common/portal.tsx

@@ -40,6 +40,8 @@ export function getAttach(attach: PortalProps['attach'], triggerNode?: HTMLEleme
 export default class Portal extends Component<PortalProps> {
   static css = [];
 
+  static isLightDOM = true;
+
   static propTypes = {
     attach: [Object, Function, String, Boolean],
     triggerNode: Object,

src/dropdown/README.md

@@ -12,7 +12,7 @@ spline: navigation
 
 {{ base }}
 
-### 按钮下拉菜单
+<!-- ### 按钮下拉菜单
 
 普通按钮触发下拉菜单。常用于操作收纳场景。
 
@@ -70,7 +70,7 @@ spline: navigation
 
 下拉菜单操作项支持通过传入Children的方式传递操作项。
 
-{{ child }}
+{{ child }} -->
 
 ## API
 ### Dropdown Props

src/input/input.tsx

@@ -388,7 +388,7 @@ export default class Input extends Component<InputProps> {
         <t-icon-close-circle-filled
           onMouseDown={(e) => e.preventDefault()}
           name={'close-circle-filled'}
-          cls={classname(
+          innerClass={classname(
             `${classPrefix}-input__suffix-clear`,
             `${classPrefix}-input__suffix`,
             `${classPrefix}-input__suffix-icon`,
@@ -404,7 +404,7 @@ export default class Input extends Component<InputProps> {
           <t-icon-browse-off
             onMouseDown={(e) => e.preventDefault()}
             onClick={this.handlePasswordVisible}
-            cls={classname(
+            innerClass={classname(
               `${classPrefix}-input__suffix-clear`,
               `${classPrefix}-input__suffix`,
               `${classPrefix}-input__suffix-icon`,
@@ -417,7 +417,7 @@ export default class Input extends Component<InputProps> {
           <t-icon-browse
             onMouseDown={(e) => e.preventDefault()}
             onClick={this.handlePasswordVisible}
-            cls={classname(
+            innerClass={classname(
               `${classPrefix}-input__suffix-clear`,
               `${classPrefix}-input__suffix`,
               `${classPrefix}-input__suffix-icon`,

src/notification/Notification.tsx

@@ -98,14 +98,14 @@ export default class Notification extends Component<NotificationProps> {
     if (theme && theme === 'success') {
       return (
         <IconWrapper>
-          {convertToLightDomNode(<t-icon-check-circle-filled cls={`${getClassPrefix()}-is-success`} />)}
+          {convertToLightDomNode(<t-icon-check-circle-filled innerClass={`${getClassPrefix()}-is-success`} />)}
         </IconWrapper>
       );
     }
     if (theme && ['info', 'warning', 'error'].indexOf(theme) >= 0) {
       return (
         <IconWrapper>
-          {convertToLightDomNode(<t-icon-info-circle-filled cls={`${getClassPrefix()}-is-${theme}`} />)}
+          {convertToLightDomNode(<t-icon-info-circle-filled innerClass={`${getClassPrefix()}-is-${theme}`} />)}
         </IconWrapper>
       );
     }
@@ -118,7 +118,7 @@ export default class Notification extends Component<NotificationProps> {
         this.props.closeBtn &&
         convertToLightDomNode(
           <t-icon-close
-            cls={`${this.className}-icon-close`}
+            innerClass={`${this.className}-icon-close`}
             onClick={(e) => {
               this.props.onCloseBtnClick?.({ e });
             }}

src/popconfirm/popconfirm.tsx

@@ -1,4 +1,4 @@
-import 'tdesign-web-components/popup';
+import '../popup';
 import './popcontent';
 
 import { Component, OmiProps, tag } from 'omi';