elm-pages 3.0.0-beta.9 → 3.0.0

package/generator/src/dev-server.js

@@ -1,40 +1,84 @@
-const path = require("path");
-const fs = require("fs");
-const which = require("which");
-const chokidar = require("chokidar");
-const { URL } = require("url");
-const {
+import * as path from "path";
+import * as fs from "fs";
+import { default as which } from "which";
+import * as chokidar from "chokidar";
+import { URL } from "url";
+import {
   compileElmForBrowser,
   runElmReview,
   compileCliApp,
-} = require("./compile-elm.js");
-const http = require("http");
-const https = require("https");
-const codegen = require("./codegen.js");
-const kleur = require("kleur");
-const serveStatic = require("serve-static");
-const connect = require("connect");
-const { restoreColorSafe } = require("./error-formatter");
-const { Worker, SHARE_ENV } = require("worker_threads");
-const os = require("os");
-const { ensureDirSync } = require("./file-helpers.js");
-const baseMiddleware = require("./basepath-middleware.js");
-const devcert = require("devcert");
-const busboy = require("busboy");
-const { createServer: createViteServer } = require("vite");
-const cliVersion = require("../../package.json").version;
-const esbuild = require("esbuild");
-const { merge_vite_configs } = require("./vite-utils.js");
-const { templateHtml } = require("./pre-render-html.js");
-const { resolveConfig } = require("./config.js");
-const globby = require("globby");
+} from "./compile-elm.js";
+import * as http from "http";
+import * as https from "https";
+import * as codegen from "./codegen.js";
+import * as kleur from "kleur/colors";
+import { default as serveStatic } from "serve-static";
+import { default as connect } from "connect";
+import { restoreColorSafe } from "./error-formatter.js";
+import { Worker, SHARE_ENV } from "worker_threads";
+import * as os from "os";
+import { ensureDirSync } from "./file-helpers.js";
+import { baseMiddleware } from "./basepath-middleware.js";
+import * as devcert from "devcert";
+import * as busboy from "busboy";
+import { createServer as createViteServer } from "vite";
+import * as esbuild from "esbuild";
+import { merge_vite_configs } from "./vite-utils.js";
+import { templateHtml } from "./pre-render-html.js";
+import { resolveConfig } from "./config.js";
+import * as globby from "globby";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 /**
  * @param {{ port: string; base: string; https: boolean; debug: boolean; }} options
  */
