Merge branch 'main' into move-buildOutDir

Author: iuioiua

deno.json

@@ -65,7 +65,7 @@
     "@std/semver": "jsr:@std/semver@1",
     "@std/streams": "jsr:@std/streams@1",
 
-    "@astral/astral": "jsr:@astral/astral@^0.4.6",
+    "@astral/astral": "jsr:@astral/astral@^0.5.2",
     "@marvinh-test/fresh-island": "jsr:@marvinh-test/fresh-island@^0.0.1",
     "linkedom": "npm:linkedom@^0.16.11",
     "@std/async": "jsr:@std/async@1",

deno.lock

@@ -53,7 +53,7 @@ function LeafletProvider(props: { children: ComponentChildren }) {
       <p>Leaflet must be loaded on the client. No children will render</p>
     );
   }
-  const [value, setValue] = useState<typeof Leaflet | null>(null);
+  const value = useSignal<typeof Leaflet | null>(null)
   return (
     <>
       {/* Load Leaflet CSS */}
@@ -65,7 +65,7 @@ function LeafletProvider(props: { children: ComponentChildren }) {
       />
       {/* Load Leaflet JS */}
       <script
-        onLoad={() => setValue(window.L)}
+        onLoad={() => value.value = window.L}
         src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
         crossorigin=""
@@ -120,8 +120,9 @@ export default function MapIsland() {
 ```tsx MapIsland.tsx
 import * as Leaflet from "https://esm.sh/v135/@types/leaflet@1.9.4/index.d.ts";
 import { IS_BROWSER } from "$fresh/runtime.ts";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useContext, useEffect } from "preact/hooks";
 import { ComponentChildren, createContext } from "preact";
+import { useSignal } from "@preact/signals";
 
 // Create a context to hold Leaflet data/functions
 const LeafletContext = createContext<typeof Leaflet | null>(null);
@@ -131,7 +132,7 @@ 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);
+  const value = useSignal<typeof Leaflet | null>(null);
   return (
     <>
       {/* Load Leaflet CSS */}
@@ -143,7 +144,7 @@ function LeafletProvider(props: { children: ComponentChildren }) {
       />
       {/* Load Leaflet JS */}
       <script
-        onLoad={() => setValue(window.L)}
+        onLoad={() => value.value = window.L}
         src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
         crossorigin=""

docs/latest/examples/client-side-components-and-libraries.md

@@ -53,8 +53,10 @@ export default function Page({ data }: PageProps<Data>) {
   return (
     <div>
       <form>
-        <input type="text" name="q" value={query} />
-        <button type="submit">Search</button>
+        <input type="text" name="q" value={query} class="border p-1" />
+        <button type="submit" class="ml-1 px-2 py-1 bg-gray-100 border">
+          Search
+        </button>
       </form>
       <ul>
         {results.map((name) => <li key={name}>{name}</li>)}

docs/latest/getting-started/form-submissions.md

@@ -403,6 +403,7 @@ ${GRADIENT_CSS}`;
 import { define, type State } from "./utils.ts";
 
 export const app = new App<State>();
+
 app.use(staticFiles());
 
 // this is the same as the /api/:name route defined via a file. feel free to delete this!
@@ -421,7 +422,6 @@ const exampleLoggerMiddleware = define.middleware((ctx) => {
 app.use(exampleLoggerMiddleware);
 
 await fsRoutes(app, {
-  dir: "./",
   loadIsland: (path) => import(\`./islands/\${path}\`),
   loadRoute: (path) => import(\`./routes/\${path}\`),
 });