Props hoc

examples/sites/demos/pc/app/button/basic-usage.vue

@@ -2,12 +2,14 @@
   <tiny-layout>
     <p>基本按钮</p>
     <tiny-row>
-      <tiny-button type="primary"> 主要按钮 </tiny-button>
-      <tiny-button> 次要按钮 </tiny-button>
-      <tiny-button type="success"> 成功按钮 </tiny-button>
-      <tiny-button type="info"> 信息按钮 </tiny-button>
-      <tiny-button type="warning"> 警告按钮 </tiny-button>
-      <tiny-button type="danger"> 危险按钮 </tiny-button>
+      <config-provider :design="design">
+        <tiny-button type="primary" tiny_experimetal_props_hoc> 主要按钮 </tiny-button>
+        <tiny-button> 次要按钮 </tiny-button>
+        <tiny-button type="success"> 成功按钮 </tiny-button>
+        <tiny-button type="info"> 信息按钮 </tiny-button>
+        <tiny-button type="warning"> 警告按钮 </tiny-button>
+        <tiny-button type="danger"> 危险按钮 </tiny-button>
+      </config-provider>
     </tiny-row>
     <p>朴素按钮</p>
     <tiny-row>
@@ -40,14 +42,15 @@
 </template>
 
 <script>
-import { TinyButton, TinyLayout, TinyRow } from '@opentiny/vue'
+import { TinyButton, TinyLayout, TinyRow, ConfigProvider } from '@opentiny/vue'
 import { IconDeleteL, IconYes, IconEditor, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyButton,
     TinyLayout,
-    TinyRow
+    TinyRow,
+    ConfigProvider
   },
   data() {
     return {
@@ -56,7 +59,16 @@ export default {
       IconEditor: IconEditor(),
       IconMail: IconMail(),
       IconStarO: IconStarO(),
-      IconSearch: IconSearch()
+      IconSearch: IconSearch(),
+      design: {
+        components: {
+          Button: {
+            props: {
+              size: 'mini'
+            }
+          }
+        }
+      }
     }
   }
 }

examples/vue3/package.json

@@ -12,12 +12,13 @@
     "build": "vite build",
     "preview": "vite preview",
     "test:e2e": "playwright test",
-    "test:unit": "vitest",
+    "test:unit": "vitest --ui",
     "install:browser": "playwright install",
     "codegen": "playwright codegen localhost:3101"
   },
   "devDependencies": {
     "@opentiny-internal/playwright-config": "workspace:^1.0.1-beta.0",
+    "@opentiny-internal/unplugin-hoc-plugin": "workspace:*",
     "@opentiny-internal/unplugin-virtual-template": "workspace:*",
     "@opentiny/vue": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
@@ -37,7 +38,7 @@
     "@unocss/transformer-directives": "^0.48.0",
     "@vitejs/plugin-vue": "4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@vitest/ui": "^0.31.0",
+    "@vitest/ui": "^2.1.9",
     "@vue/runtime-core": "3.2.31",
     "@vue/test-utils": "^2.2.7",
     "jsdom": "^21.0.0",
@@ -58,4 +59,4 @@
     "vue": "^3.3.9",
     "vue-i18n": "^9.1.7"
   }
-}
+}

examples/vue3/vite.config.ts

