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

package/generator/src/build.js

@@ -1,21 +1,25 @@
-const fs = require("./dir-helpers.js");
-const fsPromises = require("fs").promises;
-
-const { runElmReview } = require("./compile-elm.js");
-const { restoreColorSafe } = require("./error-formatter");
-const path = require("path");
-const spawnCallback = require("cross-spawn").spawn;
-const codegen = require("./codegen.js");
-const terser = require("terser");
-const os = require("os");
-const { Worker, SHARE_ENV } = require("worker_threads");
-const { ensureDirSync } = require("./file-helpers.js");
-const { generateClientFolder } = require("./codegen.js");
-const which = require("which");
-const { build } = require("vite");
-const preRenderHtml = require("./pre-render-html.js");
-const esbuild = require("esbuild");
-const { createHash } = require("crypto");
+import * as fs from "./dir-helpers.js";
+import * as fsPromises from "fs/promises";
+import { runElmReview } from "./compile-elm.js";
+import { restoreColorSafe } from "./error-formatter.js";
+import * as path from "path";
+import { spawn as spawnCallback } from "cross-spawn";
+import * as codegen from "./codegen.js";
+import * as terser from "terser";
+import * as os from "os";
+import { Worker, SHARE_ENV } from "worker_threads";
+import { ensureDirSync } from "./file-helpers.js";
+import { generateClientFolder } from "./codegen.js";
+import { default as which } from "which";
+import { build } from "vite";
+import * as preRenderHtml from "./pre-render-html.js";
+import * as esbuild from "esbuild";
+import { createHash } from "crypto";
+import { merge_vite_configs } from "./vite-utils.js";
+import { resolveConfig } from "./config.js";
+import * as globby from "globby";
+import { fileURLToPath } from "url";
+import { copyFile } from "fs/promises";
 
 let pool = [];
 let pagesReady;
@@ -28,7 +32,6 @@ let pagesReadyCalled = false;
 let activeWorkers = 0;
 let buildError = false;
 
