elm-pages 2.1.11 → 3.0.0-beta.0

package/generator/static-code/hmr.js

@@ -9,7 +9,7 @@ function connect(sendContentJsonPort, initialErrorPage) {
   eventSource = new EventSource("/stream");
   window.reloadOnOk = initialErrorPage;
   if (initialErrorPage) {
-    handleEvent(sendContentJsonPort, { data: "content.json" });
+    handleEvent(sendContentJsonPort, { data: "content.dat" });
   }
   eventSource.onmessage = async function (evt) {
     handleEvent(sendContentJsonPort, evt);
@@ -17,7 +17,7 @@ function connect(sendContentJsonPort, initialErrorPage) {
 }
 
 async function handleEvent(sendContentJsonPort, evt) {
-  if (evt.data === "content.json") {
+  if (evt.data === "content.dat") {
     showCompiling("");
     const elmJsRequest = elmJsFetch();
     const fetchContentJson = fetchContentJsonForCurrentPage();
@@ -32,7 +32,7 @@ async function handleEvent(sendContentJsonPort, evt) {
       thenApplyHmr(elmJsResponse);
     } catch (errorJson) {
       if (typeof errorJson === "string") {
-        errorJson = JSON.parse(errorJson)
+        errorJson = JSON.parse(errorJson);
       }
       if (errorJson.type) {
         showError(errorJson);
@@ -42,21 +42,12 @@ async function handleEvent(sendContentJsonPort, evt) {
           errors: errorJson,
         });
       } else {
-          showError(JSON.parse(errorJson.errorsJson.errors));
+        showError(JSON.parse(errorJson.errorsJson.errors));
       }
     }
   } else if (evt.data === "elm.js") {
     showCompiling("");
     elmJsFetch().then(thenApplyHmr);
-  } else if (evt.data === "style.css") {
-    // https://stackoverflow.com/a/43161591
-    const links = document.getElementsByTagName("link");
-    for (var i = 0; i < links.length; i++) {
-      const link = links[i];
-      if (link.rel === "stylesheet") {
-        link.href += "";
-      }
-    }
   } else {
     console.log("Unhandled", evt.data);
   }
@@ -84,7 +75,7 @@ async function updateContentJsonWith(
     } catch (errorJson) {
       if (errorJson.type) {
         showError(errorJson);
-      } else if (typeof errorJson === 'string') {
+      } else if (typeof errorJson === "string") {
         showError(JSON.parse(errorJson));
       } else {
         showError(errorJson);
@@ -98,10 +89,12 @@ function fetchContentJsonForCurrentPage() {
     let currentPath = window.location.pathname.replace(/(\w)$/, "$1/");
 
     const contentJsonForPage = await fetch(
-      `${window.location.origin}${currentPath}content.json`
+      `${window.location.origin}${currentPath}content.dat`
     );
     if (contentJsonForPage.ok || contentJsonForPage.status === 404) {
-      resolve(await contentJsonForPage.json());
+      resolve(
+        new DataView(await (await contentJsonForPage.blob()).arrayBuffer())
+      );
     } else {
       try {
         reject(await contentJsonForPage.json());
@@ -146,11 +139,13 @@ var module = {
 // Thanks to the elm-live maintainers and contributors for this code for rendering errors as an HTML overlay
 // https://github.com/wking-io/elm-live/blob/e317b4914c471addea7243c47f28dcebe27a5d36/lib/src/websocket.js
 
-const pipe = (...fns) => (x) => fns.reduce((y, f) => f(y), x);
+const pipe =
+  (...fns) =>
+  (x) =>
+    fns.reduce((y, f) => f(y), x);
 
 function elmJsFetch() {
-  var elmJsRequest = new Request("/elm.js");
-  elmJsRequest.cache = "no-cache";
+  var elmJsRequest = new Request("/elm.js", { cache: "no-cache" });
   return fetch(elmJsRequest);
 }
 
@@ -167,7 +162,7 @@ async function thenApplyHmr(response) {
     } else {
       response.text().then(function (value) {
         module.hot.apply();
-        delete Elm;
+        delete window.Elm;
         eval(value);
       });
     }
@@ -251,51 +246,51 @@ const consoleMsg = ({ error, style }, msg) => ({
 
 const joinMessage = ({ error, style }) => [error.join("")].concat(style);
 
-const parseConsoleErrors = (path) => 
-/**
- * @param {{ title: string; message: Message[]}} info
- * */
-(info) => {
-  if (info.rule) {
-  return joinMessage(
-    info.formatted.reduce(consoleMsg, {
-      error: [consoleHeader(info.rule, path)],
-      style: [styleColor("blue")],
-    })
-  );
-  } else {
-  return joinMessage(
-    info.message.reduce(consoleMsg, {
-      error: [consoleHeader(info.title, path)],
-      style: [styleColor("blue")],
-    })
-  );
-  }
-}
-
+const parseConsoleErrors =
+  (path) =>
   /**
-   * @param {RootObject} error
+   * @param {{ title: string; message: Message[]}} info
    * */
-const restoreColorConsole = (error) => {
+  (info) => {
+    if (info.rule) {
+      return joinMessage(
+        info.formatted.reduce(consoleMsg, {
+          error: [consoleHeader(info.rule, path)],
+          style: [styleColor("blue")],
+        })
+      );
+    } else {
+      return joinMessage(
+        info.message.reduce(consoleMsg, {
+          error: [consoleHeader(info.title, path)],
+          style: [styleColor("blue")],
+        })
+      );
+    }
+  };
 
-  if (error.type === 'compile-errors' && error.errors) {
+/**
+ * @param {RootObject} error
+ * */
+const restoreColorConsole = (error) => {
+  if (error.type === "compile-errors" && error.errors) {
     return error.errors.reduce(
       (acc, { problems, path }) =>
         acc.concat(problems.map(parseConsoleErrors(path))),
       []
     );
-  } else if (error.type === 'review-errors' && error.errors) {
+  } else if (error.type === "review-errors" && error.errors) {
     return error.errors.reduce(
       (acc, { errors, path }) =>
         acc.concat(errors.map(parseConsoleErrors(path))),
       []
     );
-  } else if (error.type === 'error') {
-      return parseConsoleErrors(error.path)(error)
+  } else if (error.type === "error") {
+    return parseConsoleErrors(error.path)(error);
   } else {
     console.error(`Unknown error type ${error}`);
   }
-}
+};
 
 /*
   |-------------------------------------------------------------------------------
@@ -316,36 +311,35 @@ const htmlMsg = (acc, msg) =>
 
 const parseHtmlErrors = (path) => (info) => {
   if (info.rule) {
-   return info.formatted.reduce(htmlMsg, htmlHeader(info.rule, path)); 
+    return info.formatted.reduce(htmlMsg, htmlHeader(info.rule, path));
   } else {
-
-   return info.message.reduce(htmlMsg, htmlHeader(info.title, path)); 
+    return info.message.reduce(htmlMsg, htmlHeader(info.title, path));
   }
-}
+};
 
-const restoreColorHtml = 
-/** 
- *  @param {RootObject} error
- * */
-(error) => {
-  if (error.type === 'compile-errors') {
-    return error.errors.reduce(
-      (acc, { problems, path }) =>
-        acc.concat(problems.map(parseHtmlErrors(path))),
-      []
-    );
-    } else if (error.type === 'review-errors') {
-    return error.errors.reduce(
-      (acc, { errors, path }) =>
-        acc.concat(errors.map(parseHtmlErrors(path))),
-      []
-    );
-  } else if (error.type === 'error') {
-    return parseHtmlErrors(error.path)(error);
-  } else {
-    throw new Error(`Unknown error type ${error}`);
-  }
-}
+const restoreColorHtml =
+  /**
+   *  @param {RootObject} error
+   * */
+  (error) => {
+    if (error.type === "compile-errors") {
+      return error.errors.reduce(
+        (acc, { problems, path }) =>
+          acc.concat(problems.map(parseHtmlErrors(path))),
+        []
+      );
+    } else if (error.type === "review-errors") {
+      return error.errors.reduce(
+        (acc, { errors, path }) =>
+          acc.concat(errors.map(parseHtmlErrors(path))),
+        []
+      );
+    } else if (error.type === "error") {
+      return parseHtmlErrors(error.path)(error);
+    } else {
+      throw new Error(`Unknown error type ${error}`);
+    }
+  };
 
 /*
   |-------------------------------------------------------------------------------
@@ -360,9 +354,13 @@ var delay = 20;
  * @param {RootObject} error
  */
 function showError(error) {
-  restoreColorConsole(error).forEach((error) => {
-    console.log.apply(this, error);
-  });
+  try {
+    restoreColorConsole(error).forEach((error) => {
+      console.log.apply(this, error);
+    });
+  } catch (e) {
+    console.log("Error", error);
+  }
   hideCompiling("fast");
   setTimeout(function () {
     showError_(restoreColorHtml(error));
@@ -429,9 +427,11 @@ function showError_(error) {
 `;
 
   setTimeout(function () {
-    document.getElementById("elm-live:elmErrorBackground").style.opacity = 1;
-    document.getElementById("elm-live:elmError").style.transform =
-      "rotateX(0deg)";
+    try {
+      document.getElementById("elm-live:elmErrorBackground").style.opacity = 1;
+      document.getElementById("elm-live:elmError").style.transform =
+        "rotateX(0deg)";
+    } catch (error) {}
   }, delay);
 }
 
@@ -439,13 +439,21 @@ function hideError(velocity) {
   var node = document.getElementById("elm-live:elmErrorContainer");
   if (node) {
     if (velocity === "fast") {
-      document.getElementById("elm-live:elmErrorContainer").remove();
+      try {
+        document.getElementById("elm-live:elmErrorContainer").remove();
+      } catch (error) {}
     } else {
-      document.getElementById("elm-live:elmErrorBackground").style.opacity = 0;
-      document.getElementById("elm-live:elmError").style.transform =
-        "rotateX(90deg)";
+      try {
+        document.getElementById(
+          "elm-live:elmErrorBackground"
+        ).style.opacity = 0;
+        document.getElementById("elm-live:elmError").style.transform =
+          "rotateX(90deg)";
+      } catch (error) {}
       setTimeout(function () {
-        document.getElementById("elm-live:elmErrorContainer").remove();
+        try {
+          document.getElementById("elm-live:elmErrorContainer").remove();
+        } catch (error) {}
       }, speed);
     }
   }
@@ -626,7 +634,7 @@ function showCompiling_(message) {
   ></div>
 `;
   setTimeout(function () {
-    document.getElementById("__elm-pages-loading").style.opacity = 1;
+    nodeContainer && (nodeContainer.style.opacity = "1");
   }, delay);
 }
 
@@ -665,3 +673,5 @@ function hideCompiling(velocity) {
 
 /** @typedef  {  { start: IPosition; end: IPosition; } } IRegion */
 /** @typedef  {   { line: number; column: number; } } IPosition */
+
+window.connect = connect;

package/generator/template/app/Api.elm

@@ -0,0 +1,25 @@
+module Api exposing (routes)
+
+import ApiRoute exposing (ApiRoute)
+import DataSource exposing (DataSource)
+import Html exposing (Html)
+import Pages.Manifest as Manifest
+import Route exposing (Route)
+
+
+routes :
+    DataSource (List Route)
+    -> (Html Never -> String)
+    -> List (ApiRoute ApiRoute.Response)
+routes getStaticRoutes htmlToString =
+    []
+
+
+manifest : Manifest.Config
+manifest =
+    Manifest.init
+        { name = "Site Name"
+        , description = "Description"
+        , startUrl = Route.Index |> Route.toPath
+        , icons = []
+        }

package/generator/template/app/ErrorPage.elm

@@ -0,0 +1,38 @@
+module ErrorPage exposing (ErrorPage(..), internalError, notFound, statusCode, view)
+
+import Html exposing (Html)
+
+
+type ErrorPage
+    = NotFound
+    | InternalError String
+
+
+notFound : ErrorPage
+notFound =
+    NotFound
+
+
+internalError : String -> ErrorPage
+internalError =
+    InternalError
+
+
+view : ErrorPage -> { body : Html msg, title : String }
+view error =
+    { body =
+        Html.div []
+            [ Html.text "Hi! This is a NotFound error"
+            ]
+    , title = "Error"
+    }
+
+
+statusCode : ErrorPage -> number
+statusCode error =
+    case error of
+        NotFound ->
+            404
+
+        InternalError _ ->
+            500

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

@@ -0,0 +1,87 @@
+module Route.Index exposing (Data, Model, Msg, route)
+
+import DataSource exposing (DataSource)
+import Head
+import Head.Seo as Seo
+import Html
+import Html.Attributes as Attr
+import Pages.PageUrl exposing (PageUrl)
+import Pages.Url
+import Path
+import RouteBuilder exposing (StatelessRoute, StaticPayload)
+import Shared
+import View exposing (View)
+
+
+type alias Model =
+    {}
+
+
+type alias Msg =
+    ()
+
+
+type alias RouteParams =
+    {}
+
+
+type alias Data =
+    {}
+
+
+route : StatelessRoute RouteParams Data ActionData
+route =
+    RouteBuilder.single
+        { head = head
+        , data = data
+        }
+        |> RouteBuilder.buildNoState { view = view }
+
+
+data : DataSource Data
+data =
+    DataSource.succeed Data
+
+
+head :
+    StaticPayload Data ActionData RouteParams
+    -> List Head.Tag
+head static =
+    Seo.summary
+        { canonicalUrlOverride = Nothing
+        , siteName = "elm-pages"
+        , image =
+            { url = [ "images", "icon-png.png" ] |> Path.join |> Pages.Url.fromPath
+            , alt = "elm-pages logo"
+            , dimensions = Nothing
+            , mimeType = Nothing
+            }
+        , description = "Welcome to elm-pages!"
+        , locale = Nothing
+        , title = "elm-pages is running"
+        }
+        |> Seo.website
+
+
+view :
+    Maybe PageUrl
+    -> Shared.Model
+    -> StaticPayload Data ActionData RouteParams
+    -> View Msg
+view maybeUrl sharedModel static =
+    { title = "elm-pages is running"
+    , body =
+        [ Html.h1 [] [ Html.text "elm-pages is up and running!" ]
+        , Html.h2 [] [ Html.text "Learn more" ]
+        , Html.ul
+            []
+            [ Html.li []
+                [ Html.a [ Attr.href "https://elm-pages.com/docs/" ] [ Html.text "Framework documentation" ]
+                ]
+            , Html.li
+                []
+                [ Html.a [ Attr.href "https://package.elm-lang.org/packages/dillonkearns/elm-pages/latest/" ] [ Html.text "Elm package documentation" ]
+                ]
+            ]
+        ]
+    }

package/generator/template/{src → app}/Shared.elm

@@ -3,6 +3,7 @@ module Shared exposing (Data, Model, Msg(..), SharedMsg(..), template)
 import Browser.Navigation
 import DataSource
 import Html exposing (Html)
+import Html.Events
 import Pages.Flags
 import Pages.PageUrl exposing (PageUrl)
 import Path exposing (Path)
@@ -18,17 +19,13 @@ template =
     , view = view
     , data = data
     , subscriptions = subscriptions
-    , onPageChange = Just OnPageChange
+    , onPageChange = Nothing
     }
 
 
 type Msg
-    = OnPageChange
-        { path : Path
-        , query : Maybe String
-        , fragment : Maybe String
-        }
-    | SharedMsg SharedMsg
+    = SharedMsg SharedMsg
+    | MenuClicked
 
 
 type alias Data =
@@ -40,7 +37,7 @@ type SharedMsg
 
 
 type alias Model =
-    { showMobileMenu : Bool
+    { showMenu : Bool
     }
 
 
@@ -59,7 +56,7 @@ init :
             }
     -> ( Model, Cmd Msg )
 init navigationKey flags maybePagePath =
-    ( { showMobileMenu = False }
+    ( { showMenu = False }
     , Cmd.none
     )
 
@@ -67,12 +64,12 @@ init navigationKey flags maybePagePath =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        OnPageChange _ ->
-            ( { model | showMobileMenu = False }, Cmd.none )
-
         SharedMsg globalMsg ->
             ( model, Cmd.none )
 
+        MenuClicked ->
+            ( { model | showMenu = not model.showMenu }, Cmd.none )
+
 
 subscriptions : Path -> Model -> Sub Msg
 subscriptions _ _ =
@@ -95,6 +92,30 @@ view :
     -> View msg
     -> { body : Html msg, title : String }
 view sharedData page model toMsg pageView =
-    { body = Html.div [] pageView.body
+    { 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
+            ]
     , title = pageView.title
     }

package/generator/template/app/Site.elm

@@ -0,0 +1,19 @@
+module Site exposing (config)
+
+import DataSource exposing (DataSource)
+import Head
+import SiteConfig exposing (SiteConfig)
+
+
+config : SiteConfig
+config =
+    { canonicalUrl = "https://elm-pages.com"
+    , head = head
+    }
+
+
+head : DataSource (List Head.Tag)
+head =
+    [ Head.sitemapLink "/sitemap.xml"
+    ]
+        |> DataSource.succeed

package/generator/template/elm-pages.config.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+
+export default {
+  vite: defineConfig({}),
+};

package/generator/template/elm.json

@@ -1,6 +1,7 @@
 {
     "type": "application",
     "source-directories": [
+        "app",
         "src",
         ".elm-pages"
     ],

package/generator/template/{public/index.js → index.ts}

@@ -1,7 +1,9 @@
-/** @typedef {{load: (Promise<unknown>); flags: (unknown)}} ElmPagesInit */
+type ElmPagesInit = {
+  load: (elmLoaded: Promise<unknown>) => Promise<void>;
+  flags: unknown;
+};
 
-/** @type ElmPagesInit */
-export default {
+const config: ElmPagesInit = {
   load: async function (elmLoaded) {
     const app = await elmLoaded;
     console.log("App loaded", app);
@@ -10,3 +12,5 @@ export default {
     return "You can decode this in Shared.elm using Json.Decode.string!";
   },
 };
+
+export default config;

package/generator/template/package.json

@@ -6,9 +6,9 @@
     "build": "elm-pages build"
   },
   "devDependencies": {
-    "elm-optimize-level-2": "0.2.3",
+    "elm-optimize-level-2": "0.3.4",
     "elm-pages": "2.1.10",
-    "elm-review": "^2.5.5",
-    "elm-tooling": "^1.4.0"
+    "elm-review": "^2.7.0",
+    "elm-tooling": "^1.7.0"
   }
-}
+}

package/generator/template/style.css

@@ -0,0 +1,4 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+}