@mpxjs/webpack-plugin 2.10.7-beta.3 → 2.10.7-beta.5
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/lib/file-loader.js +1 -1
- package/lib/index.js +8 -35
- package/lib/platform/json/wx/index.js +25 -43
- package/lib/platform/template/wx/component-config/fix-component-name.js +2 -2
- package/lib/platform/template/wx/index.js +1 -2
- package/lib/react/index.js +1 -3
- package/lib/react/processJSON.js +17 -72
- package/lib/react/processScript.js +3 -4
- package/lib/react/script-helper.js +18 -92
- package/lib/runtime/components/react/AsyncContainer.tsx +7 -35
- package/lib/runtime/components/react/dist/AsyncContainer.jsx +4 -23
- package/lib/runtime/components/react/dist/getInnerListeners.js +1 -1
- package/lib/runtime/components/react/dist/mpx-movable-view.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-web-view.jsx +28 -14
- package/lib/runtime/components/react/dist/useAnimationHooks.js +87 -2
- package/lib/runtime/components/react/getInnerListeners.ts +1 -1
- package/lib/runtime/components/react/mpx-movable-view.tsx +2 -2
- package/lib/runtime/components/react/mpx-web-view.tsx +33 -13
- package/lib/runtime/components/react/types/global.d.ts +0 -15
- package/lib/runtime/components/react/useAnimationHooks.ts +85 -2
- package/lib/template-compiler/compiler.js +2 -2
- package/lib/utils/dom-tag-config.js +3 -17
- package/lib/web/script-helper.js +1 -1
- package/package.json +2 -2
- package/lib/react/LoadAsyncChunkModule.js +0 -68
- package/lib/runtime/components/react/AsyncSuspense.tsx +0 -81
- package/lib/runtime/components/react/dist/AsyncSuspense.jsx +0 -68
package/lib/file-loader.js
CHANGED
|
@@ -36,7 +36,7 @@ module.exports = function loader (content, prevOptions) {
|
|
|
36
36
|
let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
|
|
37
37
|
|
|
38
38
|
// todo 未来添加分包处理后相对地址不一定是./开头的,需要考虑通过dependency的方式在sourceModule时通过最终的chunkName得到准确的相对路径
|
|
39
|
-
if (isRN) publicPath = `__non_webpack_require__(${JSON.stringify(
|
|
39
|
+
if (isRN) publicPath = `__non_webpack_require__(${JSON.stringify(`./${url}`)})`
|
|
40
40
|
|
|
41
41
|
if (options.publicPath) {
|
|
42
42
|
if (typeof options.publicPath === 'function') {
|
package/lib/index.js
CHANGED
|
@@ -72,8 +72,6 @@ const isEmptyObject = require('./utils/is-empty-object')
|
|
|
72
72
|
const DynamicPlugin = require('./resolver/DynamicPlugin')
|
|
73
73
|
const { isReact, isWeb } = require('./utils/env')
|
|
74
74
|
const VirtualModulesPlugin = require('webpack-virtual-modules')
|
|
75
|
-
const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
|
|
76
|
-
const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
|
|
77
75
|
require('./utils/check-core-version-match')
|
|
78
76
|
|
|
79
77
|
const isProductionLikeMode = options => {
|
|
@@ -410,7 +408,7 @@ class MpxWebpackPlugin {
|
|
|
410
408
|
let splitChunksOptions = null
|
|
411
409
|
let splitChunksPlugin = null
|
|
412
410
|
// 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
|
|
413
|
-
if (optimization.splitChunks !== false) {
|
|
411
|
+
if (optimization.splitChunks !== false && !isReact(this.options.mode)) {
|
|
414
412
|
splitChunksOptions = Object.assign({
|
|
415
413
|
chunks: 'all',
|
|
416
414
|
usedExports: optimization.usedExports === true,
|
|
@@ -608,22 +606,6 @@ class MpxWebpackPlugin {
|
|
|
608
606
|
return mpx
|
|
609
607
|
}
|
|
610
608
|
})
|
|
611
|
-
|
|
612
|
-
if (isReact(this.options.mode)) {
|
|
613
|
-
compilation.hooks.runtimeRequirementInTree
|
|
614
|
-
.for(RuntimeGlobals.loadScript)
|
|
615
|
-
.tap({
|
|
616
|
-
stage: -1000,
|
|
617
|
-
name: 'LoadAsyncChunk'
|
|
618
|
-
}, (chunk, set) => {
|
|
619
|
-
compilation.addRuntimeModule(
|
|
620
|
-
chunk,
|
|
621
|
-
new LoadAsyncChunkModule(this.options.rnConfig && this.options.rnConfig.asyncChunk && this.options.rnConfig.asyncChunk.timeout)
|
|
622
|
-
)
|
|
623
|
-
return true
|
|
624
|
-
})
|
|
625
|
-
}
|
|
626
|
-
|
|
627
609
|
compilation.dependencyFactories.set(ResolveDependency, new NullFactory())
|
|
628
610
|
compilation.dependencyTemplates.set(ResolveDependency, new ResolveDependency.Template())
|
|
629
611
|
|
|
@@ -758,7 +740,7 @@ class MpxWebpackPlugin {
|
|
|
758
740
|
removedChunks: [],
|
|
759
741
|
forceProxyEventRules: this.options.forceProxyEventRules,
|
|
760
742
|
// 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
|
|
761
|
-
supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)
|
|
743
|
+
supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)),
|
|
762
744
|
partialCompileRules: this.options.partialCompileRules,
|
|
763
745
|
collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
|
|
764
746
|
const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
|
|
@@ -1217,12 +1199,12 @@ class MpxWebpackPlugin {
|
|
|
1217
1199
|
// 自动使用分包配置修改splitChunksPlugin配置
|
|
1218
1200
|
if (splitChunksPlugin) {
|
|
1219
1201
|
let needInit = false
|
|
1220
|
-
if (isWeb(mpx.mode)
|
|
1202
|
+
if (isWeb(mpx.mode)) {
|
|
1221
1203
|
// web独立处理splitChunk
|
|
1222
|
-
if (
|
|
1204
|
+
if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
|
|
1223
1205
|
splitChunksOptions.cacheGroups.main = {
|
|
1224
1206
|
chunks: 'initial',
|
|
1225
|
-
name: 'bundle
|
|
1207
|
+
name: 'bundle',
|
|
1226
1208
|
test: /[\\/]node_modules[\\/]/
|
|
1227
1209
|
}
|
|
1228
1210
|
needInit = true
|
|
@@ -1230,7 +1212,7 @@ class MpxWebpackPlugin {
|
|
|
1230
1212
|
if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
|
|
1231
1213
|
splitChunksOptions.cacheGroups.async = {
|
|
1232
1214
|
chunks: 'async',
|
|
1233
|
-
name: 'async
|
|
1215
|
+
name: 'async',
|
|
1234
1216
|
minChunks: 2
|
|
1235
1217
|
}
|
|
1236
1218
|
needInit = true
|
|
@@ -1333,15 +1315,6 @@ class MpxWebpackPlugin {
|
|
|
1333
1315
|
compilation.hooks.processAssets.tap({
|
|
1334
1316
|
name: 'MpxWebpackPlugin'
|
|
1335
1317
|
}, (assets) => {
|
|
1336
|
-
if (isReact(mpx.mode)) {
|
|
1337
|
-
Object.keys(assets).forEach((chunkName) => {
|
|
1338
|
-
if (/\.js$/.test(chunkName)) {
|
|
1339
|
-
let val = assets[chunkName].source()
|
|
1340
|
-
val = val.replace(/_mpx_rn_img_relative_path_/g, chunkName === 'app.js' ? '.' : '..')
|
|
1341
|
-
compilation.assets[chunkName] = new RawSource(val)
|
|
1342
|
-
}
|
|
1343
|
-
})
|
|
1344
|
-
}
|
|
1345
1318
|
try {
|
|
1346
1319
|
const dynamicAssets = {}
|
|
1347
1320
|
for (const packageName in mpx.runtimeInfo) {
|
|
@@ -1416,10 +1389,10 @@ class MpxWebpackPlugin {
|
|
|
1416
1389
|
if (queryObj.root) request = addQuery(request, {}, false, ['root'])
|
|
1417
1390
|
// wx、ali和web平台支持require.async,其余平台使用CommonJsAsyncDependency进行模拟抹平
|
|
1418
1391
|
if (mpx.supportRequireAsync) {
|
|
1419
|
-
if (isWeb(mpx.mode)
|
|
1392
|
+
if (isWeb(mpx.mode)) {
|
|
1420
1393
|
const depBlock = new AsyncDependenciesBlock(
|
|
1421
1394
|
{
|
|
1422
|
-
name: tarRoot
|
|
1395
|
+
name: tarRoot
|
|
1423
1396
|
},
|
|
1424
1397
|
expr.loc,
|
|
1425
1398
|
request
|
|
@@ -3,7 +3,7 @@ const normalizeTest = require('../normalize-test')
|
|
|
3
3
|
const changeKey = require('../change-key')
|
|
4
4
|
const normalize = require('../../../utils/normalize')
|
|
5
5
|
const { capitalToHyphen } = require('../../../utils/string')
|
|
6
|
-
const { isOriginTag,
|
|
6
|
+
const { isOriginTag, isBuildInTag } = require('../../../utils/dom-tag-config')
|
|
7
7
|
|
|
8
8
|
const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
|
|
9
9
|
const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
|
|
@@ -128,41 +128,19 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
128
128
|
/**
|
|
129
129
|
* 将小程序代码中使用的与原生 HTML tag 或 内建组件 同名的组件进行转化,以解决与原生tag命名冲突问题。
|
|
130
130
|
*/
|
|
131
|
-
function fixComponentName (
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
const usingComponents = input.usingComponents
|
|
142
|
-
const componentPlaceholder = input.componentPlaceholder
|
|
143
|
-
if (usingComponents) {
|
|
144
|
-
const transfromKeys = []
|
|
145
|
-
Object.keys(usingComponents).forEach(tag => {
|
|
146
|
-
if (isNeedFixTag(tag)) {
|
|
147
|
-
usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
|
|
148
|
-
delete usingComponents[tag]
|
|
149
|
-
transfromKeys.push(tag)
|
|
150
|
-
}
|
|
151
|
-
})
|
|
152
|
-
|
|
153
|
-
if (transfromKeys.length && componentPlaceholder) {
|
|
154
|
-
Object.keys(componentPlaceholder).forEach(key => {
|
|
155
|
-
if (transfromKeys.includes(componentPlaceholder[key])) {
|
|
156
|
-
componentPlaceholder[key] = `mpx-com-${componentPlaceholder[key]}`
|
|
157
|
-
}
|
|
158
|
-
if (transfromKeys.includes(key)) {
|
|
159
|
-
componentPlaceholder[`mpx-com-${key}`] = componentPlaceholder[key]
|
|
160
|
-
delete componentPlaceholder[key]
|
|
131
|
+
function fixComponentName (type) {
|
|
132
|
+
return function (input) {
|
|
133
|
+
const usingComponents = input[type]
|
|
134
|
+
if (usingComponents) {
|
|
135
|
+
Object.keys(usingComponents).forEach(tag => {
|
|
136
|
+
if (isOriginTag(tag) || isBuildInTag(tag)) {
|
|
137
|
+
usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
|
|
138
|
+
delete usingComponents[tag]
|
|
161
139
|
}
|
|
162
140
|
})
|
|
163
141
|
}
|
|
142
|
+
return input
|
|
164
143
|
}
|
|
165
|
-
return input
|
|
166
144
|
}
|
|
167
145
|
|
|
168
146
|
const componentRules = [
|
|
@@ -176,6 +154,13 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
176
154
|
swan: deletePath(),
|
|
177
155
|
jd: deletePath()
|
|
178
156
|
},
|
|
157
|
+
{
|
|
158
|
+
test: 'usingComponents',
|
|
159
|
+
web: fixComponentName('usingComponents'),
|
|
160
|
+
ios: fixComponentName('usingComponents'),
|
|
161
|
+
android: fixComponentName('usingComponents'),
|
|
162
|
+
harmony: fixComponentName('usingComponents')
|
|
163
|
+
},
|
|
179
164
|
{
|
|
180
165
|
test: 'usingComponents',
|
|
181
166
|
ali: componentNameCapitalToHyphen('usingComponents'),
|
|
@@ -185,11 +170,7 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
185
170
|
swan: addGlobalComponents,
|
|
186
171
|
qq: addGlobalComponents,
|
|
187
172
|
tt: addGlobalComponents,
|
|
188
|
-
jd: addGlobalComponents
|
|
189
|
-
web: fixComponentName,
|
|
190
|
-
ios: fixComponentName,
|
|
191
|
-
android: fixComponentName,
|
|
192
|
-
harmony: fixComponentName
|
|
173
|
+
jd: addGlobalComponents
|
|
193
174
|
}
|
|
194
175
|
]
|
|
195
176
|
|
|
@@ -390,6 +371,13 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
390
371
|
tt: deletePath(),
|
|
391
372
|
jd: deletePath(true)
|
|
392
373
|
},
|
|
374
|
+
{
|
|
375
|
+
test: 'usingComponents',
|
|
376
|
+
web: fixComponentName('usingComponents'),
|
|
377
|
+
ios: fixComponentName('usingComponents'),
|
|
378
|
+
android: fixComponentName('usingComponents'),
|
|
379
|
+
harmony: fixComponentName('usingComponents')
|
|
380
|
+
},
|
|
393
381
|
{
|
|
394
382
|
test: 'usingComponents',
|
|
395
383
|
ali: componentNameCapitalToHyphen('usingComponents'),
|
|
@@ -454,12 +442,6 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
454
442
|
swan: getWindowRule(),
|
|
455
443
|
tt: getWindowRule(),
|
|
456
444
|
jd: getWindowRule()
|
|
457
|
-
},
|
|
458
|
-
{
|
|
459
|
-
web: fixComponentName,
|
|
460
|
-
ios: fixComponentName,
|
|
461
|
-
android: fixComponentName,
|
|
462
|
-
harmony: fixComponentName
|
|
463
445
|
}
|
|
464
446
|
]
|
|
465
447
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const { isOriginTag,
|
|
1
|
+
const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
|
|
2
2
|
|
|
3
3
|
module.exports = function () {
|
|
4
4
|
const handleComponentTag = (el, data) => {
|
|
@@ -16,7 +16,7 @@ module.exports = function () {
|
|
|
16
16
|
waterfall: true,
|
|
17
17
|
skipNormalize: true,
|
|
18
18
|
supportedModes: ['web', 'ios', 'android', 'harmony'],
|
|
19
|
-
test: (input) => isOriginTag(input) ||
|
|
19
|
+
test: (input) => isOriginTag(input) || isBuildInTag(input),
|
|
20
20
|
web: handleComponentTag,
|
|
21
21
|
ios: handleComponentTag,
|
|
22
22
|
android: handleComponentTag,
|
|
@@ -34,8 +34,7 @@ module.exports = function getSpec ({ warn, error }) {
|
|
|
34
34
|
touchstart: 'touchstart',
|
|
35
35
|
touchmove: 'touchmove',
|
|
36
36
|
touchend: 'touchend',
|
|
37
|
-
touchcancel: 'touchcancel'
|
|
38
|
-
transitionend: 'transitionend'
|
|
37
|
+
touchcancel: 'touchcancel'
|
|
39
38
|
}
|
|
40
39
|
if (eventMap[eventName]) {
|
|
41
40
|
return eventMap[eventName]
|
package/lib/react/index.js
CHANGED
|
@@ -35,7 +35,6 @@ module.exports = function ({
|
|
|
35
35
|
})
|
|
36
36
|
}
|
|
37
37
|
const mpx = loaderContext.getMpx()
|
|
38
|
-
const rnConfig = mpx.rnConfig
|
|
39
38
|
// 通过RecordLoaderContentDependency和loaderContentCache确保子request不再重复生成loaderContent
|
|
40
39
|
const cacheContent = mpx.loaderContentCache.get(loaderContext.resourcePath)
|
|
41
40
|
if (cacheContent) return callback(null, cacheContent)
|
|
@@ -92,8 +91,7 @@ module.exports = function ({
|
|
|
92
91
|
genericsInfo: templateRes.genericsInfo,
|
|
93
92
|
wxsModuleMap: templateRes.wxsModuleMap,
|
|
94
93
|
localComponentsMap: jsonRes.localComponentsMap,
|
|
95
|
-
localPagesMap: jsonRes.localPagesMap
|
|
96
|
-
rnConfig
|
|
94
|
+
localPagesMap: jsonRes.localPagesMap
|
|
97
95
|
}, callback)
|
|
98
96
|
}
|
|
99
97
|
], (err, scriptRes) => {
|
package/lib/react/processJSON.js
CHANGED
|
@@ -11,11 +11,8 @@ const resolve = require('../utils/resolve')
|
|
|
11
11
|
const createJSONHelper = require('../json-compiler/helper')
|
|
12
12
|
const getRulesRunner = require('../platform/index')
|
|
13
13
|
const { RESOLVE_IGNORED_ERR } = require('../utils/const')
|
|
14
|
-
const normalize = require('../utils/normalize')
|
|
15
14
|
const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
|
|
16
15
|
const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
|
|
17
|
-
const mpxViewPath = normalize.lib('runtime/components/react/dist/mpx-view.jsx')
|
|
18
|
-
const mpxTextPath = normalize.lib('runtime/components/react/dist/mpx-text.jsx')
|
|
19
16
|
|
|
20
17
|
module.exports = function (jsonContent, {
|
|
21
18
|
loaderContext,
|
|
@@ -116,14 +113,14 @@ module.exports = function (jsonContent, {
|
|
|
116
113
|
}
|
|
117
114
|
|
|
118
115
|
if (ctorType === 'page') {
|
|
119
|
-
const keysToExtract = ['navigationStyle'
|
|
116
|
+
// const keysToExtract = ['navigationStyle']
|
|
120
117
|
const configObj = {}
|
|
121
118
|
// 暂时先不注入数据,后续如需要使用再用
|
|
122
|
-
keysToExtract.forEach(key => {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
})
|
|
119
|
+
// keysToExtract.forEach(key => {
|
|
120
|
+
// if (jsonObj[key]) {
|
|
121
|
+
// configObj[key] = jsonObj[key]
|
|
122
|
+
// }
|
|
123
|
+
// })
|
|
127
124
|
loaderContext._module.addPresentationalDependency(new RecordPageConfigsMapDependency(parseRequest(loaderContext.resource).resourcePath, configObj))
|
|
128
125
|
}
|
|
129
126
|
|
|
@@ -136,29 +133,6 @@ module.exports = function (jsonContent, {
|
|
|
136
133
|
isShow: true
|
|
137
134
|
}
|
|
138
135
|
|
|
139
|
-
const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
|
|
140
|
-
const componentPlaceholder = jsonObj.componentPlaceholder || {}
|
|
141
|
-
if (componentPlaceholder[name]) return
|
|
142
|
-
componentPlaceholder[name] = placeholder
|
|
143
|
-
jsonObj.componentPlaceholder = componentPlaceholder
|
|
144
|
-
if (placeholderEntry && !jsonObj.usingComponents[placeholder]) jsonObj.usingComponents[placeholder] = placeholderEntry
|
|
145
|
-
}
|
|
146
|
-
const normalizePlaceholder = (placeholder) => {
|
|
147
|
-
if (typeof placeholder === 'string') {
|
|
148
|
-
const placeholderMap = mode === 'ali'
|
|
149
|
-
? {
|
|
150
|
-
view: { name: 'mpx-view', resource: mpxViewPath },
|
|
151
|
-
text: { name: 'mpx-text', resource: mpxTextPath }
|
|
152
|
-
}
|
|
153
|
-
: {}
|
|
154
|
-
placeholder = placeholderMap[placeholder] || { name: placeholder }
|
|
155
|
-
}
|
|
156
|
-
if (!placeholder.name) {
|
|
157
|
-
emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
|
|
158
|
-
}
|
|
159
|
-
return placeholder
|
|
160
|
-
}
|
|
161
|
-
|
|
162
136
|
const processTabBar = (tabBar, callback) => {
|
|
163
137
|
if (tabBar) {
|
|
164
138
|
tabBar = Object.assign({}, defaultTabbar, tabBar)
|
|
@@ -327,48 +301,19 @@ module.exports = function (jsonContent, {
|
|
|
327
301
|
const processComponents = (components, context, callback) => {
|
|
328
302
|
if (components) {
|
|
329
303
|
async.eachOf(components, (component, name, callback) => {
|
|
330
|
-
processComponent(component, context, {}, (err,
|
|
304
|
+
processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
|
|
331
305
|
if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
|
|
332
|
-
const
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
}),
|
|
342
|
-
async: queryObj.async || tarRoot
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
fillComponentsMap(name, entry, tarRoot)
|
|
346
|
-
const { relativePath } = entry
|
|
347
|
-
|
|
348
|
-
if (tarRoot) {
|
|
349
|
-
if (placeholder) {
|
|
350
|
-
placeholder = normalizePlaceholder(placeholder)
|
|
351
|
-
if (placeholder.resource) {
|
|
352
|
-
processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
|
|
353
|
-
if (err) return callback(err)
|
|
354
|
-
fillInComponentPlaceholder(name, placeholder.name, entry)
|
|
355
|
-
fillComponentsMap(placeholder.name, entry, '')
|
|
356
|
-
callback()
|
|
357
|
-
})
|
|
358
|
-
} else {
|
|
359
|
-
fillInComponentPlaceholder(name, placeholder.name)
|
|
360
|
-
callback()
|
|
361
|
-
}
|
|
362
|
-
} else {
|
|
363
|
-
if (!jsonObj.componentPlaceholder || !jsonObj.componentPlaceholder[name]) {
|
|
364
|
-
const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
|
|
365
|
-
emitError(errMsg)
|
|
366
|
-
}
|
|
367
|
-
callback()
|
|
368
|
-
}
|
|
369
|
-
} else {
|
|
370
|
-
callback()
|
|
306
|
+
const { resourcePath, queryObj } = parseRequest(resource)
|
|
307
|
+
componentsMap[resourcePath] = outputPath
|
|
308
|
+
loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
|
|
309
|
+
localComponentsMap[name] = {
|
|
310
|
+
resource: addQuery(resource, {
|
|
311
|
+
isComponent: true,
|
|
312
|
+
outputPath
|
|
313
|
+
}),
|
|
314
|
+
async: queryObj.async || tarRoot
|
|
371
315
|
}
|
|
316
|
+
callback()
|
|
372
317
|
})
|
|
373
318
|
}, callback)
|
|
374
319
|
} else {
|
|
@@ -13,7 +13,6 @@ module.exports = function (script, {
|
|
|
13
13
|
builtInComponentsMap,
|
|
14
14
|
localComponentsMap,
|
|
15
15
|
localPagesMap,
|
|
16
|
-
rnConfig,
|
|
17
16
|
componentGenerics,
|
|
18
17
|
genericsInfo
|
|
19
18
|
}, callback) {
|
|
@@ -33,7 +32,6 @@ module.exports = function (script, {
|
|
|
33
32
|
}
|
|
34
33
|
|
|
35
34
|
let output = '/* script */\n'
|
|
36
|
-
output += "import { lazy, createElement, memo, forwardRef } from 'react'\n"
|
|
37
35
|
if (ctorType === 'app') {
|
|
38
36
|
output += `
|
|
39
37
|
import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
|
|
@@ -41,8 +39,7 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
|
|
|
41
39
|
const { pagesMap, firstPage } = buildPagesMap({
|
|
42
40
|
localPagesMap,
|
|
43
41
|
loaderContext,
|
|
44
|
-
jsonConfig
|
|
45
|
-
rnConfig
|
|
42
|
+
jsonConfig
|
|
46
43
|
})
|
|
47
44
|
const componentsMap = buildComponentsMap({
|
|
48
45
|
localComponentsMap,
|
|
@@ -53,6 +50,8 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
|
|
|
53
50
|
output += getRequireScript({ ctorType, script, loaderContext })
|
|
54
51
|
output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
|
|
55
52
|
} else {
|
|
53
|
+
// RN环境暂不支持异步加载
|
|
54
|
+
// output += 'import { lazy } from \'react\'\n'
|
|
56
55
|
output += `import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
|
|
57
56
|
// 获取组件集合
|
|
58
57
|
const componentsMap = buildComponentsMap({
|
|
@@ -3,74 +3,30 @@ const createHelpers = require('../helpers')
|
|
|
3
3
|
const parseRequest = require('../utils/parse-request')
|
|
4
4
|
const shallowStringify = require('../utils/shallow-stringify')
|
|
5
5
|
const normalize = require('../utils/normalize')
|
|
6
|
-
const addQuery = require('../utils/add-query')
|
|
7
|
-
const path = require('path')
|
|
8
|
-
const { isBuildInReactTag } = require('../utils/dom-tag-config')
|
|
9
6
|
|
|
10
7
|
function stringifyRequest (loaderContext, request) {
|
|
11
8
|
return loaderUtils.stringifyRequest(loaderContext, request)
|
|
12
9
|
}
|
|
13
10
|
|
|
14
|
-
function
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
function getAsyncChunkName (chunkName) {
|
|
21
|
-
if (chunkName && typeof chunkName !== 'boolean') {
|
|
22
|
-
return `/* webpackChunkName: "${chunkName}/index" */`
|
|
23
|
-
}
|
|
24
|
-
return ''
|
|
25
|
-
}
|
|
11
|
+
// function getAsyncChunkName (chunkName) {
|
|
12
|
+
// if (chunkName && typeof chunkName !== 'boolean') {
|
|
13
|
+
// return `/* webpackChunkName: "${chunkName}" */`
|
|
14
|
+
// }
|
|
15
|
+
// return ''
|
|
16
|
+
// }
|
|
26
17
|
|
|
27
|
-
function
|
|
28
|
-
return `getComponent(memo(forwardRef(function(props, ref) {
|
|
29
|
-
return createElement(
|
|
30
|
-
getComponent(require(${mpxAsyncSuspense})),
|
|
31
|
-
{
|
|
32
|
-
type: 'component',
|
|
33
|
-
props: Object.assign({}, props, { ref }),
|
|
34
|
-
chunkName: ${JSON.stringify(chunkName)},
|
|
35
|
-
request: ${JSON.stringify(componentRequest)},
|
|
36
|
-
loading: getComponent(require(${fallback})),
|
|
37
|
-
getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
|
|
38
|
-
}
|
|
39
|
-
)
|
|
40
|
-
})))`
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function getAsyncPage (componentName, componentRequest, chunkName, fallback, loading) {
|
|
44
|
-
fallback = fallback && `getComponent(require('${fallback}?isComponent=true'))`
|
|
45
|
-
loading = loading && `getComponent(require('${loading}?isComponent=true'))`
|
|
46
|
-
return `getComponent(function(props) {
|
|
47
|
-
return createElement(
|
|
48
|
-
getComponent(require(${mpxAsyncSuspense})),
|
|
49
|
-
{
|
|
50
|
-
type: 'page',
|
|
51
|
-
props: props,
|
|
52
|
-
chunkName: ${JSON.stringify(chunkName)},
|
|
53
|
-
request: ${JSON.stringify(componentRequest)},
|
|
54
|
-
fallback: ${fallback},
|
|
55
|
-
loading: ${loading},
|
|
56
|
-
getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
|
|
57
|
-
}
|
|
58
|
-
)
|
|
59
|
-
})`
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig }) {
|
|
18
|
+
function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
|
|
63
19
|
let firstPage = ''
|
|
64
20
|
const pagesMap = {}
|
|
65
21
|
Object.keys(localPagesMap).forEach((pagePath) => {
|
|
66
22
|
const pageCfg = localPagesMap[pagePath]
|
|
67
23
|
const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
|
|
68
|
-
if (pageCfg.async) {
|
|
69
|
-
|
|
70
|
-
} else {
|
|
24
|
+
// if (pageCfg.async) {
|
|
25
|
+
// pagesMap[pagePath] = `lazy(function(){return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){return getComponent(res, {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})})})`
|
|
26
|
+
// } else {
|
|
71
27
|
// 为了保持小程序中app->page->component的js执行顺序,所有的page和component都改为require引入
|
|
72
|
-
|
|
73
|
-
}
|
|
28
|
+
pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
|
|
29
|
+
// }
|
|
74
30
|
if (pagePath === jsonConfig.entryPagePath) {
|
|
75
31
|
firstPage = pagePath
|
|
76
32
|
}
|
|
@@ -86,45 +42,16 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
|
|
|
86
42
|
|
|
87
43
|
function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
|
|
88
44
|
const componentsMap = {}
|
|
89
|
-
const mpx = loaderContext.getMpx()
|
|
90
45
|
if (localComponentsMap) {
|
|
91
46
|
Object.keys(localComponentsMap).forEach((componentName) => {
|
|
92
47
|
const componentCfg = localComponentsMap[componentName]
|
|
93
48
|
const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
if (placeholderCfg.async) {
|
|
101
|
-
loaderContext.emitWarning(
|
|
102
|
-
new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
|
|
103
|
-
)
|
|
104
|
-
}
|
|
105
|
-
componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
|
|
106
|
-
} else if (mpx.globalComponents[placeholder]) {
|
|
107
|
-
const { queryObj, rawResourcePath } = parseRequest(mpx.globalComponents[placeholder])
|
|
108
|
-
const placeholderRequest = JSON.stringify(path.resolve(queryObj.context, rawResourcePath))
|
|
109
|
-
componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
|
|
110
|
-
} else {
|
|
111
|
-
const tag = `mpx-${placeholder}`
|
|
112
|
-
if (!isBuildInReactTag(tag)) {
|
|
113
|
-
loaderContext.emitError(
|
|
114
|
-
new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
|
|
115
|
-
)
|
|
116
|
-
}
|
|
117
|
-
componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, getMpxComponentRequest(tag))
|
|
118
|
-
}
|
|
119
|
-
} else {
|
|
120
|
-
loaderContext.emitError(
|
|
121
|
-
new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
|
|
122
|
-
)
|
|
123
|
-
componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async)
|
|
124
|
-
}
|
|
125
|
-
} else {
|
|
126
|
-
componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
|
|
127
|
-
}
|
|
49
|
+
// RN中暂不支持异步加载
|
|
50
|
+
// if (componentCfg.async) {
|
|
51
|
+
// componentsMap[componentName] = `lazy(function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res, {displayName: ${JSON.stringify(componentName)}})})})`
|
|
52
|
+
// } else {
|
|
53
|
+
componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
|
|
54
|
+
// }
|
|
128
55
|
})
|
|
129
56
|
}
|
|
130
57
|
if (builtInComponentsMap) {
|
|
@@ -180,7 +107,6 @@ global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
|
|
|
180
107
|
global.__getAppComponents = function () {
|
|
181
108
|
return ${shallowStringify(componentsMap)}
|
|
182
109
|
}
|
|
183
|
-
global.__preloadRule = ${JSON.stringify(jsonConfig.preloadRule)}
|
|
184
110
|
global.currentInject.getPages = function () {
|
|
185
111
|
return ${shallowStringify(pagesMap)}
|
|
186
112
|
}
|
|
@@ -1,29 +1,6 @@
|
|
|
1
|
-
import { ComponentType, ReactNode, Component, Suspense } from 'react'
|
|
1
|
+
import { ComponentType, ReactNode, Component, Fragment, Suspense } from 'react'
|
|
2
2
|
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
|
|
3
3
|
import FastImage from '@d11/react-native-fast-image'
|
|
4
|
-
import Animated, { useAnimatedStyle } from 'react-native-reanimated'
|
|
5
|
-
|
|
6
|
-
type PageWrapper = {
|
|
7
|
-
children: ReactNode
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const PageWrapper = ({ children }: PageWrapper) => {
|
|
11
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
12
|
-
transform: [{ translateY: -0 }],
|
|
13
|
-
flexBasis: 'auto',
|
|
14
|
-
flex: 1
|
|
15
|
-
}))
|
|
16
|
-
|
|
17
|
-
return (
|
|
18
|
-
<Animated.View
|
|
19
|
-
style={[
|
|
20
|
-
animatedStyle
|
|
21
|
-
]}
|
|
22
|
-
>
|
|
23
|
-
{children}
|
|
24
|
-
</Animated.View>
|
|
25
|
-
)
|
|
26
|
-
}
|
|
27
4
|
|
|
28
5
|
const styles = StyleSheet.create({
|
|
29
6
|
container: {
|
|
@@ -82,7 +59,7 @@ interface PropsType<T extends AsyncType> {
|
|
|
82
59
|
props: object
|
|
83
60
|
loading: ComponentType<unknown>
|
|
84
61
|
fallback: ComponentType<unknown>
|
|
85
|
-
children: (props:
|
|
62
|
+
children: (props: unknown) => ReactNode
|
|
86
63
|
}
|
|
87
64
|
|
|
88
65
|
interface StateType {
|
|
@@ -95,7 +72,7 @@ interface ComponentError extends Error {
|
|
|
95
72
|
type: 'timeout' | 'fail'
|
|
96
73
|
}
|
|
97
74
|
|
|
98
|
-
|
|
75
|
+
const DefaultLoading = () => {
|
|
99
76
|
return (
|
|
100
77
|
<View style={styles.container}>
|
|
101
78
|
<FastImage
|
|
@@ -106,11 +83,11 @@ export const DefaultLoading = () => {
|
|
|
106
83
|
)
|
|
107
84
|
}
|
|
108
85
|
|
|
109
|
-
|
|
86
|
+
interface DefaultFallbackProps {
|
|
110
87
|
onReload: () => void
|
|
111
88
|
}
|
|
112
89
|
|
|
113
|
-
|
|
90
|
+
const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
|
|
114
91
|
return (
|
|
115
92
|
<View style={styles.container}>
|
|
116
93
|
<Image
|
|
@@ -200,16 +177,11 @@ export default class AsyncContainer extends Component<PropsType<AsyncType>, Stat
|
|
|
200
177
|
|
|
201
178
|
render () {
|
|
202
179
|
if (this.state.hasError) {
|
|
203
|
-
|
|
204
|
-
return this.errorFallback
|
|
205
|
-
} else {
|
|
206
|
-
return (<PageWrapper>{this.errorFallback}</PageWrapper>)
|
|
207
|
-
}
|
|
180
|
+
return this.errorFallback
|
|
208
181
|
} else {
|
|
209
182
|
return (
|
|
210
183
|
<Suspense fallback={this.suspenseFallback} key={this.state.key}>
|
|
211
|
-
{
|
|
212
|
-
{/* {this.props.children(this.props.props)} */}
|
|
184
|
+
{this.props.children(this.props.props)}
|
|
213
185
|
</Suspense>
|
|
214
186
|
)
|
|
215
187
|
}
|