elm-pages 3.0.0-beta.0 → 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,30 +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;
-  }
-
-  // TODO use uncached require here to prevent stale code from running
+  const filePath = path.join(__dirname, `../../codegen/elm-pages-codegen.js`);
 
   const promise = new Promise((resolve, reject) => {
-    const elmPagesCodegen = require(path.join(
-      process.cwd(),
-      "./elm-stuff/elm-pages-codegen.js"
-    )).Elm.Generate;
+    const elmPagesCodegen = require(filePath).Elm.Generate;
 
     const app = elmPagesCodegen.init({
       flags: { templates: templates, basePath, phase },
@@ -102,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
@@ -173,8 +151,6 @@ function sortScore(name) {
   );
 }
 
-
-
 function fetcherModule(name) {
   let moduleName = name.join(".");
   // TODO need to account for splat routes/etc.
@@ -246,7 +222,6 @@ submit toMsg options =
 `;
 }
 
-
 /**
  * Convert Strings from camelCase to kebab-case
  * @param {string} input
@@ -256,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.0",
+  "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,7 @@
     "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": "elm-codegen install",
+    "build:generator": "elm-codegen install && (cd codegen && lamdera make Generate.elm --output elm-pages-codegen.js)",
     "review": "elm-review"
   },
   "repository": "https://github.com/dillonkearns/elm-pages",
@@ -45,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": {
@@ -68,7 +68,9 @@
   "files": [
     "generator/src/",
     "generator/review/",
+    "generator/dead-code-review/",
     "src/",
+    "codegen/elm-pages-codegen.js",
     "generator/template/",
     "generator/static-code/"
   ],