elm-pages 2.1.11 → 3.0.0-beta.1

package/generator/src/cli.js

@@ -1,14 +1,19 @@
 #!/usr/bin/env node
 
 const build = require("./build.js");
+const dirHelpers = require("./dir-helpers.js");
 const dev = require("./dev-server.js");
-const generate = require("./codegen-template-module.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;
 
@@ -38,10 +43,25 @@ async function main() {
       await build.run(options);
     });
 
+  program
+    .command("gen")
+    .option(
+      "--base <basePath>",
+      "build site to be served under a base path",
+      "/"
+    )
+    .description(
+      "generate code, useful for CI where you don't want to run a full build"
+    )
+    .action(async (options) => {
+      await codegen.generate(options.base);
+    });
+
   program
     .command("dev")
     .description("start a dev server")
     .option("--port <number>", "serve site at localhost:<port>", "1234")
+    .option("--debug", "Run elm make with --debug")
     .option(
       "--keep-cache",
       "Preserve the HTTP and JS Port cache instead of deleting it on server start"
@@ -56,13 +76,6 @@ async function main() {
       await dev.start(options);
     });
 
-  program
-    .command("add <moduleName>")
-    .description("create a new Page module")
-    .action(async (moduleName) => {
-      await generate.run({ moduleName });
-    });
-
   program
     .command("init <projectName>")
     .description("scaffold a new elm-pages project boilerplate")
@@ -70,6 +83,69 @@ async function main() {
       await init.run(projectName);
     });
 
