create-evikit 2.4.0 → 2.5.1

package/.woodpecker/test.yaml

@@ -0,0 +1,18 @@
+when:
+  - event: push
+    branch: main
+  - event: pull_request
+
+steps:
+  - name: build
+    image: node:24-alpine
+    commands:
+      - apk add git
+      # Are types correct?
+      - npm i
+      - npm run lint
+      - npm run build
+      # Does todo app example build?
+      - npm link
+      - npx create-evikit my-app
+      - (cd my-app; npm run build)

package/README.md

@@ -0,0 +1,36 @@
+# create-evikit
+
+Create a monolith server-rendered Preact app with an API powered by a node:sqlite database, using [EviKit](https://evikit.js.org/):
+
+```sh
+npm init evikit my-app
+cd my-app
+npm run dev
+```
+
+Open http://localhost:5173/, try editing the example routes and see changes live.
+
+You can continue with the [EviKit tutorial](https://codeberg.org/nykula/evikit#documentation). With this initializer, you don't have to manually install dependencies, add scripts to `package.json`, or create typical files such as `index.html` and `vite.config.js`.
+
+> 😉 If you are new to Preact and the concept of Virtual DOM, it is a good idea to complete the [Preact tutorial](https://preactjs.com/tutorial/) first.
+
+## Read more
+
+Think of EviKit as an [LXDE](https://en.wikipedia.org/wiki/LXDE#Software_components_of_LXDE) of web frameworks, it stands on the shoulders of awesome libraries and tools from the Preact and Node.js ecosystems:
+
+- **[valibot](https://valibot.dev/guides/introduction/)** - Lets you declare detabase schema and validate API input/output.
+- **[hoofd/preact](https://github.com/0no-co/hoofd)** - Populates `<title>` and `<meta>` tags.
+- **[gettext.js](https://github.com/smhg/gettext-parser)** - Lets you pluralize translated strings.
+- **[vite](https://vite.dev/guide/)** - Builds your app for development and production.
+- **[express](https://expressjs.com/)** - Lets you apply compression, serve static files and use other familiar middleware.
+- [@fastify/busboy](https://github.com/fastify/busboy) - Parses forms, including uploaded files.
+- [@preact/preset-vite](https://github.com/preactjs/preset-vite) - In development, shows your code changes without reloading the page.
+- [env-paths](https://github.com/fastify/busboy) - Saves your database in standard system-specific directory.
+- [gettext-parser](https://github.com/smhg/gettext-parser) - Parses translation files.
+- [preact-iso](https://github.com/preactjs/preact-iso) - Handles routing and hydrates the server-rendered code on the client.
+
+## License
+
+SPDX-License-Identifier: 0BSD
+
+Note: this license applies to this example application template. EviKit itself uses the MIT license.

package/bin/create-evikit.js

@@ -25,7 +25,7 @@ for (const file of [...template, "eslint.config.js", "tsconfig.json"]) {
     path,
     readFileSync(join(ownRoot, file), "utf8")
       .replace(
-        /<link\s+href="[^"]+"(\s+media="[^"]+")?\s+rel="[a-z]+"\s+\/>\s+/g,
+        /<link\s+href="[^"]+"\s+media="[^"]+"\s+rel="[a-z]+"\s+\/>\s+/g,
         "",
       )
       .replace(', "uk"', ""),
@@ -120,8 +120,8 @@ writeFileSync(
 writeFileSync(
   join(target, ".env"),
   `
-ORIGIN=http://localhost:8000
-PORT=8000
+ORIGIN=http://localhost:5173
+PORT=5173
 `.trimStart(),
 );
 
@@ -146,6 +146,7 @@ const pkg = {
   dependencies: {
     "accept-language": dependencies["accept-language"],
     classnames: dependencies.classnames,
+    "cross-env": dependencies["cross-env"],
     evikit: dependencies.evikit,
     express: dependencies.express,
     "file-type": dependencies["file-type"],
@@ -163,7 +164,6 @@ const pkg = {
     "@types/express": devDependencies["@types/express"],
     "@types/node": devDependencies["@types/node"],
     "@types/swagger-ui-express": devDependencies["@types/swagger-ui-express"],
-    "cross-env": devDependencies["cross-env"],
     daisyui: devDependencies.daisyui,
     eslint: devDependencies.eslint,
     "eslint-config-prettier": devDependencies["eslint-config-prettier"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-evikit",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "type": "module",
   "bin": "bin/create-evikit.js",
   "scripts": {
@@ -21,7 +21,6 @@
     "@types/express": "^5.0.6",
     "@types/node": "^26.1.0",
     "@types/swagger-ui-express": "^4.1.8",
-    "cross-env": "^10.1.0",
     "daisyui": "^5.6.14",
     "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
@@ -37,7 +36,8 @@
     "@speed-highlight/core": "^1.2.17",
     "accept-language": "^3.0.20",
     "classnames": "^2.5.1",
-    "evikit": "^2.4.0",
+    "cross-env": "^10.1.0",
+    "evikit": "^2.5.0",
     "express": "^5.2.1",
     "file-type": "^22.0.1",
     "hoofd": "^1.7.3",

package/src/lib/db/index.js

@@ -1,3 +1,4 @@
+import { daemon } from "evikit/server";
 import { sqlite } from "evikit/sqlite";
 
 import pkg from "../../../package.json" with { type: "json" };
@@ -5,15 +6,13 @@ import * as schema from "./schema.js";
 
 export const db = sqlite({ pkg, schema });
 
-if (
-  process.env["npm_command"] == "start" ||
-  process.env["npm_lifecycle_event"] == "dev"
-) {
-  setInterval(() => {
+daemon(() => {
+  const interval = setInterval(() => {
     db.Todo.delete({
       text: db.Todo.select()
         .filter(({ createdAt }) => createdAt < Date.now() - 10 * 60e3)
         .map(({ text }) => text),
     });
   }, 1000);
-}
+  return () => clearInterval(interval);
+});

package/src/routes/page.js

@@ -168,11 +168,22 @@ npm run dev
 
       h(
         Code,
-        { file: data?.File["src/routes/todo/page.js"], lang: "js" },
+        {
+          class: "row-span-2",
+          file: data?.File["src/routes/todo/page.js"],
+          lang: "js",
+        },
         span(null, "src/routes/"),
         b(null, "todo/page.js"),
       ),
 
+      h(
+        Code,
+        { file: data?.File["src/lib/db/index.js"], lang: "js" },
+        span(null, "src/lib/"),
+        b(null, "db/index.js"),
+      ),
+
       h(
         Code,
         { file: data?.File["src/routes/error.js"], lang: "js" },
@@ -227,13 +238,6 @@ npm run dev
         b(null, "vite.config.js"),
       ),
 
-      h(
-        Code,
-        { file: data?.File["src/lib/db/index.js"], lang: "js", tag: "details" },
-        span(null, "src/lib/"),
-        b(null, "db/index.js"),
-      ),
-
       h(
         Code,
         { file: data?.File["index.html"], lang: "html", tag: "details" },
@@ -299,8 +303,8 @@ npm run dev
   );
 }
 
-/** @param {{ children?: any, lang: string, file: string | undefined, note?: string, tag?: string }} props */
-function Code({ children, file, lang, note, tag }) {
+/** @param {{ children?: any, class?: string, lang: string, file: string | undefined, note?: string, tag?: string }} props */
+function Code({ children, class: className, file, lang, note, tag }) {
   const inner = pre(
     { class: "mt-4 overflow-auto text-sm" },
     code(
@@ -319,7 +323,7 @@ function Code({ children, file, lang, note, tag }) {
     ),
   );
   const more = note ? p({ class: "mt-5", ...sanitize(note) }) : undefined;
-  const style = `${darkBg} mb-4 mx-0 overflow-hidden p-4 rounded-xl`;
+  const style = `${className} ${darkBg} mb-4 mx-0 overflow-hidden p-4 rounded-xl`;
   return tag == "details"
     ? details({ class: style }, summary(null, children), inner, more)
     : figure({ class: style }, figcaption(null, children), inner, more);