@@ -32,6 +32,7 @@ export default defineConfig((config) => {
     },
     plugins: [
       virtualTemplatePlugin({ include: ['**/packages/vue/**/src/index.ts'], env }),
+      // hocPlugin({}),
       vue3Plugin({
         include: [/\.vue$/, /\.md$/]
       }),

internals/unplugin-hoc-plugin/README.md

@@ -0,0 +1,116 @@
+# @opentiny/unplugin-virtual-template
+
+## Install
+
+```bash
+npm i @opentiny/unplugin-virtual-template
+```
+
+<details>
+<summary>Vite</summary><br>
+
+```ts
+// vite.config.ts
+import Starter from '@opentiny/unplugin-virtual-template/vite'
+
+export default defineConfig({
+  plugins: [
+    Starter({
+      /* options */
+    })
+  ]
+})
+```
+
+Example: [`playground/`](./playground/)
+
+<br></details>
+
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import Starter from '@opentiny/unplugin-virtual-template/rollup'
+
+export default {
+  plugins: [
+    Starter({
+      /* options */
+    })
+  ]
+}
+```
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('@opentiny/unplugin-virtual-template/webpack')({
+      /* options */
+    })
+  ]
+}
+```
+
+<br></details>
+
+<details>
+<summary>Nuxt</summary><br>
+
+```ts
+// nuxt.config.js
+export default {
+  buildModules: [
+    [
+      '@opentiny/unplugin-virtual-template/nuxt',
+      {
+        /* options */
+      }
+    ]
+  ]
+}
+```
+
+> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('@opentiny/unplugin-virtual-template/webpack')({
+        /* options */
+      })
+    ]
+  }
+}
+```
+
+<br></details>
+
+<details>
+<summary>esbuild</summary><br>
+
+```ts
+// esbuild.config.js
+import { build } from 'esbuild'
+import Starter from '@opentiny/unplugin-virtual-template/esbuild'
+
+build({
+  plugins: [Starter()]
+})
+```
+
+<br></details>

internals/unplugin-hoc-plugin/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@opentiny-internal/unplugin-hoc-plugin",
+  "type": "module",
+  "version": "0.1.1-beta.0",
+  "private": true,
+  "description": "Register global imports on demand for Vite and Webpack",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.cjs",
+      "import": "./dist/vite.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "require": "./dist/webpack.cjs",
+      "import": "./dist/webpack.js"
+    },
+    "./rollup": {
+      "types": "./dist/rollup.d.ts",
+      "require": "./dist/rollup.cjs",
+      "import": "./dist/rollup.js"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild.d.ts",
+      "require": "./dist/esbuild.cjs",
+      "import": "./dist/esbuild.js"
+    },
+    "./nuxt": {
+      "types": "./dist/nuxt.d.ts",
+      "require": "./dist/nuxt.cjs",
+      "import": "./dist/nuxt.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "require": "./dist/types.cjs",
+      "import": "./dist/types.js"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch src",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build",
+    "release": "bumpp && npm publish",
+    "start": "esno src/index.ts",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@rollup/pluginutils": "^5.0.2",
+    "magic-string": "^0.27.0",
+    "unplugin": "^1.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.13",
+    "bumpp": "^8.2.1",
+    "chalk": "^5.2.0",
+    "eslint": "^8.29.0",
+    "esno": "^4.7.0",
+    "fast-glob": "^3.2.12",
+    "nodemon": "^2.0.20",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.7.3",
+    "tsup": "7.2.0",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:",
+    "webpack": "^5.75.0"
+  }
+}

internals/unplugin-hoc-plugin/scripts/postbuild.ts

@@ -0,0 +1,24 @@
+/* eslint-disable no-console */
+import { basename, dirname, resolve } from 'node:path'
+import { promises as fs } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import fg from 'fast-glob'
+import chalk from 'chalk'
+
+async function run() {
+  // fix cjs exports
+  const files = await fg('*.cjs', {
+    ignore: ['chunk-*'],
+    absolute: true,
+    cwd: resolve(dirname(fileURLToPath(import.meta.url)), '../dist')
+  })
+  for (const file of files) {
+    console.log(chalk.cyan.inverse(' POST '), `Fix ${basename(file)}`)
+    let code = await fs.readFile(file, 'utf8')
+    code = code.replace('exports.default =', 'module.exports =')
+    code += 'exports.default = module.exports;'
+    await fs.writeFile(file, code)
+  }
+}
+
+void run()

internals/unplugin-hoc-plugin/src/esbuild.ts

@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.esbuild

internals/unplugin-hoc-plugin/src/index.ts

@@ -0,0 +1,49 @@
+import { createUnplugin } from 'unplugin'
+import { createFilter } from '@rollup/pluginutils'
+import type { UserOptions } from './types'
+
+export default createUnplugin<UserOptions>((options = {}) => {
+  const filter = createFilter(options.include || ['**/*'], options.exclude || [])
+
+  return {
+    name: '@opentiny/unplugin-hoc-plugin',
+    enforce: 'pre',
+    transformInclude(id) {
+      return filter(id)
+    },
+    transform(code, id) {
+      const [filename, query] = id.split('?', 2)
+      // console.log(filename, query)
+      if (filename.endsWith('.vue') && query) {
+        // console.log(id)
+        const params = new URLSearchParams(query)
+        if (params.has('withPropsHOC')) {
+          // console.log('enter')
+          // 替换 import 语句
+          const newCode = code.replace(
+            /import\s*{([^}]+)}\s*from\s*['"]\@opentiny\/vue-common['"]/g,
+            (match, imports) => {
+              const processedImports = imports
+                .split(',')
+                .map((specifier) => {
+                  const trimmed = specifier.trim()
+                  return trimmed === 'defineComponent'
+                    ? 'WithDesignConfigPropsDefineComponent as defineComponent'
+                    : trimmed
+                })
+                .join(', ')
+
+              return `import { ${processedImports} } from '@opentiny/vue-common';`
+            }
+          )
+
+          return {
+            code: newCode,
+            map: null // 可选 source map
+          }
+        }
+      }
+      return null
+    }
+  }
+})

internals/unplugin-hoc-plugin/src/nuxt.ts

@@ -0,0 +1,16 @@
+import type { UserOptions } from './types'
+import unplugin from '.'
+
+export default function (options: UserOptions = {}, nuxt: any) {
+  // install webpack plugin
+  nuxt.hook('webpack:config', (config: any) => {
+    config.plugins = config.plugins || []
+    config.plugins.unshift(unplugin.webpack(options))
+  })
+
+  // install vite plugin
+  nuxt.hook('vite:extendConfig', (config: any) => {
+    config.plugins = config.plugins || []
+    config.plugins.push(unplugin.vite(options))
+  })
+}