@lynx-js/lynx-bundle-rslib-config-canary 0.0.0 → 0.0.1-canary-20251201-3692a169
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/CHANGELOG.md +21 -0
- package/README.md +3 -0
- package/lib/externalBundleRslibConfig.d.ts +100 -0
- package/lib/externalBundleRslibConfig.js +239 -0
- package/lib/index.d.ts +49 -0
- package/lib/index.js +50 -0
- package/lib/webpack/ExternalBundleWebpackPlugin.d.ts +51 -0
- package/lib/webpack/ExternalBundleWebpackPlugin.js +73 -0
- package/lib/webpack/MainThreadRuntimeWrapperWebpackPlugin.d.ts +26 -0
- package/lib/webpack/MainThreadRuntimeWrapperWebpackPlugin.js +29 -0
- package/package.json +47 -6
- package/index.js +0 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# @lynx-js/lynx-bundle-rslib-config
|
|
2
|
+
|
|
3
|
+
## 0.0.1-canary-20251201060736-3692a169ae443124de0e9f7a288318f5dfba13b0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Add `@lynx-js/lynx-bundle-rslib-config` for bundling Lynx bundle with [Rslib](https://rslib.rs/): ([#1943](https://github.com/lynx-family/lynx-stack/pull/1943))
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
// rslib.config.js
|
|
11
|
+
import { defineExternalBundleRslibConfig } from "@lynx-js/lynx-bundle-rslib-config";
|
|
12
|
+
|
|
13
|
+
export default defineExternalBundleRslibConfig({
|
|
14
|
+
id: "utils-lib",
|
|
15
|
+
source: {
|
|
16
|
+
entry: {
|
|
17
|
+
utils: "./src/utils.ts",
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
```
|
package/README.md
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import type { LibConfig, RslibConfig } from '@rslib/core';
|
|
2
|
+
/**
|
|
3
|
+
* The options for encoding the external bundle.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export interface EncodeOptions {
|
|
8
|
+
/**
|
|
9
|
+
* The target SDK version of the external bundle.
|
|
10
|
+
*
|
|
11
|
+
* @defaultValue '3.4'
|
|
12
|
+
*/
|
|
13
|
+
targetSdkVersion?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* The Layer name of background and main-thread.
|
|
17
|
+
*
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
export declare const LAYERS: {
|
|
21
|
+
readonly BACKGROUND: "background";
|
|
22
|
+
readonly MAIN_THREAD: "main-thread";
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* The default lib config{@link LibConfig} for external bundle.
|
|
26
|
+
*
|
|
27
|
+
* @public
|
|
28
|
+
*/
|
|
29
|
+
export declare const defaultExternalBundleLibConfig: LibConfig;
|
|
30
|
+
/**
|
|
31
|
+
* Get the rslib config for building Lynx external bundles.
|
|
32
|
+
*
|
|
33
|
+
* @public
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
*
|
|
37
|
+
* If you want to build an external bundle which use in Lynx background thread, you can use the following code:
|
|
38
|
+
*
|
|
39
|
+
* ```js
|
|
40
|
+
* // rslib.config.js
|
|
41
|
+
* import { defineExternalBundleRslibConfig, LAYERS } from '@lynx-js/lynx-bundle-rslib-config'
|
|
42
|
+
*
|
|
43
|
+
* export default defineExternalBundleRslibConfig({
|
|
44
|
+
* id: 'utils-lib',
|
|
45
|
+
* source: {
|
|
46
|
+
* entry: {
|
|
47
|
+
* utils: {
|
|
48
|
+
* import: './src/utils.ts',
|
|
49
|
+
* layer: LAYERS.BACKGROUND,
|
|
50
|
+
* }
|
|
51
|
+
* }
|
|
52
|
+
* }
|
|
53
|
+
* })
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* Then you can use `lynx.loadScript('utils', { bundleName: 'utils-lib-bundle-url' })` in background thread.
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
*
|
|
60
|
+
* If you want to build an external bundle which use in Lynx main thread, you can use the following code:
|
|
61
|
+
*
|
|
62
|
+
* ```js
|
|
63
|
+
* // rslib.config.js
|
|
64
|
+
* import { defineExternalBundleRslibConfig, LAYERS } from '@lynx-js/lynx-bundle-rslib-config'
|
|
65
|
+
*
|
|
66
|
+
* export default defineExternalBundleRslibConfig({
|
|
67
|
+
* id: 'utils-lib',
|
|
68
|
+
* source: {
|
|
69
|
+
* entry: {
|
|
70
|
+
* utils: {
|
|
71
|
+
* import: './src/utils.ts',
|
|
72
|
+
* layer: LAYERS.MAIN_THREAD,
|
|
73
|
+
* }
|
|
74
|
+
* }
|
|
75
|
+
* }
|
|
76
|
+
* })
|
|
77
|
+
* ```
|
|
78
|
+
* Then you can use `lynx.loadScript('utils', { bundleName: 'utils-lib-bundle-url' })` in main-thread.
|
|
79
|
+
*
|
|
80
|
+
* @example
|
|
81
|
+
*
|
|
82
|
+
* If you want to build an external bundle which use both in Lynx main thread and background thread. You don't need to set the layer.
|
|
83
|
+
*
|
|
84
|
+
* ```js
|
|
85
|
+
* // rslib.config.js
|
|
86
|
+
* import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config'
|
|
87
|
+
*
|
|
88
|
+
* export default defineExternalBundleRslibConfig({
|
|
89
|
+
* id: 'utils-lib',
|
|
90
|
+
* source: {
|
|
91
|
+
* entry: {
|
|
92
|
+
* utils: './src/utils.ts',
|
|
93
|
+
* },
|
|
94
|
+
* }
|
|
95
|
+
* })
|
|
96
|
+
* ```
|
|
97
|
+
*
|
|
98
|
+
* Then you can use `lynx.loadScript('utils', { bundleName: 'utils-lib-bundle-url' })` in background thread and `lynx.loadScript('utils__main-thread', { bundleName: 'utils-lib-bundle-url' })` in main-thread.
|
|
99
|
+
*/
|
|
100
|
+
export declare function defineExternalBundleRslibConfig(userLibConfig: LibConfig, encodeOptions?: EncodeOptions): RslibConfig;
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
// Copyright 2025 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
import { rsbuild } from '@rslib/core';
|
|
5
|
+
import { RuntimeWrapperWebpackPlugin as BackgroundRuntimeWrapperWebpackPlugin } from '@lynx-js/runtime-wrapper-webpack-plugin';
|
|
6
|
+
import { ExternalBundleWebpackPlugin } from './webpack/ExternalBundleWebpackPlugin.js';
|
|
7
|
+
import { MainThreadRuntimeWrapperWebpackPlugin } from './webpack/MainThreadRuntimeWrapperWebpackPlugin.js';
|
|
8
|
+
/**
|
|
9
|
+
* The Layer name of background and main-thread.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export const LAYERS = {
|
|
14
|
+
BACKGROUND: 'background',
|
|
15
|
+
MAIN_THREAD: 'main-thread',
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* The default lib config{@link LibConfig} for external bundle.
|
|
19
|
+
*
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
export const defaultExternalBundleLibConfig = {
|
|
23
|
+
format: 'cjs',
|
|
24
|
+
syntax: 'es2015',
|
|
25
|
+
autoExtension: false,
|
|
26
|
+
autoExternal: {
|
|
27
|
+
dependencies: false,
|
|
28
|
+
peerDependencies: false,
|
|
29
|
+
},
|
|
30
|
+
shims: {
|
|
31
|
+
cjs: {
|
|
32
|
+
// Don't inject shim because Lynx don't support.
|
|
33
|
+
'import.meta.url': false,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
output: {
|
|
37
|
+
minify: {
|
|
38
|
+
jsOptions: {
|
|
39
|
+
minimizerOptions: {
|
|
40
|
+
compress: {
|
|
41
|
+
/**
|
|
42
|
+
* the module wrapper iife need to be kept to provide the return value
|
|
43
|
+
* for the module loader in lynx_core.js
|
|
44
|
+
*/
|
|
45
|
+
negate_iife: false,
|
|
46
|
+
// Allow return in module wrapper
|
|
47
|
+
side_effects: false,
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
source: {
|
|
54
|
+
include: [/node_modules/],
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Get the rslib config for building Lynx external bundles.
|
|
59
|
+
*
|
|
60
|
+
* @public
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
*
|
|
64
|
+
* If you want to build an external bundle which use in Lynx background thread, you can use the following code:
|
|
65
|
+
*
|
|
66
|
+
* ```js
|
|
67
|
+
* // rslib.config.js
|
|
68
|
+
* import { defineExternalBundleRslibConfig, LAYERS } from '@lynx-js/lynx-bundle-rslib-config'
|
|
69
|
+
*
|
|
70
|
+
* export default defineExternalBundleRslibConfig({
|
|
71
|
+
* id: 'utils-lib',
|
|
72
|
+
* source: {
|
|
73
|
+
* entry: {
|
|
74
|
+
* utils: {
|
|
75
|
+
* import: './src/utils.ts',
|
|
76
|
+
* layer: LAYERS.BACKGROUND,
|
|
77
|
+
* }
|
|
78
|
+
* }
|
|
79
|
+
* }
|
|
80
|
+
* })
|
|
81
|
+
* ```
|
|
82
|
+
*
|
|
83
|
+
* Then you can use `lynx.loadScript('utils', { bundleName: 'utils-lib-bundle-url' })` in background thread.
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
*
|
|
87
|
+
* If you want to build an external bundle which use in Lynx main thread, you can use the following code:
|
|
88
|
+
*
|
|
89
|
+
* ```js
|
|
90
|
+
* // rslib.config.js
|
|
91
|
+
* import { defineExternalBundleRslibConfig, LAYERS } from '@lynx-js/lynx-bundle-rslib-config'
|
|
92
|
+
*
|
|
93
|
+
* export default defineExternalBundleRslibConfig({
|
|
94
|
+
* id: 'utils-lib',
|
|
95
|
+
* source: {
|
|
96
|
+
* entry: {
|
|
97
|
+
* utils: {
|
|
98
|
+
* import: './src/utils.ts',
|
|
99
|
+
* layer: LAYERS.MAIN_THREAD,
|
|
100
|
+
* }
|
|
101
|
+
* }
|
|
102
|
+
* }
|
|
103
|
+
* })
|
|
104
|
+
* ```
|
|
105
|
+
* Then you can use `lynx.loadScript('utils', { bundleName: 'utils-lib-bundle-url' })` in main-thread.
|
|
106
|
+
*
|
|
107
|
+
* @example
|
|
108
|
+
*
|
|
109
|
+
* If you want to build an external bundle which use both in Lynx main thread and background thread. You don't need to set the layer.
|
|
110
|
+
*
|
|
111
|
+
* ```js
|
|
112
|
+
* // rslib.config.js
|
|
113
|
+
* import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config'
|
|
114
|
+
*
|
|
115
|
+
* export default defineExternalBundleRslibConfig({
|
|
116
|
+
* id: 'utils-lib',
|
|
117
|
+
* source: {
|
|
118
|
+
* entry: {
|
|
119
|
+
* utils: './src/utils.ts',
|
|
120
|
+
* },
|
|
121
|
+
* }
|
|
122
|
+
* })
|
|
123
|
+
* ```
|
|
124
|
+
*
|
|
125
|
+
* Then you can use `lynx.loadScript('utils', { bundleName: 'utils-lib-bundle-url' })` in background thread and `lynx.loadScript('utils__main-thread', { bundleName: 'utils-lib-bundle-url' })` in main-thread.
|
|
126
|
+
*/
|
|
127
|
+
export function defineExternalBundleRslibConfig(userLibConfig, encodeOptions = {}) {
|
|
128
|
+
return {
|
|
129
|
+
lib: [
|
|
130
|
+
// eslint-disable-next-line import/namespace
|
|
131
|
+
rsbuild.mergeRsbuildConfig(defaultExternalBundleLibConfig, userLibConfig),
|
|
132
|
+
],
|
|
133
|
+
plugins: [
|
|
134
|
+
externalBundleEntryRsbuildPlugin(),
|
|
135
|
+
externalBundleRsbuildPlugin(encodeOptions.targetSdkVersion),
|
|
136
|
+
],
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
const externalBundleEntryRsbuildPlugin = () => ({
|
|
140
|
+
name: 'lynx:external-bundle-entry',
|
|
141
|
+
setup(api) {
|
|
142
|
+
api.modifyBundlerChain((chain) => {
|
|
143
|
+
// copy entries
|
|
144
|
+
const entries = chain.entryPoints.entries() ?? {};
|
|
145
|
+
chain.entryPoints.clear();
|
|
146
|
+
const backgroundEntryName = [];
|
|
147
|
+
const mainThreadEntryName = [];
|
|
148
|
+
const addLayeredEntry = (entryName, entryValue) => {
|
|
149
|
+
chain
|
|
150
|
+
.entry(entryName)
|
|
151
|
+
.add(entryValue)
|
|
152
|
+
.end();
|
|
153
|
+
};
|
|
154
|
+
Object.entries(entries).forEach(([entryName, entryPoint]) => {
|
|
155
|
+
const entryPointValue = entryPoint.values();
|
|
156
|
+
for (const value of entryPointValue) {
|
|
157
|
+
if (typeof value === 'string' || Array.isArray(value)) {
|
|
158
|
+
const mainThreadEntry = `${entryName}__main-thread`;
|
|
159
|
+
const backgroundEntry = entryName;
|
|
160
|
+
mainThreadEntryName.push(mainThreadEntry);
|
|
161
|
+
backgroundEntryName.push(backgroundEntry);
|
|
162
|
+
addLayeredEntry(mainThreadEntry, {
|
|
163
|
+
import: value,
|
|
164
|
+
layer: LAYERS.MAIN_THREAD,
|
|
165
|
+
});
|
|
166
|
+
addLayeredEntry(backgroundEntry, {
|
|
167
|
+
import: value,
|
|
168
|
+
layer: LAYERS.BACKGROUND,
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
// object
|
|
173
|
+
const { layer } = value;
|
|
174
|
+
if (layer === LAYERS.MAIN_THREAD) {
|
|
175
|
+
mainThreadEntryName.push(entryName);
|
|
176
|
+
addLayeredEntry(entryName, {
|
|
177
|
+
...value,
|
|
178
|
+
layer: LAYERS.MAIN_THREAD,
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
else if (layer === LAYERS.BACKGROUND) {
|
|
182
|
+
backgroundEntryName.push(entryName);
|
|
183
|
+
addLayeredEntry(entryName, { ...value, layer: LAYERS.BACKGROUND });
|
|
184
|
+
}
|
|
185
|
+
else {
|
|
186
|
+
// not specify layer
|
|
187
|
+
const mainThreadEntry = `${entryName}__main-thread`;
|
|
188
|
+
const backgroundEntry = entryName;
|
|
189
|
+
mainThreadEntryName.push(mainThreadEntry);
|
|
190
|
+
backgroundEntryName.push(backgroundEntry);
|
|
191
|
+
addLayeredEntry(mainThreadEntry, {
|
|
192
|
+
...value,
|
|
193
|
+
layer: LAYERS.MAIN_THREAD,
|
|
194
|
+
});
|
|
195
|
+
addLayeredEntry(backgroundEntry, {
|
|
196
|
+
...value,
|
|
197
|
+
layer: LAYERS.BACKGROUND,
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
// add external bundle wrapper
|
|
204
|
+
// dprint-ignore
|
|
205
|
+
chain
|
|
206
|
+
.plugin(MainThreadRuntimeWrapperWebpackPlugin.name)
|
|
207
|
+
.use(MainThreadRuntimeWrapperWebpackPlugin, [{
|
|
208
|
+
test: mainThreadEntryName.map((name) => new RegExp(`${escapeRegex(name)}\\.js$`)),
|
|
209
|
+
}])
|
|
210
|
+
.end()
|
|
211
|
+
.plugin(BackgroundRuntimeWrapperWebpackPlugin.name)
|
|
212
|
+
.use(BackgroundRuntimeWrapperWebpackPlugin, [{
|
|
213
|
+
test: backgroundEntryName.map((name) => new RegExp(`${escapeRegex(name)}\\.js$`)),
|
|
214
|
+
}])
|
|
215
|
+
.end();
|
|
216
|
+
});
|
|
217
|
+
},
|
|
218
|
+
});
|
|
219
|
+
const externalBundleRsbuildPlugin = (targetSdkVersion) => ({
|
|
220
|
+
name: 'lynx:gen-external-bundle',
|
|
221
|
+
async setup(api) {
|
|
222
|
+
const { getEncodeMode } = await import('@lynx-js/tasm');
|
|
223
|
+
api.modifyBundlerChain((chain, { environment: { name: libName } }) => {
|
|
224
|
+
// dprint-ignore
|
|
225
|
+
chain
|
|
226
|
+
.plugin(ExternalBundleWebpackPlugin.name)
|
|
227
|
+
.use(ExternalBundleWebpackPlugin, [
|
|
228
|
+
{
|
|
229
|
+
bundleFileName: `${libName}.lynx.bundle`,
|
|
230
|
+
encode: getEncodeMode(),
|
|
231
|
+
targetSdkVersion,
|
|
232
|
+
},
|
|
233
|
+
])
|
|
234
|
+
.end();
|
|
235
|
+
});
|
|
236
|
+
},
|
|
237
|
+
});
|
|
238
|
+
const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
239
|
+
//# sourceMappingURL=externalBundleRslibConfig.js.map
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @packageDocumentation
|
|
3
|
+
*
|
|
4
|
+
* `@lynx-js/lynx-bundle-rslib-config` is the package that provides the configurations for bundling Lynx bundle with {@link https://rslib.rs/ | Rslib}.
|
|
5
|
+
*
|
|
6
|
+
* 1. Install the package:
|
|
7
|
+
*
|
|
8
|
+
* ```bash
|
|
9
|
+
* pnpm add @lynx-js/lynx-bundle-rslib-config @rslib/core -D
|
|
10
|
+
* ```
|
|
11
|
+
*
|
|
12
|
+
* 2. Add the following code to `rslib.config.ts`:
|
|
13
|
+
*
|
|
14
|
+
* ```ts
|
|
15
|
+
* import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config'
|
|
16
|
+
*
|
|
17
|
+
* export default defineExternalBundleRslibConfig({
|
|
18
|
+
* id: 'my-utils',
|
|
19
|
+
* source: {
|
|
20
|
+
* entry: {
|
|
21
|
+
* utils: './src/utils.ts'
|
|
22
|
+
* }
|
|
23
|
+
* }
|
|
24
|
+
* })
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* 3. Run the command `pnpm rslib build` and you will get the `my-utils.lynx.bundle` in the `dist` directory. You can upload the bundle to CDN or server.
|
|
28
|
+
*
|
|
29
|
+
* 4. Finally, you can fetch and load the external bundle through:
|
|
30
|
+
*
|
|
31
|
+
* ```js
|
|
32
|
+
* const bundleUrl = 'http://cdn.com/my-utils.lynx.bundle'
|
|
33
|
+
* lynx.fetchBundle(bundleUrl).wait(3) // timeout is 3s
|
|
34
|
+
*
|
|
35
|
+
* if (__BACKGROUND__) {
|
|
36
|
+
* const utils = lynx.loadScript('utils', { bundleName: bundleUrl })
|
|
37
|
+
* } else {
|
|
38
|
+
* const utils = lynx.loadScript('utils__main-thread', { bundleName: bundleUrl })
|
|
39
|
+
* }
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* For more detail, please refer to the {@link defineExternalBundleRslibConfig}.
|
|
43
|
+
*/
|
|
44
|
+
export { defineExternalBundleRslibConfig, defaultExternalBundleLibConfig, LAYERS, } from './externalBundleRslibConfig.js';
|
|
45
|
+
export type { EncodeOptions } from './externalBundleRslibConfig.js';
|
|
46
|
+
export { ExternalBundleWebpackPlugin } from './webpack/ExternalBundleWebpackPlugin.js';
|
|
47
|
+
export type { ExternalBundleWebpackPluginOptions } from './webpack/ExternalBundleWebpackPlugin.js';
|
|
48
|
+
export { MainThreadRuntimeWrapperWebpackPlugin } from './webpack/MainThreadRuntimeWrapperWebpackPlugin.js';
|
|
49
|
+
export type { MainThreadRuntimeWrapperWebpackPluginOptions } from './webpack/MainThreadRuntimeWrapperWebpackPlugin.js';
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
// Copyright 2025 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
/**
|
|
5
|
+
* @packageDocumentation
|
|
6
|
+
*
|
|
7
|
+
* `@lynx-js/lynx-bundle-rslib-config` is the package that provides the configurations for bundling Lynx bundle with {@link https://rslib.rs/ | Rslib}.
|
|
8
|
+
*
|
|
9
|
+
* 1. Install the package:
|
|
10
|
+
*
|
|
11
|
+
* ```bash
|
|
12
|
+
* pnpm add @lynx-js/lynx-bundle-rslib-config @rslib/core -D
|
|
13
|
+
* ```
|
|
14
|
+
*
|
|
15
|
+
* 2. Add the following code to `rslib.config.ts`:
|
|
16
|
+
*
|
|
17
|
+
* ```ts
|
|
18
|
+
* import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config'
|
|
19
|
+
*
|
|
20
|
+
* export default defineExternalBundleRslibConfig({
|
|
21
|
+
* id: 'my-utils',
|
|
22
|
+
* source: {
|
|
23
|
+
* entry: {
|
|
24
|
+
* utils: './src/utils.ts'
|
|
25
|
+
* }
|
|
26
|
+
* }
|
|
27
|
+
* })
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* 3. Run the command `pnpm rslib build` and you will get the `my-utils.lynx.bundle` in the `dist` directory. You can upload the bundle to CDN or server.
|
|
31
|
+
*
|
|
32
|
+
* 4. Finally, you can fetch and load the external bundle through:
|
|
33
|
+
*
|
|
34
|
+
* ```js
|
|
35
|
+
* const bundleUrl = 'http://cdn.com/my-utils.lynx.bundle'
|
|
36
|
+
* lynx.fetchBundle(bundleUrl).wait(3) // timeout is 3s
|
|
37
|
+
*
|
|
38
|
+
* if (__BACKGROUND__) {
|
|
39
|
+
* const utils = lynx.loadScript('utils', { bundleName: bundleUrl })
|
|
40
|
+
* } else {
|
|
41
|
+
* const utils = lynx.loadScript('utils__main-thread', { bundleName: bundleUrl })
|
|
42
|
+
* }
|
|
43
|
+
* ```
|
|
44
|
+
*
|
|
45
|
+
* For more detail, please refer to the {@link defineExternalBundleRslibConfig}.
|
|
46
|
+
*/
|
|
47
|
+
export { defineExternalBundleRslibConfig, defaultExternalBundleLibConfig, LAYERS, } from './externalBundleRslibConfig.js';
|
|
48
|
+
export { ExternalBundleWebpackPlugin } from './webpack/ExternalBundleWebpackPlugin.js';
|
|
49
|
+
export { MainThreadRuntimeWrapperWebpackPlugin } from './webpack/MainThreadRuntimeWrapperWebpackPlugin.js';
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import type { Compiler } from 'webpack';
|
|
2
|
+
/**
|
|
3
|
+
* The options for {@link ExternalBundleWebpackPlugin}.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export interface ExternalBundleWebpackPluginOptions {
|
|
8
|
+
/**
|
|
9
|
+
* The external bundle filename.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```js
|
|
13
|
+
* new ExternalBundleWebpackPlugin({
|
|
14
|
+
* bundleFileName: 'lib.lynx.bundle'
|
|
15
|
+
* })
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
bundleFileName: string;
|
|
19
|
+
/**
|
|
20
|
+
* The encode method which is exported from lynx-tasm package.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```js
|
|
24
|
+
* import { getEncodeMode } from '@lynx-js/tasm';
|
|
25
|
+
*
|
|
26
|
+
* new ExternalBundleWebpackPlugin({
|
|
27
|
+
* encode: getEncodeMode()
|
|
28
|
+
* })
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
encode: (opts: unknown) => Promise<{
|
|
32
|
+
buffer: Buffer;
|
|
33
|
+
}>;
|
|
34
|
+
/**
|
|
35
|
+
* The target SDK version of the external bundle.
|
|
36
|
+
*
|
|
37
|
+
* @defaultValue '3.4'
|
|
38
|
+
*/
|
|
39
|
+
targetSdkVersion?: string | undefined;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* The webpack plugin to build and emit the external bundle.
|
|
43
|
+
*
|
|
44
|
+
* @public
|
|
45
|
+
*/
|
|
46
|
+
export declare class ExternalBundleWebpackPlugin {
|
|
47
|
+
#private;
|
|
48
|
+
private options;
|
|
49
|
+
constructor(options: ExternalBundleWebpackPluginOptions);
|
|
50
|
+
apply(compiler: Compiler): void;
|
|
51
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
const isDebug = () => {
|
|
2
|
+
if (!process.env['DEBUG']) {
|
|
3
|
+
return false;
|
|
4
|
+
}
|
|
5
|
+
const values = process.env['DEBUG'].toLocaleLowerCase().split(',');
|
|
6
|
+
return ['rsbuild', 'rspeedy', '*'].some((key) => values.includes(key));
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* The webpack plugin to build and emit the external bundle.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export class ExternalBundleWebpackPlugin {
|
|
14
|
+
options;
|
|
15
|
+
constructor(options) {
|
|
16
|
+
this.options = options;
|
|
17
|
+
}
|
|
18
|
+
apply(compiler) {
|
|
19
|
+
compiler.hooks.thisCompilation.tap(ExternalBundleWebpackPlugin.name, (compilation) => {
|
|
20
|
+
compilation.hooks.processAssets.tapPromise({
|
|
21
|
+
name: ExternalBundleWebpackPlugin.name,
|
|
22
|
+
stage:
|
|
23
|
+
/**
|
|
24
|
+
* Generate the html after minification and dev tooling is done
|
|
25
|
+
* and source-map is generated
|
|
26
|
+
*/
|
|
27
|
+
compiler.webpack.Compilation
|
|
28
|
+
.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH,
|
|
29
|
+
}, () => {
|
|
30
|
+
return this.#generateExternalBundle(compiler, compilation);
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
async #generateExternalBundle(compiler, compilation) {
|
|
35
|
+
const assets = compilation.getAssets();
|
|
36
|
+
const { buffer, encodeOptions } = await this.#encode(assets);
|
|
37
|
+
const { RawSource } = compiler.webpack.sources;
|
|
38
|
+
compilation.emitAsset(this.options.bundleFileName, new RawSource(buffer, false));
|
|
39
|
+
if (isDebug()) {
|
|
40
|
+
compilation.emitAsset('tasm.json', new RawSource(JSON.stringify(encodeOptions, null, 2)));
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
assets.forEach(({ name }) => {
|
|
44
|
+
compilation.deleteAsset(name);
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
async #encode(assets) {
|
|
49
|
+
const customSections = assets
|
|
50
|
+
.filter(({ name }) => name.endsWith('.js'))
|
|
51
|
+
.reduce((prev, cur) => ({
|
|
52
|
+
...prev,
|
|
53
|
+
[cur.name.replace(/\.js$/, '')]: {
|
|
54
|
+
content: cur.source.source().toString(),
|
|
55
|
+
},
|
|
56
|
+
}), {});
|
|
57
|
+
const compilerOptions = {
|
|
58
|
+
enableFiberArch: true,
|
|
59
|
+
// lynx.fetchBundle requires targetSdkVersion >= 3.4
|
|
60
|
+
targetSdkVersion: this.options.targetSdkVersion ?? '3.4',
|
|
61
|
+
};
|
|
62
|
+
const encodeOptions = {
|
|
63
|
+
compilerOptions,
|
|
64
|
+
sourceContent: {
|
|
65
|
+
appType: 'DynamicComponent',
|
|
66
|
+
},
|
|
67
|
+
customSections,
|
|
68
|
+
};
|
|
69
|
+
const { buffer } = await this.options.encode(encodeOptions);
|
|
70
|
+
return { buffer, encodeOptions };
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
//# sourceMappingURL=ExternalBundleWebpackPlugin.js.map
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { BannerPlugin, Compiler } from 'webpack';
|
|
2
|
+
/**
|
|
3
|
+
* The options of {@link MainThreadRuntimeWrapperWebpackPlugin}.
|
|
4
|
+
*
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export interface MainThreadRuntimeWrapperWebpackPluginOptions {
|
|
8
|
+
/**
|
|
9
|
+
* Include all modules that pass test assertion.
|
|
10
|
+
*
|
|
11
|
+
* @defaultValue `/\.js$/`
|
|
12
|
+
*
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
test: BannerPlugin['options']['test'];
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* The main-thread runtime wrapper for external bundle.
|
|
19
|
+
*
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
export declare class MainThreadRuntimeWrapperWebpackPlugin {
|
|
23
|
+
private options;
|
|
24
|
+
constructor(options?: Partial<MainThreadRuntimeWrapperWebpackPluginOptions>);
|
|
25
|
+
apply(compiler: Compiler): void;
|
|
26
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The main-thread runtime wrapper for external bundle.
|
|
3
|
+
*
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export class MainThreadRuntimeWrapperWebpackPlugin {
|
|
7
|
+
options;
|
|
8
|
+
constructor(options = {}) {
|
|
9
|
+
this.options = options;
|
|
10
|
+
}
|
|
11
|
+
apply(compiler) {
|
|
12
|
+
const { BannerPlugin } = compiler.webpack;
|
|
13
|
+
new BannerPlugin({
|
|
14
|
+
test: this.options.test ?? /\.js$/,
|
|
15
|
+
raw: true,
|
|
16
|
+
banner: `(function () {
|
|
17
|
+
const module = { exports: {} }
|
|
18
|
+
const exports = module.exports`,
|
|
19
|
+
}).apply(compiler);
|
|
20
|
+
new BannerPlugin({
|
|
21
|
+
test: this.options.test ?? /\.js$/,
|
|
22
|
+
raw: true,
|
|
23
|
+
banner: `return module.exports
|
|
24
|
+
})()`,
|
|
25
|
+
footer: true,
|
|
26
|
+
}).apply(compiler);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=MainThreadRuntimeWrapperWebpackPlugin.js.map
|
package/package.json
CHANGED
|
@@ -1,9 +1,50 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lynx-js/lynx-bundle-rslib-config-canary",
|
|
3
|
-
"
|
|
4
|
-
"version": "0.0.0",
|
|
3
|
+
"version": "0.0.1-canary-20251201-3692a169",
|
|
5
4
|
"description": "The rsbuild config for building Lynx bundle",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
"keywords": [
|
|
6
|
+
"Rsbuild",
|
|
7
|
+
"Rspeedy",
|
|
8
|
+
"Lynx",
|
|
9
|
+
"Rslib"
|
|
10
|
+
],
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/lynx-family/lynx-stack.git",
|
|
14
|
+
"directory": "packages/rspeedy/lynx-bundle-rslib-config"
|
|
15
|
+
},
|
|
16
|
+
"license": "Apache-2.0",
|
|
17
|
+
"author": {
|
|
18
|
+
"name": "Hengchang Lu",
|
|
19
|
+
"email": "luhengchang228@gmail.com"
|
|
20
|
+
},
|
|
21
|
+
"type": "module",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"types": "./lib/index.d.ts",
|
|
25
|
+
"default": "./lib/index.js"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"files": [
|
|
29
|
+
"lib",
|
|
30
|
+
"!lib/**/*.js.map",
|
|
31
|
+
"CHANGELOG.md",
|
|
32
|
+
"README.md"
|
|
33
|
+
],
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@lynx-js/runtime-wrapper-webpack-plugin": "npm:@lynx-js/runtime-wrapper-webpack-plugin-canary@0.1.3",
|
|
36
|
+
"@lynx-js/tasm": "0.0.20"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@rslib/core": "^0.15.0",
|
|
40
|
+
"vitest": "^3.2.4",
|
|
41
|
+
"webpack": "^5.102.0"
|
|
42
|
+
},
|
|
43
|
+
"engines": {
|
|
44
|
+
"node": ">=18"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"api-extractor": "api-extractor run --verbose",
|
|
48
|
+
"test": "vitest"
|
|
49
|
+
}
|
|
50
|
+
}
|
package/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {}
|