elm-pages 3.0.0-beta.7 → 3.0.0-beta.9

package/generator/review/elm-stuff/tests-0.19.1/js/node_supervisor.js

@@ -75,19 +75,19 @@ let testsCount, todoTests;
 let reporter;
 let runners = [];
 let working = false;
-let workersCount = 2;
+let workersCount = 10;
 let startWorkCallback = function(){};
 const verbosity = 0;
 
 // Create a long lived reporter worker
 const { Elm } = require("./Reporter.elm.js");
 const flags = {
-  initialSeed: 3791732356,
+  initialSeed: 188222656,
   fuzzRuns: 100,
-  mode: "consoleNoColor",
+  mode: "consoleColor",
   verbosity: verbosity,
   globs: [],
-  paths: ["/home/runner/work/elm-pages-v3-beta/elm-pages-v3-beta/generator/review/tests/Pages/Review/NoContractViolationsTest.elm"],
+  paths: ["/Users/dillonkearns/src/github.com/dillonkearns/elm-pages-v3-beta/generator/review/tests/Pages/Review/NoContractViolationsTest.elm"],
 };
 reporter = Elm.Reporter.init({ flags: flags });
 

package/generator/src/build.js

@@ -18,6 +18,7 @@ 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;
@@ -117,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>`
@@ -139,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?
@@ -620,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/config.js

@@ -1,7 +1,9 @@
 const path = require("path");
 
 async function resolveConfig() {
-  return await import(path.join(process.cwd(), "elm-pages.config.mjs"))
+  const initialConfig = await await import(
+    path.join(process.cwd(), "elm-pages.config.mjs")
+  )
     .then(async (elmPagesConfig) => {
       return (
         elmPagesConfig.default || {
@@ -18,21 +20,21 @@ async function resolveConfig() {
         vite: {},
       };
     });
+
+  return {
+    preloadTagForFile: function () {
+      return true;
+    },
+    headTagsTemplate: defaultHeadTagsTemplate,
+    vite: {},
+    ...initialConfig,
+  };
 }
 
 function defaultHeadTagsTemplate(context) {
   return `
 <link rel="stylesheet" href="/style.css" />
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
 <meta name="generator" content="elm-pages v${context.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"
-/>
 `;
 }
 

package/generator/src/dev-server.js

@@ -27,6 +27,7 @@ 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
@@ -147,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]",
@@ -157,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) {}
             });
           },
         },
@@ -171,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()

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

@@ -25,20 +25,18 @@ function templateHtml(devMode, userHeadTagsTemplate) {
   return /* html */ `<!DOCTYPE html>
 <!-- ROOT --><html lang="en">
   <head>
+    <meta charset="UTF-8" />
     <title><!-- PLACEHOLDER_TITLE --></title>
     ${
       devMode
-        ? `
-    <script src="/hmr.js" type="text/javascript"></script>
+        ? `<script src="/hmr.js" type="text/javascript"></script>
     <link rel="stylesheet" href="/dev-style.css">`
-        : `
-    <!-- PLACEHOLDER_PRELOADS -->`
+        : `<!-- PLACEHOLDER_PRELOADS -->`
     }
     <script defer src="/elm.js" type="text/javascript"></script>
     ${
       devMode
-        ? `<script src="/elm-pages.js" type="module"></script>
-`
+        ? `<script src="/elm-pages.js" type="module"></script>`
         : `<script defer src="${path.join(
             __dirname,
             "../static-code/elm-pages.js"

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/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.7",
+  "version": "3.0.0-beta.9",
   "homepage": "https://elm-pages.com",
   "moduleResolution": "node",
   "description": "Type-safe static sites, written in pure elm with your own custom elm-markup syntax.",

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

package/src/DataSource.elm

@@ -7,7 +7,7 @@ module DataSource exposing
     , map2, map3, map4, map5, map6, map7, map8, map9
     )
 
