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

package/generator/src/cli.js

@@ -1,21 +1,28 @@
 #!/usr/bin/env node
+"use strict";
+
+import * as build from "./build.js";
+import * as dev from "./dev-server.js";
+import * as init from "./init.js";
+import * as codegen from "./codegen.js";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { restoreColorSafe } from "./error-formatter.js";
+import * as renderer from "./render.js";
+import { globbySync } from "globby";
+import * as esbuild from "esbuild";
+import { rewriteElmJson } from "./rewrite-elm-json.js";
+import { ensureDirSync, deleteIfExists } from "./file-helpers.js";
+import * as url from "url";
+
+import * as commander from "commander";
+import { runElmCodegenInstall } from "./elm-codegen.js";
+import { packageVersion } from "./compatibility-key.js";
 
-const build = require("./build.js");
-const dirHelpers = require("./dir-helpers.js");
-const dev = require("./dev-server.js");
-const init = require("./init.js");
-const codegen = require("./codegen.js");
-const fs = require("fs");
-const path = require("path");
-const { restoreColorSafe } = require("./error-formatter");
-
-const commander = require("commander");
-const { compileCliApp } = require("./compile-elm.js");
-const { runElmCodegenInstall } = require("./elm-codegen.js");
 const Argument = commander.Argument;
 const Option = commander.Option;
-
-const packageVersion = require("../../package.json").version;
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 async function main() {
   const program = new commander.Command();
@@ -84,66 +91,208 @@ async function main() {
     });
 
   program
-    .command("codegen <moduleName>")
-    .description("run a generator")
+    .command("run <moduleName>")
+    .description("run an elm-pages script")
     .allowUnknownOption()
     .allowExcessArguments()
     .action(async (moduleName, options, options2) => {
+      const unprocessedCliOptions = options2.args.splice(
+        options2.processedArgs.length,
+        options2.args.length
+      );
       if (!/^[A-Z][a-zA-Z0-9_]*(\.[A-Z][a-zA-Z0-9_]*)*$/.test(moduleName)) {
         throw `Invalid module name "${moduleName}", must be in the format of an Elm module`;
       }
       const splitModuleName = moduleName.split(".");
       const expectedFilePath = path.join(
         process.cwd(),
-        "codegen",
+        "script/src/",
         `${splitModuleName.join("/")}.elm`
       );
       if (!fs.existsSync(expectedFilePath)) {
         throw `I couldn't find a module named ${expectedFilePath}`;
       }
       try {
-        await codegen.generate("");
-        await runElmCodegenInstall();
-        await compileCliApp(
-          // { debug: true },
-          {},
-          `${splitModuleName.join("/")}.elm`,
-          path.join(process.cwd(), "codegen/elm-stuff/scaffold.js"),
-          "codegen",
-
-          path.join(process.cwd(), "codegen/elm-stuff/scaffold.js")
+        // await codegen.generate("");
+        ensureDirSync(
+          path.join(process.cwd(), ".elm-pages", "http-response-cache")
+        );
+        if (fs.existsSync("./codegen/")) {
+          await runElmCodegenInstall();
+        }
+
+        ensureDirSync("./script/elm-stuff");
+        ensureDirSync("./script/elm-stuff/elm-pages/.elm-pages");
+        await fs.promises.writeFile(
+          path.join("./script/elm-stuff/elm-pages/.elm-pages/Main.elm"),
+          generatorWrapperFile(moduleName)
+        );
+        await rewriteElmJson(
+          "./script/elm.json",
+          "./script/elm-stuff/elm-pages/elm.json"
+        );
+
+        const portBackendTaskCompiled = esbuild
+          .build({
+            entryPoints: ["./custom-backend-task"],
+            platform: "node",
+            outfile: ".elm-pages/compiled-ports/custom-backend-task.mjs",
+            assetNames: "[name]-[hash]",
+            chunkNames: "chunks/[name]-[hash]",
+            metafile: true,
+            bundle: true,
+            format: "esm",
+            packages: "external",
+            logLevel: "silent",
+          })
+          .then((result) => {
+            try {
+              return Object.keys(result.metafile.outputs)[0];
+            } catch (e) {
+              return null;
+            }
+          })
+          .catch((error) => {
+            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
+              console.error(
+                "Failed to start custom-backend-task watcher",
+                error
+              );
+            }
+          });
+        const portsPath = await portBackendTaskCompiled;
+
+        process.chdir("./script");
+        // TODO have option for compiling with --debug or not (maybe allow running with elm-optimize-level-2 as well?)
+        await build.compileCliApp({ debug: "debug" });
+        process.chdir("../");
+        fs.renameSync(
+          "./script/elm-stuff/elm-pages/elm.js",
+          "./script/elm-stuff/elm-pages/elm.cjs"
+        );
+        await renderer.runGenerator(
+          unprocessedCliOptions,
+          portsPath
+            ? await import(url.pathToFileURL(path.resolve(portsPath)).href)
+            : null,
+          await requireElm("./script/elm-stuff/elm-pages/elm.cjs"),
+          moduleName
         );
       } catch (error) {
         console.log(restoreColorSafe(error));
         process.exit(1);
       }
+    });
 
