Run esbuild to compile ports file from build command.

examples/end-to-end/app/Page/Index.elm

@@ -2,9 +2,12 @@ module Page.Index exposing (Data, Model, Msg, page)
 
 import DataSource exposing (DataSource)
 import DataSource.File
+import DataSource.Port
 import Head
 import Head.Seo as Seo
-import Html.Styled exposing (text)
+import Html.Styled exposing (div, text)
+import Json.Decode as Decode
+import Json.Encode as Encode
 import Page exposing (Page, PageWithState, StaticPayload)
 import Pages.PageUrl exposing (PageUrl)
 import Pages.Url
@@ -34,12 +37,16 @@ page =
 
 
 type alias Data =
-    String
+    { greeting : String
+    , portGreeting : String
+    }
 
 
 data : DataSource Data
 data =
-    DataSource.File.rawFile "greeting.txt"
+    DataSource.map2 Data
+        (DataSource.File.rawFile "greeting.txt")
+        (DataSource.Port.get "hello" (Encode.string "Jane") Decode.string)
 
 
 head :
@@ -71,6 +78,7 @@ view maybeUrl sharedModel static =
     { title = "Index page"
     , body =
         [ text "This is the index page."
-        , text <| "Greeting: " ++ static.data
+        , div [] [ text <| "Greeting: " ++ static.data.greeting ]
+        , div [] [ text <| "Greeting: " ++ static.data.portGreeting ]
         ]
     }

generator/src/build.js

@@ -14,6 +14,7 @@ const { generateClientFolder } = require("./codegen.js");
 const which = require("which");
 const { build } = require("vite");
 const preRenderHtml = require("./pre-render-html.js");
+const esbuild = require("esbuild");
 
 let pool = [];
 let pagesReady;
@@ -107,6 +108,31 @@ async function run(options) {
       "dist/template.html"
     );
 
+    const portDataSourceCompiled = esbuild
+      .build({
+        entryPoints: ["./port-data-source"],
+        entryNames: "[dir]/[name]-[hash]",
+
+        outdir: ".elm-pages/compiled-ports",
+        assetNames: "[name]-[hash]",
+        chunkNames: "chunks/[name]-[hash]",
+        outExtension: { ".js": ".mjs" },
+
+        metafile: true,
+        bundle: false,
+        watch: false,
+      })
+      .then((result) => {
+        global.portsFilePath = Object.keys(result.metafile.outputs)[0];
+        console.log("Watching port-data-source...");
+      })
+      .catch((error) => {
+        console.error("Failed to start port-data-source watcher", error);
+      });
+    // TODO run esbuild for ports file
+    // TODO extract common code for compiling ports file?
+    // TODO set global.portsFilePath
+
     XMLHttpRequest = {};
     const compileCli = compileCliApp(options);
     try {
@@ -116,6 +142,7 @@ async function run(options) {
       console.error(cliError);
       process.exit(1);
     }
+    await portDataSourceCompiled;
     const cliDone = runCli(options);
     await cliDone;
   } catch (error) {
@@ -178,6 +205,7 @@ function initWorker(basePath) {
  */
 function prepareStaticPathsNew(thread) {
   thread.worker.postMessage({
+    portsFilePath: global.portsFilePath,
     mode: "build",
     tag: "render",
     pathname: "/all-paths.json",
@@ -188,6 +216,7 @@ async function buildNextPage(thread) {
   let nextPage = (await pages).pop();
   if (nextPage) {
     thread.worker.postMessage({
+      portsFilePath: global.portsFilePath,
       mode: "build",
       tag: "render",
       pathname: nextPage,