elm-pages 3.0.0-beta.18 → 3.0.0-beta.19

package/generator/src/dir-helpers.js

@@ -1,5 +1,7 @@
-const util = require("util");
-const fsSync = require("fs");
+import * as util from "util";
+import * as fsSync from "fs";
+import * as path from "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();
@@ -76,19 +76,3 @@ async function copyDirNested(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
@@ -33,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
@@ -82,7 +84,7 @@ function toKleurColor(color) {
 /**
  * @param {RootObject} error
  * */
-const restoreColor = (error) => {
+export const restoreColor = (error) => {
   try {
     if (error.type === "compile-errors") {
       return error.errors
@@ -111,7 +113,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);
@@ -149,8 +151,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 "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 },
@@ -91,7 +92,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 +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 };

package/generator/src/pre-render-html.js

@@ -1,11 +1,14 @@
-const seo = require("./seo-renderer.js");
-const cliVersion = require("../../package.json").version;
-const path = require("path");
+import * as seo from "./seo-renderer.js";
+import * as packageJson from "../../package.json" assert { type: "json" };
+import * as path from "path";
+import { fileURLToPath } from "url";
+
+const cliVersion = packageJson.version;
 
 /** @typedef { { head: any[]; errors: any[]; html: string; route: string; title: string; } } Arg */
 /** @typedef { { tag : 'PageProgress'; args : Arg[] } } PageProgress */
 
-function wrapHtml(basePath, fromElm, contentDatPayload) {
+export function wrapHtml(basePath, fromElm, contentDatPayload) {
   const seoData = seo.gather(fromElm.head);
   return {
     kind: "html-template",
@@ -21,7 +24,9 @@ function wrapHtml(basePath, fromElm, contentDatPayload) {
  * @param {boolean} devMode
  * @param {(context: {cliVersion: string;}) => string} userHeadTagsTemplate
  */
-function templateHtml(devMode, userHeadTagsTemplate) {
+export function templateHtml(devMode, userHeadTagsTemplate) {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
   return /* html */ `<!DOCTYPE html>
 <!-- ROOT --><html lang="en">
   <head>
@@ -65,7 +70,7 @@ function indent(snippet) {
 /**
  * @param {string} processedTemplate
  */
-function replaceTemplate(processedTemplate, info) {
+export function replaceTemplate(processedTemplate, info) {
   return processedTemplate
     .replace(
       /<!--\s*PLACEHOLDER_HEAD_AND_DATA\s*-->/,
@@ -76,9 +81,3 @@ function replaceTemplate(processedTemplate, info) {
     .replace(/<!--\s*PLACEHOLDER_HTML\s* -->/, info.html)
     .replace(/<!-- ROOT -->\S*<html lang="en">/m, info.rootElement);
 }
-
-module.exports = {
-  wrapHtml,
-  templateHtml,
-  replaceTemplate,
-};

package/generator/src/render-worker.js

@@ -1,11 +1,9 @@
-const renderer = require("../../generator/src/render");
-const path = require("path");
-const fs = require("./dir-helpers.js");
-const compiledElmPath = path.join(process.cwd(), "elm-stuff/elm-pages/elm.js");
-const { parentPort, threadId, workerData } = require("worker_threads");
-let Elm;
-
-global.staticHttpCache = {};
+import * as renderer from "../../generator/src/render.js";
+import * as path from "path";
+import * as fs from "./dir-helpers.js";
+import { readFileSync, writeFileSync } from "fs";
+import { stat } from "fs/promises";
+import { parentPort, threadId, workerData } from "worker_threads";
 
 async function run({ mode, pathname, serverRequest, portsFilePath }) {
   console.time(`${threadId} ${pathname}`);
@@ -13,7 +11,7 @@ async function run({ mode, pathname, serverRequest, portsFilePath }) {
     const renderResult = await renderer.render(
       portsFilePath,
       workerData.basePath,
-      requireElm(mode),
+      await requireElm(mode),
       mode,
       pathname,
       serverRequest,
@@ -42,20 +40,17 @@ async function run({ mode, pathname, serverRequest, portsFilePath }) {
   console.timeEnd(`${threadId} ${pathname}`);
 }
 
-function requireElm(mode) {
-  if (mode === "build") {
-    if (!Elm) {
-      const warnOriginal = console.warn;
-      console.warn = function () {};
-
-      Elm = require(compiledElmPath);
-      console.warn = warnOriginal;
-    }
-    return Elm;
-  } else {
-    delete require.cache[require.resolve(compiledElmPath)];
-    return require(compiledElmPath);
-  }
+async function requireElm(mode) {
+  const compiledElmPath = path.join(
+    process.cwd(),
+    "elm-stuff/elm-pages/elm.cjs"
+  );
+  let elmImportPath = compiledElmPath;
+  const warnOriginal = console.warn;
+  console.warn = function () {};
+  const Elm = (await import(elmImportPath)).default;
+  console.warn = warnOriginal;
+  return Elm;
 }
 
 async function outputString(
@@ -67,13 +62,13 @@ async function outputString(
       const args = fromElm;
       const normalizedRoute = args.route.replace(/index$/, "");
       await fs.tryMkdir(`./dist/${normalizedRoute}`);
-      const template = await fs.readFileSync("./dist/template.html", "utf8");
-      fs.writeFileSync(
+      const template = readFileSync("./dist/template.html", "utf8");
+      writeFileSync(
         `dist/${normalizedRoute}/index.html`,
         renderTemplate(template, fromElm)
       );
       args.contentDatPayload &&
-        fs.writeFileSync(
+        writeFileSync(
           `dist/${normalizedRoute}/content.dat`,
           Buffer.from(args.contentDatPayload.buffer)
         );

package/generator/src/render.js

@@ -1,24 +1,22 @@
 // @ts-check
 
-const path = require("path");
-const mm = require("micromatch");
-const matter = require("gray-matter");
-const globby = require("globby");
-const fsPromises = require("fs").promises;
-const preRenderHtml = require("./pre-render-html.js");
-const { lookupOrPerform } = require("./request-cache.js");
-const kleur = require("kleur");
-const cookie = require("cookie-signature");
-const { compatibilityKey } = require("./compatibility-key.js");
-kleur.enabled = true;
+import * as path from "path";
+import { default as mm } from "micromatch";
+import { default as matter } from "gray-matter";
+import { globby } from "globby";
+import * as fsPromises from "fs/promises";
+import * as preRenderHtml from "./pre-render-html.js";
+import { lookupOrPerform } from "./request-cache.js";
+import * as kleur from "kleur/colors";
+import * as cookie from "cookie-signature";
+import { compatibilityKey } from "./compatibility-key.js";
+import * as fs from "fs";
 
 process.on("unhandledRejection", (error) => {
   console.error(error);
 });
 let foundErrors;
 
-module.exports = { render, runGenerator };
-
 /**
  *
  * @param {string} basePath
@@ -29,7 +27,7 @@ module.exports = { render, runGenerator };
  * @param {boolean} hasFsAccess
  * @returns
  */
-async function render(
+export async function render(
   portsFile,
   basePath,
   elmModule,
@@ -39,12 +37,12 @@ async function render(
   addBackendTaskWatcher,
   hasFsAccess
 ) {
-  const { fs, resetInMemoryFs } = require("./request-cache-fs.js")(hasFsAccess);
-  resetInMemoryFs();
+  // const { fs, resetInMemoryFs } = require("./request-cache-fs.js")(hasFsAccess);
+  // resetInMemoryFs();
   foundErrors = false;
   // since init/update are never called in pre-renders, and BackendTask.Http is called using pure NodeJS HTTP fetching
   // we can provide a fake HTTP instead of xhr2 (which is otherwise needed for Elm HTTP requests from Node)
-  XMLHttpRequest = {};
+  global.XMLHttpRequest = {};
   const result = await runElmApp(
     portsFile,
     basePath,
@@ -53,7 +51,6 @@ async function render(
     path,
     request,
     addBackendTaskWatcher,
-    fs,
     hasFsAccess
   );
   return result;
@@ -64,23 +61,29 @@ async function render(
  * @returns
  * @param {string[]} cliOptions
  * @param {any} portsFile
+ * @param {string} scriptModuleName
  */
-async function runGenerator(cliOptions, portsFile, elmModule) {
+export async function runGenerator(
+  cliOptions,
+  portsFile,
+  elmModule,
+  scriptModuleName
+) {
   global.isRunningGenerator = true;
-  const { fs, resetInMemoryFs } = require("./request-cache-fs.js")(true);
-  resetInMemoryFs();
+  // const { fs, resetInMemoryFs } = require("./request-cache-fs.js")(true);
+  // resetInMemoryFs();
   foundErrors = false;
   // since init/update are never called in pre-renders, and BackendTask.Http is called using pure NodeJS HTTP fetching
   // we can provide a fake HTTP instead of xhr2 (which is otherwise needed for Elm HTTP requests from Node)
-  XMLHttpRequest = {};
+  global.XMLHttpRequest = {};
   const result = await runGeneratorAppHelp(
     cliOptions,
     portsFile,
     "",
     elmModule,
+    scriptModuleName,
     "production",
     "",
-    fs,
     true
   );
   return result;
@@ -95,15 +98,16 @@ async function runGenerator(cliOptions, portsFile, elmModule) {
  * @param {any} portsFile
  * @param {typeof import("fs") | import("memfs").IFs} fs
  * @param {boolean} hasFsAccess
+ * @param {string} scriptModuleName
  */
 function runGeneratorAppHelp(
   cliOptions,
   portsFile,
   basePath,
   elmModule,
+  scriptModuleName,
   mode,
   pagePath,
-  fs,
   hasFsAccess
 ) {
   const isDevServer = mode !== "build";
@@ -116,7 +120,7 @@ function runGeneratorAppHelp(
     app = elmModule.Elm.Main.init({
       flags: {
         compatibilityKey,
-        argv: ["", "", ...cliOptions],
+        argv: ["", `elm-pages run ${scriptModuleName}`, ...cliOptions],
         versionMessage: "1.2.3",
       },
     });
@@ -173,7 +177,6 @@ function runGeneratorAppHelp(
                     app,
                     mode,
                     requestToPerform,
-                    fs,
                     hasFsAccess,
                     patternsToWatch
                   );
@@ -184,7 +187,6 @@ function runGeneratorAppHelp(
                     app,
                     mode,
                     requestToPerform,
-                    fs,
                     hasFsAccess,
                     requestToPerform
                   );
@@ -227,7 +229,6 @@ function runElmApp(
   pagePath,
   request,
   addBackendTaskWatcher,
-  fs,
   hasFsAccess
 ) {
   const isDevServer = mode !== "build";
@@ -241,7 +242,6 @@ function runElmApp(
       .replace(/content\.dat\/?$/, "");
 
     const modifiedRequest = { ...request, path: route };
-    // console.log("StaticHttp cache keys", Object.keys(global.staticHttpCache));
     app = elmModule.Elm.Main.init({
       flags: {
         mode,
@@ -275,9 +275,6 @@ function runElmApp(
         console.log(fromElm.value);
       } else if (fromElm.tag === "ApiResponse") {
         const args = fromElm.args[0];
-        if (mode === "build") {
-          global.staticHttpCache = args.staticHttpCache;
-        }
 
         resolve({
           kind: "api-response",
@@ -287,10 +284,6 @@ function runElmApp(
         });
       } else if (fromElm.tag === "PageProgress") {
         const args = fromElm.args[0];
-        if (mode === "build") {
-          global.staticHttpCache = args.staticHttpCache;
-        }
-
         if (isBytes) {
           resolve({
             kind: "bytes",
@@ -322,7 +315,6 @@ function runElmApp(
                     app,
                     mode,
                     requestToPerform,
-                    fs,
                     hasFsAccess,
                     patternsToWatch
                   );
@@ -333,7 +325,6 @@ function runElmApp(
                     app,
                     mode,
                     requestToPerform,
-                    fs,
                     hasFsAccess,
                     requestToPerform
                   );
@@ -406,7 +397,6 @@ async function runHttpJob(
   app,
   mode,
   requestToPerform,
-  fs,
   hasFsAccess,
   useCache
 ) {
@@ -465,7 +455,6 @@ async function runInternalJob(
   app,
   mode,
   requestToPerform,
-  fs,
   hasFsAccess,
   patternsToWatch
 ) {

package/generator/src/request-cache.js

@@ -1,6 +1,7 @@
-const path = require("path");
-const kleur = require("kleur");
-const fsPromises = require("fs/promises");
+import * as path from "path";
+import * as fsPromises from "fs/promises";
+import * as kleur from "kleur/colors";
+import { default as makeFetchHappenOriginal } from "make-fetch-happen";
 
 const defaultHttpCachePath = "./.elm-pages/http-cache";
 
@@ -13,8 +14,14 @@ const defaultHttpCachePath = "./.elm-pages/http-cache";
  * @param {boolean} hasFsAccess
  * @returns {Promise<Response>}
  */
-function lookupOrPerform(portsFile, mode, rawRequest, hasFsAccess, useCache) {
-  const makeFetchHappen = require("make-fetch-happen").defaults({
+export function lookupOrPerform(
+  portsFile,
+  mode,
+  rawRequest,
+  hasFsAccess,
+  useCache
+) {
+  const makeFetchHappen = makeFetchHappenOriginal.defaults({
     cache: mode === "build" ? "no-cache" : "default",
   });
   return new Promise(async (resolve, reject) => {
@@ -29,7 +36,7 @@ function lookupOrPerform(portsFile, mode, rawRequest, hasFsAccess, useCache) {
       const portBackendTaskPath = path.resolve(portsFile);
       // On Windows, we need cannot use paths directly and instead must use a file:// URL.
       // portBackendTask = await require(url.pathToFileURL(portBackendTaskPath).href);
-      portBackendTask = require(portBackendTaskPath);
+      portBackendTask = await import(portBackendTaskPath);
     } catch (e) {
       portBackendTaskImportError = e;
     }
@@ -270,5 +277,3 @@ async function canAccess(filePath) {
     return false;
   }
 }
-
-module.exports = { lookupOrPerform };

package/generator/src/rewrite-client-elm-json.js

@@ -1,6 +1,6 @@
-const fs = require("fs");
+import * as fs from "fs";
 
-module.exports = async function () {
+export async function rewriteClientElmJson() {
   var elmJson = JSON.parse(
     (await fs.promises.readFile("./elm.json")).toString()
   );
@@ -9,11 +9,11 @@ module.exports = async function () {
 
   await writeFileIfChanged(
     "./elm-stuff/elm-pages/client/elm.json",
-    JSON.stringify(rewriteElmJson(elmJson))
+    JSON.stringify(rewriteClientElmJsonHelp(elmJson))
   );
-};
+}
 
-function rewriteElmJson(elmJson) {
+function rewriteClientElmJsonHelp(elmJson) {
   // The internal generated file will be at:
   // ./elm-stuff/elm-pages/
   // So, we need to take the existing elmJson and

package/generator/src/rewrite-elm-json.js

@@ -1,6 +1,6 @@
-const fs = require("fs");
+import * as fs from "fs";
 
-module.exports = async function (sourceElmJsonPath, targetElmJsonPath) {
+export async function rewriteElmJson(sourceElmJsonPath, targetElmJsonPath) {
   var elmJson = JSON.parse(
     (await fs.promises.readFile(sourceElmJsonPath)).toString()
   );
@@ -9,11 +9,11 @@ module.exports = async function (sourceElmJsonPath, targetElmJsonPath) {
 
   await writeFileIfChanged(
     targetElmJsonPath,
-    JSON.stringify(rewriteElmJson(elmJson))
+    JSON.stringify(rewriteElmJsonHelp(elmJson))
   );
-};
+}
 
-function rewriteElmJson(elmJson) {
+function rewriteElmJsonHelp(elmJson) {
   // The internal generated file will be at:
   // ./elm-stuff/elm-pages/
   // So, we need to take the existing elmJson and