Skip to content

Commit 0a97cc6

Browse files
ItsRyanWuItsRyanWu
authored
Merge pull request #6 from dcasia/taro
Support Taro Vue2/3 and React framework
2 parents 8811a93 + eaf3c85 commit 0a97cc6

File tree

14 files changed

+9616
-4857
lines changed

14 files changed

+9616
-4857
lines changed

‎.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,9 @@ module.exports = {
1818
plugins: [ '@typescript-eslint' ],
1919
rules: {
2020
'@typescript-eslint/no-var-requires': 'off',
21+
'@typescript-eslint/ban-ts-comment': 'off',
22+
'unicorn/prevent-abbreviations': 'off',
23+
'multiline-comment-style': 'off',
24+
'capitalized-comments': 'off',
2125
},
2226
}

‎package-lock.json‎

Lines changed: 9072 additions & 4786 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
{
22
"name": "@dcasia/mini-program-tailwind-webpack-plugin",
3-
"version": "1.2.3",
3+
"version": "1.3.0",
44
"description": "",
55
"main": "dist/index.js",
66
"files": [
77
"dist"
88
],
9+
"exports": {
10+
".": "./dist/index.js",
11+
"./taro": "./dist/taro.js",
12+
"./universal-handler": "./dist/universal-handler.js"
13+
},
14+
"types": "dist/dts/index.d.ts",
15+
"typesVersions": {
16+
"*": {
17+
"taro": ["dist/dts/taro/index.d.ts"],
18+
"universal-handler": ["dist/dts/universal-handler.d.ts"]
19+
}
20+
},
921
"scripts": {
1022
"test": "jest",
1123
"lint": "eslint . --ext .ts --fix",
@@ -24,7 +36,9 @@
2436
"homepage": "https://github.com/dcasia/tailwind-for-mini-program-webpack-plugin#readme",
2537
"devDependencies": {
2638
"@rollup/plugin-commonjs": "^21.0.2",
39+
"@rollup/plugin-multi-entry": "^4.1.0",
2740
"@rollup/plugin-typescript": "^8.3.1",
41+
"@tarojs/service": "^3.4.9",
2842
"@types/jest": "^27.4.1",
2943
"@typescript-eslint/eslint-plugin": "^5.13.0",
3044
"@typescript-eslint/parser": "^5.13.0",
@@ -33,12 +47,15 @@
3347
"eslint-plugin-digital-creative": "github:dcasia/digital-creative-eslint-plugin",
3448
"eslint-plugin-import": "^2.25.4",
3549
"jest": "^27.5.1",
36-
"rollup": "^2.68.0"
50+
"rollup": "^2.68.0",
51+
"rollup-plugin-dts": "^4.2.1",
52+
"webpack": "^5.69.1"
3753
},
3854
"dependencies": {
3955
"@babel/core": "^7.17.5",
4056
"@vivaxy/wxml": "^2.1.0",
4157
"postcss": "^8.4.7",
42-
"webpack": "^5.69.1"
58+
"webpack-sources": "^1.4.3",
59+
"windicss-webpack-plugin": "^1.7.2"
4360
}
4461
}

‎rollup.config.ts‎

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { defineConfig } from 'rollup'
22
import typescript from '@rollup/plugin-typescript'
3-
import commonjs from '@rollup/plugin-commonjs'
43

54
export default defineConfig([
65
{
@@ -10,24 +9,62 @@ export default defineConfig([
109
format: 'cjs',
1110
exports: 'default',
1211
},
13-
external: [ './universal-handler' ],
12+
external: [
13+
'./universal-handler',
14+
'@babel/core',
15+
'@vivaxy/wxml',
16+
'webpack-sources',
17+
],
1418
plugins: [
15-
commonjs(),
16-
typescript({
17-
exclude: [ 'examples/**' ],
18-
}),
19+
typescript(
20+
{ tsconfig: './tsconfig.json' },
21+
),
1922
],
2023
}, {
24+
input: 'src/taro/index.ts',
25+
output: {
26+
file: 'dist/taro.js',
27+
format: 'cjs',
28+
exports: 'default',
29+
},
30+
external: [
31+
'postcss',
32+
'@tarojs/service',
33+
'@babel/core',
34+
'@vivaxy/wxml',
35+
'webpack-sources',
36+
'windicss-webpack-plugin',
37+
],
38+
plugins: [
39+
typescript(
40+
{ tsconfig: './tsconfig.json' },
41+
),
42+
],
43+
},
44+
{
2145
input: 'src/universal-handler.ts',
2246
output: {
2347
file: 'dist/universal-handler.js',
2448
format: 'cjs',
2549
},
50+
external: [
51+
'@babel/core',
52+
'@vivaxy/wxml',
53+
'postcss',
54+
],
2655
plugins: [
27-
commonjs(),
28-
typescript({
29-
exclude: [ 'examples/**' ],
30-
}),
56+
typescript(
57+
{ tsconfig: './tsconfig.json' },
58+
),
3159
],
3260
},
61+
// {
62+
// input: './dist/dts/index.d.ts',
63+
// output: {
64+
// file: 'dist/index.d.ts',
65+
// format: 'es',
66+
// },
67+
// plugins: [ dts() ],
68+
// },
69+
3370
])

‎src/babel/index.ts‎

Lines changed: 87 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,101 @@
1-
import { FileType } from '../enum'
1+
import { FileType, FrameworkUsedInTaro } from '../enum'
22
import { handleCharacters } from '../utilities'
3+
import { PluginItem } from '@babel/core'
4+
import * as babel from '@babel/core'
5+
import { handleClassNameWithCurlyBraces } from '../template-handler'
36

4-
export function replaceStringLiteralPlugin({ types: t }) {
7+
let classFieldsChanges: [string, string][] = []
8+
9+
const classFieldName = {
10+
[ FrameworkUsedInTaro.React ]: [ 'className' ],
11+
[ FrameworkUsedInTaro.Vue2 ]: [ 'class', 'staticClass' ],
12+
[ FrameworkUsedInTaro.Vue3 ]: [ 'class', 'staticClass' ],
13+
}
14+
15+
function logClassFieldsChange(rawContent: string, newContent: string) {
16+
classFieldsChanges.push([ rawContent, newContent ])
17+
}
18+
19+
function cleanClassFieldsChanges() {
20+
classFieldsChanges = []
21+
}
22+
23+
export function replaceStringLiteralPlugin({ types: t }): PluginItem {
524

625
return {
726
visitor: {
827
StringLiteral(path) {
928

10-
const newContent = handleCharacters(path.node.value, FileType.Template)
29+
const rawContent = path.node.value
30+
const newContent = handleCharacters(rawContent, FileType.Template)
31+
32+
if (newContent !== rawContent) {
33+
34+
path.replaceWith(t.stringLiteral(newContent))
35+
path.skip()
36+
37+
}
38+
39+
},
40+
},
41+
}
42+
43+
}
44+
45+
export function replaceClassFieldsValuePlugin({ types: t }): PluginItem {
46+
47+
return {
48+
visitor: {
49+
StringLiteral(path, state) {
50+
51+
const targetClassFieldName = classFieldName[ state.opts.framework ] || []
52+
53+
const keyNode = path.key === 'value' && path.parentPath.isObjectProperty() && path.parentPath.get('key') // class: 'test'
54+
|| (path.parentPath.isArrayExpression() && path.parentPath.parentPath.isObjectProperty() && path.parentPath.parentPath.get('key')) // class: ['test', 'test']
55+
|| (path.key === 'key' && path.parentPath.findParent(path => path.isObjectProperty())?.get('key')) // class: ['test', {'test': true}] or class: {'test': true}
56+
57+
if (keyNode && !Array.isArray(keyNode)) {
58+
59+
const foundClassName = targetClassFieldName.find(name => keyNode.isIdentifier?.({ name }))
60+
61+
if (foundClassName) {
62+
63+
const rawContent = path.node.value
64+
const newContent = handleClassNameWithCurlyBraces(rawContent)
65+
66+
if (newContent !== rawContent) {
1167

12-
path.replaceWith(t.stringLiteral(newContent))
13-
path.skip()
68+
logClassFieldsChange(rawContent, newContent)
69+
path.replaceWith(t.stringLiteral(newContent))
70+
path.skip()
71+
72+
}
73+
74+
}
75+
76+
}
1477

1578
},
1679
},
1780
}
1881

1982
}
83+
84+
export function collectRawAndModified(rawContent: string, framework: FrameworkUsedInTaro) {
85+
86+
cleanClassFieldsChanges()
87+
88+
babel.transformSync(rawContent, {
89+
plugins: [
90+
[
91+
replaceClassFieldsValuePlugin, {
92+
framework,
93+
},
94+
],
95+
],
96+
configFile: false,
97+
})
98+
99+
return classFieldsChanges
100+
101+
}

‎src/enum.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,9 @@ export enum FileType {
22
Template = 'template',
33
Style = 'style',
44
}
5+
6+
export enum FrameworkUsedInTaro {
7+
React = 'react',
8+
Vue2 = 'vue',
9+
Vue3 = 'vue3',
10+
}

‎src/index.ts‎

Lines changed: 76 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Options } from './interfaces'
33
import { handleSource } from './universal-handler'
44
import { isStyleFile, isTemplateFile } from './utilities'
55
import { FileType } from './enum'
6+
import { ConcatSource } from 'webpack-sources'
67

78
export default class MiniProgramTailwindWebpackPlugin implements WebpackPluginInstance {
89

@@ -20,50 +21,97 @@ export default class MiniProgramTailwindWebpackPlugin implements WebpackPluginIn
2021

2122
apply(compiler: Compiler) {
2223

23-
const { webpack } = compiler
24-
const { sources, Compilation } = webpack
25-
const { ConcatSource } = sources
24+
const isWebpackV5 = compiler.webpack && compiler.webpack.version >= '5'
2625

27-
compiler.hooks.thisCompilation.tap(
28-
MiniProgramTailwindWebpackPlugin.pluginName,
29-
compilation => {
26+
if (isWebpackV5) {
3027

31-
compilation.hooks.processAssets.tap(
32-
{
33-
name: MiniProgramTailwindWebpackPlugin.pluginName,
34-
stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
35-
},
36-
assets => {
28+
const { webpack } = compiler
29+
const { sources, Compilation } = webpack
30+
const { ConcatSource } = sources
3731

38-
for (const pathname in assets) {
32+
compiler.hooks.thisCompilation.tap(
33+
MiniProgramTailwindWebpackPlugin.pluginName,
34+
compilation => {
3935

40-
const originalSource = assets[ pathname ]
41-
const rawSource = originalSource.source().toString()
36+
compilation.hooks.processAssets.tap(
37+
{
38+
name: MiniProgramTailwindWebpackPlugin.pluginName,
39+
stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
40+
},
41+
assets => {
4242

43-
let handledSource = ''
43+
for (const pathname in assets) {
44+
45+
const originalSource = assets[ pathname ]
46+
const rawSource = originalSource.source().toString()
47+
48+
let handledSource = ''
49+
50+
if (isStyleFile(pathname)) {
51+
handledSource = handleSource(FileType.Style, rawSource, this.options)
52+
} else if (isTemplateFile(pathname)) {
53+
handledSource = handleSource(FileType.Template, rawSource, this.options)
54+
}
55+
56+
if (handledSource) {
57+
58+
const source = new ConcatSource(handledSource)
59+
60+
compilation.updateAsset(pathname, source)
61+
62+
}
4463

45-
if (isStyleFile(pathname)) {
46-
handledSource = handleSource(FileType.Style, rawSource, this.options)
47-
} else if (isTemplateFile(pathname)) {
48-
handledSource = handleSource(FileType.Template, rawSource, this.options)
4964
}
5065

51-
if (handledSource) {
66+
},
67+
68+
)
69+
70+
},
71+
)
72+
73+
} else {
74+
75+
compiler.hooks.thisCompilation.tap(
76+
MiniProgramTailwindWebpackPlugin.pluginName,
77+
compilation => {
78+
79+
compilation.hooks.afterOptimizeAssets.tap(
80+
MiniProgramTailwindWebpackPlugin.pluginName,
81+
assets => {
82+
83+
for (const pathname in assets) {
84+
85+
const originalSource = assets[ pathname ]
86+
const rawSource = originalSource.source().toString()
87+
88+
let handledSource = ''
89+
90+
if (isStyleFile(pathname)) {
91+
handledSource = handleSource(FileType.Style, rawSource, this.options)
92+
} else if (isTemplateFile(pathname)) {
93+
handledSource = handleSource(FileType.Template, rawSource, this.options)
94+
}
95+
96+
if (handledSource) {
97+
98+
const source = new ConcatSource(handledSource)
5299

53-
const source = new ConcatSource(handledSource)
100+
// @ts-ignore
101+
compilation.updateAsset(pathname, source)
54102

55-
compilation.updateAsset(pathname, source)
103+
}
56104

57105
}
58106

59-
}
107+
},
60108

61-
},
109+
)
62110

63-
)
111+
},
112+
)
64113

65-
},
66-
)
114+
}
67115

68116
}
69117

0 commit comments

Comments
 (0)