Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
patch support for hydration and import map script slotting
Browse files Browse the repository at this point in the history
thescientist13 committed Oct 25, 2024
1 parent 5f227ad commit b0b2346
Showing 3 changed files with 745 additions and 15 deletions.
698 changes: 684 additions & 14 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -24,7 +24,8 @@
"dev": "greenwood develop",
"build": "greenwood build",
"serve": "npm run clean && greenwood build && greenwood serve",
"start": "npm run serve"
"start": "npm run serve",
"postinstall": "patch-package"
},
"dependencies": {
"lit": "^3.1.0"
@@ -33,6 +34,7 @@
"@greenwood/cli": "~0.30.0-alpha.7",
"@greenwood/plugin-adapter-vercel": "~0.30.0-alpha.7",
"@greenwood/plugin-renderer-lit": "~0.30.0-alpha.7",
"patch-package": "^8.0.0",
"rimraf": "^5.0.0"
}
}
58 changes: 58 additions & 0 deletions patches/@greenwood+plugin-renderer-lit+0.30.0-alpha.7.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
diff --git a/node_modules/@greenwood/plugin-renderer-lit/src/index.js b/node_modules/@greenwood/plugin-renderer-lit/src/index.js
index ca77f42..ac7454e 100755
--- a/node_modules/@greenwood/plugin-renderer-lit/src/index.js
+++ b/node_modules/@greenwood/plugin-renderer-lit/src/index.js
@@ -14,16 +14,48 @@ class LitHydrationResource extends ResourceInterface {

async intercept(url, request, response) {
const { importMaps } = this.compilation.config.polyfills;
- const importMapType = process.env.__GWD_COMMAND__ === 'develop' && importMaps // eslint-disable-line no-underscore-dangle
+ const isDevelopment = process.env.__GWD_COMMAND__ === 'develop'; // eslint-disable-line no-underscore-dangle
+ const importType = isDevelopment && importMaps
? 'module-shim'
: 'module';
+ const importMapType = isDevelopment && importMaps
+ ? 'importmap-shim'
+ : 'importmap';
+ const headSelector = isDevelopment ? `<script type="${importMapType}">` : '<head>';
+ const hydrationSupportScriptPath = '/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js';
let body = await response.text();

// this needs to come first before any userland code
- body = body.replace('<head>', `
- <head>
- <script type="${importMapType}" src="/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js"></script>
- `);
+ // but before any import maps
+ if(isDevelopment) {
+ // quick way to find the ending position of the importmap <script> tag
+ // and append the hydration support <script> right after it
+ const scriptEndPattern = /<\/script>/g;
+ const importMapStartPos = body.indexOf(headSelector) ?? '';
+ let importMapEndPos = 0;
+ let match;
+
+ while ((match = scriptEndPattern.exec(body)) !== null) {
+ const position = match.index;
+ if (position > importMapStartPos) {
+ importMapEndPos = position;
+ break;
+ }
+
+ }
+
+ body = `
+ ${body.slice(0, importMapEndPos)}
+ </script>
+ <script type="${importType}" src="${hydrationSupportScriptPath}"></script>
+ ${body.slice(importMapEndPos + 9)}
+ `;
+ } else {
+ body = body.replace(headSelector, `
+ ${headSelector}
+ <script type="${importType}" src="${hydrationSupportScriptPath}"></script>
+ `);
+ }

return new Response(body);
}

0 comments on commit b0b2346

Please sign in to comment.