@htmlplus/element 3.4.1 → 3.4.3

package/dist/constants.d.ts

@@ -23,6 +23,13 @@ declare const LIFECYCLE_DISCONNECTED = "disconnectedCallback";
 declare const LIFECYCLE_READY = "readyCallback";
 declare const LIFECYCLE_UPDATE = "updateCallback";
 declare const LIFECYCLE_UPDATED = "updatedCallback";
+declare const INTERNAL_ATTRIBUTES_IMPORTED = "_internal_a_";
+declare const INTERNAL_ATTRIBUTES_LOCAL = "INTERNAL_ATTRIBUTES";
+declare const INTERNAL_HTML_IMPORTED = "_internal_h_";
+declare const INTERNAL_HTML_LOCAL = "INTERNAL_HTML";
+declare const INTERNAL_STYLES_IMPORTED = "_internal_s_";
+declare const INTERNAL_STYLES_LOCAL = "INTERNAL_STYLES";
+declare const INTERNAL_PATH = "@htmlplus/element";
 declare const METHOD_RENDER = "render";
 declare const STATIC_STYLE = "style";
 declare const STATIC_TAG = "tag";
@@ -38,12 +45,5 @@ declare const TYPE_NUMBER: number;
 declare const TYPE_OBJECT: number;
 declare const TYPE_STRING: number;
 declare const TYPE_UNDEFINED: number;
-declare const UTILS_ATTRIBUTES_IMPORTED = "attributes";
-declare const UTILS_ATTRIBUTES_LOCAL = "UTILS_ATTRIBUTES";
-declare const UTILS_HTML_IMPORTED = "html";
-declare const UTILS_HTML_LOCAL = "UTILS_HTML";
-declare const UTILS_STYLES_IMPORTED = "styles";
-declare const UTILS_STYLES_LOCAL = "UTILS_STYLES";
-declare const UTILS_PATH = "@htmlplus/element/internal.js";
 
-export { API_CONNECTED, API_DEFAULTS, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, UTILS_PATH, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL };
+export { API_CONNECTED, API_DEFAULTS, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, INTERNAL_ATTRIBUTES_IMPORTED, INTERNAL_ATTRIBUTES_LOCAL, INTERNAL_HTML_IMPORTED, INTERNAL_HTML_LOCAL, INTERNAL_PATH, INTERNAL_STYLES_IMPORTED, INTERNAL_STYLES_LOCAL, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED };

package/dist/constants.js

@@ -29,6 +29,14 @@ const LIFECYCLE_DISCONNECTED = 'disconnectedCallback';
 const LIFECYCLE_READY = 'readyCallback';
 const LIFECYCLE_UPDATE = 'updateCallback';
 const LIFECYCLE_UPDATED = 'updatedCallback';
+// internal
+const INTERNAL_ATTRIBUTES_IMPORTED = '_internal_a_';
+const INTERNAL_ATTRIBUTES_LOCAL = 'INTERNAL_ATTRIBUTES';
+const INTERNAL_HTML_IMPORTED = '_internal_h_';
+const INTERNAL_HTML_LOCAL = 'INTERNAL_HTML';
+const INTERNAL_STYLES_IMPORTED = '_internal_s_';
+const INTERNAL_STYLES_LOCAL = 'INTERNAL_STYLES';
+const INTERNAL_PATH = PACKAGE_NAME;
 // methods
 const METHOD_RENDER = 'render';
 // statics
@@ -48,13 +56,5 @@ const TYPE_NUMBER = 2 ** 7;
 const TYPE_OBJECT = 2 ** 8;
 const TYPE_STRING = 2 ** 9;
 const TYPE_UNDEFINED = 2 ** 10;
-// utils
-const UTILS_ATTRIBUTES_IMPORTED = 'attributes';
-const UTILS_ATTRIBUTES_LOCAL = 'UTILS_ATTRIBUTES';
-const UTILS_HTML_IMPORTED = 'html';
-const UTILS_HTML_LOCAL = 'UTILS_HTML';
-const UTILS_STYLES_IMPORTED = 'styles';
-const UTILS_STYLES_LOCAL = 'UTILS_STYLES';
-const UTILS_PATH = '@htmlplus/element/internal.js';
 
