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

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 };

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 * as fsExtra from "fs-extra";
+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());
@@ -14,7 +17,7 @@ async function run(name) {
 
   if (!fs.existsSync(name)) {
     try {
-      copySync(template, appRoot);
+      fsExtra.copySync(template, appRoot);
       fs.renameSync(
         path.resolve(appRoot, "gitignore"),
         path.resolve(appRoot, ".gitignore")
@@ -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,12 @@
-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 path from "node:path";
+import { fileURLToPath } from "node:url";
+import { packageVersion } from "./compatibility-key.js";
 
 /** @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",
@@ -17,28 +18,34 @@ function wrapHtml(basePath, fromElm, contentDatPayload) {
   };
 }
 
-function templateHtml() {
+/**
+ * @param {boolean} devMode
+ * @param {(context: {cliVersion: string;}) => string} 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>
-    <!-- PLACEHOLDER_PRELOADS -->
-    <script defer src="/elm.js" type="text/javascript"></script>
-    <script defer src="${path.join(
-      __dirname,
-      "../static-code/elm-pages.js"
-    )}" type="module"></script>
-    <link rel="stylesheet" href="/style.css" />
     <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"
-    />
+    ${
+      devMode
+        ? `<script src="/hmr.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="/dev-style.css">`
+        : `<!-- PLACEHOLDER_PRELOADS -->`
+    }
+    <script defer src="/elm.js" type="text/javascript"></script>
+    ${
+      devMode
+        ? `<script src="/elm-pages.js" type="module"></script>`
+        : `<script defer src="${path.join(
+            __dirname,
+            "../static-code/elm-pages.js"
+          )}" type="module"></script>`
+    }
+    ${indent(userHeadTagsTemplate({ cliVersion: packageVersion }))}
     <!-- PLACEHOLDER_HEAD_AND_DATA -->
   </head>
   <body>
@@ -48,10 +55,20 @@ function templateHtml() {
 </html>`;
 }
 
+/**
+ * @param {string} snippet
+ */
+function indent(snippet) {
+  return snippet
+    .split("\n")
+    .map((line) => `    ${line}`)
+    .join("\n");
+}
+
 /**
  * @param {string} processedTemplate
  */
-function replaceTemplate(processedTemplate, info) {
+export function replaceTemplate(processedTemplate, info) {
   return processedTemplate
     .replace(
       /<!--\s*PLACEHOLDER_HEAD_AND_DATA\s*-->/,
@@ -62,9 +79,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-test.js

@@ -0,0 +1,109 @@
+const renderer = require("../../generator/src/render");
+const path = require("path");
+const compiledElmPath = path.join(process.cwd(), "elm-stuff/elm-pages/elm.js");
+const codegen = require("./codegen.js");
+const {
+  compileElmForBrowser,
+  runElmReview,
+  compileCliApp,
+} = require("./compile-elm.js");
+const { restoreColorSafe } = require("./error-formatter");
+
+async function run({ pathname, serverRequest }) {
+  try {
+    const basePath = "/";
+    await codegen.generate(basePath);
+    console.log("Compiling...");
+    await compileCliApp(
+      { port: 1234, base: basePath, https: false, debug: true },
+      ".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")
+    );
+    console.log("Compiling DONE");
+
+    const portsFilePath =
+      ".elm-pages/compiled-ports/custom-backend-task-FA2IJND6.js";
+    const mode = "dev-server";
+
+    const renderResult = await renderer.render(
+      portsFilePath,
+      basePath,
+      require(compiledElmPath),
+      mode,
+      pathname,
+      serverRequest,
+      function (patterns) {},
+      true
+    );
+    console.log("renderResult", renderResult);
+  } catch (error) {
+    console.log("ERROR");
+    console.log(restoreColorSafe(error));
+  }
+}
+
+// run({
+//   serverRequest: {
+//     method: "POST",
+//     headers: {
+//       host: "localhost:1234",
+//       cookie: "darkMode=%7B%7D.X1hjuYBa1OZulUomD5yrPy6VcYeY3sC7SKZVGViT0Q4",
+//       accept: "*/*",
+//       "accept-language": "en-US,en;q=0.9",
+//       connection: "keep-alive",
+//       "content-type": "application/x-www-form-urlencoded",
+//       origin: "http://localhost:1234",
+//       referer: "http://localhost:1234/dark-mode",
+//     },
+//     rawUrl: "http://localhost:1234/dark-mode/content.dat",
+//     body: "name=1",
+//     requestTime: 1671391652138,
+//     multiPartFormData: null,
+//   },
+//   pathname: "/dark-mode/content.dat",
+// });
+
+// run({
+//   pathname: "/fetcher/content.dat",
+//   serverRequest: {
+//     method: "POST",
+//     headers: {
+//       host: "localhost:1234",
+//       cookie: "darkMode=%7B%7D",
+//       accept: "*/*",
+//       "content-type": "application/x-www-form-urlencoded",
+//       origin: "http://localhost:1234",
+//       referer: "http://localhost:1234/fetcher",
+//     },
+//     rawUrl: "http://localhost:1234/fetcher/content.dat",
+//     body: "name=1",
+//     requestTime: 1671296755228,
+//     multiPartFormData: null,
+//   },
+// });
+
+run({
+  serverRequest: {
+    method: "POST",
+    headers: {
+      host: "localhost:1234",
+      "cache-control": "max-age=0",
+      accept:
+        "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
+      "content-type": "application/x-www-form-urlencoded",
+      referer: "http://localhost:1234/login",
+      cookie:
+        "darkMode=%7B%22darkMode%22%3A%22%22%7D.vtrl8xZXjtx9E3iidJrgurAz4Vk7rnMQmf6zKiAbwNo; mysession=%7B%7D.YX1rW5PIpRFkjgIjLn4p9iyl5r9kWLYHqQUYxAYKJgQ",
+    },
+    rawUrl: "http://localhost:1234/login/content.dat",
+    body: "name=1",
+    requestTime: 1671391652138,
+    multiPartFormData: null,
+  },
+  pathname: "/login/content.dat",
+});

package/generator/src/render-worker.js

@@ -1,19 +1,19 @@
-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 "node:path";
+import * as fs from "./dir-helpers.js";
+import { readFileSync, writeFileSync } from "node:fs";
+import { parentPort, threadId, workerData } from "node:worker_threads";
+import * as url from "node:url";
 
 async function run({ mode, pathname, serverRequest, portsFilePath }) {
   console.time(`${threadId} ${pathname}`);
   try {
-    const renderResult = await renderer(
-      portsFilePath,
+    const renderResult = await renderer.render(
+      typeof portsFilePath === "string"
+        ? await import(url.pathToFileURL(path.resolve(portsFilePath)).href)
+        : portsFilePath,
       workerData.basePath,
-      requireElm(mode),
+      await requireElm(mode),
       mode,
       pathname,
       serverRequest,
@@ -42,20 +42,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 pathAsUrl = url.pathToFileURL(compiledElmPath);
+  const warnOriginal = console.warn;
+  console.warn = function () {};
+  const Elm = (await import(pathAsUrl.toString())).default;
+  console.warn = warnOriginal;
+  return Elm;
 }
 
 async function outputString(
@@ -67,13 +64,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)
         );