@jasonshimmy/vite-plugin-cer-app 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/commits.txt +1 -1
- package/dist/plugin/build-ssr.d.ts.map +1 -1
- package/dist/plugin/build-ssr.js +6 -3
- package/dist/plugin/build-ssr.js.map +1 -1
- package/dist/runtime/entry-server-template.d.ts +1 -1
- package/dist/runtime/entry-server-template.d.ts.map +1 -1
- package/dist/runtime/entry-server-template.js +6 -3
- package/dist/runtime/entry-server-template.js.map +1 -1
- package/package.json +1 -1
- package/src/plugin/build-ssr.ts +6 -3
- package/src/runtime/entry-server-template.ts +6 -3
package/CHANGELOG.md
CHANGED
package/commits.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
- fix
|
|
1
|
+
- fix: FOUC in ssr and ssg (e4fb53d)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build-ssr.d.ts","sourceRoot":"","sources":["../../src/plugin/build-ssr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"build-ssr.d.ts","sourceRoot":"","sources":["../../src/plugin/build-ssr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAkMxD;;;;;GAKG;AACH,wBAAsB,QAAQ,CAC5B,MAAM,EAAE,iBAAiB,EACzB,cAAc,GAAE,UAAe,GAC9B,OAAO,CAAC,IAAI,CAAC,CAiEf"}
|
package/dist/plugin/build-ssr.js
CHANGED
|
@@ -68,13 +68,16 @@ function _mergeWithClientTemplate(ssrHtml, clientTemplate) {
|
|
|
68
68
|
? ssrHtml.slice(headStart + headTag.length, headEnd).trim() : ''
|
|
69
69
|
const ssrBody = bodyStart >= 0 && bodyEnd > bodyStart
|
|
70
70
|
? ssrHtml.slice(bodyStart + bodyTag.length, bodyEnd).trim() : ssrHtml
|
|
71
|
-
// Hoist <style
|
|
72
|
-
//
|
|
71
|
+
// Hoist only top-level <style id=...> elements (cer-ssr-jit, cer-ssr-global)
|
|
72
|
+
// from the SSR body into the document <head>. Plain <style> blocks without
|
|
73
|
+
// an id attribute belong to shadow DOM templates and must stay in place —
|
|
74
|
+
// hoisting them to <head> breaks shadow DOM style encapsulation (document
|
|
75
|
+
// styles do not pierce shadow roots), which is the root cause of FOUC.
|
|
73
76
|
const headParts = ssrHead ? [ssrHead] : []
|
|
74
77
|
let ssrBodyContent = ssrBody
|
|
75
78
|
let pos = 0
|
|
76
79
|
while (pos < ssrBodyContent.length) {
|
|
77
|
-
const styleOpen = ssrBodyContent.indexOf('<style', pos)
|
|
80
|
+
const styleOpen = ssrBodyContent.indexOf('<style id=', pos)
|
|
78
81
|
if (styleOpen < 0) break
|
|
79
82
|
const styleClose = ssrBodyContent.indexOf('</style>', styleOpen)
|
|
80
83
|
if (styleClose < 0) break
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build-ssr.js","sourceRoot":"","sources":["../../src/plugin/build-ssr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,MAAM,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGpC;;;;;;;;;;GAUG;AACH,SAAS,kBAAkB,CAAC,MAAyB;IACnD,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IACpD,IAAI,UAAU,CAAC,SAAS,CAAC;QAAE,OAAO,SAAS,CAAA;IAC3C,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;IAC7D,IAAI,UAAU,CAAC,WAAW,CAAC;QAAE,OAAO,WAAW,CAAA;IAC/C,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;AACzC,CAAC;AAED;;;GAGG;AACH,SAAS,uBAAuB;IAC9B,OAAO
|
|
1
|
+
{"version":3,"file":"build-ssr.js","sourceRoot":"","sources":["../../src/plugin/build-ssr.ts"],"names":[],"mappings":"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"}
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* wires up the routing, and exports a handler compatible with
|
|
6
6
|
* Express/Fastify/Node http.
|
|
7
7
|
*/
|
|
8
|
-
export declare const ENTRY_SERVER_TEMPLATE = "// Server-side entry \u2014 AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nimport { readFileSync, existsSync } from 'node:fs'\nimport { dirname, join } from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { AsyncLocalStorage } from 'node:async_hooks'\nimport 'virtual:cer-components'\nimport routes from 'virtual:cer-routes'\nimport layouts from 'virtual:cer-layouts'\nimport plugins from 'virtual:cer-plugins'\nimport apiRoutes from 'virtual:cer-server-api'\nimport { registerBuiltinComponents } from '@jasonshimmy/custom-elements-runtime'\nimport { registerEntityMap, DSD_POLYFILL_SCRIPT } from '@jasonshimmy/custom-elements-runtime/ssr'\nimport entitiesJson from '@jasonshimmy/custom-elements-runtime/entities.json'\nimport { initRouter } from '@jasonshimmy/custom-elements-runtime/router'\nimport { createSSRHandler } from '@jasonshimmy/custom-elements-runtime/ssr-middleware'\n\nregisterBuiltinComponents()\n\n// Pre-load the full HTML entity map so named entities like — decode\n// correctly during SSR. Without this the bundled runtime falls back to a\n// minimal set (<, >, & \u2026) and re-escapes everything else.\nregisterEntityMap(entitiesJson)\n\n// Async-local storage for request-scoped SSR loader data.\n// Using AsyncLocalStorage ensures concurrent SSR renders (e.g. SSG with\n// concurrency > 1) never see each other's data \u2014 each request's async chain\n// carries its own store value, so usePageData() is always race-condition-free.\nconst _cerDataStore = new AsyncLocalStorage()\n// Expose the store so the usePageData() composable can read it server-side.\n;(globalThis).__CER_DATA_STORE__ = _cerDataStore\n\n// Load the Vite-built client index.html (dist/client/index.html) so every SSR\n// response includes the client-side scripts needed for hydration and routing.\n// The server bundle lives at dist/server/server.js, so ../client resolves correctly.\nconst _clientTemplatePath = join(dirname(fileURLToPath(import.meta.url)), '../client/index.html')\nconst _clientTemplate = existsSync(_clientTemplatePath)\n ? readFileSync(_clientTemplatePath, 'utf-8')\n : null\n\n// Merge the SSR handler's full HTML document with the Vite client shell so the\n// final page contains both pre-rendered DSD content and the client bundle scripts.\nfunction _mergeWithClientTemplate(ssrHtml, clientTemplate) {\n const headTag = '<head>', headCloseTag = '</head>'\n const bodyTag = '<body>', bodyCloseTag = '</body>'\n const headStart = ssrHtml.indexOf(headTag)\n const headEnd = ssrHtml.indexOf(headCloseTag)\n const bodyStart = ssrHtml.indexOf(bodyTag)\n const bodyEnd = ssrHtml.lastIndexOf(bodyCloseTag)\n const ssrHead = headStart >= 0 && headEnd > headStart\n ? ssrHtml.slice(headStart + headTag.length, headEnd).trim() : ''\n const ssrBody = bodyStart >= 0 && bodyEnd > bodyStart\n ? ssrHtml.slice(bodyStart + bodyTag.length, bodyEnd).trim() : ssrHtml\n // Hoist <style
|
|
8
|
+
export declare const ENTRY_SERVER_TEMPLATE = "// Server-side entry \u2014 AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\nimport { readFileSync, existsSync } from 'node:fs'\nimport { dirname, join } from 'node:path'\nimport { fileURLToPath } from 'node:url'\nimport { AsyncLocalStorage } from 'node:async_hooks'\nimport 'virtual:cer-components'\nimport routes from 'virtual:cer-routes'\nimport layouts from 'virtual:cer-layouts'\nimport plugins from 'virtual:cer-plugins'\nimport apiRoutes from 'virtual:cer-server-api'\nimport { registerBuiltinComponents } from '@jasonshimmy/custom-elements-runtime'\nimport { registerEntityMap, DSD_POLYFILL_SCRIPT } from '@jasonshimmy/custom-elements-runtime/ssr'\nimport entitiesJson from '@jasonshimmy/custom-elements-runtime/entities.json'\nimport { initRouter } from '@jasonshimmy/custom-elements-runtime/router'\nimport { createSSRHandler } from '@jasonshimmy/custom-elements-runtime/ssr-middleware'\n\nregisterBuiltinComponents()\n\n// Pre-load the full HTML entity map so named entities like — decode\n// correctly during SSR. Without this the bundled runtime falls back to a\n// minimal set (<, >, & \u2026) and re-escapes everything else.\nregisterEntityMap(entitiesJson)\n\n// Async-local storage for request-scoped SSR loader data.\n// Using AsyncLocalStorage ensures concurrent SSR renders (e.g. SSG with\n// concurrency > 1) never see each other's data \u2014 each request's async chain\n// carries its own store value, so usePageData() is always race-condition-free.\nconst _cerDataStore = new AsyncLocalStorage()\n// Expose the store so the usePageData() composable can read it server-side.\n;(globalThis).__CER_DATA_STORE__ = _cerDataStore\n\n// Load the Vite-built client index.html (dist/client/index.html) so every SSR\n// response includes the client-side scripts needed for hydration and routing.\n// The server bundle lives at dist/server/server.js, so ../client resolves correctly.\nconst _clientTemplatePath = join(dirname(fileURLToPath(import.meta.url)), '../client/index.html')\nconst _clientTemplate = existsSync(_clientTemplatePath)\n ? readFileSync(_clientTemplatePath, 'utf-8')\n : null\n\n// Merge the SSR handler's full HTML document with the Vite client shell so the\n// final page contains both pre-rendered DSD content and the client bundle scripts.\nfunction _mergeWithClientTemplate(ssrHtml, clientTemplate) {\n const headTag = '<head>', headCloseTag = '</head>'\n const bodyTag = '<body>', bodyCloseTag = '</body>'\n const headStart = ssrHtml.indexOf(headTag)\n const headEnd = ssrHtml.indexOf(headCloseTag)\n const bodyStart = ssrHtml.indexOf(bodyTag)\n const bodyEnd = ssrHtml.lastIndexOf(bodyCloseTag)\n const ssrHead = headStart >= 0 && headEnd > headStart\n ? ssrHtml.slice(headStart + headTag.length, headEnd).trim() : ''\n const ssrBody = bodyStart >= 0 && bodyEnd > bodyStart\n ? ssrHtml.slice(bodyStart + bodyTag.length, bodyEnd).trim() : ssrHtml\n // Hoist only top-level <style id=...> elements (cer-ssr-jit, cer-ssr-global)\n // from the SSR body into the document <head>. Plain <style> blocks without\n // an id attribute belong to shadow DOM templates and must stay in place \u2014\n // hoisting them to <head> breaks shadow DOM style encapsulation (document\n // styles do not pierce shadow roots), which is the root cause of FOUC.\n const headParts = ssrHead ? [ssrHead] : []\n let ssrBodyContent = ssrBody\n let pos = 0\n while (pos < ssrBodyContent.length) {\n const styleOpen = ssrBodyContent.indexOf('<style id=', pos)\n if (styleOpen < 0) break\n const styleClose = ssrBodyContent.indexOf('</style>', styleOpen)\n if (styleClose < 0) break\n headParts.push(ssrBodyContent.slice(styleOpen, styleClose + 8))\n ssrBodyContent = ssrBodyContent.slice(0, styleOpen) + ssrBodyContent.slice(styleClose + 8)\n pos = styleOpen\n }\n ssrBodyContent = ssrBodyContent.trim()\n // Inject the pre-rendered layout+page as light DOM of the app mount element\n // so it is visible before JS boots, then the client router takes over.\n let merged = clientTemplate\n if (merged.includes('<cer-layout-view></cer-layout-view>')) {\n merged = merged.replace('<cer-layout-view></cer-layout-view>',\n '<cer-layout-view>' + ssrBodyContent + '</cer-layout-view>')\n } else if (merged.includes('<div id=\"app\"></div>')) {\n merged = merged.replace('<div id=\"app\"></div>',\n '<div id=\"app\">' + ssrBodyContent + '</div>')\n }\n const headAdditions = headParts.filter(Boolean).join('\\n')\n if (headAdditions) merged = merged.replace('</head>', headAdditions + '\\n</head>')\n return merged\n}\n\n/**\n * Per-request VNode factory \u2014 initializes a fresh router at the request URL,\n * resolves the active layout from the matched route's meta, pre-loads the\n * matched page component (bypassing the async router-view so DSD renders\n * synchronously), calls the route's data loader (if any), and injects the\n * serialized result into the document head as window.__CER_DATA__ for\n * client-side hydration.\n *\n * createStreamingSSRHandler threads the router through each component's SSR\n * context so concurrent renders never share state.\n */\nconst vnodeFactory = async (req) => {\n const router = initRouter({ routes, initialUrl: req.url ?? '/' })\n const current = router.getCurrent()\n const { route, params } = router.matchRoute(current.path)\n const layoutName = route?.meta?.layout ?? 'default'\n const layoutTag = layouts[layoutName]\n\n // Pre-load the page module so we can embed the component tag directly.\n // This avoids the async router-view (which injects content via script tags\n // and breaks Declarative Shadow DOM on initial parse).\n let pageVnode = { tag: 'div', props: {}, children: [] }\n let head\n if (route?.load) {\n try {\n const mod = await route.load()\n const pageTag = mod.default\n if (pageTag) {\n pageVnode = { tag: pageTag, props: { attrs: { ...params } }, children: [] }\n }\n if (typeof mod.loader === 'function') {\n const query = current.query ?? {}\n const data = await mod.loader({ params, query, req })\n if (data !== undefined && data !== null) {\n // Make data available to usePageData() during the SSR render pass.\n // enterWith() scopes the value to the current async context so\n // concurrent renders (SSG concurrency > 1) never share data.\n _cerDataStore.enterWith(data)\n head = `<script>window.__CER_DATA__ = ${JSON.stringify(data)}</script>`\n }\n }\n } catch {\n // Non-fatal: loader errors fall back to an empty page; client will refetch.\n }\n }\n\n const vnode = layoutTag\n ? { tag: layoutTag, props: {}, children: [pageVnode] }\n : pageVnode\n\n return { vnode, router, head }\n}\n\n// Capture the raw SSR handler and wrap it to merge the response with the\n// Vite client template before sending \u2014 this injects the JS/CSS asset bundles\n// so the browser can hydrate and enable client-side routing.\nconst _rawHandler = createSSRHandler(vnodeFactory, {\n render: { dsd: true, dsdPolyfill: false },\n})\n\n/**\n * The main request handler.\n * Compatible with Express, Fastify, and Node's raw http.createServer.\n *\n * Each request is run inside a fresh _cerDataStore.run() context so that\n * concurrent renders (e.g. SSG with concurrency > 1) get isolated stores.\n * vnodeFactory calls _cerDataStore.enterWith(loaderData) from within this\n * context, making the data visible to usePageData() during SSR rendering\n * without any global-state races.\n */\nexport const handler = async (req, res) => {\n if (!_clientTemplate) {\n // No client template \u2014 run handler normally, then inject DSD polyfill.\n let _html = ''\n await _cerDataStore.run(null, async () => {\n await _rawHandler(req, { setHeader: () => {}, end: (body) => { _html = body } })\n })\n // Inject DSD polyfill at end of <body>, outside any custom element light DOM.\n const _final = _html.includes('</body>')\n ? _html.replace('</body>', DSD_POLYFILL_SCRIPT + '</body>')\n : _html + DSD_POLYFILL_SCRIPT\n res.setHeader('Content-Type', 'text/html; charset=utf-8')\n return res.end(_final)\n }\n let _capturedHtml = ''\n // Wrap _rawHandler in an isolated async-local-storage context so that\n // vnodeFactory's enterWith() call is scoped to this request only.\n await _cerDataStore.run(null, async () => {\n // Omit write() to force the non-streaming collect-then-end code path.\n await _rawHandler(req, { setHeader: () => {}, end: (body) => { _capturedHtml = body } })\n })\n let _merged = _mergeWithClientTemplate(_capturedHtml, _clientTemplate)\n // Inject DSD polyfill at end of <body>, outside <cer-layout-view> light DOM.\n _merged = _merged.includes('</body>')\n ? _merged.replace('</body>', DSD_POLYFILL_SCRIPT + '</body>')\n : _merged + DSD_POLYFILL_SCRIPT\n res.setHeader('Content-Type', 'text/html; charset=utf-8')\n res.end(_merged)\n}\n\nexport { apiRoutes, plugins, layouts, routes }\nexport default handler\n";
|
|
9
9
|
//# sourceMappingURL=entry-server-template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entry-server-template.d.ts","sourceRoot":"","sources":["../../src/runtime/entry-server-template.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"entry-server-template.d.ts","sourceRoot":"","sources":["../../src/runtime/entry-server-template.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,q5RA2LjC,CAAA"}
|
|
@@ -57,13 +57,16 @@ function _mergeWithClientTemplate(ssrHtml, clientTemplate) {
|
|
|
57
57
|
? ssrHtml.slice(headStart + headTag.length, headEnd).trim() : ''
|
|
58
58
|
const ssrBody = bodyStart >= 0 && bodyEnd > bodyStart
|
|
59
59
|
? ssrHtml.slice(bodyStart + bodyTag.length, bodyEnd).trim() : ssrHtml
|
|
60
|
-
// Hoist <style
|
|
61
|
-
//
|
|
60
|
+
// Hoist only top-level <style id=...> elements (cer-ssr-jit, cer-ssr-global)
|
|
61
|
+
// from the SSR body into the document <head>. Plain <style> blocks without
|
|
62
|
+
// an id attribute belong to shadow DOM templates and must stay in place —
|
|
63
|
+
// hoisting them to <head> breaks shadow DOM style encapsulation (document
|
|
64
|
+
// styles do not pierce shadow roots), which is the root cause of FOUC.
|
|
62
65
|
const headParts = ssrHead ? [ssrHead] : []
|
|
63
66
|
let ssrBodyContent = ssrBody
|
|
64
67
|
let pos = 0
|
|
65
68
|
while (pos < ssrBodyContent.length) {
|
|
66
|
-
const styleOpen = ssrBodyContent.indexOf('<style', pos)
|
|
69
|
+
const styleOpen = ssrBodyContent.indexOf('<style id=', pos)
|
|
67
70
|
if (styleOpen < 0) break
|
|
68
71
|
const styleClose = ssrBodyContent.indexOf('</style>', styleOpen)
|
|
69
72
|
if (styleClose < 0) break
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"entry-server-template.js","sourceRoot":"","sources":["../../src/runtime/entry-server-template.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG
|
|
1
|
+
{"version":3,"file":"entry-server-template.js","sourceRoot":"","sources":["../../src/runtime/entry-server-template.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LpC,CAAA"}
|
package/package.json
CHANGED
package/src/plugin/build-ssr.ts
CHANGED
|
@@ -69,13 +69,16 @@ function _mergeWithClientTemplate(ssrHtml, clientTemplate) {
|
|
|
69
69
|
? ssrHtml.slice(headStart + headTag.length, headEnd).trim() : ''
|
|
70
70
|
const ssrBody = bodyStart >= 0 && bodyEnd > bodyStart
|
|
71
71
|
? ssrHtml.slice(bodyStart + bodyTag.length, bodyEnd).trim() : ssrHtml
|
|
72
|
-
// Hoist <style
|
|
73
|
-
//
|
|
72
|
+
// Hoist only top-level <style id=...> elements (cer-ssr-jit, cer-ssr-global)
|
|
73
|
+
// from the SSR body into the document <head>. Plain <style> blocks without
|
|
74
|
+
// an id attribute belong to shadow DOM templates and must stay in place —
|
|
75
|
+
// hoisting them to <head> breaks shadow DOM style encapsulation (document
|
|
76
|
+
// styles do not pierce shadow roots), which is the root cause of FOUC.
|
|
74
77
|
const headParts = ssrHead ? [ssrHead] : []
|
|
75
78
|
let ssrBodyContent = ssrBody
|
|
76
79
|
let pos = 0
|
|
77
80
|
while (pos < ssrBodyContent.length) {
|
|
78
|
-
const styleOpen = ssrBodyContent.indexOf('<style', pos)
|
|
81
|
+
const styleOpen = ssrBodyContent.indexOf('<style id=', pos)
|
|
79
82
|
if (styleOpen < 0) break
|
|
80
83
|
const styleClose = ssrBodyContent.indexOf('</style>', styleOpen)
|
|
81
84
|
if (styleClose < 0) break
|
|
@@ -57,13 +57,16 @@ function _mergeWithClientTemplate(ssrHtml, clientTemplate) {
|
|
|
57
57
|
? ssrHtml.slice(headStart + headTag.length, headEnd).trim() : ''
|
|
58
58
|
const ssrBody = bodyStart >= 0 && bodyEnd > bodyStart
|
|
59
59
|
? ssrHtml.slice(bodyStart + bodyTag.length, bodyEnd).trim() : ssrHtml
|
|
60
|
-
// Hoist <style
|
|
61
|
-
//
|
|
60
|
+
// Hoist only top-level <style id=...> elements (cer-ssr-jit, cer-ssr-global)
|
|
61
|
+
// from the SSR body into the document <head>. Plain <style> blocks without
|
|
62
|
+
// an id attribute belong to shadow DOM templates and must stay in place —
|
|
63
|
+
// hoisting them to <head> breaks shadow DOM style encapsulation (document
|
|
64
|
+
// styles do not pierce shadow roots), which is the root cause of FOUC.
|
|
62
65
|
const headParts = ssrHead ? [ssrHead] : []
|
|
63
66
|
let ssrBodyContent = ssrBody
|
|
64
67
|
let pos = 0
|
|
65
68
|
while (pos < ssrBodyContent.length) {
|
|
66
|
-
const styleOpen = ssrBodyContent.indexOf('<style', pos)
|
|
69
|
+
const styleOpen = ssrBodyContent.indexOf('<style id=', pos)
|
|
67
70
|
if (styleOpen < 0) break
|
|
68
71
|
const styleClose = ssrBodyContent.indexOf('</style>', styleOpen)
|
|
69
72
|
if (styleClose < 0) break
|