-      const elmScaffoldProgram = getAt(
-        splitModuleName,
-        require(path.join(process.cwd(), "./codegen/elm-stuff/scaffold.js")).Elm
+  program
+    .command("bundle-script <moduleName>")
+    .description("bundle an elm-pages script")
+    .option(
+      "--debug",
+      "Skip elm-optimize-level-2 and run elm make with --debug"
+    )
+    .option(
+      "--output <path>",
+      "Output path for compiled script",
+      "./myscript.mjs"
+    )
+    .option(
+      "--external <package-or-pattern>",
+      "build site to be served under a base path",
+      collect,
+      []
+    )
+    .action(async (moduleName, options, options2) => {
+      if (!/^[A-Z][a-zA-Z0-9_]*(\.[A-Z][a-zA-Z0-9_]*)*$/.test(moduleName)) {
+        throw `Invalid module name "${moduleName}", must be in the format of an Elm module`;
+      }
+      const splitModuleName = moduleName.split(".");
+      const expectedFilePath = path.join(
+        process.cwd(),
+        "script/src/",
+        `${splitModuleName.join("/")}.elm`
       );
-      const program = elmScaffoldProgram.init({
-        flags: { argv: ["", ...options2.args], versionMessage: "1.2.3" },
-      });
+      if (!fs.existsSync(expectedFilePath)) {
+        throw `I couldn't find a module named ${expectedFilePath}`;
+      }
+      try {
+        if (fs.existsSync("./codegen/")) {
+          await runElmCodegenInstall();
+        }
 
-      safeSubscribe(program, "print", (message) => {
-        console.log(message);
-      });
-      safeSubscribe(program, "printAndExitFailure", (message) => {
-        console.log(message);
+        ensureDirSync("./script/elm-stuff");
+        ensureDirSync("./script/elm-stuff/elm-pages/.elm-pages");
+        await fs.promises.writeFile(
+          path.join("./script/elm-stuff/elm-pages/.elm-pages/Main.elm"),
+          generatorWrapperFile(moduleName)
+        );
+        await rewriteElmJson(
+          "./script/elm.json",
+          "./script/elm-stuff/elm-pages/elm.json"
+        );
+
+        process.chdir("./script");
+        // TODO have option for compiling with --debug or not (maybe allow running with elm-optimize-level-2 as well?)
+        console.log("Compiling...");
+        await build.compileCliApp({ debug: options.debug });
+        process.chdir("../");
+        if (!options.debug) {
+          console.log("Running elm-optimize-level-2...");
+          await build.elmOptimizeLevel2(
+            "./script/elm-stuff/elm-pages/elm.js",
+            process.cwd()
+          );
+        }
+        fs.renameSync(
+          "./script/elm-stuff/elm-pages/elm.js",
+          "./script/elm-stuff/elm-pages/elm.cjs"
+        );
+        // TODO allow no custom-backend-task
+        const portBackendTaskFileFound =
+          globbySync("./custom-backend-task.*").length > 0;
+
+        const scriptRunner = `${
+          portBackendTaskFileFound
+            ? `import * as customBackendTask from "${path.resolve(
+                "./custom-backend-task"
+              )}";`
+            : "const customBackendTask = {};"
+        }
+import * as renderer from "./render.js";
+import { default as Elm } from "${path.resolve(
+          "./script/elm-stuff/elm-pages/elm.cjs"
+        )}";
+
+await renderer.runGenerator(
+  [...process.argv].splice(2),
+  customBackendTask,
+  Elm,
+  "${moduleName}"
+);
+        `;
+        // source: https://github.com/evanw/esbuild/pull/2067#issuecomment-1073039746
+        const ESM_REQUIRE_SHIM = `
+await(async()=>{let{dirname:e}=await import("path"),{fileURLToPath:i}=await import("url");if(typeof globalThis.__filename>"u"&&(globalThis.__filename=i(import.meta.url)),typeof globalThis.__dirname>"u"&&(globalThis.__dirname=e(globalThis.__filename)),typeof globalThis.require>"u"){let{default:a}=await import("module");globalThis.require=a.createRequire(import.meta.url)}})();
+`;
+
+        await esbuild.build({
+          format: "esm",
+          platform: "node",
+          stdin: { contents: scriptRunner, resolveDir: __dirname },
+          bundle: true,
+          outfile: options.output,
+          external: ["node:*", ...options.external],
+          minify: true,
+          banner: { js: `#!/usr/bin/env node\n\n${ESM_REQUIRE_SHIM}` },
+        });
+      } catch (error) {
+        console.log(restoreColorSafe(error));
         process.exit(1);
-      });
-      safeSubscribe(program, "printAndExitSuccess", (message) => {
-        console.log(message);
-        process.exit(0);
-      });
-      safeSubscribe(program, "writeFile", async (info) => {
-        const filePath = path.join(process.cwd(), "app", info.path);
-        await dirHelpers.tryMkdir(path.dirname(filePath));
-        fs.writeFileSync(filePath, info.body);
-        console.log("Success! Created file", filePath);
-        process.exit(0);
-      });
+      }
     });
 
   program
