jeasx 0.0.1

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Maik Jablonski (<mail@mjablonski.de>)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# Jeasx - server side rendering with the ease of JSX
+
+## Technologies
+
+- <https://fastify.dev>
+- <https://esbuild.github.io>
+- <https://pm2.io>
+
+## TODO

package/ecosystem.config.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+  apps: [
+    {
+      name: "jeasx:start:server",
+      script: "node_modules/jeasx/server.js",
+      autorestart: true,
+    },
+    {
+      name: "jeasx:build:routes",
+      script: "node_modules/jeasx/esbuild.config.js",
+      args: "routes",
+      watch: [
+        "src/**/*.js",
+        "src/**/*.jsx",
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.json",
+      ],
+      ignore_watch: ["src/browser"],
+      autorestart: false,
+    },
+    {
+      name: "jeasx:build:js",
+      script: "node_modules/jeasx/esbuild.config.js",
+      args: "js",
+      watch: [
+        "src/browser/**/*.js",
+        "src/browser/**/*.jsx",
+        "src/browser/**/*.ts",
+        "src/browser/**/*.tsx",
+        "src/browser/**/*.json",
+      ],
+      autorestart: false,
+    },
+    {
+      name: "jeasx:build:css",
+      script: "node_modules/jeasx/esbuild.config.js",
+      args: "css",
+      watch: ["src/browser/**/*.css"],
+      autorestart: false,
+    },
+  ],
+};

package/esbuild.config.js

@@ -0,0 +1,104 @@
+import * as esbuild from "esbuild";
+
+const BUILD_TIME =
+  process.env.NODE_ENV === "development"
+    ? `"snapshot"`
+    : `"${Date.now().toString(36)}"`;
+
+const BROWSER_PUBLIC_ENV = Object.keys(process.env)
+  .filter((key) => key.startsWith("BROWSER_PUBLIC_"))
+  .reduce(
+    (env, key) => {
+      env[`process.env.${key}`] = `"${process.env[key]}"`;
+      return env;
+    },
+    { "process.env.BROWSER_PUBLIC_BUILD_TIME": BUILD_TIME }
+  );
+
+const args = process.argv.slice(2);
+
+const builds = [];
+for (const arg of args.length ? args : ["routes", "js", "css"]) {
+  switch (arg) {
+    case "routes":
+      builds.push(
+        buildServer(
+          "src/routes/**/[*].js",
+          "src/routes/**/[*].ts",
+          "src/routes/**/[*].jsx",
+          "src/routes/**/[*].tsx"
+        )
+      );
+      break;
+    case "js":
+      builds.push(
+        buildBrowser(
+          "src/browser/**/index.js",
+          "src/browser/**/index.ts",
+          "src/browser/**/index.jsx",
+          "src/browser/**/index.tsx"
+        )
+      );
+      break;
+    case "css":
+      builds.push(buildBrowser("src/browser/**/index.css"));
+      break;
+    default:
+      console.info(`Error: Unknown argument '${arg}'.`);
+      process.exit(1);
+  }
+}
+
+await Promise.all(builds);
+
+/**
+ * @param {string[]} entryPoints
+ */
+function buildServer(...entryPoints) {
+  esbuild.build({
+    entryPoints,
+    define: {
+      "process.env.BUILD_TIME": BUILD_TIME,
+    },
+    minify: process.env.NODE_ENV !== "development",
+    logLevel: "info",
+    color: true,
+    bundle: true,
+    outbase: "src",
+    outdir: "dist",
+    platform: "neutral",
+    packages: "external",
+  });
+}
+
+/**
+ * @param {string[]} entryPoints
+ */
+function buildBrowser(...entryPoints) {
+  esbuild.build({
+    entryPoints,
+    define: BROWSER_PUBLIC_ENV,
+    minify: process.env.NODE_ENV !== "development",
+    logLevel: "info",
+    color: true,
+    bundle: true,
+    outbase: "src/browser",
+    outdir: "dist/browser",
+    platform: "browser",
+    format: "esm",
+    target: ["chrome109", "edge112", "firefox102", "safari16"],
+    external: [
+      "*.avif",
+      "*.gif",
+      "*.jpg",
+      "*.jpeg",
+      "*.png",
+      "*.svg",
+      "*.webp",
+      "*.ttf",
+      "*.otf",
+      "*.woff",
+      "*.woff2",
+    ],
+  });
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "jeasx",
+  "version": "0.0.1",
+  "description": "Jeasx - server side rendering with the ease of JSX",
+  "keywords": [
+    "jsx",
+    "ssr"
+  ],
+  "license": "MIT",
+  "repository": {
+    "url": "git+https://github.com/jeasx/jeasx.git"
+  },
+  "author": {
+    "name": "Maik Jablonski",
+    "email": "mail@mjablonski.de"
+  },
+  "type": "module",
+  "main": "server.js",
+  "dependencies": {
+    "@fastify/accepts": "4.3.0",
+    "@fastify/cookie": "9.2.0",
+    "@fastify/formbody": "7.4.0",
+    "@fastify/multipart": "8.0.0",
+    "@fastify/request-context": "5.0.0",
+    "@fastify/static": "6.12.0",
+    "@fastify/url-data": "5.4.0",
+    "@types/node": "20.10.6",
+    "dotenv": "16.3.1",
+    "esbuild": "0.19.11",
+    "fastify": "4.25.2",
+    "jsx-async-runtime": "0.1.2",
+    "pm2": "5.3.0"
+  }
+}

