chore: update to fresh@1.2.0 (#274)

* update fresh verstion to 1.2 * updating fresh via update script * fix * fix * adding _app.tsx * fix * fixes * tweak --------- Co-authored-by: Asher Gomez <ashersaupingomez@gmail.com>
denoland · Jun 22, 2023 · 76ff1a8 · 76ff1a8
1 parent 12ac71b
commit 76ff1a8
Show file tree

Hide file tree

Showing 16 changed files with 239 additions and 255 deletions.
diff --git a/components/PageSelector.tsx b/components/PageSelector.tsx
@@ -17,7 +17,7 @@ export default function PageSelector(
           max={props.lastPage}
           value={props.currentPage}
           // @ts-ignore: this is valid HTML
-          onchange="this.form.submit()"
+          onChange={() => this.form.submit()}
         />
         <label for="current_page" class="whitespace-nowrap align-middle">
           of {props.lastPage}

diff --git a/deno.json b/deno.json
@@ -11,9 +11,29 @@
     "ok": "deno fmt --check && deno lint && deno task check:license --check && deno check main.ts && deno task test",
     "cov": "deno coverage ./cov/ --lcov --exclude='test.ts' > cov.lcov"
   },
-  "importMap": "./import_map.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
+  },
+  "imports": {
+    "@/": "./",
+    "$fresh/": "https://deno.land/x/fresh@1.2.0/",
+    "$gfm": "https://deno.land/x/gfm@0.2.3/mod.ts",
+    "preact": "https://esm.sh/preact@10.15.1",
+    "preact/": "https://esm.sh/preact@10.15.1/",
+    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
+    "twind": "https://esm.sh/twind@0.16.19",
+    "twind-preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.7",
+    "twind-preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4/base",
+    "twind-preset-tailwind-colors": "https://esm.sh/@twind/preset-tailwind@1.1.4/colors",
+    "std/": "https://deno.land/std@0.188.0/",
+    "stripe": "https://esm.sh/stripe@12.6.0",
+    "feed": "https://esm.sh/feed@4.2.2",
+    "fresh_charts/": "https://deno.land/x/fresh_charts@0.2.1/",
+    "deno_kv_oauth": "https://deno.land/x/deno_kv_oauth@v0.1.8-beta/mod.ts",
+    "twind/": "https://esm.sh/twind@0.16.19/",
+    "@twind/core": "https://esm.sh/@twind/core@1.1.3"
   }
 }
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -2,59 +2,59 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import config from "./deno.json" assert { type: "json" };
 import * as $0 from "./routes/_404.tsx";
 import * as $1 from "./routes/_500.tsx";
-import * as $2 from "./routes/_middleware.ts";
-import * as $3 from "./routes/account/_middleware.ts";
-import * as $4 from "./routes/account/index.tsx";
-import * as $5 from "./routes/account/manage.ts";
-import * as $6 from "./routes/account/upgrade.ts";
-import * as $7 from "./routes/api/stripe-webhooks.ts";
-import * as $8 from "./routes/api/vote.ts";
-import * as $9 from "./routes/blog/[slug].tsx";
-import * as $10 from "./routes/blog/index.tsx";
-import * as $11 from "./routes/callback.ts";
-import * as $12 from "./routes/feed.ts";
-import * as $13 from "./routes/index.tsx";
-import * as $14 from "./routes/item/[id].tsx";
-import * as $15 from "./routes/pricing.tsx";
-import * as $16 from "./routes/signin.ts";
-import * as $17 from "./routes/signout.ts";
-import * as $18 from "./routes/stats.tsx";
-import * as $19 from "./routes/submit.tsx";
-import * as $20 from "./routes/user/[username].tsx";
+import * as $2 from "./routes/_app.tsx";
+import * as $3 from "./routes/_middleware.ts";
+import * as $4 from "./routes/account/_middleware.ts";
+import * as $5 from "./routes/account/index.tsx";
+import * as $6 from "./routes/account/manage.ts";
+import * as $7 from "./routes/account/upgrade.ts";
+import * as $8 from "./routes/api/stripe-webhooks.ts";
+import * as $9 from "./routes/api/vote.ts";
+import * as $10 from "./routes/blog/[slug].tsx";
+import * as $11 from "./routes/blog/index.tsx";
+import * as $12 from "./routes/callback.ts";
+import * as $13 from "./routes/feed.ts";
+import * as $14 from "./routes/index.tsx";
+import * as $15 from "./routes/item/[id].tsx";
+import * as $16 from "./routes/pricing.tsx";
+import * as $17 from "./routes/signin.ts";
+import * as $18 from "./routes/signout.ts";
+import * as $19 from "./routes/stats.tsx";
+import * as $20 from "./routes/submit.tsx";
+import * as $21 from "./routes/user/[username].tsx";
 import * as $$0 from "./islands/VoteButton.tsx";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $0,
     "./routes/_500.tsx": $1,
