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

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;
@@ -75,40 +78,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 +118,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 +155,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?
@@ -627,6 +635,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 */

package/generator/src/compatibility-key.js

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

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 };

package/generator/src/dev-server.js

@@ -24,6 +24,10 @@ const busboy = require("busboy");
 const { createServer: createViteServer } = require("vite");
 const cliVersion = require("../../package.json").version;
 const esbuild = require("esbuild");
+const { merge_vite_configs } = require("./vite-utils.js");
+const { templateHtml } = require("./pre-render-html.js");
+const { resolveConfig } = require("./config.js");
+const globby = require("globby");
 
 /**
  * @param {{ port: string; base: string; https: boolean; debug: boolean; }} options
@@ -117,27 +121,23 @@ async function start(options) {
     watcher.add(sourceDirs);
   }
 
-  const viteConfig = await import(
-    path.join(process.cwd(), "elm-pages.config.mjs")
-  )
-    .then(async (elmPagesConfig) => {
-      return elmPagesConfig.default.vite || {};
-    })
-    .catch((error) => {
-      console.warn(
-        kleur.yellow(
-          "No `elm-pages.config.mjs` file found. Using default config."
-        )
-      );
-      return {};
-    });
-  const vite = await createViteServer({
-    server: { middlewareMode: "ssr", base: options.base, port: options.port },
-    configFile: false,
-    root: process.cwd(),
-    base: options.base,
-    ...viteConfig,
-  });
+  const config = await resolveConfig();
+  const vite = await createViteServer(
+    merge_vite_configs(
+      {
+        server: {
+          middlewareMode: "ssr",
+          base: options.base,
+          port: options.port,
+        },
+        configFile: false,
+        root: process.cwd(),
+        base: options.base,
+      },
+
+      config.vite
+    )
+  );
   esbuild
     .build({
       entryPoints: ["./port-data-source"],
@@ -148,7 +148,7 @@ async function start(options) {
       metafile: true,
       bundle: true,
       watch: true,
-      logLevel: "error",
+      logLevel: "silent",
 
       outdir: ".elm-pages/compiled-ports",
       entryNames: "[dir]/[name]-[hash]",
@@ -158,11 +158,13 @@ async function start(options) {
           name: "example",
           setup(build) {
             build.onEnd((result) => {
-              global.portsFilePath = Object.keys(result.metafile.outputs)[0];
+              try {
+                global.portsFilePath = Object.keys(result.metafile.outputs)[0];
 
-              clients.forEach((client) => {
-                client.response.write(`data: content.dat\n\n`);
-              });
+                clients.forEach((client) => {
+                  client.response.write(`data: content.dat\n\n`);
+                });
+              } catch (e) {}
             });
           },
         },
@@ -172,7 +174,13 @@ async function start(options) {
       console.log("Watching port-data-source...");
     })
     .catch((error) => {
-      console.error("Failed to start port-data-source watcher", 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 app = connect()
@@ -459,35 +467,7 @@ async function start(options) {
             }
             case "html": {
               try {
-                const template =
-                  /*html*/
-                  `<!DOCTYPE html>
-<!-- ROOT --><html lang="en">
-  <head>
-    <script src="/hmr.js" type="text/javascript"></script>
-    <script src="/elm.js" type="text/javascript"></script>
-    <link rel="stylesheet" href="/style.css">
-    <link rel="stylesheet" href="/dev-style.css">
-    <script src="/elm-pages.js" type="module"></script>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title><!-- PLACEHOLDER_TITLE --></title>
-    <meta name="generator" content="elm-pages v${cliVersion}" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#ffffff" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta
-      name="apple-mobile-web-app-status-bar-style"
-      content="black-translucent"
-    />
-    <!-- PLACEHOLDER_HEAD_AND_DATA -->
-  </head>
-  <body>
-    <div data-url="" display="none"></div>
-    <!-- PLACEHOLDER_HTML -->
-  </body>
-</html>
-                `;
+                const template = templateHtml(true, config.headTagsTemplate);
                 const processedTemplate = await vite.transformIndexHtml(
                   req.originalUrl,
                   template

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

@@ -63,32 +63,10 @@ async function generateTemplateModuleConnector(basePath, phase) {
 }
 
 async function runElmCodegenCli(templates, basePath, phase) {
-  // await runElmCodegenInstall();
-  // try {
-  //   await compileCliApp(
-  //     // { debug: true },
-  //     {},
-  //     `Generate.elm`,
-  //     path.join(process.cwd(), "elm-stuff/elm-pages-codegen.js"),
-  //     path.join(__dirname, "../../codegen"),
-
-  //     path.join(process.cwd(), "elm-stuff/elm-pages-codegen.js")
-  //   );
-  // } catch (error) {
-  //   console.log(restoreColorSafe(error));
-  //   process.exit(1);
-  //   // throw error;
-  // }
-
   const filePath = path.join(__dirname, `../../codegen/elm-pages-codegen.js`);
 
-  // TODO use uncached require here to prevent stale code from running
-
   const promise = new Promise((resolve, reject) => {
     const elmPagesCodegen = require(filePath).Elm.Generate;
-      // path.join(
-      // process.cwd(),
-      // "./elm-stuff/elm-pages-codegen.js")
 
     const app = elmPagesCodegen.init({
       flags: { templates: templates, basePath, phase },
@@ -104,12 +82,10 @@ async function runElmCodegenCli(templates, basePath, phase) {
     }
   });
   const filesToGenerate = await promise;
-  console.dir(filesToGenerate.map((file) => file.path));
 
   return filesToGenerate;
 }
 
-
 /**
  *
  * @param {string[][]} templates
@@ -175,8 +151,6 @@ function sortScore(name) {
   );
 }
 
-
-
 function fetcherModule(name) {
   let moduleName = name.join(".");
   // TODO need to account for splat routes/etc.
@@ -248,7 +222,6 @@ submit toMsg options =
 `;
 }
 
-
 /**
  * Convert Strings from camelCase to kebab-case
  * @param {string} input
@@ -258,5 +231,4 @@ function camelToKebab(input) {
   return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
 
-
 module.exports = { generateTemplateModuleConnector, sortTemplates };

package/generator/src/pre-render-html.js

@@ -17,28 +17,32 @@ function wrapHtml(basePath, fromElm, contentDatPayload) {
   };
 }
 
-function templateHtml() {
+/**
+ * @param {boolean} devMode
+ * @param {(context: {cliVersion: string;}) => string} userHeadTagsTemplate
+ */
+function templateHtml(devMode, userHeadTagsTemplate) {
   return /* html */ `<!DOCTYPE html>
 <!-- ROOT --><html lang="en">
   <head>
-    <!-- PLACEHOLDER_PRELOADS -->
-    <script defer src="/elm.js" type="text/javascript"></script>
-    <script defer src="${path.join(
-      __dirname,
-      "../static-code/elm-pages.js"
-    )}" type="module"></script>
-    <link rel="stylesheet" href="/style.css" />
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title><!-- PLACEHOLDER_TITLE --></title>
-    <meta name="generator" content="elm-pages v${cliVersion}" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="theme-color" content="#ffffff" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta
-      name="apple-mobile-web-app-status-bar-style"
-      content="black-translucent"
-    />
+    ${
+      devMode
+        ? `<script src="/hmr.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="/dev-style.css">`
+        : `<!-- PLACEHOLDER_PRELOADS -->`
+    }
+    <script defer src="/elm.js" type="text/javascript"></script>
+    ${
+      devMode
+        ? `<script src="/elm-pages.js" type="module"></script>`
+        : `<script defer src="${path.join(
+            __dirname,
+            "../static-code/elm-pages.js"
+          )}" type="module"></script>`
+    }
+    ${indent(userHeadTagsTemplate({ cliVersion }))}
     <!-- PLACEHOLDER_HEAD_AND_DATA -->
   </head>
   <body>
@@ -48,6 +52,16 @@ function templateHtml() {
 </html>`;
 }
 
+/**
+ * @param {string} snippet
+ */
+function indent(snippet) {
+  return snippet
+    .split("\n")
+    .map((line) => `    ${line}`)
+    .join("\n");
+}
+
 /**
  * @param {string} processedTemplate
  */

package/generator/src/render.js

@@ -9,6 +9,7 @@ const preRenderHtml = require("./pre-render-html.js");
 const { lookupOrPerform } = require("./request-cache.js");
 const kleur = require("kleur");
 const cookie = require("cookie-signature");
+const { compatibilityKey } = require("./compatibility-key.js");
 kleur.enabled = true;
 
 process.on("unhandledRejection", (error) => {
@@ -98,6 +99,7 @@ function runElmApp(
     app = elmModule.Elm.Main.init({
       flags: {
         mode,
+        compatibilityKey,
         request: {
           payload: modifiedRequest,
           kind: "single-page",

package/generator/src/seo-renderer.js

@@ -43,11 +43,16 @@ function headTag(rootModifiers) {
 
 function toString(/** @type { SeoTag[] }  */ tags) {
   return tags
-    .map((headTag) => {
+    .flatMap((headTag) => {
       if (headTag.type === "head") {
-        return appendTag(headTag);
+        return [appendTag(headTag)];
       } else if (headTag.type === "json-ld") {
-        return appendJsonLdTag(headTag);
+        return [appendJsonLdTag(headTag)];
+      } else if (headTag.type === "stripped") {
+        console.warn(
+          `WARNING: Head.nonLoadingTag value ignored because it used a loading tag: ${headTag.message}`
+        );
+        return [];
       } else {
         throw new Error(`Unknown tag type ${JSON.stringify(headTag)}`);
       }
@@ -55,7 +60,7 @@ function toString(/** @type { SeoTag[] }  */ tags) {
     .join("");
 }
 
-/** @typedef {HeadTag | JsonLdTag} SeoTag */
+/** @typedef {HeadTag | JsonLdTag | StrippedTag} SeoTag */
 
 /** @typedef {{ name: string; attributes: string[][]; type: 'head' }} HeadTag */
 function appendTag(/** @type {HeadTag} */ tagDetails) {
@@ -66,6 +71,8 @@ function appendTag(/** @type {HeadTag} */ tagDetails) {
 }
 
 /** @typedef {{ contents: Object; type: 'json-ld' }} JsonLdTag */
+/** @typedef {{ message: string; type: 'stripped' }} StrippedTag */
+
 function appendJsonLdTag(/** @type {JsonLdTag} */ tagDetails) {
   return `<script type="application/ld+json">
 ${JSON.stringify(tagDetails.contents)}

package/generator/src/vite-utils.js

@@ -0,0 +1,78 @@
+/** This code is from https://github.com/sveltejs/kit/blob/3b457f67d4d7c59fc63bb3f600a490e4dacc2e62/packages/kit/src/exports/vite/utils.js */
+
+/**
+ * @param {...import('vite').UserConfig} configs
+ * @returns {import('vite').UserConfig}
+ */
+function merge_vite_configs(...configs) {
+  return deep_merge(
+    ...configs.map((config) => ({
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: normalize_alias(config.resolve?.alias || {}),
+      },
+    }))
+  );
+}
+
+/**
+ * Takes zero or more objects and returns a new object that has all the values
+ * deeply merged together. None of the original objects will be mutated at any
+ * level, and the returned object will have no references to the original
+ * objects at any depth. If there's a conflict the last one wins, except for
+ * arrays which will be combined.
+ * @param {...Object} objects
+ * @returns {Record<string, any>} the merged object
+ */
+function deep_merge(...objects) {
+  const result = {};
+  /** @type {string[]} */
+  objects.forEach((o) => merge_into(result, o));
+  return result;
+}
+
+/**
+ * normalize kit.vite.resolve.alias as an array
+ * @param {import('vite').AliasOptions} o
+ * @returns {import('vite').Alias[]}
+ */
+function normalize_alias(o) {
+  if (Array.isArray(o)) return o;
+  return Object.entries(o).map(([find, replacement]) => ({
+    find,
+    replacement,
+  }));
+}
+
+/**
+ * Merges b into a, recursively, mutating a.
+ * @param {Record<string, any>} a
+ * @param {Record<string, any>} b
+ */
+function merge_into(a, b) {
+  /**
+   * Checks for "plain old Javascript object", typically made as an object
+   * literal. Excludes Arrays and built-in types like Buffer.
+   * @param {any} x
+   */
+  const is_plain_object = (x) =>
+    typeof x === "object" && x.constructor === Object;
+
+  for (const prop in b) {
+    if (is_plain_object(b[prop])) {
+      if (!is_plain_object(a[prop])) {
+        a[prop] = {};
+      }
+      merge_into(a[prop], b[prop]);
+    } else if (Array.isArray(b[prop])) {
+      if (!Array.isArray(a[prop])) {
+        a[prop] = [];
+      }
+      a[prop].push(...b[prop]);
+    } else {
+      a[prop] = b[prop];
+    }
+  }
+}
+module.exports = { merge_vite_configs };

package/generator/template/app/Api.elm

@@ -9,7 +9,7 @@ import Route exposing (Route)
 
 routes :
     DataSource (List Route)
-    -> (Html Never -> String)
+    -> (Maybe { indent : Int, newLines : Bool } -> Html Never -> String)
     -> List (ApiRoute ApiRoute.Response)
 routes getStaticRoutes htmlToString =
     []

package/generator/template/app/Site.elm

@@ -14,6 +14,11 @@ config =
 
 head : DataSource (List Head.Tag)
 head =
-    [ Head.sitemapLink "/sitemap.xml"
+    [ Head.metaName "viewport" (Head.raw "width=device-width,initial-scale=1")
+    , Head.metaName "mobile-web-app-capable" (Head.raw "yes")
+    , Head.metaName "theme-color" (Head.raw "#ffffff")
+    , Head.metaName "apple-mobile-web-app-capable" (Head.raw "yes")
+    , Head.metaName "apple-mobile-web-app-status-bar-style" (Head.raw "black-translucent")
+    , Head.sitemapLink "/sitemap.xml"
     ]
         |> DataSource.succeed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elm-pages",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.10",
   "homepage": "https://elm-pages.com",
   "moduleResolution": "node",
   "description": "Type-safe static sites, written in pure elm with your own custom elm-markup syntax.",
@@ -10,7 +10,6 @@
     "test": "./test.sh",
     "test:snapshot": "(cd examples/escaping && npm install && npm test) && (cd examples/base-path && npm install && npm test)",
     "cypress": "npm start & cypress run",
-    "prepare": "npm run build:generator",
     "build:generator": "elm-codegen install && (cd codegen && lamdera make Generate.elm --output elm-pages-codegen.js)",
     "review": "elm-review"
   },
@@ -46,7 +45,7 @@
     "object-hash": "^2.2.0",
     "serve-static": "^1.15.0",
     "terser": "^5.14.2",
-    "vite": "^3.0.9",
+    "vite": "^3.1.8",
     "which": "^2.0.2"
   },
   "devDependencies": {

package/src/ApiRoute.elm

@@ -11,9 +11,6 @@ module ApiRoute exposing
 to a DataSource so you can pull in HTTP data, etc. Because ApiRoutes don't hydrate into Elm apps (like pages in elm-pages do), you can pull in as much data as you want in
 the DataSource for your ApiRoutes, and it won't effect the payload size. Instead, the size of an ApiRoute is just the content you output for that route.
 
-In a future release, ApiRoutes may be able to run at request-time in a serverless function, allowing you to use pure Elm code to create dynamic APIs, and even pulling in data from
-DataSources dynamically.
-
 @docs ApiRoute, ApiRouteBuilder, Response
 
 @docs capture, literal, slash, succeed