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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 1035df6 commit ae72260
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 ae72260

Please sign in to comment.