elm-pages 3.0.0-beta.9 → 3.0.0

package/generator/src/build.js

@@ -1,24 +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");
-const { merge_vite_configs } = require("./vite-utils.js");
-const { resolveConfig } = require("./config.js");
-const globby = require("globby");
+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;
@@ -31,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) => {
@@ -39,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`);
@@ -68,11 +66,21 @@ async function ensureRequiredExecutables() {
   }
 }
 
-async function run(options) {
+export async function run(options) {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+  console.warn = function (...messages) {
+    // This is a temporary hack to avoid this warning. elm-pages manages compiling the Elm code without Vite's involvement, so it is external to Vite.
+    // There is a pending issue to allow having external scripts in Vite, once this issue is fixed we can remove this hack:
+    // https://github.com/vitejs/vite/issues/3533
+    if (!messages[0]?.startsWith(`<script src="/elm.js">`)) {
+      console.info(...messages);
+    }
+  };
   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);
@@ -98,6 +106,9 @@ async function run(options) {
             input: "elm-stuff/elm-pages/index.html",
           },
         },
+        optimizeDeps: {
+          include: [],
+        },
       },
       config.vite || {}
     );
@@ -113,7 +124,9 @@ async function run(options) {
       withoutExtension
     );
     const assetManifestPath = path.join(process.cwd(), "dist/manifest.json");
-    const manifest = require(assetManifestPath);
+    const manifest = JSON.parse(
+      await fsPromises.readFile(assetManifestPath, { encoding: "utf-8" })
+    );
     const indexTemplate = await fsPromises.readFile(
       "dist/elm-stuff/elm-pages/index.html",
       "utf-8"
@@ -143,18 +156,18 @@ async function run(options) {
       );
     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,
+        format: "esm",
+        packages: "external",
         logLevel: "silent",
       })
       .then((result) => {
@@ -163,21 +176,92 @@ async function run(options) {
         } catch (e) {}
       })
       .catch((error) => {
-        const portDataSourceFileFound =
-          globby.sync("./port-data-source.*").length > 0;
-        if (portDataSourceFileFound) {
-          // don't present error if there are no files matching port-data-source
-          // if there are files matching port-data-source, warn the user in case something went wrong loading it
-          console.error("Failed to start port-data-source watcher", 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;
       await compileClientDone;
+      await portBackendTaskCompiled;
+      const inlineRenderCode = `
+import * as renderer from "./render.js";
+import * as elmModule from "${path.resolve("./elm-stuff/elm-pages/elm.cjs")}";
+import * as url from 'url';
+${
+  global.portsFilePath
+    ? `import * as customBackendTask from "${path.resolve(
+        global.portsFilePath
+      )}";`
+    : `const customBackendTask = {};`
+}
+
+import * as preRenderHtml from "./pre-render-html.js";
+const basePath = \`${options.base || "/"}\`;
+const htmlTemplate = ${JSON.stringify(processedIndexTemplate)};
+const mode = "build";
+const addWatcher = () => {};
+
+export async function render(request) {
+  const requestTime = new Date();
+  const response = await renderer.render(
+    customBackendTask,
+    basePath,
+    elmModule.default,
+    mode,
+    (new url.URL(request.rawUrl)).pathname,
+    request,
+    addWatcher,
+    false
+  );
+  console.dir(response);
+  if (response.kind === "bytes") {
+    return {
+        body: response.contentDatPayload.buffer,
+        statusCode: response.statusCode,
+        kind: response.kind,
+        headers: response.headers,
+    }
+  } else if (response.kind === "api-response") {
+    // isBase64Encoded
+    return {
+        body: response.body.body,
+        statusCode: response.statusCode,
+        kind: response.kind,
+        headers: response.headers,
+        isBase64Encoded: response.body.isBase64Encoded,
+    }
+  } else {
+    return {
+        body: preRenderHtml.replaceTemplate(htmlTemplate, response.htmlString),
+        statusCode: response.statusCode,
+        kind: response.kind,
+        headers: response.headers,
+    }
+  }
+}
+`;
+      await esbuild.build({
+        format: "esm",
+        platform: "node",
+        stdin: { contents: inlineRenderCode, resolveDir: __dirname },
+        bundle: true,
+        // TODO do I need to make the outfile joined with the current working directory?
+
+        outfile: ".elm-pages/compiled/render.mjs",
+        // external: ["node:*", ...options.external],
+        packages: "external",
+        minify: true,
+        // absWorkingDir: projectDirectory,
+        // banner: { js: `#!/usr/bin/env node\n\n${ESM_REQUIRE_SHIM}` },
+      });
     } catch (cliError) {
       // TODO make sure not to print duplicate error output if cleaner review output is printed
       console.error(cliError);
@@ -192,7 +276,7 @@ async function run(options) {
       }
       process.exit(1);
     }
-    await portDataSourceCompiled;
+    await portBackendTaskCompiled;
     const cliDone = runCli(options);
     await cliDone;
 
@@ -210,8 +294,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;
@@ -223,6 +308,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"), {
@@ -351,7 +438,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(
@@ -372,7 +459,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) {
@@ -411,7 +498,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))]")
     )
   );
 }
@@ -441,8 +528,9 @@ function modeToOptions(mode) {
  */
 function runElmMake(mode, options, elmEntrypointPath, outputPath, cwd) {
   return new Promise(async (resolve, reject) => {
+    const executableName = options.executableName || "lamdera";
     const subprocess = spawnCallback(
-      `lamdera`,
+      executableName,
       [
         "make",
         elmEntrypointPath,
@@ -499,7 +587,7 @@ function runElmMake(mode, options, elmEntrypointPath, outputPath, cwd) {
 /**
  * @param {string} filePath
  */
-async function runTerser(filePath) {
+export async function runTerser(filePath) {
   console.log("Running terser");
   const minifiedElm = await terser.minify(
     (await fsPromises.readFile(filePath)).toString(),
@@ -542,7 +630,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",
@@ -552,7 +640,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)
 }
@@ -598,7 +686,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,
@@ -613,19 +701,17 @@ function _HtmlAsJson_toJson(html) {
 async function runAdapter(adaptFn, processedIndexTemplate) {
   try {
     await adaptFn({
-      renderFunctionFilePath: "./elm-stuff/elm-pages/elm.js",
+      renderFunctionFilePath: "./.elm-pages/compiled/render.mjs",
       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",
-      htmlTemplate: processedIndexTemplate,
     });
     console.log("Success - Adapter script complete");
   } catch (error) {
-    console.error("ERROR - Adapter script failed");
+    console.trace("ERROR - Adapter script failed", error);
     try {
       console.error(JSON.stringify(error));
     } catch (parsingError) {
@@ -674,5 +760,3 @@ function defaultPreloadForFile(file) {
  * @param {string} contentJsonString
  * @returns {string}
  */
-
-module.exports = { run };