neactor-cli 1.0.2 → 1.0.4

package/build.js

@@ -2,6 +2,9 @@
 import * as esbuild from "esbuild";
 import fs from "fs";
 import crypto from "crypto";
+import { fileURLToPath } from "url";
+
+const jsxShimPath = fileURLToPath(new URL("./jsx-shim.js", import.meta.url));
 
 export const build = async () => {
   // 1. Bundle JS
@@ -9,13 +12,12 @@ export const build = async () => {
     entryPoints: ["./src/main.jsx"],
     bundle: true,
     outdir: "dist",
+    format: "esm",
     jsxFactory: "neactorCreateElement",
     jsx: "transform",
     jsxFactory: "neactorCreateElement",
     jsxImportSource: "neactor-dom",
-    banner: {
-      js: `import { createElement } from 'neactor-dom';`,
-    },
+    inject: [jsxShimPath],
     entryNames: "bundle",
     write: true,
     metafile: true,
@@ -28,8 +30,9 @@ export const build = async () => {
   let html = fs.readFileSync("index.html", "utf8");
   html = html.replace(
     /<script type="module" src="[^"]+"><\/script>/,
-    `<script src="./bundle.js"></script>`,
+    `<script type="module" src="./bundle.js"></script>`,
   );
+
   fs.mkdirSync("dist", { recursive: true });
   fs.writeFileSync("dist/index.html", html);
 };

package/cli.js

@@ -14,8 +14,8 @@ if (command === "dev") {
 } else {
   console.log(`
 Usage:
-  mybundle dev      start dev server
-  mybundle build    production build
-  mybundle preview  preview production build
+  neactor dev      start dev server
+  neactor build    production build
+  neactor preview  preview production build
   `);
 }

package/dev.js

@@ -1,6 +1,10 @@
 import * as esbuild from "esbuild";
 import fs from "fs";
 import http from "http";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const jsxShimPath = fileURLToPath(new URL("./jsx-shim.js", import.meta.url));
 
 export const dev = async () => {
   const clients = new Set();
@@ -10,18 +14,17 @@ export const dev = async () => {
     bundle: true,
     outdir: "dist",
     sourcemap: true,
+    format: "esm",
     jsx: "transform",
     jsxFactory: "neactorCreateElement",
     jsxImportSource: "neactor-dom",
-    banner: {
-      js: `import { createElement } from 'neactor-dom';`,
-    },
+    inject: [jsxShimPath],
     plugins: [
       {
         name: "live-reload",
         setup(build) {
           build.onEnd(() => {
-            clients.forEach((res) => res.write("data: reload\n\n"));
+            clients.forEach((res) => res.write("data: reload\\n\\n"));
           });
         },
       },
@@ -32,13 +35,20 @@ export const dev = async () => {
 
   let html = fs.readFileSync("index.html", "utf8");
   html = html.replace(
-    /<script src="[^"]+"><\/script>/,
-    `<script src="./main.js"></script>`,
+    /<script type="module" src="[^"]+"><\/script>/,
+    `<script type="module" src="./main.js"></script>`,
   );
   fs.mkdirSync("dist", { recursive: true });
   fs.writeFileSync("dist/index.html", html);
 
-  // simple server that serves dist/ + SSE endpoint
+  const mimeTypes = {
+    ".html": "text/html; charset=utf-8",
+    ".js": "application/javascript; charset=utf-8",
+    ".map": "application/json; charset=utf-8",
+    ".css": "text/css; charset=utf-8",
+    ".json": "application/json; charset=utf-8",
+  };
+
   http
     .createServer((req, res) => {
       if (req.url === "/__reload") {
@@ -52,15 +62,20 @@ export const dev = async () => {
         return;
       }
 
-      // serve files from dist/
-      const filePath = `dist${req.url === "/" ? "/index.html" : req.url}`;
+      const requestPath = req.url === "/" ? "/index.html" : req.url;
+      const filePath = path.join("dist", requestPath);
+
       fs.readFile(filePath, (err, data) => {
         if (err) {
-          res.writeHead(404);
-          res.end();
+          res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+          res.end("Not Found");
           return;
         }
-        res.writeHead(200);
+
+        const ext = path.extname(filePath);
+        res.writeHead(200, {
+          "Content-Type": mimeTypes[ext] || "application/octet-stream",
+        });
         res.end(data);
       });
     })

package/jsx-shim.js

@@ -0,0 +1,3 @@
+export function neactorCreateElement(type, props, ...children) {
+  return { type, props, children };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neactor-cli",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "license": "ISC",
   "author": "",

package/preview.js

@@ -1,15 +1,32 @@
 import { createServer } from "http";
-import { readFileSync } from "fs";
+import fs from "fs";
+import path from "path";
+
+const mimeTypes = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+};
 
 export const preview = async () => {
-  createServer(async (req, res) => {
-    if (req.url === "/") {
-      res.writeHead(200, { "content-type": "text/html" });
-      res.end(readFileSync("./dist/index.html", "utf-8"));
-    }
-    if (req.url.endsWith(".js")) {
-      res.writeHead(200, { "content-type": "application/javascript" });
-      res.end(readFileSync("./dist/bundle.js", "utf-8"));
-    }
+  createServer((req, res) => {
+    const requestPath = req.url === "/" ? "/index.html" : req.url;
+    const filePath = path.join("dist", requestPath);
+
+    fs.readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+        res.end("Not Found");
+        return;
+      }
+
+      const ext = path.extname(filePath);
+      res.writeHead(200, {
+        "Content-Type": mimeTypes[ext] || "application/octet-stream",
+      });
+      res.end(data);
+    });
   }).listen(4000, () => console.log("prod server is running on port: 4000"));
 };