From 6004de72cbd74bb533cf8d622d94e135ffe0c9f4 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Wed, 17 May 2023 18:06:51 +0800 Subject: [PATCH 1/4] chore: added sub components style feature --- .gitignore | 3 +- build/dir.ts | 6 +- build/publish.ts | 1 + package.json | 1 + packages/core/index.ts | 5 +- packages/sub-style/README.md | 94 ++++++++++++++++++++++++++++ packages/sub-style/index.ts | 31 +++++++++ packages/sub-style/package.json | 72 +++++++++++++++++++++ packages/v-model/index.ts | 5 +- packages/v-model/src/option/index.ts | 13 ---- packages/v-model/types.ts | 13 ---- pnpm-lock.yaml | 72 ++++++++++++++++++--- utils/constant.ts | 3 +- 13 files changed, 275 insertions(+), 44 deletions(-) create mode 100644 packages/sub-style/README.md create mode 100644 packages/sub-style/index.ts create mode 100644 packages/sub-style/package.json delete mode 100644 packages/v-model/src/option/index.ts delete mode 100644 packages/v-model/types.ts diff --git a/.gitignore b/.gitignore index 74af0e3..f89639b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,7 @@ # Project exclude paths /build/node_modules/ /node_modules/ -/packages/core/node_modules/ -/packages/v-model/node_modules/ +/packages/**/node_modules/ /play/v-model/node_modules/ /play/node_modules/ /utils/node_modules/ diff --git a/build/dir.ts b/build/dir.ts index e296ff3..78c1789 100644 --- a/build/dir.ts +++ b/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', } diff --git a/build/publish.ts b/build/publish.ts index d570272..1314d84 100644 --- a/build/publish.ts +++ b/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'), ) diff --git a/package.json b/package.json index d2863d6..8c5b0d8 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,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", diff --git a/packages/core/index.ts b/packages/core/index.ts index 3a8c218..d79fda9 100644 --- a/packages/core/index.ts +++ b/packages/core/index.ts @@ -1,9 +1,10 @@ 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(() => { +const unplugin = createUnplugin(() => { return { ...unVueCEVModel(), + ...unVueCESubStyle(), } }) export const viteVueCE = unplugin.vite diff --git a/packages/sub-style/README.md b/packages/sub-style/README.md new file mode 100644 index 0000000..147e630 --- /dev/null +++ b/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 +
+Vite + +```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, + ], +}) +``` + +
+
+
+Rollup + +```ts +// rollup.config.js +import { rollupVueCESubStyle } from '@unplugin-vue-ce/sub-style' +export default { + plugins: [ + rollupVueCESubStyle(), + ], +} +``` + +
+
+
+Webpack + +```ts +// webpack.config.js +module.exports = { + /* ... */ + plugins: [ + require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle(), + ], +} +``` +
+
+
+Vue CLI + +```ts +// vue.config.js +module.exports = { + configureWebpack: { + plugins: [ + require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}), + ], + }, +} +``` + +
+
+
+ESBuild + +```ts +// esbuild.config.js +import { build } from 'esbuild' +import { esbuildVueCESubStyle } from '@unplugin-vue-ce/sub-style' + +build({ + plugins: [esbuildVueCESubStyle()], +}) +``` +
\ No newline at end of file diff --git a/packages/sub-style/index.ts b/packages/sub-style/index.ts new file mode 100644 index 0000000..dcb28d4 --- /dev/null +++ b/packages/sub-style/index.ts @@ -0,0 +1,31 @@ +import { createUnplugin } from 'unplugin' +import { setGlobalPrefix } from 'baiwusanyu-utils' +import MagicString from 'magic-string' +import { NAME } from '@unplugin-vue-ce/utils' + +export const unVueCESubStyle = (): any => { + setGlobalPrefix(`[${NAME}]:`) + return { + name: `${NAME}:sub-style`, + enforce: 'post', + async transform(code: string, id: string) { + const mgcStr = new MagicString(code) + + 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 diff --git a/packages/sub-style/package.json b/packages/sub-style/package.json new file mode 100644 index 0000000..e5ab908 --- /dev/null +++ b/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" + } +} diff --git a/packages/v-model/index.ts b/packages/v-model/index.ts index 85a03d7..d2dbb53 100644 --- a/packages/v-model/index.ts +++ b/packages/v-model/index.ts @@ -1,10 +1,9 @@ import { createUnplugin } from 'unplugin' import { setGlobalPrefix } from 'baiwusanyu-utils' import MagicString from 'magic-string' +import { NAME } from '@unplugin-vue-ce/utils' import { injectIsCEModifiers } from './src/inject-vue-shared' import { injectVueRuntime } from './src/inject-vue-runtime' -import type { Options } from './types' -const NAME = 'unplugin-vue-ce' export const unVueCEVModel = (): any => { setGlobalPrefix(`[${NAME}]:`) return { @@ -45,7 +44,7 @@ export const unVueCEVModel = (): any => { }, } } -const unplugin = createUnplugin(unVueCEVModel) +const unplugin = createUnplugin(unVueCEVModel) export const viteVueCEVModel = unplugin.vite export const rollupVueCEVModel = unplugin.rollup export const webpackVueCEVModel = unplugin.webpack diff --git a/packages/v-model/src/option/index.ts b/packages/v-model/src/option/index.ts deleted file mode 100644 index 15a772c..0000000 --- a/packages/v-model/src/option/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { extend } from 'baiwusanyu-utils' -import { DEFAULT_EXCLUDE_REG, DEFAULT_INCLUDE_REG } from '@unplugin-vue-ce/utils' -import type { Options } from '../../types' - -const defaultOption: Options = { - include: DEFAULT_INCLUDE_REG, - exclude: DEFAULT_EXCLUDE_REG, -} - -export function initOption(option: Options) { - option = extend(defaultOption, option) - return option -} diff --git a/packages/v-model/types.ts b/packages/v-model/types.ts deleted file mode 100644 index d2e80ed..0000000 --- a/packages/v-model/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { FilterPattern } from '@rollup/pluginutils' - -export interface Options { - /** - * RegExp or glob to match files to be transformed - */ - include?: FilterPattern - - /** - * RegExp or glob to match files to NOT be transformed - */ - exclude?: FilterPattern -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a56368..3efb2a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,9 @@ importers: .: dependencies: + '@unplugin-vue-ce/sub-style': + specifier: workspace:* + version: link:packages/sub-style '@unplugin-vue-ce/utils': specifier: workspace:* version: link:utils @@ -134,6 +137,33 @@ importers: build: {} + packages/sub-style: + dependencies: + '@unplugin-vue-ce/utils': + specifier: workspace:* + version: link:../../utils + baiwusanyu-utils: + specifier: ^1.0.12 + version: 1.0.12(ansi-colors@4.1.3)(hash-sum@2.0.0)(moment@2.29.4) + estree-walker-ts: + specifier: ^1.0.0 + version: 1.0.0 + fast-glob: + specifier: ^3.2.12 + version: 3.2.12 + fs-extra: + specifier: ^11.1.1 + version: 11.1.1 + magic-string: + specifier: ^0.30.0 + version: 0.30.0 + unplugin: + specifier: ^1.3.1 + version: 1.3.1 + vue: + specifier: ^3.3.2 + version: 3.3.2 + packages/v-model: dependencies: '@unplugin-vue-ce/utils': @@ -524,7 +554,7 @@ packages: eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.5)(eslint-plugin-import@2.27.5)(eslint@8.40.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.40.0) eslint-plugin-html: 7.1.0 - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0) eslint-plugin-jsonc: 2.8.0(eslint@8.40.0) eslint-plugin-jsx-a11y: 6.7.1(eslint@8.40.0) eslint-plugin-markdown: 3.0.0(eslint@8.40.0) @@ -3159,7 +3189,7 @@ packages: eslint-plugin-promise: ^6.0.0 dependencies: eslint: 8.40.0 - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0) eslint-plugin-n: 15.7.0(eslint@8.40.0) eslint-plugin-promise: 6.1.1(eslint@8.40.0) dev: true @@ -3184,8 +3214,8 @@ packages: debug: 4.3.4 enhanced-resolve: 5.14.0 eslint: 8.40.0 - eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) + eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0) get-tsconfig: 4.5.0 globby: 13.1.4 is-core-module: 2.12.0 @@ -3198,7 +3228,7 @@ packages: - supports-color dev: true - /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0): + /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint@8.40.0): resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==} engines: {node: '>=4'} peerDependencies: @@ -3223,6 +3253,34 @@ packages: debug: 3.2.7 eslint: 8.40.0 eslint-import-resolver-node: 0.3.7 + transitivePeerDependencies: + - supports-color + dev: true + + /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0): + resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: '*' + eslint-import-resolver-node: '*' + eslint-import-resolver-typescript: '*' + eslint-import-resolver-webpack: '*' + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + eslint: + optional: true + eslint-import-resolver-node: + optional: true + eslint-import-resolver-typescript: + optional: true + eslint-import-resolver-webpack: + optional: true + dependencies: + '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.0.4) + debug: 3.2.7 + eslint: 8.40.0 eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.5)(eslint-plugin-import@2.27.5)(eslint@8.40.0) transitivePeerDependencies: - supports-color @@ -3256,7 +3314,7 @@ packages: htmlparser2: 8.0.1 dev: true - /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0): + /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0): resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==} engines: {node: '>=4'} peerDependencies: @@ -3274,7 +3332,7 @@ packages: doctrine: 2.1.0 eslint: 8.40.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) + eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint@8.40.0) has: 1.0.3 is-core-module: 2.12.0 is-glob: 4.0.3 diff --git a/utils/constant.ts b/utils/constant.ts index 14e1fb4..45b2810 100644 --- a/utils/constant.ts +++ b/utils/constant.ts @@ -1,2 +1 @@ -export const DEFAULT_INCLUDE_REG = [/\.vue$/] -export const DEFAULT_EXCLUDE_REG = [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.dist[\\/]/, /\.html$/] +export const NAME = 'unplugin-vue-ce' From 4495614bd3a4eb61d9b977bf2bcd8b4bae292d47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Wed, 17 May 2023 20:42:06 +0800 Subject: [PATCH 2/4] chore: added sub style feature playground --- .gitignore | 4 +- build/index.ts | 4 +- package.json | 1 + play/sub-style/index.html | 14 ++++++ play/sub-style/package.json | 11 ++++ play/sub-style/src/App.vue | 4 ++ play/sub-style/src/bwsy-bar.vue | 10 ++++ play/sub-style/src/bwsy-ce-foo.ce.vue | 15 ++++++ play/sub-style/src/deep/Child.vue | 19 +++++++ play/sub-style/src/deep/Foo.ce.vue | 13 +++++ play/sub-style/src/deep/GrandChild.vue | 12 +++++ play/sub-style/src/deep/GreatGrandChild.vue | 10 ++++ play/sub-style/src/deep/adwd.vue | 9 ++++ play/sub-style/src/main.ts | 48 ++++++++++++++++++ play/sub-style/src/nested/bar.vue | 11 ++++ play/sub-style/src/nested/baz.vue | 11 ++++ play/sub-style/src/nested/foo.vue | 18 +++++++ play/sub-style/src/nested/vue-app.ce.vue | 7 +++ play/sub-style/src/scoped/CEorNotCE.vue | 40 +++++++++++++++ play/sub-style/src/scoped/InNestedCE.vue | 12 +++++ play/sub-style/src/scoped/OtherComponent.vue | 21 ++++++++ .../src/scoped/YetAnotherComponent.vue | 14 ++++++ play/sub-style/src/scoped/my-component.vue | 16 ++++++ play/sub-style/src/vite-env.d.ts | 1 + play/sub-style/tsconfig.json | 3 ++ play/sub-style/vite.config.ts | 15 ++++++ play/v-model/node_modules/.bin/tsc | 17 ------- play/v-model/node_modules/.bin/tsc.CMD | 12 ----- play/v-model/node_modules/.bin/tsc.ps1 | 41 --------------- play/v-model/node_modules/.bin/tsserver | 17 ------- play/v-model/node_modules/.bin/tsserver.CMD | 12 ----- play/v-model/node_modules/.bin/tsserver.ps1 | 41 --------------- play/v-model/node_modules/.bin/vite | 17 ------- play/v-model/node_modules/.bin/vite.CMD | 12 ----- play/v-model/node_modules/.bin/vite.ps1 | 41 --------------- .../node_modules/.vite/deps/package.json | 3 -- pnpm-lock.yaml | 50 ++++++------------- 37 files changed, 354 insertions(+), 252 deletions(-) create mode 100644 play/sub-style/index.html create mode 100644 play/sub-style/package.json create mode 100644 play/sub-style/src/App.vue create mode 100644 play/sub-style/src/bwsy-bar.vue create mode 100644 play/sub-style/src/bwsy-ce-foo.ce.vue create mode 100644 play/sub-style/src/deep/Child.vue create mode 100644 play/sub-style/src/deep/Foo.ce.vue create mode 100644 play/sub-style/src/deep/GrandChild.vue create mode 100644 play/sub-style/src/deep/GreatGrandChild.vue create mode 100644 play/sub-style/src/deep/adwd.vue create mode 100644 play/sub-style/src/main.ts create mode 100644 play/sub-style/src/nested/bar.vue create mode 100644 play/sub-style/src/nested/baz.vue create mode 100644 play/sub-style/src/nested/foo.vue create mode 100644 play/sub-style/src/nested/vue-app.ce.vue create mode 100644 play/sub-style/src/scoped/CEorNotCE.vue create mode 100644 play/sub-style/src/scoped/InNestedCE.vue create mode 100644 play/sub-style/src/scoped/OtherComponent.vue create mode 100644 play/sub-style/src/scoped/YetAnotherComponent.vue create mode 100644 play/sub-style/src/scoped/my-component.vue create mode 100644 play/sub-style/src/vite-env.d.ts create mode 100644 play/sub-style/tsconfig.json create mode 100644 play/sub-style/vite.config.ts delete mode 100644 play/v-model/node_modules/.bin/tsc delete mode 100644 play/v-model/node_modules/.bin/tsc.CMD delete mode 100644 play/v-model/node_modules/.bin/tsc.ps1 delete mode 100644 play/v-model/node_modules/.bin/tsserver delete mode 100644 play/v-model/node_modules/.bin/tsserver.CMD delete mode 100644 play/v-model/node_modules/.bin/tsserver.ps1 delete mode 100644 play/v-model/node_modules/.bin/vite delete mode 100644 play/v-model/node_modules/.bin/vite.CMD delete mode 100644 play/v-model/node_modules/.bin/vite.ps1 delete mode 100644 play/v-model/node_modules/.vite/deps/package.json diff --git a/.gitignore b/.gitignore index f89639b..fe18269 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ /build/node_modules/ /node_modules/ /packages/**/node_modules/ -/play/v-model/node_modules/ +/play/**/node_modules/ /play/node_modules/ /utils/node_modules/ -dist \ No newline at end of file +dist diff --git a/build/index.ts b/build/index.ts index 7767b6c..235f270 100644 --- a/build/index.ts +++ b/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) } } diff --git a/package.json b/package.json index 8c5b0d8..3d11804 100644 --- a/package.json +++ b/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", diff --git a/play/sub-style/index.html b/play/sub-style/index.html new file mode 100644 index 0000000..07f5569 --- /dev/null +++ b/play/sub-style/index.html @@ -0,0 +1,14 @@ + + + + + + + Vite + Vue + TS + + +
+ + + + diff --git a/play/sub-style/package.json b/play/sub-style/package.json new file mode 100644 index 0000000..6beb10b --- /dev/null +++ b/play/sub-style/package.json @@ -0,0 +1,11 @@ +{ + "name": "@unplugin-vue-ce/play-sub-style", + "private": true, + "type": "module", + "version": "0.0.0", + "scripts": { + "dev": "vite --host", + "build": "vite build", + "preview": "vite preview" + } +} diff --git a/play/sub-style/src/App.vue b/play/sub-style/src/App.vue new file mode 100644 index 0000000..352484b --- /dev/null +++ b/play/sub-style/src/App.vue @@ -0,0 +1,4 @@ + + diff --git a/play/sub-style/src/bwsy-bar.vue b/play/sub-style/src/bwsy-bar.vue new file mode 100644 index 0000000..0671e09 --- /dev/null +++ b/play/sub-style/src/bwsy-bar.vue @@ -0,0 +1,10 @@ + + diff --git a/play/sub-style/src/bwsy-ce-foo.ce.vue b/play/sub-style/src/bwsy-ce-foo.ce.vue new file mode 100644 index 0000000..e469842 --- /dev/null +++ b/play/sub-style/src/bwsy-ce-foo.ce.vue @@ -0,0 +1,15 @@ + + + + diff --git a/play/sub-style/src/deep/Child.vue b/play/sub-style/src/deep/Child.vue new file mode 100644 index 0000000..137754f --- /dev/null +++ b/play/sub-style/src/deep/Child.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/play/sub-style/src/deep/Foo.ce.vue b/play/sub-style/src/deep/Foo.ce.vue new file mode 100644 index 0000000..ea7c521 --- /dev/null +++ b/play/sub-style/src/deep/Foo.ce.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/play/sub-style/src/deep/GrandChild.vue b/play/sub-style/src/deep/GrandChild.vue new file mode 100644 index 0000000..c8c60dc --- /dev/null +++ b/play/sub-style/src/deep/GrandChild.vue @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git a/play/sub-style/src/deep/GreatGrandChild.vue b/play/sub-style/src/deep/GreatGrandChild.vue new file mode 100644 index 0000000..080af1b --- /dev/null +++ b/play/sub-style/src/deep/GreatGrandChild.vue @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/play/sub-style/src/deep/adwd.vue b/play/sub-style/src/deep/adwd.vue new file mode 100644 index 0000000..c56197b --- /dev/null +++ b/play/sub-style/src/deep/adwd.vue @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/play/sub-style/src/main.ts b/play/sub-style/src/main.ts new file mode 100644 index 0000000..a76aed1 --- /dev/null +++ b/play/sub-style/src/main.ts @@ -0,0 +1,48 @@ +/*import { + createApp, + defineCustomElement, +} from '../patches/vue.esm-browser.js';*/ + +import { + createApp, + defineCustomElement, +} from 'vue'; + +/*import App from './App.vue'; +import Foo from './bwsy-ce-foo.ce.vue'; +const app = createApp(App); +customElements.define('bwsy-ce-foo', defineCustomElement(Foo)); +/!*app.config.compilerOptions.isCustomElement = (tag=>{ + return tag === 'bwsy-ce-foo' +})*!/ +app.mount('#app');*/ + + +/*import App from './nested/vue-app.ce.vue' +const app = createApp(App); + +const ceApp = defineCustomElement(App); +customElements.define('vue-app', ceApp); +app.config.compilerOptions.isCustomElement = (tag) => { + return tag === 'vue-app'; +};*/ + +//import App from './nested/vue-app.ce.vue' +/*import App from './deep/Foo.ce.vue' +const app = createApp(App); + +const ceApp = defineCustomElement(App); +customElements.define('vue-app', ceApp); +app.config.compilerOptions.isCustomElement = (tag) => { + return tag === 'vue-app'; +};*/ + +import App from './scoped/my-component.vue' +//const app = createApp(App); + +const ceApp = defineCustomElement(App); +customElements.define('vue-app', ceApp); +/* +app.config.compilerOptions.isCustomElement = (tag) => { + return tag === 'vue-app'; +};*/ diff --git a/play/sub-style/src/nested/bar.vue b/play/sub-style/src/nested/bar.vue new file mode 100644 index 0000000..44f9df8 --- /dev/null +++ b/play/sub-style/src/nested/bar.vue @@ -0,0 +1,11 @@ + + + diff --git a/play/sub-style/src/nested/baz.vue b/play/sub-style/src/nested/baz.vue new file mode 100644 index 0000000..2b88a53 --- /dev/null +++ b/play/sub-style/src/nested/baz.vue @@ -0,0 +1,11 @@ + + + diff --git a/play/sub-style/src/nested/foo.vue b/play/sub-style/src/nested/foo.vue new file mode 100644 index 0000000..2a7a908 --- /dev/null +++ b/play/sub-style/src/nested/foo.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/play/sub-style/src/nested/vue-app.ce.vue b/play/sub-style/src/nested/vue-app.ce.vue new file mode 100644 index 0000000..ab0375c --- /dev/null +++ b/play/sub-style/src/nested/vue-app.ce.vue @@ -0,0 +1,7 @@ + + + diff --git a/play/sub-style/src/scoped/CEorNotCE.vue b/play/sub-style/src/scoped/CEorNotCE.vue new file mode 100644 index 0000000..d6c5b74 --- /dev/null +++ b/play/sub-style/src/scoped/CEorNotCE.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/play/sub-style/src/scoped/InNestedCE.vue b/play/sub-style/src/scoped/InNestedCE.vue new file mode 100644 index 0000000..46d9823 --- /dev/null +++ b/play/sub-style/src/scoped/InNestedCE.vue @@ -0,0 +1,12 @@ + + + + diff --git a/play/sub-style/src/scoped/OtherComponent.vue b/play/sub-style/src/scoped/OtherComponent.vue new file mode 100644 index 0000000..8a24eca --- /dev/null +++ b/play/sub-style/src/scoped/OtherComponent.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/play/sub-style/src/scoped/YetAnotherComponent.vue b/play/sub-style/src/scoped/YetAnotherComponent.vue new file mode 100644 index 0000000..21fbd6e --- /dev/null +++ b/play/sub-style/src/scoped/YetAnotherComponent.vue @@ -0,0 +1,14 @@ + + + + + diff --git a/play/sub-style/src/scoped/my-component.vue b/play/sub-style/src/scoped/my-component.vue new file mode 100644 index 0000000..f21b59c --- /dev/null +++ b/play/sub-style/src/scoped/my-component.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/play/sub-style/src/vite-env.d.ts b/play/sub-style/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/play/sub-style/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/play/sub-style/tsconfig.json b/play/sub-style/tsconfig.json new file mode 100644 index 0000000..4082f16 --- /dev/null +++ b/play/sub-style/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig.json" +} diff --git a/play/sub-style/vite.config.ts b/play/sub-style/vite.config.ts new file mode 100644 index 0000000..e6b16ce --- /dev/null +++ b/play/sub-style/vite.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import { viteVueCE } from '../../dist' +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue({ + customElement: true, + }), + viteVueCE(), + ], + build: { + minify: false, + }, +}) diff --git a/play/v-model/node_modules/.bin/tsc b/play/v-model/node_modules/.bin/tsc deleted file mode 100644 index a5b9034..0000000 --- a/play/v-model/node_modules/.bin/tsc +++ /dev/null @@ -1,17 +0,0 @@ -#!/bin/sh -basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") - -case `uname` in - *CYGWIN*) basedir=`cygpath -w "$basedir"`;; -esac - -if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -else - export NODE_PATH="$NODE_PATH:/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -fi -if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" "$@" -else - exec node "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" "$@" -fi diff --git a/play/v-model/node_modules/.bin/tsc.CMD b/play/v-model/node_modules/.bin/tsc.CMD deleted file mode 100644 index ca8367b..0000000 --- a/play/v-model/node_modules/.bin/tsc.CMD +++ /dev/null @@ -1,12 +0,0 @@ -@SETLOCAL -@IF NOT DEFINED NODE_PATH ( - @SET "NODE_PATH=D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -) ELSE ( - @SET "NODE_PATH=%NODE_PATH%;D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -) -@IF EXIST "%~dp0\node.exe" ( - "%~dp0\node.exe" "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsc" %* -) ELSE ( - @SET PATHEXT=%PATHEXT:;.JS;=;% - node "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsc" %* -) diff --git a/play/v-model/node_modules/.bin/tsc.ps1 b/play/v-model/node_modules/.bin/tsc.ps1 deleted file mode 100644 index 42381f4..0000000 --- a/play/v-model/node_modules/.bin/tsc.ps1 +++ /dev/null @@ -1,41 +0,0 @@ -#!/usr/bin/env pwsh -$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent - -$exe="" -$pathsep=":" -$env_node_path=$env:NODE_PATH -$new_node_path="D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) { - # Fix case when both the Windows and Linux builds of Node - # are installed in the same directory - $exe=".exe" - $pathsep=";" -} else { - $new_node_path="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -} -if ([string]::IsNullOrEmpty($env_node_path)) { - $env:NODE_PATH=$new_node_path -} else { - $env:NODE_PATH="$env_node_path$pathsep$new_node_path" -} - -$ret=0 -if (Test-Path "$basedir/node$exe") { - # Support pipeline input - if ($MyInvocation.ExpectingInput) { - $input | & "$basedir/node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args - } else { - & "$basedir/node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args - } - $ret=$LASTEXITCODE -} else { - # Support pipeline input - if ($MyInvocation.ExpectingInput) { - $input | & "node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args - } else { - & "node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsc" $args - } - $ret=$LASTEXITCODE -} -$env:NODE_PATH=$env_node_path -exit $ret diff --git a/play/v-model/node_modules/.bin/tsserver b/play/v-model/node_modules/.bin/tsserver deleted file mode 100644 index 7c36596..0000000 --- a/play/v-model/node_modules/.bin/tsserver +++ /dev/null @@ -1,17 +0,0 @@ -#!/bin/sh -basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") - -case `uname` in - *CYGWIN*) basedir=`cygpath -w "$basedir"`;; -esac - -if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -else - export NODE_PATH="$NODE_PATH:/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -fi -if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" "$@" -else - exec node "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" "$@" -fi diff --git a/play/v-model/node_modules/.bin/tsserver.CMD b/play/v-model/node_modules/.bin/tsserver.CMD deleted file mode 100644 index faef55d..0000000 --- a/play/v-model/node_modules/.bin/tsserver.CMD +++ /dev/null @@ -1,12 +0,0 @@ -@SETLOCAL -@IF NOT DEFINED NODE_PATH ( - @SET "NODE_PATH=D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -) ELSE ( - @SET "NODE_PATH=%NODE_PATH%;D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -) -@IF EXIST "%~dp0\node.exe" ( - "%~dp0\node.exe" "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsserver" %* -) ELSE ( - @SET PATHEXT=%PATHEXT:;.JS;=;% - node "%~dp0\..\..\..\..\node_modules\.pnpm\typescript@5.0.4\node_modules\typescript\bin\tsserver" %* -) diff --git a/play/v-model/node_modules/.bin/tsserver.ps1 b/play/v-model/node_modules/.bin/tsserver.ps1 deleted file mode 100644 index c8716f9..0000000 --- a/play/v-model/node_modules/.bin/tsserver.ps1 +++ /dev/null @@ -1,41 +0,0 @@ -#!/usr/bin/env pwsh -$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent - -$exe="" -$pathsep=":" -$env_node_path=$env:NODE_PATH -$new_node_path="D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) { - # Fix case when both the Windows and Linux builds of Node - # are installed in the same directory - $exe=".exe" - $pathsep=";" -} else { - $new_node_path="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -} -if ([string]::IsNullOrEmpty($env_node_path)) { - $env:NODE_PATH=$new_node_path -} else { - $env:NODE_PATH="$env_node_path$pathsep$new_node_path" -} - -$ret=0 -if (Test-Path "$basedir/node$exe") { - # Support pipeline input - if ($MyInvocation.ExpectingInput) { - $input | & "$basedir/node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args - } else { - & "$basedir/node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args - } - $ret=$LASTEXITCODE -} else { - # Support pipeline input - if ($MyInvocation.ExpectingInput) { - $input | & "node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args - } else { - & "node$exe" "$basedir/../../../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/bin/tsserver" $args - } - $ret=$LASTEXITCODE -} -$env:NODE_PATH=$env_node_path -exit $ret diff --git a/play/v-model/node_modules/.bin/vite b/play/v-model/node_modules/.bin/vite deleted file mode 100644 index 580d781..0000000 --- a/play/v-model/node_modules/.bin/vite +++ /dev/null @@ -1,17 +0,0 @@ -#!/bin/sh -basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") - -case `uname` in - *CYGWIN*) basedir=`cygpath -w "$basedir"`;; -esac - -if [ -z "$NODE_PATH" ]; then - export NODE_PATH="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -else - export NODE_PATH="$NODE_PATH:/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -fi -if [ -x "$basedir/node" ]; then - exec "$basedir/node" "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" "$@" -else - exec node "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" "$@" -fi diff --git a/play/v-model/node_modules/.bin/vite.CMD b/play/v-model/node_modules/.bin/vite.CMD deleted file mode 100644 index 8afbcdf..0000000 --- a/play/v-model/node_modules/.bin/vite.CMD +++ /dev/null @@ -1,12 +0,0 @@ -@SETLOCAL -@IF NOT DEFINED NODE_PATH ( - @SET "NODE_PATH=D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -) ELSE ( - @SET "NODE_PATH=%NODE_PATH%;D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -) -@IF EXIST "%~dp0\node.exe" ( - "%~dp0\node.exe" "%~dp0\..\..\..\..\node_modules\.pnpm\vite@4.3.5\node_modules\vite\bin\vite.js" %* -) ELSE ( - @SET PATHEXT=%PATHEXT:;.JS;=;% - node "%~dp0\..\..\..\..\node_modules\.pnpm\vite@4.3.5\node_modules\vite\bin\vite.js" %* -) diff --git a/play/v-model/node_modules/.bin/vite.ps1 b/play/v-model/node_modules/.bin/vite.ps1 deleted file mode 100644 index 47f38d8..0000000 --- a/play/v-model/node_modules/.bin/vite.ps1 +++ /dev/null @@ -1,41 +0,0 @@ -#!/usr/bin/env pwsh -$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent - -$exe="" -$pathsep=":" -$env_node_path=$env:NODE_PATH -$new_node_path="D:\project-github\unplugin-vue-ce\node_modules\.pnpm\node_modules" -if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) { - # Fix case when both the Windows and Linux builds of Node - # are installed in the same directory - $exe=".exe" - $pathsep=";" -} else { - $new_node_path="/mnt/d/project-github/unplugin-vue-ce/node_modules/.pnpm/node_modules" -} -if ([string]::IsNullOrEmpty($env_node_path)) { - $env:NODE_PATH=$new_node_path -} else { - $env:NODE_PATH="$env_node_path$pathsep$new_node_path" -} - -$ret=0 -if (Test-Path "$basedir/node$exe") { - # Support pipeline input - if ($MyInvocation.ExpectingInput) { - $input | & "$basedir/node$exe" "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args - } else { - & "$basedir/node$exe" "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args - } - $ret=$LASTEXITCODE -} else { - # Support pipeline input - if ($MyInvocation.ExpectingInput) { - $input | & "node$exe" "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args - } else { - & "node$exe" "$basedir/../../../../node_modules/.pnpm/vite@4.3.5/node_modules/vite/bin/vite.js" $args - } - $ret=$LASTEXITCODE -} -$env:NODE_PATH=$env_node_path -exit $ret diff --git a/play/v-model/node_modules/.vite/deps/package.json b/play/v-model/node_modules/.vite/deps/package.json deleted file mode 100644 index 3dbc1ca..0000000 --- a/play/v-model/node_modules/.vite/deps/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "type": "module" -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3efb2a8..5b290b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,6 +65,12 @@ importers: '@types/node': specifier: ^20.1.3 version: 20.1.3 + '@unplugin-vue-ce/play-sub-style': + specifier: workspace:* + version: link:play/sub-style + '@unplugin-vue-ce/play-v-model': + specifier: workspace:* + version: link:play/v-model '@vitejs/plugin-vue': specifier: ^4.2.2 version: 4.2.2(vite@4.3.5)(vue@3.3.2) @@ -191,6 +197,8 @@ importers: specifier: ^3.3.2 version: 3.3.2 + play/sub-style: {} + play/v-model: {} utils: @@ -554,7 +562,7 @@ packages: eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.5)(eslint-plugin-import@2.27.5)(eslint@8.40.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.40.0) eslint-plugin-html: 7.1.0 - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) eslint-plugin-jsonc: 2.8.0(eslint@8.40.0) eslint-plugin-jsx-a11y: 6.7.1(eslint@8.40.0) eslint-plugin-markdown: 3.0.0(eslint@8.40.0) @@ -3189,7 +3197,7 @@ packages: eslint-plugin-promise: ^6.0.0 dependencies: eslint: 8.40.0 - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) eslint-plugin-n: 15.7.0(eslint@8.40.0) eslint-plugin-promise: 6.1.1(eslint@8.40.0) dev: true @@ -3214,8 +3222,8 @@ packages: debug: 4.3.4 enhanced-resolve: 5.14.0 eslint: 8.40.0 - eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0) + eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) get-tsconfig: 4.5.0 globby: 13.1.4 is-core-module: 2.12.0 @@ -3228,7 +3236,7 @@ packages: - supports-color dev: true - /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint@8.40.0): + /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0): resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==} engines: {node: '>=4'} peerDependencies: @@ -3253,34 +3261,6 @@ packages: debug: 3.2.7 eslint: 8.40.0 eslint-import-resolver-node: 0.3.7 - transitivePeerDependencies: - - supports-color - dev: true - - /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0): - resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==} - engines: {node: '>=4'} - peerDependencies: - '@typescript-eslint/parser': '*' - eslint: '*' - eslint-import-resolver-node: '*' - eslint-import-resolver-typescript: '*' - eslint-import-resolver-webpack: '*' - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - eslint: - optional: true - eslint-import-resolver-node: - optional: true - eslint-import-resolver-typescript: - optional: true - eslint-import-resolver-webpack: - optional: true - dependencies: - '@typescript-eslint/parser': 5.59.5(eslint@8.40.0)(typescript@5.0.4) - debug: 3.2.7 - eslint: 8.40.0 eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.5)(eslint-plugin-import@2.27.5)(eslint@8.40.0) transitivePeerDependencies: - supports-color @@ -3314,7 +3294,7 @@ packages: htmlparser2: 8.0.1 dev: true - /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.5)(eslint@8.40.0): + /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0): resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==} engines: {node: '>=4'} peerDependencies: @@ -3332,7 +3312,7 @@ packages: doctrine: 2.1.0 eslint: 8.40.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint@8.40.0) + eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.5)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.40.0) has: 1.0.3 is-core-module: 2.12.0 is-glob: 4.0.3 From c6f4ccf924555f7b2ba820d10707b1975b148219 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Wed, 17 May 2023 23:07:14 +0800 Subject: [PATCH 3/4] chore: inject code to component instance --- packages/core/index.ts | 4 +- packages/sub-style/index.ts | 7 +++- packages/sub-style/src/inject-component.ts | 36 ++++++++++++++++++ packages/sub-style/src/inject-vue-runtime.ts | 37 +++++++++++++++++++ play/sub-style/src/App.vue | 2 +- play/sub-style/src/bwsy-bar.vue | 5 ++- play/sub-style/src/bwsy-ce-foo.ce.vue | 9 +++-- play/sub-style/src/deep/Child.vue | 19 ++++++---- play/sub-style/src/deep/Foo.ce.vue | 10 +++-- play/sub-style/src/deep/GrandChild.vue | 10 +++-- play/sub-style/src/deep/GreatGrandChild.vue | 9 +++-- play/sub-style/src/deep/adwd.vue | 7 ++-- play/sub-style/src/main.ts | 30 +++++++-------- play/sub-style/src/nested/bar.vue | 8 ++-- play/sub-style/src/nested/baz.vue | 8 ++-- play/sub-style/src/nested/foo.vue | 16 ++++---- play/sub-style/src/nested/vue-app.ce.vue | 4 +- play/sub-style/src/scoped/CEorNotCE.vue | 35 +++++++++--------- play/sub-style/src/scoped/InNestedCE.vue | 8 ++-- play/sub-style/src/scoped/OtherComponent.vue | 18 +++++---- .../src/scoped/YetAnotherComponent.vue | 8 ++-- play/sub-style/src/scoped/my-component.vue | 10 +++-- play/v-model/vite.config.ts | 4 +- 23 files changed, 206 insertions(+), 98 deletions(-) create mode 100644 packages/sub-style/src/inject-component.ts create mode 100644 packages/sub-style/src/inject-vue-runtime.ts diff --git a/packages/core/index.ts b/packages/core/index.ts index d79fda9..84e5278 100644 --- a/packages/core/index.ts +++ b/packages/core/index.ts @@ -1,9 +1,9 @@ -import { unVueCEVModel } from '@unplugin-vue-ce/v-model' +// import { unVueCEVModel } from '@unplugin-vue-ce/v-model' import { unVueCESubStyle } from '@unplugin-vue-ce/sub-style' import { createUnplugin } from 'unplugin' const unplugin = createUnplugin(() => { return { - ...unVueCEVModel(), + // ...unVueCEVModel(), ...unVueCESubStyle(), } }) diff --git a/packages/sub-style/index.ts b/packages/sub-style/index.ts index dcb28d4..e494e9a 100644 --- a/packages/sub-style/index.ts +++ b/packages/sub-style/index.ts @@ -2,6 +2,7 @@ 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}]:`) @@ -9,8 +10,12 @@ export const unVueCESubStyle = (): any => { name: `${NAME}:sub-style`, enforce: 'post', async transform(code: string, id: string) { - const mgcStr = new MagicString(code) + console.log(id) + let mgcStr = new MagicString(code) + // dev only + if (id.includes('.vite/deps/vue.js')) + mgcStr = injectVueRuntime(mgcStr) return { code: mgcStr.toString(), get map() { diff --git a/packages/sub-style/src/inject-component.ts b/packages/sub-style/src/inject-component.ts new file mode 100644 index 0000000..680cdc1 --- /dev/null +++ b/packages/sub-style/src/inject-component.ts @@ -0,0 +1,36 @@ +import type { FunctionDeclaration, Identifier, ObjectExpression } from '@babel/types' +import type { MagicStringBase } from 'magic-string-ast' + +let isCreateComponentInstance = false +let VariableDeclarationInst = false +const injectToCompContent = '\n isCEChild: parent && (parent.isCE || parent.isCEChild),\n' + + ' addCEChildStyle:\n' + + ' parent && parent.addCEChildStyle ? parent.addCEChildStyle : null,\n' + + ' removeCEChildStyle:\n' + + ' parent && parent.removeCEChildStyle ? parent.removeCEChildStyle : null,\n' + + ' cecStyleIds: null,' +export function injectToComponent( + mgcStr: MagicStringBase, + node: Identifier | ObjectExpression, + parent: FunctionDeclaration, +) { + if (node.type === 'Identifier' + && parent.type === 'FunctionDeclaration' + && node.name === 'createComponentInstance') + isCreateComponentInstance = true + + if (isCreateComponentInstance + && node.type === 'Identifier' + && node.name === 'instance') + VariableDeclarationInst = true + + if (isCreateComponentInstance + && VariableDeclarationInst + && node.type === 'ObjectExpression') { + isCreateComponentInstance = false + VariableDeclarationInst = false + mgcStr.prependRight(node.start! + 1, injectToCompContent) + } + + return mgcStr +} diff --git a/packages/sub-style/src/inject-vue-runtime.ts b/packages/sub-style/src/inject-vue-runtime.ts new file mode 100644 index 0000000..0aff998 --- /dev/null +++ b/packages/sub-style/src/inject-vue-runtime.ts @@ -0,0 +1,37 @@ +import { walk } from 'estree-walker-ts' +import { parse as babelParse } from '@babel/parser' +import { injectToComponent } from './inject-component' +import type { + BlockStatement, + CallExpression, + FunctionDeclaration, + Identifier, + ObjectExpression, +} from '@babel/types' +import type { MagicStringBase } from 'magic-string-ast' +export function injectVueRuntime( + mgcStr: MagicStringBase, +) { + const ast = babelParse(mgcStr.toString(), { + sourceType: 'module', + plugins: ['typescript'], + }) + + ;(walk as any)(ast, { + enter( + node: Identifier | CallExpression | BlockStatement, + parent: FunctionDeclaration, + ) { + // inject code to component instance + mgcStr = injectToComponent( + mgcStr, + node as Identifier | ObjectExpression, + parent as FunctionDeclaration, + ) + // TODO: inject code to render + // TODO: inject code to apiCustomElement + }, + }) + + return mgcStr +} diff --git a/play/sub-style/src/App.vue b/play/sub-style/src/App.vue index 352484b..208ee53 100644 --- a/play/sub-style/src/App.vue +++ b/play/sub-style/src/App.vue @@ -1,4 +1,4 @@ diff --git a/play/sub-style/src/bwsy-bar.vue b/play/sub-style/src/bwsy-bar.vue index 0671e09..0f8bdb4 100644 --- a/play/sub-style/src/bwsy-bar.vue +++ b/play/sub-style/src/bwsy-bar.vue @@ -1,8 +1,11 @@ + \ No newline at end of file + diff --git a/play/sub-style/src/deep/Foo.ce.vue b/play/sub-style/src/deep/Foo.ce.vue index ea7c521..e025866 100644 --- a/play/sub-style/src/deep/Foo.ce.vue +++ b/play/sub-style/src/deep/Foo.ce.vue @@ -1,13 +1,15 @@ \ No newline at end of file + diff --git a/play/sub-style/src/deep/GrandChild.vue b/play/sub-style/src/deep/GrandChild.vue index c8c60dc..c3a6bad 100644 --- a/play/sub-style/src/deep/GrandChild.vue +++ b/play/sub-style/src/deep/GrandChild.vue @@ -1,12 +1,14 @@ \ No newline at end of file + diff --git a/play/sub-style/src/deep/GreatGrandChild.vue b/play/sub-style/src/deep/GreatGrandChild.vue index 080af1b..b24baf7 100644 --- a/play/sub-style/src/deep/GreatGrandChild.vue +++ b/play/sub-style/src/deep/GreatGrandChild.vue @@ -1,10 +1,13 @@ + + - \ No newline at end of file diff --git a/play/sub-style/src/deep/adwd.vue b/play/sub-style/src/deep/adwd.vue index c56197b..8037e69 100644 --- a/play/sub-style/src/deep/adwd.vue +++ b/play/sub-style/src/deep/adwd.vue @@ -1,9 +1,10 @@ - \ No newline at end of file + diff --git a/play/sub-style/src/main.ts b/play/sub-style/src/main.ts index a76aed1..390f060 100644 --- a/play/sub-style/src/main.ts +++ b/play/sub-style/src/main.ts @@ -1,48 +1,46 @@ -/*import { +/* import { createApp, defineCustomElement, -} from '../patches/vue.esm-browser.js';*/ +} from '../patches/vue.esm-browser.js'; */ import { - createApp, defineCustomElement, -} from 'vue'; +} from 'vue' -/*import App from './App.vue'; +/* import App from './App.vue'; import Foo from './bwsy-ce-foo.ce.vue'; const app = createApp(App); customElements.define('bwsy-ce-foo', defineCustomElement(Foo)); /!*app.config.compilerOptions.isCustomElement = (tag=>{ return tag === 'bwsy-ce-foo' })*!/ -app.mount('#app');*/ - +app.mount('#app'); */ -/*import App from './nested/vue-app.ce.vue' +/* import App from './nested/vue-app.ce.vue' const app = createApp(App); const ceApp = defineCustomElement(App); customElements.define('vue-app', ceApp); app.config.compilerOptions.isCustomElement = (tag) => { return tag === 'vue-app'; -};*/ +}; */ -//import App from './nested/vue-app.ce.vue' -/*import App from './deep/Foo.ce.vue' +// import App from './nested/vue-app.ce.vue' +/* import App from './deep/Foo.ce.vue' const app = createApp(App); const ceApp = defineCustomElement(App); customElements.define('vue-app', ceApp); app.config.compilerOptions.isCustomElement = (tag) => { return tag === 'vue-app'; -};*/ +}; */ import App from './scoped/my-component.vue' -//const app = createApp(App); +// const app = createApp(App); -const ceApp = defineCustomElement(App); -customElements.define('vue-app', ceApp); +const ceApp = defineCustomElement(App) +customElements.define('vue-app', ceApp) /* app.config.compilerOptions.isCustomElement = (tag) => { return tag === 'vue-app'; -};*/ +}; */ diff --git a/play/sub-style/src/nested/bar.vue b/play/sub-style/src/nested/bar.vue index 44f9df8..97de3f3 100644 --- a/play/sub-style/src/nested/bar.vue +++ b/play/sub-style/src/nested/bar.vue @@ -1,7 +1,9 @@