From 6574d1822bfb95b06158f62df0e7af98114a41be Mon Sep 17 00:00:00 2001 From: juliangojani Date: Wed, 6 Mar 2024 16:01:58 +0100 Subject: [PATCH] Added typescript types --- README.md | 10 +- package.json | 6 +- publish.sh | 3 + tsconfig.json | 3 + types/html-typedefs.d.ts | 5 + types/index.d.ts | 40 ++ types/src/Hook.d.ts | 28 ++ types/src/JDOM.d.ts | 413 ++++++++++++++++++ types/src/JDOMComponent.d.ts | 25 ++ types/src/hooks.d.ts | 5 + types/src/router/Router.d.ts | 11 + types/src/template/JDOMTemplateParser.d.ts | 59 +++ types/src/template/TemplateDOMAdapter.d.ts | 21 + types/src/template/TemplateJDOMAdapter.d.ts | 8 + .../template/TemplateStaticHTMLAdapter.d.ts | 15 + types/src/template/helper/components.d.ts | 11 + types/src/template/template.d.ts | 26 ++ 17 files changed, 682 insertions(+), 7 deletions(-) create mode 100644 publish.sh create mode 100644 types/html-typedefs.d.ts create mode 100644 types/index.d.ts create mode 100644 types/src/Hook.d.ts create mode 100644 types/src/JDOM.d.ts create mode 100644 types/src/JDOMComponent.d.ts create mode 100644 types/src/hooks.d.ts create mode 100644 types/src/router/Router.d.ts create mode 100644 types/src/template/JDOMTemplateParser.d.ts create mode 100644 types/src/template/TemplateDOMAdapter.d.ts create mode 100644 types/src/template/TemplateJDOMAdapter.d.ts create mode 100644 types/src/template/TemplateStaticHTMLAdapter.d.ts create mode 100644 types/src/template/helper/components.d.ts create mode 100644 types/src/template/template.d.ts diff --git a/README.md b/README.md index d82fc47..702d006 100644 --- a/README.md +++ b/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/jdomjs@3.1.2/index.js' +import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.1.3' ``` ### HTML import ```js - + ``` ## 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` diff --git a/package.json b/package.json index 1ab5c71..ad7d0d3 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,8 @@ "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", @@ -11,8 +13,8 @@ "./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": { diff --git a/publish.sh b/publish.sh new file mode 100644 index 0000000..d0e989a --- /dev/null +++ b/publish.sh @@ -0,0 +1,3 @@ +npm run build +npx -p typescript tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types +git push origin master \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e0b9cb6..d7b94bc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,7 @@ { + "include": ["src/**/*"], + "allowJs": true, + "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, diff --git a/types/html-typedefs.d.ts b/types/html-typedefs.d.ts new file mode 100644 index 0000000..8fb3f6c --- /dev/null +++ b/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; diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000..6f1f37e --- /dev/null +++ b/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'; diff --git a/types/src/Hook.d.ts b/types/src/Hook.d.ts new file mode 100644 index 0000000..a40364c --- /dev/null +++ b/types/src/Hook.d.ts @@ -0,0 +1,28 @@ +/** + * @template T + * @property {T} value + */ +export default class Hook { + /** + * @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; +} diff --git a/types/src/JDOM.d.ts b/types/src/JDOM.d.ts new file mode 100644 index 0000000..2532d4a --- /dev/null +++ b/types/src/JDOM.d.ts @@ -0,0 +1,413 @@ +export default JDOM; +export type Animation = { + css: CSSPropertiesConfiguration; + duration: number; +}; +export type JDOMCustomHTMLElement = any; +/** + * @typedef Animation + * @property {CSSPropertiesConfiguration} css + * @property {Number} duration + */ +/** + * @typedef JDOMCustomHTMLElement + * @extends HTMLElement + * @property {function(style: string)} addStyle + * @property {any} #value + * @property {...any} args + * @property {Node} el + */ +declare class JDOM { + /** + * @param {HTMLTag} tag + * @param constructorArgs + * @return {JDOM} + */ + static "new"(tag?: HTMLTag, ...constructorArgs: any[]): JDOM; + /** + * A helper to create custom elements + * + * @param {function(JDOM, JDOMComponent)} component + * @param {Object} options + * @return {JDOMComponent} + */ + static component(component: (arg0: JDOM, arg1: JDOMComponent) => any, options?: any): JDOMComponent; + /** + * Registers a webcomponent + * + * @param {string|Object.} tag + * @param {Node|HTMLElement|JDOMCustomHTMLElement|undefined} component + */ + static registerComponent(tag: string | { + [x: string]: Node | HTMLElement | JDOMCustomHTMLElement; + }, component?: Node | HTMLElement | JDOMCustomHTMLElement | undefined): any; + /** + * When the document is ready, the callback will be called + * + * @param {function(Event)} callback + */ + static ready(callback: (arg0: Event) => any): void; + /** + * HTML-Escapes the given text to prevent XSS. + * + * @param {string} text + * @return string + */ + static escapeHTML(text: string): string; + /** + * @param {string} html + * @return {JDOM} + */ + static fromHTML(html: string): JDOM; + /** + * @param {Node|JDOM|NodeList|string} element + * @param {Node} parent + */ + constructor(element: Node | JDOM | NodeList | string, parent?: Node); + /** + * @type {Node[]} + */ + elem: Node[]; + hooks: {}; + $: (selector: any) => JDOM; + /** + * @param {function(JDOM)} callable + * @return {JDOM} + */ + each(callable: (arg0: JDOM) => any): JDOM; + /** + * @param {function(JDOM)} callable + * @return {JDOM} + */ + forEach(callable: (arg0: JDOM) => any): JDOM; + /** + * @param {function(Node)} callable + * @return {JDOM} + */ + eachNodes(callable: (arg0: Node) => any): JDOM; + /** + * @return {JDOM|null} + */ + first(): JDOM | null; + /** + * @return {JDOM[]} + */ + elements(): JDOM[]; + /** + * @return {JDOM[]} + */ + children(): JDOM[]; + /** + * @return {Node|null} + */ + firstNode(): Node | null; + /** + * @return {Node[]} + */ + nodes(): Node[]; + /** + * @param {string|Number|Hook} text + * @return {JDOM} + */ + setText(text: string | number | Hook): JDOM; + /** + * @return {string|null} + */ + getText(): string | null; + /** + * @param {string|Number|Hook|undefined} text + * @return {string|null|JDOM} + */ + text(text?: string | number | Hook | undefined): string | null | JDOM; + /** + * @param {string|Hook} html + * @return {JDOM} + */ + setHTML(html: string | Hook): JDOM; + /** + * @return {string|null} + */ + getHTML(): string | null; + /** + * @param {string|Hook|undefined} html + * @return {JDOM|string|null} + */ + html(html?: string | Hook | undefined): JDOM | string | null; + /** + * + * @param {CSSPropertiesConfiguration} css + * @return {JDOM} + */ + css(css: CSSPropertiesConfiguration): JDOM; + /** + * @param {CSSPropertiesConfiguration} css + * @return {JDOM} + */ + style(css: CSSPropertiesConfiguration): JDOM; + /** + * @param {string} name + * @return {HTMLAttributes} + */ + getAttr(name: string): HTMLAttributes; + /** + * @return {Object} + */ + getAttributes(): any; + /** + * @param {HTMLAttributes} name + * @param {string|Hook} val + * @return {JDOM} + */ + setAttr(name: HTMLAttributes, val: string | Hook): JDOM; + /** + * @param {HTMLAttributes} name + * @return {JDOM} + */ + removeAttr(name: HTMLAttributes): JDOM; + /** + * @param {HTMLAttributes} name + * @param {string|null|undefined} val + * @return {JDOM|string|null} + */ + attr(name: HTMLAttributes, val?: string | null | undefined): JDOM | string | null; + /** + * @return {string[]} + */ + attrs(): string[]; + /** + * @param {string} name + * @return {boolean} + */ + hasClass(name: string): boolean; + /** + * @param {...string} names + * @return {JDOM} + */ + addClass(...names: string[]): JDOM; + /** + * @param {...string} names + * @return {JDOM} + */ + addClasses(...names: string[]): JDOM; + /** + * @return {string[]} + */ + getClasses(): string[]; + /** + * @param {...string} names + * @return {JDOM} + */ + classes(...names: string[]): JDOM; + /** + * @param {string} name + * @return {JDOM} + */ + removeClass(name: string): JDOM; + /** + * @param {string} name + * @return {JDOM} + */ + toggleClass(name: string): JDOM; + /** + * @return {any} + */ + getValue(): any; + /** + * @param {any} val + * @return {JDOM} + */ + setValue(val: any): JDOM; + /** + * @param {any} val + * @return {JDOM} + */ + val(value?: any): JDOM; + /** + * @param {Hook} hook + * @return {JDOM} + */ + model(hook: Hook): JDOM; + /** + * @param name + * @param value + * @return {*|null|JDOM} + */ + setOrGetProperty(name: any, value?: any): any | null | JDOM; + /** + * @param {string} val + * @return {*|JDOM|null} + */ + id(val?: string): any | JDOM | null; + /** + * @param {...(string|JDOM|Node)} nodes + * @return {JDOM} + */ + append(...nodes: (string | JDOM | Node)[]): JDOM; + /** + * @param {...(string|JDOM|Node)} nodes + * @return {JDOM} + */ + appendTo(...nodes: (string | JDOM | Node)[]): JDOM; + /** + * @param {...(string|JDOM|Node)} nodes + * @return {JDOM} + */ + prepend(...nodes: (string | JDOM | Node)[]): JDOM; + /** + * @param {Array} nodes + * @return {JDOM} + */ + prependTo(...nodes: Array): JDOM; + /** + * Is the element hidden by style.display === 'none'? + * @return {boolean} + */ + hidden(): boolean; + /** + * @return {boolean} + */ + shown(): boolean; + /** + * @return {JDOM} + */ + show(): JDOM; + /** + * @return {JDOM} + */ + hide(): JDOM; + /** + * @return {JDOM} + */ + toggle(): JDOM; + /** + * @param {Hook} hook + * @return {JDOM} + */ + showIf(hook: Hook): JDOM; + /** + * + * @param {CSSPropertiesConfiguration} css CSS-Styles + * @param {Number} duration + * @return {Promise} + */ + animate(css?: CSSPropertiesConfiguration, duration?: number): Promise; + /** + * @param {Animation[]} animations + * @return {Promise} + */ + animator(animations: Animation[]): Promise; + /** + * @param {EventListenerType} listener + * @param {function(Event)} callable + * @return {JDOM} + */ + on(listener: EventListenerType, callable: (arg0: Event) => any): JDOM; + /** + * @param {EventListenerType} listener + * @param {function(Event)} callable + * @return {JDOM} + */ + removeEvent(listener: EventListenerType, callable: (arg0: Event) => any): JDOM; + /** + * @param {Object} events + * @return {JDOM} + */ + bind(events?: any): JDOM; + /** + * @param {function(PointerEvent)|undefined} callable + * @return {JDOM} + */ + click(callable?: ((arg0: PointerEvent) => any) | undefined): JDOM; + /** + * @param {function(FocusEvent)|undefined} callable + * @return {JDOM} + */ + focus(func: any): JDOM; + /** + * @param {number} index + * @return {JDOM} + */ + get(index: number): JDOM; + /** + * @return {number} + */ + size(): number; + /** + * @return {Element[]} + */ + toArray(): Element[]; + /** @param {function(PointerEvent)} func @return {JDOM} */ + contextmenu(func: (arg0: PointerEvent) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + change(func: (arg0: Event) => any): JDOM; + /** @param {function(MouseEvent)} func @return {JDOM} */ + mouseover(func: (arg0: MouseEvent) => any): JDOM; + /** @param {function(KeyboardEvent)} func @return {JDOM} */ + keypress(func: (arg0: KeyboardEvent) => any): JDOM; + /** @param {function(KeyboardEvent)} func @return {JDOM} */ + keyup(func: (arg0: KeyboardEvent) => any): JDOM; + /** @param {function(KeyboardEvent)} func @return {JDOM} */ + keydown(func: (arg0: KeyboardEvent) => any): JDOM; + /** @param {function(MouseEvent)} func @return {JDOM} */ + dblclick(func: (arg0: MouseEvent) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + resize(func: (arg0: Event) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + timeupdate(func: (arg0: Event) => any): JDOM; + /** @param {function(TouchEvent)} func @return {JDOM} */ + touchcancel(func: (arg0: TouchEvent) => any): JDOM; + /** @param {function(TouchEvent)} func @return {JDOM} */ + touchend(func: (arg0: TouchEvent) => any): JDOM; + /** @param {function(TouchEvent)} func @return {JDOM} */ + touchmove(func: (arg0: TouchEvent) => any): JDOM; + /** @param {function(TouchEvent)} func @return {JDOM} */ + touchstart(func: (arg0: TouchEvent) => any): JDOM; + /** @param {function(DragEvent)} func @return {JDOM} */ + drag(func: (arg0: DragEvent) => any): JDOM; + /** @param {function(DragEvent)} func @return {JDOM} */ + dragenter(func: (arg0: DragEvent) => any): JDOM; + /** @param {function(DragEvent)} func @return {JDOM} */ + dragleave(func: (arg0: DragEvent) => any): JDOM; + /** @param {function(DragEvent)} func @return {JDOM} */ + dragover(func: (arg0: DragEvent) => any): JDOM; + /** @param {function(DragEvent)} func @return {JDOM} */ + dragend(func: (arg0: DragEvent) => any): JDOM; + /** @param {function(DragEvent)} func @return {JDOM} */ + dragstart(func: (arg0: DragEvent) => any): JDOM; + /** @param {function(DragEvent)} func @return {JDOM} */ + drop(func: (arg0: DragEvent) => any): JDOM; + /** @param {function(FocusEvent)} func @return {JDOM} */ + focusout(func: (arg0: FocusEvent) => any): JDOM; + /** @param {function(FocusEvent)} func @return {JDOM} */ + focusin(func: (arg0: FocusEvent) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + invalid(func: (arg0: Event) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + popstate(func: (arg0: Event) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + volumechange(func: (arg0: Event) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + unload(func: (arg0: Event) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + offline(func: (arg0: Event) => any): JDOM; + /** @param {function(Event)} func @return {JDOM} */ + online(func: (arg0: Event) => any): JDOM; + /** + * @return {JDOM} + */ + remove(): JDOM; + /** + * @param {function(Event)} func + * @return {JDOM} + */ + ready(func: (arg0: Event) => any): JDOM; + /** + * @param {string|Event} event + * @param {any} options + * @return {JDOM} + */ + dispatch(event: string | Event, options?: any): JDOM; + [Symbol.iterator](): Node[]; +} +import Hook from './Hook.js'; +import JDOMComponent from './JDOMComponent.js'; diff --git a/types/src/JDOMComponent.d.ts b/types/src/JDOMComponent.d.ts new file mode 100644 index 0000000..9a6114e --- /dev/null +++ b/types/src/JDOMComponent.d.ts @@ -0,0 +1,25 @@ +export default class JDOMComponent extends HTMLElement { + constructor(options?: {}); + /** + * @type {ShadowRoot|Node} + */ + mainElement: ShadowRoot | Node; + options: {}; + connectedCallback(): void; + registerAttributeListener(): void; + addAttributeListener(key: any, options?: {}): void; + attributeListeners: any[]; + /** + * @param {string} style + */ + addStyle(style: string): void; + /** + * @return {Node|JDOM|string|undefined} + */ + render(): Node | JDOM | string | undefined; + /** + * @return {string|undefined} + */ + styles(): string | undefined; +} +import JDOM from './JDOM.js'; diff --git a/types/src/hooks.d.ts b/types/src/hooks.d.ts new file mode 100644 index 0000000..683b51d --- /dev/null +++ b/types/src/hooks.d.ts @@ -0,0 +1,5 @@ +export function state(initialValue: any): Hook; +export function computed(callable: any, dependencies?: any[]): Hook; +export function watch(hooks: any, callable: any): void; +export function bind(component: any, attr?: string): Hook; +import Hook from './Hook.js'; diff --git a/types/src/router/Router.d.ts b/types/src/router/Router.d.ts new file mode 100644 index 0000000..5be56aa --- /dev/null +++ b/types/src/router/Router.d.ts @@ -0,0 +1,11 @@ +export default class Router { + constructor(routes?: any[]); + view: import("../Hook.js").default; + currentPath: import("../Hook.js").default; + link: (to: any, text: any) => any; + routes: any[]; + getPath(to: any): string; + go(to: any): Promise; + run(path?: string): Promise; + init(): Promise; +} diff --git a/types/src/template/JDOMTemplateParser.d.ts b/types/src/template/JDOMTemplateParser.d.ts new file mode 100644 index 0000000..4672445 --- /dev/null +++ b/types/src/template/JDOMTemplateParser.d.ts @@ -0,0 +1,59 @@ +export default class JDOMTemplateParser { + static fromTemplate(parts: any, ...values: any[]): JDOMTemplateParser; + autoCloseTags: string[]; + index: number; + elements: any[]; + get(index?: number): any; + next(i?: number): void; + hasNext(): boolean; + parse(): ({ + attributes: {}; + from: number; + tag: string; + to: number; + type: string; + body: any[]; + } | { + type: any; + value: any; + })[]; + isWhiteSpace(c: any): boolean; + /** + * @return {{attributes: {}, from: number, tag: string, to: number, type: string, body: *[]}|null} + */ + readTag(): { + attributes: {}; + from: number; + tag: string; + to: number; + type: string; + body: any[]; + }; + isClosingTag(tag: any, ind?: number): boolean; + readAttributes(): (string | boolean)[][]; + readAttribute(): { + name: string; + value: boolean; + isLast: boolean; + from: number; + to: number; + }; + readUntil(callable: any): { + type: any; + value: any; + }[]; + shipComment(): boolean; + readContent(ignoreTags?: boolean, tag?: boolean): ({ + attributes: {}; + from: number; + tag: string; + to: number; + type: string; + body: any[]; + } | { + type: any; + value: any; + })[]; + skipEmpty(): void; + nextIs(string: any, startInd?: number): boolean; +} diff --git a/types/src/template/TemplateDOMAdapter.d.ts b/types/src/template/TemplateDOMAdapter.d.ts new file mode 100644 index 0000000..4db24bf --- /dev/null +++ b/types/src/template/TemplateDOMAdapter.d.ts @@ -0,0 +1,21 @@ +export default class TemplateDOMAdapter { + constructor(parsed: any); + ifQueryParts: any[]; + parsed: any; + createElement(conf: any): any; + bindIf(el: any, state: any, addChildren?: boolean, addedChildren?: boolean, setup?: () => void): any[]; + createText({ value }: { + value: any; + }): Text; + createFromValue({ value }: { + value: any; + }): any; + getEvaluatedElement(element: any): any[]; + removeElement(el: any): void; + replaceElement(from: any, to: any): any[]; + appendElement(to: any, el: any): void; + afterElement(to: any, el: any): void; + beforeElement(to: any, el: any): void; + create(inSVG?: boolean): any[]; + inSVG: boolean; +} diff --git a/types/src/template/TemplateJDOMAdapter.d.ts b/types/src/template/TemplateJDOMAdapter.d.ts new file mode 100644 index 0000000..1082c41 --- /dev/null +++ b/types/src/template/TemplateJDOMAdapter.d.ts @@ -0,0 +1,8 @@ +export default class TemplateJDOMAdapter extends TemplateDOMAdapter { + /** + * @return {JDOM} + */ + create(): JDOM; +} +import TemplateDOMAdapter from './TemplateDOMAdapter.js'; +import JDOM from '../JDOM.js'; diff --git a/types/src/template/TemplateStaticHTMLAdapter.d.ts b/types/src/template/TemplateStaticHTMLAdapter.d.ts new file mode 100644 index 0000000..a989159 --- /dev/null +++ b/types/src/template/TemplateStaticHTMLAdapter.d.ts @@ -0,0 +1,15 @@ +export default class TemplateStaticHTMLAdapter { + constructor(parsed: any); + parsed: any; + getValue(val: any): any; + createElement(conf: any): string; + escapeHtml(unsafe: any): any; + createText({ value }: { + value: any; + }): any; + createFromValue({ value }: { + value: any; + }): any; + getEvaluatedElement(element: any): any[]; + create(): string; +} diff --git a/types/src/template/helper/components.d.ts b/types/src/template/helper/components.d.ts new file mode 100644 index 0000000..8042080 --- /dev/null +++ b/types/src/template/helper/components.d.ts @@ -0,0 +1,11 @@ +export function ForEach({ value, content }: { + value: any; + content: any; +}): Hook; +export function Awaiting({ promise, awaiting, finished, error }: { + promise?: any; + awaiting?: any; + finished?: any; + error?: any; +}): Hook; +import Hook from '../../Hook.js'; diff --git a/types/src/template/template.d.ts b/types/src/template/template.d.ts new file mode 100644 index 0000000..1be94af --- /dev/null +++ b/types/src/template/template.d.ts @@ -0,0 +1,26 @@ +/** + * Usage: html`

Hello ${name}

` + * + * @param strings + * @param values + * @return {JDOM} + */ +export function html(strings: any, ...values: any[]): JDOM; +export function css(strings: any, ...values: any[]): string; +/** + * usage: + * ```js + * const name = state('example') + * const lastName = state('example') + * + * html` + *

${comp`Hello ${name}, your last name is ${lastName} `}

+ * ` + * ``` + * + * @param {string[]} strings + * @param {...any} values + * @return {Hook} + */ +export function comp(strings: string[], ...values: any[]): Hook; +import Hook from '../Hook.js';