Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit a92cb1a

Browse files
baiwusanyu-cbaiwusanyu-c
authored
feat: added sub component style support (#1)
* chore: added sub components style feature * chore: added sub style feature playground * chore: inject code to component instance * feat: added sub component style support
1 parent 77f89dd commit a92cb1a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+893
-259
lines changed

‎.gitignore

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
# Project exclude paths
22
/build/node_modules/
33
/node_modules/
4-
/packages/core/node_modules/
5-
/packages/v-model/node_modules/
6-
/play/v-model/node_modules/
4+
/packages/**/node_modules/
5+
/play/**/node_modules/
76
/play/node_modules/
87
/utils/node_modules/
9-
dist
8+
dist

‎build/dir.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
export const entry = {
2-
'v-model': '../packages/v-model/index.ts', // @unplugin-vue-ce/vModel
2+
'sub-style': '../packages/sub-style/index.ts', // @unplugin-vue-ce/sub-style
3+
'v-model': '../packages/v-model/index.ts', // @unplugin-vue-ce/v-model
34
'utils': '../utils/index.ts', // @unplugin-vue-ce/utils
4-
'index': '../packages/core/index.ts', // @unplugin-vue-ce
5+
'index': '../packages/core/index.ts', // unplugin-vue-ce
56
}
67

78
export const entryPkg = {
89
'v-model': '../packages/v-model',
10+
'sub-style': '../packages/sub-style',
911
'utils': '../utils',
1012
}

‎build/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ if (buildMode === 'prod') {
3030
const config = JSON.parse(JSON.stringify(baseConfig))
3131
config.entry = [entry[entryKey]]
3232
// config.outDir = entry[entryKey]
33-
config.external = [/@baiwusanyu/]
33+
config.external = [/@unplugin-vue-ce/]
3434
config.outDir = entryKey === 'index'
3535
? path.resolve(process.cwd(), '../dist') : path.resolve(process.cwd(), `../dist/${entryKey}`)
3636
config.dts = true
@@ -50,7 +50,7 @@ if (buildMode === 'dev') {
5050
config.dts = false
5151
config.minify = false
5252
config.watch = ['../packages/**/**.ts']
53-
config.noExternal = [/@baiwusanyu/]
53+
config.noExternal = [/@unplugin-vue-ce/]
5454
configOptions.push(config)
5555
}
5656
}

‎build/publish.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ import { runTask } from './utils'
44
export default series(
55
runTask('publish @unplugin-vue-ce/utils', 'cd dist/utils && pnpm run publish:npm'),
66
runTask('publish @unplugin-vue-ce/v-model', 'cd dist/v-model && pnpm run publish:npm'),
7+
runTask('publish @unplugin-vue-ce/sub-style', 'cd dist/sub-style && pnpm run publish:npm'),
78
runTask('publish unplugin-vue-ce', 'cd dist && pnpm run publish:npm'),
89
)

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"lint:fix": "eslint --fix ./ --ext .vue,.js,.ts,.jsx,.tsx,.json ",
5050
"dev": "pnpm run --filter @unplugin-vue-ce/build dev",
5151
"dev:v-model": "pnpm run --filter @unplugin-vue-ce/play-v-model dev",
52+
"dev:sub-style": "pnpm run --filter @unplugin-vue-ce/play-sub-style dev",
5253
"build": "pnpm run --filter @unplugin-vue-ce/build build",
5354
"release": "bumpp package.json packages/*/package.json utils/package.json --commit --push --tag",
5455
"publish:npm": "pnpm publish --no-git-checks --access public",
@@ -69,6 +70,7 @@
6970
"vue": "^3.3.2"
7071
},
7172
"dependencies": {
73+
"@unplugin-vue-ce/sub-style": "workspace:*",
7274
"@unplugin-vue-ce/utils": "workspace:*",
7375
"@unplugin-vue-ce/v-model": "workspace:*",
7476
"ansi-colors": "^4.1.3",

‎packages/core/index.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { unVueCEVModel } from '@unplugin-vue-ce/v-model'
2+
import { unVueCESubStyle } from '@unplugin-vue-ce/sub-style'
23
import { createUnplugin } from 'unplugin'
3-
import type { Options } from '@unplugin-vue-ce/v-model/types'
4-
const unplugin = createUnplugin<Options>(() => {
5-
return {
6-
...unVueCEVModel(),
7-
}
4+
const unplugin = createUnplugin(() => {
5+
return [
6+
unVueCEVModel(),
7+
unVueCESubStyle(),
8+
]
89
})
910
export const viteVueCE = unplugin.vite
1011
export const rollupVueCE = unplugin.rollup

‎packages/sub-style/README.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# @unplugin-vue-ce/sub-style
2+
3+
## Install
4+
5+
```bash
6+
npm i @unplugin-vue-ce/sub-style
7+
```
8+
or
9+
```bash
10+
yarn add @unplugin-vue-ce/sub-style
11+
```
12+
or
13+
```bash
14+
pnpm add @unplugin-vue-ce/sub-style
15+
```
16+
17+
## Usage
18+
<details>
19+
<summary>Vite</summary>
20+
21+
```ts
22+
// vite.config.ts
23+
import { defineConfig } from 'vite'
24+
import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
25+
import vue from '@vitejs/plugin-vue'
26+
import type { PluginOption } from 'vite'
27+
export default defineConfig({
28+
plugins: [
29+
vue(),
30+
viteVueCESubStyle() as PluginOption,
31+
],
32+
})
33+
```
34+
35+
</details>
36+
<br>
37+
<details>
38+
<summary>Rollup</summary>
39+
40+
```ts
41+
// rollup.config.js
42+
import { rollupVueCESubStyle } from '@unplugin-vue-ce/sub-style'
43+
export default {
44+
plugins: [
45+
rollupVueCESubStyle(),
46+
],
47+
}
48+
```
49+
50+
</details>
51+
<br>
52+
<details>
53+
<summary>Webpack</summary>
54+
55+
```ts
56+
// webpack.config.js
57+
module.exports = {
58+
/* ... */
59+
plugins: [
60+
require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle(),
61+
],
62+
}
63+
```
64+
</details>
65+
<br>
66+
<details>
67+
<summary>Vue CLI</summary>
68+
69+
```ts
70+
// vue.config.js
71+
module.exports = {
72+
configureWebpack: {
73+
plugins: [
74+
require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}),
75+
],
76+
},
77+
}
78+
```
79+
80+
</details>
81+
<br>
82+
<details>
83+
<summary>ESBuild</summary>
84+
85+
```ts
86+
// esbuild.config.js
87+
import { build } from 'esbuild'
88+
import { esbuildVueCESubStyle } from '@unplugin-vue-ce/sub-style'
89+
90+
build({
91+
plugins: [esbuildVueCESubStyle()],
92+
})
93+
```
94+
</details>

‎packages/sub-style/index.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { createUnplugin } from 'unplugin'
2+
import { setGlobalPrefix } from 'baiwusanyu-utils'
3+
import MagicString from 'magic-string'
4+
import { NAME } from '@unplugin-vue-ce/utils'
5+
import { injectVueRuntime } from './src/inject-vue-runtime'
6+
7+
export const unVueCESubStyle = (): any => {
8+
setGlobalPrefix(`[${NAME}]:`)
9+
return {
10+
name: `${NAME}:sub-style`,
11+
enforce: 'post',
12+
async transform(code: string, id: string) {
13+
const mgcStr = new MagicString(code)
14+
15+
// build only
16+
if (id.includes('@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'))
17+
injectVueRuntime(mgcStr)
18+
19+
// build only
20+
if (id.includes('@vue/runtime-core/dist/runtime-core.esm-bundler.js'))
21+
injectVueRuntime(mgcStr)
22+
23+
// dev only
24+
if (id.includes('.vite/deps/vue.js'))
25+
injectVueRuntime(mgcStr)
26+
27+
return {
28+
code: mgcStr.toString(),
29+
get map() {
30+
return mgcStr.generateMap({
31+
source: id,
32+
includeContent: true,
33+
hires: true,
34+
})
35+
},
36+
}
37+
},
38+
}
39+
}
40+
const unplugin = createUnplugin(unVueCESubStyle)
41+
export const viteVueCESubStyle = unplugin.vite
42+
export const rollupVueCESubStyle = unplugin.rollup
43+
export const webpackVueCESubStyle = unplugin.webpack
44+
export const esbuildVueCESubStyle = unplugin.esbuild

‎packages/sub-style/package.json

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{
2+
"name": "@unplugin-vue-ce/sub-style",
3+
"description": "A vue plugin that extends vue's Custom Element capabilities (sub component style)",
4+
"private": false,
5+
"type": "module",
6+
"version": "0.0.3-beta.2",
7+
"packageManager": "[email protected]",
8+
"keywords": [
9+
"typescript",
10+
"javascript",
11+
"utils",
12+
"vue",
13+
"vue3",
14+
"vite",
15+
"react",
16+
"web component"
17+
],
18+
"license": "MIT",
19+
"author": "baiwusanyu-c",
20+
"homepage": "https://github.com/baiwusanyu-c",
21+
"repository": "https://github.com/baiwusanyu-c/unplugin-vue-ce",
22+
"bugs": "https://github.com/baiwusanyu-c/unplugin-vue-ce/issues",
23+
"main": "./index.ts",
24+
"module": "./index.ts",
25+
"types": "./index.d.ts",
26+
"exports": {
27+
".": {
28+
"types": "./index.d.js",
29+
"require": "./index.cjs",
30+
"import": "./index.ts"
31+
}
32+
},
33+
"files": [
34+
"index.js",
35+
"index.cjs",
36+
"index.d.ts",
37+
"README.md"
38+
],
39+
"typesVersions": {
40+
"*": {
41+
"*": [
42+
"./*",
43+
"./index.d.ts"
44+
]
45+
}
46+
},
47+
"scripts": {
48+
"publish:npm": "pnpm publish --no-git-checks --access public"
49+
},
50+
"publishConfig": {
51+
"access": "public"
52+
},
53+
"peerDependencies": {
54+
"baiwusanyu-utils": "^1.0.8",
55+
"estree-walker-ts": "^1.0.0",
56+
"fast-glob": "^3.2.12",
57+
"fs-extra": "^11.1.1",
58+
"magic-string": "^0.30.0",
59+
"unplugin": "^1.3.1",
60+
"vue": "^3.3.2"
61+
},
62+
"dependencies": {
63+
"@unplugin-vue-ce/utils": "workspace:*",
64+
"baiwusanyu-utils": "^1.0.12",
65+
"estree-walker-ts": "^1.0.0",
66+
"fast-glob": "^3.2.12",
67+
"fs-extra": "^11.1.1",
68+
"magic-string": "^0.30.0",
69+
"unplugin": "^1.3.1",
70+
"vue": "^3.3.2"
71+
}
72+
}

0 commit comments

Comments
 (0)