elm-pages 3.0.0-beta.9 → 3.0.0

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 [];

package/generator/src/vite-utils.js

@@ -4,7 +4,7 @@
  * @param {...import('vite').UserConfig} configs
  * @returns {import('vite').UserConfig}
  */
-function merge_vite_configs(...configs) {
+export function merge_vite_configs(...configs) {
   return deep_merge(
     ...configs.map((config) => ({
       ...config,
@@ -75,4 +75,3 @@ function merge_into(a, b) {
     }
   }
 }
-module.exports = { merge_vite_configs };

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,14 +1,15 @@
 module Api exposing (routes)
 
 import ApiRoute exposing (ApiRoute)
-import DataSource exposing (DataSource)
+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)
+    BackendTask FatalError (List Route)
     -> (Maybe { indent : Int, newLines : Bool } -> Html Never -> String)
     -> List (ApiRoute ApiRoute.Response)
 routes getStaticRoutes htmlToString =

package/generator/template/app/Effect.elm

@@ -0,0 +1,155 @@
+module Effect exposing (Effect(..), batch, fromCmd, map, none, perform)
+
+{-|
+
+@docs Effect, batch, fromCmd, map, none, perform
+
+-}
+
+import Browser.Navigation
+import Form
+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))
+    | GetStargazers (Result Http.Error Int -> 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)
+
+        GetStargazers toMsg ->
+            GetStargazers (toMsg >> fn)
+
+        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)
+
+        GetStargazers toMsg ->
+            Http.get
+                { url =
+                    "https://api.github.com/repos/dillonkearns/elm-pages"
+                , expect = Http.expectJson (toMsg >> fromPageMsg) (Decode.field "stargazers_count" Decode.int)
+                }
+
+        FetchRouteData fetchInfo ->
+            helpers.fetchRouteData
+                fetchInfo
+
+        Submit record ->
+            helpers.submit record
+
+        SubmitFetcher record ->
+            helpers.runFetcher record
+
+
+type alias FormData =
+    { fields : List ( String, String )
+    , method : Form.Method
+    , action : String
+    , id : Maybe String
+    }

package/generator/template/app/ErrorPage.elm

@@ -1,6 +1,38 @@
-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 Html.Events exposing (onClick)
+import View exposing (View)
+
+
+type Msg
+    = Increment
+
+
+type alias Model =
+    { count : Int
+    }
+
+
+init : ErrorPage -> ( Model, Effect Msg )
+init errorPage =
+    ( { count = 0 }
+    , Effect.none
+    )
+
+
+update : ErrorPage -> Msg -> Model -> ( Model, Effect Msg )
+update errorPage msg model =
+    case msg of
+        Increment ->
+            ( { model | count = model.count + 1 }, Effect.none )
+
+
+head : ErrorPage -> List Head.Tag
+head errorPage =
+    []
 
 
 type ErrorPage
@@ -18,13 +50,24 @@ 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?" ]
+            , Html.div []
+                [ Html.button
+                    [ onClick Increment
+                    ]
+                    [ Html.text
+                        (model.count
+                            |> String.fromInt
+                        )
+                    ]
+                ]
             ]
-    , title = "Error"
+        ]
+    , title = "This is a NotFound Error"
     }
 
 

package/generator/template/app/Route/Blog/Slug_.elm

@@ -0,0 +1,86 @@
+module Route.Blog.Slug_ exposing (ActionData, Data, Model, Msg, route)
+
+import BackendTask exposing (BackendTask)
+import FatalError exposing (FatalError)
+import Head
+import Head.Seo as Seo
+import Html
+import Pages.Url
+import PagesMsg exposing (PagesMsg)
+import RouteBuilder exposing (App, StatelessRoute)
+import Shared
+import View exposing (View)
+
+
+type alias Model =
+    {}
+
+
+type alias Msg =
+    ()
+
+
+type alias RouteParams =
+    { slug : String }
+
+
+route : StatelessRoute RouteParams Data ActionData
+route =
+    RouteBuilder.preRender
+        { head = head
+        , pages = pages
+        , data = data
+        }
+        |> RouteBuilder.buildNoState { view = view }
+
+
+pages : BackendTask FatalError (List RouteParams)
+pages =
+    BackendTask.succeed
+        [ { slug = "hello" }
+        ]
+
+
+type alias Data =
+    { something : String
+    }
+
+
+type alias ActionData =
+    {}
+
+
+data : RouteParams -> BackendTask FatalError Data
+data routeParams =
+    BackendTask.map Data
+        (BackendTask.succeed "Hi")
+
+
+head :
+    App Data ActionData RouteParams
+    -> List Head.Tag
+head app =
+    Seo.summary
+        { canonicalUrlOverride = Nothing
+        , siteName = "elm-pages"
+        , image =
+            { url = Pages.Url.external "TODO"
+            , alt = "elm-pages logo"
+            , dimensions = Nothing
+            , mimeType = Nothing
+            }
+        , description = "TODO"
+        , locale = Nothing
+        , title = "TODO title" -- metadata.title -- TODO
+        }
+        |> Seo.website
+
+
+view :
+    App Data ActionData RouteParams
+    -> Shared.Model
+    -> View (PagesMsg Msg)
+view app sharedModel =
+    { title = "Placeholder - Blog.Slug_"
+    , body = [ Html.text "You're on the page Blog.Slug_" ]
+    }