fix: npm specifiers in example code

example/preactSSR/router.ts

@@ -7,19 +7,26 @@ import {
  ssr,
  file,
 } from "../../mod.ts"; //"https://deno.land/x/peko/mod.ts"
-import { renderToString } from "preact-render-to-string";
+import { renderToString } from "npm:preact-render-to-string";
 
 // Preact page components and HTML template for ssrHandler render logic
 import Home from "./src/pages/Home.ts";
 import About from "./src/pages/About.ts";
 import htmlTemplate from "./document.ts";
 
 // esbuild bundling for app TS files
-import * as esbuild from "esbuild";
+import * as esbuild from "npm:esbuild-wasm";
+let initialized = false;
+if (!initialized) {
+ await esbuild.initialize({});
+ initialized = true;
+}
 
 const env: Record<string, string> =
  (typeof Deno !== "undefined" && Deno.env.toObject()) ||
+ // @ts-ignore - cross-platform env support
  (typeof process !== "undefined" && process.env) ||
+ // @ts-ignore - cross-platform env support
  (typeof env !== "undefined" && env) ||
  {};
 
@@ -75,7 +82,7 @@ router.get("/assets/:filename", cacher(), async (ctx) =>
  (
  await file(
  new URL(
- `https://raw.githubusercontent.com/sejori/peko/main/example/preact/assets/${ctx.params.filename}`
+ `https://raw.githubusercontent.com/sejori/peko/main/example/preactSSR/assets/${ctx.params.filename}`
  ),
  {
  headers: new Headers({
@@ -92,11 +99,11 @@ router.get("/assets/:filename", cacher(), async (ctx) =>
 
 // BUNDLED TS FILES
 // dynamic URL param for filename, always cache
-router.get("/src/:filename", cacher(), async (ctx) =>
+router.get("/src/:dirname/:filename", cacher(), async (ctx) =>
  (
  await file(
  new URL(
- `https://raw.githubusercontent.com/sejori/peko/main/example/preact/src/${ctx.params.filename}`
+ `https://raw.githubusercontent.com/sejori/peko/main/example/preactSSR/src/${ctx.params.dirname}/${ctx.params.filename}`
  ),
  {
  transform: async (contents) => {

example/preactSSR/src/components/App.ts

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "preact/hooks";
-import { html } from "htm/preact";
+import { useState, useEffect } from "npm:preact/hooks";
+import { html } from "npm:htm/preact";
 import List from "./List.ts";
 import { useLocalState } from "../hooks/localstate.ts";
 

example/preactSSR/src/components/Layout.ts

@@ -1,4 +1,4 @@
-import { html } from "htm/preact";
+import { html } from "npm:htm/preact";
 
 const Layout = ({
  navColor,
@@ -13,10 +13,9 @@ const Layout = ({
  <nav style=${navStyle(navColor)}>
  <div class="container align-center">
  <img
- height="200px"
- width="1000px"
- style="max-width:100%; margin: 1rem;"
- src="https://raw.githubusercontent.com/sejori/peko/examples/preact/assets/logo_dark_alpha.webp"
+ height="270px"
+ style="margin: 1rem;"
+ src="https://raw.githubusercontent.com/sejori/peko/main/example/preactSSR/assets/logo_dark_alpha.webp"
  alt="peko-logo"
  />
  <h1 style="text-align: center;">

example/preactSSR/src/components/List.ts

@@ -1,5 +1,5 @@
-import { useState } from "preact/hooks";
-import { html } from "htm/preact";
+import { useState } from "npm:preact/hooks";
+import { html } from "npm:htm/preact";
 
 const List = ({ data }: { data: string[] }) => {
  // takes a data prop

example/preactSSR/src/hooks/localstate.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "preact/hooks";
+import { useState, useEffect } from "npm:preact/hooks";
 
 // INITIAL STATE
 const initialState: Record<string, unknown> = {

example/preactSSR/src/pages/About.ts

@@ -1,4 +1,4 @@
-import { html } from "htm/preact";
+import { html } from "npm:htm/preact";
 
 import Layout from "../components/Layout.ts";
 import App from "../components/App.ts";

example/preactSSR/src/pages/Home.ts

@@ -1,4 +1,4 @@
-import { html } from "htm/preact";
+import { html } from "npm:htm/preact";
 
 import Layout from "../components/Layout.ts";
 
@@ -13,11 +13,7 @@ const Home = () => {
  <li>100% TypeScript complete with tests.</li>
  </ul>
 
- <h2>Guides</h2>
- <ol>
- <li><a href="https://github.com/sebringrose/peko/blob/main/react.md">How to build a full-stack React application with Peko and Deno</a></li>
- <li>Want to build a lightweight HTML or Preact app? Check out the <a href="https://github.com/sebringrose/peko/blob/main/examples">examples</a>!</li>
- </ol>
+ <p>Want to build a full-stack app with Peko? Check out the <a href="https://github.com/sebringrose/peko/blob/main/examples">examples</a>!</p>
 
  <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
  <div>

package.json

@@ -10,13 +10,13 @@
  },
  "type": "module",
  "scripts": {
- "start": "deno run --allow-net --allow-read --allow-env scripts/deno/main.ts",
+ "start": "deno run --allow-net --allow-read --allow-env --allow-run scripts/deno/main.ts",
  "test": "deno test --allow-read --allow-net",
  "profile:deno": "deno run --allow-read --allow-net scripts/deno/profile.ts",
  "profile:bun": "bun run scripts/bun/profile.ts",
  "profile:start:wrangler": "wrangler dev scripts/wrangler/testApp.ts",
  "profile:wrangler": "node --loader ts-node/esm scripts/wrangler/profile.ts",
- "start:dev:deno": "deno run --allow-net --allow-read --allow-env --watch scripts/deno/main.ts",
+ "start:dev:deno": "deno run -A --watch scripts/deno/main.ts",
  "start:dev:bun": "bun run --watch scripts/bun/main.ts",
  "start:dev:wrangler": "wrangler dev scripts/wrangler/main.ts"
  },
@@ -36,7 +36,7 @@
  "wrangler": "^3.30.1"
  },
  "dependencies": {
- "esbuild": "^0.20.1",
+ "esbuild-wasm": "^0.20.1",
  "htm": "^3.1.1",
  "preact": "^10.19.6",
  "preact-render-to-string": "^6.4.0"