+  program
+    .command("codegen <moduleName>")
+    .description("run a generator")
+    .allowUnknownOption()
+    .allowExcessArguments()
+    .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(),
+        "codegen",
+        `${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")
+        );
+      } 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
     .command("docs")
     .description("open the docs for locally generated modules")
@@ -89,6 +165,25 @@ async function main() {
   program.parse(process.argv);
 }
 
+/**
+ * @param {string[]} properties
+ * @param {Object} object
+ * @returns unknown
+ */
+function getAt(properties, object) {
+  if (properties.length === 0) {
+    return object;
+  } else {
+    const [next, ...rest] = properties;
+    return getAt(rest, object[next]);
+  }
+}
+
+function safeSubscribe(program, portName, subscribeFunction) {
+  program.ports[portName] &&
+    program.ports[portName].subscribe(subscribeFunction);
+}
+
 function clearHttpAndPortCache() {
   const directory = ".elm-pages/http-response-cache";
   if (fs.existsSync(directory)) {

package/generator/src/codegen.js

@@ -1,6 +1,10 @@
 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");
@@ -12,65 +16,218 @@ global.builtAt = new Date();
  * @param {string} basePath
  */
 async function generate(basePath) {
-  const cliCode = generateTemplateModuleConnector(basePath, "cli");
-  const browserCode = generateTemplateModuleConnector(basePath, "browser");
+  const cliCode = await generateTemplateModuleConnector(basePath, "cli");
+  const browserCode = await generateTemplateModuleConnector(
+    basePath,
+    "browser"
+  );
   ensureDirSync("./elm-stuff");
   ensureDirSync("./.elm-pages");
+  ensureDirSync("./gen");
   ensureDirSync("./elm-stuff/elm-pages/.elm-pages");
 
   const uiFileContent = elmPagesUiFile();
+
   await Promise.all([
-    fs.promises.copyFile(
-      path.join(__dirname, `./Page.elm`),
-      `./.elm-pages/Page.elm`
-    ),
+    copyToBoth("RouteBuilder.elm"),
+    copyToBoth("SharedTemplate.elm"),
+    copyToBoth("SiteConfig.elm"),
+
+    fs.promises.writeFile("./.elm-pages/Pages.elm", uiFileContent),
     fs.promises.copyFile(
       path.join(__dirname, `./elm-application.json`),
       `./elm-stuff/elm-pages/elm-application.json`
     ),
-    fs.promises.copyFile(
-      path.join(__dirname, `./Page.elm`),
-      `./elm-stuff/elm-pages/.elm-pages/Page.elm`
-    ),
-    fs.promises.copyFile(
-      path.join(__dirname, `./SharedTemplate.elm`),
-      `./.elm-pages/SharedTemplate.elm`
-    ),
-    fs.promises.copyFile(
-      path.join(__dirname, `./SharedTemplate.elm`),
-      `./elm-stuff/elm-pages/.elm-pages/SharedTemplate.elm`
-    ),
-    fs.promises.copyFile(
-      path.join(__dirname, `./SiteConfig.elm`),
-      `./.elm-pages/SiteConfig.elm`
-    ),
-    fs.promises.copyFile(
-      path.join(__dirname, `./SiteConfig.elm`),
-      `./elm-stuff/elm-pages/.elm-pages/SiteConfig.elm`
-    ),
-    fs.promises.writeFile("./.elm-pages/Pages.elm", uiFileContent),
     // write `Pages.elm` with cli interface
     fs.promises.writeFile(
       "./elm-stuff/elm-pages/.elm-pages/Pages.elm",
       elmPagesCliFile()
     ),
     fs.promises.writeFile(
-      "./elm-stuff/elm-pages/.elm-pages/TemplateModulesBeta.elm",
+      "./elm-stuff/elm-pages/.elm-pages/Main.elm",
       cliCode.mainModule
     ),
     fs.promises.writeFile(
       "./elm-stuff/elm-pages/.elm-pages/Route.elm",
       cliCode.routesModule
     ),
-    fs.promises.writeFile(
-      "./.elm-pages/TemplateModulesBeta.elm",
-      browserCode.mainModule
-    ),
+    fs.promises.writeFile("./.elm-pages/Main.elm", browserCode.mainModule),
     fs.promises.writeFile("./.elm-pages/Route.elm", browserCode.routesModule),
+    writeFetcherModules("./.elm-pages", browserCode.fetcherModules),
+    writeFetcherModules(
+      "./elm-stuff/elm-pages/client/.elm-pages",
+      browserCode.fetcherModules
+    ),
+    writeFetcherModules(
+      "./elm-stuff/elm-pages/.elm-pages",
+      browserCode.fetcherModules
+    ),
+    // write modified elm.json to elm-stuff/elm-pages/
+    copyModifiedElmJson(),
+    // ...(await listFiles("./Pages/Internal")).map(copyToBoth),
   ]);
+}
+
+function writeFetcherModules(basePath, fetcherData) {
+  Promise.all(
+    fetcherData.map(([name, fileContent]) => {
+      let filePath = path.join(basePath, `/Fetcher/${name.join("/")}.elm`);
+      ensureDirSync(path.dirname(filePath));
+      return fs.promises.writeFile(filePath, fileContent);
+    })
+  );
+}
+
+async function newCopyBoth(modulePath) {
+  await fs.promises.copyFile(
+    path.join(__dirname, modulePath),
+    path.join(`./elm-stuff/elm-pages/client/.elm-pages/`, modulePath)
+  );
+}
+
+async function generateClientFolder(basePath) {
+  const browserCode = await generateTemplateModuleConnector(
+    basePath,
+    "browser"
+  );
+  const uiFileContent = elmPagesUiFile();
+  ensureDirSync("./elm-stuff/elm-pages/client/app");
+  ensureDirSync("./elm-stuff/elm-pages/client/.elm-pages");
+  await newCopyBoth("RouteBuilder.elm");
+  await newCopyBoth("SharedTemplate.elm");
+  await newCopyBoth("SiteConfig.elm");
 
-  // write modified elm.json to elm-stuff/elm-pages/
-  copyModifiedElmJson();
+  await copyModifiedElmJsonClient();
+  await fsExtra.copy("./app", "./elm-stuff/elm-pages/client/app", {
+    recursive: true,
+  });
+
+  await fs.promises.writeFile(
+    "./elm-stuff/elm-pages/client/.elm-pages/Main.elm",
+    browserCode.mainModule
+  );
+  await fs.promises.writeFile(
+    "./elm-stuff/elm-pages/client/.elm-pages/Route.elm",
+    browserCode.routesModule
+  );
+  await fs.promises.writeFile(
+    "./elm-stuff/elm-pages/client/.elm-pages/Pages.elm",
+    uiFileContent
+  );
+  await runElmReviewCodemod("./elm-stuff/elm-pages/client/");
+}
+
+/**
+ * @param {string} [ cwd ]
+ */
+async function runElmReviewCodemod(cwd) {
+  return new Promise(async (resolve, reject) => {
+    const child = spawnCallback(
+      `elm-review`,
+      [
+        "--fix-all-without-prompt",
+        "--report",
+        "json",
+        "--namespace",
+        "elm-pages",
+        "--config",
+        path.join(__dirname, "../../generator/dead-code-review"),
+        "--elmjson",
+        "elm.json",
+        "--compiler",
+        await which("lamdera"),
+      ],
+      { cwd: path.join(process.cwd(), cwd || ".") }
+    );
+
+    let scriptOutput = "";
+
+    child.stdout.setEncoding("utf8");
+    child.stdout.on("data", function (/** @type {string} */ data) {
+      scriptOutput += data.toString();
+    });
+
+    child.stderr.setEncoding("utf8");
+    child.stderr.on("data", function (/** @type {string} */ data) {
+      scriptOutput += data.toString();
+    });
+    child.on("error", function () {
+      reject(scriptOutput);
+    });
+
+    child.on("close", function (code) {
+      if (code === 0) {
+        resolve(scriptOutput);
+      } else {
+        reject(scriptOutput);
+      }
+    });
+  });
+}
+
+/**
+ * @param {string} moduleToCopy
+ * @returns { Promise<void> }
+ */
+async function copyToBoth(moduleToCopy) {
+  await Promise.all([
+    copyFileEnsureDir(
+      path.join(__dirname, moduleToCopy),
+      path.join(`./.elm-pages/`, moduleToCopy)
+   ),
+   copyFileEnsureDir(
+      path.join(__dirname, moduleToCopy),
+      path.join(`./elm-stuff/elm-pages/client/.elm-pages`, moduleToCopy)
+   ),
+  copyFileEnsureDir(
+      path.join(__dirname, moduleToCopy),
+      path.join(`./elm-stuff/elm-pages/.elm-pages/`, moduleToCopy)
+   )]);
+}
+
+/**
+ * @param {string} from
+ * @param {string} to
+ */
+async function copyFileEnsureDir(from, to) {
+    await fs.promises.mkdir(path.dirname(to), {
+      recursive: true,
+    })
+    await fs.promises.copyFile(from, to)
+}
+
+/**
+ * @param {string} dir
+ * @returns {Promise<string[]>}
+ */
+async function listFiles(dir) {
+  try {
+    const fullDir = path.join(__dirname, dir);
+    const files = await fs.promises.readdir(fullDir);
+    return merge(
+      await Promise.all(
+        files.flatMap(async (file_) => {
+          const file = path.join(dir, path.basename(file_));
+          if (
+            (await fs.promises.stat(path.join(__dirname, file))).isDirectory()
+          ) {
+            return await listFiles(file);
+          } else {
+            return [file];
+          }
+        })
+      )
+    );
+  } catch (e) {
+    return [];
+  }
+}
+
+/**
+ * @param {any[]} arrays
+ */
+function merge(arrays) {
+  return [].concat.apply([], arrays);
 }
 
-module.exports = { generate };
+module.exports = { generate, generateClientFolder };

package/generator/src/compile-elm.js

@@ -1,8 +1,9 @@
 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 debug = true;
 const { inject } = require("elm-hot");
 const pathToClientElm = path.join(
   process.cwd(),
@@ -10,55 +11,172 @@ const pathToClientElm = path.join(
   "browser-elm.js"
 );
 
-async function spawnElmMake(elmEntrypointPath, outputPath, cwd) {
-  const fullOutputPath = cwd ? path.join(cwd, outputPath) : outputPath;
-  await runElm(elmEntrypointPath, outputPath, cwd);
+async function compileElmForBrowser(options) {
+  await runElm(options, "./.elm-pages/Main.elm", pathToClientElm);
+  return fs.promises.writeFile(
+    "./.elm-pages/cache/elm.js",
+    inject(await fs.promises.readFile(pathToClientElm, "utf-8")).replace(
+      /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_FORM_TO_STRING.\)/g,
+      "let 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 " +
+        (true
+          ? // TODO remove hardcoding
+            "_Json_wrap([...(appendSubmitter(new FormData(_Json_unwrap(event).target), _Json_unwrap(event)))])"
+          : "[...(new FormData(event.target))")
+    )
+  );
+}
+
+async function compileCliApp(
+  options,
+  elmEntrypointPath,
+  outputPath,
+  cwd,
+  readFrom
+) {
+  await compileElm(options, elmEntrypointPath, outputPath, cwd);
+
+  const elmFileContent = await fsPromises.readFile(readFrom, "utf-8");
+  // Source: https://github.com/elm-explorations/test/blob/d5eb84809de0f8bbf50303efd26889092c800609/src/Elm/Kernel/HtmlAsJson.js
+  const forceThunksSource = ` _HtmlAsJson_toJson(x)
+}
+
+              var virtualDomKernelConstants =
+  {
+    nodeTypeTagger: 4,
+    nodeTypeThunk: 5,
+    kids: "e",
+    refs: "l",
+    thunk: "m",
+    node: "k",
+    value: "a"
+  }
 
