add an example on how to add new attributes to elements

Author: titoBouzout

js/jsconfig.json

@@ -1,14 +1,15 @@
 {
 	"compilerOptions": {
 		"strict": true,
+		"checkJs": true,
 		"target": "ESNext",
 		"module": "ESNext",
 		"moduleResolution": "NodeNext",
 		"allowSyntheticDefaultImports": true,
 		"esModuleInterop": true,
 		"jsx": "preserve",
 		"jsxImportSource": "pota",
-		"types": ["vite/client", "pota"],
+		"types": ["vite/client", "pota", "./types.ts"],
 		"noEmit": true,
 		"isolatedModules": true
 	}

js/src/index.jsx

@@ -3,6 +3,7 @@ import { Router } from 'pota/web'
 
 import logo from './assets/logo.svg'
 import styles from './index.module.css'
+import 'pota/plugin/clickOutside'
 
 function App() {
   return (
@@ -11,7 +12,13 @@ function App() {
         <img src={logo} alt="logo" />
       </header>
       <p>
-        <a alt="pota comes from potable" href="https://pota.quack.uy">
+        <a
+          clickOutside={(event, node) =>
+            console.log('clickOutside demo', event, node)
+          }
+          title="pota comes from potable"
+          href="https://pota.quack.uy"
+        >
           https://pota.quack.uy
         </a>
       </p>

js/types.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'pota/jsx-runtime'
+
+declare module 'pota/jsx-runtime' {
+	namespace JSX {
+		/** Adds an attribute to all HTML elements */
+		interface IntrinsicHTMLAttributes {
+			clickOutside?: (event: Event, node: HTMLElement) => void
+		}
+
+		/** Adds an attribute to all SVG elements */
+		interface IntrinsicSVGAttributes {
+			clickOutside?: (event: Event, node: HTMLElement) => void
+		}
+
+		/** Adds an attribute to all MathML elements */
+		interface IntrinsicMathMLAttributes {
+			clickOutside?: (event: Event, node: HTMLElement) => void
+		}
+	}
+}