Merge branch 'main' into devtools

packages/lib/src/hooks/useAsync.ts

@@ -5,7 +5,6 @@ export function useAsync<T>(func: () => Promise<T>, deps: unknown[]): T | null {
   return useHook(
     "useAsync",
     {
-      func,
       deps,
       data: null as T | null,
       promise: undefined as Promise<T> | undefined,
@@ -16,8 +15,10 @@ export function useAsync<T>(func: () => Promise<T>, deps: unknown[]): T | null {
         hook.promise = func()
         hook.data = null
         hook.promise.then((data: T) => {
-          hook.data = data
-          update()
+          if (!depsRequireChange(deps, hook.deps)) {
+            hook.data = data
+            update()
+          }
         })
       }
       return hook.data

packages/vite-plugin-kaioken/src/index.ts

@@ -9,9 +9,23 @@ const defaultEsBuildOptions: ESBuildOptions = {
   include: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
 }
 
-export default function (): Plugin {
+export interface KaiokenPluginOptions {
+  enableDevtools?: boolean
+}
+
+const devtoolsScript = `
+import {contexts} from "kaioken/dist/globals.js";
+console.log("kaioken:devtools", contexts);
+`
+
+export default function (
+  opts: KaiokenPluginOptions = {
+    enableDevtools: true,
+  }
+): Plugin {
   let isProduction = false
   let isBuild = false
+  let hasInjectedDevtools = false
 
   return {
     name: "vite-plugin-kaioken",
@@ -50,7 +64,11 @@ export default function (): Plugin {
     },
     transform(code, id) {
       if (isProduction || isBuild) return
-      if (!/\.(tsx|jsx)$/.test(id)) return
+      if (opts.enableDevtools && !hasInjectedDevtools) {
+        code += devtoolsScript
+        hasInjectedDevtools = true
+      }
+      if (!/\.(tsx|jsx)$/.test(id)) return { code }
       const ast = this.parse(code)
       try {
         const componentNames = findExportedComponentNames(ast.body as AstNode[])

sandbox/csr/src/App.tsx

@@ -1,4 +1,4 @@
-import { Router, Route, children } from "kaioken"
+import { Router, Route } from "kaioken"
 import { Todos } from "./components/ToDos"
 import { Counter } from "./components/Counter"
 import { ProductPage } from "./components/Product"
@@ -12,6 +12,7 @@ import { FilteredList } from "./components/FilteredList"
 import { Transitions } from "./components/Transitions"
 import { KeyedList } from "./components/KeyedList"
 import { ContextExample } from "./components/ContextExample"
+import { UseAsyncExample } from "./components/UseAsyncExample"
 
 export function App() {
   return (
@@ -32,7 +33,7 @@ export function App() {
           <Link to="/filtered-list">Filtered list</Link>
           <Link to="/keyed-list">Keyed list</Link>
           <Link to="/context">Context</Link>
-          <Link to="/children">children</Link>
+          <Link to="/useAsync">useAsync</Link>
           <GithubIcon />
         </div>
       </nav>
@@ -88,24 +89,10 @@ export function App() {
           <Route path="/filtered-list" element={FilteredList} />
           <Route path="/keyed-list" element={KeyedList} />
           <Route path="/context" element={ContextExample} />
-          <Route
-            path="/children"
-            element={() => {
-              return (
-                <PostComponent>
-                  <h1>Title</h1>
-                  <div>Body</div>
-                </PostComponent>
-              )
-            }}
-          />
+          <Route path="/useAsync" element={UseAsyncExample} />
           <Route path="*" element={() => <h1>Uh-oh! Page not found :C</h1>} />
         </Router>
       </main>
     </>
   )
 }
-
-function PostComponent() {
-  return <div>{children()}</div>
-}

sandbox/csr/src/components/UseAsyncExample.tsx

@@ -0,0 +1,47 @@
+import { useAsync, useState } from "kaioken"
+
+interface Product {
+  id: number
+  title: string
+  description: string
+  price: number
+  discountPercentage: number
+  rating: number
+  stock: number
+  brand: string
+  category: string
+  thumbnail: string
+  images: string[]
+}
+
+export function UseAsyncExample() {
+  const [productId, setProductId] = useState(1)
+
+  const data = useAsync(async () => {
+    const res = await fetch(`https://dummyjson.com/products/${productId}`)
+    await new Promise((res) => setTimeout(res, Math.random() * 3000))
+    return res.json() as Promise<Product>
+  }, [productId])
+
+  console.log("data", data)
+
+  return (
+    <div>
+      <button onclick={() => setProductId((prev) => prev + 1)}>Next</button>
+      {data ? <ProductCard product={data} /> : <p>Loading...</p>}
+    </div>
+  )
+}
+
+function ProductCard({ product }: { product: Product }) {
+  return (
+    <div>
+      <h1>
+        {product.title} <sup>({product.id})</sup>
+      </h1>
+      <p>{product.description}</p>
+
+      <img src={product.thumbnail} />
+    </div>
+  )
+}