@praxisjs/jsx 0.3.10 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @praxisjs/jsx
 
+## 0.4.0
+
+### Minor Changes
+
+- 994c581: Refactor `@praxisjs/jsx` HTML/SVG type definitions to a React-style layered architecture.
+
+  **Breaking change (type-only):** the `[key: string]: HTMLAttributes` catch-all index signature has been removed from `JSX.IntrinsicElements`. Typos like `<dvi>` are now compile-time errors instead of silently resolving to `HTMLAttributes`.
+
+  **What's new:**
+
+  - `LiteralUnion<T>` widening applied to all string-literal attribute unions (`ButtonType`, `HTMLInputTypeAttribute`, `FormMethod`, `LinkTarget`, `ReferrerPolicy`, etc.) — a `string`-typed variable is now assignable without a cast, while IDE autocomplete still surfaces the canonical values
+  - `CSSProperties` type for object-style `style` props with full camelCase CSS property autocomplete and CSS custom property (`--xxx`) support
+  - `AriaAttributes` — complete WAI-ARIA 1.2 attribute set
+  - `DOMAttributes<T extends EventTarget>` — all event handlers with `currentTarget` narrowed to the host element type
+  - `HTMLAttributes<T extends Element>` — generic base with element-specific `ref: (el: T) => void`
+  - 40+ per-element attribute interfaces (`ButtonHTMLAttributes`, `InputHTMLAttributes`, `AnchorHTMLAttributes`, `ImgHTMLAttributes`, `FormHTMLAttributes`, `SelectHTMLAttributes`, `TextareaHTMLAttributes`, `VideoHTMLAttributes`, `DialogHTMLAttributes`, …)
+  - `SVGAttributes<T>` covering all SVG elements the runtime routes through the SVG namespace
+  - Full HTML element coverage: ~120 intrinsic element entries across metadata, sectioning, grouping, text-level, embedded, form, interactive, tabular, and scripting categories
+  - All new attribute interfaces are re-exported from `@praxisjs/jsx` for use in application code
+
+  `InstancePropsOf` now automatically infers `@Prop()` and `@State()` fields from `StatefulComponent` subclasses as JSX props. A `FrameworkKeys` template-literal pattern (`_${string}` plus lifecycle method names) strips all framework internals, so no explicit prop declaration is needed.
+
+### Patch Changes
+
+- @praxisjs/runtime@0.2.12
+
 ## 0.3.10
 
 ### Patch Changes

package/dist/__tests__/jsx-runtime.types.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=jsx-runtime.types.test.d.ts.map

package/dist/__tests__/jsx-runtime.types.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.types.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/jsx-runtime.types.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/jsx-runtime.types.test.js

@@ -0,0 +1,110 @@
+import { describe, it, expectTypeOf } from "vitest";
+describe("Reactive<T>", () => {
+    it("accepts a plain value", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("accepts a zero-arg function", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("rejects a plain number for Reactive<string>", () => {
+        expectTypeOf().not.toMatchTypeOf();
+    });
+});
+describe("LiteralUnion-based string attributes", () => {
+    it("ButtonType: literal values are assignable", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("ButtonType: arbitrary string is assignable", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("HTMLInputTypeAttribute: known literals are assignable", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("HTMLInputTypeAttribute: arbitrary string is assignable", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("LinkTarget: known literals are assignable", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("LinkTarget: arbitrary string (e.g. frame name) is assignable", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+});
+describe("ButtonHTMLAttributes", () => {
+    it("type prop accepts ButtonType", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("type prop is reactive", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("disabled prop is reactive boolean", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("class prop accepts reactive string", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("onClick receives MouseEvent with currentTarget HTMLButtonElement", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+});
+describe("InputHTMLAttributes", () => {
+    it("type prop accepts HTMLInputTypeAttribute", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("ref prop receives HTMLInputElement", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+});
+describe("AnchorHTMLAttributes", () => {
+    it("target accepts LinkTarget (literals and arbitrary strings)", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+});
+describe("ImgHTMLAttributes", () => {
+    it("ref prop receives HTMLImageElement", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+});
+describe("HTMLAttributes", () => {
+    it("style accepts a plain string", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("style accepts a CSSProperties object", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("style accepts a reactive CSSProperties function", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+});
+describe("CSSProperties", () => {
+    it("accepts CSS custom properties", () => {
+        const props = { "--brand-color": "#f00" };
+        expectTypeOf(props).toMatchTypeOf();
+    });
+});
+describe("SVGAttributes", () => {
+    it("fill prop is reactive string", () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+    it("onClick receives MouseEvent with SVGElement currentTarget", () => {
+        expectTypeOf().toMatchTypeOf();
+    });
+});
+//# sourceMappingURL=jsx-runtime.types.test.js.map

package/dist/__tests__/jsx-runtime.types.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.types.test.js","sourceRoot":"","sources":["../../src/__tests__/jsx-runtime.types.test.ts"],"names":[],"mappings":"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"}