Add global.client.js and global.css to injected scripts and styles

bcomnes · Sep 2, 2021 · 061459d · 061459d
1 parent 1d0605b
commit 061459d
Show file tree

Hide file tree

Showing 31 changed files with 118 additions and 22 deletions.
diff --git a/lib/build-css/index.js b/lib/build-css/index.js
@@ -4,6 +4,7 @@ import postcss from 'postcss'
 import autoprefixer from 'autoprefixer'
 import postcssImport from 'postcss-import'
 import postcssUrl from 'postcss-url'
+import postcssNesting from 'postcss-nesting'
 
 /**
  * Build all of the CSS for every page and global CSS
@@ -30,6 +31,7 @@ export async function buildCss (src, dest, siteData) {
         useHash: true,
         assetsPath: 'assets'
       }),
+      postcssNesting,
       autoprefixer
     ]).process(css, { from: style.relname, to: targetPath })
     await writeFile(targetPath, result.css)

diff --git a/lib/build-js/index.js b/lib/build-js/index.js
@@ -10,6 +10,7 @@ import esbuild from 'esbuild'
  */
 export async function buildJs (src, dest, siteData) {
   const entryPoints = []
+  if (siteData.globalClient) entryPoints.push(join(src, siteData.globalClient.relname))
 
   for (const page of siteData.pages) {
     if (page.clientBundle) entryPoints.push(join(src, page.clientBundle.relname))
@@ -21,6 +22,7 @@ export async function buildJs (src, dest, siteData) {
     write: true,
     format: 'esm',
     splitting: true,
+    sourcemap: 'both',
     outdir: dest,
     target: [
       'es2020'

diff --git a/lib/build-pages/index.js b/lib/build-pages/index.js
@@ -27,6 +27,9 @@ export async function buildPages (src, dest, siteData) {
     // This should never happen
     if (!builder) throw new Error(`Can't build ${page.path}. unimplemented type ${page.type}`)
 
+    globalVars.styles = siteData.globalStyle ? ['/global.css'] : []
+    globalVars.scripts = siteData.globalClient ? ['/global.client.js'] : []
+
     const result = await builder({ src, dest, page, globalVars, rootLayout })
     results.push(result)
   }

diff --git a/lib/build-pages/page-builders/create-page-builder.js b/lib/build-pages/page-builders/create-page-builder.js
@@ -2,7 +2,6 @@ import { join } from 'node:path'
 import pretty from 'pretty'
 import { writeFile, mkdir } from 'node:fs/promises'
 
-import { fsPathToUrlPath } from './fs-path-to-url.js'
 import { resolveVars } from '../resolve-vars.js'
 
 export function createPageBuilder (builder) {
@@ -24,8 +23,8 @@ export function createPageBuilder (builder) {
 
     const finalVars = Object.assign({}, globalVars, pageVars, vars)
 
-    if (page.pageStyle) finalVars.styles = [fsPathToUrlPath(join(page.path, 'style.css'))]
-    if (page.clientBundle) finalVars.scripts = [fsPathToUrlPath(join(page.path, 'client.js'))]
+    if (page.pageStyle) finalVars.styles.push('./style.css')
+    if (page.clientBundle) finalVars.scripts.push('./client.js')
 
     const output = await pageLayout(finalVars)
 

diff --git a/lib/identify-pages.js b/lib/identify-pages.js
@@ -104,6 +104,7 @@ export async function identifyPages (src, pageBuilders) {
 
   const results = {
     globalStyle: rootFiles['global.css'],
+    globalClient: rootFiles['global.client.js'],
     globalVars: rootFiles['global.vars.js'],
     rootLayout: rootFiles['root.layout.js'],
     pages,

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
     "postcss-url": "^10.1.3",
+    "postcss-nesting": "^8.0.1",
     "pretty": "^2.0.0",
     "streamx": "^2.10.3",
     "uhtml-ssr": "^0.7.4",

diff --git a/test-project/public/a-page/client.js b/test-project/public/a-page/client.js
@@ -1,7 +1,7 @@
 import {
   foo
-} from "../chunk-OWLKZ7N7.js";
-import "../chunk-OFR2H3GI.js";
+} from "../chunk-WZ7JV6GS.js";
+import "../chunk-HC4Q5QIB.js";
 
 // test-project/src/a-page/client.js
 console.log("a-page client bundle");

diff --git a/test-project/public/a-page/client.js.map b/test-project/public/a-page/client.js.map
diff --git a/test-project/public/a-page/index.html b/test-project/public/a-page/index.html
@@ -5,9 +5,9 @@
     <meta charset="utf-8">
     <title></title>
     <meta name="viewport" content="width=device-width, user-scalable=no" />
-    <script src="/a-page/client.js" type='module'></script>
-    <link rel="stylesheet" href="/a-page/style.css" />
+    <script src="./client.js" type='module'></script>
     <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="./style.css" />
   </head>
 
   <body>

diff --git a/test-project/public/a-page/nested-page/client.js b/test-project/public/a-page/nested-page/client.js
@@ -1,7 +1,7 @@
 import {
   a_lib_exports
-} from "../../chunk-OWLKZ7N7.js";
-import "../../chunk-OFR2H3GI.js";
+} from "../../chunk-WZ7JV6GS.js";
+import "../../chunk-HC4Q5QIB.js";
 
 // test-project/src/a-page/nested-page/client.js
 console.log(a_lib_exports);

diff --git a/test-project/public/a-page/nested-page/client.js.map b/test-project/public/a-page/nested-page/client.js.map
diff --git a/test-project/public/a-page/nested-page/index.html b/test-project/public/a-page/nested-page/index.html
@@ -5,9 +5,9 @@
     <meta charset="utf-8">
     <title></title>
     <meta name="viewport" content="width=device-width, user-scalable=no" />
-    <script src="/a-page/nested-page/client.js" type='module'></script>
-    <link rel="stylesheet" href="/a-page/nested-page/style.css" />
+    <script src="./client.js" type='module'></script>
     <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="./style.css" />
   </head>
 
   <body>

diff --git a/test-project/public/chunk-HC4Q5QIB.js b/test-project/public/chunk-HC4Q5QIB.js
@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
diff --git a/test-project/public/chunk-HC4Q5QIB.js.map b/test-project/public/chunk-HC4Q5QIB.js.map
diff --git a/test-project/public/chunk-WZ7JV6GS.js b/test-project/public/chunk-WZ7JV6GS.js
@@ -0,0 +1,15 @@
+import {
+  __export
+} from "./chunk-HC4Q5QIB.js";
+
+// test-project/src/a-page/libs/a-lib.js
+var a_lib_exports = {};
+__export(a_lib_exports, {
+  foo: () => foo
+});
+var foo = { some: "data" };
+
+export {
+  foo,
+  a_lib_exports
+};
diff --git a/test-project/public/chunk-WZ7JV6GS.js.map b/test-project/public/chunk-WZ7JV6GS.js.map
diff --git a/test-project/public/client.js b/test-project/public/client.js
@@ -1,4 +1,4 @@
-import "./chunk-OFR2H3GI.js";
+import "./chunk-HC4Q5QIB.js";
 
 // test-project/src/client.js
 console.log("hello world root client bundle");
diff --git a/test-project/public/client.js.map b/test-project/public/client.js.map
diff --git a/test-project/public/global.client.js b/test-project/public/global.client.js
@@ -0,0 +1,4 @@
+import "./chunk-HC4Q5QIB.js";
+
+// test-project/src/global.client.js
+console.log("Hello I run on every page!");
diff --git a/test-project/public/global.client.js.map b/test-project/public/global.client.js.map
diff --git a/test-project/public/global.css b/test-project/public/global.css
diff --git a/test-project/public/global.css.map b/test-project/public/global.css.map
diff --git a/test-project/public/html-page/client.js b/test-project/public/html-page/client.js
@@ -1,4 +1,4 @@
-import "../chunk-OFR2H3GI.js";
+import "../chunk-HC4Q5QIB.js";
 
 // test-project/src/html-page/client.js
 console.log("html page client bundle");
diff --git a/test-project/public/html-page/client.js.map b/test-project/public/html-page/client.js.map
diff --git a/test-project/public/html-page/index.html b/test-project/public/html-page/index.html
@@ -5,9 +5,9 @@
     <meta charset="utf-8">
     <title></title>
     <meta name="viewport" content="width=device-width, user-scalable=no" />
-    <script src="/html-page/client.js" type='module'></script>
-    <link rel="stylesheet" href="/html-page/style.css" />
+    <script src="./client.js" type='module'></script>
     <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="./style.css" />
   </head>
 
   <body>

diff --git a/test-project/public/index.html b/test-project/public/index.html
@@ -5,9 +5,9 @@
     <meta charset="utf-8">
     <title></title>
     <meta name="viewport" content="width=device-width, user-scalable=no" />
-    <script src="/client.js" type='module'></script>
-    <link rel="stylesheet" href="/style.css" />
+    <script src="./client.js" type='module'></script>
     <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="./style.css" />
   </head>
 
   <body>

diff --git a/test-project/public/md-page/client.js b/test-project/public/md-page/client.js
@@ -1,4 +1,4 @@
-import "../chunk-OFR2H3GI.js";
+import "../chunk-HC4Q5QIB.js";
 
 // test-project/src/md-page/client.js
 console.log("markdown client bundle");
diff --git a/test-project/public/md-page/client.js.map b/test-project/public/md-page/client.js.map
diff --git a/test-project/public/md-page/index.html b/test-project/public/md-page/index.html
@@ -5,9 +5,9 @@
     <meta charset="utf-8">
     <title></title>
     <meta name="viewport" content="width=device-width, user-scalable=no" />
-    <script src="/md-page/client.js" type='module'></script>
-    <link rel="stylesheet" href="/md-page/style.css" />
+    <script src="./client.js" type='module'></script>
     <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="./style.css" />
   </head>
 
   <body>

diff --git a/test-project/src/global.client.js b/test-project/src/global.client.js
@@ -0,0 +1 @@
+console.log('Hello I run on every page!')
diff --git a/test-project/src/root.layout.js b/test-project/src/root.layout.js
@@ -19,7 +19,6 @@ export default async function RootLayout ({
       ${styles
         ? styles.map(style => html`<link rel="stylesheet" href=${style} />`)
         : null}
-      <link rel="stylesheet" href="/global.css" />
     </head>
     <body>
       ${typeof children === 'string' ? html([children]) : children /* Support both uhtml and string children. Optional. */}