elm-pages 3.0.0-beta.3 → 3.0.0-beta.30

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/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 =

package/generator/template/app/Shared.elm

@@ -1,9 +1,9 @@
 module Shared exposing (Data, Model, Msg(..), SharedMsg(..), template)
 
-import Browser.Navigation
-import DataSource
+import BackendTask exposing (BackendTask)
+import Effect exposing (Effect)
+import FatalError exposing (FatalError)
 import Html exposing (Html)
-import Html.Events
 import Pages.Flags
 import Pages.PageUrl exposing (PageUrl)
 import Path exposing (Path)
@@ -19,13 +19,16 @@ template =
     , view = view
     , data = data
     , subscriptions = subscriptions
-    , onPageChange = Nothing
+    , onPageChange = Just OnPageChange
     }
 
 
 type Msg
-    = SharedMsg SharedMsg
-    | MenuClicked
+    = OnPageChange
+        { path : Path
+        , query : Maybe String
+        , fragment : Maybe String
+        }
 
 
 type alias Data =
@@ -37,13 +40,12 @@ type SharedMsg
 
 
 type alias Model =
-    { showMenu : Bool
+    { showMobileMenu : Bool
     }
 
 
 init :
-    Maybe Browser.Navigation.Key
-    -> Pages.Flags.Flags
+    Pages.Flags.Flags
     ->
         Maybe
             { path :
@@ -54,21 +56,18 @@ init :
             , metadata : route
             , pageUrl : Maybe PageUrl
             }
-    -> ( Model, Cmd Msg )
-init navigationKey flags maybePagePath =
-    ( { showMenu = False }
-    , Cmd.none
+    -> ( Model, Effect Msg )
+init flags maybePagePath =
+    ( { showMobileMenu = False }
+    , Effect.none
     )
 
 
-update : Msg -> Model -> ( Model, Cmd Msg )
+update : Msg -> Model -> ( Model, Effect Msg )
 update msg model =
     case msg of
-        SharedMsg globalMsg ->
-            ( model, Cmd.none )
-
-        MenuClicked ->
-            ( { model | showMenu = not model.showMenu }, Cmd.none )
+        OnPageChange _ ->
+            ( { model | showMobileMenu = False }, Effect.none )
 
 
 subscriptions : Path -> Model -> Sub Msg
@@ -76,9 +75,9 @@ subscriptions _ _ =
     Sub.none
 
 
-data : DataSource.DataSource Data
+data : BackendTask FatalError Data
 data =
-    DataSource.succeed ()
+    BackendTask.succeed ()
 
 
 view :
@@ -90,32 +89,10 @@ view :
     -> Model
     -> (Msg -> msg)
     -> View msg
-    -> { body : Html msg, title : String }
-view sharedData page model toMsg pageView =
+    -> { body : List (Html msg), title : String }
+view stars page model toMsg pageView =
     { body =
-        Html.div []
-            [ Html.nav []
-                [ Html.button
-                    [ Html.Events.onClick MenuClicked ]
-                    [ Html.text
-                        (if model.showMenu then
-                            "Close Menu"
-
-                         else
-                            "Open Menu"
-                        )
-                    ]
-                , if model.showMenu then
-                    Html.ul []
-                        [ Html.li [] [ Html.text "Menu item 1" ]
-                        , Html.li [] [ Html.text "Menu item 2" ]
-                        ]
-
-                  else
-                    Html.text ""
-                ]
-                |> Html.map toMsg
-            , Html.main_ [] pageView.body
-            ]
+        [ Html.div [] pageView.body
+        ]
     , title = pageView.title
     }

package/generator/template/app/Site.elm

@@ -1,19 +1,32 @@
-module Site exposing (config)
+module Site exposing (canonicalUrl, config)
 
-import DataSource exposing (DataSource)
+import BackendTask exposing (BackendTask)
+import FatalError exposing (FatalError)
 import Head
+import MimeType
+import Pages.Url
 import SiteConfig exposing (SiteConfig)
 
 
 config : SiteConfig
 config =
-    { canonicalUrl = "https://elm-pages.com"
+    { canonicalUrl = canonicalUrl
     , head = head
     }
 
 
-head : DataSource (List Head.Tag)
+head : BackendTask FatalError (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
+        |> BackendTask.succeed
+
+
+canonicalUrl : String
+canonicalUrl =
+    "https://elm-pages.com"