feat!: standalone layouts

examples/layouts/src/pages/2/sub/layout.ts

@@ -0,0 +1,2 @@
+// First layout will not work
+console.log("Hello!")

src/boilerplate/html.ts

@@ -1,51 +1,21 @@
 import { minify } from "html-minifier-terser";
 import type { Config } from "../types";
 import fs from "fs";
-import glob from "tiny-glob";
 import { resolve } from "../utils/resolve";
+import { getLayoutByType } from "../utils/layouts";
 import { fixPath } from "../utils/path";
 
 export const html = async (
   body: string,
+  file: string,
   config?: Config,
   layout?: string,
   dev?: boolean
 ) => {
   let code = "";
 
   if (layout && fs.existsSync(layout) && typeof layout === "string") {
-    const customHtml = fs.readFileSync(layout, "utf-8");
-
-    const cssPath = await glob(
-      layout.replace(".html", ".{css,scss,sass,less}"),
-      {
-        filesOnly: true,
-      }
-    );
-
-    const scriptPath = await glob(layout.replace(".html", ".{ts,js}"), {
-      filesOnly: true,
-    });
-
-    if (cssPath.length > 1 || scriptPath.length > 1) {
-      throw new Error("Multiple CSS or script files found for the layout.");
-    }
-
-    code = customHtml;
-
-    if (cssPath[0] && fs.existsSync(cssPath[0])) {
-      code = customHtml.replace(
-        "</head>",
-        `<script type="module">import "${!dev ? resolve(cssPath[0]) : fixPath(resolve(cssPath[0]), config?.directory || "src/pages")}";</script></head>`
-      );
-    }
-
-    if (scriptPath[0] && fs.existsSync(scriptPath[0])) {
-      code = code.replace(
-        "</body>",
-        `<script type="module" src="${!dev ? resolve(scriptPath[0]) : fixPath(resolve(scriptPath[0]), config?.directory || "src/pages")}"></script></body>`
-      );
-    }
+    code = fs.readFileSync(layout, "utf-8");
 
     code = code.replace("<slot />", body);
   } else if (fs.existsSync(resolve("index.html"))) {
@@ -78,6 +48,23 @@ export const html = async (
       </html>`;
   }
 
+  const cssPath = await getLayoutByType(file, "{css,scss,sass,less}");
+  const scriptPath = await getLayoutByType(file, "{ts,js}");
+
+  if (cssPath) {
+    code = code.replace(
+      "</head>",
+      `<script type="module">import "${!dev ? resolve(cssPath) : fixPath(resolve(cssPath), config?.directory || "src/pages")}";</script></head>`
+    )
+  }
+
+  if (scriptPath) {
+    code = code.replace(
+      "</body>",
+      `<script type="module">import "${!dev ? resolve(scriptPath) : fixPath(resolve(scriptPath), config?.directory || "src/pages")}";</script></body>`
+    )
+  }
+
   const result = await minify(code, {
     collapseWhitespace: config?.minify?.collapseWhitespace || true,
     removeComments: config?.minify?.removeComments || true,

src/boilerplate/index.ts

@@ -25,6 +25,7 @@ export const generateBoilerplate = async (options: BoilerplateOptions) => {
     case "svelte":
       return await html(
         svelte(file, css, scripts, dev, config.directory || "src/pages"),
+        file,
         config,
         layout,
         dev
@@ -34,34 +35,39 @@ export const generateBoilerplate = async (options: BoilerplateOptions) => {
 
       return await html(
         vue(file, css, scripts, dev, config.directory || "src/pages", init),
+        file,
         config,
         layout,
         dev
       );
     case "react":
       return await html(
         react(file, css, scripts, dev, config.directory || "src/pages"),
+        file,
         config,
         layout,
         dev
       );
     case "solid":
       return await html(
         solid(file, css, scripts, dev, config.directory || "src/pages"),
+        file,
         config,
         layout,
         dev
       );
     case "md":
       return await html(
         markdown(file, css, scripts, dev, config.directory || "src/pages"),
+        file,
         config,
         layout,
         dev
       );
     case "html":
       return await html(
         vanilla(file, css, scripts, dev, config.directory || "src/pages"),
+        file,
         config,
         layout,
         dev

src/utils/layouts.ts

@@ -2,8 +2,8 @@ import glob from "tiny-glob";
 import { dirname } from "path";
 import { resolve } from "./resolve";
 
-export const getLayout = async (id: string): Promise<string> => {
-  const layouts = await glob("../**/layout.html", {
+export const getLayoutByType = async (id: string, type: string): Promise<string> => {
+  const layouts = await glob(`../**/layout.${type}`, {
     cwd: dirname(id),
     filesOnly: true,
   });
@@ -23,3 +23,7 @@ export const getLayout = async (id: string): Promise<string> => {
 
   return resolve(dirname(id), layout);
 };
+
+export const getLayout = async (id: string): Promise<string> => {
+  return await getLayoutByType(id, "html");
+};