-async function start(options) {
+export async function start(options) {
+  console.error = function (...messages) {
+    if (!messages[0]?.startsWith("Failed to load url")) {
+      console.info(...messages);
+    }
+  };
+
   let threadReadyQueue = [];
   let pool = [];
+
+  function invalidatePool() {
+    pool.forEach((thread) => {
+      if (thread.used) {
+        thread.stale = true;
+      }
+    });
+    restartIdleWorkersIfStale();
+  }
+
+  function restartIdleWorkersIfStale() {
+    pool.forEach((thread) => {
+      if (thread.stale && thread.ready) {
+        reinitThread(thread);
+      }
+    });
+  }
+
+  function reinitThread(thisThread) {
+    thisThread.worker && thisThread.worker.terminate();
+    // TODO remove event listeners to avoid memory leak?
+    // thread.worker.removeAllListeners("message");
+    // thread.worker.removeAllListeners("error");
+    thisThread.ready = false;
+    thisThread.stale = false;
+    thisThread.used = false;
+    thisThread.worker = new Worker(path.join(__dirname, "./render-worker.js"), {
+      env: SHARE_ENV,
+      workerData: { basePath: options.base },
+    });
+    thisThread.worker.once("online", () => {
+      thisThread.ready = true;
+    });
+  }
+
   ensureDirSync(path.join(process.cwd(), ".elm-pages", "http-response-cache"));
   const cpuCount = os.cpus().length;
 
@@ -46,6 +90,7 @@ async function start(options) {
   const serveCachedFiles = serveStatic(".elm-pages/cache", { index: false });
   const generatedFilesDirectory = "elm-stuff/elm-pages/generated-files";
   fs.mkdirSync(generatedFilesDirectory, { recursive: true });
+
   const serveStaticCode = serveStatic(
     path.join(__dirname, "../static-code"),
     {}
@@ -126,62 +171,81 @@ async function start(options) {
     merge_vite_configs(
       {
         server: {
-          middlewareMode: "ssr",
+          middlewareMode: true,
           base: options.base,
           port: options.port,
         },
+        appType: "custom",
         configFile: false,
         root: process.cwd(),
         base: options.base,
+        /*
+        Using explicit optimizeDeps.include prevents the following Vite warning message:
+        (!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
+         */
+        optimizeDeps: {
+          include: [],
+        },
       },
 
       config.vite
     )
   );
-  esbuild
-    .build({
-      entryPoints: ["./port-data-source"],
-      platform: "node",
-      assetNames: "[name]-[hash]",
-      chunkNames: "chunks/[name]-[hash]",
-      outExtension: { ".js": ".js" },
-      metafile: true,
-      bundle: true,
-      watch: true,
-      logLevel: "silent",
-
-      outdir: ".elm-pages/compiled-ports",
-      entryNames: "[dir]/[name]-[hash]",
-
-      plugins: [
-        {
-          name: "example",
-          setup(build) {
-            build.onEnd((result) => {
-              try {
-                global.portsFilePath = Object.keys(result.metafile.outputs)[0];
+
+  const ctx = await esbuild.context({
+    entryPoints: ["./custom-backend-task"],
+    platform: "node",
+    assetNames: "[name]-[hash]",
+    chunkNames: "chunks/[name]-[hash]",
+    outExtension: { ".js": ".mjs" },
+    format: "esm",
+    metafile: true,
+    bundle: true,
+    packages: "external",
+    logLevel: "silent",
+    outdir: ".elm-pages/compiled-ports",
+    entryNames: "[dir]/[name]-[hash]",
+
+    plugins: [
+      {
+        name: "example",
+        setup(build) {
+          build.onEnd(async (result) => {
+            try {
+              global.portsFilePath = Object.keys(result.metafile.outputs)[0];
+
+              clients.forEach((client) => {
+                client.response.write(`data: content.dat\n\n`);
+              });
+            } catch (e) {
+              const portBackendTaskFileFound =
+                globby.globbySync("./custom-backend-task.*").length > 0;
+              if (portBackendTaskFileFound) {
+                // don't present error if there are no files matching custom-backend-task
+                // if there are files matching custom-backend-task, warn the user in case something went wrong loading it
+                const messages = (
+                  await esbuild.formatMessages(result.errors, {
+                    kind: "error",
+                    color: true,
+                  })
+                ).join("\n");
+                global.portsFilePath = {
+                  __internalElmPagesError: messages,
+                };
 
                 clients.forEach((client) => {
                   client.response.write(`data: content.dat\n\n`);
                 });
-              } catch (e) {}
-            });
-          },
+              } else {
+                global.portsFilePath = null;
+              }
+            }
+          });
         },
-      ],
-    })
-    .then((result) => {
-      console.log("Watching port-data-source...");
-    })
-    .catch((error) => {
-      const portDataSourceFileFound =
-        globby.sync("./port-data-source.*").length > 0;
-      if (portDataSourceFileFound) {
-        // don't present error if there are no files matching port-data-source
-        // if there are files matching port-data-source, warn the user in case something went wrong loading it
-        console.error("Failed to start port-data-source watcher", error);
-      }
-    });
+      },
+    ],
+  });
+  await ctx.watch();
 
   const app = connect()
     .use(timeMiddleware())
@@ -214,33 +278,19 @@ async function start(options) {
   watcher.on("all", async function (eventName, pathThatChanged) {
     if (pathThatChanged === "elm.json") {
       watchElmSourceDirs(false);
+    } else if (
+      pathThatChanged.startsWith("app/Route") &&
+      !pathThatChanged.endsWith(".elm")
+    ) {
+      // this happens when a folder is created in app/Route. Ignore this case.
     } else if (pathThatChanged.endsWith(".elm")) {
+      invalidatePool();
       if (elmMakeRunning) {
       } else {
         let codegenError = null;
         if (needToRerunCodegen(eventName, pathThatChanged)) {
           try {
             await codegen.generate(options.base);
-            clientElmMakeProcess = compileElmForBrowser(options);
-            pendingCliCompile = compileCliApp(
-              options,
-              ".elm-pages/Main.elm",
-              path.join(process.cwd(), "elm-stuff/elm-pages/", "elm.js"),
-              // "elm.js",
-              "elm-stuff/elm-pages/",
-              path.join("elm-stuff/elm-pages/", "elm.js")
-            );
-
-            Promise.all([clientElmMakeProcess, pendingCliCompile])
-              .then(() => {
-                elmMakeRunning = false;
-              })
-              .catch(() => {
-                elmMakeRunning = false;
-              });
-            clients.forEach((client) => {
-              client.response.write(`data: elm.js\n\n`);
-            });
           } catch (error) {
             codegenError = error;
           }
@@ -258,10 +308,7 @@ async function start(options) {
           pendingCliCompile = compileCliApp(
             options,
             ".elm-pages/Main.elm",
-
             path.join(process.cwd(), "elm-stuff/elm-pages/", "elm.js"),
-
-            // "elm.js",
             "elm-stuff/elm-pages/",
             path.join("elm-stuff/elm-pages/", "elm.js")
           );
@@ -282,18 +329,18 @@ async function start(options) {
       // TODO use similar logic in the workers? Or don't use cache at all?
       // const changedPathRelative = path.relative(process.cwd(), pathThatChanged);
       //
-      // Object.keys(global.staticHttpCache).forEach((dataSourceKey) => {
-      //   if (dataSourceKey.includes(`file://${changedPathRelative}`)) {
-      //     delete global.staticHttpCache[dataSourceKey];
+      // Object.keys(global.staticHttpCache).forEach((backendTaskKey) => {
+      //   if (backendTaskKey.includes(`file://${changedPathRelative}`)) {
+      //     delete global.staticHttpCache[backendTaskKey];
       //   } else if (
       //     (eventName === "add" ||
       //       eventName === "unlink" ||
       //       eventName === "change" ||
       //       eventName === "addDir" ||
       //       eventName === "unlinkDir") &&
-      //     dataSourceKey.startsWith("glob://")
+      //     backendTaskKey.startsWith("glob://")
       //   ) {
-      //     delete global.staticHttpCache[dataSourceKey];
+      //     delete global.staticHttpCache[backendTaskKey];
       //   }
       // });
       clients.forEach((client) => {
@@ -344,6 +391,8 @@ async function start(options) {
       };
 
       readyThread.ready = false;
+      await pendingCliCompile;
+      readyThread.used = true;
       readyThread.worker.postMessage({
         mode: "dev-server",
         pathname,
@@ -485,9 +534,9 @@ async function start(options) {
                     /<!-- ROOT -->\S*<html lang="en">/m,
                     info.rootElement
                   );
+                setHeaders(res, renderResult.headers);
                 res.writeHead(renderResult.statusCode, {
                   "Content-Type": "text/html",
-                  ...renderResult.headers,
                 });
                 res.end(renderedHtml);
               } catch (e) {
@@ -499,10 +548,8 @@ async function start(options) {
             case "api-response": {
               if (renderResult.body.kind === "server-response") {
                 const serverResponse = renderResult.body;
-                res.writeHead(
-                  serverResponse.statusCode,
-                  serverResponse.headers
-                );
+                setHeaders(res, serverResponse.headers);
+                res.writeHead(serverResponse.statusCode);
                 res.end(serverResponse.body);
               } else if (renderResult.body.kind === "static-file") {
                 let mimeType = serveStatic.mime.lookup(pathname || "text/html");
@@ -545,6 +592,16 @@ async function start(options) {
     });
   }
 
+  /**
+   * @param { http.ServerResponse } res
+   * @param {{ [key: string]: string[]; }} headers
+   */
+  function setHeaders(res, headers) {
+    Object.keys(headers).forEach(function (key) {
+      res.setHeader(key, headers[key]);
+    });
+  }
+
   /**
    * @param {string} reviewReportJsonString
    */
@@ -590,6 +647,7 @@ async function start(options) {
   }
 
   function runPendingWork() {
+    restartIdleWorkersIfStale();
     const readyThreads = pool.filter((thread) => thread.ready);
     readyThreads.forEach((readyThread) => {
       const startTask = threadReadyQueue.shift();
@@ -614,6 +672,7 @@ async function start(options) {
         workerData: { basePath },
       }),
       ready: false,
+      used: false,
     };
     newWorker.worker.once("online", () => {
       newWorker.ready = true;
@@ -784,4 +843,3 @@ function paramsToObject(entries) {
   }
   return result;
 }
-module.exports = { start };

package/generator/src/dir-helpers.js

@@ -1,5 +1,7 @@
-const util = require("util");
-const fsSync = require("fs");
+import * as util from "node:util";
+import * as fsSync from "node:fs";
+import * as path from "node:path";
+
 const fs = {
   writeFile: util.promisify(fsSync.writeFile),
   writeFileSync: fsSync.writeFileSync,
@@ -15,14 +17,14 @@ const fs = {
 /**
  * @param {import("fs").PathLike} dirName
  */
-async function tryMkdir(dirName) {
+export async function tryMkdir(dirName) {
   const exists = await fs.exists(dirName);
   if (!exists) {
     await fs.mkdir(dirName, { recursive: true });
   }
 }
 
-function fileExists(file) {
+export function fileExists(file) {
   return fsSync.promises
     .access(file, fsSync.constants.F_OK)
     .then(() => true)
@@ -33,18 +35,16 @@ function fileExists(file) {
  * @param {string} filePath
  * @param {string} data
  */
-function writeFileSyncSafe(filePath, data) {
+export function writeFileSyncSafe(filePath, data) {
   fsSync.mkdirSync(path.dirname(filePath), { recursive: true });
   fs.writeFileSync(filePath, data);
 }
 
-const path = require("path");
-
 /**
  * @param {string} srcDirectory
  * @param {string} destDir
  */
-async function copyDirFlat(srcDirectory, destDir) {
+export async function copyDirFlat(srcDirectory, destDir) {
   const items = await fs.readdir(srcDirectory);
   items.forEach(function (childItemName) {
     copyDirNested(
@@ -58,7 +58,7 @@ async function copyDirFlat(srcDirectory, destDir) {
  * @param {string} src
  * @param {string} dest
  */
-async function copyDirNested(src, dest) {
+export async function copyDirNested(src, dest) {
   var exists = fsSync.existsSync(src);
   var stats = exists && fsSync.statSync(src);
   var isDirectory = exists && stats.isDirectory();
@@ -75,20 +75,3 @@ async function copyDirNested(src, dest) {
     fs.copyFile(src, dest);
   }
 }
-
-module.exports = {
-  writeFile: fs.writeFile,
-  writeFileSync: fs.writeFileSync,
-  readFile: fs.readFile,
-  readFileSync: fsSync.readFileSync,
-  copyFile: fs.copyFile,
-  exists: fs.exists,
-  writeFileSyncSafe,
-  tryMkdir,
-  copyDirFlat,
-  copyDirNested,
-  rmSync: fs.rm,
-  rm: fs.rm,
-  existsSync: fs.existsSync,
-  fileExists: fileExists,
-};

package/generator/src/elm-codegen.js

@@ -1,6 +1,6 @@
-const spawnCallback = require("cross-spawn").spawn;
+import { spawn as spawnCallback } from "cross-spawn";
 
-function runElmCodegenInstall() {
+export function runElmCodegenInstall() {
   return new Promise(async (resolve, reject) => {
     const subprocess = spawnCallback(`elm-codegen`, ["install"], {
       // ignore stdout
@@ -17,6 +17,9 @@ function runElmCodegenInstall() {
     subprocess.stderr.on("data", function (data) {
       commandOutput += data;
     });
+    subprocess.stdout.on("data", function (data) {
+      commandOutput += data;
+    });
     subprocess.on("error", function () {
       reject(commandOutput);
     });
@@ -30,5 +33,3 @@ function runElmCodegenInstall() {
     });
   });
 }
-
-module.exports = { runElmCodegenInstall };

package/generator/src/elm-file-constants.js

@@ -1,4 +1,4 @@
-function elmPagesUiFile() {
+export function elmPagesUiFile() {
   return `module Pages exposing (builtAt)
 
 import Time
@@ -12,7 +12,6 @@ builtAt =
 `;
 }
 
-function elmPagesCliFile() {
+export function elmPagesCliFile() {
   return elmPagesUiFile();
 }
-module.exports = { elmPagesUiFile, elmPagesCliFile };

package/generator/src/error-formatter.js

@@ -1,4 +1,6 @@
-const kleur = require("kleur");
+"use strict";
+
+import * as kleur from "kleur/colors";
 
 /* Thanks to elm-live for this code! 
    https://github.com/wking-io/elm-live/blob/e317b4914c471addea7243c47f28dcebe27a5d36/lib/src/build.js#L65
@@ -13,11 +15,12 @@ const kleur = require("kleur");
  * @param {string} rule
  * @param {string} path
  * */
-const parseHeader = (rule, path) =>
-  kleur.cyan(
-    `-- ${rule.replace("-", " ")} --------------- ${path || ""}
+function parseHeader(rule, path) {
+  return kleur.cyan(
+    `-- ${(rule || "").replace("-", " ")} --------------- ${path || ""}
 `
   );
+}
 
 /**
  * parseMsg :: String|Object -> String
@@ -55,9 +58,6 @@ function toKleurColor(color) {
       case "33BBC8": {
         return "cyan";
       }
-      case "33BBC8": {
-        return "cyan";
-      }
       case "FFFF00": {
         return "yellow";
       }
@@ -81,7 +81,7 @@ function toKleurColor(color) {
 /**
  * @param {RootObject} error
  * */
-const restoreColor = (error) => {
+export const restoreColor = (error) => {
   try {
     if (error.type === "compile-errors") {
       return error.errors
@@ -110,7 +110,7 @@ const restoreColor = (error) => {
  * @param {string} error
  * @returns {string}
  */
-function restoreColorSafe(error) {
+export function restoreColorSafe(error) {
   try {
     if (typeof error === "string") {
       const asJson = JSON.parse(error);
@@ -137,7 +137,10 @@ const restoreProblem =
         parseHeader(info.rule, path),
         ...info.formatted.map(parseMsg),
       ].join("");
+    } else if (typeof info.message === "string") {
+      return info.message;
     } else {
+      // console.log("info.message", info.message);
       return [
         parseHeader(info.title, path),
         ...info.message.map(parseMsg),
@@ -145,8 +148,6 @@ const restoreProblem =
     }
   };
 
-module.exports = { restoreColor, restoreColorSafe };
-
 /** @typedef { CompilerError | ReportError | IElmReviewError } RootObject */
 
 /** @typedef { { type: "compile-errors"; errors: Error_[]; } } CompilerError */

package/generator/src/file-helpers.js

@@ -1,7 +1,6 @@
-const fs = require("fs");
-module.exports = { ensureDirSync, deleteIfExists };
+import * as fs from "node:fs";
 
-function ensureDirSync(dirpath) {
+export function ensureDirSync(dirpath) {
   try {
     fs.mkdirSync(dirpath, { recursive: true });
   } catch (err) {
@@ -9,7 +8,7 @@ function ensureDirSync(dirpath) {
   }
 }
 
-function deleteIfExists(/** @type string */ filePath) {
+export function deleteIfExists(/** @type string */ filePath) {
   if (fs.existsSync(filePath)) {
     fs.unlinkSync(filePath);
   }

package/generator/src/generate-template-module-connector.js

@@ -1,24 +1,25 @@
-const globby = require("globby");
-const path = require("path");
-const mm = require("micromatch");
-const routeHelpers = require("./route-codegen-helpers");
-const { runElmCodegenInstall } = require("./elm-codegen");
-const { compileCliApp } = require("./compile-elm");
-const { restoreColorSafe } = require("./error-formatter");
+import * as globby from "globby";
+import * as path from "path";
+import { default as mm } from "micromatch";
+import * as routeHelpers from "./route-codegen-helpers.js";
+import { restoreColorSafe } from "./error-formatter.js";
+import { fileURLToPath } from "url";
 
 /**
  * @param {string} basePath
  * @param {'browser' | 'cli'} phase
  */
-async function generateTemplateModuleConnector(basePath, phase) {
-  const templates = globby.sync(["app/Route/**/*.elm"], {}).map((file) => {
-    const captures = mm.capture("app/Route/**/*.elm", file);
-    if (captures) {
-      return path.join(captures[0], captures[1]).split(path.sep);
-    } else {
-      return [];
-    }
-  });
+export async function generateTemplateModuleConnector(basePath, phase) {
+  const templates = globby
+    .globbySync(["app/Route/**/*.elm"], {})
+    .map((file) => {
+      const captures = mm.capture("app/Route/**/*.elm", file);
+      if (captures) {
+        return path.join(captures[0], captures[1]).split(path.sep);
+      } else {
+        return [];
+      }
+    });
   if (templates.length <= 0) {
     throw {
       path: "",
@@ -63,10 +64,12 @@ async function generateTemplateModuleConnector(basePath, phase) {
 }
 
 async function runElmCodegenCli(templates, basePath, phase) {
-  const filePath = path.join(__dirname, `../../codegen/elm-pages-codegen.js`);
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+  const filePath = path.join(__dirname, `../../codegen/elm-pages-codegen.cjs`);
 
-  const promise = new Promise((resolve, reject) => {
-    const elmPagesCodegen = require(filePath).Elm.Generate;
+  const promise = new Promise(async (resolve, reject) => {
+    const elmPagesCodegen = (await import(filePath)).default.Elm.Generate;
 
     const app = elmPagesCodegen.init({
       flags: { templates: templates, basePath, phase },
@@ -91,7 +94,7 @@ async function runElmCodegenCli(templates, basePath, phase) {
  * @param {string[][]} templates
  * @returns
  */
-function sortTemplates(templates) {
+export function sortTemplates(templates) {
   return templates.sort((first, second) => {
     const a = sortScore(first);
     const b = sortScore(second);
@@ -186,7 +189,6 @@ function fetcherModule(name) {
 
 import Bytes exposing (Bytes)
 import Bytes.Decode
-import FormDecoder
 import Http
 import Pages.Fetcher
 import Route.${moduleName}
@@ -230,5 +232,3 @@ submit toMsg options =
 function camelToKebab(input) {
   return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-
-module.exports = { generateTemplateModuleConnector, sortTemplates };