From f1d800993207decc2a9b98bb1afbe593fb76becc Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Sun, 27 Sep 2020 23:23:07 +0800 Subject: [PATCH 1/2] feat: support mpa loader --- packages/build-mpa-config/package.json | 3 +- packages/build-mpa-config/src/index.ts | 5 ++- packages/build-mpa-config/src/mpa-loader.ts | 41 +++++++++++++++++++++ 3 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 packages/build-mpa-config/src/mpa-loader.ts diff --git a/packages/build-mpa-config/package.json b/packages/build-mpa-config/package.json index c93007ffad..793772f900 100644 --- a/packages/build-mpa-config/package.json +++ b/packages/build-mpa-config/package.json @@ -23,6 +23,7 @@ "test": "echo \"Error: run tests from root\" && exit 1" }, "dependencies": { - "fs-extra": "^8.1.0" + "fs-extra": "^8.1.0", + "loader-utils": "^2.0.0" } } diff --git a/packages/build-mpa-config/src/index.ts b/packages/build-mpa-config/src/index.ts index 0182285037..92fd308f04 100644 --- a/packages/build-mpa-config/src/index.ts +++ b/packages/build-mpa-config/src/index.ts @@ -5,10 +5,11 @@ interface ConfigOptions { rootDir: string; filterEntries: Function; type: string; + renderModule: string; } const setMPAConfig = (config, options: ConfigOptions) => { - const { rootDir, type = 'rax', filterEntries = () => {} } = options || {}; + const { rootDir, type = 'web', renderModule = 'rax', filterEntries = () => {} } = options || {}; let mpaEntries = getEntries(rootDir); mpaEntries = filterEntries(mpaEntries); // clear entry points @@ -18,7 +19,7 @@ const setMPAConfig = (config, options: ConfigOptions) => { mpaEntries.forEach((entry) => { const { entryName, entryPath, pageName } = entry; const pageEntry = path.join(rootDir, 'src/pages', entryPath); - config.entry(entryName).add(pageEntry); + config.entry(entryName).add(/app\.(t|j)sx?$/.test(entryPath) ? pageEntry : `${require.resolve('./mpa-loader')}?type=${type}&renderModule=${renderModule}!${pageEntry}`); // get page paths for rule match const matchStr = `src/pages/${pageName}`; matchStrs.push(process.platform === 'win32' ? matchStr.replace(/\//g, '\\\\') : matchStr); diff --git a/packages/build-mpa-config/src/mpa-loader.ts b/packages/build-mpa-config/src/mpa-loader.ts new file mode 100644 index 0000000000..0c6ddc187e --- /dev/null +++ b/packages/build-mpa-config/src/mpa-loader.ts @@ -0,0 +1,41 @@ +import { getOptions } from 'loader-utils'; + +function mpaLoader() { + const options = getOptions(this) || {}; + const renderModule = options.renderModule || 'rax'; + const withSSR = process.env.RAX_SSR === 'true'; + let appRender = ''; + if (options.type === 'weex') { + appRender = 'render(createElement(Entry), null, { driver: DriverUniversal });'; + } else { + appRender = ` + const renderApp = async function() { + // process App.getInitialProps + if (withSSR && window.__INITIAL_DATA__ && window.__INITIAL_DATA__.pageData !== null) { + Object.assign(comProps, window.__INITIAL_DATA__.pageData); + } else if (Component.getInitialProps) { + Object.assign(comProps, await Component.getInitialProps()); + } + render(createElement(Entry), document.getElementById("root"), { driver: DriverUniversal, hydrate: withSSR }); + } + + renderApp(); + `; + } + const source = ` + import { render, createElement } from '${renderModule}'; + import Component from '${process.platform === 'win32' ? this.resourcePath.replace(/\//g, '\\\\') : this.resourcePath}'; + import DriverUniversal from 'driver-universal'; + const withSSR = ${withSSR}; + + const comProps = {}; + + function Entry() { + return createElement(Component, comProps); + } + ${appRender} + `; + return source; +} + +export default mpaLoader; \ No newline at end of file From beee0bdaf301965e73dc085b0c322fc399695cde Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Mon, 28 Sep 2020 12:21:27 +0800 Subject: [PATCH 2/2] fix: optimize code --- examples/with-rax-mpa/README.md | 3 --- examples/with-rax-mpa/build.json | 11 ---------- examples/with-rax-mpa/package.json | 22 ------------------- examples/with-rax-mpa/src/app.json | 15 ------------- examples/with-rax-mpa/src/app.ts | 15 ------------- .../src/components/Logo/index.css | 5 ----- .../src/components/Logo/index.tsx | 21 ------------------ examples/with-rax-mpa/src/document/index.tsx | 21 ------------------ .../with-rax-mpa/src/pages/About/app.json | 11 ---------- examples/with-rax-mpa/src/pages/About/app.ts | 15 ------------- .../with-rax-mpa/src/pages/About/index.css | 16 -------------- .../with-rax-mpa/src/pages/About/index.tsx | 18 --------------- .../with-rax-mpa/src/pages/Home/index.css | 16 -------------- .../with-rax-mpa/src/pages/Home/index.tsx | 18 --------------- examples/with-rax-mpa/tsconfig.json | 20 ----------------- packages/build-mpa-config/src/index.ts | 6 ++--- packages/build-mpa-config/src/mpa-loader.ts | 6 ++--- 17 files changed, 6 insertions(+), 233 deletions(-) delete mode 100644 examples/with-rax-mpa/README.md delete mode 100644 examples/with-rax-mpa/build.json delete mode 100644 examples/with-rax-mpa/package.json delete mode 100644 examples/with-rax-mpa/src/app.json delete mode 100644 examples/with-rax-mpa/src/app.ts delete mode 100644 examples/with-rax-mpa/src/components/Logo/index.css delete mode 100644 examples/with-rax-mpa/src/components/Logo/index.tsx delete mode 100644 examples/with-rax-mpa/src/document/index.tsx delete mode 100644 examples/with-rax-mpa/src/pages/About/app.json delete mode 100644 examples/with-rax-mpa/src/pages/About/app.ts delete mode 100644 examples/with-rax-mpa/src/pages/About/index.css delete mode 100644 examples/with-rax-mpa/src/pages/About/index.tsx delete mode 100644 examples/with-rax-mpa/src/pages/Home/index.css delete mode 100644 examples/with-rax-mpa/src/pages/Home/index.tsx delete mode 100644 examples/with-rax-mpa/tsconfig.json diff --git a/examples/with-rax-mpa/README.md b/examples/with-rax-mpa/README.md deleted file mode 100644 index 98a3bb4ecc..0000000000 --- a/examples/with-rax-mpa/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# with rax - -https://github.com/ice-lab/icejs/tree/master/examples diff --git a/examples/with-rax-mpa/build.json b/examples/with-rax-mpa/build.json deleted file mode 100644 index 6a51d5c44c..0000000000 --- a/examples/with-rax-mpa/build.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - /*"web": { - "mpa": true - }, - "weex": { - "mpa": true - }, */ - "plugins": ["build-plugin-mpa"], - "targets": ["web"], - "inlineStyle": true -} diff --git a/examples/with-rax-mpa/package.json b/examples/with-rax-mpa/package.json deleted file mode 100644 index f077cb3020..0000000000 --- a/examples/with-rax-mpa/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "with-rax-mpa", - "description": "rax mpa example", - "dependencies": { - "rax": "^1.1.0", - "rax-document": "^0.1.0", - "rax-image": "^2.0.0", - "rax-link": "^1.0.1", - "rax-text": "^1.0.0", - "rax-view": "^1.0.0" - }, - "devDependencies": { - "@types/rax": "^1.0.0" - }, - "scripts": { - "start": "rax-app start", - "build": "rax-app build" - }, - "engines": { - "node": ">=8.0.0" - } -} diff --git a/examples/with-rax-mpa/src/app.json b/examples/with-rax-mpa/src/app.json deleted file mode 100644 index 21d71dd98e..0000000000 --- a/examples/with-rax-mpa/src/app.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "routes": [ - { - "path": "/", - "source": "pages/Home/index" - }, - { - "path": "/about", - "source": "/pages/About/index" - } - ], - "window": { - "title": "Rax App" - } -} diff --git a/examples/with-rax-mpa/src/app.ts b/examples/with-rax-mpa/src/app.ts deleted file mode 100644 index 9d23330756..0000000000 --- a/examples/with-rax-mpa/src/app.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { runApp } from 'rax-app'; - -runApp({ - app: { - onShow() { - console.log('app show...'); - }, - onHide() { - console.log('app hide...'); - } - }, - router: { - basename: '/home' - } -}); diff --git a/examples/with-rax-mpa/src/components/Logo/index.css b/examples/with-rax-mpa/src/components/Logo/index.css deleted file mode 100644 index 2f8d8d1144..0000000000 --- a/examples/with-rax-mpa/src/components/Logo/index.css +++ /dev/null @@ -1,5 +0,0 @@ -.logo { - width: 200rpx; - height: 180rpx; - margin-bottom: 20rpx; -} \ No newline at end of file diff --git a/examples/with-rax-mpa/src/components/Logo/index.tsx b/examples/with-rax-mpa/src/components/Logo/index.tsx deleted file mode 100644 index 3019027efd..0000000000 --- a/examples/with-rax-mpa/src/components/Logo/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createElement, PureComponent } from 'rax'; -import Image from 'rax-image'; - -import './index.css'; - -class Logo extends PureComponent { - public render() { - const source = { - uri: '//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png', - }; - console.log('with router =>', this.props); - return ( - - ); - } -} - -export default Logo; diff --git a/examples/with-rax-mpa/src/document/index.tsx b/examples/with-rax-mpa/src/document/index.tsx deleted file mode 100644 index 4eeed411e3..0000000000 --- a/examples/with-rax-mpa/src/document/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createElement } from 'rax'; -import { Root, Style, Script } from 'rax-document'; - -function Document() { - return ( - - - - - @ali/demo-app -