potatejs 0.25.0 → 0.25.1

package/README.md

@@ -50,14 +50,14 @@ export default defineConfig({
 });
 ```
 
-Now you can use Potate components (`.jsx`) directly in your `.astro` files.
+Now, you can use not only Astro components (`.astro`) but also Potate components (`.jsx` or `.tsx`).
 
-> **Note:** Potate in Astro Islands
+> **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 instead of just using `.astro` files. It seemed like standard `.astro` was more than enough. **However, I've realized one major advantage: "SSR EMOTION"** — the ultimate SSR Zero-Runtime CSS-in-JS solution, seamlessly integrated with Astro. By using Potate, 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.`)
+> * **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 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 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)**: These are for "SSR Hydration." Despite the fancy name, it's 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.
+> * `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.
 
 
 ### Vite
@@ -299,6 +299,7 @@ For the above example, the Brahmos output is 685 bytes, compared to 824 bytes fr
 - [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] ⭐ The Lanes Light **(Though I haven't cleaned up the no-longer-needed TRANSITION_STATE_TIMED_OUT yet.)**

package/dist/astro-render.js

@@ -1 +1 @@
-var R=Promise.resolve();var x=Symbol.for("tag"),A=Symbol.for("tag-element"),b=Symbol.for("class-component"),l=Symbol.for("functional-component");function u({nodeType:e}){return e===A}function f({nodeType:e}){return e===x}function m({nodeType:e}){return e===b||e===l}function d(e){return typeof e=="string"||typeof e=="number"}import g from"potatejs";var O={area:1,base:1,br:1,col:1,embed:1,hr:1,img:1,input:1,link:1,meta:1,param:1,source:1,track:1,wbr:1};function E(e){return typeof e!="string"?String(e):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function T(e){if(!e)return"";let t="";for(let o in e){let n=e[o];if(o==="children"||o==="key"||o==="ref"||n===!1||n===null||n===void 0)continue;let r=o==="className"?"class":o;n===!0?t+=` ${r}`:t+=` ${r}="${E(n)}"`}return t}function a(e){if(e==null||typeof e=="boolean")return"";if(d(e))return E(e);if(e.innerHTML&&typeof e.innerHTML=="string")return e.innerHTML;if(Array.isArray(e))return e.map(a).join("");if(m(e)){let t=e.type,o=e.props||{};if(t.prototype&&t.prototype.isReactComponent||t.__isReactCompat||typeof t=="object"&&t!==null)return"";if(typeof t=="function"){let n,{setCurrentComponentFiber:r,functionalComponentInstance:i}=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED||{};if(r&&i){let c={nodeInstance:i(t),root:{updateType:"sync"}};r(c);try{n=t(o)}finally{r(null)}}else n=t(o);return a(n)}}if(u(e)){let t=e.type,o=e.props||{},n=`<${t}${T(o)}`;return O[t]?n+=" />":(n+=">",o.children&&(n+=a(o.children)),n+=`</${t}>`),n}if(f(e)){let{template:t,values:o}=e,n=t.strings,r=t.getPartsMeta(),i=n[0];for(let s=0;s<o.length;s++){let c=o[s];r[s].isAttribute?i+=T(c):i+=a(c),i+=n[s+1]}return i}return""}var $={name:"potate",check(e){return typeof e=="function"},async renderToStaticMarkup(e,t,o){let n={};if(o)for(let[y,_]of Object.entries(o))n[y]={innerHTML:_};let r={nodeType:l,type:e,props:{...t,children:n.default}},i=a(r),s="@emotion/server",{extractCritical:c}=await import(s),{ids:p,css:N}=c(i);return{html:`<style data-emotion="css ${p.join(" ")}">${N}</style>${i}`}}};export{$ as default};
+var R=Promise.resolve();var x=Symbol.for("tag"),A=Symbol.for("tag-element"),b=Symbol.for("class-component"),l=Symbol.for("functional-component");function u({nodeType:e}){return e===A}function f({nodeType:e}){return e===x}function m({nodeType:e}){return e===b||e===l}function d(e){return typeof e=="string"||typeof e=="number"}import g from"potatejs";var O={area:1,base:1,br:1,col:1,embed:1,hr:1,img:1,input:1,link:1,meta:1,param:1,source:1,track:1,wbr:1};function E(e){return typeof e!="string"?String(e):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function T(e){if(!e)return"";let t="";for(let o in e){let n=e[o];if(o==="children"||o==="key"||o==="ref"||n===!1||n===null||n===void 0)continue;let r=o==="className"?"class":o;n===!0?t+=` ${r}`:t+=` ${r}="${E(n)}"`}return t}function a(e){if(e==null||typeof e=="boolean")return"";if(d(e))return E(e);if(e.innerHTML)return String(e.innerHTML);if(Array.isArray(e))return e.map(a).join("");if(m(e)){let t=e.type,o=e.props||{};if(t.prototype&&t.prototype.isReactComponent||t.__isReactCompat||typeof t=="object"&&t!==null)return"";if(typeof t=="function"){let n,{setCurrentComponentFiber:r,functionalComponentInstance:i}=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED||{};if(r&&i){let c={nodeInstance:i(t),root:{updateType:"sync"}};r(c);try{n=t(o)}finally{r(null)}}else n=t(o);return a(n)}}if(u(e)){let t=e.type,o=e.props||{},n=`<${t}${T(o)}`;return O[t]?n+=" />":(n+=">",o.children&&(n+=a(o.children)),n+=`</${t}>`),n}if(f(e)){let{template:t,values:o}=e,n=t.strings,r=t.getPartsMeta(),i=n[0];for(let s=0;s<o.length;s++){let c=o[s];r[s].isAttribute?i+=T(c):i+=a(c),i+=n[s+1]}return i}return""}var $={name:"potate",check(e){return typeof e=="function"},async renderToStaticMarkup(e,t,o){let n={};if(o)for(let[y,_]of Object.entries(o))n[y]={innerHTML:_};let r={nodeType:l,type:e,props:{...t,children:n.default}},i=a(r),s="@emotion/server",{extractCritical:c}=await import(s),{ids:p,css:N}=c(i);return{html:`<style data-emotion="css ${p.join(" ")}">${N}</style>${i}`}}};export{$ as default};

package/dist/ssr-vite.js

@@ -1 +1 @@
-var I=Promise.resolve();var N=Symbol.for("tag"),y=Symbol.for("tag-element"),_=Symbol.for("class-component"),x=Symbol.for("functional-component");function u({nodeType:e}){return e===y}function f({nodeType:e}){return e===N}function m({nodeType:e}){return e===_||e===x}function d(e){return typeof e=="string"||typeof e=="number"}import A from"potatejs";var g={area:1,base:1,br:1,col:1,embed:1,hr:1,img:1,input:1,link:1,meta:1,param:1,source:1,track:1,wbr:1};function T(e){return typeof e!="string"?String(e):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function E(e){if(!e)return"";let t="";for(let o in e){let n=e[o];if(o==="children"||o==="key"||o==="ref"||n===!1||n===null||n===void 0)continue;let r=o==="className"?"class":o;n===!0?t+=` ${r}`:t+=` ${r}="${T(n)}"`}return t}function a(e){if(e==null||typeof e=="boolean")return"";if(d(e))return T(e);if(e.innerHTML&&typeof e.innerHTML=="string")return e.innerHTML;if(Array.isArray(e))return e.map(a).join("");if(m(e)){let t=e.type,o=e.props||{};if(t.prototype&&t.prototype.isReactComponent||t.__isReactCompat||typeof t=="object"&&t!==null)return"";if(typeof t=="function"){let n,{setCurrentComponentFiber:r,functionalComponentInstance:s}=A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED||{};if(r&&s){let c={nodeInstance:s(t),root:{updateType:"sync"}};r(c);try{n=t(o)}finally{r(null)}}else n=t(o);return a(n)}}if(u(e)){let t=e.type,o=e.props||{},n=`<${t}${E(o)}`;return g[t]?n+=" />":(n+=">",o.children&&(n+=a(o.children)),n+=`</${t}>`),n}if(f(e)){let{template:t,values:o}=e,n=t.strings,r=t.getPartsMeta(),s=n[0];for(let i=0;i<o.length;i++){let c=o[i];r[i].isAttribute?s+=E(c):s+=a(c),s+=n[i+1]}return s}return""}function B(e={}){return{name:"potate-ssr-plugin",async transformIndexHtml(t,{server:o}){let n=e.entry;if(!n){let c=t.matchAll(/<script([^>]+)>/g);for(let l of c)if(l[1].includes('type="module"')){let p=l[1].match(/src="([^"]+)"/);if(p){n=p[1];break}}}let r=e.entryComponent;if(o&&n){let c=await o.ssrLoadModule(n);r=c.App||c.default}typeof r=="function"&&(r=r({}));let s=a(r),i=e.replaceTarget||'<div id="app"></div>';return i.includes("></")?t.replace(i,i.replace("></",`>${s}</`)):t.replace(i,s)}}}export{B as default};
+var I=Promise.resolve();var N=Symbol.for("tag"),y=Symbol.for("tag-element"),_=Symbol.for("class-component"),x=Symbol.for("functional-component");function u({nodeType:e}){return e===y}function f({nodeType:e}){return e===N}function m({nodeType:e}){return e===_||e===x}function d(e){return typeof e=="string"||typeof e=="number"}import A from"potatejs";var g={area:1,base:1,br:1,col:1,embed:1,hr:1,img:1,input:1,link:1,meta:1,param:1,source:1,track:1,wbr:1};function T(e){return typeof e!="string"?String(e):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function E(e){if(!e)return"";let t="";for(let o in e){let n=e[o];if(o==="children"||o==="key"||o==="ref"||n===!1||n===null||n===void 0)continue;let r=o==="className"?"class":o;n===!0?t+=` ${r}`:t+=` ${r}="${T(n)}"`}return t}function a(e){if(e==null||typeof e=="boolean")return"";if(d(e))return T(e);if(e.innerHTML)return String(e.innerHTML);if(Array.isArray(e))return e.map(a).join("");if(m(e)){let t=e.type,o=e.props||{};if(t.prototype&&t.prototype.isReactComponent||t.__isReactCompat||typeof t=="object"&&t!==null)return"";if(typeof t=="function"){let n,{setCurrentComponentFiber:r,functionalComponentInstance:s}=A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED||{};if(r&&s){let c={nodeInstance:s(t),root:{updateType:"sync"}};r(c);try{n=t(o)}finally{r(null)}}else n=t(o);return a(n)}}if(u(e)){let t=e.type,o=e.props||{},n=`<${t}${E(o)}`;return g[t]?n+=" />":(n+=">",o.children&&(n+=a(o.children)),n+=`</${t}>`),n}if(f(e)){let{template:t,values:o}=e,n=t.strings,r=t.getPartsMeta(),s=n[0];for(let i=0;i<o.length;i++){let c=o[i];r[i].isAttribute?s+=E(c):s+=a(c),s+=n[i+1]}return s}return""}function B(e={}){return{name:"potate-ssr-plugin",async transformIndexHtml(t,{server:o}){let n=e.entry;if(!n){let c=t.matchAll(/<script([^>]+)>/g);for(let l of c)if(l[1].includes('type="module"')){let p=l[1].match(/src="([^"]+)"/);if(p){n=p[1];break}}}let r=e.entryComponent;if(o&&n){let c=await o.ssrLoadModule(n);r=c.App||c.default}typeof r=="function"&&(r=r({}));let s=a(r),i=e.replaceTarget||'<div id="app"></div>';return i.includes("></")?t.replace(i,i.replace("></",`>${s}</`)):t.replace(i,s)}}}export{B as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "potatejs",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "Super charged UI library with modern React API and native templates.",
   "author": "uniho",
   "license": "MIT",