Added typescript types

README.md

@@ -1,4 +1,4 @@
-# JDOM `3.1.2`
+# JDOM `3.1.3`
 ## A wrapper for query selector and html elements + templating & reactivity framework
 
 - [Installation or embedding](#install)
@@ -28,12 +28,12 @@ npm install jdomjs
 
 ### Module
 ```js
-import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/[email protected].2/index.js'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/[email protected].3'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/jdom.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/jdom.js"></script>
 ```
 
 ## DOM Manipulation
@@ -258,7 +258,7 @@ html`
 `
 
 // Or use Helper-Component
-import { ForEach } from 'jdomjs/src/template/helper/components.js'
+import { ForEach } from 'jdomjs/template/helper/components.js'
 html`
     <${ForEach} 
         :bind=${elements}
@@ -293,7 +293,7 @@ const promise = fetch('/user/name')
 html`${promise.then(r => r.json()).then(u => u.name)}`
 
 // Or use Helper-Component
-import { Awaiting } from 'jdomjs/src/template/helper/components.js'
+import { Awaiting } from 'jdomjs/template/helper/components.js'
 
 const promise = fetch('/api/user')
 html`

package.json

@@ -4,15 +4,17 @@
   "description": "A wrapper for query selector and html elements",
   "main": "./index.js",
 
+  "types": "types/index.d.ts",
+
   "exports": {
     ".": "./index.js",
     "./JDOM.js": "./src/JDOM.js",
     "./JDOMComponent.js": "./src/JDOMComponent.js",
     "./hooks.js": "./src/hooks.js",
     "./decorators.ts": "./src/decorators.ts",
     "./Hook.js": "./src/Hook.js",
-    "./templpate/": "./src/template/",
-    "./router/": "./src/router/"
+    "./template/*": "./src/template/*",
+    "./router/*": "./src/router/*"
   },
 
   "scripts": {

publish.sh

@@ -0,0 +1,3 @@
+npm run build
+npx -p typescript tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types
+git push origin master

tsconfig.json

@@ -1,4 +1,7 @@
 {
+  "include": ["src/**/*"],
+  "allowJs": true,
+
   "compilerOptions": {
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

types/html-typedefs.d.ts

@@ -0,0 +1,5 @@
+type EventListenerType = (string | 'click' | 'dblclick' | 'mousedown' | 'mouseup' | 'mousemove' | 'mouseover' | 'mouseout' | 'mouseenter' | 'mouseleave' | 'keydown' | 'keyup' | 'keypress' | 'input' | 'change' | 'submit' | 'focus' | 'blur' | 'load' | 'unload' | 'resize' | 'scroll' | 'select' | 'contextmenu' | 'copy' | 'cut' | 'paste' | 'drag' | 'dragstart' | 'dragend' | 'dragenter' | 'dragleave' | 'dragover' | 'drop' | 'error' | 'hashchange' | 'loadend' | 'loadstart' | 'message' | 'offline' | 'online' | 'popstate' | 'progress' | 'storage' | 'timeout' | 'transitionend' | 'touchstart' | 'touchend' | 'touchmove' | 'touchcancel' | 'wheel' | 'animationstart' | 'animationend' | 'animationiteration' | 'pointerdown' | 'pointerup' | 'pointercancel' | 'pointermove' | 'pointerover' | 'pointerout' | 'gotpointercapture' | 'lostpointercapture' | 'fullscreenchange' | 'fullscreenerror' | 'mouseenter' | 'mouseleave' | 'pointerlockchange' | 'pointerlockerror' | 'readystatechange' | 'visibilitychange');
+type HTMLTag = (string | 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'div' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'map' | 'mark' | 'meta' | 'meter' | 'nav' | 'noscript' | 'object' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'param' | 'picture' | 'pre' | 'progress' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'script' | 'section' | 'select' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'svg' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'var' | 'video' | 'wbr');
+type HTMLAttributes = (string | 'id' | 'class' | 'value' | 'src' | 'alt' | 'href' | 'disabled' | 'readonly' | 'placeholder' | 'checked' | 'selected' | 'maxlength' | 'minlength' | 'max' | 'min' | 'step' | 'cols' | 'rows' | 'colspan' | 'rowspan' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-hidden' | 'aria-live' | 'role' | 'style' | 'tabindex' | 'target' | 'download' | 'autocomplete' | 'autofocus' | 'multiple' | 'required' | 'pattern' | 'size' | 'accept' | 'enctype' | 'method' | 'action' | 'charset' | 'lang' | 'form' | 'sandbox' | 'seamless' | 'srcdoc' | 'width' | 'height' | 'crossorigin' | 'referrerpolicy' | 'preload' | 'poster' | 'controls' | 'loop' | 'muted' | 'autoplay' | 'playsinline' | 'controlslist' | 'loading' | 'object-fit' | 'object-position' | 'srcset' | 'sizes' | 'color' | 'face' | 'cite' | 'datetime' | 'headers' | 'scope' | 'start' | 'align' | 'valign' | 'nowrap');
+type CSSProperties = (string | 'align-content' | 'align-items' | 'align-self' | 'all' | 'animation' | 'animation-delay' | 'animation-direction' | 'animation-duration' | 'animation-fill-mode' | 'animation-iteration-count' | 'animation-name' | 'animation-play-state' | 'animation-timing-function' | 'backdrop-filter' | 'backface-visibility' | 'background' | 'background-attachment' | 'background-blend-mode' | 'background-clip' | 'background-color' | 'background-image' | 'background-origin' | 'background-position' | 'background-repeat' | 'background-size' | 'block-size' | 'border' | 'border-block' | 'border-block-color' | 'border-block-end' | 'border-block-end-color' | 'border-block-end-style' | 'border-block-end-width' | 'border-block-start' | 'border-block-start-color' | 'border-block-start-style' | 'border-block-start-width' | 'border-block-style' | 'border-block-width' | 'border-bottom' | 'border-bottom-color' | 'border-bottom-left-radius' | 'border-bottom-right-radius' | 'border-bottom-style' | 'border-bottom-width' | 'border-collapse' | 'border-color' | 'border-end' | 'border-end-color' | 'border-end-style' | 'border-end-width' | 'border-image' | 'border-image-outset' | 'border-image-repeat' | 'border-image-slice' | 'border-image-source' | 'border-image-width' | 'border-inline' | 'border-inline-color' | 'border-inline-end' | 'border-inline-end-color' | 'border-inline-end-style' | 'border-inline-end-width' | 'border-inline-start' | 'border-inline-start-color' | 'border-inline-start-style' | 'border-inline-start-width' | 'border-inline-style' | 'border-inline-width' | 'border-left' | 'border-left-color' | 'border-left-style' | 'border-left-width' | 'border-radius' | 'border-right' | 'border-right-color' | 'border-right-style' | 'border-right-width' | 'border-spacing' | 'border-start' | 'border-start-color' | 'border-start-style' | 'border-start-width' | 'border-style' | 'border-top' | 'border-top-color' | 'border-top-left-radius' | 'border-top-right-radius' | 'border-top-style' | 'border-top-width' | 'border-width' | 'bottom' | 'box-decoration-break' | 'box-shadow' | 'box-sizing' | 'break-after' | 'break-before' | 'break-inside' | 'caption-side' | 'caret-color' | 'clear' | 'clip' | 'clip-path' | 'color' | 'column-count' | 'column-fill' | 'column-gap' | 'column-rule' | 'column-rule-color' | 'column-rule-style' | 'column-rule-width' | 'column-span' | 'column-width' | 'columns' | 'content' | 'counter-increment' | 'counter-reset' | 'cursor' | 'direction' | 'display' | 'empty-cells' | 'filter' | 'flex' | 'flex-basis' | 'flex-direction' | 'flex-flow' | 'flex-grow' | 'flex-shrink' | 'flex-wrap' | 'float' | 'font' | 'font-family' | 'font-feature-settings' | 'font-kerning' | 'font-language-override' | 'font-size' | 'font-size-adjust' | 'font-stretch' | 'font-style' | 'font-synthesis' | 'font-variant' | 'font-variant-caps' | 'font-variant-east-asian' | 'font-variant-ligatures' | 'font-variant-numeric' | 'font-variation-settings' | 'font-weight' | 'gap' | 'grid' | 'grid-area' | 'grid-auto-columns' | 'grid-auto-flow' | 'grid-auto-rows' | 'grid-column' | 'grid-column-end' | 'grid-column-gap' | 'grid-column-start' | 'grid-gap' | 'grid-row' | 'grid-row-end' | 'grid-row-gap' | 'grid-row-start' | 'grid-template' | 'grid-template-areas' | 'grid-template-columns' | 'grid-template-rows' | 'hanging-punctuation' | 'height' | 'hyphens' | 'image-orientation' | 'image-rendering' | 'inline-size' | 'isolation' | 'justify-content' | 'justify-items' | 'justify-self' | 'left' | 'letter-spacing' | 'line-break' | 'line-height' | 'list-style' | 'list-style-image' | 'list-style-position' | 'list-style-type' | 'margin' | 'margin-block' | 'margin-block-end' | 'margin-block-start' | 'margin-bottom' | 'margin-inline' | 'margin-inline-end' | 'margin-inline-start' | 'margin-left' | 'margin-right' | 'margin-top' | 'mask' | 'mask-border' | 'mask-border-mode' | 'mask-border-outset' | 'mask-border-repeat' | 'mask-border-slice' | 'mask-border-source' | 'mask-border-width' | 'mask-clip' | 'mask-composite' | 'mask-image' | 'mask-mode' | 'mask-origin' | 'mask-position' | 'mask-repeat' | 'mask-size' | 'mask-type' | 'max-block-size' | 'max-height' | 'max-inline-size' | 'max-width' | 'min-block-size' | 'min-height' | 'min-inline-size' | 'min-width' | 'mix-blend-mode' | 'object-fit' | 'object-position' | 'offset' | 'offset-anchor' | 'offset-block' | 'offset-block-end' | 'offset-block-start' | 'offset-distance' | 'offset-inline' | 'offset-inline-end' | 'offset-inline-start' | 'offset-path' | 'offset-position' | 'offset-rotate' | 'opacity' | 'order' | 'orphans' | 'outline' | 'outline-color' | 'outline-offset' | 'outline-style' | 'outline-width' | 'overflow' | 'overflow-anchor' | 'overflow-block' | 'overflow-inline' | 'overflow-wrap' | 'overflow-x' | 'overflow-y' | 'padding' | 'padding-block' | 'padding-block-end' | 'padding-block-start' | 'padding-bottom' | 'padding-inline' | 'padding-inline-end' | 'padding-inline-start' | 'padding-left' | 'padding-right' | 'padding-top' | 'page-break-after' | 'page-break-before' | 'page-break-inside' | 'perspective' | 'perspective-origin' | 'place-content' | 'place-items' | 'place-self' | 'pointer-events' | 'position' | 'quotes' | 'resize' | 'right' | 'rotate' | 'backdropFilter' | 'backfaceVisibility' | 'backgroundAttachment' | 'backgroundBlendMode' | 'backgroundClip' | 'backgroundColor' | 'backgroundImage' | 'backgroundOrigin' | 'backgroundPosition' | 'backgroundRepeat' | 'backgroundSize' | 'blockSize' | 'borderBlockColor' | 'borderBlockEnd' | 'borderBlockEndColor' | 'borderBlockEndStyle' | 'borderBlockEndWidth' | 'borderBlockStart' | 'borderBlockStartColor' | 'borderBlockStartStyle' | 'borderBlockStartWidth' | 'borderBlockStyle' | 'borderBlockWidth' | 'borderBottomColor' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderCollapse' | 'borderEndColor' | 'borderEndStyle' | 'borderEndWidth' | 'borderImageOutset' | 'borderImageRepeat' | 'borderImageSlice' | 'borderImageSource' | 'borderImageWidth' | 'borderInlineColor' | 'borderInlineEnd' | 'borderInlineEndColor' | 'borderInlineEndStyle' | 'borderInlineEndWidth' | 'borderInlineStart' | 'borderInlineStartColor' | 'borderInlineStartStyle' | 'borderInlineStartWidth' | 'borderInlineStyle' | 'borderInlineWidth' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderSpacing' | 'borderStartColor' | 'borderStartStyle' | 'borderStartWidth' | 'borderTopColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderTopStyle' | 'borderTopWidth' | 'borderWidth' | 'boxDecorationBreak' | 'boxShadow' | 'boxSizing' | 'columnCount' | 'columnFill' | 'columnGap' | 'columnRuleColor' | 'columnRuleStyle' | 'columnRuleWidth' | 'columnSpan' | 'columnWidth' | 'fontFamily' | 'fontFeatureSettings' | 'fontKerning' | 'fontLanguageOverride' | 'fontSizeAdjust' | 'fontStretch' | 'fontSynthesis' | 'fontVariantCaps' | 'fontVariantEastAsian' | 'fontVariantLigatures' | 'fontVariantNumeric' | 'fontVariationSettings' | 'gridAutoColumns' | 'gridAutoFlow' | 'gridAutoRows' | 'gridColumnEnd' | 'gridColumnGap' | 'gridColumnStart' | 'gridRowEnd' | 'gridRowGap' | 'gridRowStart' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows' | 'hangingPunctuation' | 'inlineSize' | 'maskBorderMode' | 'maskBorderOutset' | 'maskBorderRepeat' | 'maskBorderSlice' | 'maskBorderSource' | 'maskBorderWidth' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'mixBlendMode' | 'objectFit' | 'objectPosition' | 'offsetAnchor' | 'offsetBlock' | 'offsetBlockEnd' | 'offsetBlockStart' | 'offsetDistance' | 'offsetInline' | 'offsetInlineEnd' | 'offsetInlineStart' | 'offsetPath' | 'offsetPosition' | 'offsetRotate' | 'pageBreakAfter' | 'pageBreakBefore' | 'pageBreakInside' | 'perspectiveOrigin' | 'placeContent' | 'placeItems' | 'placeSelf');
+type CSSPropertiesConfiguration = any;

types/index.d.ts

@@ -0,0 +1,40 @@
+export function $(el: Node | typeof _JDOM | NodeList | string, parent?: Element | Window): _JDOM;
+/**
+ * @param {HTMLTag|string} tag
+ * @return {_JDOM}
+ */
+export const $n: typeof _JDOM.new;
+export const $c: typeof _JDOM.component;
+export const $r: typeof _JDOM.registerComponent;
+export const $h: typeof _JDOM.fromHTML;
+export const $escHTML: typeof _JDOM.escapeHTML;
+export const JDOM: typeof _JDOM;
+export const html: typeof _html;
+export const css: typeof _css;
+export const comp: typeof _comp;
+export const JDOMComponent: typeof _JDOMComponent;
+export const state: typeof hooks.state;
+export const watch: typeof hooks.watch;
+export const computed: typeof hooks.computed;
+export const bind: typeof hooks.bind;
+declare namespace _default {
+    export { $ };
+    export { $n };
+    export { $c };
+    export { $r };
+    export { $h };
+    export { JDOM };
+    export { html };
+    export { comp };
+    export { watch };
+    export { state };
+    export { computed };
+    export { bind };
+}
+export default _default;
+import _JDOM from './src/JDOM.js';
+import { html as _html } from './src/template/template.js';
+import { css as _css } from './src/template/template.js';
+import { comp as _comp } from './src/template/template.js';
+import _JDOMComponent from './src/JDOMComponent.js';
+import * as hooks from './src/hooks.js';

types/src/Hook.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @template T
+ * @property {T} value
+ */
+export default class Hook<T> {
+    /**
+     * @param {T} value
+     */
+    constructor(value: T);
+    listeners: any[];
+    deleteListeners: any[];
+    setValue(val: any): void;
+    _value: any;
+    /**
+     * @param {T} val
+     */
+    set value(val: T);
+    /**
+     * @return {T}
+     */
+    get value(): T;
+    destroy(): void;
+    dispatchListener(oldVal: any): void;
+    addListener(listener: any): any;
+    removeListener(listener: any): void;
+    toString(): string;
+    #private;
+}