Merge pull request #20 from nyaomaru/deno-study-14

study: client only side component

Author: nyaomaru

src/components/MapComponent.tsx

@@ -0,0 +1,15 @@
+import { useContext, useEffect } from "preact/hooks";
+import { LeafletContext } from "#src/providers/LeafletProvider.tsx";
+
+export function MapComponent() {
+  const leaf = useContext(LeafletContext);
+  if (!leaf) return <div>Component placeholder</div>;
+  useEffect(() => {
+    const map = leaf.map("map").setView(leaf.latLng(0, 0), 2);
+    leaf.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+  });
+  return <div id="map" class="relative w-[80vw] h-[50vh]" />;
+}

src/dev.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
 import dev from "$fresh/dev.ts";
-import config from "./fresh.config.ts";
+import config from "#src/fresh.config.ts";
 
 import "$std/dotenv/load.ts";
 

src/fresh.gen.ts

@@ -19,6 +19,7 @@ import * as $countdown from "./routes/countdown.tsx";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $greet_middleware from "./routes/greet/_middleware.ts";
 import * as $index from "./routes/index.tsx";
+import * as $map from "./routes/map.tsx";
 import * as $partials_about_id_ from "./routes/partials/about/[id].tsx";
 import * as $projects_id_ from "./routes/projects/[id].tsx";
 import * as $reportHandler from "./routes/reportHandler.ts";
@@ -27,6 +28,7 @@ import * as $subscribe from "./routes/subscribe.tsx";
 import * as $Chart from "./islands/Chart.tsx";
 import * as $Countdown from "./islands/Countdown.tsx";
 import * as $Counter from "./islands/Counter.tsx";
+import * as $MapIsland from "./islands/MapIsland.tsx";
 import * as $NextContentButton from "./islands/NextContentButton.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
