Merge pull request #5 from hwy-js/feat/0.2.0-beta

0.2.1

README.md

@@ -54,25 +54,25 @@ Below is an example of a simple Hwy page. You'll notice it looks a lot like Remi
 ```tsx
 // src/pages/user/$user_id.page.tsx
 
-import type { DataFunctionArgs, PageProps } from 'hwy'
-import { UserProfile, getUser } from './somewhere.js'
+import type { DataFunctionArgs, PageProps } from "hwy";
+import { UserProfile, getUser } from "./somewhere.js";
 
 export async function loader({ params }: DataFunctionArgs) {
-  return await getUser(params.user_id)
+  return await getUser(params.user_id);
 }
 
 export default async function ({ loaderData }: PageProps<typeof loader>) {
-  return <UserProfile user={loaderData} />
+  return <UserProfile user={loaderData} />;
 }
 ```
 
 Or, if you prefer to fetch inside your components:
 
 ```tsx
 export default async function ({ params }: PageProps) {
-  const user = await getUser(params.user_id)
+  const user = await getUser(params.user_id);
 
-  return <UserProfile user={user} />
+  return <UserProfile user={user} />;
 }
 ```
 

docs/package.json

@@ -9,18 +9,18 @@
     "dev": "hwy-dev-serve"
   },
   "dependencies": {
-    "@hono/node-server": "^1.1.1",
+    "@hono/node-server": "^1.2.0",
     "highlight.js": "^11.8.0",
-    "hono": "^3.6.3",
-    "hwy": "^0.1.3"
+    "hono": "^3.7.1",
+    "hwy": "^0.2.1"
   },
   "devDependencies": {
-    "@hwy-js/dev": "^0.1.3",
-    "@types/node": "^20.5.9",
+    "@hwy-js/dev": "^0.2.1",
+    "@types/node": "^20.6.3",
     "@types/nprogress": "^0.2.0",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.19.2",
-    "htmx.org": "^1.9.5",
+    "esbuild": "^0.19.3",
+    "htmx.org": "^1.9.6",
     "nodemon": "^3.0.1",
     "nprogress": "^0.2.0",
     "tailwindcss": "^3.3.3",

docs/src/client.entry.ts

@@ -1,10 +1,10 @@
-const __window = window as any
+const __window = window as any;
 
-import htmx from 'htmx.org'
-__window.htmx = htmx
+import htmx from "htmx.org";
+__window.htmx = htmx;
 
-import NProgress from 'nprogress'
-__window.NProgress = NProgress
+import NProgress from "nprogress";
+__window.NProgress = NProgress;
 
 // @ts-ignore
-import('htmx.org/dist/ext/head-support.js')
+import("htmx.org/dist/ext/head-support.js");

docs/src/components/anchor-heading.tsx

@@ -1,5 +1,7 @@
 function AnchorHeading({ content }: { content: string }) {
-  const slugified = encodeURIComponent(content.toLowerCase().replace(/ /g, '-'))
+  const slugified = encodeURIComponent(
+    content.toLowerCase().replace(/ /g, "-")
+  );
 
   return (
     <div class="flex gap-3 text-xl font-bold pt-4" id={slugified}>
@@ -11,7 +13,7 @@ function AnchorHeading({ content }: { content: string }) {
       </a>
       {content}
     </div>
-  )
+  );
 }
 
-export { AnchorHeading }
+export { AnchorHeading };

docs/src/components/bold-italic.tsx

@@ -3,7 +3,7 @@ function Boldtalic({ children }: { children: string }) {
     <b>
       <i>{children}</i>
     </b>
-  )
+  );
 }
 
-export { Boldtalic }
+export { Boldtalic };

docs/src/components/code-block.tsx

@@ -1,13 +1,13 @@
-import hljs from 'highlight.js/lib/core'
-import typescript from 'highlight.js/lib/languages/typescript'
-import bash from 'highlight.js/lib/languages/bash'
-import json from 'highlight.js/lib/languages/json'
+import hljs from "highlight.js/lib/core";
+import typescript from "highlight.js/lib/languages/typescript";
+import bash from "highlight.js/lib/languages/bash";
+import json from "highlight.js/lib/languages/json";
 
-const lang_map = { typescript, bash, json }
-type Language = keyof typeof lang_map
+const lang_map = { typescript, bash, json };
+type Language = keyof typeof lang_map;
 
 function CodeBlock({ language, code }: { language: Language; code: string }) {
-  hljs.registerLanguage(language, lang_map[language])
+  hljs.registerLanguage(language, lang_map[language]);
 
   return (
     <pre class="overflow-x-auto rounded-2xl bg-slate-800 border-4 border-solid border-[#7777] py-4 px-5 max-w-full flex gap-5 text-white">
@@ -19,7 +19,7 @@ function CodeBlock({ language, code }: { language: Language; code: string }) {
       />
       <div />
     </pre>
-  )
+  );
 }
 
-export { CodeBlock }
+export { CodeBlock };

docs/src/components/dialog.tsx