package/server.js

@@ -0,0 +1,6 @@
+import serverless from "./serverless.js";
+
+await serverless.listen({
+  host: process.env.HOST || "0.0.0.0",
+  port: Number(process.env.PORT || 3000),
+});

package/serverless.js

@@ -0,0 +1,136 @@
+import fastifyAccepts from "@fastify/accepts";
+import fastifyCookie from "@fastify/cookie";
+import fastifyFormbody from "@fastify/formbody";
+import fastifyMultipart from "@fastify/multipart";
+import fastifyRequestContext from "@fastify/request-context";
+import fastifyStatic from "@fastify/static";
+import fastifyUrlData from "@fastify/url-data";
+import "dotenv/config";
+import Fastify from "fastify";
+import { renderToString } from "jsx-async-runtime";
+import { createHash } from "node:crypto";
+import { readFile, stat } from "node:fs/promises";
+import { join } from "node:path";
+
+// Create a Fastify app instance
+const serverless = Fastify({
+  logger: true,
+  disableRequestLogging: process.env.NODE_ENV === "development",
+  bodyLimit: Number(process.env.FASTIFY_BODY_LIMIT) || undefined,
+});
+
+// Register required plugins
+serverless.register(fastifyAccepts);
+serverless.register(fastifyCookie);
+serverless.register(fastifyFormbody);
+serverless.register(fastifyMultipart);
+serverless.register(fastifyRequestContext);
+serverless.register(fastifyUrlData);
+serverless.register(fastifyStatic, {
+  root: ["public", "dist/browser"].map((dir) => join(process.cwd(), dir)),
+  prefix: "/",
+  wildcard: false,
+});
+
+// Handle all requests
+serverless.all("*", async (request, reply) => {
+  let response;
+
+  // Extract pathname without query parameters
+  const requestPath = request.urlData().path;
+
+  // Transform "/a/b/c" into ["/a/b/c", "/a/b", "/a", ""]
+  const pathSegments = requestPath
+    .split("/")
+    .filter((segment) => segment !== "")
+    .reduce((acc, segment) => {
+      acc.push((acc.length > 0 ? acc[acc.length - 1] : "") + "/" + segment);
+      return acc;
+    }, [])
+    .reverse()
+    .concat("");
+
+  // Transform "/a/b/c" into ["/a/b/[c]", "/a/b/c/[index]"]
+  const generateEdges = (path) => {
+    const edges = [];
+    if (path) {
+      const lastSegment = path.lastIndexOf("/") + 1;
+      edges.push(
+        `${path.substring(0, lastSegment)}[${path.substring(lastSegment)}]`
+      );
+    }
+    edges.push(`${path}/[index]`);
+    return edges;
+  };
+
+  // Find route handler for the request
+  for (const pathname of [
+    ...pathSegments
+      .slice()
+      .reverse() // [...guard]s are evaluated from top to bottom
+      .map((segment) => `routes${segment}/[...guard].js`),
+    ...generateEdges(pathSegments[0]).map((segment) => `routes${segment}.js`),
+    ...pathSegments.map((segment) => `routes${segment}/[...path].js`),
+    ...pathSegments.map((segment) => `routes${segment}/[404].js`),
+  ]) {
+    const modulePath = join(process.cwd(), "dist", pathname);
+
+    try {
+      (await stat(modulePath)).isFile();
+    } catch (error) {
+      continue;
+    }
+
+    // Build content hash in development, so we can refresh code via "query string hack".
+    const hash =
+      process.env.NODE_ENV === "development"
+        ? "?" +
+          createHash("sha1")
+            .update(await readFile(modulePath, "utf-8"))
+            .digest("hex")
+        : "";
+
+    // Call the handler with request, reply and optional props
+    response = await (
+      await import(`${modulePath}${hash}`)
+    ).default({
+      request,
+      reply,
+      ...(typeof response === "object" ? response : {}),
+    });
+
+    if (reply.sent) {
+      return;
+    } else if (
+      pathname.endsWith("/[...guard].js") &&
+      (response === undefined || !isJSX(response))
+    ) {
+      continue;
+    } else if (pathname.endsWith("/[404].js")) {
+      reply.status(404);
+      break;
+    } else if (reply.statusCode === 404) {
+      continue;
+    } else {
+      break;
+    }
+  }
+
+  // Make sure a Content-Type header is set
+  if (!reply.hasHeader("Content-Type")) {
+    reply.header("Content-Type", "text/html; charset=utf-8");
+  }
+
+  // Render JSX or return raw response
+  if (isJSX(response)) {
+    return await renderToString(response);
+  } else {
+    return response;
+  }
+
+  function isJSX(obj) {
+    return typeof obj === "object" && "type" in obj && "props" in obj;
+  }
+});
+
+export default serverless;

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "outDir": "dist",
+    "allowJs": true,
+    "checkJs": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "jsx-async-runtime",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  }
+}