glass-easel-miniprogram-webpack-plugin 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -0
- package/index.js +63 -15
- package/index.ts +91 -20
- package/package.json +6 -5
- package/wxss_loader.js +17 -3
package/README.md
CHANGED
|
@@ -8,6 +8,46 @@ Refer to the [glass-easel](https://github.com/wechat-miniprogram/glass-easel) pr
|
|
|
8
8
|
|
|
9
9
|
See the [template](../glass-easel-miniprogram-template/).
|
|
10
10
|
|
|
11
|
+
The `GlassEaselMiniprogramWxmlLoader` loader must be added to handle `.wxml` files, and the `GlassEaselMiniprogramWxssLoader` loader must be added to handle `.wxss` files. They can work with other loaders.
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
{
|
|
15
|
+
test: /\.wxml$/,
|
|
16
|
+
use: GlassEaselMiniprogramWxmlLoader,
|
|
17
|
+
exclude: /node_modules/,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
test: /\.wxss$/,
|
|
21
|
+
use: [
|
|
22
|
+
'css-loader',
|
|
23
|
+
GlassEaselMiniprogramWxssLoader,
|
|
24
|
+
],
|
|
25
|
+
exclude: /node_modules/,
|
|
26
|
+
},
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Furthurmore, a webpack plugin that compiles a mini-program-like directory structure should be added. The directory should be specified in the plugin options.
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
plugins: [
|
|
33
|
+
new GlassEaselMiniprogramWebpackPlugin({
|
|
34
|
+
path: path.join(__dirname, 'src'),
|
|
35
|
+
resourceFilePattern: /\.(jpg|jpeg|png|gif|html)$/,
|
|
36
|
+
defaultEntry: 'pages/index/index',
|
|
37
|
+
}),
|
|
38
|
+
],
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
| Options | Explanation |
|
|
42
|
+
| ------- | ----------- |
|
|
43
|
+
| path | the mini-program-like directory to be compiled (default to `src` ) |
|
|
44
|
+
| resourceFilePattern | the filename pattern (in the mini-program-like directory) to be copied into the webpack output path |
|
|
45
|
+
| defaultEntry | the mini-program page to be loaded on startup |
|
|
46
|
+
| customBootstrap | (see the *Custom Bootstrap* section below) |
|
|
47
|
+
| disableClassPrefix | (see the *Custom Bootstrap* section below) |
|
|
48
|
+
|
|
49
|
+
The plugin will generate a virtual `index.js` file in the mini-program-like directory (a.k.a. `src/index.js` by default). This file can be used as the webpack entry or be imported by other modules.
|
|
50
|
+
|
|
11
51
|
## Custom Bootstrap
|
|
12
52
|
|
|
13
53
|
By default, the plugin inserts a bootstrap code to insert the `defaultEntry` into DOM `<body>` 。
|
|
@@ -21,3 +61,47 @@ new GlassEaselMiniprogramWebpackPlugin({
|
|
|
21
61
|
```
|
|
22
62
|
|
|
23
63
|
Furthermore, if the backend handles stylesheets unlike DOM, another `disableClassPrefix` may be required to be `true` depending on the backend.
|
|
64
|
+
|
|
65
|
+
When using custom bootstrap, the plugin will generate a module which has the following types:
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import type * as adapter from 'glass-easel-miniprogram-adapter'
|
|
69
|
+
|
|
70
|
+
export declare const env: adapter.MiniProgramEnv
|
|
71
|
+
export declare const codeSpace: adapter.CodeSpace
|
|
72
|
+
export declare const registerGlobalEventListener: (
|
|
73
|
+
backend: adapter.glassEasel.GeneralBackendContext,
|
|
74
|
+
) => void
|
|
75
|
+
export declare const initWithBackend: (
|
|
76
|
+
backend: adapter.glassEasel.GeneralBackendContext,
|
|
77
|
+
) => adapter.AssociatedBackend
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
You can put the code above into a `d.ts` file ( `src.d.ts` by default).
|
|
81
|
+
|
|
82
|
+
A page can be loaded like this:
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
import * as glassEasel from 'glass-easel'
|
|
86
|
+
import { codeSpace, initWithBackend } from './src' // import the plugin-generated code
|
|
87
|
+
|
|
88
|
+
// create the backend context
|
|
89
|
+
const backendContext = new glassEasel.CurrentWindowBackendContext() // or another backend context
|
|
90
|
+
const ab = initWithBackend(backendContext)
|
|
91
|
+
|
|
92
|
+
// create a mini-program page
|
|
93
|
+
const root = ab.createRoot(
|
|
94
|
+
'glass-easel-root', // the tag name of the mount point
|
|
95
|
+
codeSpace,
|
|
96
|
+
'pages/index/index', // the mini-program page to load
|
|
97
|
+
)
|
|
98
|
+
|
|
99
|
+
// insert the page into backend
|
|
100
|
+
// (this step is backend-related - if the backend is not DOM, refer to the backend documentation)
|
|
101
|
+
const placeholder = document.createElement('span')
|
|
102
|
+
document.body.appendChild(placeholder)
|
|
103
|
+
root.attach(
|
|
104
|
+
document.body as unknown as glassEasel.GeneralBackendElement,
|
|
105
|
+
placeholder as unknown as glassEasel.GeneralBackendElement,
|
|
106
|
+
)
|
|
107
|
+
```
|
package/index.js
CHANGED
|
@@ -32,11 +32,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
32
32
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
33
33
|
});
|
|
34
34
|
};
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
35
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
39
|
exports.GlassEaselMiniprogramWebpackPlugin = exports.GlassEaselMiniprogramWxssLoader = exports.GlassEaselMiniprogramWxmlLoader = void 0;
|
|
37
40
|
const node_fs_1 = require("node:fs");
|
|
38
41
|
const path = __importStar(require("node:path"));
|
|
39
42
|
const webpack_1 = require("webpack");
|
|
43
|
+
const chalk_1 = __importDefault(require("chalk"));
|
|
40
44
|
const glass_easel_template_compiler_1 = require("glass-easel-template-compiler");
|
|
41
45
|
const helpers_1 = require("./helpers");
|
|
42
46
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
@@ -49,6 +53,7 @@ exports.GlassEaselMiniprogramWxmlLoader = path.join(__dirname, 'wxml_loader.js')
|
|
|
49
53
|
exports.GlassEaselMiniprogramWxssLoader = path.join(__dirname, 'wxss_loader.js');
|
|
50
54
|
const PLUGIN_NAME = 'GlassEaselMiniprogramWebpackPlugin';
|
|
51
55
|
const CACHE_ETAG = 1;
|
|
56
|
+
const HOST_STYLES_MODULE = '__glass_easel_host_styles__.wxss';
|
|
52
57
|
const readCache = (compiler, key) => new Promise((resolve) => {
|
|
53
58
|
const cacheKey = `${PLUGIN_NAME}|${key}`;
|
|
54
59
|
compiler.cache.get(cacheKey, CACHE_ETAG, (err, cache) => {
|
|
@@ -67,11 +72,14 @@ const writeCache = (compiler, key, value) => new Promise((resolve) => {
|
|
|
67
72
|
});
|
|
68
73
|
});
|
|
69
74
|
class StyleSheetManager {
|
|
70
|
-
constructor(disableClassPrefix) {
|
|
75
|
+
constructor(disableClassPrefix, codeRoot, virtualModules) {
|
|
71
76
|
this.map = Object.create(null);
|
|
72
77
|
this.enableStyleScope = Object.create(null);
|
|
73
78
|
this.scopeNameInc = 0;
|
|
79
|
+
this.hostStylesReady = false;
|
|
74
80
|
this.disableClassPrefix = disableClassPrefix;
|
|
81
|
+
this.codeRoot = codeRoot;
|
|
82
|
+
this.virtualModules = virtualModules;
|
|
75
83
|
}
|
|
76
84
|
add(compPath, srcPath) {
|
|
77
85
|
let scopeNameNum = this.scopeNameInc;
|
|
@@ -92,6 +100,7 @@ class StyleSheetManager {
|
|
|
92
100
|
this.map[compPath] = {
|
|
93
101
|
srcPath,
|
|
94
102
|
scopeName,
|
|
103
|
+
lowPriority: '',
|
|
95
104
|
};
|
|
96
105
|
}
|
|
97
106
|
setStyleIsolation(compPath, styleIsolation, isComponent) {
|
|
@@ -109,14 +118,29 @@ class StyleSheetManager {
|
|
|
109
118
|
}
|
|
110
119
|
return undefined;
|
|
111
120
|
}
|
|
121
|
+
setLowPriorityStyles(compPath, source, _map) {
|
|
122
|
+
const meta = this.map[compPath];
|
|
123
|
+
if (meta && meta.lowPriority !== source) {
|
|
124
|
+
meta.lowPriority = source;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
prepareHostStyles() {
|
|
128
|
+
const lowPriorityContent = Object.values(this.map)
|
|
129
|
+
.map(({ lowPriority }) => lowPriority)
|
|
130
|
+
.join('\n');
|
|
131
|
+
const fullPath = path.join(this.codeRoot, HOST_STYLES_MODULE);
|
|
132
|
+
this.virtualModules.writeModule(fullPath, lowPriorityContent);
|
|
133
|
+
this.hostStylesReady = true;
|
|
134
|
+
}
|
|
112
135
|
toCodeString() {
|
|
113
136
|
const arr = Object.entries(this.map).map(([compPath, { srcPath }]) => {
|
|
114
|
-
const s = `backend.registerStyleSheetContent('${(0, helpers_1.escapeJsString)(compPath)}', require('${(0, helpers_1.escapeJsString)(srcPath)}'));`;
|
|
137
|
+
const s = `backend.registerStyleSheetContent('${(0, helpers_1.escapeJsString)(compPath)}', (require('${(0, helpers_1.escapeJsString)(srcPath)}').default||''));`;
|
|
115
138
|
return s;
|
|
116
139
|
});
|
|
140
|
+
const req = this.hostStylesReady ? `(require('./${HOST_STYLES_MODULE}').default||'')` : "''";
|
|
117
141
|
return `
|
|
118
142
|
function (backend) {
|
|
119
|
-
backend.registerStyleSheetContent('app', require('./app.wxss'))
|
|
143
|
+
backend.registerStyleSheetContent('app', ${req} + (require('./app.wxss').default||''))
|
|
120
144
|
${arr.join('')}
|
|
121
145
|
}
|
|
122
146
|
`;
|
|
@@ -140,7 +164,10 @@ class GlassEaselMiniprogramWebpackPlugin {
|
|
|
140
164
|
let globalStaticConfig = {};
|
|
141
165
|
let appEntry = null;
|
|
142
166
|
const depsTmplGroup = new glass_easel_template_compiler_1.TmplGroup();
|
|
143
|
-
|
|
167
|
+
// init style sheet manager
|
|
168
|
+
const virtualModules = this.virtualModules;
|
|
169
|
+
virtualModules.apply(compiler);
|
|
170
|
+
const styleSheetManager = new StyleSheetManager(this.disableClassPrefix, codeRoot, this.virtualModules);
|
|
144
171
|
// cleanup wasm modules
|
|
145
172
|
compiler.hooks.shutdown.tap(PLUGIN_NAME, () => {
|
|
146
173
|
depsTmplGroup.free();
|
|
@@ -330,8 +357,6 @@ class GlassEaselMiniprogramWebpackPlugin {
|
|
|
330
357
|
});
|
|
331
358
|
});
|
|
332
359
|
// collect virtual files
|
|
333
|
-
const virtualModules = this.virtualModules;
|
|
334
|
-
virtualModules.apply(compiler);
|
|
335
360
|
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
|
|
336
361
|
// add loaders
|
|
337
362
|
webpack_1.NormalModule.getCompilationHooks(compilation).beforeLoaders.tap(PLUGIN_NAME, (loaders, mod) => {
|
|
@@ -341,12 +366,20 @@ class GlassEaselMiniprogramWebpackPlugin {
|
|
|
341
366
|
const relPath = path.relative(codeRoot, absPath).split(path.sep).join('/');
|
|
342
367
|
const compPath = relPath.slice(0, -extName.length);
|
|
343
368
|
if (extName === '.wxss') {
|
|
344
|
-
loaders.forEach((x) => {
|
|
369
|
+
loaders.forEach((x, i) => {
|
|
345
370
|
if (x.loader === exports.GlassEaselMiniprogramWxssLoader) {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
371
|
+
if (relPath === HOST_STYLES_MODULE) {
|
|
372
|
+
loaders.splice(i, loaders.length - i);
|
|
373
|
+
}
|
|
374
|
+
else {
|
|
375
|
+
x.options = {
|
|
376
|
+
classPrefix: styleSheetManager.getScopeName(compPath),
|
|
377
|
+
compPath,
|
|
378
|
+
setLowPriorityStyles: (s, map) => {
|
|
379
|
+
styleSheetManager.setLowPriorityStyles(compPath, s, map);
|
|
380
|
+
},
|
|
381
|
+
};
|
|
382
|
+
}
|
|
350
383
|
}
|
|
351
384
|
});
|
|
352
385
|
}
|
|
@@ -356,7 +389,21 @@ class GlassEaselMiniprogramWebpackPlugin {
|
|
|
356
389
|
x.options = {
|
|
357
390
|
addTemplate(content) {
|
|
358
391
|
wxmlContentMap[compPath] = content;
|
|
359
|
-
depsTmplGroup.addTmpl(compPath, content);
|
|
392
|
+
const warnings = depsTmplGroup.addTmpl(compPath, content);
|
|
393
|
+
if (warnings && warnings.length > 0) {
|
|
394
|
+
warnings.forEach((warning) => {
|
|
395
|
+
const msgKindColored = warning.isError
|
|
396
|
+
? chalk_1.default.red('ERROR')
|
|
397
|
+
: chalk_1.default.yellow('WARN');
|
|
398
|
+
const msg = `[glass-easel-template-compiler] ${msgKindColored} ${warning.path}:${warning.startLine}:${warning.startColumn} (#${warning.code}): ${warning.message}`;
|
|
399
|
+
// eslint-disable-next-line no-console
|
|
400
|
+
if (warning.isError)
|
|
401
|
+
console.error(msg);
|
|
402
|
+
// eslint-disable-next-line no-console
|
|
403
|
+
else
|
|
404
|
+
console.warn(msg);
|
|
405
|
+
});
|
|
406
|
+
}
|
|
360
407
|
const deps = depsTmplGroup
|
|
361
408
|
.getDirectDependencies(compPath)
|
|
362
409
|
.concat(depsTmplGroup.getScriptDependencies(compPath));
|
|
@@ -418,6 +465,7 @@ class GlassEaselMiniprogramWebpackPlugin {
|
|
|
418
465
|
// write index module
|
|
419
466
|
yield Promise.all(tasks);
|
|
420
467
|
yield new Promise((resolve) => {
|
|
468
|
+
styleSheetManager.prepareHostStyles();
|
|
421
469
|
updateVirtualIndexFile(tmplGroup);
|
|
422
470
|
tmplGroup.free();
|
|
423
471
|
compilation.rebuildModule(indexModule, () => resolve());
|
|
@@ -457,7 +505,7 @@ class GlassEaselMiniprogramWebpackPlugin {
|
|
|
457
505
|
})
|
|
458
506
|
${addStyleSheet}
|
|
459
507
|
codeSpace.globalComponentEnv(index.globalObject, '${(0, helpers_1.escapeJsString)(compPath)}', () => {
|
|
460
|
-
require('./${(0, helpers_1.escapeJsString)(path.basename(compInfo.main))}')
|
|
508
|
+
module.exports = require('./${(0, helpers_1.escapeJsString)(path.basename(compInfo.main))}')
|
|
461
509
|
})
|
|
462
510
|
`);
|
|
463
511
|
};
|
|
@@ -482,14 +530,14 @@ class GlassEaselMiniprogramWebpackPlugin {
|
|
|
482
530
|
if (typeof global !== 'undefined') { return global }
|
|
483
531
|
throw new Error('The global object cannot be recognized')
|
|
484
532
|
})()
|
|
485
|
-
`;
|
|
486
|
-
const entryFooter = `
|
|
487
533
|
var initWithBackend = function (backend) {
|
|
488
534
|
var ab = env.associateBackend(backend)
|
|
489
535
|
;(${styleSheetManager.toCodeString()})(ab)
|
|
490
536
|
return ab
|
|
491
537
|
}
|
|
492
538
|
exports.initWithBackend = initWithBackend
|
|
539
|
+
`;
|
|
540
|
+
const entryFooter = `
|
|
493
541
|
var registerGlobalEventListener = function (backend) {
|
|
494
542
|
backend.onEvent((target, type, detail, options) => {
|
|
495
543
|
glassEasel.triggerEvent(target, type, detail, options)
|
package/index.ts
CHANGED
|
@@ -3,9 +3,27 @@
|
|
|
3
3
|
import { promises as fs } from 'node:fs'
|
|
4
4
|
import * as path from 'node:path'
|
|
5
5
|
import { NormalModule, type Compiler, type WebpackPluginInstance } from 'webpack'
|
|
6
|
+
import chalk from 'chalk'
|
|
6
7
|
import { TmplGroup } from 'glass-easel-template-compiler'
|
|
7
8
|
import { escapeJsString } from './helpers'
|
|
8
9
|
|
|
10
|
+
type VirtualModulePluginType = {
|
|
11
|
+
apply: (compiler: Compiler) => void
|
|
12
|
+
writeModule: (p: string, c: string) => void
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
type Warning = {
|
|
16
|
+
isError: boolean
|
|
17
|
+
level: number
|
|
18
|
+
code: number
|
|
19
|
+
message: string
|
|
20
|
+
path: string
|
|
21
|
+
startLine: number
|
|
22
|
+
startColumn: number
|
|
23
|
+
endLine: number
|
|
24
|
+
endColumn: number
|
|
25
|
+
}
|
|
26
|
+
|
|
9
27
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
10
28
|
const chokidar = require('chokidar')
|
|
11
29
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
@@ -18,6 +36,7 @@ export const GlassEaselMiniprogramWxssLoader = path.join(__dirname, 'wxss_loader
|
|
|
18
36
|
|
|
19
37
|
const PLUGIN_NAME = 'GlassEaselMiniprogramWebpackPlugin'
|
|
20
38
|
const CACHE_ETAG = 1
|
|
39
|
+
const HOST_STYLES_MODULE = '__glass_easel_host_styles__.wxss'
|
|
21
40
|
|
|
22
41
|
type PluginConfig = {
|
|
23
42
|
path: string
|
|
@@ -66,13 +85,24 @@ const writeCache = <T>(compiler: Compiler, key: string, value: T): Promise<void>
|
|
|
66
85
|
})
|
|
67
86
|
|
|
68
87
|
class StyleSheetManager {
|
|
69
|
-
map = Object.create(null) as {
|
|
88
|
+
map = Object.create(null) as {
|
|
89
|
+
[path: string]: { scopeName: string; srcPath: string; lowPriority: string }
|
|
90
|
+
}
|
|
70
91
|
enableStyleScope = Object.create(null) as { [path: string]: boolean }
|
|
71
92
|
scopeNameInc = 0
|
|
72
93
|
disableClassPrefix: boolean
|
|
73
|
-
|
|
74
|
-
|
|
94
|
+
codeRoot: string
|
|
95
|
+
virtualModules: VirtualModulePluginType
|
|
96
|
+
hostStylesReady = false
|
|
97
|
+
|
|
98
|
+
constructor(
|
|
99
|
+
disableClassPrefix: boolean,
|
|
100
|
+
codeRoot: string,
|
|
101
|
+
virtualModules: VirtualModulePluginType,
|
|
102
|
+
) {
|
|
75
103
|
this.disableClassPrefix = disableClassPrefix
|
|
104
|
+
this.codeRoot = codeRoot
|
|
105
|
+
this.virtualModules = virtualModules
|
|
76
106
|
}
|
|
77
107
|
|
|
78
108
|
add(compPath: string, srcPath: string) {
|
|
@@ -93,6 +123,7 @@ class StyleSheetManager {
|
|
|
93
123
|
this.map[compPath] = {
|
|
94
124
|
srcPath,
|
|
95
125
|
scopeName,
|
|
126
|
+
lowPriority: '',
|
|
96
127
|
}
|
|
97
128
|
}
|
|
98
129
|
|
|
@@ -111,16 +142,33 @@ class StyleSheetManager {
|
|
|
111
142
|
return undefined
|
|
112
143
|
}
|
|
113
144
|
|
|
145
|
+
setLowPriorityStyles(compPath: string, source: string, _map: string) {
|
|
146
|
+
const meta = this.map[compPath]
|
|
147
|
+
if (meta && meta.lowPriority !== source) {
|
|
148
|
+
meta.lowPriority = source
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
prepareHostStyles() {
|
|
153
|
+
const lowPriorityContent = Object.values(this.map)
|
|
154
|
+
.map(({ lowPriority }) => lowPriority)
|
|
155
|
+
.join('\n')
|
|
156
|
+
const fullPath = path.join(this.codeRoot, HOST_STYLES_MODULE)
|
|
157
|
+
this.virtualModules.writeModule(fullPath, lowPriorityContent)
|
|
158
|
+
this.hostStylesReady = true
|
|
159
|
+
}
|
|
160
|
+
|
|
114
161
|
toCodeString() {
|
|
115
162
|
const arr = Object.entries(this.map).map(([compPath, { srcPath }]) => {
|
|
116
163
|
const s = `backend.registerStyleSheetContent('${escapeJsString(
|
|
117
164
|
compPath,
|
|
118
|
-
)}', require('${escapeJsString(srcPath)}'));`
|
|
165
|
+
)}', (require('${escapeJsString(srcPath)}').default||''));`
|
|
119
166
|
return s
|
|
120
167
|
})
|
|
168
|
+
const req = this.hostStylesReady ? `(require('./${HOST_STYLES_MODULE}').default||'')` : "''"
|
|
121
169
|
return `
|
|
122
170
|
function (backend) {
|
|
123
|
-
backend.registerStyleSheetContent('app', require('./app.wxss'))
|
|
171
|
+
backend.registerStyleSheetContent('app', ${req} + (require('./app.wxss').default||''))
|
|
124
172
|
${arr.join('')}
|
|
125
173
|
}
|
|
126
174
|
`
|
|
@@ -134,10 +182,7 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
134
182
|
customBootstrap: boolean
|
|
135
183
|
disableClassPrefix: boolean
|
|
136
184
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
|
137
|
-
virtualModules = new VirtualModulesPlugin() as
|
|
138
|
-
apply: (compiler: Compiler) => void
|
|
139
|
-
writeModule: (p: string, c: string) => void
|
|
140
|
-
}
|
|
185
|
+
virtualModules = new VirtualModulesPlugin() as VirtualModulePluginType
|
|
141
186
|
|
|
142
187
|
constructor(options: Partial<PluginConfig>) {
|
|
143
188
|
this.path = options.path || './src'
|
|
@@ -157,7 +202,15 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
157
202
|
let globalStaticConfig = {} as GlobalStaticConfig
|
|
158
203
|
let appEntry: 'app.js' | 'app.ts' | null = null
|
|
159
204
|
const depsTmplGroup = new TmplGroup()
|
|
160
|
-
|
|
205
|
+
|
|
206
|
+
// init style sheet manager
|
|
207
|
+
const virtualModules = this.virtualModules
|
|
208
|
+
virtualModules.apply(compiler)
|
|
209
|
+
const styleSheetManager = new StyleSheetManager(
|
|
210
|
+
this.disableClassPrefix,
|
|
211
|
+
codeRoot,
|
|
212
|
+
this.virtualModules,
|
|
213
|
+
)
|
|
161
214
|
|
|
162
215
|
// cleanup wasm modules
|
|
163
216
|
compiler.hooks.shutdown.tap(PLUGIN_NAME, () => {
|
|
@@ -351,8 +404,6 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
351
404
|
})
|
|
352
405
|
|
|
353
406
|
// collect virtual files
|
|
354
|
-
const virtualModules = this.virtualModules
|
|
355
|
-
virtualModules.apply(compiler)
|
|
356
407
|
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
|
|
357
408
|
// add loaders
|
|
358
409
|
NormalModule.getCompilationHooks(compilation).beforeLoaders.tap(
|
|
@@ -364,11 +415,18 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
364
415
|
const relPath = path.relative(codeRoot, absPath).split(path.sep).join('/')
|
|
365
416
|
const compPath = relPath.slice(0, -extName.length)
|
|
366
417
|
if (extName === '.wxss') {
|
|
367
|
-
loaders.forEach((x) => {
|
|
418
|
+
loaders.forEach((x, i) => {
|
|
368
419
|
if (x.loader === GlassEaselMiniprogramWxssLoader) {
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
420
|
+
if (relPath === HOST_STYLES_MODULE) {
|
|
421
|
+
loaders.splice(i, loaders.length - i)
|
|
422
|
+
} else {
|
|
423
|
+
x.options = {
|
|
424
|
+
classPrefix: styleSheetManager.getScopeName(compPath),
|
|
425
|
+
compPath,
|
|
426
|
+
setLowPriorityStyles: (s: string, map: string) => {
|
|
427
|
+
styleSheetManager.setLowPriorityStyles(compPath, s, map)
|
|
428
|
+
},
|
|
429
|
+
}
|
|
372
430
|
}
|
|
373
431
|
}
|
|
374
432
|
})
|
|
@@ -378,7 +436,19 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
378
436
|
x.options = {
|
|
379
437
|
addTemplate(content: string) {
|
|
380
438
|
wxmlContentMap[compPath] = content
|
|
381
|
-
depsTmplGroup.addTmpl(compPath, content)
|
|
439
|
+
const warnings = depsTmplGroup.addTmpl(compPath, content) as Warning[]
|
|
440
|
+
if (warnings && warnings.length > 0) {
|
|
441
|
+
warnings.forEach((warning) => {
|
|
442
|
+
const msgKindColored = warning.isError
|
|
443
|
+
? chalk.red('ERROR')
|
|
444
|
+
: chalk.yellow('WARN')
|
|
445
|
+
const msg = `[glass-easel-template-compiler] ${msgKindColored} ${warning.path}:${warning.startLine}:${warning.startColumn} (#${warning.code}): ${warning.message}`
|
|
446
|
+
// eslint-disable-next-line no-console
|
|
447
|
+
if (warning.isError) console.error(msg)
|
|
448
|
+
// eslint-disable-next-line no-console
|
|
449
|
+
else console.warn(msg)
|
|
450
|
+
})
|
|
451
|
+
}
|
|
382
452
|
const deps = depsTmplGroup
|
|
383
453
|
.getDirectDependencies(compPath)
|
|
384
454
|
.concat(depsTmplGroup.getScriptDependencies(compPath))
|
|
@@ -446,6 +516,7 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
446
516
|
// write index module
|
|
447
517
|
await Promise.all(tasks)
|
|
448
518
|
await new Promise<void>((resolve) => {
|
|
519
|
+
styleSheetManager.prepareHostStyles()
|
|
449
520
|
updateVirtualIndexFile(tmplGroup)
|
|
450
521
|
tmplGroup.free()
|
|
451
522
|
compilation.rebuildModule(indexModule!, () => resolve())
|
|
@@ -488,7 +559,7 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
488
559
|
})
|
|
489
560
|
${addStyleSheet}
|
|
490
561
|
codeSpace.globalComponentEnv(index.globalObject, '${escapeJsString(compPath)}', () => {
|
|
491
|
-
require('./${escapeJsString(path.basename(compInfo.main))}')
|
|
562
|
+
module.exports = require('./${escapeJsString(path.basename(compInfo.main))}')
|
|
492
563
|
})
|
|
493
564
|
`,
|
|
494
565
|
)
|
|
@@ -515,14 +586,14 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance
|
|
|
515
586
|
if (typeof global !== 'undefined') { return global }
|
|
516
587
|
throw new Error('The global object cannot be recognized')
|
|
517
588
|
})()
|
|
518
|
-
`
|
|
519
|
-
const entryFooter = `
|
|
520
589
|
var initWithBackend = function (backend) {
|
|
521
590
|
var ab = env.associateBackend(backend)
|
|
522
591
|
;(${styleSheetManager.toCodeString()})(ab)
|
|
523
592
|
return ab
|
|
524
593
|
}
|
|
525
594
|
exports.initWithBackend = initWithBackend
|
|
595
|
+
`
|
|
596
|
+
const entryFooter = `
|
|
526
597
|
var registerGlobalEventListener = function (backend) {
|
|
527
598
|
backend.onEvent((target, type, detail, options) => {
|
|
528
599
|
glassEasel.triggerEvent(target, type, detail, options)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "glass-easel-miniprogram-webpack-plugin",
|
|
3
3
|
"description": "The webpack plugin of the glass-easel project for MiniProgram file structure",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.8.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/wechat-miniprogram/glass-easel.git"
|
|
@@ -18,16 +18,17 @@
|
|
|
18
18
|
"main": "index.js",
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"webpack": "^5.85.0",
|
|
21
|
-
"glass-easel
|
|
22
|
-
"glass-easel": "0.
|
|
21
|
+
"glass-easel": "0.8.0",
|
|
22
|
+
"glass-easel-miniprogram-adapter": "0.8.0"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
+
"chalk": "4",
|
|
25
26
|
"chokidar": "^3.5.3",
|
|
26
27
|
"source-map": "^0.7.4",
|
|
27
28
|
"webpack-sources": "^3.2.1",
|
|
28
29
|
"webpack-virtual-modules": "^0.5.0",
|
|
29
|
-
"glass-easel-stylesheet-compiler": "0.
|
|
30
|
-
"glass-easel-template-compiler": "0.
|
|
30
|
+
"glass-easel-stylesheet-compiler": "0.8.0",
|
|
31
|
+
"glass-easel-template-compiler": "0.8.0"
|
|
31
32
|
},
|
|
32
33
|
"scripts": {
|
|
33
34
|
"build": "tsc -p .",
|
package/wxss_loader.js
CHANGED
|
@@ -1,16 +1,30 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
|
|
3
|
+
const chalk = require('chalk')
|
|
3
4
|
const { SourceMapGenerator, SourceMapConsumer } = require('source-map')
|
|
4
5
|
const { StyleSheetTransformer } = require('glass-easel-stylesheet-compiler')
|
|
5
6
|
|
|
6
7
|
module.exports = function (src, prevMap, meta) {
|
|
7
8
|
const callback = this.async()
|
|
8
|
-
const { classPrefix } = this.query
|
|
9
|
-
const sst = new StyleSheetTransformer(this.resourcePath, src, classPrefix, 750)
|
|
9
|
+
const { classPrefix, compPath, setLowPriorityStyles } = this.query
|
|
10
|
+
const sst = new StyleSheetTransformer(this.resourcePath, src, classPrefix, 750, compPath)
|
|
11
|
+
setLowPriorityStyles(sst.getLowPriorityContent(), sst.getLowPrioritySourceMap())
|
|
12
|
+
const warnings = sst.extractWarnings()
|
|
13
|
+
if (warnings && warnings.length > 0) {
|
|
14
|
+
warnings.forEach((warning) => {
|
|
15
|
+
const msgKindColored = warning.isError
|
|
16
|
+
? chalk.red('ERROR')
|
|
17
|
+
: chalk.yellow('WARN')
|
|
18
|
+
const msg = `[glass-easel-stylesheet-compiler] ${msgKindColored} ${warning.path}:${warning.startLine}:${warning.startColumn} (#${warning.code}): ${warning.message}`
|
|
19
|
+
if (warning.isError) console.error(msg)
|
|
20
|
+
else console.warn(msg)
|
|
21
|
+
})
|
|
22
|
+
}
|
|
10
23
|
const ss = sst.getContent()
|
|
11
24
|
let map
|
|
12
25
|
if (this.sourceMap) {
|
|
13
|
-
const ssSourceMap = JSON.parse(sst.
|
|
26
|
+
const ssSourceMap = JSON.parse(sst.getSourceMap())
|
|
27
|
+
sst.free()
|
|
14
28
|
if (prevMap) {
|
|
15
29
|
const destConsumer = new SourceMapConsumer(ssSourceMap)
|
|
16
30
|
const srcConsumer = new SourceMapConsumer(prevMap)
|