diff --git a/README.md b/README.md index fefda9b..f25399e 100644 --- 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 index eaa2efb..4d1dc66 100644 --- 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/src/__tests__/fixtures/basic-template-plugin-production/__snapshots__/webpack5/server--main.js b/src/__tests__/fixtures/basic-template-plugin-production/__snapshots__/webpack5/server--main.js index e0dde9c..38ada80 100644 --- a/src/__tests__/fixtures/basic-template-plugin-production/__snapshots__/webpack5/server--main.js +++ b/src/__tests__/fixtures/basic-template-plugin-production/__snapshots__/webpack5/server--main.js @@ -1 +1 @@ -(()=>{var e={845:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>b});const s=require("marko/dist/runtime/html"),n=require("marko/dist/runtime/components/renderer");var o=r.n(n);const i=(0,s.t)(),a=i;i._=o()((function(e,t,r,s,n){t.w("

Hello World

")}),{t:"7Fk+kAfP",i:!0},{});const c={getAssets(e){return this.build[e]},build:{"test_7Fk-":{}}},_=require("marko/dist/core-tags/core/__flush_here_and_after__.js");var d=r.n(_);const l=require("marko/dist/runtime/helpers/render-tag");var u=r.n(l);const f=require("marko/dist/core-tags/components/init-components-tag.js");var p=r.n(f);const g=require("marko/dist/core-tags/core/await/reorderer-renderer.js");var h=r.n(g);const m=(0,s.t)(),b=m;function y(e){const t=this.___entries;if(this.___entries=void 0,t){r.p&&e.script(`$mwp=${JSON.stringify(r.p)}`);const s=this.buildName,n=this.cspNonce,o=n?` nonce=${JSON.stringify(n)}`:"",i=this.___writtenAssets||(this.___writtenAssets=new Set);let a="",_="";for(const e of t){const t=c.getAssets(e,s);if(t.js)for(const e of t.js)i.has(e)||(i.add(e),a+=`