elm-pages 3.0.0-beta.1 → 3.0.0-beta.12

package/generator/review/elm-stuff/tests-0.19.1/js/node_runner.js

@@ -75,7 +75,7 @@ console.elmlog = (str) => logs.push(str + "\n");
 const { Elm } = require("./Runner.elm.js");
 
 // Start the Elm app
-const flags = { initialSeed: 1016531122, fuzzRuns: 100, filter: null };
+const flags = { initialSeed: 2434458748, fuzzRuns: 100, filter: null };
 const app = Elm.Runner.init({ flags: flags });
 
 // Record the timing at which we received the last "runTest" message

package/generator/review/elm-stuff/tests-0.19.1/js/node_supervisor.js

@@ -82,7 +82,7 @@ const verbosity = 0;
 // Create a long lived reporter worker
 const { Elm } = require("./Reporter.elm.js");
 const flags = {
-  initialSeed: 1016531122,
+  initialSeed: 2434458748,
   fuzzRuns: 100,
   mode: "consoleNoColor",
   verbosity: verbosity,

package/generator/review/elm.json

@@ -11,23 +11,23 @@
             "elm/html": "1.0.0",
             "elm/regex": "1.0.0",
             "elm-community/result-extra": "2.4.0",
-            "jfmengels/elm-review": "2.4.2",
+            "jfmengels/elm-review": "2.10.0",
             "mdgriffith/elm-codegen": "2.0.0",
-            "stil4m/elm-syntax": "7.2.5",
+            "stil4m/elm-syntax": "7.2.9",
             "the-sett/elm-syntax-dsl": "6.0.2"
         },
         "indirect": {
             "Chadtech/elm-bool-extra": "2.4.2",
+            "elm/bytes": "1.0.8",
             "elm/json": "1.1.3",
             "elm/parser": "1.1.0",
             "elm/project-metadata-utils": "1.0.2",
             "elm/random": "1.0.0",
             "elm/time": "1.0.0",
-            "elm/virtual-dom": "1.0.2",
+            "elm/virtual-dom": "1.0.3",
             "elm-community/basics-extra": "4.1.0",
-            "elm-community/list-extra": "8.3.0",
+            "elm-community/list-extra": "8.7.0",
             "elm-community/maybe-extra": "5.3.0",
-            "elm-explorations/test": "1.2.2",
             "miniBill/elm-unicode": "1.0.2",
             "rtfeldman/elm-hex": "1.0.0",
             "stil4m/structured-writer": "1.0.3",
@@ -36,7 +36,7 @@
     },
     "test-dependencies": {
         "direct": {
-            "elm-explorations/test": "1.2.2"
+            "elm-explorations/test": "2.0.1"
         },
         "indirect": {}
     }

package/generator/src/SharedTemplate.elm

@@ -34,7 +34,7 @@ type alias SharedTemplate msg sharedModel sharedData mappedMsg =
         -> sharedModel
         -> (msg -> mappedMsg)
         -> View mappedMsg
-        -> { body : Html mappedMsg, title : String }
+        -> { body : List (Html mappedMsg), title : String }
     , data : DataSource.DataSource sharedData
     , subscriptions : Path -> sharedModel -> Sub msg
     , onPageChange :

package/generator/src/build.js

@@ -16,6 +16,9 @@ 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");
 
 let pool = [];
 let pagesReady;
@@ -28,7 +31,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 +38,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`);
@@ -75,40 +75,31 @@ async function run(options) {
     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;
@@ -124,10 +115,25 @@ async function run(options) {
       "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>`
@@ -146,21 +152,20 @@ async function run(options) {
         metafile: true,
         bundle: true,
         watch: false,
-        logLevel: "error",
+        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 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);
         }
       });
     // TODO extract common code for compiling ports file?