-export { API_CONNECTED, API_DEFAULTS, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, UTILS_PATH, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL };
+export { API_CONNECTED, API_DEFAULTS, API_HOST, API_RENDER_COMPLETED, API_REQUEST, API_STACKS, API_STYLE, COMMENT_AUTO_ADDED, DECORATOR_CSS_VARIABLE, DECORATOR_ELEMENT, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_PROPERTY, DECORATOR_PROPERTY_TYPE, DECORATOR_STATE, ELEMENT_HOST_NAME, INTERNAL_ATTRIBUTES_IMPORTED, INTERNAL_ATTRIBUTES_LOCAL, INTERNAL_HTML_IMPORTED, INTERNAL_HTML_LOCAL, INTERNAL_PATH, INTERNAL_STYLES_IMPORTED, INTERNAL_STYLES_LOCAL, KEY, LIFECYCLE_ADOPTED, LIFECYCLE_CONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_READY, LIFECYCLE_UPDATE, LIFECYCLE_UPDATED, METHOD_RENDER, PACKAGE_NAME, STATIC_STYLE, STATIC_TAG, STYLE_IMPORTED, TYPE_ARRAY, TYPE_BIGINT, TYPE_BOOLEAN, TYPE_DATE, TYPE_ENUM, TYPE_FUNCTION, TYPE_NULL, TYPE_NUMBER, TYPE_OBJECT, TYPE_STRING, TYPE_UNDEFINED };

package/dist/jsx-runtime.d.ts

@@ -1,193 +1,22 @@
-import 'react';
+import type { JSX as JSXReact } from '@types/react';
 
