Added typedefs, better web-components support & more

interaapps · Mar 1, 2024 · 4af774e · 4af774e
1 parent af93d28
commit 4af774e
Show file tree

Hide file tree

Showing 10 changed files with 485 additions and 98 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/JDOM.js b/JDOM.js
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# JDOM `2.0.2`
+# JDOM `2.1.0`
 # A wrapper for query selector and html elements
 
 ## Install
@@ -25,8 +25,8 @@ el.css({
     background: '#000000'
 })
 
-el.each(el => {
-    console.log($(el).html())
+el.each($el => {
+    console.log(el.html())
 })
 
 el.text('Hello world')
@@ -84,11 +84,16 @@ $('#app').append(
 
 <script>
 // Create HTMLElement
-const MyComponent = $c(c => {
-    c.text('Hello World')
-    c.click(() => {
-        alert('Hey')
-    })
+const MyComponent = $c((c, self) => {
+    c.append(
+        $n('span')
+            .text('Hello World')
+            .click(() => {
+                alert('Hey')
+            })
+    )
+    
+    self.addStyle(`span { color: red }`)
 })
 
 // Register component

diff --git a/dist/jdom.js b/dist/jdom.js
diff --git a/example.html b/example.html
@@ -9,11 +9,11 @@
     <title>Document</title>
 </head>
 <body>
-    <!-- <h1 id="ney"></h1>
     <div id="app">
         <h1 id="hay"></h1>
-    </div> -->
-    <my-element my-attr="Hey" class="btn-primary"></my-element>
+    </div>
+
+    <my-app></my-app>
 </body>
 </html>
 
@@ -22,6 +22,10 @@ <h1 id="hay"></h1>
 
     const app = $('#app')
 
+    $('asd').animate({
+        'test': 423
+    })
+
 
     app.append(
         $n('button')
@@ -33,6 +37,10 @@ <h1 id="hay"></h1>
 
     app.animate({background: '#FF0022'}, 1000)
 
+    app.on('click', e => {
+
+    })
+
     app.animator([
         {
             css: {
@@ -54,12 +62,19 @@ <h1 id="hay"></h1>
         },
     ])
 
+    const HomePage = $c((el, self) => {
+        el.append($n('h1').text('Homepage'))
+
+    })
 
-    $r('my-element', $c(c => {
-        return c.append(c.attr('my-attr'))
-    }))
+    const MyApp = $c(el => {
+        el.append(new HomePage())
+        el.append($n('home-page'))
+    })
 
 
+    $r('home-page', HomePage)
+    $r('my-app', MyApp)
 
 </script>
 <style>

diff --git a/html-typedefs.js b/html-typedefs.js
diff --git a/index.js b/index.js
@@ -1,10 +1,21 @@
 import _JDOM from './JDOM.js'
 
-export const $ = el => new JDOM(el)
-export const $n = el => JDOM.new(el)
-export const $c = (tag, comp) => JDOM.component(tag, comp)
-export const $r = (tag, comp) => JDOM.registerComponent(tag, comp)
-export const $h = html => JDOM.fromHTML(html)
+
+/**
+ * @param {HTMLElement|JDOM|NodeList|string} el
+ * @param {Element|parent} parent
+ * @return {_JDOM}
+ */
+export const $ = (el, parent = undefined) => new JDOM(el, parent)
+
+/**
+ * @param {HTMLTag|string} tag
+ * @return {_JDOM}
+ */
+export const $n = _JDOM.new
+export const $c = _JDOM.component
+export const $r = _JDOM.registerComponent
+export const $h = _JDOM.fromHTML
 export const JDOM = _JDOM
 
 export default {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "A wrapper for query selector and html elements",
   "main": "JDOM.js",
   "scripts": {

diff --git a/uppm.json b/uppm.json
@@ -1,6 +1,6 @@
 {
     "name": "jdom",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "description": "Javascript DOM-Selector",
     "author": "InteraApps",
     "keywords": [

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
 require("babel-polyfill")
-module.exports = {
+module.exports = [{
     entry: ['babel-polyfill', './index.js'],
     output: {
         filename: 'jdom.js',
@@ -24,4 +24,4 @@ module.exports = {
         ]
     }
 
-};
+}];