@@ -49,6 +51,7 @@ const manifest = {
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/greet/_middleware.ts": $greet_middleware,
     "./routes/index.tsx": $index,
+    "./routes/map.tsx": $map,
     "./routes/partials/about/[id].tsx": $partials_about_id_,
     "./routes/projects/[id].tsx": $projects_id_,
     "./routes/reportHandler.ts": $reportHandler,
@@ -59,6 +62,7 @@ const manifest = {
     "./islands/Chart.tsx": $Chart,
     "./islands/Countdown.tsx": $Countdown,
     "./islands/Counter.tsx": $Counter,
+    "./islands/MapIsland.tsx": $MapIsland,
     "./islands/NextContentButton.tsx": $NextContentButton,
   },
   baseUrl: import.meta.url,

src/islands/Counter.tsx

@@ -1,7 +1,7 @@
 import { Signal } from "@preact/signals";
 import { ComponentChildren } from "preact";
-import { Button } from "../components/Button.tsx";
-import { Card } from "../components/Card.tsx";
+import { Button } from "#src/components/Button.tsx";
+import { Card } from "#src/components/Card.tsx";
 
 interface Props {
   count: Signal<number>;

src/islands/MapIsland.tsx

@@ -0,0 +1,10 @@
+import { MapComponent } from "#src/components/MapComponent.tsx";
+import { LeafletProvider } from "#src/providers/LeafletProvider.tsx";
+
+export function MapIsland() {
+  return (
+    <LeafletProvider>
+      <MapComponent />
+    </LeafletProvider>
+  );
+}

src/providers/LeafletProvider.tsx

@@ -0,0 +1,34 @@
+import * as Leaflet from "https://esm.sh/v135/@types/leaflet@1.9.4/index.d.ts";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+import { useState } from "preact/hooks";
+import { ComponentChildren, createContext } from "preact";
+
+// Create a context to hold Leaflet data/functions
+export const LeafletContext = createContext<typeof Leaflet | null>(null);
+
+// LeafletProvider component manages Leaflet loading and context
+export function LeafletProvider(props: { children: ComponentChildren }) {
+  if (!IS_BROWSER) {
+    return <p>Leaflet must be loaded on the client. No children will render</p>;
+  }
+  const [value, setValue] = useState<typeof Leaflet | null>(null);
+  return (
+    <>
+      <link
+        rel="stylesheet"
+        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+        crossorigin=""
+      />
+      <script
+        onLoad={() => setValue(globalThis.L)}
+        src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+        crossorigin=""
+      />
+      <LeafletContext.Provider value={value}>
+        {props.children}
+      </LeafletContext.Provider>
+    </>
+  );
+}

src/routes/about.tsx

@@ -1,7 +1,7 @@
 import { Handlers, PageProps, RouteContext } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
-import NextContentButton from "../islands/NextContentButton.tsx";
-import { Link } from "../components/Link.tsx";
+import NextContentButton from "#src/islands/NextContentButton.tsx";
+import { Link } from "#src/components/Link.tsx";
 
 const loadFooValue = async () => {
   return "nyaomaru";

src/routes/chart.tsx

@@ -1,6 +1,6 @@
-import ChartIsland from "../islands/Chart.tsx";
+import ChartIsland from "#src/islands/Chart.tsx";
 import { ChartColors } from "$fresh_charts/utils.ts";
-import { Link } from "../components/Link.tsx";
+import { Link } from "#src/components/Link.tsx";
 
 const createRandomNumber = () => {
   return Math.floor(Math.random() * 100);

src/routes/countdown.tsx

@@ -1,6 +1,6 @@
 import { defineRoute } from "$fresh/server.ts";
-import Countdown from "../islands/Countdown.tsx";
-import { Link } from "../components/Link.tsx";
+import Countdown from "#src/islands/Countdown.tsx";
+import { Link } from "#src/components/Link.tsx";
 
 export default defineRoute(async (_req, _ctx) => {
   const date = new Date();

src/routes/greet/[name].tsx

@@ -1,6 +1,6 @@
 import { Head } from "$fresh/runtime.ts";
 import { PageProps, RouteConfig } from "$fresh/server.ts";
-import { Link } from "../../components/Link.tsx";
+import { Link } from "#src/components/Link.tsx";
 
 export const config: RouteConfig = {
   skipInheritedLayouts: true,

src/routes/index.tsx

@@ -1,8 +1,8 @@
 import { Handlers, PageProps, RouteConfig } from "$fresh/server.ts";
 import { useCSP } from "$fresh/runtime.ts";
 import { useSignal } from "@preact/signals";
-import { Link } from "../components/Link.tsx";
-import Counter from "../islands/Counter.tsx";
+import { Link } from "#src/components/Link.tsx";
+import Counter from "#src/islands/Counter.tsx";
 
 const nameList = ["Alice", "Bob", "Charlie", "David", "Eve"];
 
@@ -59,19 +59,25 @@ export default function Home({ data }: PageProps<string>) {
       <div class="my-4 flex flex-col items-center justify-center">
         <h2 class="text-2xl font-bold">Page Buttons</h2>
         <div class="my-4 flex gap-4">
-          <Link text="Go About Page" href="about" />
-          <Link text="Go Greet Page" href={`greet/${name}`} />
-          <Link text="Go Search Page" href="search" />
-          <Link text="Go Countdown Page" href="countdown" />
+          <Link text="About" href="about" />
+          <Link text="Greet" href={`greet/${name}`} />
+          <Link text="Search" href="search" />
+          <Link text="Countdown" href="countdown" />
         </div>
         <div class="my-4 flex gap-4">
           <Link
-            text="Go Projects Page"
+            text="Projects"
             href={`projects/${Math.round(Math.random()) + 1}`}
           />
-          <Link text="Go Chart Page" href="chart" />
-          <Link text="Go Markdown Page" href="string" />
-          <Link text="Go CSP Page" href="correctCSPwithReport" />
+          <Link text="Chart" href="chart" />
+          <Link text="Markdown" href="string" />
+          <Link text="CSP" href="correctCSPwithReport" />
+        </div>
+        <div class="my-4 flex gap-4">
+          <Link
+            text="Map"
+            href="map"
+          />
         </div>
       </div>
 

src/routes/map.tsx

@@ -0,0 +1,16 @@
+import { defineRoute } from "$fresh/server.ts";
+import { Link } from "#src/components/Link.tsx";
+import { MapIsland } from "#src/islands/MapIsland.tsx";
+
+export default defineRoute(async (_req, _ctx) => {
+  return (
+    <>
+      <div>
+        <MapIsland />
+      </div>
+      <div class="mt-4">
+        <Link text="Back" href="/" color="secondary" />
+      </div>
+    </>
+  );
+});

src/routes/projects/[id].tsx

@@ -1,5 +1,5 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
-import { Link } from "../../components/Link.tsx";
+import { Link } from "#src/components/Link.tsx";
 
 const projects = [{ id: 1, name: "Project 1", stars: 10 }, {
   id: 2,

src/routes/search.tsx

@@ -1,5 +1,5 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
-import { Link } from "../components/Link.tsx";
+import { Link } from "#src/components/Link.tsx";
 
 const NAMES = ["Alice", "Bob", "Charlie", "Dave", "Eve", "Frank"];
 

src/routes/subscribe.tsx

@@ -1,5 +1,5 @@
 import { Handlers, type PageProps } from "$fresh/server.ts";
-import { Link } from "../components/Link.tsx";
+import { Link } from "#src/components/Link.tsx";
 
 interface Props {
   message: string | null;