potatejs 1.0.0-beta.0 → 1.0.0-beta.10

package/README.md

@@ -19,6 +19,11 @@ Potate supports all the APIs of React including the upcoming concurrent mode API
 - Fast alternative to Virtual DOM. (JSX without VDOM).
 - Smaller transpiled footprint of your source code, than traditional JSX.
 
+## LIVE DEMO with Astro
+
+[Here](https://stackblitz.com/edit/github-cywxrcwm-3n79zz3t?file=src%2Fcomponents%2FPotate.jsx
+) is a live demo with Astro on StackBlitz.
+
 ## Installation
 
 ### Astro
@@ -55,17 +60,12 @@ Now, you can use not only Astro components (`.astro`) but also Potate JSX compon
 > **Note:** Potate components in Astro Islands
 >
 > * **No directive (Server Only)**: Rendered as just static HTML tags. It results in zero client-side JavaScript. (I used to think there wasn't much point in writing static content in JSX components instead of just using Astro components. It seemed like standard Astro components was more than enough. **However, I've realized one major advantage:** [SSR Emotion for Astro](docs/SSR_EMOTION_FOR_ASTRO.md) — the ultimate SSR Zero-Runtime CSS-in-JS solution, seamlessly integrated with Astro. By using Potate JSX components, your styles are automatically extracted into static CSS during the build process. This means you can enjoy the full power of CSS-in-JS while still shipping zero bytes of JS to the browser. In this regard, it's a significant upgrade over standard Astro components.)
+>
 > * `client:only="potate"` **(Client Only)**: This is the mode where the relationship between Potate and Astro is the clearest. (In this context, Potate plays the same role as React in other integrations.) It skips server-side rendering and runs entirely in the browser.
 >
 > * `client:load`(and others like `client:visible` or `client:idle`) **(SSR Hydration)**: Despite its cool and flashy name, "SSR Hydration" is not that complicated: it just creates a static HTML skeleton first, and once the JS is ready, the engine takes over the DOM as if it had been there from the start. If you are particular about the visual transition—like ensuring there is no layout shift by pre-setting an image's height—you might want to take control to make the swap feel completely natural.
 
 
-#### LIVE DEMO with Astro
-
-[Here](https://stackblitz.com/edit/github-cywxrcwm-3n79zz3t?file=src%2Fcomponents%2FPotate.jsx
-) is a live demo with Astro on StackBlitz.
-
-
 ### Vite
 
 Create your new app with `select a framework: > Vanilla`.
@@ -82,12 +82,16 @@ npm install potatejs
 
 Add Potate in your `vite.config.ts` file.
 
+> **Note:** What is the `clientOnly` option? See [SSR Emotion for Vite](/docs/SSR_EMOTION_FOR_VITE.md#using-pure-vite-standard-csr-only).
+
 ``` js
 import { defineConfig } from 'vite'
 import potate from 'potatejs/vite'
 
 export default defineConfig({
-  plugins: [potate()],
+  plugins: [potate({
+    clientOnly: true,
+  })],
 })
 
 ```
@@ -304,10 +308,11 @@ For the above example, the Brahmos output is 685 bytes, compared to 824 bytes fr
 - [x] React Utilities and Methods
 - [x] ⭐⭐⭐ Vite Plugin to transpile JSX to tagged templates
 - [x] ⭐⭐⭐ Esbuild Plugin to transpile JSX to tagged templates
-- [x] ⭐⭐⭐ [Potate Native Component(PNC)](docs/POTATE_NATIVE_COMPONENT.md)
-- [x] ⭐⭐⭐ [SSR Emotion for Astro](docs/SSR_EMOTION_FOR_ASTRO.md)
-- [x] ⭐⭐⭐ [reacty(ReactComponent) API](docs/API.md)
-- [x] ⭐⭐⭐ [watch(resource) API](docs/API.md)
+- [x] ⭐⭐⭐ [Potate Native Component(PNC)](/docs/POTATE_NATIVE_COMPONENT.md)
+- [x] ⭐⭐⭐ [SSR Emotion for Astro](/docs/SSR_EMOTION_FOR_ASTRO.md)
+- [x] ⭐⭐⭐ [SSR Emotion for Vite](/docs/SSR_EMOTION_FOR_VITE.md)
+- [x] ⭐⭐⭐ [reacty(ReactComponent) API](/docs/API.md)
+- [x] ⭐⭐⭐ [watch(resource) API](/docs/API.md)
 - [x] ⭐ The Lanes Light **(Though I haven't cleaned up the no-longer-needed TRANSITION_STATE_TIMED_OUT yet.)**
 - [x] ⭐ The Standalone `startTransition`
 - [x] ⭐ Enhanced `useTransition` hook
@@ -339,6 +344,7 @@ For the above example, the Brahmos output is 685 bytes, compared to 824 bytes fr
 
 * Potate Server Components (PSC)
 * Potate Compiler
+* Async SSR
 * `useSyncExternalStore` hook
 * `useOptimistic` hook
 * Superficial Type Definitions: We do not provide type information solely to satisfy IDE warnings unless it directly impacts runtime execution safety.

package/bin/potate-cli.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import esbuild from 'esbuild';
-import potate from '../dist/index-esbuild.js';
+import potate from '../dist/index-esbuild-jsx.js';
 
 /**
  * CLI Argument Parsing

package/dist/astro-client.js

@@ -1 +1 @@
-import{createElement as e,createRoot as n}from"potatejs";var s=r=>(t,o,c,{client:a})=>{r.innerHTML="",n(r).render(e(t,o))};export{s as default};
+import{createElement as l,render as n}from"potatejs";var m=r=>(t,c,o,{client:d})=>{let e=document.createElement("div");n(l(t,c),e),r.replaceChildren(...Array.from(e.childNodes))};export{m as default};