feat: add runtimeid option

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.

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"
 }

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;
+
+/***/ })
+
+/******/ });

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("<h1>Hello World</h1>");
+}
+
+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(
+          `<link rel="stylesheet" href=${JSON.stringify(__webpack_require__.p+css)}>`
+        );
+      });
+    }
+  }
+};
+
+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;
+
+/***/ })
+
+/******/ });

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);

src/__tests__/fixtures/basic-template-plugin-custom-runtime-id/test.marko

@@ -0,0 +1 @@
+<h1>Hello World</h1>

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]
+  }
+];

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();
+
 
 
 /***/ })

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();
+
 
 
 /***/ })