elm-pages 3.0.20 → 3.0.22

package/README.md

@@ -11,7 +11,7 @@
 
 - [elm-pages Docs Site](https://elm-pages.com/docs)
 - [elm-pages site showcase](https://elm-pages.com/showcase/)
-- [elm-pages Elm API Docs](https://package.elm-lang.org/packages/dillonkearns/elm-pages/10.2.0/)
+- [elm-pages Elm API Docs](https://package.elm-lang.org/packages/dillonkearns/elm-pages/10.2.1/)
 - [Quick start repo](https://github.com/dillonkearns/elm-pages-starter) [(live site hosted here)](https://elm-pages-starter.netlify.com)
 - [Introducing `elm-pages` blog post](https://elm-pages.com/blog/introducing-elm-pages)
 - [`examples` folder](https://github.com/dillonkearns/elm-pages/blob/master/examples/) (includes https://elm-pages.com site source) Use `git clone --recurse-submodules https://github.com/dillonkearns/elm-pages.git` so that there aren't missing files when you try to build the examples.

package/generator/dead-code-review/elm.json

@@ -10,8 +10,8 @@
             "elm/core": "1.0.5",
             "elm/json": "1.1.3",
             "elm-community/result-extra": "2.4.0",
-            "jfmengels/elm-review": "2.14.0",
-            "stil4m/elm-syntax": "7.3.2"
+            "jfmengels/elm-review": "2.15.1",
+            "stil4m/elm-syntax": "7.3.8"
         },
         "indirect": {
             "elm/bytes": "1.0.8",
@@ -23,7 +23,6 @@
             "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.3",
             "elm-explorations/test": "2.2.0",
-            "miniBill/elm-unicode": "1.1.1",
             "rtfeldman/elm-hex": "1.0.0",
             "stil4m/structured-writer": "1.0.3"
         }

package/generator/dead-code-review/tests/Pages/Review/DeadCodeEliminateDataTest.elm

@@ -143,7 +143,7 @@ placeholder moduleName =
                             , details =
                                 [ "" ]
                             , under =
-                                """import Html.Styled as Html"""
+                                """import Html.Styled as Html exposing (Html)"""
                             }
                             |> Review.Test.whenFixed
                                 """module View exposing (View, map, placeholder)

package/generator/review/elm.json

@@ -11,9 +11,9 @@
             "elm/html": "1.0.0",
             "elm/json": "1.1.3",
             "elm/regex": "1.0.0",
-            "jfmengels/elm-review": "2.14.0",
-            "mdgriffith/elm-codegen": "5.0.0",
-            "stil4m/elm-syntax": "7.3.2",
+            "jfmengels/elm-review": "2.15.1",
+            "mdgriffith/elm-codegen": "5.2.0",
+            "stil4m/elm-syntax": "7.3.8",
             "the-sett/elm-syntax-dsl": "6.0.3"
         },
         "indirect": {
@@ -30,7 +30,7 @@
             "miniBill/elm-unicode": "1.1.1",
             "rtfeldman/elm-hex": "1.0.0",
             "stil4m/structured-writer": "1.0.3",
-            "the-sett/elm-pretty-printer": "3.1.0"
+            "the-sett/elm-pretty-printer": "3.1.1"
         }
     },
     "test-dependencies": {

package/generator/src/build.js

@@ -73,7 +73,11 @@ export async function run(options) {
     // This is a temporary hack to avoid this warning. elm-pages manages compiling the Elm code without Vite's involvement, so it is external to Vite.
     // There is a pending issue to allow having external scripts in Vite, once this issue is fixed we can remove this hack:
     // https://github.com/vitejs/vite/issues/3533
-    if (messages && messages[0] && !messages[0].startsWith(`<script src="/elm.js">`)) {
+    if (
+      messages &&
+      messages[0] &&
+      !messages[0].startsWith(`<script src="/elm.js">`)
+    ) {
       console.info(...messages);
     }
   };
@@ -97,13 +101,11 @@ export async function run(options) {
         configFile: false,
         root: process.cwd(),
         base: options.base,
-        assetsInclude: [
-          '/elm-pages.js'
-        ],
+        assetsInclude: ["/elm-pages.js"],
         ssr: false,
 
         build: {
-          manifest: '___vite-manifest___.json',
+          manifest: "___vite-manifest___.json",
           outDir: "dist",
           rollupOptions: {
             input: "elm-stuff/elm-pages/index.html",
@@ -126,7 +128,10 @@ export async function run(options) {
       fullOutputPath,
       withoutExtension
     );
-    const assetManifestPath = path.join(process.cwd(), "dist/___vite-manifest___.json");
+    const assetManifestPath = path.join(
+      process.cwd(),
+      "dist/___vite-manifest___.json"
+    );
     const manifest = JSON.parse(
       await fsPromises.readFile(assetManifestPath, { encoding: "utf-8" })
     );
@@ -292,7 +297,7 @@ export async function render(request) {
       processedIndexTemplate
     );
   } catch (error) {
-    if(error) {
+    if (error) {
       console.error(restoreColorSafe(error));
     }
     buildError = true;
@@ -486,9 +491,7 @@ async function spawnElmMake(mode, options, elmEntrypointPath, outputPath, cwd) {
   }
   await fsPromises.writeFile(
     outputPath,
-    (
-      await fsPromises.readFile(outputPath, "utf-8")
-    ).replace(
+    (await fsPromises.readFile(outputPath, "utf-8")).replace(
       /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_FORM_TO_STRING.\)/g,
       "function 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 " +
         (options.debug
@@ -685,19 +688,26 @@ function _HtmlAsJson_toJson(html) {
 
   await fsPromises.writeFile(
     ELM_FILE_PATH().replace(/\.js$/, ".cjs"),
-    applyScriptPatches(options, elmFileContent
-      .replace(
-        /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_JSON_STRINGIFY.\)/g,
-        `return ${forceThunksSource}
+    applyScriptPatches(
+      options,
+      elmFileContent
+        .replace(
+          /return \$elm\$json\$Json\$Encode\$string\(.REPLACE_ME_WITH_JSON_STRINGIFY.\)/g,
+          `return ${forceThunksSource}
   return _Json_wrap(forceThunks(html));
 `
-      )
-      .replace(`console.log('App dying')`, "")));
+        )
+        .replace(`console.log('App dying')`, "")
+    )
+  );
 }
 
 function applyScriptPatches(options, input) {
   if (options.isScript) {
-    return input.replace(`_Debug_crash(8, moduleName, region, message)`, "console.error('TODO in module `' + moduleName + '` ' + _Debug_regionToString(region) + '\\n\\n' + message); process.exitCode = 1; debugger; throw 'CRASH!';");
+    return input.replace(
+      `_Debug_crash(8, moduleName, region, message)`,
+      "console.error('TODO in module `' + moduleName + '` ' + _Debug_regionToString(region) + '\\n\\n' + message); process.exitCode = 1; debugger; throw 'CRASH!';"
+    );
   } else {
     return input;
   }

package/generator/src/cli.js

@@ -344,7 +344,9 @@ async function requireElm(compiledElmPath) {
   const warnOriginal = console.warn;
   console.warn = function () {};
 
-  let Elm = (await import(url.pathToFileURL(path.resolve(compiledElmPath)).href)).default;
+  let Elm = (
+    await import(url.pathToFileURL(path.resolve(compiledElmPath)).href)
+  ).default;
   console.warn = warnOriginal;
   return Elm;
 }

package/generator/src/compatibility-key.js

@@ -1,3 +1,3 @@
 export const compatibilityKey = 22;
 
-export const packageVersion = "3.0.20";
+export const packageVersion = "3.0.22";

package/generator/src/dev-server.js

@@ -37,7 +37,11 @@ const __dirname = path.dirname(__filename);
  */
 export async function start(options) {
   console.error = function (...messages) {
-    if (messages && messages[0] && !messages[0].startsWith("Failed to load url")) {
+    if (
+      messages &&
+      messages[0] &&
+      !messages[0].startsWith("Failed to load url")
+    ) {
       console.info(...messages);
     }
   };
@@ -175,9 +179,7 @@ export async function start(options) {
           base: options.base,
           port: options.port,
         },
-        assetsInclude: [
-          '/elm-pages.js'
-        ],
+        assetsInclude: ["/elm-pages.js"],
         appType: "custom",
         configFile: false,
         root: process.cwd(),

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

@@ -66,7 +66,9 @@ export async function generateTemplateModuleConnector(basePath, phase) {
 async function runElmCodegenCli(templates, basePath, phase) {
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
-  const filePath = pathToFileURL(path.join(__dirname, `../../codegen/elm-pages-codegen.cjs`)).href;
+  const filePath = pathToFileURL(
+    path.join(__dirname, `../../codegen/elm-pages-codegen.cjs`)
+  ).href;
 
   const promise = new Promise(async (resolve, reject) => {
     const elmPagesCodegen = (await import(filePath)).default.Elm.Generate;

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

@@ -48,11 +48,12 @@ export function templateHtml(devMode, userHeadTagsTemplate) {
     ${indent(userHeadTagsTemplate({ cliVersion: packageVersion }))}
     <!-- PLACEHOLDER_HEAD_AND_DATA -->
   </head>
-  <body>
-    <div data-url="" display="none"></div>
-    <!-- PLACEHOLDER_HTML -->
-  </body>
-</html>`;
+  <body><div data-elm data-url="" style="display: none;"></div><div data-elm id="elm-pages-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); whiteSpace: nowrap; border: 0;"></div><!-- PLACEHOLDER_HTML --></body></html>`;
+  // NOTE: The above line needs to:
+  // - Be in sync with `view` in Platform.elm (render the same elements).
+  // - Have `data-elm` on each child of `<body>`.
+  // - Not include any extra whitespace. Even whitespace between </body> and </html> is parsed by browsers as a text node _inside_ <body>.
+  // This is to avoid unnecessary rerenders on init (when the first `view` call is diffed with the virtualized form of the above HTML).
 }
 
 /**

package/generator/src/request-cache.js

@@ -21,6 +21,14 @@ export function lookupOrPerform(
   hasFsAccess,
   useCache
 ) {
+  const uniqueTimeId =
+    Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+  const timeStart = (message) => {
+    !rawRequest.quiet && console.time(`${message} ${uniqueTimeId}`);
+  };
+  const timeEnd = (message) => {
+    !rawRequest.quiet && console.timeEnd(`${message} ${uniqueTimeId}`);
+  };
   const makeFetchHappen = makeFetchHappenOriginal.defaults({
     cache: mode === "build" ? "no-cache" : "default",
   });
@@ -92,8 +100,7 @@ export function lookupOrPerform(
             }),
           });
         } else {
-          !rawRequest.quiet &&
-            console.time(`BackendTask.Custom.run "${portName}"`);
+          timeStart(`BackendTask.Custom.run "${portName}"`);
           let context = {
             cwd: path.resolve(...rawRequest.dir),
             quiet: rawRequest.quiet,
@@ -135,8 +142,7 @@ export function lookupOrPerform(
               });
             }
           }
-          !rawRequest.quiet &&
-            console.timeEnd(`BackendTask.Custom.run "${portName}"`);
+          timeEnd(`BackendTask.Custom.run "${portName}"`);
         }
       } catch (error) {
         console.trace(error);
@@ -147,7 +153,7 @@ export function lookupOrPerform(
       }
     } else {
       try {
-        !rawRequest.quiet && console.time(`fetch ${request.url}`);
+        timeStart(`fetch ${request.url}`);
         const response = await safeFetch(makeFetchHappen, request.url, {
           method: request.method,
           body: request.body,
@@ -158,7 +164,7 @@ export function lookupOrPerform(
           ...rawRequest.cacheOptions,
         });
 
-        !rawRequest.quiet && console.timeEnd(`fetch ${request.url}`);
+        timeEnd(`fetch ${request.url}`);
         const expectString = request.headers["elm-pages-internal"];
 
         let body;

package/generator/src/spinnies/index.js

@@ -1,25 +1,31 @@
-'use strict';
+"use strict";
 
-import * as readline from 'readline';
+import * as readline from "readline";
 import * as chalk from "kleur/colors";
-import cliCursor from 'cli-cursor';
-
-
-import { purgeSpinnerOptions, purgeSpinnersOptions, colorOptions, breakText, getLinesLength, terminalSupportsUnicode } from './utils.js';
-import { dots, dashes, writeStream, cleanStream } from './utils.js';
+import cliCursor from "cli-cursor";
+
+import {
+  purgeSpinnerOptions,
+  purgeSpinnersOptions,
+  colorOptions,
+  breakText,
+  getLinesLength,
+  terminalSupportsUnicode,
+} from "./utils.js";
+import { dots, dashes, writeStream, cleanStream } from "./utils.js";
 
 export class Spinnies {
   constructor(options = {}) {
     options = purgeSpinnersOptions(options);
     this.options = {
-	// TODO kleur doesn't support brightGreen, only nested function or chained syntax
-//       spinnerColor: 'brightGreen',
-      spinnerColor: 'green',
-      succeedColor: 'green',
-      failColor: 'red',
+      // TODO kleur doesn't support brightGreen, only nested function or chained syntax
+      //       spinnerColor: 'brightGreen',
+      spinnerColor: "green",
+      succeedColor: "green",
+      failColor: "red",
       spinner: terminalSupportsUnicode() ? dots : dashes,
       disableSpins: false,
-      ...options
+      ...options,
     };
     this.spinners = {};
     this.isCursorHidden = false;
@@ -27,7 +33,11 @@ export class Spinnies {
     this.stream = process.stderr;
     this.lineCount = 0;
     this.currentFrameIndex = 0;
-    this.spin = !this.options.disableSpins && !process.env.CI && process.stderr && process.stderr.isTTY;
+    this.spin =
+      !this.options.disableSpins &&
+      !process.env.CI &&
+      process.stderr &&
+      process.stderr.isTTY;
     this.bindSigint();
   }
 
@@ -36,13 +46,14 @@ export class Spinnies {
   }
 
   add(name, options = {}) {
-    if (typeof name !== 'string') throw Error('A spinner reference name must be specified');
+    if (typeof name !== "string")
+      throw Error("A spinner reference name must be specified");
     if (!options.text) options.text = name;
     const spinnerProperties = {
       ...colorOptions(this.options),
       succeedPrefix: this.options.succeedPrefix,
       failPrefix: this.options.failPrefix,
-      status: 'spinning',
+      status: "spinning",
       ...purgeSpinnerOptions(options),
     };
 
@@ -61,37 +72,42 @@ export class Spinnies {
   }
 
   succeed(name, options = {}) {
-    this.setSpinnerProperties(name, options, 'succeed');
+    this.setSpinnerProperties(name, options, "succeed");
     this.updateSpinnerState();
 
     return this.spinners[name];
   }
 
   fail(name, options = {}) {
-    this.setSpinnerProperties(name, options, 'fail');
+    this.setSpinnerProperties(name, options, "fail");
     this.updateSpinnerState();
 
     return this.spinners[name];
   }
 
   remove(name) {
-    if (typeof name !== 'string') throw Error('A spinner reference name must be specified');
+    if (typeof name !== "string")
+      throw Error("A spinner reference name must be specified");
     const spinner = this.spinners[name];
     delete this.spinners[name];
 
     return spinner;
   }
 
-  stopAll(newStatus = 'stopped') {
-    Object.keys(this.spinners).forEach(name => {
+  stopAll(newStatus = "stopped") {
+    Object.keys(this.spinners).forEach((name) => {
       const { status: currentStatus } = this.spinners[name];
-      if (currentStatus !== 'fail' && currentStatus !== 'succeed' && currentStatus !== 'non-spinnable') {
-        if (newStatus === 'succeed' || newStatus === 'fail') {
+      if (
+        currentStatus !== "fail" &&
+        currentStatus !== "succeed" &&
+        currentStatus !== "non-spinnable"
+      ) {
+        if (newStatus === "succeed" || newStatus === "fail") {
           this.spinners[name].status = newStatus;
           this.spinners[name].color = this.options[`${newStatus}Color`];
         } else {
-          this.spinners[name].status = 'stopped';
-          this.spinners[name].color = 'grey';
+          this.spinners[name].status = "stopped";
+          this.spinners[name].color = "grey";
         }
       }
     });
@@ -101,14 +117,18 @@ export class Spinnies {
   }
 
   hasActiveSpinners() {
-    return !!Object.values(this.spinners).find(({ status }) => status === 'spinning');
+    return !!Object.values(this.spinners).find(
+      ({ status }) => status === "spinning"
+    );
   }
 
   setSpinnerProperties(name, options, status) {
-    if (typeof name !== 'string') throw Error('A spinner reference name must be specified');
-    if (!this.spinners[name]) throw Error(`No spinner initialized with name ${name}`);
+    if (typeof name !== "string")
+      throw Error("A spinner reference name must be specified");
+    if (!this.spinners[name])
+      throw Error(`No spinner initialized with name ${name}`);
     options = purgeSpinnerOptions(options);
-    status = status || 'spinning';
+    status = status || "spinning";
 
     this.spinners[name] = { ...this.spinners[name], ...options, status };
   }
@@ -129,29 +149,41 @@ export class Spinnies {
     const { frames, interval } = this.options.spinner;
     return setInterval(() => {
       this.setStreamOutput(frames[this.currentFrameIndex]);
-      this.currentFrameIndex = this.currentFrameIndex === frames.length - 1 ? 0 : ++this.currentFrameIndex
+      this.currentFrameIndex =
+        this.currentFrameIndex === frames.length - 1
+          ? 0
+          : ++this.currentFrameIndex;
     }, interval);
   }
 
-  setStreamOutput(frame = '') {
-    let output = '';
+  setStreamOutput(frame = "") {
+    let output = "";
     const linesLength = [];
     const hasActiveSpinners = this.hasActiveSpinners();
-    Object
-      .values(this.spinners)
-      .map(({ text, status, color, spinnerColor, succeedColor, failColor, succeedPrefix, failPrefix, indent }) => {
+    Object.values(this.spinners).map(
+      ({
+        text,
+        status,
+        color,
+        spinnerColor,
+        succeedColor,
+        failColor,
+        succeedPrefix,
+        failPrefix,
+        indent,
+      }) => {
         let line;
         let prefixLength = indent || 0;
-        if (status === 'spinning') {
+        if (status === "spinning") {
           prefixLength += frame.length + 1;
           text = breakText(text, prefixLength);
           line = `${chalk[spinnerColor](frame)} ${color ? chalk[color](text) : text}`;
         } else {
-          if (status === 'succeed') {
+          if (status === "succeed") {
             prefixLength += succeedPrefix.length + 1;
             if (hasActiveSpinners) text = breakText(text, prefixLength);
             line = `${chalk.green(succeedPrefix)} ${chalk[succeedColor](text)}`;
-          } else if (status === 'fail') {
+          } else if (status === "fail") {
             prefixLength += failPrefix.length + 1;
             if (hasActiveSpinners) text = breakText(text, prefixLength);
             line = `${chalk.red(failPrefix)} ${chalk[failColor](text)}`;
@@ -162,16 +194,17 @@ export class Spinnies {
         }
         linesLength.push(...getLinesLength(text, prefixLength));
         output += indent ? `${" ".repeat(indent)}${line}\n` : `${line}\n`;
-      });
+      }
+    );
 
-    if(!hasActiveSpinners) readline.clearScreenDown(this.stream);
+    if (!hasActiveSpinners) readline.clearScreenDown(this.stream);
     writeStream(this.stream, output, linesLength);
     if (hasActiveSpinners) cleanStream(this.stream, linesLength);
     this.lineCount = linesLength.length;
   }
 
   setRawStreamOutput() {
-    Object.values(this.spinners).forEach(i => {
+    Object.values(this.spinners).forEach((i) => {
       process.stderr.write(`- ${i.text}\n`);
     });
   }
@@ -190,8 +223,8 @@ export class Spinnies {
   }
 
   bindSigint(lines) {
-    process.removeAllListeners('SIGINT');
-    process.on('SIGINT', () => {
+    process.removeAllListeners("SIGINT");
+    process.on("SIGINT", () => {
       cliCursor.show();
       readline.moveCursor(process.stderr, 0, this.lineCount);
       process.exit(0);

package/generator/src/spinnies/utils.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 // source: https://github.com/jbcarpanelli/spinnies/blob/master/utils.js
 // Code  vemodified to ESM syntax from original repo
@@ -6,20 +6,42 @@
 import * as readline from "readline";
 // original code dependend on this for `getLinesLength`. Is this necessary?
 // const stripAnsi = require('strip-ansi');
-export const { dashes,dots } =
-{
-  "dots": {
-    "interval": 50,
-    "frames": ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+export const { dashes, dots } = {
+  dots: {
+    interval: 50,
+    frames: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
   },
-  "dashes": {
-    "interval": 80,
-    "frames": ["-", "_"]
-  }
-}
-
-const VALID_STATUSES = ['succeed', 'fail', 'spinning', 'non-spinnable', 'stopped'];
-const VALID_COLORS = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white', 'gray', 'redBright', 'greenBright', 'yellowBright', 'blueBright', 'magentaBright', 'cyanBright', 'whiteBright'];
+  dashes: {
+    interval: 80,
+    frames: ["-", "_"],
+  },
+};
+
+const VALID_STATUSES = [
+  "succeed",
+  "fail",
+  "spinning",
+  "non-spinnable",
+  "stopped",
+];
+const VALID_COLORS = [
+  "black",
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "white",
+  "gray",
+  "redBright",
+  "greenBright",
+  "yellowBright",
+  "blueBright",
+  "magentaBright",
+  "cyanBright",
+  "whiteBright",
+];
 
 export function purgeSpinnerOptions(options) {
   const { text, status, indent } = options;
@@ -27,8 +49,8 @@ export function purgeSpinnerOptions(options) {
   const colors = colorOptions(options);
 
   if (!VALID_STATUSES.includes(status)) delete opts.status;
-  if (typeof text !== 'string') delete opts.text;
-  if (typeof indent !== 'number') delete opts.indent;
+  if (typeof text !== "string") delete opts.text;
+  if (typeof indent !== "number") delete opts.indent;
 
   return { ...colors, ...opts };
 }
@@ -36,25 +58,27 @@ export function purgeSpinnerOptions(options) {
 export function purgeSpinnersOptions({ spinner, disableSpins, ...others }) {
   const colors = colorOptions(others);
   const prefixes = prefixOptions(others);
-  const disableSpinsOption = typeof disableSpins === 'boolean' ? { disableSpins } : {};
+  const disableSpinsOption =
+    typeof disableSpins === "boolean" ? { disableSpins } : {};
   spinner = turnToValidSpinner(spinner);
 
-  return { ...colors, ...prefixes, ...disableSpinsOption, spinner }
+  return { ...colors, ...prefixes, ...disableSpinsOption, spinner };
 }
 
 function turnToValidSpinner(spinner = {}) {
   const platformSpinner = terminalSupportsUnicode() ? dots : dashes;
-  if (!typeof spinner === 'object') return platformSpinner;
+  if (!typeof spinner === "object") return platformSpinner;
   let { interval, frames } = spinner;
-  if (!Array.isArray(frames) || frames.length < 1) frames = platformSpinner.frames;
-  if (typeof interval !== 'number') interval = platformSpinner.interval;
+  if (!Array.isArray(frames) || frames.length < 1)
+    frames = platformSpinner.frames;
+  if (typeof interval !== "number") interval = platformSpinner.interval;
 
   return { interval, frames };
 }
 
 export function colorOptions({ color, succeedColor, failColor, spinnerColor }) {
   const colors = { color, succeedColor, failColor, spinnerColor };
-  Object.keys(colors).forEach(key => {
+  Object.keys(colors).forEach((key) => {
     if (!VALID_COLORS.includes(colors[key])) delete colors[key];
   });
 
@@ -62,29 +86,33 @@ export function colorOptions({ color, succeedColor, failColor, spinnerColor }) {
 }
 
 function prefixOptions({ succeedPrefix, failPrefix }) {
-  if(terminalSupportsUnicode()) {
-    succeedPrefix = succeedPrefix || '✓';
-    failPrefix = failPrefix || '✖';
+  if (terminalSupportsUnicode()) {
+    succeedPrefix = succeedPrefix || "✓";
+    failPrefix = failPrefix || "✖";
   } else {
-    succeedPrefix = succeedPrefix || '√';
-    failPrefix = failPrefix || '×';
+    succeedPrefix = succeedPrefix || "√";
+    failPrefix = failPrefix || "×";
   }
 
   return { succeedPrefix, failPrefix };
 }
 
 export function breakText(text, prefixLength) {
-  return text.split('\n')
-    .map((line, index) => index === 0 ? breakLine(line, prefixLength) : breakLine(line, 0))
-    .join('\n');
+  return text
+    .split("\n")
+    .map((line, index) =>
+      index === 0 ? breakLine(line, prefixLength) : breakLine(line, 0)
+    )
+    .join("\n");
 }
 
 function breakLine(line, prefixLength) {
   const columns = process.stderr.columns || 95;
-  return line.length  >= columns - prefixLength
-    ? `${line.substring(0, columns - prefixLength - 1)}\n${
-      breakLine(line.substring(columns - prefixLength - 1, line.length), 0)
-    }`
+  return line.length >= columns - prefixLength
+    ? `${line.substring(0, columns - prefixLength - 1)}\n${breakLine(
+        line.substring(columns - prefixLength - 1, line.length),
+        0
+      )}`
     : line;
 }
 
@@ -94,8 +122,11 @@ function breakLine(line, prefixLength) {
 //     .map((line, index) => index === 0 ? line.length + prefixLength : line.length);
 // }
 export function getLinesLength(text, prefixLength) {
-  return text.split('\n')
-    .map((line, index) => index === 0 ? line.length + prefixLength : line.length);
+  return text
+    .split("\n")
+    .map((line, index) =>
+      index === 0 ? line.length + prefixLength : line.length
+    );
 }
 
 export function writeStream(stream, output, rawLines) {
@@ -115,9 +146,11 @@ export function cleanStream(stream, rawLines) {
 }
 
 export function terminalSupportsUnicode() {
-    // The default command prompt and powershell in Windows do not support Unicode characters.
-    // However, the VSCode integrated terminal and the Windows Terminal both do.
-    return process.platform !== 'win32'
-      || process.env.TERM_PROGRAM === 'vscode'
-      || !!process.env.WT_SESSION
+  // The default command prompt and powershell in Windows do not support Unicode characters.
+  // However, the VSCode integrated terminal and the Windows Terminal both do.
+  return (
+    process.platform !== "win32" ||
+    process.env.TERM_PROGRAM === "vscode" ||
+    !!process.env.WT_SESSION
+  );
 }

package/generator/static-code/hmr.js

@@ -510,9 +510,8 @@ function hideError(velocity) {
       } catch (error) {}
     } else {
       try {
-        document.getElementById(
-          "elm-live:elmErrorBackground"
-        ).style.opacity = 0;
+        document.getElementById("elm-live:elmErrorBackground").style.opacity =
+          0;
         document.getElementById("elm-live:elmError").style.transform =
           "rotateX(90deg)";
       } catch (error) {}

package/generator/template/elm.json

@@ -14,7 +14,7 @@
             "dillonkearns/elm-bcp47-language-tag": "2.0.0",
             "dillonkearns/elm-form": "3.0.1",
             "dillonkearns/elm-markdown": "7.0.1",
-            "dillonkearns/elm-pages": "10.2.0",
+            "dillonkearns/elm-pages": "10.2.1",
             "elm/browser": "1.0.2",
             "elm/bytes": "1.0.8",
             "elm/core": "1.0.5",
@@ -55,7 +55,7 @@
             "rtfeldman/elm-iso8601-date-strings": "1.1.4",
             "stil4m/elm-syntax": "7.3.8",
             "stil4m/structured-writer": "1.0.3",
-            "the-sett/elm-pretty-printer": "3.1.0",
+            "the-sett/elm-pretty-printer": "3.1.1",
             "wolfadex/elm-ansi": "3.0.0"
         }
     },

package/generator/template/package.json

@@ -9,7 +9,7 @@
   "devDependencies": {
     "elm-codegen": "^0.6.1",
     "elm-optimize-level-2": "^0.3.5",
-    "elm-pages": "3.0.19",
+    "elm-pages": "3.0.22",
     "elm-review": "^2.12.0",
     "elm-tooling": "^1.15.1",
     "lamdera": "^0.19.1-1.3.2",

package/generator/template/script/.elm-pages/compiled-ports/custom-backend-task.mjs

@@ -2,6 +2,4 @@
 async function hello(name) {
   return `Hello ${name}!`;
 }
-export {
-  hello
-};
+export { hello };

package/generator/template/script/src/AddRoute.elm

@@ -6,8 +6,9 @@ import Cli.OptionsParser as OptionsParser
 import Cli.Program as Program
 import Elm
 import Elm.Annotation as Type
+import Elm.Arg
 import Elm.Case
-import Elm.Declare
+import Elm.Declare exposing (Function, fn2)
 import Elm.Let
 import Elm.Op
 import Gen.BackendTask
@@ -97,8 +98,8 @@ createFile { moduleName, fields } =
                                     )
                             )
                             |> Elm.Let.fn2 "fieldView"
-                                ( "label", Type.string |> Just )
-                                ( "field", Nothing )
+                                (Elm.Arg.var "label")
+                                (Elm.Arg.var "field")
                                 (\label field ->
                                     Html.div []
                                         [ Html.label []
@@ -131,57 +132,71 @@ createFile { moduleName, fields } =
                         (\justFormHelp ->
                             Request.formData justFormHelp.formHandlers request
                                 |> Gen.Maybe.call_.map
-                                    (Elm.fn ( "formData", Nothing )
+                                    (Elm.fn (Elm.Arg.var "formData")
                                         (\formData ->
-                                            Elm.Case.tuple formData
-                                                "response"
-                                                "parsedForm"
-                                                (\response parsedForm ->
-                                                    Elm.Case.custom parsedForm
-                                                        Type.int
-                                                        [ Elm.Case.branch1 "Form.Valid"
-                                                            ( "validatedForm", Type.int )
-                                                            (\validatedForm ->
-                                                                Elm.Case.custom validatedForm
-                                                                    Type.int
-                                                                    [ Elm.Case.branch1 "Action"
-                                                                        ( "parsed", Type.int )
-                                                                        (\parsed ->
-                                                                            Scaffold.Form.recordEncoder parsed fields
-                                                                                |> Gen.Json.Encode.encode 2
-                                                                                |> Gen.Pages.Script.call_.log
-                                                                                |> Gen.BackendTask.call_.map
-                                                                                    (Elm.fn ( "_", Nothing )
-                                                                                        (\_ ->
-                                                                                            Response.render
-                                                                                                (Elm.record
-                                                                                                    [ ( "errors", response )
-                                                                                                    ]
-                                                                                                )
+                                            Elm.Case.custom
+                                                formData
+                                                Type.unit
+                                                [ Elm.Case.branch
+                                                    (Elm.Arg.tuple
+                                                        (Elm.Arg.var "response")
+                                                        (Elm.Arg.var "parsedForm")
+                                                    )
+                                                    (\( response, parsedForm ) ->
+                                                        Elm.Case.custom parsedForm
+                                                            Type.int
+                                                            [ Elm.Case.branch
+                                                                (Elm.Arg.customType "Form.Valid" identity
+                                                                    |> Elm.Arg.item (Elm.Arg.var "validatedForm")
+                                                                )
+                                                                (\validatedForm ->
+                                                                    Elm.Case.custom validatedForm
+                                                                        Type.int
+                                                                        [ Elm.Case.branch
+                                                                            (Elm.Arg.customType "Action" identity
+                                                                                |> Elm.Arg.item (Elm.Arg.var "parsed")
+                                                                            )
+                                                                            (\parsed ->
+                                                                                Scaffold.Form.recordEncoder parsed fields
+                                                                                    |> Gen.Json.Encode.encode 2
+                                                                                    |> Gen.Pages.Script.call_.log
+                                                                                    |> Gen.BackendTask.call_.map
+                                                                                        (Elm.fn Elm.Arg.ignore
+                                                                                            (\_ ->
+                                                                                                Response.render
+                                                                                                    (Elm.record
+                                                                                                        [ ( "errors", response )
+                                                                                                        ]
+                                                                                                    )
+                                                                                            )
                                                                                         )
-                                                                                    )
-                                                                        )
-                                                                    ]
-                                                            )
-                                                        , Elm.Case.branch2 "Form.Invalid"
-                                                            ( "parsed", Type.int )
-                                                            ( "error", Type.int )
-                                                            (\_ _ ->
-                                                                "Form validations did not succeed!"
-                                                                    |> Gen.Pages.Script.log
-                                                                    |> Gen.BackendTask.call_.map
-                                                                        (Elm.fn ( "_", Nothing )
-                                                                            (\_ ->
-                                                                                Response.render
-                                                                                    (Elm.record
-                                                                                        [ ( "errors", response )
-                                                                                        ]
-                                                                                    )
                                                                             )
-                                                                        )
-                                                            )
-                                                        ]
-                                                )
+                                                                        ]
+                                                                )
+                                                            , Elm.Case.branch
+                                                                (Elm.Arg.customType
+                                                                    "Form.Invalid"
+                                                                    Tuple.pair
+                                                                    |> Elm.Arg.item (Elm.Arg.var "parsed")
+                                                                    |> Elm.Arg.item (Elm.Arg.var "error")
+                                                                )
+                                                                (\( _, _ ) ->
+                                                                    "Form validations did not succeed!"
+                                                                        |> Gen.Pages.Script.log
+                                                                        |> Gen.BackendTask.call_.map
+                                                                            (Elm.fn Elm.Arg.ignore
+                                                                                (\_ ->
+                                                                                    Response.render
+                                                                                        (Elm.record
+                                                                                            [ ( "errors", response )
+                                                                                            ]
+                                                                                        )
+                                                                                )
+                                                                            )
+                                                                )
+                                                            ]
+                                                    )
+                                                ]
                                         )
                                     )
                                 |> Gen.Maybe.withDefault
@@ -244,9 +259,10 @@ createFile { moduleName, fields } =
                 \{ shared, app, msg, model } ->
                     Elm.Case.custom msg
                         (Type.named [] "Msg")
-                        [ Elm.Case.branch0 "NoOp"
-                            (Elm.tuple model
-                                Effect.none
+                        [ Elm.Case.branch (Elm.Arg.customType "NoOp" ())
+                            (\() ->
+                                Elm.tuple model
+                                    Effect.none
                             )
                         ]
             , init =
@@ -262,24 +278,11 @@ createFile { moduleName, fields } =
             }
 
 
-errorsView :
-    { declaration : Elm.Declaration
-    , call : Elm.Expression -> Elm.Expression -> Elm.Expression
-    , callFrom : List String -> Elm.Expression -> Elm.Expression -> Elm.Expression
-    , value : List String -> Elm.Expression
-    }
+errorsView : Function (Elm.Expression -> Elm.Expression -> Elm.Expression)
 errorsView =
-    Elm.Declare.fn2 "errorsView"
-        ( "errors", Type.namedWith [ "Form" ] "Errors" [ Type.string ] |> Just )
-        ( "field"
-        , Type.namedWith [ "Form", "Validation" ]
-            "Field"
-            [ Type.string
-            , Type.var "parsed"
-            , Type.var "kind"
-            ]
-            |> Just
-        )
+    fn2 "errorsView"
+        (Elm.Arg.var "errors")
+        (Elm.Arg.var "field")
         (\errors field ->
             Elm.ifThen
                 (Gen.List.call_.isEmpty (Form.errorsForField field errors))
@@ -288,7 +291,7 @@ errorsView =
                     []
                     [ Html.call_.ul (Elm.list [])
                         (Gen.List.call_.map
-                            (Elm.fn ( "error", Nothing )
+                            (Elm.fn (Elm.Arg.var "error")
                                 (\error ->
                                     Html.li
                                         [ Attr.style "color" "red"

package/generator/template/script/src/AddStaticRoute.elm

@@ -6,6 +6,7 @@ import Cli.OptionsParser as OptionsParser
 import Cli.Program as Program
 import Elm
 import Elm.Annotation as Type
+import Elm.Arg
 import Elm.Case
 import Gen.BackendTask
 import Gen.Effect as Effect
@@ -69,9 +70,10 @@ createFile { moduleName } =
                 \{ shared, app, msg, model } ->
                     Elm.Case.custom msg
                         (Type.named [] "Msg")
-                        [ Elm.Case.branch0 "NoOp"
-                            (Elm.tuple model
-                                Effect.none
+                        [ Elm.Case.branch (Elm.Arg.customType "NoOp" ())
+                            (\() ->
+                                Elm.tuple model
+                                    Effect.none
                             )
                         ]
             , init =

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "elm-pages",
   "type": "module",
-  "version": "3.0.20",
+  "version": "3.0.22",
   "homepage": "https://elm-pages.com",
   "moduleResolution": "node",
-  "description": "Type-safe static sites, written in pure elm with your own custom elm-markup syntax.",
+  "description": "Hybrid Elm framework with full-stack and static routes.",
   "main": "index.js",
   "scripts": {
     "start": "cd examples/end-to-end && npm i && npx elm-pages dev",
@@ -12,7 +12,8 @@
     "test:snapshot": "(cd examples/escaping && npm install && npm test) && (cd examples/base-path && npm install && npm test)",
     "cypress": "npm start & cypress run",
     "build:generator": "elm-codegen install && (cd codegen && lamdera make Generate.elm --output elm-pages-codegen.js && mv elm-pages-codegen.js elm-pages-codegen.cjs)",
-    "review": "elm-review"
+    "review": "elm-review",
+    "format": "prettier . --write --cache --cache-location='node_modules/.cache/.prettiercache' --log-level=warn"
   },
   "repository": "https://github.com/dillonkearns/elm-pages",
   "keywords": [
@@ -27,27 +28,27 @@
   "dependencies": {
     "@sindresorhus/merge-streams": "^4.0.0",
     "busboy": "^1.6.0",
-    "chokidar": "^4.0.1",
+    "chokidar": "^4.0.3",
     "cli-cursor": "^5.0.0",
-    "commander": "^12.1.0",
+    "commander": "^13.1.0",
     "connect": "^3.7.0",
     "cookie-signature": "^1.2.2",
     "cross-spawn": "7.0.6",
     "devcert": "^1.2.2",
-    "elm-doc-preview": "^6.0.0",
+    "elm-doc-preview": "^6.0.1",
     "elm-hot": "^1.1.6",
-    "esbuild": "^0.24.0",
-    "fs-extra": "^11.2.0",
-    "globby": "14.0.2",
+    "esbuild": "^0.25.0",
+    "fs-extra": "^11.3.0",
+    "globby": "14.1.0",
     "gray-matter": "^4.0.3",
-    "jsesc": "^3.0.2",
+    "jsesc": "^3.1.0",
     "kleur": "^4.1.5",
     "make-fetch-happen": "^14.0.3",
-    "memfs": "^4.14.0",
+    "memfs": "^4.17.0",
     "micromatch": "^4.0.8",
     "serve-static": "^1.16.2",
-    "terser": "^5.36.0",
-    "vite": "^6.0.0",
+    "terser": "^5.39.0",
+    "vite": "^6.2.0",
     "which": "^5.0.0"
   },
   "devDependencies": {
@@ -55,18 +56,19 @@
     "@types/fs-extra": "^11.0.4",
     "@types/make-fetch-happen": "^10.0.4",
     "@types/micromatch": "^4.0.9",
-    "@types/node": "^22.10.0",
+    "@types/node": "^22.13.9",
     "@types/serve-static": "^1.15.7",
-    "cypress": "^13.16.0",
+    "cypress": "^14.1.0",
     "elm-codegen": "^0.6.1",
     "elm-optimize-level-2": "^0.3.5",
-    "elm-review": "^2.12.0",
-    "elm-test": "^0.19.1-revision12",
+    "elm-review": "^2.13.2",
+    "elm-test": "^0.19.1-revision15",
     "elm-tooling": "^1.15.1",
     "elm-verify-examples": "^6.0.3",
     "lamdera": "^0.19.1-1.3.2",
-    "typescript": "^5.7.2",
-    "vitest": "^2.1.6"
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2",
+    "vitest": "^3.0.7"
   },
   "files": [
     "adapter/",

package/src/AriaLiveAnnouncer.elm

@@ -17,6 +17,7 @@ view title =
 
 mainView : String -> Html msg
 mainView title =
+    -- NOTE: If you make changes here, also update pre-render-html.js!
     Html.div
         [ Attr.id "elm-pages-announcer"
         , Attr.attribute "aria-live" "assertive"

package/src/Pages/Internal/Platform/Cli.elm

@@ -1025,7 +1025,8 @@ render404Page config sharedData isDevServer path notFoundReason =
 
 bodyToString : List (Html msg) -> String
 bodyToString body =
-    body |> List.map (HtmlPrinter.htmlToString Nothing) |> String.join "\n"
+    -- NOTE: Don’t join the strings with a newline here – see pre-render-html.js.
+    body |> List.map (HtmlPrinter.htmlToString Nothing) |> String.concat
 
 
 urlToRoute : ProgramConfig userMsg userModel route pageData actionData sharedData effect mappedMsg errorPage -> Url -> route

package/src/Pages/Internal/Platform.elm

@@ -123,6 +123,7 @@ view config model =
     in
     { title = title
     , body =
+        -- NOTE: If you make changes here, also update pre-render-html.js!
         [ onViewChangeElement model.url
         , AriaLiveAnnouncer.view model.ariaNavigationAnnouncement
         ]
@@ -136,9 +137,10 @@ onViewChangeElement currentUrl =
     -- it is used from the JS-side to reliably
     -- check when Elm has changed pages
     -- (and completed rendering the view)
+    -- NOTE: If you make changes here, also update pre-render-html.js!
     Html.div
         [ Attr.attribute "data-url" (Url.toString currentUrl)
-        , Attr.attribute "display" "none"
+        , Attr.style "display" "none"
         ]
         []
 

package/src/Test/Html/Internal/ElmHtml/InternalTypes.elm

@@ -2,7 +2,7 @@ module Test.Html.Internal.ElmHtml.InternalTypes exposing
     ( ElmHtml(..), TextTagRecord, NodeRecord, CustomNodeRecord, MarkdownNodeRecord
     , Facts, Tagger, EventHandler, ElementKind(..)
     , Attribute(..), AttributeRecord, NamespacedAttributeRecord, PropertyRecord, EventRecord
-    , decodeElmHtml, emptyFacts, toElementKind, decodeAttribute
+    , decodeElmHtml, emptyFacts, toElementKind, decodeAttribute, isUnsafeName
     )
 
 {-| Internal types used to represent Elm Html in pure Elm
@@ -13,7 +13,7 @@ module Test.Html.Internal.ElmHtml.InternalTypes exposing
 
 @docs Attribute, AttributeRecord, NamespacedAttributeRecord, PropertyRecord, EventRecord
 
-@docs decodeElmHtml, emptyFacts, toElementKind, decodeAttribute
+@docs decodeElmHtml, emptyFacts, toElementKind, decodeAttribute, isUnsafeName
 
 -}
 
@@ -21,6 +21,7 @@ import Dict exposing (Dict)
 import Html.Events
 import Json.Decode exposing (field)
 import Json.Encode
+import Regex exposing (Regex)
 import Test.Html.Internal.ElmHtml.Constants as Constants exposing (..)
 import Test.Html.Internal.ElmHtml.Helpers exposing (..)
 import Test.Html.Internal.ElmHtml.Markdown exposing (..)
@@ -124,6 +125,7 @@ type ElementKind
     | EscapableRawTextElements
     | ForeignElements
     | NormalElements
+    | InvalidElements
 
 
 type HtmlContext msg
@@ -510,12 +512,27 @@ escapableRawTextElements =
 -}
 
 
+unsafeName : Regex
+unsafeName =
+    {- https://github.com/preactjs/preact-render-to-string/blob/27f340b6e7d77ec7775a49a78d105cad26fa0857/src/lib/util.js#L2 -}
+    Regex.fromString "[\\s\\n\\\\/='\"\\0<>]"
+        |> Maybe.withDefault Regex.never
+
+
+isUnsafeName : String -> Bool
+isUnsafeName name =
+    Regex.contains unsafeName name
+
+
 {-| Identify the kind of element. Helper to convert an tag name into a type for
 pattern matching.
 -}
 toElementKind : String -> ElementKind
 toElementKind element =
-    if List.member element voidElements then
+    if isUnsafeName element then
+        InvalidElements
+
+    else if List.member element voidElements then
         VoidElements
 
     else if List.member element rawTextElements then

package/src/Test/Html/Internal/ElmHtml/ToString.elm

@@ -115,23 +115,25 @@ nodeRecordToString options { tag, children, facts } =
                     styleValues
                         |> List.map (\( key, value ) -> key ++ ":" ++ value ++ ";")
                         |> String.join ""
-                        |> (\styleString -> "style=\"" ++ styleString ++ "\"")
+                        |> (\styleString -> "style=\"" ++ escapeHtml styleString ++ "\"")
                         |> Just
 
         classes =
             Dict.get "className" facts.stringAttributes
-                |> Maybe.map (\name -> "class=\"" ++ name ++ "\"")
+                |> Maybe.map (\name -> "class=\"" ++ escapeHtml name ++ "\"")
 
         stringAttributes =
             Dict.filter (\k v -> k /= "className") facts.stringAttributes
                 |> Dict.toList
+                |> List.filter (\( k, _ ) -> not (isUnsafeName k))
                 |> List.map (Tuple.mapFirst propertyToAttributeName)
-                |> List.map (\( k, v ) -> k ++ "=\"" ++ v ++ "\"")
+                |> List.map (\( k, v ) -> k ++ "=\"" ++ escapeHtml v ++ "\"")
                 |> String.join " "
                 |> Just
 
         boolAttributes =
             Dict.toList facts.boolAttributes
+                |> List.filter (\( k, _ ) -> not (isUnsafeName k))
                 |> List.filterMap
                     (\( k, v ) ->
                         if v then
@@ -144,6 +146,9 @@ nodeRecordToString options { tag, children, facts } =
                 |> Just
     in
     case toElementKind tag of
+        InvalidElements ->
+            [ "<!-- invalid element -->" ]
+
         {- Void elements only have a start tag; end tags must not be
            specified for void elements.
         -}
@@ -187,10 +192,15 @@ escapeRawText kind rawText =
             rawText
 
         _ ->
-            {- https://github.com/elm/virtual-dom/blob/5a5bcf48720bc7d53461b3cd42a9f19f119c5503/src/Elm/Kernel/VirtualDom.server.js#L8-L26 -}
-            rawText
-                |> String.replace "&" "&amp;"
-                |> String.replace "<" "&lt;"
-                |> String.replace ">" "&gt;"
-                |> String.replace "\"" "&quot;"
-                |> String.replace "'" "&#039;"
+            escapeHtml rawText
+
+
+escapeHtml : String -> String
+escapeHtml rawText =
+    {- https://github.com/elm/virtual-dom/blob/5a5bcf48720bc7d53461b3cd42a9f19f119c5503/src/Elm/Kernel/VirtualDom.server.js#L8-L26 -}
+    rawText
+        |> String.replace "&" "&amp;"
+        |> String.replace "<" "&lt;"
+        |> String.replace ">" "&gt;"
+        |> String.replace "\"" "&quot;"
+        |> String.replace "'" "&#039;"

package/generator/src/hello.ts

@@ -1,5 +0,0 @@
-export function hello(): string {
-  console.log("HELLLO!!!!");
-
-  return "Hello World!";
-}