feat: infer runtime id from webpack uniqueName option (#59)

marko-js · Sep 15, 2021 · c3c1730 · c3c1730
1 parent 0c69c6e
commit c3c1730
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -226,12 +226,13 @@ Note: If a bundle with the provided name does not exist an error will be thrown.
 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.
+The `runtimeId` will default to the [`uniqueName` option](https://webpack.js.org/configuration/output/#outputuniquename) from the server compiler in the webpack config.
 
 ```js
 import MarkoPlugin from "@marko/webpack/plugin";
 
 const markoPlugin = new MarkoPlugin({
-  runtimeId: "MY_MARKO_RUNTIME_ID"
+  runtimeId: "MY_MARKO_RUNTIME_ID" // default to webpack `output.uniqueName` option.
 });
 ```
 

diff --git a/src/__tests__/fixtures/asset-tag/__snapshots__/webpack5/server--main.js b/src/__tests__/fixtures/asset-tag/__snapshots__/webpack5/server--main.js
@@ -162,7 +162,7 @@ function renderAssets(out) {
   this.___entries = undefined;
 
   if (entries) {
-    __webpack_require__.p && out.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
+    __webpack_require__.p && out.script(`$mwp__marko_webpack=${JSON.stringify(__webpack_require__.p)}`);
     const buildName = this.buildName;
     const nonce = this.cspNonce;
     const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
@@ -204,6 +204,7 @@ function renderAssets(out) {
 const _marko_componentType = "wUwFs+xe",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("test_wUwF");
 

diff --git a/..._tests__/fixtures/basic-template-plugin-production/__snapshots__/webpack5/server--main.js b/..._tests__/fixtures/basic-template-plugin-production/__snapshots__/webpack5/server--main.js
diff --git a/src/__tests__/fixtures/basic-template-plugin/__snapshots__/webpack5/server--main.js b/src/__tests__/fixtures/basic-template-plugin/__snapshots__/webpack5/server--main.js
@@ -72,7 +72,7 @@ function renderAssets(out) {
   this.___entries = undefined;
 
   if (entries) {
-    __webpack_require__.p && out.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
+    __webpack_require__.p && out.script(`$mwp__marko_webpack=${JSON.stringify(__webpack_require__.p)}`);
     const buildName = this.buildName;
     const nonce = this.cspNonce;
     const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
@@ -114,6 +114,7 @@ function renderAssets(out) {
 const _marko_componentType = "r9oeuJMR",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("test_r9oe");
 

diff --git a/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/webpack5/server--main.js b/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/webpack5/server--main.js
@@ -79,7 +79,7 @@ function renderAssets(out) {
   this.___entries = undefined;
 
   if (entries) {
-    __webpack_require__.p && out.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
+    __webpack_require__.p && out.script(`$mwp__marko_webpack=${JSON.stringify(__webpack_require__.p)}`);
     const buildName = this.buildName;
     const nonce = this.cspNonce;
     const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
@@ -121,6 +121,7 @@ function renderAssets(out) {
 const _marko_componentType = "qMMCl8/W",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("bar_qMMC");
 
@@ -252,7 +253,7 @@ function renderAssets(out) {
   this.___entries = undefined;
 
   if (entries) {
-    __webpack_require__.p && out.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
+    __webpack_require__.p && out.script(`$mwp__marko_webpack=${JSON.stringify(__webpack_require__.p)}`);
     const buildName = this.buildName;
     const nonce = this.cspNonce;
     const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
@@ -294,6 +295,7 @@ function renderAssets(out) {
 const _marko_componentType = "FRgaW2aC",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("foo_FRga");
 
@@ -393,7 +395,7 @@ function renderAssets(out) {
   this.___entries = undefined;
 
   if (entries) {
-    __webpack_require__.p && out.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
+    __webpack_require__.p && out.script(`$mwp__marko_webpack=${JSON.stringify(__webpack_require__.p)}`);
     const buildName = this.buildName;
     const nonce = this.cspNonce;
     const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
@@ -435,6 +437,7 @@ function renderAssets(out) {
 const _marko_componentType = "vyXF8r3F",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("nested_vyXF");
 

diff --git a/...th-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/browser-A--test_xbSt.A.js b/...th-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/browser-A--test_xbSt.A.js
@@ -194,7 +194,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)();
+(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)("_marko_webpack");
 })();
 
 /******/ })()

diff --git a/...th-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/browser-B--test_xbSt.B.js b/...th-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/browser-B--test_xbSt.B.js
@@ -194,7 +194,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)();
+(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)("_marko_webpack");
 })();
 
 /******/ })()

diff --git a/...th-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/browser-C--test_xbSt.C.js b/...th-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/browser-C--test_xbSt.C.js
@@ -194,7 +194,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)();
+(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)("_marko_webpack");
 })();
 
 /******/ })()

diff --git a/...ixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/server--main.js b/...ixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/webpack5/server--main.js
@@ -115,7 +115,7 @@ function renderAssets(out) {
   this.___entries = undefined;
 
   if (entries) {
-    __webpack_require__.p && out.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
+    __webpack_require__.p && out.script(`$mwp__marko_webpack=${JSON.stringify(__webpack_require__.p)}`);
     const buildName = this.buildName;
     const nonce = this.cspNonce;
     const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
@@ -157,6 +157,7 @@ function renderAssets(out) {
 const _marko_componentType = "xbStr3Q2",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("test_xbSt");
 

diff --git a/...tests__/fixtures/with-class-component-plugin/__snapshots__/webpack5/browser--test_ntnz.js b/...tests__/fixtures/with-class-component-plugin/__snapshots__/webpack5/browser--test_ntnz.js
@@ -192,7 +192,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)();
+(0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)("_marko_webpack");
 })();
 
 /******/ })()