-  await fs.promises.writeFile(
-    fullOutputPath,
-    (await fs.promises.readFile(fullOutputPath, "utf-8"))
+function forceThunks(vNode) {
+  if (typeof vNode !== "undefined" && vNode.$ === "#2") {
+    // This is a tuple (the kids : List (String, Html) field of a Keyed node); recurse into the right side of the tuple
+    vNode.b = forceThunks(vNode.b);
+  }
+  if (typeof vNode !== 'undefined' && vNode.$ === virtualDomKernelConstants.nodeTypeThunk && !vNode[virtualDomKernelConstants.node]) {
+    // This is a lazy node; evaluate it
+    var args = vNode[virtualDomKernelConstants.thunk];
+    vNode[virtualDomKernelConstants.node] = vNode[virtualDomKernelConstants.thunk].apply(args);
+    // And then recurse into the evaluated node
+    vNode[virtualDomKernelConstants.node] = forceThunks(vNode[virtualDomKernelConstants.node]);
+  }
+  if (typeof vNode !== 'undefined' && vNode.$ === virtualDomKernelConstants.nodeTypeTagger) {
+    // This is an Html.map; recurse into the node it is wrapping
+    vNode[virtualDomKernelConstants.node] = forceThunks(vNode[virtualDomKernelConstants.node]);
+  }
+  if (typeof vNode !== 'undefined' && typeof vNode[virtualDomKernelConstants.kids] !== 'undefined') {
+    // This is something with children (either a node with kids : List Html, or keyed with kids : List (String, Html));
+    // recurse into the children
+    vNode[virtualDomKernelConstants.kids] = vNode[virtualDomKernelConstants.kids].map(forceThunks);
+  }
+  return vNode;
+}
+
+function _HtmlAsJson_toJson(html) {
+`;
+
+  await fsPromises.writeFile(
+    readFrom,
+    elmFileContent
       .replace(
         /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_JSON_STRINGIFY.\)/g,
-        "return " + (debug ? "_Json_wrap(x)" : "x")
-      )
-      .replace(
-        "return ports ? { ports: ports } : {};",
-        `const die = function() {
-        managers = null
-        model = null
-        stepper = null
-        ports = null
-      }
-
-      return ports ? { ports: ports, die: die } : { die: die };`
+        "return " +
+          // TODO should the logic for this be `if options.optimize`? Or does the first case not make sense at all?
+          (true
+            ? `${forceThunksSource}
+  return _Json_wrap(forceThunks(html));
+`
+            : `${forceThunksSource}
+return forceThunks(html);
+`)
       )
+      .replace(/console\.log..App dying../, "")
   );
 }
 
-async function compileElmForBrowser() {
-  await runElm("./.elm-pages/TemplateModulesBeta.elm", pathToClientElm);
-  return fs.promises.writeFile(
-    "./.elm-pages/cache/elm.js",
-    inject(await fs.promises.readFile(pathToClientElm, "utf-8"))
-  );
+/**
+ * @param {string} elmEntrypointPath
+ * @param {string} outputPath
+ * @param {string | undefined} cwd
+ */
+async function compileElm(options, elmEntrypointPath, outputPath, cwd) {
+  await spawnElmMake(options, elmEntrypointPath, outputPath, cwd);
+  if (!options.debug) {
+    // TODO maybe pass in a boolean argument for whether it's build or dev server, and only do eol2 for build
+    // await elmOptimizeLevel2(outputPath, cwd);
+  }
+}
+
+function spawnElmMake(options, elmEntrypointPath, outputPath, cwd) {
+  return new Promise(async (resolve, reject) => {
+    const subprocess = spawnCallback(
+      `lamdera`,
+      [
+        "make",
+        elmEntrypointPath,
+        "--output",
+        outputPath,
+        // TODO use --optimize for prod build
+        ...(options.debug ? ["--debug"] : []),
+        "--report",
+        "json",
+      ],
+      {
+        // ignore stdout
+        // stdio: ["inherit", "ignore", "inherit"],
+
+        cwd: cwd,
+      }
+    );
+    if (await fsHelpers.fileExists(outputPath)) {
+      await fsPromises.unlink(outputPath, {
+        force: true /* ignore errors if file doesn't exist */,
+      });
+    }
+    let commandOutput = "";
+
+    subprocess.stderr.on("data", function (data) {
+      commandOutput += data;
+    });
+    subprocess.on("error", function () {
+      reject(commandOutput);
+    });
+
+    subprocess.on("close", async (code) => {
+      if (
+        code == 0 &&
+        (await fsHelpers.fileExists(outputPath)) &&
+        commandOutput === ""
+      ) {
+        resolve();
+      } else {
+        reject(commandOutput);
+      }
+    });
+  });
 }
 
 /**
  * @param {string} elmEntrypointPath
  * @param {string} outputPath
- * @param {string} [ cwd ]
+ * @param {string} [cwd]
+ * @param {{ debug: boolean; }} options
  */
-async function runElm(elmEntrypointPath, outputPath, cwd) {
+async function runElm(options, elmEntrypointPath, outputPath, cwd) {
   const startTime = Date.now();
   return new Promise((resolve, reject) => {
     const child = spawnCallback(
-      `elm`,
+      `lamdera`,
       [
         "make",
         elmEntrypointPath,
         "--output",
         outputPath,
-        "--debug",
+        ...(options.debug ? ["--debug"] : []),
+        ...(options.optimize ? ["--optimize"] : []),
         "--report",
         "json",
       ],
@@ -124,7 +242,7 @@ async function runElmReview(cwd) {
     child.on("close", function (code) {
       console.log(`Ran elm-review in ${timeFrom(startTime)}`);
       if (code === 0) {
-        reject();
+        resolve(scriptOutput);
       } else {
         resolve(scriptOutput);
       }
@@ -132,10 +250,44 @@ async function runElmReview(cwd) {
   });
 }
 
+function elmOptimizeLevel2(outputPath, cwd) {
+  return new Promise((resolve, reject) => {
+    const optimizedOutputPath = outputPath + ".opt";
+    const subprocess = spawnCallback(
+      `elm-optimize-level-2`,
+      [outputPath, "--output", optimizedOutputPath],
+      {
+        // ignore stdout
+        // stdio: ["inherit", "ignore", "inherit"],
+
+        cwd: cwd,
+      }
+    );
+    let commandOutput = "";
+
+    subprocess.stderr.on("data", function (data) {
+      commandOutput += data;
+    });
+
+    subprocess.on("close", async (code) => {
+      if (
+        code === 0 &&
+        commandOutput === "" &&
+        (await fsHelpers.fileExists(optimizedOutputPath))
+      ) {
+        await fs.promises.copyFile(optimizedOutputPath, outputPath);
+        resolve();
+      } else {
+        reject(commandOutput);
+      }
+    });
+  });
+}
+
 module.exports = {
-  spawnElmMake,
   compileElmForBrowser,
   runElmReview,
+  compileCliApp,
 };
 
 /**