feat: added sub component style support

.gitignore

@@ -1,9 +1,8 @@
 # Project exclude paths
 /build/node_modules/
 /node_modules/
-/packages/core/node_modules/
-/packages/v-model/node_modules/
-/play/v-model/node_modules/
+/packages/**/node_modules/
+/play/**/node_modules/
 /play/node_modules/
 /utils/node_modules/
-dist
+dist

build/dir.ts

@@ -1,10 +1,12 @@
 export const entry = {
-  'v-model': '../packages/v-model/index.ts', // @unplugin-vue-ce/vModel
+  'sub-style': '../packages/sub-style/index.ts', // @unplugin-vue-ce/sub-style
+  'v-model': '../packages/v-model/index.ts', // @unplugin-vue-ce/v-model
   'utils': '../utils/index.ts', // @unplugin-vue-ce/utils
-  'index': '../packages/core/index.ts', // @unplugin-vue-ce
+  'index': '../packages/core/index.ts', // unplugin-vue-ce
 }
 
 export const entryPkg = {
   'v-model': '../packages/v-model',
+  'sub-style': '../packages/sub-style',
   'utils': '../utils',
 }

build/index.ts

@@ -30,7 +30,7 @@ if (buildMode === 'prod') {
     const config = JSON.parse(JSON.stringify(baseConfig))
     config.entry = [entry[entryKey]]
     // config.outDir = entry[entryKey]
-    config.external = [/@baiwusanyu/]
+    config.external = [/@unplugin-vue-ce/]
     config.outDir = entryKey === 'index'
       ? path.resolve(process.cwd(), '../dist') : path.resolve(process.cwd(), `../dist/${entryKey}`)
     config.dts = true
@@ -50,7 +50,7 @@ if (buildMode === 'dev') {
     config.dts = false
     config.minify = false
     config.watch = ['../packages/**/**.ts']
-    config.noExternal = [/@baiwusanyu/]
+    config.noExternal = [/@unplugin-vue-ce/]
     configOptions.push(config)
   }
 }

build/publish.ts

@@ -4,5 +4,6 @@ import { runTask } from './utils'
 export default series(
   runTask('publish @unplugin-vue-ce/utils', 'cd dist/utils && pnpm run publish:npm'),
   runTask('publish @unplugin-vue-ce/v-model', 'cd dist/v-model && pnpm run publish:npm'),
+  runTask('publish @unplugin-vue-ce/sub-style', 'cd dist/sub-style && pnpm run publish:npm'),
   runTask('publish unplugin-vue-ce', 'cd dist && pnpm run publish:npm'),
 )

package.json

@@ -49,6 +49,7 @@
     "lint:fix": "eslint --fix ./ --ext .vue,.js,.ts,.jsx,.tsx,.json ",
     "dev": "pnpm run --filter @unplugin-vue-ce/build dev",
     "dev:v-model": "pnpm run --filter @unplugin-vue-ce/play-v-model dev",
+    "dev:sub-style": "pnpm run --filter @unplugin-vue-ce/play-sub-style dev",
     "build": "pnpm run --filter @unplugin-vue-ce/build build",
     "release": "bumpp package.json packages/*/package.json utils/package.json --commit --push --tag",
     "publish:npm": "pnpm publish --no-git-checks --access public",
