elm-pages 2.1.6 → 2.1.10

package/generator/review/elm.json

@@ -0,0 +1,34 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src",
+        "../../src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/core": "1.0.5",
+            "elm-community/result-extra": "2.4.0",
+            "jfmengels/elm-review": "2.4.2",
+            "stil4m/elm-syntax": "7.2.5"
+        },
+        "indirect": {
+            "elm/html": "1.0.0",
+            "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-community/list-extra": "8.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"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}

package/generator/review/src/ReviewConfig.elm

@@ -0,0 +1,10 @@
+module ReviewConfig exposing (config)
+
+import Pages.Review.NoContractViolations
+import Review.Rule as Rule exposing (Rule)
+
+
+config : List Rule
+config =
+    [ Pages.Review.NoContractViolations.rule ]
+

package/generator/src/basepath-middleware.js

@@ -1,18 +1,23 @@
-const parseUrl = require("url").parse;
-
 // this middleware is only active when (config.base !== '/')
 
 module.exports = function baseMiddleware(base) {
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   return function viteBaseMiddleware(req, res, next) {
-    const url = req.url;
-    const parsed = parseUrl(url);
-    const path = parsed.pathname || "/";
+    // `req.url` only contains the path, since that is what gets passed in the HTTP request.
+    // See https://nodejs.org/api/http.html#http_message_url
+    const path = req.url;
 
-    if (path.startsWith(base)) {
-      // rewrite url to remove base.. this ensures that other middleware does
+    if (base === "/") {
+      // The RegExp will check for the slash, so we remove it here.
+      base = "";
+    }
+    // We want to detect the base at the beginning, hence the `^`,
+    // but also allow calling the base without a trailing slash, hence the `$`.
+    const baseRegExp = new RegExp(`^${base}(/|$)`);
+    if (baseRegExp.test(path)) {
+      // rewrite url to remove base. this ensures that other middleware does
       // not need to consider base being prepended or not
-      req.url = url.replace(base, "/");
+      req.url = path.replace(baseRegExp, "/");
       return next();
     }
 
@@ -26,9 +31,10 @@ module.exports = function baseMiddleware(base) {
     } else if (req.headers.accept && req.headers.accept.includes("text/html")) {
       // non-based page visit
       res.statusCode = 404;
+      const suggestionUrl = `${base}/${path.slice(1)}`;
       res.end(
         `The server is configured with a public base URL of ${base} - ` +
-          `did you mean to visit ${base}${url.slice(1)} instead?`
+        `did you mean to visit ${suggestionUrl} instead?`
       );
       return;
     }

package/generator/src/build.js

@@ -1,6 +1,7 @@
 const fs = require("./dir-helpers.js");
 const fsPromises = require("fs").promises;
 
+const { runElmReview } = require("./compile-elm.js");
 const { restoreColor } = require("./error-formatter");
 const path = require("path");
 const spawnCallback = require("cross-spawn").spawn;
@@ -9,6 +10,7 @@ const terser = require("terser");
 const os = require("os");
 const { Worker, SHARE_ENV } = require("worker_threads");
 const { ensureDirSync } = require("./file-helpers.js");
+const which = require("which");
 let pool = [];
 let pagesReady;
 let pages = new Promise((resolve, reject) => {
@@ -35,9 +37,28 @@ async function ensureRequiredDirs() {
   ensureDirSync(path.join(process.cwd(), ".elm-pages", "http-response-cache"));
 }
 
+async function ensureRequiredExecutables() {
+  try {
+    await which("elm");
+  } catch (error) {
+    throw "I couldn't find elm on the PATH. Please ensure it's installed, either globally, or locally. If it's installed locally, ensure you're running through an NPM script or with npx so the PATH is configured to include it.";
+  }
+  try {
+    await which("elm-optimize-level-2");
+  } catch (error) {
+    throw "I couldn't find elm-optimize-level-2 on the PATH. Please ensure it's installed, either globally, or locally. If it's installed locally, ensure you're running through an NPM script or with npx so the PATH is configured to include it.";
+  }
+  try {
+    await which("elm-review");
+  } catch (error) {
+    throw "I couldn't find elm-review on the PATH. Please ensure it's installed, either globally, or locally. If it's installed locally, ensure you're running through an NPM script or with npx so the PATH is configured to include it.";
+  }
+}
+
 async function run(options) {
   try {
     await ensureRequiredDirs();
+    await ensureRequiredExecutables();
     // since init/update are never called in pre-renders, and DataSource.Http is called using undici
     // we can provide a fake HTTP instead of xhr2 (which is otherwise needed for Elm HTTP requests from Node)
     XMLHttpRequest = {};
@@ -55,8 +76,22 @@ async function run(options) {
     await Promise.all([copyDone, cliDone, compileClientDone]);
   } catch (error) {
     buildError = true;
-    console.error(error);
-    process.exit(1);
+    try {
+      const reviewOutput = JSON.parse(await runElmReview());
+      const isParsingError = reviewOutput.errors.some((reviewError) => {
+        return reviewError.errors.some((item) => item.rule === "ParsingError");
+      });
+      if (isParsingError) {
+        console.error(error);
+      } else {
+        console.error(restoreColor(reviewOutput));
+      }
+      process.exit(1);
+    } catch (noElmReviewErrors) {
+      console.error(error);
+    } finally {
+      process.exit(1);
+    }
   }
 }
 
@@ -164,10 +199,15 @@ function elmOptimizeLevel2(elmEntrypointPath, outputPath, cwd) {
     });
 
     subprocess.on("close", async (code) => {
-      if (code == 0 && (await fs.fileExists(fullOutputPath))) {
+      if (
+        code === 0 &&
+        commandOutput === "" &&
+        (await fs.fileExists(fullOutputPath))
+      ) {
         resolve();
       } else {
         if (!buildError) {
+          buildError = true;
           process.exitCode = 1;
           reject(commandOutput);
         } else {
@@ -227,8 +267,13 @@ function runElmMake(elmEntrypointPath, outputPath, cwd) {
       if (code == 0 && (await fs.fileExists(fullOutputPath))) {
         resolve();
       } else {
-        process.exitCode = 1;
-        reject(restoreColor(JSON.parse(commandOutput)));
+        if (!buildError) {
+          buildError = true;
+          process.exitCode = 1;
+          reject(restoreColor(JSON.parse(commandOutput)));
+        } else {
+          // avoid unhandled error printing duplicate message, let process.exit in top loop take over
+        }
       }
     });
   });
@@ -299,12 +344,61 @@ async function compileCliApp(options) {
   );
 
   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)
+}
+
+              var virtualDomKernelConstants =
+  {
+    nodeTypeTagger: 4,
+    nodeTypeThunk: 5,
+    kids: "e",
+    refs: "l",
+    thunk: "m",
+    node: "k",
+    value: "a"
+  }
+
+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(
     ELM_FILE_PATH,
     elmFileContent
       .replace(
         /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_JSON_STRINGIFY.\)/g,
-        "return " + (options.debug ? "_Json_wrap(x)" : "x")
+        "return " +
+          (options.debug
+            ? `${forceThunksSource}
+  return _Json_wrap(forceThunks(html));
+`
+            : `${forceThunksSource}
+return forceThunks(html);
+`)
       )
       .replace(
         "return ports ? { ports: ports } : {};",

package/generator/src/cli.js

@@ -47,6 +47,7 @@ async function main() {
       "Preserve the HTTP and JS Port cache instead of deleting it on server start"
     )
     .option("--base <basePath>", "serve site under a base path", "/")
+    .option("--https", "uses a https server")
     .action(async (options) => {
       if (!options.keepCache) {
         clearHttpAndPortCache();
@@ -108,16 +109,19 @@ function clearHttpAndPortCache() {
 }
 
 /**
- * @param {string} pagePath
+ * @param {string} rawPagePath
  */
-function normalizeUrl(pagePath) {
-  if (!pagePath.startsWith("/")) {
-    pagePath = "/" + pagePath;
-  }
-  if (!pagePath.endsWith("/")) {
-    pagePath = pagePath + "/";
-  }
-  return pagePath;
+function normalizeUrl(rawPagePath) {
+  const segments = rawPagePath
+    .split("/")
+    // Filter out all empty segments.
+    .filter((segment) => segment.length != 0);
+
+  // Do not add a trailing slash.
+  // The core issue is that `/base` is a prefix of `/base/`, but
+  // `/base/` is not a prefix of `/base`, which can later lead to issues
+  // with detecting whether the path contains the base.
+  return `/${segments.join("/")}`;
 }
 
 main();

package/generator/src/compile-elm.js

@@ -90,9 +90,52 @@ async function runElm(elmEntrypointPath, outputPath, cwd) {
   });
 }
 
+/**
+ * @param {string} [ cwd ]
+ */
+async function runElmReview(cwd) {
+  const startTime = Date.now();
+  return new Promise((resolve, reject) => {
+    const child = spawnCallback(
+      `elm-review`,
+      [
+        "--report",
+        "json",
+        "--namespace",
+        "elm-pages",
+        "--config",
+        path.join(__dirname, "../../generator/review"),
+      ],
+      { 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("close", function (code) {
+      console.log(`Ran elm-review in ${timeFrom(startTime)}`);
+      if (code === 0) {
+        reject();
+      } else {
+        resolve(scriptOutput);
+      }
+    });
+  });
+}
+
 module.exports = {
   spawnElmMake,
   compileElmForBrowser,
+  runElmReview,
 };
 
 /**

package/generator/src/dev-server.js

@@ -1,8 +1,14 @@
 const path = require("path");
 const fs = require("fs");
+const which = require("which");
 const chokidar = require("chokidar");
-const { spawnElmMake, compileElmForBrowser } = require("./compile-elm.js");
+const {
+  spawnElmMake,
+  compileElmForBrowser,
+  runElmReview,
+} = require("./compile-elm.js");
 const http = require("http");
+const https = require("https");
 const codegen = require("./codegen.js");
 const kleur = require("kleur");
 const serveStatic = require("serve-static");
@@ -12,9 +18,10 @@ const { Worker, SHARE_ENV } = require("worker_threads");
 const os = require("os");
 const { ensureDirSync } = require("./file-helpers.js");
 const baseMiddleware = require("./basepath-middleware.js");
+const devcert = require("devcert");
 
 /**
- * @param {{ port: string; base: string }} options
+ * @param {{ port: string; base: string; https: boolean; }} options
  */
 async function start(options) {
   let threadReadyQueue = [];
@@ -23,6 +30,7 @@ async function start(options) {
   const cpuCount = os.cpus().length;
 
   const port = options.port;
+  const useHttps = options.https;
   let elmMakeRunning = true;
 
   const serve = serveStatic("public/", { index: false });
@@ -45,6 +53,12 @@ async function start(options) {
   });
 
   await codegen.generate(options.base);
+  try {
+    await ensureRequiredExecutables();
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
   let clientElmMakeProcess = compileElmForBrowser();
   let pendingCliCompile = compileCliApp();
   watchElmSourceDirs(true);
@@ -59,7 +73,7 @@ async function start(options) {
       });
     console.log(
       `${kleur.dim(`elm-pages dev server running at`)} ${kleur.green(
-        `<http://localhost:${port}>`
+        `<${useHttps ? "https" : "http"}://localhost:${port}>`
       )}`
     );
     const poolSize = Math.max(1, cpuCount / 2 - 1);
@@ -107,7 +121,12 @@ async function start(options) {
     .use(serveStaticCode)
     .use(serve)
     .use(processRequest);
-  http.createServer(app).listen(port);
+  if (useHttps) {
+    const ssl = await devcert.certificateFor("localhost");
+    https.createServer(ssl, app).listen(port);
+  } else {
+    http.createServer(app).listen(port);
+  }
   /**
    * @param {http.IncomingMessage} request
    * @param {http.ServerResponse} response
@@ -122,7 +141,6 @@ async function start(options) {
   }
 
   watcher.on("all", async function (eventName, pathThatChanged) {
-    // console.log({ pathThatChanged });
     if (pathThatChanged === "elm.json") {
       watchElmSourceDirs(false);
     } else if (pathThatChanged.endsWith(".css")) {
@@ -288,13 +306,34 @@ async function start(options) {
     try {
       await pendingCliCompile;
     } catch (error) {
-      console.log(restoreColor(JSON.parse(error)));
-      if (req.url.includes("content.json")) {
-        res.writeHead(500, { "Content-Type": "application/json" });
-        res.end(error);
+      let isImplicitContractError = false;
+      try {
+        isImplicitContractError = JSON.parse(error).errors.some(
+          (errorItem) => errorItem.name === "TemplateModulesBeta"
+        );
+      } catch (unexpectedError) {
+        console.log("Unexpected error", unexpectedError);
+      }
+      if (isImplicitContractError) {
+        const reviewOutput = await runElmReview();
+        console.log(restoreColor(JSON.parse(reviewOutput)));
+
+        if (req.url.includes("content.json")) {
+          res.writeHead(500, { "Content-Type": "application/json" });
+          res.end(reviewOutput);
+        } else {
+          res.writeHead(500, { "Content-Type": "text/html" });
+          res.end(errorHtml());
+        }
       } else {
-        res.writeHead(500, { "Content-Type": "text/html" });
-        res.end(errorHtml());
+        console.log(restoreColor(JSON.parse(error)));
+        if (req.url.includes("content.json")) {
+          res.writeHead(500, { "Content-Type": "application/json" });
+          res.end(error);
+        } else {
+          res.writeHead(500, { "Content-Type": "text/html" });
+          res.end(errorHtml());
+        }
       }
       return;
     }
@@ -495,4 +534,17 @@ function errorHtml() {
   `;
 }
 
+async function ensureRequiredExecutables() {
+  try {
+    await which("elm");
+  } catch (error) {
+    throw "I couldn't find elm on the PATH. Please ensure it's installed, either globally, or locally. If it's installed locally, ensure you're running through an NPM script or with npx so the PATH is configured to include it.";
+  }
+  try {
+    await which("elm-review");
+  } catch (error) {
+    throw "I couldn't find elm-review on the PATH. Please ensure it's installed, either globally, or locally. If it's installed locally, ensure you're running through an NPM script or with npx so the PATH is configured to include it.";
+  }
+}
+
 module.exports = { start };

package/generator/src/error-formatter.js

@@ -10,12 +10,12 @@ const kleur = require("kleur");
  * This function takes in the error title and the path to the file with the error and formats it like elm make's regular output
  **/
 /**
- * @param {string} title
+ * @param {string} rule
  * @param {string} path
  * */
-const parseHeader = (title, path) =>
+const parseHeader = (rule, path) =>
   kleur.cyan(
-    `-- ${title.replace("-", " ")} --------------- ${path || ""}
+    `-- ${rule.replace("-", " ")} --------------- ${path || ""}
 `
   );
 
@@ -32,17 +32,45 @@ function parseMsg(msg) {
     return msg;
   } else {
     if (msg.underline && msg.color) {
-      return kleur[msg.color.toLowerCase()]().underline(msg.string);
+      return kleur[toKleurColor(msg.color)]().underline(msg.string);
     } else if (msg.underline) {
       return kleur.underline(msg.string);
     } else if (msg.color) {
-      return kleur[msg.color.toLowerCase()](msg.string);
+      return kleur[toKleurColor(msg.color)](msg.string);
     } else {
       return msg.string;
     }
   }
 }
 
+/**
+ * @param {string} color
+ * @returns {keyof import("kleur").Kleur}
+ * */
+function toKleurColor(color) {
+  if (color.startsWith("#")) {
+    const hexCode = color.slice(1);
+    switch (hexCode) {
+      // color codes from https://github.com/jfmengels/node-elm-review/blob/d4a6de524cfc33c490c751a3bb084e86accf25fd/template/src/Elm/Review/Text.elm#L80
+      case "33BBC8": {
+        return "cyan";
+      }
+      case "33BBC8": {
+        return "cyan";
+      }
+      case "FFFF00": {
+        return "yellow";
+      }
+      case "008000": {
+        return "green";
+      }
+    }
+    return "red";
+  } else {
+    return color.toLowerCase();
+  }
+}
+
 /** @typedef {{problems: {title: string; message: unknown}[]; path: string}[]} Errors } */
 
 /**
@@ -61,6 +89,12 @@ const restoreColor = (error) => {
           problems.map(restoreProblem(path)).join("\n\n\n")
         )
         .join("\n\n\n\n\n");
+    } else if (error.type === "review-errors") {
+      return error.errors
+        .map(({ errors, path }) =>
+          errors.map(restoreProblem(path)).join("\n\n\n")
+        )
+        .join("\n\n\n\n\n");
     } else if (error.type === "error") {
       return restoreProblem(error.path)(error);
     } else {
@@ -78,13 +112,23 @@ const restoreColor = (error) => {
  * This function takes in the array of compiler errors and maps over them to generate a formatted compiler error
  **/
 const restoreProblem =
-  (/** @type {string} */ path) =>
-  (/** @type {{title:string; message: Message[]}} */ { title, message }) =>
-    [parseHeader(title, path), ...message.map(parseMsg)].join("");
+  (/** @type {string} */ path) => (/** @type {Problem | IError} */ info) => {
+    if (info.rule && info.formatted) {
+      return [
+        parseHeader(info.rule, path),
+        ...info.formatted.map(parseMsg),
+      ].join("");
+    } else {
+      return [
+        parseHeader(info.title, path),
+        ...info.message.map(parseMsg),
+      ].join("");
+    }
+  };
 
 module.exports = { restoreColor };
 
-/** @typedef { CompilerError | ReportError } RootObject */
+/** @typedef { CompilerError | ReportError | IElmReviewError } RootObject */
 
 /** @typedef { { type: "compile-errors"; errors: Error_[]; } } CompilerError */
 /** @typedef { { type: "error"; path: string; title: string; message: Message[]; } } ReportError */
@@ -97,3 +141,12 @@ module.exports = { restoreColor };
 /** @typedef {string | {underline: boolean; color: string?; string: string}} Message */
 
 /** @typedef { { path: string; name: string; problems: Problem[]; } } Error_  */
+
+/** @typedef  { { type: "review-errors"; errors: IFileError[]; } } IElmReviewError */
+
+/** @typedef  {  { path: string; errors: IError[]; } } IFileError */
+
+/** @typedef  { { rule: string; formatted: unknown[]; ruleLink: string; message: string; details: string[]; region: IRegion; fix?: { range: IRegion; string: string; }[]; } } IError */
+
+/** @typedef  {  { start: IPosition; end: IPosition; } } IRegion */
+/** @typedef  {   { line: number; column: number; } } IPosition */

package/generator/src/generate-template-module-connector.js

@@ -168,12 +168,17 @@ view page maybePageUrl globalData pageData =
 
                               _ ->
                                   { title = "Model mismatch", body = Html.text <| "Model mismatch" }
-                  , head = Page.${moduleName(name)}.page.head
+                  , head = ${
+                    phase === "browser"
+                      ? "[]"
+                      : `Page.${moduleName(name)}.page.head
                       { data = data
                       , sharedData = globalData
                       , routeParams = ${emptyRouteParams(name) ? "{}" : "s"}
                       , path = page.path
                       }
+                      `
+                  }
                   }
 `
           )
@@ -415,8 +420,12 @@ main =
         { init = init Nothing
         , urlToRoute = Route.urlToRoute
         , routeToPath = \\route -> route |> Maybe.map Route.routeToPath |> Maybe.withDefault []
-        , site = Site.config
-        , getStaticRoutes = getStaticRoutes |> DataSource.map (List.map Just)
+        , site = ${phase === "browser" ? `Nothing` : `Just Site.config`}
+        , getStaticRoutes = ${
+          phase === "browser"
+            ? `DataSource.succeed []`
+            : `getStaticRoutes |> DataSource.map (List.map Just)`
+        }
         , handleRoute = handleRoute
         , view = view
         , update = update
@@ -431,7 +440,11 @@ main =
         , fromJsPort = fromJsPort identity
         , data = dataForRoute
         , sharedData = Shared.template.data
-        , apiRoutes = \\htmlToString -> pathsToGenerateHandler :: routePatterns :: manifestHandler :: Api.routes getStaticRoutes htmlToString
+        , apiRoutes = ${
+          phase === "browser"
+            ? `\\_ -> []`
+            : `\\htmlToString -> pathsToGenerateHandler :: routePatterns :: manifestHandler :: Api.routes getStaticRoutes htmlToString`
+        }
         , pathPatterns = routePatterns3
         , basePath = [ ${basePath
           .split("/")

package/generator/src/init.js

@@ -19,6 +19,10 @@ async function run(name) {
         path.resolve(appRoot, "gitignore"),
         path.resolve(appRoot, ".gitignore")
       );
+      /* Since .elm-pages is in source-directories, make sure we create it before running any elm-pages commands
+       in case we run any install commands first.  See: https://github.com/dillonkearns/elm-pages/issues/205
+       */
+      fs.mkdirSync(path.join(appRoot, ".elm-pages"), { recursive: true });
     } catch (err) {
       console.log(err);
       process.exit(1);