From 4947ed651867887b0ce3aff81499ef57d29bdfbe Mon Sep 17 00:00:00 2001 From: Dylan Piercey Date: Sat, 14 Mar 2020 13:46:39 -0700 Subject: [PATCH] feat: add runtimeid option (#30) --- README.md | 14 ++ package.json | 2 +- .../__snapshots__/browser--test_gpFj.js | 47 ++++ .../__snapshots__/server--main.js | 237 ++++++++++++++++++ .../server.js | 8 + .../test.marko | 1 + .../webpack.config.ts | 42 ++++ .../__snapshots__/browser--test_uYWJ.js | 3 +- .../__snapshots__/browser--bar_aSxt.js | 3 +- .../__snapshots__/browser--foo_3XPO.js | 3 +- .../__snapshots__/browser-A--test_YDNP.A.js | 3 +- .../__snapshots__/browser-B--test_YDNP.B.js | 3 +- .../__snapshots__/browser-C--test_YDNP.C.js | 3 +- .../__snapshots__/browser--test_nzzJ.js | 3 +- src/loader/get-asset-code.ts | 3 +- src/loader/index.ts | 21 +- src/plugin/index.ts | 12 + src/shared/plugin-options-for-compiler.ts | 6 + 18 files changed, 401 insertions(+), 13 deletions(-) create mode 100644 src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/browser--test_gpFj.js create mode 100644 src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/server--main.js create mode 100644 src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/server.js create mode 100644 src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko create mode 100644 src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/webpack.config.ts create mode 100644 src/shared/plugin-options-for-compiler.ts diff --git a/README.md b/README.md index 2351d25..652225a 100644 --- a/README.md +++ b/README.md @@ -188,6 +188,20 @@ template.render({ $global: { bundleName: `Browser-${req.language}` } }); Note: If a bundle with the provided name does not exist an error will be thrown. +## Multiple copies of Marko + +In some cases you may want to embed multiple isolated copies of Marko on the page. Since Marko relies on some `window` properties to initialize this can cause issues. For example, by default Marko will read the server rendered hydration code from `window.$components`. In Marko you can change these `window` properties by rendering with `{ $global: { runtimeId: "MY_MARKO_RUNTIME_ID" } }` as input on the server side. + +This plugin exposes a `runtimeId` option produces output that automatically sets `$global.runtimeId` on the server side and initializes properly in the browser. + +```js +import MarkoPlugin from "@marko/webpack/plugin"; + +const markoPlugin = new MarkoPlugin({ + runtimeId: "MY_MARKO_RUNTIME_ID" +}); +``` + ## Dynamic public paths When using the plugin, the server will automatically sync the runtime [`__webpack_public_path__`](https://webpack.js.org/guides/public-path/#on-the-fly) with the browser. diff --git a/package.json b/package.json index 7fdae82..2eff6b2 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "release": "standard-version", "prepublishOnly": "npm run build", "test": "jest --watch", - "test:inspect": "node --inspect $(which jest) --watch --runInBand" + "test:inspect": "node --inspect $(which jest) --watch --runInBand --testTimeout 99999999" }, "types": "dist/index.d.ts" } diff --git a/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/browser--test_gpFj.js b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/browser--test_gpFj.js new file mode 100644 index 0000000..e81ea79 --- /dev/null +++ b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/browser--test_gpFj.js @@ -0,0 +1,47 @@ +/******/ ({ + +/***/ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?dependencies": +/*!************************************************************************************************!*\ + !*** ./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?dependencies ***! + \************************************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + + + +/***/ }), + +/***/ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?hydrate": +/*!*******************************************************************************************!*\ + !*** ./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?hydrate ***! + \*******************************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + + + if (window.$mwp) { + __webpack_require__.p = $mwp; + } + + __webpack_require__(/*! ./test.marko?dependencies */ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?dependencies"); + + const { init } = __webpack_require__(/*! marko/components */ "marko/components"); + init("testruntime"); + + + + +/***/ }), + +/***/ "marko/components": +/*!***********************************!*\ + !*** external "marko/components" ***! + \***********************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = marko/components; + +/***/ }) + +/******/ }); \ No newline at end of file diff --git a/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/server--main.js b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/server--main.js new file mode 100644 index 0000000..2704a31 --- /dev/null +++ b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/__snapshots__/server--main.js @@ -0,0 +1,237 @@ +/******/ ({ + +/***/ "./__MARKO_WEBPACK__MANIFEST.js": +/*!**************************************!*\ + !*** ./__MARKO_WEBPACK__MANIFEST.js ***! + \**************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = { + getAssets(entry) { + return this.build[entry]; + }, + build: {"test_gpFj":{"js":["test_gpFj.js"]}} +} + +/***/ }), + +/***/ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/server.js": +/*!**********************************************************************************!*\ + !*** ./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/server.js ***! + \**********************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +const http = __webpack_require__(/*! http */ "http"); +const test = __webpack_require__(/*! ./test.marko */ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?assets"); + +http + .createServer((req, res) => { + test.render({}, res); + }) + .listen(0); + + +/***/ }), + +/***/ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko": +/*!***********************************************************************************!*\ + !*** ./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko ***! + \***********************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/* WEBPACK VAR INJECTION */(function(__filename) { + +var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename), + marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/basic-template-plugin-custom-runtime-id/test.marko", + marko_renderer = __webpack_require__(/*! marko/dist/runtime/components/renderer */ "marko/dist/runtime/components/renderer"); + +function render(input, out, __component, component, state) { + var data = input; + + out.w("

Hello World

"); +} + +marko_template._ = marko_renderer(render, { + d_: true, + e_: marko_componentType + }); + +marko_template.meta = { + id: "/@marko/webpack-tests$x.x.x/fixtures/basic-template-plugin-custom-runtime-id/test.marko" + }; + +/* WEBPACK VAR INJECTION */}.call(this, "/index.js")) + +/***/ }), + +/***/ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?assets": +/*!******************************************************************************************!*\ + !*** ./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko?assets ***! + \******************************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/* WEBPACK VAR INJECTION */(function(__filename) { + +var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename), + marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/basic-template-plugin-custom-runtime-id/test.marko", + marko_renderer = __webpack_require__(/*! marko/dist/runtime/components/renderer */ "marko/dist/runtime/components/renderer"), + template = __webpack_require__(/*! ./test.marko */ "./src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko"), + module_manifest = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"), + manifest = module_manifest.default || module_manifest, + marko_dynamicTag = __webpack_require__(/*! marko/dist/runtime/helpers/dynamic-tag */ "marko/dist/runtime/helpers/dynamic-tag"), + marko_loadTag = __webpack_require__(/*! marko/dist/runtime/helpers/load-tag */ "marko/dist/runtime/helpers/load-tag"), + init_components_tag = marko_loadTag(__webpack_require__(/*! marko/dist/core-tags/components/init-components-tag */ "marko/dist/core-tags/components/init-components-tag")); + +function renderAssets() { + const assets = this.___assets; + const nonce = this.global.cspNonce; + this.___renderAssets = this.___assets = undefined; + this.flush = this.___flush; + this.end = this.___end; + + if (assets) { + this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`); + + if (assets.js) { + const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`; + this.script( + `(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${ + JSON.stringify(assets.js.map(js => __webpack_require__.p+js)) + })` + ); + } + + if (assets.css) { + assets.css.forEach(css => { + this.write( + `` + ); + }); + } + } +}; + +function outFlushOverride() { + this.___renderAssets(); + this.flush(); +}; + +function outEndOverride(data, encoding, callback) { + this.___renderAssets(); + this.end(data, encoding, callback); +}; + +function render(input, out, __component, component, state) { + var data = input; + + out.global.runtimeId = "testruntime"; + + out.___flush = out.flush; + + out.___end = out.end; + + out.___renderAssets = renderAssets; + + out.___assets = manifest.getAssets("test_gpFj", out.global.buildName); + + out.flush = outFlushOverride; + + out.end = outEndOverride; + + marko_dynamicTag(out, template, function() { + return input; + }, null, null, null, __component, "0"); + + init_components_tag({}, out); +} + +marko_template._ = marko_renderer(render, { + d_: true, + e_: marko_componentType + }); + +marko_template.meta = { + id: "/@marko/webpack-tests$x.x.x/fixtures/basic-template-plugin-custom-runtime-id/test.marko", + tags: [ + "./test.marko", + "marko/dist/core-tags/components/init-components-tag" + ] + }; + +/* WEBPACK VAR INJECTION */}.call(this, "/index.js")) + +/***/ }), + +/***/ "http": +/*!***********************!*\ + !*** external "http" ***! + \***********************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = http; + +/***/ }), + +/***/ "marko/dist/core-tags/components/init-components-tag": +/*!**********************************************************************!*\ + !*** external "marko/dist/core-tags/components/init-components-tag" ***! + \**********************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = marko/dist/core-tags/components/init-components-tag; + +/***/ }), + +/***/ "marko/dist/html": +/*!**********************************!*\ + !*** external "marko/dist/html" ***! + \**********************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = marko/dist/html; + +/***/ }), + +/***/ "marko/dist/runtime/components/renderer": +/*!*********************************************************!*\ + !*** external "marko/dist/runtime/components/renderer" ***! + \*********************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = marko/dist/runtime/components/renderer; + +/***/ }), + +/***/ "marko/dist/runtime/helpers/dynamic-tag": +/*!*********************************************************!*\ + !*** external "marko/dist/runtime/helpers/dynamic-tag" ***! + \*********************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = marko/dist/runtime/helpers/dynamic-tag; + +/***/ }), + +/***/ "marko/dist/runtime/helpers/load-tag": +/*!******************************************************!*\ + !*** external "marko/dist/runtime/helpers/load-tag" ***! + \******************************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = marko/dist/runtime/helpers/load-tag; + +/***/ }) + +/******/ }); \ No newline at end of file diff --git a/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/server.js b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/server.js new file mode 100644 index 0000000..6dc9ebc --- /dev/null +++ b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/server.js @@ -0,0 +1,8 @@ +const http = require("http"); +const test = require("./test.marko"); + +http + .createServer((req, res) => { + test.render({}, res); + }) + .listen(0); diff --git a/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko new file mode 100644 index 0000000..f3e333e --- /dev/null +++ b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko @@ -0,0 +1 @@ +