-const DIR_PATH = process.cwd();
 const OUTPUT_FILE_NAME = "elm.js";
 
 process.on("unhandledRejection", (error) => {
@@ -36,11 +39,9 @@ process.on("unhandledRejection", (error) => {
   process.exitCode = 1;
 });
 
-const ELM_FILE_PATH = path.join(
-  DIR_PATH,
-  "./elm-stuff/elm-pages",
-  OUTPUT_FILE_NAME
-);
+function ELM_FILE_PATH() {
+  return path.join(process.cwd(), "./elm-stuff/elm-pages", OUTPUT_FILE_NAME);
+}
 
 async function ensureRequiredDirs() {
   ensureDirSync(`dist`);
@@ -65,50 +66,41 @@ async function ensureRequiredExecutables() {
   }
 }
 
-async function run(options) {
+export async function run(options) {
   try {
     await ensureRequiredDirs();
     await ensureRequiredExecutables();
-    // since init/update are never called in pre-renders, and DataSource.Http is called using pure NodeJS HTTP fetching
+    // 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)
 
     const generateCode = codegen.generate(options.base);
 
     await generateCode;
+
+    const config = await resolveConfig();
     await fsPromises.writeFile(
       "elm-stuff/elm-pages/index.html",
-      preRenderHtml.templateHtml()
+      preRenderHtml.templateHtml(false, config.headTagsTemplate)
     );
-
-    const config = await import(
-      path.join(process.cwd(), "elm-pages.config.mjs")
-    )
-      .then(async (elmPagesConfig) => {
-        return elmPagesConfig.default || {};
-      })
-      .catch((error) => {
-        console.warn(
-          "No `elm-pages.config.mjs` file found. Using default config."
-        );
-        return {};
-      });
-    const viteConfig = config.vite || {};
-
-    const buildComplete = build({
-      configFile: false,
-      root: process.cwd(),
-      base: options.base,
-      ssr: false,
-
-      build: {
-        manifest: true,
-        outDir: "dist",
-        rollupOptions: {
-          input: "elm-stuff/elm-pages/index.html",
+    const viteConfig = merge_vite_configs(
+      {
+        configFile: false,
+        root: process.cwd(),
+        base: options.base,
+        ssr: false,
+
+        build: {
+          manifest: true,
+          outDir: "dist",
+          rollupOptions: {
+            input: "elm-stuff/elm-pages/index.html",
+          },
         },
       },
-      ...viteConfig,
-    });
+      config.vite || {}
+    );
+
+    const buildComplete = build(viteConfig);
     const compileClientDone = compileElm(options);
     await buildComplete;
     await compileClientDone;
@@ -119,53 +111,71 @@ async function run(options) {
       withoutExtension
     );
     const assetManifestPath = path.join(process.cwd(), "dist/manifest.json");
-    const manifest = require(assetManifestPath);
+    const manifest = (
+      await import(assetManifestPath, {
+        assert: { type: "json" },
+      })
+    ).default;
     const indexTemplate = await fsPromises.readFile(
       "dist/elm-stuff/elm-pages/index.html",
       "utf-8"
     );
-    const preloads = `<link rel="modulepreload" href="/${manifest["elm-stuff/elm-pages/index.html"]["file"]}" />`;
+    const preloadFiles = [
+      `elm.${browserElmHash}.js`,
+      ...Object.entries(manifest).map((entry) => entry[1].file),
+    ].map((file) => path.join(options.base, file));
+    const userProcessedPreloads = preloadFiles.flatMap((file) => {
+      const userPreloadForFile = config.preloadTagForFile(file);
+      if (userPreloadForFile === true) {
+        return [defaultPreloadForFile(file)];
+      } else if (userPreloadForFile === false) {
+        return [];
+      } else if (typeof userPreloadForFile === "string") {
+        return [userPreloadForFile];
+      } else {
+        throw `I expected preloadTagForFile in elm-pages.config.mjs to return a string or boolean, but instead it returned: ${userPreloadForFile}`;
+      }
+    });
 
     const processedIndexTemplate = indexTemplate
-      .replace("<!-- PLACEHOLDER_PRELOADS -->", preloads)
+      .replace("<!-- PLACEHOLDER_PRELOADS -->", userProcessedPreloads.join(""))
       .replace(
         '<script defer src="/elm.js" type="text/javascript"></script>',
         `<script defer src="/elm.${browserElmHash}.js" type="text/javascript"></script>`
       );
     await fsPromises.writeFile("dist/template.html", processedIndexTemplate);
     await fsPromises.unlink(assetManifestPath);
-
-    const portDataSourceCompiled = esbuild
+    const portBackendTaskCompiled = esbuild
       .build({
-        entryPoints: ["./port-data-source"],
+        entryPoints: ["./custom-backend-task"],
         platform: "node",
-        outfile: ".elm-pages/compiled-ports/port-data-source.js",
+        outfile: ".elm-pages/compiled-ports/custom-backend-task.mjs",
         assetNames: "[name]-[hash]",
         chunkNames: "chunks/[name]-[hash]",
         outExtension: { ".js": ".js" },
         metafile: true,
         bundle: true,
-        watch: false,
-        logLevel: "error",
+        format: "esm",
+        packages: "external",
+        logLevel: "silent",
       })
       .then((result) => {
-        global.portsFilePath = Object.keys(result.metafile.outputs)[0];
+        try {
+          global.portsFilePath = Object.keys(result.metafile.outputs)[0];
+        } catch (e) {}
       })
       .catch((error) => {
-        if (
-          error.errors.length === 1 &&
-          error.errors[0].text.includes(
-            `Could not resolve "./port-data-source"`
-          )
-        ) {
-          console.warn("No port-data-source file found.");
-        } else {
-          console.error("Failed to load port-data-source file", error);
+        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
+          console.error("Failed to start custom-backend-task watcher", error);
         }
       });
     // TODO extract common code for compiling ports file?
 
-    XMLHttpRequest = {};
+    global.XMLHttpRequest = {};
     const compileCli = compileCliApp(options);
     try {
       await compileCli;
@@ -184,7 +194,7 @@ async function run(options) {
       }
       process.exit(1);
     }
-    await portDataSourceCompiled;
+    await portBackendTaskCompiled;
     const cliDone = runCli(options);
     await cliDone;
 
@@ -202,8 +212,9 @@ async function run(options) {
       processedIndexTemplate
     );
   } catch (error) {
+    console.trace(error);
     if (error) {
-      console.error(error);
+      console.error(restoreColorSafe(error));
     }
     buildError = true;
     process.exitCode = 1;
@@ -215,6 +226,8 @@ async function run(options) {
  */
 function initWorker(basePath, whenDone) {
   return new Promise((resolve, reject) => {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
     activeWorkers += 1;
     let newWorker = {
       worker: new Worker(path.join(__dirname, "./render-worker.js"), {
@@ -343,7 +356,7 @@ async function fingerprintElmAsset(fullOutputPath, withoutExtension) {
   return fileHash;
 }
 
-function elmOptimizeLevel2(outputPath, cwd) {
+export function elmOptimizeLevel2(outputPath, cwd) {
   return new Promise((resolve, reject) => {
     const optimizedOutputPath = outputPath + ".opt";
     const subprocess = spawnCallback(
@@ -364,7 +377,7 @@ function elmOptimizeLevel2(outputPath, cwd) {
 
     subprocess.on("close", async (code) => {
       if (code === 0) {
-        await fs.copyFile(optimizedOutputPath, outputPath);
+        await copyFile(optimizedOutputPath, outputPath);
         resolve();
       } else {
         if (!buildError) {
@@ -403,7 +416,7 @@ async function spawnElmMake(mode, options, elmEntrypointPath, outputPath, cwd) {
       "function appendSubmitter (myFormData, event) { event.submitter && event.submitter.name && event.submitter.name.length > 0 ? myFormData.append(event.submitter.name, event.submitter.value) : myFormData;  return myFormData }; return " +
         (options.debug
           ? "_Json_wrap(Array.from(appendSubmitter(new FormData(_Json_unwrap(event).target), _Json_unwrap(event))))"
-          : "Array.from(new FormData(event.target))")
+          : "[...(appendSubmitter(new FormData(event.target), event))]")
     )
   );
 }
@@ -534,7 +547,7 @@ async function runTerser(filePath) {
   }
 }
 
-async function compileCliApp(options) {
+export async function compileCliApp(options) {
   await spawnElmMake(
     // TODO should be --optimize, but there seems to be an issue with the html to JSON with --optimize
     options.debug ? "debug" : "optimize",
@@ -544,7 +557,7 @@ async function compileCliApp(options) {
     path.join(process.cwd(), "elm-stuff/elm-pages")
   );
 
-  const elmFileContent = await fsPromises.readFile(ELM_FILE_PATH, "utf-8");
+  const elmFileContent = await fsPromises.readFile(ELM_FILE_PATH(), "utf-8");
   // Source: https://github.com/elm-explorations/test/blob/d5eb84809de0f8bbf50303efd26889092c800609/src/Elm/Kernel/HtmlAsJson.js
   const forceThunksSource = ` _HtmlAsJson_toJson(x)
 }
@@ -590,7 +603,7 @@ function _HtmlAsJson_toJson(html) {
 `;
 
   await fsPromises.writeFile(
-    ELM_FILE_PATH,
+    ELM_FILE_PATH().replace(/\.js$/, ".cjs"),
     elmFileContent
       .replace(
         /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_JSON_STRINGIFY.\)/g,
@@ -605,14 +618,14 @@ function _HtmlAsJson_toJson(html) {
 async function runAdapter(adaptFn, processedIndexTemplate) {
   try {
     await adaptFn({
-      renderFunctionFilePath: "./elm-stuff/elm-pages/elm.js",
+      renderFunctionFilePath: "./elm-stuff/elm-pages/elm.cjs",
       routePatterns: JSON.parse(
         await fsPromises.readFile("./dist/route-patterns.json", "utf-8")
       ),
       apiRoutePatterns: JSON.parse(
         await fsPromises.readFile("./dist/api-patterns.json", "utf-8")
       ),
-      portsFilePath: "./.elm-pages/compiled-ports/port-data-source.js",
+      portsFilePath: "./.elm-pages/compiled-ports/custom-backend-task.mjs",
       htmlTemplate: processedIndexTemplate,
     });
     console.log("Success - Adapter script complete");
@@ -627,6 +640,31 @@ async function runAdapter(adaptFn, processedIndexTemplate) {
   }
 }
 
+// Source: https://github.com/vitejs/vite/blob/c53ffec3465d2d28d08d29ca61313469e03f5dd6/playground/ssr-vue/src/entry-server.js#L50-L68
+/**
+ * @param {string} file
+ */
+function defaultPreloadForFile(file) {
+  if (file.endsWith(".js")) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`;
+  } else if (file.endsWith(".css")) {
+    return `<link rel="preload" href="${file}" as="style">`;
+  } else if (file.endsWith(".woff")) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
+  } else if (file.endsWith(".woff2")) {
+    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
+  } else if (file.endsWith(".gif")) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`;
+  } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`;
+  } else if (file.endsWith(".png")) {
+    return ` <link rel="preload" href="${file}" as="image" type="image/png">`;
+  } else {
+    // TODO
+    return "";
+  }
+}
+
 /** @typedef { { route : string; contentJson : string; head : SeoTag[]; html: string; body: string; } } FromElm */
 /** @typedef {HeadTag | JsonLdTag} SeoTag */
 /** @typedef {{ name: string; attributes: string[][]; type: 'head' }} HeadTag */
@@ -641,5 +679,3 @@ async function runAdapter(adaptFn, processedIndexTemplate) {
  * @param {string} contentJsonString
  * @returns {string}
  */
-
-module.exports = { run };