experimental support for customizing html attributes (#680)

and includes a small refactor in rscIndex plugin.
dai-shi · Apr 28, 2024 · 738ea78 · 738ea78
1 parent 61c0a53
commit 738ea78
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 37 deletions.
diff --git a/packages/waku/src/config.ts b/packages/waku/src/config.ts
@@ -36,11 +36,6 @@ export interface Config {
    * Defaults to "ssr".
    */
   ssrDir?: string;
-  /**
-   * The index.html file for any directories.
-   * Defaults to "index.html".
-   */
-  indexHtml?: string;
   /**
    * The client main file relative to srcDir.
    * The extension should be `.js`,
@@ -78,6 +73,13 @@ export interface Config {
    * Defaults to "RSC".
    */
   rscPath?: string;
+  /**
+   * HTML attributes to inject.
+   * Defaults to ''
+   * An example is 'lang="en"'
+   * This is still experimental and might be changed in the future.
+   */
+  htmlAttrs?: string;
   /**
    * HTML headers to inject.
    * Defaults to:

diff --git a/packages/waku/src/lib/builder/build.ts b/packages/waku/src/lib/builder/build.ts
@@ -490,7 +490,7 @@ const emitHtmlFiles = async (
     rootDir,
     config.distDir,
     config.publicDir,
-    config.indexHtml,
+    'index.html',
   );
   const publicIndexHtml = await readFile(publicIndexHtmlFile, {
     encoding: 'utf8',
@@ -553,7 +553,7 @@ const emitHtmlFiles = async (
             ? pathname
             : pathname === '/404'
               ? '404.html' // HACK special treatment for 404, better way?
-              : pathname + '/' + config.indexHtml,
+              : pathname + '/index.html',
         );
         const htmlReadable = await renderHtml({
           config,

diff --git a/packages/waku/src/lib/config.ts b/packages/waku/src/lib/config.ts
@@ -35,13 +35,13 @@ export async function resolveConfig(config: Config) {
     publicDir: 'public',
     assetsDir: 'assets',
     ssrDir: 'ssr',
-    indexHtml: 'index.html',
     mainJs: 'main.js',
     entriesJs: 'entries.js',
     preserveModuleDirs: ['pages', 'templates', 'routes', 'components'],
     privateDir: 'private',
     serveJs: 'serve.js',
     rscPath: 'RSC',
+    htmlAttrs: '',
     htmlHead: DEFAULT_HTML_HEAD,
     middleware: DEFAULT_MIDDLEWARE,
     ...config,

diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-index.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-index.ts
@@ -6,13 +6,14 @@ export function rscIndexPlugin(opts: {
   basePath: string;
   srcDir: string;
   mainJs: string;
+  htmlAttrs: string;
   htmlHead: string;
-  indexHtml: string;
   cssAssets?: string[];
 }): Plugin {
+  const indexHtml = 'index.html';
   const html = `
 <!doctype html>
-<html>
+<html${opts.htmlAttrs ? ' ' + opts.htmlAttrs : ''}>
   <head>
 ${opts.htmlHead}
   </head>
@@ -23,24 +24,6 @@ ${opts.htmlHead}
 `;
   return {
     name: 'rsc-index-plugin',
-    configureServer(server) {
-      return () => {
-        server.middlewares.use((req, res) => {
-          server
-            .transformIndexHtml(req.url || '', html)
-            .then((content) => {
-              res.statusCode = 200;
-              res.setHeader('content-type', 'text/html; charset=utf-8');
-              res.end(content);
-            })
-            .catch((err) => {
-              console.error('Error transforming index.html', err);
-              res.statusCode = 500;
-              res.end('Internal Server Error');
-            });
-        });
-      };
-    },
     config() {
       return {
         optimizeDeps: {
@@ -58,18 +41,36 @@ ${opts.htmlHead}
       return {
         ...options,
         input: {
-          indexHtml: opts.indexHtml,
+          indexHtml,
           ...options.input,
         },
       };
     },
+    configureServer(server) {
+      return () => {
+        server.middlewares.use((req, res) => {
+          server
+            .transformIndexHtml(req.url || '', html)
+            .then((content) => {
+              res.statusCode = 200;
+              res.setHeader('content-type', 'text/html; charset=utf-8');
+              res.end(content);
+            })
+            .catch((err) => {
+              console.error('Error transforming index.html', err);
+              res.statusCode = 500;
+              res.end('Internal Server Error');
+            });
+        });
+      };
+    },
     resolveId(id) {
-      if (id === opts.indexHtml) {
-        return { id: opts.indexHtml, moduleSideEffects: true };
+      if (id === indexHtml) {
+        return { id: indexHtml, moduleSideEffects: true };
       }
     },
     load(id) {
-      if (id === opts.indexHtml) {
+      if (id === indexHtml) {
         return html;
       }
     },

diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-serve.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-serve.ts
@@ -4,7 +4,6 @@ export function rscServePlugin(opts: {
   serveJs: string;
   distDir: string;
   publicDir: string;
-  indexHtml: string;
   entriesFile: string;
   srcServeFile: string;
   serve:
@@ -29,9 +28,6 @@ export function rscServePlugin(opts: {
         'import.meta.env.WAKU_CONFIG_PUBLIC_DIR': JSON.stringify(
           opts.publicDir,
         ),
-        'import.meta.env.WAKU_CONFIG_INDEX_HTML': JSON.stringify(
-          opts.indexHtml,
-        ),
       };
       if (opts.serve === 'cloudflare' || opts.serve === 'partykit') {
         viteConfig.build ||= {};

diff --git a/packages/waku/src/lib/renderers/html-renderer.ts b/packages/waku/src/lib/renderers/html-renderer.ts
@@ -155,14 +155,27 @@ const rectifyHtml = () => {
   });
 };
 
+const parseHtmlAttrs = (attrs: string): Record<string, string> => {
+  // HACK this is very brittle
+  const result: Record<string, string> = {};
+  const kebab2camel = (s: string) =>
+    s.replace(/-./g, (m) => m[1]!.toUpperCase());
+  const matches = attrs.matchAll(/(?<=^|\s)([^\s=]+)="([^"]+)"(?=\s|$)/g);
+  for (const match of matches) {
+    result[kebab2camel(match[1]!)] = match[2]!;
+  }
+  return result;
+};
+
 const buildHtml = (
   createElement: typeof createElementType,
+  attrs: string,
   head: string,
   body: ReactNode,
 ) =>
   createElement(
     'html',
-    null,
+    attrs ? parseHtmlAttrs(attrs) : null,
     createElement('head', { dangerouslySetInnerHTML: { __html: head } }),
     createElement('body', { 'data-hydrate': true }, body),
   );
@@ -334,6 +347,7 @@ export const renderHtml = async (
     await renderToReadableStream(
       buildHtml(
         createElement,
+        config.htmlAttrs,
         htmlHead,
         createElement(
           ServerRoot as FunctionComponent<