@@ -544,7 +549,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 +595,7 @@ function _HtmlAsJson_toJson(html) {
 `;
 
   await fsPromises.writeFile(
-    ELM_FILE_PATH,
+    ELM_FILE_PATH(),
     elmFileContent
       .replace(
         /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_JSON_STRINGIFY.\)/g,
@@ -627,6 +632,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 */
@@ -642,4 +672,4 @@ async function runAdapter(adaptFn, processedIndexTemplate) {
  * @returns {string}
  */
 
-module.exports = { run };
+module.exports = { run, compileCliApp };

package/generator/src/cli.js

@@ -8,9 +8,13 @@ const codegen = require("./codegen.js");
 const fs = require("fs");
 const path = require("path");
 const { restoreColorSafe } = require("./error-formatter");
+const renderer = require("../../generator/src/render");
+const globby = require("globby");
+const esbuild = require("esbuild");
+const copyModifiedElmJson = require("./rewrite-elm-json.js");
+const { ensureDirSync, deleteIfExists } = require("./file-helpers.js");
 
 const commander = require("commander");
-const { compileCliApp } = require("./compile-elm.js");
 const { runElmCodegenInstall } = require("./elm-codegen.js");
 const Argument = commander.Argument;
 const Option = commander.Option;
@@ -84,66 +88,89 @@ 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("");
+        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 copyModifiedElmJson(
+          "./script/elm.json",
+          "./script/elm-stuff/elm-pages/elm.json"
+        );
+
+        const portDataSourceCompiled = esbuild
+          .build({
+            entryPoints: ["./port-data-source"],
+            platform: "node",
+            outfile: ".elm-pages/compiled-ports/port-data-source.js",
+            assetNames: "[name]-[hash]",
+            chunkNames: "chunks/[name]-[hash]",
+            outExtension: { ".js": ".js" },
+            metafile: true,
+            bundle: true,
+            watch: false,
+            logLevel: "silent",
+          })
+          .then((result) => {
+            try {
+              return Object.keys(result.metafile.outputs)[0];
+            } catch (e) {
+              return null;
+            }
+          })
+          .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 portsPath = await portDataSourceCompiled;
+        const resolvedPortsPath = path.join(process.cwd(), portsPath);
+
+        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("../");
+        await renderer.runGenerator(
+          unprocessedCliOptions,
+          resolvedPortsPath,
+          requireElm("./script/elm-stuff/elm-pages/elm.js")
         );
       } catch (error) {
         console.log(restoreColorSafe(error));
         process.exit(1);
       }
-
-      const elmScaffoldProgram = getAt(
-        splitModuleName,
-        require(path.join(process.cwd(), "./codegen/elm-stuff/scaffold.js")).Elm
-      );
-      const program = elmScaffoldProgram.init({
-        flags: { argv: ["", ...options2.args], versionMessage: "1.2.3" },
-      });
-
-      safeSubscribe(program, "print", (message) => {
-        console.log(message);
-      });
-      safeSubscribe(program, "printAndExitFailure", (message) => {
-        console.log(message);
-        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
@@ -180,7 +207,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 +246,55 @@ function normalizeUrl(rawPagePath) {
   // with detecting whether the path contains the base.
   return `/${segments.join("/")}`;
 }
+/**
+ * @param {string} compiledElmPath
+ */
+function requireElm(compiledElmPath) {
+  const warnOriginal = console.warn;
+  console.warn = function () {};
+
+  Elm = require(path.resolve(compiledElmPath));
+  console.warn = warnOriginal;
+  return Elm;
+}
+
+/**
+ * @param {string} moduleName
+ */
+function generatorWrapperFile(moduleName) {
+  return `port module Main exposing (main)
+
+import Bytes
+import DataSource exposing (DataSource)
+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 (DataSource ()) 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
+`;
+}
 
 main();

package/generator/src/codegen.js

@@ -63,7 +63,7 @@ async function generate(basePath) {
       browserCode.fetcherModules
     ),
     // write modified elm.json to elm-stuff/elm-pages/
-    copyModifiedElmJson(),
+    copyModifiedElmJson("./elm.json", "./elm-stuff/elm-pages/elm.json"),
     // ...(await listFiles("./Pages/Internal")).map(copyToBoth),
   ]);
 }
@@ -174,15 +174,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 +191,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);
 }
 
 /**

package/generator/src/compatibility-key.js

@@ -0,0 +1 @@
+module.exports = { compatibilityKey: 2 };

package/generator/src/config.js

@@ -0,0 +1,41 @@
+const path = require("path");
+
+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}" />
+`;
+}
+
+module.exports = { resolveConfig };