-type WithPart<K extends keyof React.JSX.IntrinsicElements> = React.JSX.IntrinsicElements[K] & {
+type WithPart<T> = T & {
 	part?: string;
 };
 
-declare namespace JSX {
-	interface IntrinsicElements {
-		host: WithPart<'div'> & { [key: string]: unknown };
-
-		a: WithPart<'a'>;
-		abbr: WithPart<'abbr'>;
-		address: WithPart<'address'>;
-		area: WithPart<'area'>;
-		article: WithPart<'article'>;
-		aside: WithPart<'aside'>;
-		audio: WithPart<'audio'>;
-		b: WithPart<'b'>;
-		base: WithPart<'base'>;
-		bdi: WithPart<'bdi'>;
-		bdo: WithPart<'bdo'>;
-		big: WithPart<'big'>;
-		blockquote: WithPart<'blockquote'>;
-		body: WithPart<'body'>;
-		br: WithPart<'br'>;
-		button: WithPart<'button'>;
-		canvas: WithPart<'canvas'>;
-		caption: WithPart<'caption'>;
-		center: WithPart<'center'>;
-		cite: WithPart<'cite'>;
-		code: WithPart<'code'>;
-		col: WithPart<'col'>;
-		colgroup: WithPart<'colgroup'>;
-		data: WithPart<'data'>;
-		datalist: WithPart<'datalist'>;
-		dd: WithPart<'dd'>;
-		del: WithPart<'del'>;
-		details: WithPart<'details'>;
-		dfn: WithPart<'dfn'>;
-		dialog: WithPart<'dialog'>;
-		div: WithPart<'div'>;
-		dl: WithPart<'dl'>;
-		dt: WithPart<'dt'>;
-		em: WithPart<'em'>;
-		embed: WithPart<'embed'>;
-		fieldset: WithPart<'fieldset'>;
-		figcaption: WithPart<'figcaption'>;
-		figure: WithPart<'figure'>;
-		footer: WithPart<'footer'>;
-		form: WithPart<'form'>;
-		h1: WithPart<'h1'>;
-		h2: WithPart<'h2'>;
-		h3: WithPart<'h3'>;
-		h4: WithPart<'h4'>;
-		h5: WithPart<'h5'>;
-		h6: WithPart<'h6'>;
-		head: WithPart<'head'>;
-		header: WithPart<'header'>;
-		hgroup: WithPart<'hgroup'>;
-		hr: WithPart<'hr'>;
-		html: WithPart<'html'>;
-		i: WithPart<'i'>;
-		iframe: WithPart<'iframe'>;
-		img: WithPart<'img'>;
-		input: WithPart<'input'>;
-		ins: WithPart<'ins'>;
-		kbd: WithPart<'kbd'>;
-		keygen: WithPart<'keygen'>;
-		label: WithPart<'label'>;
-		legend: WithPart<'legend'>;
-		li: WithPart<'li'>;
-		link: WithPart<'link'>;
-		main: WithPart<'main'>;
-		map: WithPart<'map'>;
-		mark: WithPart<'mark'>;
-		menu: WithPart<'menu'>;
-		menuitem: WithPart<'menuitem'>;
-		meta: WithPart<'meta'>;
-		meter: WithPart<'meter'>;
-		nav: WithPart<'nav'>;
-		noindex: WithPart<'noindex'>;
-		noscript: WithPart<'noscript'>;
-		object: WithPart<'object'>;
-		ol: WithPart<'ol'>;
-		optgroup: WithPart<'optgroup'>;
-		option: WithPart<'option'>;
-		output: WithPart<'output'>;
-		p: WithPart<'p'>;
-		param: WithPart<'param'>;
-		picture: WithPart<'picture'>;
-		pre: WithPart<'pre'>;
-		progress: WithPart<'progress'>;
-		q: WithPart<'q'>;
-		rp: WithPart<'rp'>;
-		rt: WithPart<'rt'>;
-		ruby: WithPart<'ruby'>;
-		s: WithPart<'s'>;
-		samp: WithPart<'samp'>;
-		search: WithPart<'search'>;
-		slot: WithPart<'slot'> & { onSlotChange?: (event: Event) => void };
-		script: WithPart<'script'>;
-		section: WithPart<'section'>;
-		select: WithPart<'select'>;
-		small: WithPart<'small'>;
-		source: WithPart<'source'>;
-		span: WithPart<'span'>;
-		strong: WithPart<'strong'>;
-		style: WithPart<'style'>;
-		sub: WithPart<'sub'>;
-		summary: WithPart<'summary'>;
-		sup: WithPart<'sup'>;
-		table: WithPart<'table'>;
-		template: WithPart<'template'>;
-		tbody: WithPart<'tbody'>;
-		td: WithPart<'td'>;
-		textarea: WithPart<'textarea'>;
-		tfoot: WithPart<'tfoot'>;
-		th: WithPart<'th'>;
-		thead: WithPart<'thead'>;
-		time: WithPart<'time'>;
-		title: WithPart<'title'>;
-		tr: WithPart<'tr'>;
-		track: WithPart<'track'>;
-		u: WithPart<'u'>;
-		ul: WithPart<'ul'>;
-		var: WithPart<'var'>;
-		video: WithPart<'video'>;
-		wbr: WithPart<'wbr'>;
-		webview: WithPart<'webview'>;
-
-		// SVG
-		svg: WithPart<'svg'>;
+type IntrinsicElementsWithPart = {
+	[K in keyof JSXReact.IntrinsicElements]: WithPart<Omit<JSXReact.IntrinsicElements[K], 'ref'>>;
+};
 
-		animate: WithPart<'animate'>;
-		animateMotion: WithPart<'animateMotion'>;
-		animateTransform: WithPart<'animateTransform'>;
-		circle: WithPart<'circle'>;
-		clipPath: WithPart<'clipPath'>;
-		defs: WithPart<'defs'>;
-		desc: WithPart<'desc'>;
-		ellipse: WithPart<'ellipse'>;
-		feBlend: WithPart<'feBlend'>;
-		feColorMatrix: WithPart<'feColorMatrix'>;
-		feComponentTransfer: WithPart<'feComponentTransfer'>;
-		feComposite: WithPart<'feComposite'>;
-		feConvolveMatrix: WithPart<'feConvolveMatrix'>;
-		feDiffuseLighting: WithPart<'feDiffuseLighting'>;
-		feDisplacementMap: WithPart<'feDisplacementMap'>;
-		feDistantLight: WithPart<'feDistantLight'>;
-		feDropShadow: WithPart<'feDropShadow'>;
-		feFlood: WithPart<'feFlood'>;
-		feFuncA: WithPart<'feFuncA'>;
-		feFuncB: WithPart<'feFuncB'>;
-		feFuncG: WithPart<'feFuncG'>;
-		feFuncR: WithPart<'feFuncR'>;
-		feGaussianBlur: WithPart<'feGaussianBlur'>;
-		feImage: WithPart<'feImage'>;
-		feMerge: WithPart<'feMerge'>;
-		feMergeNode: WithPart<'feMergeNode'>;
-		feMorphology: WithPart<'feMorphology'>;
-		feOffset: WithPart<'feOffset'>;
-		fePointLight: WithPart<'fePointLight'>;
-		feSpecularLighting: WithPart<'feSpecularLighting'>;
-		feSpotLight: WithPart<'feSpotLight'>;
-		feTile: WithPart<'feTile'>;
-		feTurbulence: WithPart<'feTurbulence'>;
-		filter: WithPart<'filter'>;
-		foreignObject: WithPart<'foreignObject'>;
-		g: WithPart<'g'>;
-		image: WithPart<'image'>;
-		line: WithPart<'line'>;
-		linearGradient: WithPart<'linearGradient'>;
-		marker: WithPart<'marker'>;
-		mask: WithPart<'mask'>;
-		metadata: WithPart<'metadata'>;
-		mpath: WithPart<'mpath'>;
-		path: WithPart<'path'>;
-		pattern: WithPart<'pattern'>;
-		polygon: WithPart<'polygon'>;
-		polyline: WithPart<'polyline'>;
-		radialGradient: WithPart<'radialGradient'>;
-		rect: WithPart<'rect'>;
-		set: WithPart<'set'>;
-		stop: WithPart<'stop'>;
-		switch: WithPart<'switch'>;
-		symbol: WithPart<'symbol'>;
-		text: WithPart<'text'>;
-		textPath: WithPart<'textPath'>;
-		tspan: WithPart<'tspan'>;
-		use: WithPart<'use'>;
-		view: WithPart<'view'>;
+declare global {
+	namespace JSX {
+		interface IntrinsicElements extends IntrinsicElementsWithPart {
+			host: WithPart<JSXReact.IntrinsicElements['div']> & {
+				[key: string]: unknown;
+			};
+			slot: WithPart<JSXReact.IntrinsicElements['slot']> & {
+				onSlotChange?: (event: Event) => void;
+			};
+		}
 	}
 }

package/dist/transformer.js

@@ -5,7 +5,7 @@ import { glob } from 'glob';
 import template from '@babel/template';
 import { pascalCase, kebabCase, camelCase, capitalCase } from 'change-case';
 import path, { join, resolve, dirname } from 'node:path';
-import { COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, DECORATOR_PROPERTY_TYPE, UTILS_STYLES_IMPORTED, UTILS_STYLES_LOCAL, UTILS_PATH, UTILS_HTML_IMPORTED, UTILS_HTML_LOCAL, ELEMENT_HOST_NAME, TYPE_OBJECT, TYPE_NULL, TYPE_ARRAY, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, UTILS_ATTRIBUTES_IMPORTED, UTILS_ATTRIBUTES_LOCAL, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, PACKAGE_NAME, DECORATOR_ELEMENT, KEY } from './constants.js';
+import { COMMENT_AUTO_ADDED, DECORATOR_PROPERTY, STATIC_TAG, DECORATOR_PROPERTY_TYPE, INTERNAL_STYLES_IMPORTED, INTERNAL_STYLES_LOCAL, INTERNAL_PATH, INTERNAL_HTML_IMPORTED, INTERNAL_HTML_LOCAL, ELEMENT_HOST_NAME, TYPE_OBJECT, TYPE_NULL, TYPE_ARRAY, TYPE_STRING, TYPE_ENUM, TYPE_NUMBER, TYPE_DATE, TYPE_BOOLEAN, INTERNAL_ATTRIBUTES_IMPORTED, INTERNAL_ATTRIBUTES_LOCAL, DECORATOR_CSS_VARIABLE, DECORATOR_EVENT, DECORATOR_METHOD, DECORATOR_STATE, STATIC_STYLE, STYLE_IMPORTED, PACKAGE_NAME, DECORATOR_ELEMENT, KEY } from './constants.js';
 import core from '@babel/traverse';
 import core$1 from '@babel/generator';
 import ora from 'ora';
@@ -385,7 +385,7 @@ const customElement = (userOptions) => {
                     return;
                 if (value.expression.type === 'JSXEmptyExpression')
                     return;
-                const { local } = addDependency(path, UTILS_PATH, UTILS_STYLES_LOCAL, UTILS_STYLES_IMPORTED);
+                const { local } = addDependency(path, INTERNAL_PATH, INTERNAL_STYLES_LOCAL, INTERNAL_STYLES_IMPORTED);
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local || ''), [value.expression]))));
                 path.skip();
             }