-{-| In an `elm-pages` app, each page can define a value `data` which is a `DataSource` that will be resolved **before** `init` is called. That means it is also available
+{-| In an `elm-pages` app, each Route Module can define a value `data` which is a `DataSource` that will be resolved **before** `init` is called. That means it is also available
 when the page's HTML is pre-rendered during the build step. You can also access the resolved data in `head` to use it for the page's SEO meta tags.
 
 A `DataSource` lets you pull in data from:
@@ -20,9 +20,17 @@ A `DataSource` lets you pull in data from:
   - Or any combination of the above, using `DataSource.map2`, `DataSource.andThen`, or other combining/continuing helpers from this module
 
 
-## Where Does DataSource Data Come From?
+## DataSource's vs. Effect's/Cmd's
 
-Data from a `DataSource` is resolved when you load a page in the `elm-pages` dev server, or when you run `elm-pages build`.
+DataSource's are always resolved before the page is rendered and sent to the browser. A DataSource is never executed
+in the Browser. Instead, the resolved data from the DataSource is passed down to the Browser - it has been resolved
+before any client-side JavaScript ever executes. In the case of a pre-rendered route, this is during the CLI build phase,
+and for server-rendered routes its DataSource is resolved on the server.
+
+Effect's/Cmd's are never executed on the CLI or server, they are only executed in the Browser. The data from a Route Module's
+`init` function is used to render the initial HTML on the server or build step, but the Effect isn't executed and `update` is never called
+before the page is hydrated in the Browser. This gives a deterministic mental model of what the first render will look like,
+and a nicely typed way to define the initial `Data` you have to render your initial view.
 
 Because `elm-pages` hydrates into a full Elm single-page app, it does need the data in order to initialize the Elm app.
 So why not just get the data the old-fashioned way, with `elm/http`, for example?

package/src/Head.elm

@@ -1,6 +1,7 @@
 module Head exposing
     ( Tag, metaName, metaProperty, metaRedirect
     , rssLink, sitemapLink, rootLanguage, manifestLink
+    , nonLoadingNode
     , structuredData
     , AttributeValue
     , currentPageFullUrl, urlAttribute, raw
@@ -20,6 +21,8 @@ writing a plugin package to extend `elm-pages`.
 @docs Tag, metaName, metaProperty, metaRedirect
 @docs rssLink, sitemapLink, rootLanguage, manifestLink
 
+@docs nonLoadingNode
+
 
 ## Structured Data
 
@@ -45,9 +48,11 @@ writing a plugin package to extend `elm-pages`.
 
 import Json.Encode
 import LanguageTag exposing (LanguageTag)
+import List.Extra
 import MimeType
 import Pages.Internal.String as String
 import Pages.Url
+import Regex
 
 
 {-| Values that can be passed to the generated `Pages.application` config
@@ -57,6 +62,7 @@ type Tag
     = Tag Details
     | StructuredData Json.Encode.Value
     | RootModifier String String
+    | Stripped String
 
 
 type alias Details =
@@ -211,6 +217,120 @@ canonicalLink maybePath =
         ]
 
 
+{-| Escape hatch for any head tags that don't have high-level helpers. This lets you build arbitrary head nodes as long as they
+are not loading or preloading directives.
+
+Tags that do loading/pre-loading will not work from this function. `elm-pages` uses ViteJS for loading assets like
+script tags, stylesheets, fonts, etc., and allows you to customize which assets to preload and how through the elm-pages.config.mjs file.
+See the full discussion of the design in [#339](https://github.com/dillonkearns/elm-pages/discussions/339).
+
+So for example the following tags would _not_ load if defined through `nonLoadingNode`, and would instead need to be registered through Vite:
+
+  - `<script src="...">`
+  - `<link href="/style.css">`
+  - `<link rel="preload">`
+
+The following tag would successfully render as it is a non-loading tag:
+
+    Head.nonLoadingNode "link"
+        [ ( "rel", Head.raw "alternate" )
+        , ( "type", Head.raw "application/atom+xml" )
+        , ( "title", Head.raw "News" )
+        , ( "href", Head.raw "/news/atom" )
+        ]
+
+Renders the head tag:
+
+`<link rel="alternate" type="application/atom+xml" title="News" href="/news/atom">`
+
+-}
+nonLoadingNode : String -> List ( String, AttributeValue ) -> Tag
+nonLoadingNode nodeName attributes =
+    let
+        relTag : Maybe AttributeValue
+        relTag =
+            attributes
+                |> List.Extra.find (\( key, _ ) -> key == "rel")
+                |> Maybe.map Tuple.second
+
+        isPreloadDirective : Bool
+        isPreloadDirective =
+            case relTag of
+                Just (Raw rel) ->
+                    let
+                        isLinkTag : Bool
+                        isLinkTag =
+                            nodeName |> matchesKeyword "link"
+                    in
+                    isLinkTag
+                        && (rel
+                                |> matchesOneKeyword
+                                    [ "preload"
+                                    , "modulepreload"
+                                    , "preconnect"
+                                    , "dns-prefetch"
+                                    , "stylesheet"
+                                    ]
+                           )
+
+                _ ->
+                    False
+    in
+    if
+        (nodeName |> matchesKeyword "script")
+            || isPreloadDirective
+    then
+        Stripped
+            ("<"
+                ++ nodeName
+                ++ " "
+                ++ (attributes
+                        |> List.map
+                            (\( name, value ) ->
+                                name
+                                    ++ "=\""
+                                    ++ ((case value of
+                                            Raw rawValue ->
+                                                rawValue
+
+                                            _ ->
+                                                "<internals>"
+                                        )
+                                            ++ "\""
+                                       )
+                            )
+                        |> String.join " "
+                   )
+                ++ " />"
+            )
+
+    else
+        node nodeName attributes
+
+
+matchesOneKeyword : List String -> String -> Bool
+matchesOneKeyword keywords string =
+    List.any
+        (\keyword -> string |> matchesKeyword keyword)
+        keywords
+
+
+matchesKeyword : String -> String -> Bool
+matchesKeyword regex string =
+    string |> matchesRegex ("^\\s*" ++ regex ++ "\\s*$")
+
+
+matchesRegex : String -> String -> Bool
+matchesRegex regex string =
+    string
+        |> Regex.contains
+            (Regex.fromStringWith
+                { caseInsensitive = True, multiline = True }
+                regex
+                |> Maybe.withDefault Regex.never
+            )
+
+
 {-| Let's you link to your manifest.json file, see <https://developer.mozilla.org/en-US/docs/Web/Manifest#deploying_a_manifest>.
 -}
 manifestLink : String -> Tag
@@ -443,6 +563,12 @@ toJson canonicalSiteUrl currentPagePath tag =
                 , ( "keyValuePair", Json.Encode.list Json.Encode.string [ key, value ] )
                 ]
 
+        Stripped message ->
+            Json.Encode.object
+                [ ( "type", Json.Encode.string "stripped" )
+                , ( "message", Json.Encode.string message )
+                ]
+
 
 encodeProperty : String -> String -> ( String, AttributeValue ) -> Json.Encode.Value
 encodeProperty canonicalSiteUrl currentPagePath ( name, value ) =

package/src/HtmlPrinter.elm

@@ -8,15 +8,19 @@ import Test.Html.Internal.ElmHtml.ToString exposing (defaultFormatOptions, nodeT
 import VirtualDom
 
 
-htmlToString : Html msg -> String
-htmlToString viewHtml =
+htmlToString : Maybe { indent : Int, newLines : Bool } -> Html msg -> String
+htmlToString formatOptions viewHtml =
     case
         Decode.decodeValue
             (decodeElmHtml (\_ _ -> VirtualDom.Normal (Decode.succeed ())))
             (asJsonView viewHtml)
     of
         Ok str ->
-            nodeToStringWithOptions defaultFormatOptions str
+            nodeToStringWithOptions
+                (formatOptions
+                    |> Maybe.withDefault defaultFormatOptions
+                )
+                str
 
         Err err ->
             "Error pre-rendering HTML in HtmlPrinter.elm: " ++ Decode.errorToString err