elm-pages 3.0.0-beta.4 → 3.0.0-beta.40

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

@@ -1,7 +1,7 @@
 /**
  * @param {string[]} name
  */
-function routeParams(name) {
+export function routeParams(name) {
   return name
     .map((section) => {
       const routeParamMatch = section.match(/([A-Z][A-Za-z0-9]*)__?$/);
@@ -17,7 +17,7 @@ function routeParams(name) {
  * @param {string[]} name
  * @returns {Segment[]}
  */
-function parseRouteParams(name) {
+export function parseRouteParams(name) {
   return name.flatMap((section) => {
     const routeParamMatch = section.match(/([A-Z][A-Za-z0-9]*)(_?_?)$/);
     const maybeParam = (routeParamMatch && routeParamMatch[1]) || "TODO";
@@ -68,7 +68,7 @@ function parseRouteParams(name) {
  * @param {string[]} name
  * @returns {( Segment | {kind: 'static'; name: string})[]}
  */
-function parseRouteParamsWithStatic(name) {
+export function parseRouteParamsWithStatic(name) {
   return name.flatMap((section) => {
     const routeParamMatch = section.match(/([A-Z][A-Za-z0-9]*)(_?_?)$/);
     const maybeParam = (routeParamMatch && routeParamMatch[1]) || "TODO";
@@ -123,7 +123,7 @@ function parseRouteParamsWithStatic(name) {
  * @param {string[]} name
  * @returns {string}
  */
-function routeVariantDefinition(name) {
+export function routeVariantDefinition(name) {
   const newLocal = parseRouteParams(name);
   if (newLocal.length == 0) {
     return routeVariant(name);
@@ -151,7 +151,7 @@ function routeVariantDefinition(name) {
  * @param {string[]} name
  * @returns {string}
  */
-function toPathPattern(name) {
+export function toPathPattern(name) {
   return (
     "/" +
     parseRouteParamsWithStatic(name)
@@ -181,7 +181,7 @@ function toPathPattern(name) {
  * @param {string[]} name
  * @returns {string[]}
  */
-function toPathPatterns(name) {
+export function toPathPatterns(name) {
   const segments = parseRouteParamsWithStatic(name);
 
   const lastSegment = segments[segments.length - 1];
@@ -199,7 +199,7 @@ function toPathPatterns(name) {
 /**
  * @param {string[]} segments
  */
-function joinPath(segments) {
+export function joinPath(segments) {
   const joined = segments.join("/");
   if (joined.startsWith("/")) {
     return joined;
@@ -211,7 +211,7 @@ function joinPath(segments) {
 /**
  * @return {string[]}
  */
-function newHelper(segments) {
+export function newHelper(segments) {
   return segments.map((param) => {
     switch (param.kind) {
       case "static": {
@@ -238,7 +238,7 @@ function newHelper(segments) {
  * @param {string[]} name
  * @returns {string}
  */
-function toElmPathPattern(name) {
+export function toElmPathPattern(name) {
   const parsedSegments = parseRouteParamsWithStatic(name);
 
   const foundEndings = parsedSegments.flatMap((segment) => {
@@ -297,14 +297,14 @@ function toElmPathPattern(name) {
  * @param {string} input
  * @returns {string}
  */
-function camelToKebab(input) {
+export function camelToKebab(input) {
   return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
 
 /**
  * @param {string[]} name
  */
-function paramsRecord(name) {
+export function paramsRecord(name) {
   return `{ ${parseRouteParams(name).map((param) => {
     switch (param.kind) {
       case "dynamic": {
@@ -326,7 +326,7 @@ function paramsRecord(name) {
 /**
  * @param {string[]} name
  */
-function routeVariant(name) {
+export function routeVariant(name) {
   return `${name.join("__")}`;
 }
 
@@ -334,44 +334,29 @@ function routeVariant(name) {
  * @param {string[]} name
  * @param {string} paramsName
  */
-function destructureRoute(name, paramsName) {
+export function destructureRoute(name, paramsName) {
   return emptyRouteParams(name)
     ? `Route.${routeVariant(name)}`
     : `(Route.${routeVariant(name)} ${paramsName})`;
 }
 
-function referenceRouteParams(name, paramsName) {
+export function referenceRouteParams(name, paramsName) {
   return emptyRouteParams(name) ? `{}` : paramsName;
 }
 /**
  * @param {string[]} name
  */
-function emptyRouteParams(name) {
+export function emptyRouteParams(name) {
   return parseRouteParams(name).length === 0;
 }
 
 /**
  * @param {string} name
  */
-function toFieldName(name) {
+export function toFieldName(name) {
   if (name === "SPLAT") {
     return "splat";
   } else {
     return name.charAt(0).toLowerCase() + name.slice(1);
   }
 }
-
-module.exports = {
-  routeParams,
-  routeVariantDefinition,
-  routeVariant,
-  toFieldName,
-  paramsRecord,
-  toPathPattern,
-  toPathPatterns,
-  parseRouteParams,
-  parseRouteParamsWithStatic,
-  toElmPathPattern,
-  destructureRoute,
-  referenceRouteParams,
-};

package/generator/src/seo-renderer.js

@@ -1,11 +1,9 @@
-module.exports = { gather };
-
 /** @typedef { { type: 'root'; keyValuePair: [string, string] } } RootTagModifier */
 
 /**
  * @param {( SeoTag | RootTagModifier )[]} tags
  */
-function gather(tags) {
+export function gather(tags) {
   const withoutRootModifiers = tags.flatMap((value) => {
     if (value.type === "root") {
       return [];
@@ -43,11 +41,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 +58,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 +69,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,77 @@
+/** 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}
+ */
+export 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];
+    }
+  }
+}

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

@@ -103,4 +103,14 @@ function find_anchor(node) {
   return /** @type {HTMLAnchorElement} */ (node);
 }
 
+Object.defineProperty(SubmitEvent.prototype, "fields", {
+  get: function fields() {
+    let formData = new FormData(this.currentTarget);
+    if (this.submitter?.name) {
+      formData.append(this.submitter.name, this.submitter.value);
+    }
+    return [...formData.entries()];
+  },
+});
+
 setup();

package/generator/static-code/hmr.js

@@ -5,15 +5,69 @@ var eventSource = null;
 let updateAppContentJson = new Promise((resolve, reject) => resolve(() => {}));
 
 function connect(sendContentJsonPort, initialErrorPage) {
+  let reconnectFrequencySeconds = 1;
+  // reconnect logic based on: https://stackoverflow.com/a/61148682/383983
   // Listen for the server to tell us that an HMR update is available
-  eventSource = new EventSource("/stream");
-  window.reloadOnOk = initialErrorPage;
-  if (initialErrorPage) {
-    handleEvent(sendContentJsonPort, { data: "content.dat" });
+  function waitFunc() {
+    return reconnectFrequencySeconds * 1000;
   }
-  eventSource.onmessage = async function (evt) {
-    handleEvent(sendContentJsonPort, evt);
-  };
+  function tryToSetupFunc() {
+    setupEventSource();
+    reconnectFrequencySeconds *= 2;
+    if (reconnectFrequencySeconds >= 8) {
+      reconnectFrequencySeconds = 8;
+    }
+  }
+  function reconnectFunc() {
+    console.log(
+      `Attempting dev server reconnect in ${reconnectFrequencySeconds}...`
+    );
+    setTimeout(tryToSetupFunc, waitFunc());
+  }
+  function setupEventSource() {
+    eventSource = new EventSource("/stream");
+    window.reloadOnOk = initialErrorPage;
+
+    try {
+      if (initialErrorPage) {
+        handleEvent(sendContentJsonPort, { data: "content.dat" });
+      }
+    } catch (e) {}
+    eventSource.onopen = async function () {
+      hideError();
+      reconnectFrequencySeconds = 1;
+    };
+    eventSource.onerror = async function (evt) {
+      eventSource && eventSource.close();
+      reconnectFunc();
+
+      showReconnectBanner();
+    };
+    eventSource.onmessage = async function (evt) {
+      handleEvent(sendContentJsonPort, evt);
+    };
+  }
+
+  setupEventSource();
+}
+
+function showReconnectBanner() {
+  showError({
+    type: "compile-errors",
+    errors: [
+      {
+        path: "",
+        name: "",
+        problems: [
+          {
+            title: "",
+            // region: "",
+            message: ["Dev server is disconnected..."],
+          },
+        ],
+      },
+    ],
+  });
 }
 
 async function handleEvent(sendContentJsonPort, evt) {
@@ -28,8 +82,7 @@ async function handleEvent(sendContentJsonPort, evt) {
 
     try {
       await fetchContentJson;
-      const elmJsResponse = await elmJsRequest;
-      thenApplyHmr(elmJsResponse);
+      thenApplyHmr(await elmJsRequest);
     } catch (errorJson) {
       if (typeof errorJson === "string") {
         errorJson = JSON.parse(errorJson);
@@ -116,8 +169,7 @@ var myDisposeCallback = function () {
 var module = {
   hot: {
     accept: async function () {
-      const sendInUpdatedContentJson = await updateAppContentJson;
-      sendInUpdatedContentJson();
+      (await updateAppContentJson)();
     },
 
     dispose: function (callback) {
@@ -224,8 +276,11 @@ function htmlSanitize(str, type) {
   );
 }
 
-const parseHeader = (title, path) =>
-  `-- ${title.replace("-", " ")} --------------- ${path}`;
+function parseHeader(title, path) {
+  return `-- ${(title || "ERROR").replace("-", " ")} --------------- ${
+    path || ""
+  }`;
+}
 
 /*
   |-------------------------------------------------------------------------------
@@ -253,6 +308,14 @@ const parseConsoleErrors =
    * */
   (info) => {
     if (info.rule) {
+      if (info.details) {
+        return joinMessage(
+          info.details.reduce(consoleMsg, {
+            error: [consoleHeader(info.rule, path)],
+            style: [styleColor("blue")],
+          })
+        );
+      }
       return joinMessage(
         info.formatted.reduce(consoleMsg, {
           error: [consoleHeader(info.rule, path)],
@@ -313,6 +376,9 @@ const parseHtmlErrors = (path) => (info) => {
   if (info.rule) {
     return info.formatted.reduce(htmlMsg, htmlHeader(info.rule, path));
   } else {
+    if (info.details) {
+      return info.details.reduce(htmlMsg, htmlHeader(info.title, path));
+    }
     return info.message.reduce(htmlMsg, htmlHeader(info.title, path));
   }
 };

package/generator/template/app/Api.elm

@@ -1,16 +1,17 @@
 module Api exposing (routes)
 
-import ApiRoute exposing (ApiRoute)
-import DataSource exposing (DataSource)
+import ApiRoute
+import BackendTask exposing (BackendTask)
+import FatalError exposing (FatalError)
 import Html exposing (Html)
 import Pages.Manifest as Manifest
 import Route exposing (Route)
 
 
 routes :
-    DataSource (List Route)
-    -> (Html Never -> String)
-    -> List (ApiRoute ApiRoute.Response)
+    BackendTask FatalError (List Route)
+    -> (Maybe { indent : Int, newLines : Bool } -> Html Never -> String)
+    -> List (ApiRoute.ApiRoute ApiRoute.Response)
 routes getStaticRoutes htmlToString =
     []
 

package/generator/template/app/Effect.elm

@@ -0,0 +1,123 @@
+module Effect exposing (Effect(..), batch, fromCmd, map, none, perform)
+
+import Browser.Navigation
+import Form.FormData exposing (FormData)
+import Http
+import Json.Decode as Decode
+import Pages.Fetcher
+import Url exposing (Url)
+
+
+type Effect msg
+    = None
+    | Cmd (Cmd msg)
+    | Batch (List (Effect msg))
+    | SetField { formId : String, name : String, value : String }
+    | FetchRouteData
+        { data : Maybe FormData
+        , toMsg : Result Http.Error Url -> msg
+        }
+    | Submit
+        { values : FormData
+        , toMsg : Result Http.Error Url -> msg
+        }
+    | SubmitFetcher (Pages.Fetcher.Fetcher msg)
+
+
+type alias RequestInfo =
+    { contentType : String
+    , body : String
+    }
+
+
+none : Effect msg
+none =
+    None
+
+
+batch : List (Effect msg) -> Effect msg
+batch =
+    Batch
+
+
+fromCmd : Cmd msg -> Effect msg
+fromCmd =
+    Cmd
+
+
+map : (a -> b) -> Effect a -> Effect b
+map fn effect =
+    case effect of
+        None ->
+            None
+
+        Cmd cmd ->
+            Cmd (Cmd.map fn cmd)
+
+        Batch list ->
+            Batch (List.map (map fn) list)
+
+        FetchRouteData fetchInfo ->
+            FetchRouteData
+                { data = fetchInfo.data
+                , toMsg = fetchInfo.toMsg >> fn
+                }
+
+        Submit fetchInfo ->
+            Submit
+                { values = fetchInfo.values
+                , toMsg = fetchInfo.toMsg >> fn
+                }
+
+        SetField info ->
+            SetField info
+
+        SubmitFetcher fetcher ->
+            fetcher
+                |> Pages.Fetcher.map fn
+                |> SubmitFetcher
+
+
+perform :
+    { fetchRouteData :
+        { data : Maybe FormData
+        , toMsg : Result Http.Error Url -> pageMsg
+        }
+        -> Cmd msg
+    , submit :
+        { values : FormData
+        , toMsg : Result Http.Error Url -> pageMsg
+        }
+        -> Cmd msg
+    , runFetcher :
+        Pages.Fetcher.Fetcher pageMsg
+        -> Cmd msg
+    , fromPageMsg : pageMsg -> msg
+    , key : Browser.Navigation.Key
+    , setField : { formId : String, name : String, value : String } -> Cmd msg
+    }
+    -> Effect pageMsg
+    -> Cmd msg
+perform ({ fromPageMsg, key } as helpers) effect =
+    case effect of
+        None ->
+            Cmd.none
+
+        Cmd cmd ->
+            Cmd.map fromPageMsg cmd
+
+        SetField info ->
+            helpers.setField info
+
+        Batch list ->
+            Cmd.batch (List.map (perform helpers) list)
+
+        FetchRouteData fetchInfo ->
+            helpers.fetchRouteData
+                fetchInfo
+
+        Submit record ->
+            helpers.submit record
+
+        SubmitFetcher record ->
+            helpers.runFetcher record

package/generator/template/app/ErrorPage.elm

@@ -1,6 +1,36 @@
-module ErrorPage exposing (ErrorPage(..), internalError, notFound, statusCode, view)
+module ErrorPage exposing (ErrorPage(..), Model, Msg, head, init, internalError, notFound, statusCode, update, view)
 
+import Effect exposing (Effect)
+import Head
 import Html exposing (Html)
+import View exposing (View)
+
+
+type Msg
+    = NoOp
+
+
+type alias Model =
+    {}
+
+
+init : ErrorPage -> ( Model, Effect Msg )
+init errorPage =
+    ( {}
+    , Effect.none
+    )
+
+
+update : ErrorPage -> Msg -> Model -> ( Model, Effect Msg )
+update errorPage msg model =
+    case msg of
+        NoOp ->
+            ( {}, Effect.none )
+
+
+head : ErrorPage -> List Head.Tag
+head errorPage =
+    []
 
 
 type ErrorPage
@@ -18,13 +48,14 @@ internalError =
     InternalError
 
 
-view : ErrorPage -> { body : Html msg, title : String }
-view error =
+view : ErrorPage -> Model -> View Msg
+view error model =
     { body =
-        Html.div []
-            [ Html.text "Hi! This is a NotFound error"
+        [ Html.div []
+            [ Html.p [] [ Html.text "Page not found. Maybe try another URL?" ]
             ]
-    , title = "Error"
+        ]
+    , title = "Page Not Found"
     }
 
 

package/generator/template/app/Route/Index.elm

@@ -1,14 +1,17 @@
-module Route.Index exposing (Data, Model, Msg, route)
+module Route.Index exposing (ActionData, Data, Model, Msg, route)
 
-import DataSource exposing (DataSource)
+import BackendTask exposing (BackendTask)
+import FatalError exposing (FatalError)
 import Head
 import Head.Seo as Seo
 import Html
-import Html.Attributes as Attr
+import Html.Styled.Attributes as Attr
+import PagesMsg exposing (PagesMsg)
 import Pages.PageUrl exposing (PageUrl)
 import Pages.Url
 import Path
-import RouteBuilder exposing (StatelessRoute, StaticPayload)
+import Route
+import RouteBuilder exposing (StatefulRoute, StatelessRoute, App)
 import Shared
 import View exposing (View)
 
@@ -25,7 +28,7 @@ type alias RouteParams =
     {}
 
 
-type alias Data =
+type alias ActionData =
     {}
 
 
@@ -38,13 +41,17 @@ route =
         |> RouteBuilder.buildNoState { view = view }
 
 
-data : DataSource Data
+type alias Data =
+    ()
+
+
+data : BackendTask FatalError Data
 data =
-    DataSource.succeed Data
+    BackendTask.succeed ()
 
 
 head :
-    StaticPayload Data ActionData RouteParams
+    App Data ActionData RouteParams
     -> List Head.Tag
 head static =
     Seo.summary
@@ -66,8 +73,8 @@ head static =
 view :
     Maybe PageUrl
     -> Shared.Model
-    -> StaticPayload Data ActionData RouteParams
-    -> View Msg
+    -> App Data ActionData RouteParams
+    -> View (PagesMsg Msg)
 view maybeUrl sharedModel static =
     { title = "elm-pages is running"
     , body =