@@ -436,7 +436,7 @@ const customElement = (userOptions) => {
                 if (!['JSXElement', 'JSXFragment'].includes(type))
                     return;
                 const TODO = (node, attributes) => {
-                    const { local } = addDependency(path, UTILS_PATH, UTILS_ATTRIBUTES_LOCAL, UTILS_ATTRIBUTES_IMPORTED);
+                    const { local } = addDependency(path, INTERNAL_PATH, INTERNAL_ATTRIBUTES_LOCAL, INTERNAL_ATTRIBUTES_IMPORTED);
                     return t.callExpression(t.identifier(local || ''), [
                         node,
                         t.arrayExpression(attributes.map((attribute) => {
@@ -542,7 +542,7 @@ const customElement = (userOptions) => {
                     const templateLiteral = t.templateLiteral(quasis, expressions);
                     // TODO
                     // if (!expressions.length) return template;
-                    const { local } = addDependency(path, UTILS_PATH, UTILS_HTML_LOCAL, UTILS_HTML_IMPORTED, true);
+                    const { local } = addDependency(path, INTERNAL_PATH, INTERNAL_HTML_LOCAL, INTERNAL_HTML_IMPORTED, true);
                     return t.taggedTemplateExpression(t.identifier(local || ''), templateLiteral);
                 };
                 path.replaceWith(transform(render(path.node)));
@@ -703,22 +703,48 @@ const customElement = (userOptions) => {
                     const ast = template.default.ast(`
               // THE FOLLOWING TYPES HAVE BEEN ADDED AUTOMATICALLY
 
-              export interface ${context.className}Attributes {
+							type Filter<Base, Overrides> = {
+								[K in keyof Base as K extends keyof Overrides
+									? Overrides[K] extends never
+										? never
+										: K
+									: K]: Base[K];
+							};
+
+              export interface ${context.className}AttributesBase {
                 ${attributes.map(print).join('')}
               }
 
-              export interface ${context.className}Events {
+							export interface ${context.className}AttributesDisables { }
+
+							export type ${context.className}Attributes = Filter<${context.className}AttributesBase, ${context.className}AttributesDisables>;
+
+              export interface ${context.className}EventsBase {
                 ${events.map(print).join('')}
               }
 
-              export interface ${context.className}Methods {
+							export interface ${context.className}EventsDisables { }
+
+							export type ${context.className}Events = Filter<${context.className}EventsBase, ${context.className}EventsDisables>;
+
+              export interface ${context.className}MethodsBase {
                 ${methods.map(print).join('')}
               }
 
-              export interface ${context.className}Properties {
+							export interface ${context.className}MethodsDisables { }
+
+							export type ${context.className}Methods = Filter<${context.className}MethodsBase, ${context.className}MethodsDisables>;
+
+              export interface ${context.className}PropertiesBase {
                 ${properties.map(print).join('')}
               }
 
+							export interface ${context.className}PropertiesDisables { }
+
+							export type ${context.className}Properties = Filter<${context.className}PropertiesBase, ${context.className}PropertiesDisables>;
+
+							export type ${context.className}AttributesAndEvents = ${context.className}Attributes & ${context.className}Events;
+
               export interface ${context.className}JSX extends ${context.className}Events, ${context.className}Properties { }
     
               declare global {
@@ -732,21 +758,25 @@ const customElement = (userOptions) => {
                 interface HTMLElementTagNameMap {
                   "${context.elementTagName}": ${context.elementInterfaceName};
                 }
-                
-                namespace JSX {
-                  interface IntrinsicElements {
-                    "${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-                  }
-                }
               }
+                
+							export namespace JSX {
+								interface IntrinsicElements {
+									"${context.elementTagName}": ${context.className}Attributes & ${context.className}Events;
+								}
+							}
 
-              declare module "react" {
-                namespace JSX {
-                  interface IntrinsicElements {
-                    "${context.elementTagName}": ${context.className}Events & ${context.className}Attributes & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-                  }
-                }
-              }
+							${['@builder.io/qwik', 'inferno', 'preact', 'react', 'solid-js']
+                        .map((key) => `
+									declare module "${key}" {
+										namespace JSX {
+											interface IntrinsicElements {
+												"${context.elementTagName}": ${context.className}AttributesAndEvents & Omit<HTMLAttributes<${context.elementInterfaceName}>, keyof ${context.className}AttributesAndEvents>;
+											}
+										}
+									}
+								`)
+                        .join('\n')}
 
               export type ${context.className}Element = globalThis.${context.elementInterfaceName}
             `, {

package/package.json

@@ -1,63 +1,58 @@
 {
 	"name": "@htmlplus/element",
-	"version": "3.4.1",
+	"version": "3.4.3",
+	"description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powered by Web Component.",
+	"keywords": [
+		"components",
+		"custom elements",
+		"design systems",
+		"web components"
+	],
+	"homepage": "https://github.com/htmlplus/element#readme",
+	"bugs": {
+		"url": "https://github.com/htmlplus/element/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/htmlplus/element.git"
+	},
+	"funding": [],
 	"license": "MIT",
-	"sideEffects": false,
 	"author": "Masood Abdolian <m.abdolian@gmail.com>",
-	"description": "A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powered by Web Component.",
+	"sideEffects": false,
 	"type": "module",
-	"main": "./dist/client.js",
-	"types": "./dist/client.d.ts",
-	"scripts": {
-		"build": "npm run clean && rollup -c",
-		"clean": "rimraf dist",
-		"development:start": "vite --config development/vite.config.js",
-		"lint": "biome check --write",
-		"prepare": "husky",
-		"type-check": "tsc --noEmit"
-	},
-	"files": [
-		"./dist/*",
-		"./package.json",
-		"./README.md"
-	],
 	"exports": {
 		".": {
-			"import": "./dist/client.js",
-			"types": "./dist/client.d.ts"
+			"types": "./dist/client.d.ts",
+			"import": "./dist/client.js"
 		},
 		"./bundlers.js": {
-			"import": "./dist/bundlers.js",
-			"types": "./dist/bundlers.d.ts"
-		},
-		"./internal.js": {
-			"import": "./dist/internal.js",
-			"types": "./dist/internal.d.ts"
+			"types": "./dist/bundlers.d.ts",
+			"import": "./dist/bundlers.js"
 		},
 		"./transformer.js": {
-			"import": "./dist/transformer.js",
-			"types": "./dist/transformer.d.ts"
+			"types": "./dist/transformer.d.ts",
+			"import": "./dist/transformer.js"
 		},
 		"./jsx-runtime": "./dist/jsx-runtime.d.ts"
 	},
-	"funding": [],
-	"engines": {
-		"node": ">= 20.10.0"
-	},
-	"keywords": [
-		"components",
-		"custom elements",
-		"design systems",
-		"web components"
+	"main": "./dist/client.js",
+	"types": "./dist/client.d.ts",
+	"files": [
+		"./dist/*",
+		"./package.json",
+		"./README.md"
 	],
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/htmlplus/element.git"
-	},
-	"bugs": {
-		"url": "https://github.com/htmlplus/element/issues"
+	"scripts": {
+		"build": "npm run clean && rollup -c",
+		"build:watch": "npm run clean && rollup -c -w",
+		"clean": "rimraf dist",
+		"dev": "vite --force development",
+		"lint": "biome check --write",
+		"prepare": "husky",
+		"test": "vitest --config tests/vitest.config.ts",
+		"type-check": "tsc --noEmit"
 	},
-	"homepage": "https://github.com/htmlplus/element#readme",
 	"dependencies": {
 		"@babel/generator": "^7.28.3",
 		"@babel/parser": "^7.28.3",
@@ -80,19 +75,27 @@
 		"@semantic-release/commit-analyzer": "^13.0.1",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/github": "^11.0.4",
-		"@semantic-release/npm": "^12.0.2",
+		"@semantic-release/npm": "^13.1.3",
 		"@semantic-release/release-notes-generator": "^14.0.3",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@vitest/browser-playwright": "^4.0.16",
 		"conventional-changelog-conventionalcommits": "^9.1.0",
 		"cpy": "^12.0.1",
 		"husky": "^9.1.7",
 		"lint-staged": "^16.1.5",
+		"playwright": "^1.57.0",
 		"rimraf": "^6.0.1",
 		"rollup": "^4.48.1",
 		"rollup-plugin-copy": "^3.5.0",
 		"rollup-plugin-dts": "^6.2.3",
 		"rollup-plugin-node-externals": "^8.1.0",
-		"semantic-release": "^24.2.7",
+		"semantic-release": "^25.0.2",
 		"tslib": "^2.8.1",
-		"vite": "^7.1.3"
+		"vite": "^7.1.3",
+		"vitest": "^4.0.16"
+	},
+	"engines": {
+		"node": ">= 20.10.0"
 	}
 }

package/dist/internal.d.ts

@@ -1 +0,0 @@
-export { a as attributes, h as html, s as styles } from './client.js';

package/dist/internal.js

@@ -1,3 +0,0 @@
-export { a as attributes, h as html, s as styles } from './client.js';
-import 'change-case';
-import './constants.js';