exampleapp: fix esbuild config

sapcc · May 5, 2023 · fcf3da5 · fcf3da5
1 parent b921e04
commit fcf3da5
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 14 deletions.
diff --git a/apps/exampleapp/esbuild.config.js b/apps/exampleapp/esbuild.config.js
@@ -22,7 +22,12 @@ const IGNORE_EXTERNALS = process.env.IGNORE_EXTERNALS === "true"
 let outfile = `${isProduction ? "" : "public/"}${pkg.main || pkg.module}`
 
 // get output from outputfile
-let [outdir, file] = outfile.split("/", 2)
+// let [outdir, file] = outfile.split("/", 2)
+let outdir = outfile.slice(0, outfile.lastIndexOf("/"))
+
+console.log(`=====================outdir: ${outdir}`)
+console.log(`=====================file: ${outfile}`)
+// process.exit()
 const args = process.argv.slice(2)
 const watch = args.indexOf("--watch") >= 0
 const serve = args.indexOf("--serve") >= 0
@@ -55,7 +60,7 @@ const build = async () => {
       isProduction && !IGNORE_EXTERNALS
         ? Object.keys(pkg.peerDependencies || {})
         : [],
-    entryPoints: { [file.replace(".js", "")]: pkg.source },
+    entryPoints: [pkg.source],
     outdir,
     // this step is important for performance reason.
     // the main file (index.js) contains minimal code needed to

diff --git a/apps/exampleapp/package.json b/apps/exampleapp/package.json
@@ -20,7 +20,6 @@
     "babel-jest": "^29.3.1",
     "babel-plugin-transform-import-meta": "^2.2.0",
     "body-parser": "^1.20.1",
-    "communicator": "*",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "juno-ui-components": "*",

diff --git a/apps/exampleapp/public/favicon.ico b/apps/exampleapp/public/favicon.ico
diff --git a/apps/exampleapp/public/index.html b/apps/exampleapp/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="favicon.ico" sizes="any" />
+
+    <title>EXAMPLEAPP Dev</title>
+    <style>
+      html {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        flex-grow: 1;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+      }
+      #root {
+        display: inline;
+      }
+    </style>
+    <script>
+      // automatically reload on build changes
+      new EventSource("/esbuild").addEventListener("change", () =>
+        location.reload()
+      )
+    </script>
+  </head>
+  <body>
+    <script type="module">
+      // appProps are generated in development env and added to the build
+      import appProps from "./build/appProps.js"
+      import("./build/index.js").then((app) => {
+        app.mount(document.getElementById("root"), { props: appProps })
+      })
+    </script>
+    <div id="root" data-juno-app="exampleapp"></div>
+  </body>
+</html>
diff --git a/apps/exampleapp/src/actions.js b/apps/exampleapp/src/actions.js
@@ -33,17 +33,62 @@ const checkStatus = (response) => {
 export const fetchPeaks = ({ queryKey }) => {
   const [_key, endpoint, options] = queryKey
   const query = encodeUrlParamsFromObject(options)
-  return fetch(`${endpoint}/peaks?${query}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
+  return Promise.resolve([
+    {
+      id: 1,
+      name: "Ushba",
+      height: "4737m",
+      region: "Svanetsia",
+      mainrange: "Caucasus",
+      countries: "Georgia",
+      url: "https://en.wikipedia.org/wiki/Ushba",
     },
-  })
-    .then(checkStatus)
-    .then((response) => {
-      return response.json()
-    })
+    {
+      id: 2,
+      name: "Ama Dablam",
+      height: "6814m",
+      region: "Khumbu",
+      mainrange: "Himalayas",
+      countries: "Nepal",
+      url: "https://en.wikipedia.org/wiki/Ama_Dablam",
+    },
+    {
+      id: 3,
+      name: "Lhotse",
+      height: "8516m",
+      region: "Khumbu",
+      mainrange: "Himalayas",
+      countries: "China, Nepal",
+      url: "https://en.wikipedia.org/wiki/Lhotse",
+    },
+    {
+      id: 4,
+      name: "Nuptse",
+      height: "7861m",
+      region: "Khumbu",
+      mainrange: "Himalayas",
+      countries: "Nepal",
+      url: "https://en.wikipedia.org/wiki/Nuptse",
+    },
+    {
+      id: 5,
+      name: "Weisshorn",
+      height: "4506m",
+      region: "Valais",
+      mainrange: "Swiss Alps",
+      countries: "Switzerland",
+      url: "https://en.wikipedia.org/wiki/Weisshorn",
+    },
+    {
+      id: 6,
+      name: "Zinalrothorn",
+      height: "4221m",
+      region: "Valais",
+      mainrange: "Swiss Alps",
+      countries: "Switzerland",
+      url: "https://en.wikipedia.org/wiki/Zinalrothorn",
+    },
+  ])
 }
 
 export const fetchPeak = ({ queryKey }) => {

diff --git a/apps/exampleapp/src/store.js b/apps/exampleapp/src/store.js
@@ -1,5 +1,5 @@
 import React from "react"
-import create from "zustand"
+import { create } from "zustand"
 import { devtools } from "zustand/middleware"
 
 // global zustand store. See how this works here: https://github.com/pmndrs/zustand