Added more typings & more

README.md

@@ -1,4 +1,4 @@
-# JDOM `3.1.5`
+# JDOM `3.1.6`
 ## 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].5'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/[email protected].6'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/[email protected].5/dist/jdom.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].6/dist/jdom.js"></script>
 ```
 
 ## DOM Manipulation

dist/jdom.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

examples/example.html

@@ -21,14 +21,23 @@
     import Hook from "../src/Hook.js";
     import { ForEach, Awaiting } from "../src/template/helper/components.js";
 
-    const a = state(['asc', 'asd'])
+    const a = state(0)
 
-    watch([a], () => console.log(a.value))
+    function Test(props) {
+        console.log(props)
+        return html`
+            <h3>Halloooo</h3>
+        `
+    }
 
     html`
-        <button @click=${()=> a.value = typeof a.value === 'string' ? ['a', 'b', 'c'] : 'Hallo'}>Toggle</button>
+        <button @click=${()=> a.value++}>Plus</button>
+
+        <h1 :if=${computed(() => a.value === 0, [a])}>Hallo</h1>
+        <${Test} :else-if=${computed(() => a.value === 3, [a])} />
+        <h1 :else>ESLE</h1>
+
 
-        ${a}
 
     `.appendTo(document)
 

package.json

@@ -1,16 +1,15 @@
 {
   "name": "jdomjs",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "description": "A wrapper for query selector and html elements",
   "main": "./index.js",
   "types": "./types/index.d.ts",
   "exports": {
     ".": "./index.js",
     "./dist.js": "./dist/jdom.js",
-    "./types/**/*": "./types/**/*",
-    "./types/*": "./types/*",
     "./**/*": "./src/**/*",
-    "./*": "./src/*"
+    "./*": "./src/*",
+    "./src/*": "./src/*"
   },
   "scripts": {
     "build": "npx tsc -p tsconfig.json && webpack --config webpack.config.js"

src/Hook.js

@@ -50,6 +50,9 @@ export default class Hook {
         });
     }
 
+    /**
+     * @param {T} val
+     */
     setValue(val) {
         const old = this._value
         this._value = val
@@ -100,11 +103,18 @@ export default class Hook {
         }
     }
 
+    /**
+     * @param {function(val: T)} listener
+     * @return {function(val: T)}
+     */
     addListener(listener) {
         this.listeners.push(listener)
         return listener
     }
 
+    /**
+     * @param {function(val: T)} listener
+     */
     removeListener(listener) {
         this.listeners = this.listeners.filter(l => l !== listener)
     }

src/JDOM.js

@@ -20,7 +20,7 @@ import {state} from './hooks.js'
 
 class JDOM {
     /**
-     * @param {Node|JDOM|NodeList|string} element
+     * @param {Node|JDOM|NodeList|Array|string} element
      * @param {Node} parent
      */
     constructor(element, parent = undefined) {
@@ -854,8 +854,8 @@ class JDOM {
     /**
      * Registers a webcomponent
      *
-     * @param {string|Object.<string, Node|HTMLElement|JDOMCustomHTMLElement>} tag
-     * @param {Node|HTMLElement|JDOMCustomHTMLElement|undefined} component
+     * @param {string|Object.<string, Node|HTMLElement|JDOMComponent>} tag
+     * @param {Node|HTMLElement|JDOMComponent|undefined} component
      */
     static registerComponent(tag, component = undefined) {
         if (typeof  tag === 'string') {

src/JDOMComponent.js

@@ -1,14 +1,29 @@
 import JDOM from './JDOM.js'
 import Hook from './Hook.js'
 
+/**
+ * @typedef JDOMComponentOptions
+ * @property {boolean} shadowed
+ * @property {string|null} styles
+ */
+
+/**
+ * @typedef AttributeOptions
+ * @property {String|null|undefined} name
+ */
+
+
 export default class JDOMComponent extends HTMLElement {
-    /**
-     * @type {ShadowRoot|Node}
-     */
+    /** @type {ShadowRoot|Node} */
     mainElement = null
 
+    /** @type {boolean} */
     #jdomConnectedAlready = false
 
+    /** @type JDOMComponentOptions */
+    options
+
+    /** @param options */
     constructor(options = {}) {
         super()
         this.options = options
@@ -93,6 +108,10 @@ export default class JDOMComponent extends HTMLElement {
         }
     }
 
+    /**
+     * @param key
+     * @param options
+     */
     addAttributeListener(key, options = {}) {
         if (!this.attributeListeners)
             this.attributeListeners = []

src/decorators.ts

@@ -1,10 +1,13 @@
 import { state as _state, computed as _computed, watch as _watch, bind as _bind } from './hooks.js'
 import Hook from "./Hook.js";
-import JDOMComponent from "./JDOMComponent.js";
+
+interface AttributeOptions {
+    name?: String;
+}
 
 export function State() {
     return function (target: any, key: string) {
-        /*const value = _state(target[key]?.value);
+        const value = _state(target[key]?.value);
 
         Object.defineProperty(target, key, {
             get() {
@@ -14,7 +17,7 @@ export function State() {
                 value.value = newValue
             },
             configurable: true
-        })*/
+        })
     }
 }
 
@@ -57,7 +60,7 @@ export function CustomElement(name: string) {
     }
 }
 
-export function Attribute(options = {}) {
+export function Attribute(options: AttributeOptions = {}) {
     return (target: any, key: string) => {
         target.addAttributeListener(key, options)
     }

src/hooks.js

@@ -1,12 +1,20 @@
 import Hook from './Hook.js'
-import JDOMComponent from './JDOMComponent.js'
-
 
+/**
+ * @template T
+ * @param {T} initialValue
+ * @return {Hook}
+ */
 export function state(initialValue) {
     return new Hook(initialValue)
 }
 
-
+/**
+ *
+ * @param {function()} callable
+ * @param {Hook[]} dependencies
+ * @return {Hook}
+ */
 export function computed(callable, dependencies = []) {
     const hook = new Hook(callable())
 
@@ -19,12 +27,22 @@ export function computed(callable, dependencies = []) {
     return hook
 }
 
+/**
+ * @param {Hook[]} hooks
+ * @param {function()} callable
+ */
 export function watch(hooks, callable) {
     for (let hook of hooks) {
         hook.addListener(callable)
     }
 }
 
+
+/**
+ * @param {JDOMComponent} component
+ * @param {string} attr
+ * @return {Hook}
+ */
 export function bind(component, attr = 'value') {
     const hook = new Hook(component[attr])
 

src/router/Router.js

@@ -1,10 +1,39 @@
-import { $, $c, $n, html, state } from '../../index.js'
-
+import { $n, html, state } from '../../index.js'
+
+/**
+ * @typedef Route
+ * @property {string} name
+ * @property {string} path
+ * @property {string} path
+ */
+
+/**
+ * @typedef CurrentRoute
+ * @property {string} path
+ * @property {Object} query
+ * @property {string} hash
+ * @property {Object.<String, String>} params
+ * @property {Route} route
+ */
 
 export default class Router {
+
+    /**
+     * @type {Hook<CurrentRoute>}
+     */
+    currentRoute
+
+    /**
+     * @type Route[]
+     */
+    routes = []
+
+    /**
+     * @param {Route[]} routes
+     */
     constructor(routes = []) {
         this.view = state(null)
-        this.currentPath = state(null)
+        this.currentRoute = state(null)
 
         this.link = (to, text) => $n('a').attr('href', to).text(text).click(e => {
             this.go(to)
@@ -14,19 +43,55 @@ export default class Router {
         this.routes = routes
     }
 
+    /**
+     * @param to
+     * @return {CurrentRoute|string}
+     */
     getPath(to) {
         if (typeof to === 'string')
             return to
+
+        const route = this.routes.find((n => n.name === to))
+        let path = route.path
+
+        if (to.params) {
+            for (const [key, value] of to.params) {
+                path = path.replace(`:${key}`, value)
+            }
+        }
+
+        if (to.query) {
+            if (typeof to.query === 'string') {
+                path += to.query.startsWith('?') ? to.query : `${to.query}`
+            } else {
+                path += '?' + Object.keys(to.query)
+                    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+                    .join('&')
+            }
+        }
+
+        if (to.hash && to.hash !== '#') {
+            path += to.hash.startsWith('#') ? to.hash : `#${to.hash}`
+        }
+
+        return path
     }
 