@@ -1,15 +1,15 @@
-import { ChildrenPermissive } from '../types.js'
+import { ChildrenPermissive } from "../types.js";
 
 function DialogModal({
   open_button_inner,
   dialog_inner,
   wrapper_class,
   open_button_class,
 }: {
-  open_button_inner: ChildrenPermissive
-  dialog_inner: ChildrenPermissive
-  wrapper_class?: string
-  open_button_class?: string
+  open_button_inner: ChildrenPermissive;
+  dialog_inner: ChildrenPermissive;
+  wrapper_class?: string;
+  open_button_class?: string;
 }) {
   return (
     <div hx-boost="false" class={wrapper_class}>
@@ -24,14 +24,14 @@ function DialogModal({
         onclick="event.target==this && this.close()"
         style={{
           padding: 0,
-          border: 'none',
-          background: 'transparent',
+          border: "none",
+          background: "transparent",
         }}
       >
         <form method="dialog">{dialog_inner}</form>
       </dialog>
     </div>
-  )
+  );
 }
 
-export { DialogModal }
+export { DialogModal };

docs/src/components/fallback-error-boundary.tsx

@@ -1,5 +1,5 @@
-import type { ErrorBoundaryProps } from 'hwy'
-import { Paragraph } from './paragraph.js'
+import type { ErrorBoundaryProps } from "hwy";
+import { Paragraph } from "./paragraph.js";
 
 function FallbackErrorBoundary(props: ErrorBoundaryProps) {
   return (
@@ -10,7 +10,7 @@ function FallbackErrorBoundary(props: ErrorBoundaryProps) {
         happened.
       </Paragraph>
     </div>
-  )
+  );
 }
 
-export { FallbackErrorBoundary }
+export { FallbackErrorBoundary };

docs/src/components/inline-code.tsx

@@ -1,27 +1,27 @@
-import { cx } from '../utils/utils.js'
+import { cx } from "../utils/utils.js";
 
 function InlineCode({
   children,
   high_contrast,
   ...rest
 }: {
-  children: string
-  high_contrast?: boolean
-} & JSX.IntrinsicElements['code']) {
+  children: string;
+  high_contrast?: boolean;
+} & JSX.IntrinsicElements["code"]) {
   return (
     <code
       {...rest}
       class={cx(
-        'py-[2px] px-1 whitespace-nowrap',
+        "py-[2px] px-1 whitespace-nowrap",
         high_contrast
-          ? 'bg-black text-white dark:bg-white dark:text-black'
-          : 'bg-[#7772] dark:bg-[#7773] rounded',
+          ? "bg-black text-white dark:bg-white dark:text-black"
+          : "bg-[#7772] dark:bg-[#7773] rounded",
         rest.class
       )}
     >
       {children}
     </code>
-  )
+  );
 }
 
-export { InlineCode }
+export { InlineCode };

docs/src/components/nav.tsx

@@ -27,7 +27,7 @@ function Nav() {
         </a>
       </div>
     </nav>
-  )
+  );
 }
 
-export { Nav }
+export { Nav };

docs/src/components/paragraph.tsx

@@ -1,15 +1,15 @@
-import { ChildrenPermissive } from '../types.js'
-import { cx } from '../utils/utils.js'
+import { ChildrenPermissive } from "../types.js";
+import { cx } from "../utils/utils.js";
 
 function Paragraph({
   children,
   ...rest
-}: { children: ChildrenPermissive } & JSX.IntrinsicElements['p']) {
+}: { children: ChildrenPermissive } & JSX.IntrinsicElements["p"]) {
   return (
-    <p {...rest} class={cx('leading-7', rest.class)}>
+    <p {...rest} class={cx("leading-7", rest.class)}>
       {children}
     </p>
-  )
+  );
 }
 
-export { Paragraph }
+export { Paragraph };

docs/src/components/unordered-list.tsx

@@ -1,26 +1,26 @@
-import { ChildrenPermissive } from '../types.js'
-import { cx } from '../utils/utils.js'
+import { ChildrenPermissive } from "../types.js";
+import { cx } from "../utils/utils.js";
 
 function UnorderedList({
   children,
   ...rest
-}: { children: ChildrenPermissive } & JSX.IntrinsicElements['ul']) {
+}: { children: ChildrenPermissive } & JSX.IntrinsicElements["ul"]) {
   return (
-    <ul {...rest} class={cx('space-y-6', rest.class)}>
+    <ul {...rest} class={cx("space-y-6", rest.class)}>
       {children}
     </ul>
-  )
+  );
 }
 
 function ListItem({
   children,
   ...rest
-}: { children: ChildrenPermissive } & JSX.IntrinsicElements['li']) {
+}: { children: ChildrenPermissive } & JSX.IntrinsicElements["li"]) {
   return (
-    <li {...rest} class={cx('list-disc ml-6 pl-1 leading-7', rest.class)}>
+    <li {...rest} class={cx("list-disc ml-6 pl-1 leading-7", rest.class)}>
       {children}
     </li>
-  )
+  );
 }
 
-export { UnorderedList, ListItem }
+export { UnorderedList, ListItem };