Skip to content

Commit

Permalink
allow proxy files to run in Node.js for ssr (#1352)
Browse files Browse the repository at this point in the history
  • Loading branch information
@FredKSchott
FredKSchott authored Oct 18, 2020
1 parent b9bea30 commit aacb8b4
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 183 deletions.
57 changes: 31 additions & 26 deletions snowpack/src/build/build-import-proxy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,23 +132,25 @@ function generateCssImportProxy({
hmr: boolean;
config: SnowpackConfig;
}) {
const cssImportProxyCode = `${
const cssImportProxyCode = `// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {${
hmr
? `
import.meta.hot.accept();
import.meta.hot.dispose(() => {
document.head.removeChild(styleEl);
});\n`
import.meta.hot.accept();
import.meta.hot.dispose(() => {
document.head.removeChild(styleEl);
});\n`
: ''
}
const code = ${JSON.stringify(code)};
const code = ${JSON.stringify(code)};
const styleEl = document.createElement("style");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
const styleEl = document.createElement("style");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);`;
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}`;
return wrapImportMeta({code: cssImportProxyCode, hmr, env: false, config});
}

Expand All @@ -168,26 +170,29 @@ async function generateCssModuleImportProxy({
const {injectableSource, exportTokens} = await _cssModuleLoader.load(code, url, undefined, () => {
throw new Error('Imports in CSS Modules are not yet supported.');
});
return `${
hmr
? `
import * as __SNOWPACK_HMR_API__ from '${getMetaUrlPath('hmr-client.js', config)}';
import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
import.meta.hot.dispose(() => {
document.head.removeChild(styleEl);
});\n`
: ``
}
return `
export let code = ${JSON.stringify(injectableSource)};
let json = ${JSON.stringify(exportTokens)};
export default json;
const styleEl = document.createElement("style");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {${
hmr
? `
import * as __SNOWPACK_HMR_API__ from '${getMetaUrlPath('hmr-client.js', config)}';
import.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);
import.meta.hot.dispose(() => {
document.head.removeChild(styleEl);
});\n`
: ``
}
const styleEl = document.createElement("style");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);`;
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}`;
}

function generateDefaultImportProxy(url: string) {
Expand Down
16 changes: 9 additions & 7 deletions test/build/package-bootstrap/__snapshots__
View file

Large diffs are not rendered by default.

16 changes: 9 additions & 7 deletions test/build/package-tippy-js/__snapshots__
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1370,13 +1370,15 @@ export default tippy;"
exports[`snowpack build package-tippy-js: build/web_modules/tippyjs/dist/tippy.css 1`] = `".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\\"\\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}"`;

exports[`snowpack build package-tippy-js: build/web_modules/tippyjs/dist/tippy.css.proxy.js 1`] = `
"
const code = \\".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\\\\\\"\\\\\\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);"
"// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {
const code = \\".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\\\\\\"\\\\\\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}"
`;

exports[`snowpack build package-tippy-js: build/web_modules/tippyjs/headless/dist/tippy-headless.esm.js 1`] = `
Expand Down
16 changes: 9 additions & 7 deletions test/build/plugin-optimize/__snapshots__
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,13 @@ exports[`snowpack build plugin-optimize: build/_dist_/styles.css 1`] = `
`;

exports[`snowpack build plugin-optimize: build/_dist_/styles.css.proxy.js 1`] = `
"
const code = \\"body { font-family: fantasy;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);"
"// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {
const code = \\"body { font-family: fantasy;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}"
`;
48 changes: 27 additions & 21 deletions test/build/resolve-imports/__snapshots__
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,15 @@ exports[`snowpack build resolve-imports: build/_dist_/components/style.css 1`] =
`;

exports[`snowpack build resolve-imports: build/_dist_/components/style.css.proxy.js 1`] = `
"
const code = \\"/* Include 2+ imports to make sure regex isn't borked. */@import \\\\\\"../../TEST_WMU/css-package-a/style.css\\\\\\";@import \\\\\\"../../TEST_WMU/@css/package-b/style.css\\\\\\";\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);"
"// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {
const code = \\"/* Include 2+ imports to make sure regex isn't borked. */@import \\\\\\"../../TEST_WMU/css-package-a/style.css\\\\\\";@import \\\\\\"../../TEST_WMU/@css/package-b/style.css\\\\\\";\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}"
`;

exports[`snowpack build resolve-imports: build/_dist_/index.html 1`] = `
Expand Down Expand Up @@ -163,13 +165,15 @@ exports[`snowpack build resolve-imports: build/TEST_WMU/@css/package-b/style.css
`;

exports[`snowpack build resolve-imports: build/TEST_WMU/@css/package-b/style.css.proxy.js 1`] = `
"
const code = \\"body { color: blue;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);"
"// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {
const code = \\"body { color: blue;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}"
`;

exports[`snowpack build resolve-imports: build/TEST_WMU/@fortawesome/fontawesome-free/svgs/solid/ad.svg.proxy.js 1`] = `"export default \\"/TEST_WMU/@fortawesome/fontawesome-free/svgs/solid/ad.svg\\";"`;
Expand Down Expand Up @@ -207,13 +211,15 @@ exports[`snowpack build resolve-imports: build/TEST_WMU/css-package-a/style.css
`;

exports[`snowpack build resolve-imports: build/TEST_WMU/css-package-a/style.css.proxy.js 1`] = `
"
const code = \\"body { color: red;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);"
"// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {
const code = \\"body { color: red;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}"
`;

exports[`snowpack build resolve-imports: build/TEST_WMU/import-map.json 1`] = `
Expand Down
16 changes: 9 additions & 7 deletions test/build/resource-proxy/__snapshots__
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,13 @@ exports[`snowpack build resource-proxy: build/_dist_/styles.css 1`] = `
`;

exports[`snowpack build resource-proxy: build/_dist_/styles.css.proxy.js 1`] = `
"
const code = \\"body { font-family: fantasy;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);"
"// [snowpack] add styles to the page (skip if no document exists)
if (typeof document !== 'undefined') {
const code = \\"body { font-family: fantasy;}\\";
const styleEl = document.createElement(\\"style\\");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
}"
`;
Loading

1 comment on commit aacb8b4

@vercel
Copy link

@vercel vercel bot commented on aacb8b4 Oct 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.