fix: do not refer to typed-html in main decl

Closes #3

README.md

@@ -39,6 +39,10 @@ function MyComponent({ children }) {
 }
 ```
 
+If your frontend library injects its own JSX types, you'll need to augment it.
+See the [example project](https://github.com/Desdaemon/typed-htmx/tree/main/example)
+for a demo. typed-html and React are supported out of the box.
+
 ### As a JSX templating engine
 
 If you prefer to use JSX only for its templating capabilities in the vein of

example/README.md

@@ -0,0 +1,5 @@
+# Example
+
+A demo of library-agnostic type augmentation by typed-htmx.
+
+Try swapping out different `tsconfig.json`s to see the types of different libraries.

example/package.json

@@ -13,6 +13,6 @@
 		"typed-htmx": "link:.."
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.15"
+		"hono": "^3.11.12"
 	}
 }

example/src/types.d.ts

@@ -0,0 +1,11 @@
+// typed-htmx declares mostly ambient types so this is all you need.
+import 'typed-htmx';
+
+// A demo of how to augment foreign types with htmx attributes.
+// In this case, Hono sources its types from its own namespace, so we do the same
+// and directly extend its namespace.
+declare global {
+  namespace Hono {
+    interface HTMLAttributes extends HtmxAttributes {}
+  }
+}

example/tsconfig.hono.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    // This is (usually) the only setting to change when swapping renderers.
+    "jsxImportSource": "hono/jsx"
+  }
+}

example/tsconfig.json

@@ -1,20 +1,25 @@
 {
-	"files": ["index.jsx"],
 	"compilerOptions": {
 		"target": "es6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-		// "jsx": "react", /* Specify what JSX code is generated. */
-		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
+		// "jsx": "react", 
+		"jsx": "react-jsx", /* Specify what JSX code is generated. */
+		// If your frontend framework prescribes a JSX source, change it here.
+		// In this example, we will use typed-htmx's own text renderer based on typed-html.
 		"jsxImportSource": "typed-htmx/typed-html",
-		"module": "commonjs",
+		"module": "node16",
 		"moduleResolution": "node16" /* Specify how TypeScript looks up a file from a given module specifier. */,
-		"types": ["typed-htmx"],
 		"allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
 		"checkJs": true /* Enable error reporting in type-checked JavaScript files. */,
+		"noEmit": true,
+		"rootDir": ".",
 		"outDir": "./dist",
 		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
 		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 		"strict": true /* Enable all strict type-checking options. */,
 		"skipDefaultLibCheck": true /* Skip type checking .d.ts files that are included with TypeScript. */,
 		"skipLibCheck": true /* Skip type checking all .d.ts files. */
-	}
+	},
+	"include": [
+		"src/**/*",
+	]
 }

src/jsx.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="typed-html" />
-
 /**
  * Provides type definitions in JSX for htmx attributes.
  * @module
@@ -54,6 +52,8 @@ type HxTriggerModifier =
  * ## Declaring a new extension
  *
  * ```tsx twoslash
+ * // in foo.d.ts:
+ *
  * declare global {
  * 	namespace JSX {
  * 		interface HtmxExtensions {
@@ -160,10 +160,17 @@ interface HtmxBuiltinExtensions {
 	morphdom: "morphdom";
 }
 
+/**
+ * Alternative attribute variants recognized by htmx.
+ */
+type HtmxData<T> = {
+  [K in keyof T as K extends `hx-${string}` ? `data-${K}` : never]: T[K]
+}
+
 /**
  * Definitions for htmx attributes up to 1.9.3.
  */
-interface HtmxAttributes {
+interface HtmxAttributes extends HtmxData<HtmxAttributes> {
 	/** @ignore For React compatibility only. */
 	children?: {};
 	/** @ignore For React compatibility only. */
@@ -403,8 +410,11 @@ interface HtmxAttributes {
 /** @ignore */
 declare namespace JSX {
 	interface HtmxExtensions extends HtmxBuiltinExtensions {}
+
+	// typed-html
 	interface HtmlTag extends HtmxAttributes {}
 }
 
+// React (and other similar frameworks)
 /** @ignore */
-interface HTMLElement extends JSX.HtmlTag {}
+interface HTMLElement extends HtmxAttributes {}

src/typed-html/jsx-runtime.ts

@@ -1,4 +1,5 @@
 /// <reference path="../jsx.d.ts" />
+/// <reference types="typed-html" />
 
 import { createElement } from "typed-html";
 import { jsxConfig } from "../index";