-    "./routes/_middleware.ts": $2,
-    "./routes/account/_middleware.ts": $3,
-    "./routes/account/index.tsx": $4,
-    "./routes/account/manage.ts": $5,
-    "./routes/account/upgrade.ts": $6,
-    "./routes/api/stripe-webhooks.ts": $7,
-    "./routes/api/vote.ts": $8,
-    "./routes/blog/[slug].tsx": $9,
-    "./routes/blog/index.tsx": $10,
-    "./routes/callback.ts": $11,
-    "./routes/feed.ts": $12,
-    "./routes/index.tsx": $13,
-    "./routes/item/[id].tsx": $14,
-    "./routes/pricing.tsx": $15,
-    "./routes/signin.ts": $16,
-    "./routes/signout.ts": $17,
-    "./routes/stats.tsx": $18,
-    "./routes/submit.tsx": $19,
-    "./routes/user/[username].tsx": $20,
+    "./routes/_app.tsx": $2,
+    "./routes/_middleware.ts": $3,
+    "./routes/account/_middleware.ts": $4,
+    "./routes/account/index.tsx": $5,
+    "./routes/account/manage.ts": $6,
+    "./routes/account/upgrade.ts": $7,
+    "./routes/api/stripe-webhooks.ts": $8,
+    "./routes/api/vote.ts": $9,
+    "./routes/blog/[slug].tsx": $10,
+    "./routes/blog/index.tsx": $11,
+    "./routes/callback.ts": $12,
+    "./routes/feed.ts": $13,
+    "./routes/index.tsx": $14,
+    "./routes/item/[id].tsx": $15,
+    "./routes/pricing.tsx": $16,
+    "./routes/signin.ts": $17,
+    "./routes/signout.ts": $18,
+    "./routes/stats.tsx": $19,
+    "./routes/submit.tsx": $20,
+    "./routes/user/[username].tsx": $21,
   },
   islands: {
     "./islands/VoteButton.tsx": $$0,
   },
   baseUrl: import.meta.url,
-  config,
 };
 
 export default manifest;
diff --git a/import_map.json b/import_map.json
diff --git a/islands/VoteButton.tsx b/islands/VoteButton.tsx
@@ -34,7 +34,6 @@ export default function VoteButton(props: VoteButtonProps) {
     <button
       class={(isVoted.value ? "text-pink-700" : "text-inherit") + " pr-2"}
       onClick={onClick}
-      disabled={!IS_BROWSER}
     >
       <p>▲</p>
       <p>{score.value}</p>

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -0,0 +1,13 @@
+// Copyright 2023 the Deno authors. All rights reserved. MIT license.
+import { AppProps } from "$fresh/server.ts";
+import Layout from "@/components/Layout.tsx";
+
+export default function App({ Component, data }: AppProps) {
+  return (
+    <div>
+      <Layout session={data.sessionId}>
+        <Component />
+      </Layout>
+    </div>
+  );
+}
diff --git a/routes/account/index.tsx b/routes/account/index.tsx
@@ -1,7 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import Head from "@/components/Head.tsx";
-import Layout from "@/components/Layout.tsx";
 import type { AccountState } from "./_middleware.ts";
 import { BUTTON_STYLES } from "@/utils/constants.ts";
 import { ComponentChild } from "preact";
@@ -40,39 +39,37 @@ export default function AccountPage(props: PageProps<AccountState>) {
   return (
     <>
       <Head title="Account" href={props.url.href} />
-      <Layout session={props.data.sessionId}>
-        <div class="max-w-lg m-auto w-full flex-1 p-4 flex flex-col justify-center">
-          <img
-            src={props.data.user?.avatarUrl}
-            alt="User Avatar"
-            crossOrigin="anonymous"
-            class="max-w-[50%] self-center rounded-full aspect-square mb-4 md:mb-6"
+      <div class="max-w-lg m-auto w-full flex-1 p-4 flex flex-col justify-center">
+        <img
+          src={props.data.user?.avatarUrl}
+          alt="User Avatar"
+          crossOrigin="anonymous"
+          class="max-w-[50%] self-center rounded-full aspect-square mb-4 md:mb-6"
+        />
+        <ul>
+          <Row
+            title="Username"
+            text={props.data.user.login}
           />
-          <ul>
-            <Row
-              title="Username"
-              text={props.data.user.login}
-            />
-            <Row
-              title="Subscription"
-              text={props.data.user.isSubscribed ? "Premium 🦕" : "Free"}
-            >
-              <a
-                class="underline"
-                href={`/account/${action.toLowerCase()}`}
-              >
-                {action}
-              </a>
-            </Row>
-          </ul>
-          <a
-            href="/signout"
-            class={`${BUTTON_STYLES} block text-center mt-8`}
+          <Row
+            title="Subscription"
+            text={props.data.user.isSubscribed ? "Premium 🦕" : "Free"}
           >
-            Sign out
-          </a>
-        </div>
-      </Layout>
+            <a
+              class="underline"
+              href={`/account/${action.toLowerCase()}`}
+            >
+              {action}
+            </a>
+          </Row>
+        </ul>
+        <a
+          href="/signout"
+          class={`${BUTTON_STYLES} block text-center mt-8`}
+        >
+          Sign out
+        </a>
+      </div>
     </>
   );
 }
diff --git a/routes/blog/[slug].tsx b/routes/blog/[slug].tsx
@@ -3,7 +3,6 @@ import { Handlers, PageProps } from "$fresh/server.ts";
 import { CSS, render } from "$gfm";
 import { getPost, Post } from "@/utils/posts.ts";
 import Head from "@/components/Head.tsx";
-import Layout from "@/components/Layout.tsx";
 import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
 
@@ -30,18 +29,16 @@ export default function PostPage(props: PageProps<BlogPostPageData>) {
       <Head title={post.title} description={post.summary} href={props.url.href}>
         <style dangerouslySetInnerHTML={{ __html: CSS }} />
       </Head>
-      <Layout session={props.data.sessionId}>
-        <main class={`${SITE_WIDTH_STYLES} px-4 pt-16 flex-1`}>
-          <h1 class="text-5xl font-bold">{post.title}</h1>
-          <time class="text-gray-500">
-            {date}
-          </time>
-          <div
-            class="mt-8 markdown-body"
-            dangerouslySetInnerHTML={{ __html: render(post.content) }}
-          />
-        </main>
-      </Layout>
+      <main class={`${SITE_WIDTH_STYLES} px-4 pt-16 flex-1`}>
+        <h1 class="text-5xl font-bold">{post.title}</h1>
+        <time class="text-gray-500">
+          {date}
+        </time>
+        <div
+          class="mt-8 markdown-body"
+          dangerouslySetInnerHTML={{ __html: render(post.content) }}
+        />
+      </main>
     </>
   );
 }
