elm-pages 3.0.0-beta.3 → 3.0.0-beta.31

package/generator/src/copy-dir.js

@@ -1,5 +1,5 @@
-const util = require("util");
-const fsSync = require("fs");
+const util = require("node:util");
+const fsSync = require("node:fs");
 const fs = {
   writeFile: util.promisify(fsSync.writeFile),
   mkdir: util.promisify(fsSync.mkdir),

package/generator/src/dev-server.js

@@ -1,36 +1,78 @@
-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");
+} 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) {
   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;
 
@@ -42,6 +84,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"),
     {}
@@ -117,63 +160,79 @@ async function start(options) {
     watcher.add(sourceDirs);
   }
 
-  const viteConfig = await import(
-    path.join(process.cwd(), "elm-pages.config.mjs")
-  )
-    .then(async (elmPagesConfig) => {
-      return elmPagesConfig.default.vite || {};
-    })
-    .catch((error) => {
-      console.warn(
-        kleur.yellow(
-          "No `elm-pages.config.mjs` file found. Using default config."
-        )
-      );
-      return {};
-    });
-  const vite = await createViteServer({
-    server: { middlewareMode: "ssr", base: options.base, port: options.port },
-    configFile: false,
-    root: process.cwd(),
-    base: options.base,
-    ...viteConfig,
-  });
-  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: "error",
-
-      outdir: ".elm-pages/compiled-ports",
-      entryNames: "[dir]/[name]-[hash]",
-
-      plugins: [
-        {
-          name: "example",
-          setup(build) {
-            build.onEnd((result) => {
+  const config = await resolveConfig();
+  const vite = await createViteServer(
+    merge_vite_configs(
+      {
+        server: {
+          middlewareMode: true,
+          base: options.base,
+          port: options.port,
+        },
+        appType: "custom",
+        configFile: false,
+        root: process.cwd(),
+        base: options.base,
+      },
+
+      config.vite
+    )
+  );
+
+  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`);
+                });
+              } else {
+                global.portsFilePath = null;
+              }
+            }
+          });
         },
-      ],
-    })
-    .then((result) => {
-      console.log("Watching port-data-source...");
-    })
-    .catch((error) => {
-      console.error("Failed to start port-data-source watcher", error);
-    });
+      },
+    ],
+  });
+  await ctx.watch();
 
   const app = connect()
     .use(timeMiddleware())
@@ -206,33 +265,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;
           }
@@ -250,10 +295,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")
           );
@@ -274,18 +316,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) => {
@@ -336,6 +378,8 @@ async function start(options) {
       };
 
       readyThread.ready = false;
+      await pendingCliCompile;
+      readyThread.used = true;
       readyThread.worker.postMessage({
         mode: "dev-server",
         pathname,
@@ -459,35 +503,7 @@ async function start(options) {
             }
             case "html": {
               try {
-                const template =
-                  /*html*/
-                  `<!DOCTYPE html>
-<!-- ROOT --><html lang="en">
-  <head>
-    <script src="/hmr.js" type="text/javascript"></script>
-    <script src="/elm.js" type="text/javascript"></script>
-    <link rel="stylesheet" href="/style.css">
-    <link rel="stylesheet" href="/dev-style.css">
-    <script src="/elm-pages.js" type="module"></script>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title><!-- PLACEHOLDER_TITLE --></title>
-    <meta name="generator" content="elm-pages v${cliVersion}" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#ffffff" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta
-      name="apple-mobile-web-app-status-bar-style"
-      content="black-translucent"
-    />
-    <!-- PLACEHOLDER_HEAD_AND_DATA -->
-  </head>
-  <body>
-    <div data-url="" display="none"></div>
-    <!-- PLACEHOLDER_HTML -->
-  </body>
-</html>
-                `;
+                const template = templateHtml(true, config.headTagsTemplate);
                 const processedTemplate = await vite.transformIndexHtml(
                   req.originalUrl,
                   template
@@ -610,6 +626,7 @@ async function start(options) {
   }
 
   function runPendingWork() {
+    restartIdleWorkersIfStale();
     const readyThreads = pool.filter((thread) => thread.ready);
     readyThreads.forEach((readyThread) => {
       const startTask = threadReadyQueue.shift();
@@ -634,6 +651,7 @@ async function start(options) {
         workerData: { basePath },
       }),
       ready: false,
+      used: false,
     };
     newWorker.worker.once("online", () => {
       newWorker.ready = true;
@@ -804,4 +822,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);
@@ -230,5 +233,3 @@ submit toMsg options =
 function camelToKebab(input) {
   return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-
-module.exports = { generateTemplateModuleConnector, sortTemplates };