elm-pages 3.0.0-beta.2 → 3.0.0-beta.20

package/generator/src/dev-server.js

@@ -1,36 +1,56 @@
-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 { globbySync } from "globby";
+import * as packageJson from "../../package.json" assert { type: "json" };
+import { fileURLToPath } from "url";
+
+const cliVersion = packageJson.version;
+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 restartPool() {
+    pool.forEach((thread) => thread.worker.terminate());
+    const poolSize = Math.max(1, cpuCount / 2 - 1);
+    pool = [];
+
+    for (let index = 0; index < poolSize; index++) {
+      pool.push(initWorker(options.base));
+    }
+  }
+
   ensureDirSync(path.join(process.cwd(), ".elm-pages", "http-response-cache"));
   const cpuCount = os.cpus().length;
 
@@ -42,6 +62,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 +138,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 =
+                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())
@@ -238,6 +275,7 @@ async function start(options) {
           }
         }
         elmMakeRunning = true;
+        restartPool();
         if (codegenError) {
           const errorJson = JSON.stringify({
             type: "compile-errors",
@@ -274,18 +312,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) => {
@@ -459,35 +497,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
@@ -804,4 +814,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,17 +1,16 @@
-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 { globbySync } 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) => {
+export async function generateTemplateModuleConnector(basePath, phase) {
+  const templates = 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);
@@ -63,10 +62,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 },
@@ -82,18 +83,16 @@ async function runElmCodegenCli(templates, basePath, phase) {
     }
   });
   const filesToGenerate = await promise;
-  console.dir(filesToGenerate.map((file) => file.path));
 
   return filesToGenerate;
 }
 
-
 /**
  *
  * @param {string[][]} templates
  * @returns
  */
-function sortTemplates(templates) {
+export function sortTemplates(templates) {
   return templates.sort((first, second) => {
     const a = sortScore(first);
     const b = sortScore(second);
@@ -153,8 +152,6 @@ function sortScore(name) {
   );
 }
 
-
-
 function fetcherModule(name) {
   let moduleName = name.join(".");
   // TODO need to account for splat routes/etc.
@@ -226,7 +223,6 @@ submit toMsg options =
 `;
 }
 
-
 /**
  * Convert Strings from camelCase to kebab-case
  * @param {string} input
@@ -235,6 +231,3 @@ submit toMsg options =
 function camelToKebab(input) {
   return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-
-
-module.exports = { generateTemplateModuleConnector, sortTemplates };

package/generator/src/init.js

@@ -1,12 +1,15 @@
-const fs = require("fs");
-const copySync = require("fs-extra").copySync;
-const path = require("path");
-const kleur = require("kleur");
+import * as fs from "fs";
+import { copySync } from "fs-extra/esm";
+import * as path from "path";
+import * as kleur from "kleur/colors";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 /**
  * @param {string} name
  */
-async function run(name) {
+export async function run(name) {
   console.log("Creating " + name + " project...");
 
   const appRoot = path.resolve(name.toString());
@@ -36,5 +39,3 @@ async function run(name) {
     kleur.green("Project is successfully created in `" + appRoot + "`.")
   );
 }
-
-module.exports = { run };