potatejs 0.12.2 → 0.13.0

package/README.md

@@ -76,7 +76,7 @@ const App = props => {
 }
 
 const root = Potate.createRoot(document.querySelector('#app'))
-root.render(Potate.createElement(App)) // ✖ root.render(<App/>) Please avoid JSX at the root
+root.render(<App/>)
 
 ```
 
@@ -130,7 +130,7 @@ export default function App(props) {
 }
 
 const root = Potate.createRoot(document.querySelector('#app'))
-root.render(Potate.createElement(App)) // ✖ root.render(<App/>) Please avoid JSX at the root
+root.render(<App/>)
 
 ```
 
@@ -285,6 +285,7 @@ For the above example, the Brahmos output is 685 bytes, compared to 824 bytes fr
 - [x] `use(resource)` API
 - [x] [watch(resource) API](docs/API.md)
 - [x] React 19 style root management
+- [x] Allow using class instead of className
 - [ ] `use(context)` API
 - [ ] [use(store) API](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#concurrent-stores)
 - [ ] [ref as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop)

package/dist/index-esbuild.js

@@ -13394,6 +13394,54 @@ function getLiteralParts(rootPath) {
             stringPart.push(`</${tagName}>`);
           }
           return;
+        } else {
+          const propsProperties = [];
+          openingElement.attributes.forEach((attr) => {
+            if (t.isJSXAttribute(attr)) {
+              let attrName = attr.name.name;
+              const value = attr.value;
+              let valNode;
+              attrName = PROPERTY_ATTRIBUTE_MAP[attrName] || attrName;
+              if (!value) {
+                valNode = { type: "Literal", value: true };
+              } else if (t.isJSXExpressionContainer(value)) {
+                valNode = value.expression;
+              } else {
+                valNode = { type: "Literal", value: value.value };
+              }
+              propsProperties.push({
+                type: "Property",
+                key: { type: "Identifier", name: attrName },
+                value: valNode,
+                kind: "init"
+              });
+            } else if (t.isJSXSpreadAttribute(attr)) {
+              propsProperties.push({
+                type: "SpreadElement",
+                argument: attr.argument
+              });
+            }
+          });
+          let extractedText = "";
+          const children2 = path.get("children");
+          if (Array.isArray(children2)) {
+            children2.forEach((cp) => {
+              if (t.isJSXText(cp.node)) {
+                extractedText += cleanStringForHtml(cp.node.value);
+              }
+            });
+          }
+          const callExpr = {
+            type: "CallExpression",
+            callee: { type: "Identifier", name: "jsx" },
+            arguments: [
+              { type: "Identifier", name: tagName },
+              { type: "ObjectExpression", properties: propsProperties },
+              { type: "Literal", value: extractedText }
+            ]
+          };
+          pushToExpressions(callExpr, path, false);
+          return;
         }
       }
       const children = path.get("children");
@@ -13424,7 +13472,10 @@ function getTaggedTemplate(node) {
   return {
     type: "TaggedTemplateExpression",
     tag: "html",
-    template: { strings, expressions },
+    template: {
+      strings,
+      expressions
+    },
     meta: metaStr
   };
 }

package/dist/index-vite.js

@@ -13391,6 +13391,54 @@ function getLiteralParts(rootPath) {
             stringPart.push(`</${tagName}>`);
           }
           return;
+        } else {
+          const propsProperties = [];
+          openingElement.attributes.forEach((attr) => {
+            if (t.isJSXAttribute(attr)) {
+              let attrName = attr.name.name;
+              const value = attr.value;
+              let valNode;
+              attrName = PROPERTY_ATTRIBUTE_MAP[attrName] || attrName;
+              if (!value) {
+                valNode = { type: "Literal", value: true };
+              } else if (t.isJSXExpressionContainer(value)) {
+                valNode = value.expression;
+              } else {
+                valNode = { type: "Literal", value: value.value };
+              }
+              propsProperties.push({
+                type: "Property",
+                key: { type: "Identifier", name: attrName },
+                value: valNode,
+                kind: "init"
+              });
+            } else if (t.isJSXSpreadAttribute(attr)) {
+              propsProperties.push({
+                type: "SpreadElement",
+                argument: attr.argument
+              });
+            }
+          });
+          let extractedText = "";
+          const children2 = path.get("children");
+          if (Array.isArray(children2)) {
+            children2.forEach((cp) => {
+              if (t.isJSXText(cp.node)) {
+                extractedText += cleanStringForHtml(cp.node.value);
+              }
+            });
+          }
+          const callExpr = {
+            type: "CallExpression",
+            callee: { type: "Identifier", name: "jsx" },
+            arguments: [
+              { type: "Identifier", name: tagName },
+              { type: "ObjectExpression", properties: propsProperties },
+              { type: "Literal", value: extractedText }
+            ]
+          };
+          pushToExpressions(callExpr, path, false);
+          return;
         }
       }
       const children = path.get("children");
@@ -13421,7 +13469,10 @@ function getTaggedTemplate(node) {
   return {
     type: "TaggedTemplateExpression",
     tag: "html",
-    template: { strings, expressions },
+    template: {
+      strings,
+      expressions
+    },
     meta: metaStr
   };
 }

package/package.json

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