evikit 2.14.0 → 2.14.2

package/README.md

@@ -335,7 +335,7 @@ PORT=8000
 Run it:
 
 ```sh
-npx cross-env NODE_ENV=production node --env-file=.env index.js
+npx cross-env NODE_ENV=production node --env-file-if-exists=.env index.js
 ```
 
 You can add this command (without npx) as `start` script to your `package.json`.
@@ -1028,7 +1028,7 @@ Component:
 - btn btn-ghost btn-disabled
 - fieldset fieldset-legend label input
 - link
-- lg:table table-zebra
+- table lg:table table-zebra
 
 Color:
 
@@ -1149,11 +1149,11 @@ The following commands should work now:
 
 ```sh
 # Run dev server with watch mode.
-node --env-file=.env index.js dev
+node --env-file-if-exists=.env index.js dev
 
 # Build client for production.
 npx tsc
-node --env-file=.env index.js build
+node --env-file-if-exists=.env index.js build
 ```
 
 You can change the `dev` and `build` scripts in your `package.json` accordingly.

package/index.css

@@ -30,6 +30,117 @@ summary {
   list-style: revert;
 }
 
+/* Component. */
+
+.badge {
+  border-radius: 0.5rem;
+  display: inline-flex;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  padding: 0.0625rem 0.75rem;
+}
+
+.badge-info {
+  background-color: color-mix(in srgb, darkturquoise 6.25%, transparent);
+}
+
+.btn {
+  background-color: rgba(0, 0, 0, 0.03125);
+  border: 1px solid rgba(0, 0, 0, 0.0625);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+}
+
+.btn:focus,
+.btn:hover {
+  background-color: rgba(0, 0, 0, 0.125);
+}
+
+.btn-ghost:not(:focus):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.btn-disabled {
+  background-color: rgba(0, 0, 0, 0.03125);
+  border-color: rgba(0, 0, 0, 0.03125);
+}
+
+.fieldset {
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-top: 0.25rem;
+}
+
+.fieldset-legend {
+  font-size: 0.75rem;
+  font-weight: bold;
+}
+
+.label {
+  display: table;
+  font-size: 0.75rem;
+}
+
+.input {
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  max-width: 100%;
+  padding: 0.5rem 0.75rem;
+  width: 20rem;
+}
+
+.link {
+  text-decoration: underline;
+}
+
+.table,
+.lg\:table {
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  width: 100%;
+}
+
+.table {
+  display: table;
+}
+
+@media (min-width: 992px) {
+  .lg\:table {
+    display: table;
+  }
+}
+
+.table thead th,
+.lg\:table thead th {
+  font-weight: 700;
+  opacity: 0.5;
+}
+
+.table tr > *,
+.lg\:table tr > * {
+  padding: 0.75rem;
+}
+
+.table-zebra tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.025);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+}
+
+@media (prefers-color-scheme: dark) {
+  .table-zebra tr:nth-child(even) {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+}
+
 /* Margin. */
 
 .m-8 {
@@ -406,7 +517,7 @@ summary {
 }
 
 .row-span-2 {
-  grid-row: 2;
+  grid-row: span 2;
 }
 
 .text-center {
@@ -479,109 +590,6 @@ summary {
   }
 }
 
-/* Component. */
-
-.badge {
-  border-radius: 0.5rem;
-  display: inline-flex;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  padding: 0.0625rem 0.75rem;
-}
-
-.badge-info {
-  background-color: color-mix(in srgb, darkturquoise 6.25%, transparent);
-}
-
-.btn {
-  background-color: rgba(0, 0, 0, 0.03125);
-  border: 1px solid rgba(0, 0, 0, 0.0625);
-  border-radius: 0.25rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 600;
-  padding: 0.5rem 1rem;
-}
-
-.btn:focus,
-.btn:hover {
-  background-color: rgba(0, 0, 0, 0.125);
-}
-
-.btn-ghost:not(:focus):not(:hover) {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.btn-disabled {
-  background-color: rgba(0, 0, 0, 0.03125);
-  border-color: rgba(0, 0, 0, 0.03125);
-}
-
-.fieldset {
-  border: none;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-top: 0.25rem;
-}
-
-.fieldset-legend {
-  font-size: 0.75rem;
-  font-weight: bold;
-}
-
-.label {
-  display: table;
-  font-size: 0.75rem;
-}
-
-.input {
-  border: 1px solid rgba(0, 0, 0, 0.25);
-  border-radius: 0.25rem;
-  font-size: 0.875rem;
-  max-width: 100%;
-  padding: 0.5rem 0.75rem;
-  width: 20rem;
-}
-
-.link {
-  text-decoration: underline;
-}
-
-.lg\:table {
-  border-collapse: collapse;
-  font-size: 0.875rem;
-  width: 100%;
-}
-
-@media (min-width: 992px) {
-  .lg\:table {
-    display: table;
-  }
-}
-
-.lg\:table thead th {
-  font-weight: 700;
-  opacity: 0.5;
-}
-
-.lg\:table tr > * {
-  padding: 0.75rem;
-}
-
-.table-zebra tr:nth-child(even) {
-  background-color: rgba(0, 0, 0, 0.025);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-}
-
-@media (prefers-color-scheme: dark) {
-  .table-zebra tr:nth-child(even) {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
-}
-
 /* Color. */
 
 .opacity-0 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "evikit",
   "description": "Preact/SQLite SSR framework for small web apps",
-  "version": "2.14.0",
+  "version": "2.14.2",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/server.js

@@ -213,8 +213,6 @@ let esbuild = false;
 /** @param {{ listen: (port: number, callback: () => void) => { close(): void, on(event: "error", callback: (error: unknown) => void ): void } }} app */
 export async function listen(app) {
   if (esbuild && cluster.isPrimary) {
-    let esbuildPort = 0;
-
     async function makeHtml() {
       await writeFile(
         "./dist/index.html",
@@ -228,10 +226,22 @@ export async function listen(app) {
             '<script src="/src/prerender.js?' +
               (await sha256("./dist/src/prerender.js")) +
               '"></script>' +
-              (esbuildPort
-                ? '<script>new EventSource("http://localhost:' +
-                  esbuildPort +
-                  '/esbuild").addEventListener("change", () => location.reload());</script>'
+              (process.argv[2] == "dev"
+                ? `<script>
+                  (async () => {
+                    let nav;
+                    addEventListener("beforeunload", () => {
+                      nav = true;
+                    });
+                    try {
+                      await (await fetch("/never-end")).text();
+                    } catch (error) {
+                      if (!nav) {
+                        location.reload();
+                      }
+                    }
+                  })();
+                </script>`
                 : ""),
           ),
       );
@@ -251,7 +261,7 @@ export async function listen(app) {
       return;
     }
 
-    if (process.argv[2] == "dev" && cluster.isPrimary) {
+    if (process.argv[2] == "dev") {
       const { context } = await import("esbuild");
 
       const { watch: watchApi } = await context({
@@ -263,26 +273,19 @@ export async function listen(app) {
       });
       await watchApi();
 
-      const { serve: servePrerender, watch: watchPrerender } = await context({
+      const { watch: watchPrerender } = await context({
         bundle: true,
         entryPoints: ["./index.css", "./src/prerender.js"],
         outdir: "./dist",
       });
       await watchPrerender();
-      ({ port: esbuildPort } = await servePrerender({
-        cors: {
-          origin:
-            process.env["ORIGIN"] ||
-            `http://localhost:${Number(process.env["PORT"]) || 5173}`,
-        },
-      }));
 
-      let subprocess = cluster.fork();
       let lastHash =
         (await sha256("./dist/api.js")) +
         (await sha256("./dist/index.css")) +
         (await sha256("./dist/src/prerender.js"));
       await makeHtml();
+      let subprocess = cluster.fork();
       setInterval(async () => {
         const hash =
           (await sha256("./dist/api.js")) +
@@ -294,7 +297,7 @@ export async function listen(app) {
           subprocess.kill();
           subprocess = cluster.fork();
         }
-      }, 1000);
+      }, 100);
     }
 
     await makeHtml();
@@ -321,7 +324,11 @@ export async function listen(app) {
         }
       });
     }
-  } else if ((esbuild && !process.argv[2]) || cluster.isPrimary) {
+  } else if (
+    (esbuild && process.argv[2] == "dev" && !cluster.isPrimary) ||
+    (esbuild && !process.argv[2] && cluster.isPrimary) ||
+    (!esbuild && cluster.isPrimary)
+  ) {
     const server = app.listen(port, () => {
       if (cluster.isPrimary || process.env["i"] == "0") {
         console.log(
@@ -349,8 +356,17 @@ export function production({ html, prerender }) {
    * @param {import("node:http").ServerResponse<import("node:http").IncomingMessage>} res
    */
   return async function onRequest(req, res) {
+    if (esbuild && process.argv[2] == "dev" && req.url == "/never-end") {
+      res.write(".");
+      return;
+    }
     try {
       if (!html) {
+        if (!existsSync("./dist/index.html")) {
+          res.statusCode = 502;
+          res.end("502");
+          return;
+        }
         html = await readFile("./dist/index.html", "utf-8");
       }
       const rendered = await prerender({