elm-pages 3.0.0-beta.4 → 3.0.0-beta.40

package/generator/src/config.js

@@ -0,0 +1,39 @@
+import * as path from "path";
+
+export async function resolveConfig() {
+  const initialConfig = await await import(
+    path.join(process.cwd(), "elm-pages.config.mjs")
+  )
+    .then(async (elmPagesConfig) => {
+      return (
+        elmPagesConfig.default || {
+          headTagsTemplate: defaultHeadTagsTemplate,
+        }
+      );
+    })
+    .catch((error) => {
+      console.warn(
+        "No `elm-pages.config.mjs` file found. Using default config."
+      );
+      return {
+        headTagsTemplate: defaultHeadTagsTemplate,
+        vite: {},
+      };
+    });
+
+  return {
+    preloadTagForFile: function () {
+      return true;
+    },
+    headTagsTemplate: defaultHeadTagsTemplate,
+    vite: {},
+    ...initialConfig,
+  };
+}
+
+function defaultHeadTagsTemplate(context) {
+  return `
+<link rel="stylesheet" href="/style.css" />
+<meta name="generator" content="elm-pages v${context.cliVersion}" />
+`;
+}

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,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");
+} 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;
 
@@ -42,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"),
     {}
@@ -117,63 +166,86 @@ 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,
+        /*
+        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
+    )
+  );
+
+  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 +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;
           }
@@ -250,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")
           );
@@ -274,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) => {
@@ -336,6 +391,8 @@ async function start(options) {
       };
 
       readyThread.ready = false;
+      await pendingCliCompile;
+      readyThread.used = true;
       readyThread.worker.postMessage({
         mode: "dev-server",
         pathname,
@@ -459,35 +516,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
@@ -505,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) {
@@ -519,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");
@@ -565,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
    */
@@ -610,6 +647,7 @@ async function start(options) {
   }
 
   function runPendingWork() {
+    restartIdleWorkersIfStale();
     const readyThreads = pool.filter((thread) => thread.ready);
     readyThreads.forEach((readyThread) => {
       const startTask = threadReadyQueue.shift();
@@ -634,6 +672,7 @@ async function start(options) {
         workerData: { basePath },
       }),
       ready: false,
+      used: false,
     };
     newWorker.worker.once("online", () => {
       newWorker.ready = true;
@@ -804,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 */