Hello World

diff --git a/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/webpack.config.ts b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/webpack.config.ts new file mode 100644 index 0000000..c0589b3 --- /dev/null +++ b/src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/webpack.config.ts @@ -0,0 +1,42 @@ +import * as path from "path"; +import * as webpack from "webpack"; +import MarkoPlugin from "../../../plugin"; + +const markoPlugin = new MarkoPlugin({ + runtimeId: "testruntime" +}); + +export default [ + { + name: "server", + target: "async-node", + entry: path.join(__dirname, "server.js"), + module: { + rules: [ + { + test: /\.marko$/, + loader: "@marko/webpack/loader" + } + ] + }, + plugins: [ + new webpack.DefinePlugin({ + "process.env.BUNDLE": true + }), + markoPlugin.server + ] + }, + { + name: "browser", + target: "web", + module: { + rules: [ + { + test: /\.marko$/, + loader: "@marko/webpack/loader" + } + ] + }, + plugins: [markoPlugin.browser] + } +]; diff --git a/src/__tests__/fixtures/basic-template-plugin/__snapshots__/browser--test_uYWJ.js b/src/__tests__/fixtures/basic-template-plugin/__snapshots__/browser--test_uYWJ.js index 176f940..1dabe28 100644 --- a/src/__tests__/fixtures/basic-template-plugin/__snapshots__/browser--test_uYWJ.js +++ b/src/__tests__/fixtures/basic-template-plugin/__snapshots__/browser--test_uYWJ.js @@ -24,7 +24,8 @@ } __webpack_require__(/*! ./test.marko?dependencies */ "./src/__tests__/fixtures/basic-template-plugin/test.marko?dependencies"); - window.$initComponents && window.$initComponents(); + window.$initComponents && $initComponents(); + /***/ }) diff --git a/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--bar_aSxt.js b/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--bar_aSxt.js index 256d649..41ce402 100644 --- a/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--bar_aSxt.js +++ b/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--bar_aSxt.js @@ -24,7 +24,8 @@ __webpack_require__(/*! ./components/shared.marko?dependencies */ "./src/__tests } __webpack_require__(/*! ./bar.marko?dependencies */ "./src/__tests__/fixtures/multiple-entries-plugin/bar.marko?dependencies"); - window.$initComponents && window.$initComponents(); + window.$initComponents && $initComponents(); + /***/ }) diff --git a/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--foo_3XPO.js b/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--foo_3XPO.js index 11aab9f..7d3fca6 100644 --- a/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--foo_3XPO.js +++ b/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/browser--foo_3XPO.js @@ -24,7 +24,8 @@ __webpack_require__(/*! ./components/shared.marko?dependencies */ "./src/__tests } __webpack_require__(/*! ./foo.marko?dependencies */ "./src/__tests__/fixtures/multiple-entries-plugin/foo.marko?dependencies"); - window.$initComponents && window.$initComponents(); + window.$initComponents && $initComponents(); + /***/ }) diff --git a/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-A--test_YDNP.A.js b/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-A--test_YDNP.A.js index 2baacc0..6fb8333 100644 --- a/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-A--test_YDNP.A.js +++ b/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-A--test_YDNP.A.js @@ -108,7 +108,8 @@ __webpack_require__(/*! ./components/nested/index.marko?dependencies */ "./src/_ } __webpack_require__(/*! ./test.marko?dependencies */ "./src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/test.marko?dependencies"); - window.$initComponents && window.$initComponents(); + window.$initComponents && $initComponents(); + /***/ }), diff --git a/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-B--test_YDNP.B.js b/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-B--test_YDNP.B.js index 276d601..094e51f 100644 --- a/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-B--test_YDNP.B.js +++ b/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-B--test_YDNP.B.js @@ -108,7 +108,8 @@ __webpack_require__(/*! ./components/nested/index.marko?dependencies */ "./src/_ } __webpack_require__(/*! ./test.marko?dependencies */ "./src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/test.marko?dependencies"); - window.$initComponents && window.$initComponents(); + window.$initComponents && $initComponents(); + /***/ }), diff --git a/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-C--test_YDNP.C.js b/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-C--test_YDNP.C.js index 8793d7f..026333b 100644 --- a/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-C--test_YDNP.C.js +++ b/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-C--test_YDNP.C.js @@ -108,7 +108,8 @@ __webpack_require__(/*! ./components/nested/index.marko?dependencies */ "./src/_ } __webpack_require__(/*! ./test.marko?dependencies */ "./src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/test.marko?dependencies"); - window.$initComponents && window.$initComponents(); + window.$initComponents && $initComponents(); + /***/ }), diff --git a/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/browser--test_nzzJ.js b/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/browser--test_nzzJ.js index 3f509ed..4ffa4fb 100644 --- a/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/browser--test_nzzJ.js +++ b/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/browser--test_nzzJ.js @@ -106,7 +106,8 @@ __webpack_require__(/*! ./components/nested/index.marko?dependencies */ "./src/_ } __webpack_require__(/*! ./test.marko?dependencies */ "./src/__tests__/fixtures/with-class-component-plugin/test.marko?dependencies"); - window.$initComponents && window.$initComponents(); + window.$initComponents && $initComponents(); + /***/ }), diff --git a/src/loader/get-asset-code.ts b/src/loader/get-asset-code.ts index a00562d..2eaa3d3 100644 --- a/src/loader/get-asset-code.ts +++ b/src/loader/get-asset-code.ts @@ -2,7 +2,7 @@ import * as path from "path"; import moduleName from "../shared/module-name"; import { VIRTUAL_SERVER_MANIFEST_PATH } from "../shared/virtual"; -export default (resourcePath: string): string => ` +export default (resourcePath: string, runtimeId: string | undefined): string => ` import template from ${JSON.stringify(`./${path.basename(resourcePath)}`)}; import manifest from ${JSON.stringify( `./${path.relative(path.dirname(resourcePath), VIRTUAL_SERVER_MANIFEST_PATH)}` @@ -47,6 +47,7 @@ static function outEndOverride(data, encoding, callback) { this.end(data, encoding, callback); } +${runtimeId === undefined ? "" : `$ out.global.runtimeId = ${runtimeId};` } $ out.___flush = out.flush; $ out.___end = out.end; $ out.___renderAssets = renderAssets; diff --git a/src/loader/index.ts b/src/loader/index.ts index 4374360..afbf787 100644 --- a/src/loader/index.ts +++ b/src/loader/index.ts @@ -1,10 +1,12 @@ "use strict"; import * as path from "path"; +import { Compiler } from 'webpack'; import * as loaderUtils from "loader-utils"; import ConcatMap from "concat-with-sourcemaps"; import getAssetCode from "./get-asset-code"; import { getVirtualModules } from "../shared/virtual"; +import pluginOptionsForCompiler from "../shared/plugin-options-for-compiler"; const watchFiles = { style: { @@ -53,17 +55,21 @@ const browserJSONPrefix = "package: "; let supportsBrowserJSON: boolean; export default function(source: string): string { + const compiler = this._compiler as Compiler; + if (supportsBrowserJSON === undefined) { - const resolveOptions = this._compiler.options.resolve; + const resolveOptions = compiler.options.resolve; const compilerExtensions = (resolveOptions && resolveOptions.extensions) || []; - supportsBrowserJSON = compilerExtensions.indexOf(".browser.json") !== -1; + supportsBrowserJSON = compilerExtensions.includes(".browser.json"); } + const pluginOptions = pluginOptionsForCompiler.get(compiler); const queryOptions = loaderUtils.getOptions(this); // Not the same as this.options const target = normalizeTarget( (queryOptions && queryOptions.target) || this.target ); + const runtimeId = pluginOptions && pluginOptions.runtimeId; // eslint-disable-next-line @typescript-eslint/no-var-requires const markoCompiler = require((queryOptions && queryOptions.compiler) || DEFAULT_COMPILER); @@ -107,7 +113,7 @@ export default function(source: string): string { if (assets) { return markoCompiler.compile( - getAssetCode(this.resourcePath), + getAssetCode(this.resourcePath, runtimeId), this.resourcePath, { writeToDisk: false, @@ -123,7 +129,14 @@ export default function(source: string): string { } ${loadStr(`./${path.basename(this.resourcePath)}?dependencies`)} - window.$initComponents && window.$initComponents(); + ${runtimeId + ? ` + ${loadStr("marko/components", "{ init }")} + init(${runtimeId}); + ` + : "window.$initComponents && $initComponents();" + } + `; } else if (target !== "server" && markoCompiler.compileForBrowser) { const { code, meta, map } = markoCompiler.compileForBrowser( diff --git a/src/plugin/index.ts b/src/plugin/index.ts index 809965b..55e856a 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -5,6 +5,8 @@ import { ReplaceSource } from "webpack-sources"; import VirtualModulesPlugin from "webpack-virtual-modules"; import sortKeys from "sort-keys"; import moduleName from "../shared/module-name"; +import pluginOptionsForCompiler from "../shared/plugin-options-for-compiler"; + import { VIRTUAL_BROWSER_INVALIDATE_PATH, VIRTUAL_SERVER_MANIFEST_PATH, @@ -32,6 +34,13 @@ export default class MarkoWebpackPlugin { [VIRTUAL_SERVER_MANIFEST_PATH]: MANIFEST_CONTENT }); + constructor(private options?: { runtimeId?: string }) { + this.options = { ...options }; + if (this.options.runtimeId) { + this.options.runtimeId = JSON.stringify(options.runtimeId); + } + } + // Overwritten by each compiler. // eslint-disable-next-line @typescript-eslint/no-empty-function private invalidateBrowserBuild(): void {} @@ -52,6 +61,7 @@ export default class MarkoWebpackPlugin { const escapeIfEval = (code: string): string => isEvalDevtool ? JSON.stringify(code).slice(1, -1) : code; + pluginOptionsForCompiler.set(compiler, this.options); registerVirtualModules(compiler, this.virtualServerModules); compiler.hooks.invalid.tap("MarkoWebpackServer:invalid", () => { @@ -184,6 +194,8 @@ export default class MarkoWebpackPlugin { [VIRTUAL_BROWSER_INVALIDATE_PATH]: "" }); + pluginOptionsForCompiler.set(compiler, this.options); + registerVirtualModules(compiler, virtualModules); this.browserCompilerNames.push(compilerName); this.pendingBrowserBuilds.push(pendingBuild); diff --git a/src/shared/plugin-options-for-compiler.ts b/src/shared/plugin-options-for-compiler.ts new file mode 100644 index 0000000..6b1d69d --- /dev/null +++ b/src/shared/plugin-options-for-compiler.ts @@ -0,0 +1,6 @@ +import { Compiler } from 'webpack'; +import Plugin from "../plugin"; +type PluginOptions = ConstructorParameters[0]; +const pluginnOptionsLookup: WeakMap = new WeakMap(); + +export { pluginnOptionsLookup as default }; \ No newline at end of file