diff --git a/routes/blog/index.tsx b/routes/blog/index.tsx
@@ -3,7 +3,6 @@ import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { getPosts, Post } from "@/utils/posts.ts";
 import Head from "@/components/Head.tsx";
-import Layout from "@/components/Layout.tsx";
 import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
 
@@ -48,14 +47,12 @@ export default function BlogPage(props: PageProps<BlogPageData>) {
         description="This is the blog for Deno SaaSKit"
         href={props.url.href}
       />
-      <Layout session={props.data.sessionId}>
-        <main class={`${SITE_WIDTH_STYLES} px-4 pt-16 flex-1`}>
-          <h1 class="text-5xl font-bold">Blog</h1>
-          <div class="mt-8">
-            {props.data.posts.map((post) => <PostCard {...post} />)}
-          </div>
-        </main>
-      </Layout>
+      <main class={`${SITE_WIDTH_STYLES} px-4 pt-16 flex-1`}>
+        <h1 class="text-5xl font-bold">Blog</h1>
+        <div class="mt-8">
+          {props.data.posts.map((post) => <PostCard {...post} />)}
+        </div>
+      </main>
     </>
   );
 }
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -2,7 +2,6 @@
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import { SITE_WIDTH_STYLES } from "@/utils/constants.ts";
 import { calcLastPage, calcPageNum, PAGE_LENGTH } from "@/utils/pagination.ts";
-import Layout from "@/components/Layout.tsx";
 import Head from "@/components/Head.tsx";
 import type { State } from "./_middleware.ts";
 import ItemSummary from "@/components/ItemSummary.tsx";
@@ -68,25 +67,23 @@ export default function HomePage(props: PageProps<HomePageData>) {
   return (
     <>
       <Head href={props.url.href} />
-      <Layout session={props.data.sessionId}>
-        <div class={`${SITE_WIDTH_STYLES} flex-1 px-4`}>
-          <TimeSelector />
-          {props.data.items.map((item, index) => (
-            <ItemSummary
-              item={item}
-              isVoted={props.data.areVoted[index]}
-              user={props.data.itemsUsers[index]}
-            />
-          ))}
-          {props.data.lastPage > 1 && (
-            <PageSelector
-              currentPage={calcPageNum(props.url)}
-              lastPage={props.data.lastPage}
-              timeSelector={calcTimeAgoFilter(props.url)}
-            />
-          )}
-        </div>
-      </Layout>
+      <div class={`${SITE_WIDTH_STYLES} flex-1 px-4`}>
+        <TimeSelector />
+        {props.data.items.map((item, index) => (
+          <ItemSummary
+            item={item}
+            isVoted={props.data.areVoted[index]}
+            user={props.data.itemsUsers[index]}
+          />
+        ))}
+        {props.data.lastPage > 1 && (
+          <PageSelector
+            currentPage={calcPageNum(props.url)}
+            lastPage={props.data.lastPage}
+            timeSelector={calcTimeAgoFilter(props.url)}
+          />
+        )}
+      </div>
     </>
   );
 }