@inglorious/vite-plugin-jsx 1.0.0

package/.turbo/turbo-lint.log

@@ -0,0 +1,3 @@
+[?9001h[?1004h[?25l]0;C:\WINDOWS\system32\cmd.exe [?25h[?25l
+> @inglorious/vite-plugin-jsx@1.0.0 lint C:\Users\anton\Projects\ic\inglorious-forge\packages\vite-plugin-jsx
+> eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0[?25h[?9001l[?1004l

package/.turbo/turbo-test.log

@@ -0,0 +1,57 @@
+[?9001h[?1004h[?25l]0;C:\WINDOWS\system32\cmd.exe [?25h[?25l
+> @inglorious/vite-plugin-jsx@0.1.0 test C:\Users\anton\Projects\ic\inglorious-forge\packages\vite-plugin-jsx
+> vitest run[?25h]0;node (vitest)
+[?25l RUN  v2.1.9 C:/Users/anton/Projects/ic/inglorious-forge/packages/vite-plugin-jsx[?25h]0;node (vitest 3)]0;node (vitest 1)]0;node (vitest 2)]0;node (vitest 5)]0;node (vitest 6)]0;node (vitest 7)]0;node (vitest 4)]0;node (vitest 9)]0;node (vitest 8)]0;node (vitest 10)]0;node (vitest 11)[?25l     · moves api parameter to the end if it is not the last one
+     · does not change parameters if api is already the last argument
+     · moves api parameter to the end when it is in the middle
+     · does not inject api if no capitalized component is used
+     · does not inject api if component is not inside a 'render' method
+     · throws an error when trying to inject api with a rest parameter present
+     · injects api argument when component is nested inside a Fragment
+     · injects api argument when component is nested inside standard elements
+     ✓ moves api parameter to the end if it is not the last one
+     ✓ does not change parameters if api is already the last argument
+     ✓ moves api parameter to the end when it is in the middle
+     ✓ does not inject api if no capitalized component is used
+     ✓ does not inject api if component is not inside a 'render' method
+     ✓ throws an error when trying to inject api with a rest parameter present
+     ✓ injects api argument when component is nested inside a Fragment
+     ✓ injects api argument when component is nested inside standard elements
+ ✓ src/index.test.js (29) 737ms
+   ✓ vite-plugin-jsx (29) 736ms
+     ✓ transforms basic JSX elements 411ms
+     ✓ injects the html import only when JSX is present
+     ✓ transforms className to class
+     ✓ handles event listeners (@event syntax)
+     ✓ handles boolean attributes
+     ✓ distinguishes between properties (.) and attributes
+     ✓ handles fragments
+     ✓ handles nested expressions and elements
+     ✓ transforms Array.map to repeat directive
+     ✓ transforms Array.map with key to keyed repeat directive
+     ✓ transforms ternary operators to when directive
+     ✓ transforms logical AND to when directive
+     ✓ merges imports if @inglorious/web is already imported
+     ✓ throws error for missing event handler expression
+     ✓ throws error for string literal event handler
+     ✓ does not generate closing tag for void elements
+     ✓ handles SVG self-closing tags correctly
+     ✓ expands self-closing non-void HTML tags
+     ✓ ignores empty expressions and comments
+     ✓ transforms capitalized components to api.render calls
+     ✓ injects api argument into render function if missing when using components
+     ✓ moves api parameter to the end if it is not the last one
+     ✓ does not change parameters if api is already the last argument
+     ✓ moves api parameter to the end when it is in the middle
+     ✓ does not inject api if no capitalized component is used
+     ✓ does not inject api if component is not inside a 'render' method
+     ✓ throws an error when trying to inject api with a rest parameter present
+     ✓ injects api argument when component is nested inside a Fragment
+     ✓ injects api argument when component is nested inside standard elements
+
+ Test Files  1 passed (1)
+      Tests  29 passed (29)
+   Start at  20:22:47
+   Duration  4.54s (transform 214ms, setup 0ms, collect 1.40s, tests 737ms, environment 0ms, prepare 1.08s)
+
+

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @inglorious/vite-plugin-jsx
+
+## 1.0.0
+
+### Major Changes
+
+- Add JSX support

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,370 @@
+# 🩸 @inglorious/vite-plugin-jsx
+
+> **JSX without React. Deterministic UI for Inglorious Web.**
+
+`@inglorious/vite-plugin-jsx` is a Vite plugin that compiles standard JSX / TSX into highly-optimized `lit-html` templates for **[@inglorious/web](https://www.npmjs.com/package/@inglorious/web)**.
+
+It gives you React-familiar syntax **without** React's runtime, hooks, lifecycle, or reactivity model.
+
+> New to Inglorious Web? Check out the [main documentation](https://www.npmjs.com/package/@inglorious/web) first.
+
+---
+
+## ✨ Features
+
+- Standard JSX & TSX syntax
+- Zero runtime overhead
+- Compiles directly to `lit-html`
+- Deterministic rendering model
+- No hooks, no effects, no lifecycles
+- First-class SVG support
+- Automatic optimization of:
+  - conditionals → `when()`
+  - lists → `repeat()`
+- Smart attribute & property binding
+- Full TypeScript support
+
+---
+
+## 📦 Installation
+
+```bash
+npm install -D @inglorious/vite-plugin-jsx
+```
+
+---
+
+## ⚡ Usage
+
+### `vite.config.ts`
+
+```ts
+import { defineConfig } from "vite"
+import { jsx } from "@inglorious/vite-plugin-jsx"
+
+export default defineConfig({
+  plugins: [jsx()],
+})
+```
+
+That’s it.
+
+You can now write JSX/TSX in your Inglorious project.
+
+---
+
+## 🧬 What It Compiles To
+
+### JSX Input
+
+```jsx
+function render(entity, api) {
+  return (
+    <div className="card">
+      {entity.visible && <h2>{entity.title}</h2>}
+
+      {entity.items.map((item) => (
+        <p key={item.id} onClick={() => api.select(item)}>
+          {item.name}
+        </p>
+      ))}
+    </div>
+  )
+}
+```
+
+### Compiled Output
+
+```js
+function render(entity, api) {
+  return html`
+    <div class="card">
+      ${when(entity.visible, () => html`<h2>${entity.title}</h2>`)}
+      ${repeat(
+        entity.items,
+        (item) => item.id,
+        (item) => html`<p @click=${() => api.select(item)}>${item.name}</p>`,
+      )}
+    </div>
+  `
+}
+```
+
+---
+
+## 📚 Common Patterns
+
+### Handling Events
+
+```jsx
+export const button = {
+  render(entity, api) {
+    return (
+      <button onClick={() => api.notify(`#${entity.id}:click`)}>
+        {entity.label}
+      </button>
+    )
+  },
+}
+```
+
+### Conditional Rendering
+
+```jsx
+export const panel = {
+  render(entity, api) {
+    return (
+      <div>
+        {entity.isLoading && <Spinner />}
+        {entity.error ? (
+          <ErrorMessage text={entity.error} />
+        ) : (
+          <Content data={entity.data} />
+        )}
+      </div>
+    )
+  },
+}
+```
+
+### Lists with Keys
+
+```jsx
+export const todoList = {
+  render(entity, api) {
+    return (
+      <ul>
+        {entity.todos.map((todo) => (
+          <TodoItem key={todo.id} {...todo} />
+        ))}
+      </ul>
+    )
+  },
+}
+```
+
+---
+
+## 📘 TypeScript Support
+
+The plugin works with `.tsx` files out of the box. For proper type checking:
+
+```ts
+// tsconfig.json
+{
+  "compilerOptions": {
+    "jsx": "preserve",           // Let Vite handle JSX transformation
+    "jsxImportSource": undefined // Prevent automatic React imports
+  }
+}
+```
+
+For entity types with JSX renders:
+
+```ts
+import { html } from "@inglorious/web"
+
+type CounterEntity = {
+  type: "counter"
+  value: number
+}
+
+export const counter = {
+  render(entity: CounterEntity, api) {
+    return (
+      <div className="counter">
+        <span>Count: {entity.value}</span>
+      </div>
+    )
+  }
+}
+```
+
+---
+
+## 🧠 Design Philosophy
+
+This plugin is **purely compile-time**.
+
+It does **not** introduce:
+
+- state
+- hooks
+- lifecycles
+- effects
+- subscriptions
+- partial reactivity
+
+JSX is treated as **syntax**, not as a runtime system.
+
+The execution model of **@inglorious/web** remains untouched:
+
+> store change → full deterministic render → diff → commit
+
+---
+
+## 🔁 JSX Rules & Semantics
+
+### Event handlers
+
+```jsx
+<button onClick={save} />
+```
+
+→
+
+```html
+<button @click="${save}"></button>
+```
+
+---
+
+### Property vs Attribute Binding
+
+```jsx
+// Properties (use . prefix for custom elements and form controls)
+<input value={x} />       // → .value=${x}
+<my-element data={x} />   // → .data=${x}
+
+// Attributes (standard HTML, kebab-case, or specific attributes)
+<input id={x} />          // → id=${x}
+<div data-id={x} />       // → data-id=${x}
+<div class={x} />         // → class=${x}
+```
+
+---
+
+### Conditionals
+
+```jsx
+{
+  cond && <A />
+}
+{
+  cond ? <A /> : <B />
+}
+```
+
+→ compiled to `when()`
+
+---
+
+### Lists
+
+```jsx
+items.map((i) => <Row key={i.id} />)
+```
+
+→ compiled to `repeat()`
+
+Keys are extracted automatically.
+
+---
+
+### Fragments
+
+```jsx
+<>
+  <A />
+  <B />
+</>
+```
+
+Fully supported.
+
+---
+
+### SVG
+
+Nested SVG trees are handled correctly, including `foreignObject`.
+
+---
+
+### Engine Components
+
+Capitalized tags are treated as **Engine Components** and compiled to `api.render()` calls.
+
+```jsx
+export const app = {
+  render() {
+    // ☝️ Plugin auto-injects 'api' if you use components!
+    return <Form id="f1" />
+  },
+}
+```
+
+→ `api.render("form", { id: "f1" })`
+
+> 💡 **Smart injection**: The plugin automatically adds the `api` parameter to your render function when you use Engine Components in JSX. You don't need to add it manually!
+
+#### ⚠️ Important Constraint
+
+These engine components must:
+
+- **not** contain children
+- **not** represent DOM
+- **not** try to be React
+
+They are **render boundaries** for your engine.
+
+```jsx
+// ❌ DON'T DO THIS - Engine components don't support children
+export const form = {
+  render(entity, api) {
+    return (
+      <Form id="f1">
+        <Field />
+      </Form>
+    )
+  },
+}
+
+// ✅ DO THIS - Compose at the entity level instead
+export const form = {
+  render(entity, api) {
+    return html`<form>${api.render("field", { formId: entity.id })}</form>`
+  },
+}
+```
+
+---
+
+## 🧪 Why This Exists
+
+React's runtime model is heavy, implicit, and hard to reason about at scale.
+
+Inglorious Web is built on different principles:
+
+- **Explicit data flow** - All state lives in the store
+- **Deterministic rendering** - Same state always produces same output
+- **Full-tree updates** - No dependency tracking, no hidden subscriptions
+- **Predictable performance** - lit-html diffs everything, every time
+
+This plugin lets you keep the ergonomics of JSX **without compromising the architecture**.
+
+---
+
+## 🧯 What This Plugin Does NOT Support (by design)
+
+This plugin intentionally does **not** support:
+
+- React hooks (useState, useEffect, etc.)
+- Component-local state
+- Lifecycle methods
+- Context API
+- Portals
+- Fine-grained reactivity
+
+**Why?** These features conflict with Inglorious Web's deterministic rendering model.
+
+If you need these patterns, consider whether your state should live in the store instead, or use React directly.
+
+---
+
+## License
+
+**MIT License - Free and open source**
+
+Created by [Matteo Antony Mistretta](https://github.com/IngloriousCoderz)
+
+You're free to use, modify, and distribute this software. See [LICENSE](./LICENSE) for details.

package/eslint.config.js

@@ -0,0 +1 @@
+export { default } from "@inglorious/eslint-config/base"

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@inglorious/vite-plugin-jsx",
+  "version": "1.0.0",
+  "description": "A Vite plugin that transforms JSX into lit-html syntax.",
+  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "homepage": "https://github.com/IngloriousCoderz/inglorious-forge/tree/main/packages/vite-plugin-jsx#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/IngloriousCoderz/inglorious-forge.git",
+    "directory": "packages/vite-plugin-jsx"
+  },
+  "bugs": {
+    "url": "https://github.com/IngloriousCoderz/inglorious-forge/issues"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "inglorious",
+    "jsx",
+    "lit-html"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-syntax-jsx": "^7.28.6",
+    "@babel/plugin-syntax-typescript": "^7.28.6"
+  },
+  "devDependencies": {
+    "vitest": "^2.0.4",
+    "@inglorious/eslint-config": "1.1.1"
+  },
+  "engines": {
+    "node": ">= 22"
+  },
+  "scripts": {
+    "format": "prettier --write '**/*.{js,jsx}'",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "test:watch": "vitest",
+    "test": "vitest run"
+  }
+}

package/src/__snapshots__/index.test.js.snap

@@ -0,0 +1,177 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`vite-plugin-jsx > distinguishes between properties (.) and attributes 1`] = `
+"import { html } from "@inglorious/web";
+const App = () => html\`<my-element id=\${id} class=\${cls} aria-label=\${label} data-test=\${test} .someProp=\${value} .complexData=\${obj}></my-element>\`;"
+`;
+
+exports[`vite-plugin-jsx > does not change parameters if api is already the last argument 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(entity, api) {
+    return api.render("form");
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > does not generate closing tag for void elements 1`] = `
+"import { html } from "@inglorious/web";
+html\`<img src="image.png" />\`;"
+`;
+
+exports[`vite-plugin-jsx > does not inject api if component is not inside a 'render' method 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  notRender() {
+    return api.render("form");
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > does not inject api if no capitalized component is used 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(entity) {
+    return html\`<div>\${entity.name}</div>\`;
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > expands self-closing non-void HTML tags 1`] = `
+"import { html } from "@inglorious/web";
+html\`<div class="empty"></div>\`;"
+`;
+
+exports[`vite-plugin-jsx > handles SVG self-closing tags correctly 1`] = `
+"import { html } from "@inglorious/web";
+const Icon = () => html\`<svg> \${html\`<path d="M0 0h10v10H0z" />\`} \${html\`<circle cx="5" cy="5" r="5" />\`} </svg>\`;"
+`;
+
+exports[`vite-plugin-jsx > handles boolean attributes 1`] = `
+"import { html } from "@inglorious/web";
+html\`<input disabled checked readonly />\`;"
+`;
+
+exports[`vite-plugin-jsx > handles event listeners (@event syntax) 1`] = `
+"import { html } from "@inglorious/web";
+html\`<button @click=\${handleClick} @mouseover=\${() => {}}>Click</button>\`;"
+`;
+
+exports[`vite-plugin-jsx > handles fragments 1`] = `
+"import { html } from "@inglorious/web";
+const List = () => html\` \${html\`<li>A</li>\`} \${html\`<li>B</li>\`} \`;"
+`;
+
+exports[`vite-plugin-jsx > handles nested expressions and elements 1`] = `
+"import { html, when } from "@inglorious/web";
+const App = () => html\`<div>\${when(show, () => html\`<span>Visible</span>\`, () => null)}</div>\`;"
+`;
+
+exports[`vite-plugin-jsx > ignores empty expressions and comments 1`] = `
+"import { html } from "@inglorious/web";
+const App = () => html\`<div>   \${html\`<span>Content</span>\`} </div>\`;"
+`;
+
+exports[`vite-plugin-jsx > injects api argument into render function if missing when using components 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(api) {
+    return api.render("form");
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > injects api argument when component is nested inside a Fragment 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(api) {
+    return html\` \${api.render("form")} \`;
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > injects api argument when component is nested inside standard elements 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(api) {
+    return html\`<div> \${api.render("form")} </div>\`;
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > merges imports if @inglorious/web is already imported 1`] = `
+"import { html, when } from "@inglorious/web";
+const App = ({
+  show
+}) => html\`<div>\${when(show, () => api.render("a"), () => api.render("b"))}</div>\`;"
+`;
+
+exports[`vite-plugin-jsx > moves api parameter to the end if it is not the last one 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(entity, api) {
+    return api.render("form");
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > moves api parameter to the end when it is in the middle 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(entity, options, api) {
+    return api.render("form");
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > transforms Array.map to repeat directive 1`] = `
+"import { html } from "@inglorious/web";
+const List = ({
+  items
+}) => html\`<ul> \${items.map(item => html\`<li>\${item}</li>\`)} </ul>\`;"
+`;
+
+exports[`vite-plugin-jsx > transforms Array.map with key to keyed repeat directive 1`] = `
+"import { html } from "@inglorious/web";
+const List = ({
+  items
+}) => html\`<ul> \${items.map(item => html\`<li .key=\${item.id}>\${item.name}</li>\`)} </ul>\`;"
+`;
+
+exports[`vite-plugin-jsx > transforms basic JSX elements 1`] = `
+"import { html } from "@inglorious/web";
+export const App = () => html\`<div>Hello World</div>\`;"
+`;
+
+exports[`vite-plugin-jsx > transforms capitalized components to api.render calls 1`] = `
+"import { html } from "@inglorious/web";
+export const app = {
+  render(api) {
+    return html\`\${api.render("form", {
+      id: "f1",
+      title: "My Form"
+    })}\${api.render("list", {
+      items: []
+    })}\${api.render("footer")}\`;
+  }
+};"
+`;
+
+exports[`vite-plugin-jsx > transforms className to class 1`] = `
+"import { html } from "@inglorious/web";
+html\`<div class="container">Content</div>\`;"
+`;
+
+exports[`vite-plugin-jsx > transforms logical AND to when directive 1`] = `
+"import { html, when } from "@inglorious/web";
+const App = ({
+  show
+}) => html\`<div>\${when(show, () => api.render("modal"))}</div>\`;"
+`;
+
+exports[`vite-plugin-jsx > transforms ternary operators to when directive 1`] = `
+"import { html, when } from "@inglorious/web";
+const App = ({
+  isLoggedIn
+}) => html\`<div>\${when(isLoggedIn, () => api.render("user"), () => api.render("login"))}</div>\`;"
+`;