@@ -69,6 +70,7 @@
     "vue": "^3.3.2"
   },
   "dependencies": {
+    "@unplugin-vue-ce/sub-style": "workspace:*",
     "@unplugin-vue-ce/utils": "workspace:*",
     "@unplugin-vue-ce/v-model": "workspace:*",
     "ansi-colors": "^4.1.3",

packages/core/index.ts

@@ -1,10 +1,11 @@
 import { unVueCEVModel } from '@unplugin-vue-ce/v-model'
+import { unVueCESubStyle } from '@unplugin-vue-ce/sub-style'
 import { createUnplugin } from 'unplugin'
-import type { Options } from '@unplugin-vue-ce/v-model/types'
-const unplugin = createUnplugin<Options>(() => {
-  return {
-    ...unVueCEVModel(),
-  }
+const unplugin = createUnplugin(() => {
+  return [
+    unVueCEVModel(),
+    unVueCESubStyle(),
+  ]
 })
 export const viteVueCE = unplugin.vite
 export const rollupVueCE = unplugin.rollup

packages/sub-style/README.md

@@ -0,0 +1,94 @@
+# @unplugin-vue-ce/sub-style
+
+## Install
+
+```bash
+npm i @unplugin-vue-ce/sub-style
+```
+or
+```bash
+yarn add @unplugin-vue-ce/sub-style
+```
+or
+```bash
+pnpm add @unplugin-vue-ce/sub-style
+```
+
+## Usage
+<details>
+<summary>Vite</summary>
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
+import vue from '@vitejs/plugin-vue'
+import type { PluginOption } from 'vite'
+export default defineConfig({
+  plugins: [
+    vue(),
+    viteVueCESubStyle() as PluginOption,
+  ],
+})
+```
+
+</details>
+<br>
+<details>
+<summary>Rollup</summary>
+
+```ts
+// rollup.config.js
+import { rollupVueCESubStyle } from '@unplugin-vue-ce/sub-style'
+export default {
+  plugins: [
+    rollupVueCESubStyle(),
+  ],
+}
+```
+
+</details>
+<br>
+<details>
+<summary>Webpack</summary>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle(),
+  ],
+}
+```
+</details>
+<br>
+<details>
+<summary>Vue CLI</summary>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}),
+    ],
+  },
+}
+```
+
+</details>
+<br>
+<details>
+<summary>ESBuild</summary>
+
+```ts
+// esbuild.config.js
+import { build } from 'esbuild'
+import { esbuildVueCESubStyle } from '@unplugin-vue-ce/sub-style'
+
+build({
+  plugins: [esbuildVueCESubStyle()],
+})
+```
+</details>

packages/sub-style/index.ts

@@ -0,0 +1,44 @@
+import { createUnplugin } from 'unplugin'
+import { setGlobalPrefix } from 'baiwusanyu-utils'
+import MagicString from 'magic-string'
+import { NAME } from '@unplugin-vue-ce/utils'
+import { injectVueRuntime } from './src/inject-vue-runtime'
+
+export const unVueCESubStyle = (): any => {
+  setGlobalPrefix(`[${NAME}]:`)
+  return {
+    name: `${NAME}:sub-style`,
+    enforce: 'post',
+    async transform(code: string, id: string) {
+      const mgcStr = new MagicString(code)
+
+      // build only
+      if (id.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'))
+        injectVueRuntime(mgcStr)
+
+      // build only
+      if (id.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
+        injectVueRuntime(mgcStr)
+
+      // dev only
+      if (id.includes('.vite/deps/vue.js'))
+        injectVueRuntime(mgcStr)
+
+      return {
+        code: mgcStr.toString(),
+        get map() {
+          return mgcStr.generateMap({
+            source: id,
+            includeContent: true,
+            hires: true,
+          })
+        },
+      }
+    },
+  }
+}
+const unplugin = createUnplugin(unVueCESubStyle)
+export const viteVueCESubStyle = unplugin.vite
+export const rollupVueCESubStyle = unplugin.rollup
+export const webpackVueCESubStyle = unplugin.webpack
+export const esbuildVueCESubStyle = unplugin.esbuild

packages/sub-style/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@unplugin-vue-ce/sub-style",
+  "description": "A vue plugin that extends vue's Custom Element capabilities (sub component style)",
+  "private": false,
+  "type": "module",
+  "version": "0.0.3-beta.2",
+  "packageManager": "pnpm@6.32.4",
+  "keywords": [
+    "typescript",
+    "javascript",
+    "utils",
+    "vue",
+    "vue3",
+    "vite",
+    "react",
+    "web component"
+  ],
+  "license": "MIT",
+  "author": "baiwusanyu-c",
+  "homepage": "https://github.com/baiwusanyu-c",
+  "repository": "https://github.com/baiwusanyu-c/unplugin-vue-ce",
+  "bugs": "https://github.com/baiwusanyu-c/unplugin-vue-ce/issues",
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.js",
+      "require": "./index.cjs",
+      "import": "./index.ts"
+    }
+  },
+  "files": [
+    "index.js",
+    "index.cjs",
+    "index.d.ts",
+    "README.md"
+  ],
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./*",
+        "./index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "publish:npm": "pnpm publish --no-git-checks --access public"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "baiwusanyu-utils": "^1.0.8",
+    "estree-walker-ts": "^1.0.0",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.1",
+    "magic-string": "^0.30.0",
+    "unplugin": "^1.3.1",
+    "vue": "^3.3.2"
+  },
+  "dependencies": {
+    "@unplugin-vue-ce/utils": "workspace:*",
+    "baiwusanyu-utils": "^1.0.12",
+    "estree-walker-ts": "^1.0.0",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.1",
+    "magic-string": "^0.30.0",
+    "unplugin": "^1.3.1",
+    "vue": "^3.3.2"
+  }
+}