+    /**
+     * @param to
+     * @return {Promise<void>}
+     */
     async go(to) {
         const path = this.getPath(to)
         window.history.pushState(path, path, path)
-        await this.run(to)
+        await this.run(path)
     }
 
-    async run(path = window.location.pathname) {
-        const currentPath = window.location.pathname
+    /**
+     * @param {string} currentPath
+     * @return {Promise<void>}
+     */
+    async run(currentPath = window.location.pathname) {
         for (const route of this.routes) {
             const {name, path, view} = route
 
@@ -58,9 +123,9 @@ export default class Router {
             }
 
             if (isCorrect) {
-                const query = new URLSearchParams(window.location.search)
-                this.currentPath.value = {
+                this.currentRoute.value = {
                     path: currentPath,
+                    name,
                     route,
                     query: new Proxy(new URLSearchParams(window.location.search), {
                         get: (searchParams, prop) => searchParams.get(prop),
@@ -69,8 +134,7 @@ export default class Router {
                     params
                 }
 
-                this.view.value = html`${typeof view === 'function' && !(view instanceof Node) ? await view(this.currentPath) : view}`.nodes()
-
+                this.view.value = html`${typeof view === 'function' && !(view instanceof Node) ? await view(this.currentRoute) : view}`.nodes()
                 break
             }
         }