@@ -152,7 +301,7 @@ async function main() {
     .option("--port <number>", "serve site at localhost:<port>", "8000")
     .action(async (options) => {
       await codegen.generate("/");
-      const DocServer = require("elm-doc-preview");
+      const DocServer = (await import("elm-doc-preview")).default;
       const server = new DocServer({
         port: options.port,
         browser: true,
@@ -180,7 +329,8 @@ function getAt(properties, object) {
 }
 
 function safeSubscribe(program, portName, subscribeFunction) {
-  program.ports[portName] &&
+  program.ports &&
+    program.ports[portName] &&
     program.ports[portName].subscribe(subscribeFunction);
 }
 
@@ -218,5 +368,59 @@ function normalizeUrl(rawPagePath) {
   // with detecting whether the path contains the base.
   return `/${segments.join("/")}`;
 }
+/**
+ * @param {string} compiledElmPath
+ */
+async function requireElm(compiledElmPath) {
+  const warnOriginal = console.warn;
+  console.warn = function () {};
+
+  let Elm = (await import(path.resolve(compiledElmPath))).default;
+  console.warn = warnOriginal;
+  return Elm;
+}
+
+/**
+ * @param {string} moduleName
+ */
+function generatorWrapperFile(moduleName) {
+  return `port module Main exposing (main)
+
+import Bytes
+import BackendTask exposing (BackendTask)
+import FatalError
+import Cli.Program as Program
+import Json.Decode as Decode
+import Json.Encode as Encode
+import Pages.Internal.Platform.GeneratorApplication
+import ${moduleName}
+
+
+main : Program.StatefulProgram Pages.Internal.Platform.GeneratorApplication.Model Pages.Internal.Platform.GeneratorApplication.Msg (BackendTask FatalError.FatalError ()) Pages.Internal.Platform.GeneratorApplication.Flags
+main =
+    Pages.Internal.Platform.GeneratorApplication.app
+        { data = ${moduleName}.run
+        , toJsPort = toJsPort
+        , fromJsPort = fromJsPort identity
+        , gotBatchSub = gotBatchSub identity
+        , sendPageData = sendPageData
+        }
+
+
+port toJsPort : Encode.Value -> Cmd msg
+
+
+port fromJsPort : (Decode.Value -> msg) -> Sub msg
+
+
+port gotBatchSub : (Decode.Value -> msg) -> Sub msg
+
+
+port sendPageData : { oldThing : Encode.Value, binaryPageData : Bytes.Bytes } -> Cmd msg
+`;
+}
+function collect(value, previous) {
+  return previous.concat([value]);
+}
 
 main();

package/generator/src/codegen.js

@@ -1,21 +1,24 @@
-const fs = require("fs");
-const fsExtra = require("fs-extra");
-const copyModifiedElmJson = require("./rewrite-elm-json.js");
-const copyModifiedElmJsonClient = require("./rewrite-client-elm-json.js");
-const { elmPagesCliFile, elmPagesUiFile } = require("./elm-file-constants.js");
-const spawnCallback = require("cross-spawn").spawn;
-const which = require("which");
-const {
-  generateTemplateModuleConnector,
-} = require("./generate-template-module-connector.js");
-const path = require("path");
-const { ensureDirSync, deleteIfExists } = require("./file-helpers.js");
+import * as fs from "node:fs";
+import * as fsExtra from "fs-extra/esm";
+import { rewriteElmJson } from "./rewrite-elm-json.js";
+import { rewriteClientElmJson } from "./rewrite-client-elm-json.js";
+import { elmPagesCliFile, elmPagesUiFile } from "./elm-file-constants.js";
+import { spawn as spawnCallback } from "cross-spawn";
+import { default as which } from "which";
+import { generateTemplateModuleConnector } from "./generate-template-module-connector.js";
+
+import * as path from "path";
+import { ensureDirSync, deleteIfExists } from "./file-helpers.js";
+import { fileURLToPath } from "url";
 global.builtAt = new Date();
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 /**
  * @param {string} basePath
  */
-async function generate(basePath) {
+export async function generate(basePath) {
   const cliCode = await generateTemplateModuleConnector(basePath, "cli");
   const browserCode = await generateTemplateModuleConnector(
     basePath,
@@ -63,7 +66,7 @@ async function generate(basePath) {
       browserCode.fetcherModules
     ),
     // write modified elm.json to elm-stuff/elm-pages/
-    copyModifiedElmJson(),
+    rewriteElmJson("./elm.json", "./elm-stuff/elm-pages/elm.json"),
     // ...(await listFiles("./Pages/Internal")).map(copyToBoth),
   ]);
 }
@@ -85,7 +88,7 @@ async function newCopyBoth(modulePath) {
   );
 }
 
-async function generateClientFolder(basePath) {
+export async function generateClientFolder(basePath) {
   const browserCode = await generateTemplateModuleConnector(
     basePath,
     "browser"
@@ -97,7 +100,7 @@ async function generateClientFolder(basePath) {
   await newCopyBoth("SharedTemplate.elm");
   await newCopyBoth("SiteConfig.elm");
 
-  await copyModifiedElmJsonClient();
+  await rewriteClientElmJson();
   await fsExtra.copy("./app", "./elm-stuff/elm-pages/client/app", {
     recursive: true,
   });
@@ -174,15 +177,16 @@ async function copyToBoth(moduleToCopy) {
     copyFileEnsureDir(
       path.join(__dirname, moduleToCopy),
       path.join(`./.elm-pages/`, moduleToCopy)
-   ),
-   copyFileEnsureDir(
+    ),
+    copyFileEnsureDir(
       path.join(__dirname, moduleToCopy),
       path.join(`./elm-stuff/elm-pages/client/.elm-pages`, moduleToCopy)
-   ),
-  copyFileEnsureDir(
+    ),
+    copyFileEnsureDir(
       path.join(__dirname, moduleToCopy),
       path.join(`./elm-stuff/elm-pages/.elm-pages/`, moduleToCopy)
-   )]);
+    ),
+  ]);
 }
 
 /**
@@ -190,10 +194,10 @@ async function copyToBoth(moduleToCopy) {
  * @param {string} to
  */
 async function copyFileEnsureDir(from, to) {
-    await fs.promises.mkdir(path.dirname(to), {
-      recursive: true,
-    })
-    await fs.promises.copyFile(from, to)
+  await fs.promises.mkdir(path.dirname(to), {
+    recursive: true,
+  });
+  await fs.promises.copyFile(from, to);
 }
 
 /**
@@ -229,5 +233,3 @@ async function listFiles(dir) {
 function merge(arrays) {
   return [].concat.apply([], arrays);
 }
-
-module.exports = { generate, generateClientFolder };

package/generator/src/compatibility-key.js

@@ -0,0 +1,3 @@
+export const compatibilityKey = 7;
+
+export const packageVersion = "3.0.0-beta.21";

package/generator/src/compile-elm.js

@@ -1,17 +1,21 @@
-const spawnCallback = require("cross-spawn").spawn;
-const fs = require("fs");
-const fsHelpers = require("./dir-helpers.js");
-const fsPromises = require("fs").promises;
-const path = require("path");
-const kleur = require("kleur");
-const { inject } = require("elm-hot");
-const pathToClientElm = path.join(
-  process.cwd(),
-  "elm-stuff/elm-pages/",
-  "browser-elm.js"
-);
+import { spawn as spawnCallback } from "cross-spawn";
+import * as fs from "fs";
+import * as fsHelpers from "./dir-helpers.js";
+import * as fsPromises from "fs/promises";
+import * as path from "path";
+import * as kleur from "kleur/colors";
+import { inject } from "elm-hot";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-async function compileElmForBrowser(options) {
+export async function compileElmForBrowser(options) {
+  // TODO do I need to make sure this is run from the right cwd? Before it was run outside of this function in the global scope, need to make sure that doesn't change semantics.
+  const pathToClientElm = path.join(
+    process.cwd(),
+    "elm-stuff/elm-pages/",
+    "browser-elm.js"
+  );
   await runElm(options, "./.elm-pages/Main.elm", pathToClientElm);
   return fs.promises.writeFile(
     "./.elm-pages/cache/elm.js",
@@ -26,7 +30,7 @@ async function compileElmForBrowser(options) {
   );
 }
 
-async function compileCliApp(
+export async function compileCliApp(
   options,
   elmEntrypointPath,
   outputPath,
@@ -79,7 +83,7 @@ function _HtmlAsJson_toJson(html) {
 `;
 
   await fsPromises.writeFile(
-    readFrom,
+    readFrom.replace(/\.js$/, ".cjs"),
     elmFileContent
       .replace(
         /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_JSON_STRINGIFY.\)/g,
@@ -211,7 +215,7 @@ async function runElm(options, elmEntrypointPath, outputPath, cwd) {
 /**
  * @param {string} [ cwd ]
  */
-async function runElmReview(cwd) {
+export async function runElmReview(cwd) {
   const startTime = Date.now();
   return new Promise((resolve, reject) => {
     const child = spawnCallback(
@@ -284,12 +288,6 @@ function elmOptimizeLevel2(outputPath, cwd) {
   });
 }
 
-module.exports = {
-  compileElmForBrowser,
-  runElmReview,
-  compileCliApp,
-};
-
 /**
  * @param {number} start
  * @param {number} subtract

package/generator/src/config.js

@@ -0,0 +1,39 @@
+import * as path from "path";
+
+export async function resolveConfig() {
+  const initialConfig = await await import(
+    path.join(process.cwd(), "elm-pages.config.mjs")
+  )
+    .then(async (elmPagesConfig) => {
+      return (
+        elmPagesConfig.default || {
+          headTagsTemplate: defaultHeadTagsTemplate,
+        }
+      );
+    })
+    .catch((error) => {
+      console.warn(
+        "No `elm-pages.config.mjs` file found. Using default config."
+      );
+      return {
+        headTagsTemplate: defaultHeadTagsTemplate,
+        vite: {},
+      };
+    });
+
+  return {
+    preloadTagForFile: function () {
+      return true;
+    },
+    headTagsTemplate: defaultHeadTagsTemplate,
+    vite: {},
+    ...initialConfig,
+  };
+}
+
+function defaultHeadTagsTemplate(context) {
+  return `
+<link rel="stylesheet" href="/style.css" />
+<meta name="generator" content="elm-pages v${context.cliVersion}" />
+`;
+}

package/generator/src/copy-dir.js

@@ -1,5 +1,5 @@
-const util = require("util");
-const fsSync = require("fs");
+const util = require("node:util");
+const fsSync = require("node:fs");
 const fs = {
   writeFile: util.promisify(fsSync.writeFile),
   mkdir: util.promisify(fsSync.mkdir),