diff --git a/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/webpack5/server--main.js b/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/webpack5/server--main.js
@@ -113,7 +113,7 @@ function renderAssets(out) {
   this.___entries = undefined;
 
   if (entries) {
-    __webpack_require__.p && out.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
+    __webpack_require__.p && out.script(`$mwp__marko_webpack=${JSON.stringify(__webpack_require__.p)}`);
     const buildName = this.buildName;
     const nonce = this.cspNonce;
     const nonceAttr = nonce ? ` nonce=${JSON.stringify(nonce)}` : "";
@@ -155,6 +155,7 @@ function renderAssets(out) {
 const _marko_componentType = "ntnz89r6",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("test_ntnz");
 

diff --git a/src/__tests__/fixtures/with-public-path/__snapshots__/webpack5/server--main.js b/src/__tests__/fixtures/with-public-path/__snapshots__/webpack5/server--main.js
@@ -113,6 +113,7 @@ function renderAssets(out) {
 const _marko_componentType = "xGHmCIBi",
       _marko_component = {};
 _marko_template._ = marko_dist_runtime_components_renderer__WEBPACK_IMPORTED_MODULE_7___default()(function (input, out, _component, component, state) {
+  out.global.runtimeId = "_marko_webpack";
   out.global.___renderAssets = renderAssets;
   (out.global.___entries || (out.global.___entries = [])).push("test_xGHm");
 

diff --git a/src/plugin/index.ts b/src/plugin/index.ts
@@ -36,8 +36,12 @@ export default class MarkoWebpackPlugin {
     };
   } = {};
 
-  constructor(private options?: { runtimeId?: string }) {
-    this.options = options;
+  constructor(private options: { runtimeId?: string } = {}) {
+    this.options = { ...options };
+
+    if (this.options.runtimeId) {
+      this.options.runtimeId = normalizeRuntimeId(this.options.runtimeId);
+    }
   }
 
   get server() {
@@ -79,6 +83,12 @@ export default class MarkoWebpackPlugin {
       compiler.hooks.thisCompilation.tap(
         "MarkoWebpackServer:compilation",
         compilation => {
+          if (!this.options.runtimeId && compilation.outputOptions.uniqueName) {
+            this.options.runtimeId = normalizeRuntimeId(
+              compilation.outputOptions.uniqueName
+            );
+          }
+
           compilation.hooks.finishModules.tap(
             "MarkoWebpackServer:finishModules",
             modules => {
@@ -312,6 +322,10 @@ function patchWatchingWebpack4(compiler: webpack.Compiler) {
   }
 }
 
+function normalizeRuntimeId(id: string) {
+  return id.replace(/[^a-z0-9$_]/gi, "_");
+}
+
 function addLoaderAlias(config: webpack.Configuration) {
   const resolveLoader = (config.resolveLoader ??= {});
   const resolveLoaderAlias = (resolveLoader.alias ??= {});
-Original file line number
+Diff line change
@@ Expand Up / @@ -194,7 +194,7 @@ __webpack_require__.r(__webpack_exports__); @@
-    (0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)();
+    (0,marko_src_runtime_components__WEBPACK_IMPORTED_MODULE_0__.init)("_marko_webpack");
     })();
     /******/ })()
@@ Expand Down @@