elm-pages 2.1.11 → 3.0.0-beta.0

package/generator/src/request-cache.js

@@ -1,6 +1,5 @@
 const path = require("path");
-const undici = require("undici");
-const fs = require("fs");
+const fetch = require("node-fetch");
 const objectHash = require("object-hash");
 const kleur = require("kleur");
 
@@ -17,61 +16,76 @@ function requestToString(request) {
 /**
  * @param {Object} request
  */
-function fullPath(request) {
-  return path.join(
-    process.cwd(),
-    ".elm-pages",
-    "http-response-cache",
-    requestToString(request)
-  );
+function fullPath(portsHash, request, hasFsAccess) {
+  const requestWithPortHash =
+    request.url === "elm-pages-internal://port"
+      ? { portsHash, ...request }
+      : request;
+  if (hasFsAccess) {
+    return path.join(
+      process.cwd(),
+      ".elm-pages",
+      "http-response-cache",
+      requestToString(requestWithPortHash)
+    );
+  } else {
+    return path.join("/", requestToString(requestWithPortHash));
+  }
 }
 
 /**
  * @param {string} mode
- * @param {{url: string; headers: {[x: string]: string}; method: string; body: Body } } rawRequest
+ * @param {{url: string;headers: {[x: string]: string;};method: string;body: Body;}} rawRequest
  * @returns {Promise<string>}
+ * @param {string} portsFile
+ * @param {boolean} hasFsAccess
  */
-function lookupOrPerform(mode, rawRequest) {
+function lookupOrPerform(portsFile, mode, rawRequest, hasFsAccess, useCache) {
+  const { fs } = require("./request-cache-fs.js")(hasFsAccess);
   return new Promise(async (resolve, reject) => {
     const request = toRequest(rawRequest);
-    const responsePath = fullPath(request);
+    const portsHash = (portsFile && portsFile.match(/-([^-]+)\.js$/)[1]) || "";
+    const responsePath = fullPath(portsHash, request, hasFsAccess);
 
-    if (fs.existsSync(responsePath)) {
+    // TODO check cache expiration time and delete and go to else if expired
+    if (useCache && (await checkFileExists(fs, responsePath))) {
       // console.log("Skipping request, found file.");
       resolve(responsePath);
     } else {
       let portDataSource = {};
-      let portDataSourceFound = false;
+      let portDataSourceImportError = null;
       try {
-        portDataSource = requireUncached(
-          mode,
-          path.join(process.cwd(), "port-data-source.js")
-        );
-        portDataSourceFound = true;
-      } catch (e) {}
+        if (portsFile === undefined) {
+          throw "missing";
+        }
+        const portDataSourcePath = path.resolve(portsFile);
+        // On Windows, we need cannot use paths directly and instead must use a file:// URL.
+        // portDataSource = await require(url.pathToFileURL(portDataSourcePath).href);
+        portDataSource = require(portDataSourcePath);
+      } catch (e) {
+        portDataSourceImportError = e;
+      }
 
-      if (request.url.startsWith("port://")) {
+      if (request.url === "elm-pages-internal://port") {
         try {
-          const portName = request.url.replace(/^port:\/\//, "");
-          // console.time(JSON.stringify(request.url));
+          const { input, portName } = rawRequest.body.args[0];
+
           if (!portDataSource[portName]) {
-            if (portDataSourceFound) {
-              throw `DataSource.Port.send "${portName}" is not defined. Be sure to export a function with that name from port-data-source.js`;
+            if (portDataSourceImportError === null) {
+              throw `DataSource.Port.send "${portName}" was called, but I couldn't find a function with that name in the port definitions file. Is it exported correctly?`;
+            } else if (portDataSourceImportError === "missing") {
+              throw `DataSource.Port.send "${portName}" was called, but I couldn't find the port definitions file. Be sure to create a 'port-data-source.ts' or 'port-data-source.js' file and maybe restart the dev server.`;
             } else {
-              throw `DataSource.Port.send "${portName}" was called, but I couldn't find the port definitions file 'port-data-source.js'.`;
+              throw `DataSource.Port.send "${portName}" was called, but I couldn't import the port definitions file, because of this exception: \`${portDataSourceImportError}\` Are there syntax errors or expections thrown during import?`;
             }
           } else if (typeof portDataSource[portName] !== "function") {
-            throw `DataSource.Port.send "${portName}" is not a function. Be sure to export a function with that name from port-data-source.js`;
+            throw `DataSource.Port.send "${portName}" was called, but it is not a function. Be sure to export a function with that name from port-data-source.js`;
           }
           await fs.promises.writeFile(
             responsePath,
-            JSON.stringify(
-              await portDataSource[portName](rawRequest.body.args[0])
-            )
+            JSON.stringify(jsonResponse(await portDataSource[portName](input)))
           );
           resolve(responsePath);
-
-          // console.timeEnd(JSON.stringify(requestToPerform.masked));
         } catch (error) {
           console.trace(error);
           reject({
@@ -80,38 +94,81 @@ function lookupOrPerform(mode, rawRequest) {
           });
         }
       } else {
-        undici
-          .stream(
-            request.url,
-            {
-              method: request.method,
-              body: request.body,
-              headers: {
-                "User-Agent": "request",
-                ...request.headers,
-              },
+        try {
+          console.time(`fetch ${request.url}`);
+          const response = await fetch(request.url, {
+            method: request.method,
+            body: request.body,
+            headers: {
+              "User-Agent": "request",
+              ...request.headers,
             },
-            (response) => {
-              const writeStream = fs.createWriteStream(responsePath);
-              writeStream.on("finish", async () => {
-                resolve(responsePath);
-              });
+          });
 
-              return writeStream;
-            }
-          )
-          .catch((error) => {
-            let errorMessage = error.toString();
-            if (error.code === "ENOTFOUND") {
-              errorMessage = `Could not reach URL.`;
+          console.timeEnd(`fetch ${request.url}`);
+          const expectString = request.headers["elm-pages-internal"];
+
+          if (response.ok || expectString === "ExpectResponse") {
+            let body;
+            let bodyKind;
+            if (expectString === "ExpectJson") {
+              body = await response.json();
+              bodyKind = "json";
+            } else if (
+              expectString === "ExpectBytes" ||
+              expectString === "ExpectBytesResponse"
+            ) {
+              bodyKind = "bytes";
+              const arrayBuffer = await response.arrayBuffer();
+              body = Buffer.from(arrayBuffer).toString("base64");
+            } else if (expectString === "ExpectWhatever") {
+              bodyKind = "whatever";
+              body = null;
+            } else if (
+              expectString === "ExpectResponse" ||
+              expectString === "ExpectString"
+            ) {
+              bodyKind = "string";
+              body = await response.text();
+            } else {
+              throw `Unexpected expectString ${expectString}`;
             }
+
+            await fs.promises.writeFile(
+              responsePath,
+              JSON.stringify({
+                headers: Object.fromEntries(response.headers.entries()),
+                statusCode: response.status,
+                body: body,
+                bodyKind,
+                url: response.url,
+                statusText: response.statusText,
+              })
+            );
+
+            resolve(responsePath);
+          } else {
+            console.log("@@@ request-cache1 bad HTTP response");
             reject({
               title: "DataSource.Http Error",
               message: `${kleur
                 .yellow()
-                .underline(request.url)} ${errorMessage}`,
+                .underline(request.url)} Bad HTTP response ${response.status} ${
+                response.statusText
+              }
+`,
             });
+          }
+        } catch (error) {
+          console.trace("@@@ request-cache2 HTTP error", error);
+          reject({
+            title: "DataSource.Http Error",
+            message: `${kleur
+              .yellow()
+              .underline(request.url)} ${error.toString()}
+`,
           });
+        }
       }
     }
   });
@@ -131,7 +188,15 @@ function toRequest(elmRequest) {
     body: toBody(elmRequest.body),
   };
 }
-
+/**
+ * @param {string} file
+ */
+function checkFileExists(fs, file) {
+  return fs.promises
+    .access(file, fs.constants.F_OK)
+    .then(() => true)
+    .catch(() => false);
+}
 /**
  * @param {Body} body
  */
@@ -177,4 +242,11 @@ function requireUncached(mode, filePath) {
   return require(filePath);
 }
 
+/**
+ * @param {unknown} json
+ */
+function jsonResponse(json) {
+  return { bodyKind: "json", body: json };
+}
+
 module.exports = { lookupOrPerform };

package/generator/src/rewrite-client-elm-json.js

@@ -0,0 +1,49 @@
+const fs = require("fs");
+
+module.exports = async function () {
+  var elmJson = JSON.parse(
+    (await fs.promises.readFile("./elm.json")).toString()
+  );
+
+  // write new elm.json
+
+  await writeFileIfChanged(
+    "./elm-stuff/elm-pages/client/elm.json",
+    JSON.stringify(rewriteElmJson(elmJson))
+  );
+};
+
+function rewriteElmJson(elmJson) {
+  // The internal generated file will be at:
+  // ./elm-stuff/elm-pages/
+  // So, we need to take the existing elmJson and
+  // 1. remove existing path that looks at `Pages.elm`
+  elmJson["source-directories"] = elmJson["source-directories"].filter(
+    (item) => {
+      return item != ".elm-pages" && item != "app";
+    }
+  );
+  // 2. prepend ../../../ to remaining
+  elmJson["source-directories"] = elmJson["source-directories"].map((item) => {
+    return "../../../" + item;
+  });
+  // 3. add our own secret My.elm module 😈
+  elmJson["source-directories"].push(".elm-pages");
+  elmJson["source-directories"].push("app");
+  return elmJson;
+}
+
+async function writeFileIfChanged(filePath, content) {
+  if (
+    !(await fileExists(filePath)) ||
+    (await fs.promises.readFile(filePath, "utf8")) !== content
+  ) {
+    await fs.promises.writeFile(filePath, content);
+  }
+}
+function fileExists(file) {
+  return fs.promises
+    .access(file, fs.constants.F_OK)
+    .then(() => true)
+    .catch(() => false);
+}

package/generator/src/route-codegen-helpers.js

@@ -177,6 +177,62 @@ function toPathPattern(name) {
       .join("/")
   );
 }
+/**
+ * @param {string[]} name
+ * @returns {string[]}
+ */
+function toPathPatterns(name) {
+  const segments = parseRouteParamsWithStatic(name);
+
+  const lastSegment = segments[segments.length - 1];
+  const allButLast = segments.slice(0, segments.length - 1);
+  if (lastSegment && lastSegment.kind === "optional") {
+    return [
+      joinPath(newHelper(allButLast)),
+      joinPath(newHelper(allButLast).concat(`:${lastSegment.name}`)),
+    ];
+  } else {
+    return [joinPath(newHelper(segments))];
+  }
+}
+
+/**
+ * @param {string[]} segments
+ */
+function joinPath(segments) {
+  const joined = segments.join("/");
+  if (joined.startsWith("/")) {
+    return joined;
+  } else {
+    return "/" + joined;
+  }
+}
+
+/**
+ * @return {string[]}
+ */
+function newHelper(segments) {
+  return segments.map((param) => {
+    switch (param.kind) {
+      case "static": {
+        return camelToKebab(param.name);
+      }
+      case "dynamic": {
+        return `:${param.name}`;
+      }
+      case "optional": {
+        return `[:${param.name}]`;
+      }
+      case "required-splat": {
+        return `*`;
+      }
+      case "optional-splat": {
+        return `*`;
+      }
+    }
+  });
+  // .join("/");
+}
 
 /**
  * @param {string[]} name
@@ -211,7 +267,11 @@ function toElmPathPattern(name) {
     .flatMap((param) => {
       switch (param.kind) {
         case "static": {
-          return [`Pages.Internal.RoutePattern.StaticSegment "${camelToKebab(param.name)}"`];
+          return [
+            `Pages.Internal.RoutePattern.StaticSegment "${camelToKebab(
+              param.name
+            )}"`,
+          ];
         }
         case "dynamic": {
           return [`Pages.Internal.RoutePattern.DynamicSegment "${param.name}"`];
@@ -308,6 +368,7 @@ module.exports = {
   toFieldName,
   paramsRecord,
   toPathPattern,
+  toPathPatterns,
   parseRouteParams,
   parseRouteParamsWithStatic,
   toElmPathPattern,

package/generator/static-code/dev-style.css

@@ -0,0 +1,22 @@
+@keyframes lds-default {
+  0%,
+  20%,
+  80%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+}
+#not-found-reason code {
+  color: rgb(226, 0, 124);
+}
+#not-found-reason h1 {
+  font-size: 26px;
+  font-weight: bold;
+  padding-bottom: 15px;
+}
+#not-found-reason a:hover {
+  text-decoration: underline;
+}

package/generator/static-code/elm-pages.js

@@ -1,8 +1,7 @@
-import userInit from "/index.js";
-
-let prefetchedPages = [window.location.pathname];
-let initialLocationHash = document.location.hash.replace(/^#/, "");
+import userInit from "/index";
 
+let prefetchedPages;
+let initialLocationHash;
 /**
  * @returns
  */
@@ -11,15 +10,15 @@ function loadContentAndInitializeApp() {
   if (!path.endsWith("/")) {
     path = path + "/";
   }
-  const app = Elm.TemplateModulesBeta.init({
+  const app = Elm.Main.init({
     flags: {
       secrets: null,
       isPrerendering: false,
       isDevServer: false,
       isElmDebugMode: false,
-      contentJson: JSON.parse(
-        document.getElementById("__ELM_PAGES_DATA__").innerHTML
-      ),
+      contentJson: {},
+      pageDataBase64: document.getElementById("__ELM_PAGES_BYTES_DATA__")
+        .innerHTML,
       userFlags: userInit.flags(),
     },
   });
@@ -48,48 +47,51 @@ function prefetchIfNeeded(/** @type {HTMLAnchorElement} */ target) {
     link.setAttribute("as", "fetch");
 
     link.setAttribute("rel", "prefetch");
-    link.setAttribute("href", origin + target.pathname + "/content.json");
+    link.setAttribute("href", origin + target.pathname + "/content.dat");
     document.head.appendChild(link);
   }
 }
 
-const appPromise = new Promise(function (resolve, reject) {
-  document.addEventListener("DOMContentLoaded", (_) => {
-    resolve(loadContentAndInitializeApp());
-  });
-});
-
-userInit.load(appPromise);
-
-if (typeof connect === "function") {
-  connect(function (newContentJson) {
-    appPromise.then((app) => {
-      app.ports.fromJsPort.send({ contentJson: newContentJson });
+export function setup() {
+  prefetchedPages = [window.location.pathname];
+  initialLocationHash = document.location.hash.replace(/^#/, "");
+  const appPromise = new Promise(function (resolve, reject) {
+    document.addEventListener("DOMContentLoaded", (_) => {
+      resolve(loadContentAndInitializeApp());
     });
   });
-}
+  userInit.load(appPromise);
 
-/** @param {MouseEvent} event */
-const trigger_prefetch = (event) => {
-  const a = find_anchor(/** @type {Node} */ (event.target));
-  if (a && a.href && a.hasAttribute("elm-pages:prefetch")) {
-    prefetchIfNeeded(a);
+  if (typeof connect === "function") {
+    connect(function (bytesData) {
+      appPromise.then((app) => {
+        app.ports.hotReloadData.send(bytesData);
+      });
+    });
   }
-};
 
-/** @type {NodeJS.Timeout} */
-let mousemove_timeout;
+  /** @param {MouseEvent} event */
+  const trigger_prefetch = (event) => {
+    const a = find_anchor(/** @type {Node} */ (event.target));
+    if (a && a.href && a.hasAttribute("elm-pages:prefetch")) {
+      prefetchIfNeeded(a);
+    }
+  };
+
+  /** @type {NodeJS.Timeout} */
+  let mousemove_timeout;
 
-/** @param {MouseEvent} event */
-const handle_mousemove = (event) => {
-  clearTimeout(mousemove_timeout);
-  mousemove_timeout = setTimeout(() => {
-    trigger_prefetch(event);
-  }, 20);
-};
+  /** @param {MouseEvent} event */
+  const handle_mousemove = (event) => {
+    clearTimeout(mousemove_timeout);
+    mousemove_timeout = setTimeout(() => {
+      trigger_prefetch(event);
+    }, 20);
+  };
 
-addEventListener("touchstart", trigger_prefetch);
-addEventListener("mousemove", handle_mousemove);
+  addEventListener("touchstart", trigger_prefetch);
+  addEventListener("mousemove", handle_mousemove);
+}
 
 /**
  * @param {Node} node
@@ -100,3 +102,5 @@ function find_anchor(node) {
   while (node && node.nodeName.toUpperCase() !== "A") node = node.parentNode; // SVG <a> elements have a lowercase name
   return /** @type {HTMLAnchorElement} */ (node);
 }
+
+setup();