Added JDOM-Template and JDOM-State

interaapps · Mar 2, 2024 · 422b540 · 422b540
1 parent b767853
commit 422b540
Show file tree

Hide file tree

Showing 14 changed files with 1,398 additions and 83 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /.idea
-/node_modules
+/node_modules
+playground
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
-# JDOM `2.1.0`
-# A wrapper for query selector and html elements
+# JDOM `3.0.0`
+## A wrapper for query selector and html elements + templating & reactivity framework
 
 ## Install
 ### NPM
@@ -9,15 +9,15 @@ npm install jdomjs
 
 ### Module
 ```js
-import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@2.0.2/index.js'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.0.0/index.js'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/jdom@2.0.2/dist/cajax.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jdom@3.0.0/dist/jdom.js"></script>
 ```
 
-## Usage
+## DOM-Modfier Usage
 ```js
 const el = $('#a-div')
 
@@ -39,13 +39,32 @@ el.classes('hello', 'world')
 
 if (el.hasClass('hello')) {}
 
+// Builder pattern
+el.text('Example').attr('type', 'text').classes('input-big')
 
 
 el.click(e => {
     console.log(e)
 })
 ```
 
+
+### Create Element
+```js
+$('#app').append(
+    // Creates a new div with 'Hey' text
+    $n('div').text('Hey')
+)
+```
+
+#### Create element from HTML
+```js
+const name = 'John'
+const el = $h(`<h1>Hello ${name}!</h1>`)
+console.log(el)
+// -> JDOM(HTMLElement)
+```
+
 ### Animator
 ```js
 // Single animation
@@ -70,33 +89,122 @@ $('#test').animator([
 ])
 ```
 
-### Create Element
-```js
-$('#app').append(
-    // Creates a new div with 'Hey' text
-    $n('div').text('Hey')
-)
-```
-
-### Web-Components
+# Web-Components
 ```html
 <my-component></my-component>
 
 <script>
 // Create HTMLElement
-const MyComponent = $c((c, self) => {
-    c.append(
+const MyComponent = $c((el, component) => {
+    el.append(
         $n('span')
             .text('Hello World')
             .click(() => {
                 alert('Hey')
             })
     )
-    
-    self.addStyle(`span { color: red }`)
-})
+
+    component.addStyle(`span { color: red }`)
+}/*, {shadowed: true} */)
 
 // Register component
 $r('my-component', MyComponent)
 </script>
+```
+
+# JDOM-Template
+```js
+import { html } from 'jdomjs'
+
+const name = "John"
+
+const myHTML = html`
+    <h1>Hello ${name}</h1>
+    <button @click=${() => alert('Clicked')}>Click me</button>
+`
+
+$(document).append(myHTML)
+
+// Reactivity
+
+import { state, html } from 'jdomjs'
+
+const count = state(0)
+
+const button = html`
+    <button @click=${() => count.value++}>The count is ${count}</button>
+`
+$(document).append(button)
+
+// if-condition
+html`
+    <div :if=${isEnabled} @click=${() => alert('Yo')}>
+        Now I'm shown :o
+    </div>
+    
+    <!-- Or (Might be interesting for components) -->
+    ${computed(() => isEnabled.value ? html`<div>Now shown!</div>` : null, [isEnabled])}
+`
+
+// for-each
+html`
+    ${computed(() => elements.value.map(user => html`
+        <div>
+            <span>${user.name}</span>
+        </div>
+    `), [elements])}
+
+    <button @click=${() => elements.value = [...elements.value, {name: 'Joe'}]}>Add Element</button>
+`
+
+// binding
+const name = state('John')
+
+html`
+    name: ${name} <br>
+    <input :bind=${name}>
+`
+```
+
+# Reactivity (JDOM-Hooks)
+```js
+// Create a state
+const name = state('John')
+
+// Set value
+name.value = 'Jessica'
+
+// Read value
+console.log(name.value)
+
+// Add to JDOM
+$('#user-name').text(name)
+
+// Add to jdom-template
+html`Hello ${name}`
+
+
+
+// computed
+const lowerCaseName = computed(() => {
+    return name.value.toLowerCase()
+}, [name]) // <- Dependencies
+
+// Helper template-string-tag:
+const greeting = comp`Hello ${name}!`
+
+
+// Watch
+watch([name], () => {
+    console.log(`Name changed to ${name}!`)
+})
+
+
+// Bindings in components
+$r('my-example-component', $c((el, component) => {
+    const value = bind(component)
+
+    return html`Your name is ${value}`
+}))
+// <my-example-component value="test" /> -> Your name is test 
 ```
diff --git a/dist/jdom.js b/dist/jdom.js
diff --git a/example.html b/example.html
@@ -9,23 +9,122 @@
     <title>Document</title>
 </head>
 <body>
-    <div id="app">
-        <h1 id="hay"></h1>
-    </div>
-
+    <div id="app"></div>
     <my-app></my-app>
+
 </body>
 </html>
 
 <script type="module">
-    import {$, $n, $c, $r, $h, JDOM} from './index.js'
+    import {$, $n, $c, $r, $h, $escHTML, JDOM, html} from './index.js'
+    import { state, computed, watch } from './src/template/hooks.js'
+
+
+    function showDialog() {
+        const dialog = html`
+            <div>
+                <button @click=${() => dialog.remove()}>X</button>
+                <h1>Hello World</h1>
+                <h2>Yee</h2>
+            </div>
+        `.appendTo(document)
+    }
+
+    const isEnabled = state(false)
+    const count = state(0)
+
+    const computedCount = computed(() => count.value * 3, [count])
+
+    watch([count], () => {
+        console.log(count.value)
+    })
+
+    const elements = state([
+        {
+            name: 'John'
+        },
+        {
+            name: 'Valery'
+        }
+    ])
+
+    function waitforme() {
+        return new Promise((res) => {
+            setTimeout(() => {
+                console.log('YAA')
+                res(html`<h3>HELLO WORLD!</h3>`)
+            }, 2000)
+        })
+    }
+
+    const name = state('')
+
+    const myHTML = html`
+        <!-- ${waitforme()} -->
+
+
+        <input :bind=${name} >
+
+        ${name}
+
+        ${computed(() => isEnabled.value ? 'Hallo' : 'Welt', [isEnabled])}
+
+        <br><br><br>
+
+        <button @click=${showDialog}>Show Dialog</button>
+        <br><br>
+        <br><br>
+
+        <!-- Button test test -->
+        <button
+                style=${{
+                    background: '#347766'
+                }}
+                class=${computed(() => ({
+                    'btn': true,
+                    'primary' : count.value > 5,
+                }), [count])}
+
+                this-is-val=${count}
+                @click=${() => count.value++}
+        >
+            The count is ${computedCount}
+        </button>
+
+
+        <br><br><br>
+
+        <!-- Toggle test -->
+        <button @click=${() => isEnabled.value = !isEnabled.value}>Show</button>
+
+        <div :if=${isEnabled} @click=${() => alert('Yo')} @:create=${console.log('Created')} shit>
+            Now I'm shown :o
+        </div>
+
+        <br><br><br>
+
+        <!-- Reactive for-each -->
+        ${computed(() => elements.value.map(user => html`
+            <div>
+                <span>${user.name}</span>
+            </div>
+        `), [elements])}
+
+        <button @click=${() => elements.value = [...elements.value, {name: 'Joe'}]}>Add Element</button>
+    `
+
+
+    console.log(myHTML)
+    $(myHTML).appendTo(document)
 
     const app = $('#app')
 
     $('asd').animate({
         'test': 423
     })
 
+    $(document).append($n('h2').text('Hallo Welt'))
+
 
     app.append(
         $n('button')
@@ -73,9 +172,14 @@ <h1 id="hay"></h1>
     })
 
 
+    $h(`<h1>
+        Hallo: ${$escHTML('Hello World')}
+        Welt: ${$escHTML('Welt')}
+    </h1>`)
+        .appendTo(document)
+
     $r('home-page', HomePage)
     $r('my-app', MyApp)
-
 </script>
 <style>
     a {

diff --git a/index.js b/index.js
@@ -1,4 +1,6 @@
-import _JDOM from './JDOM.js'
+import _JDOM from './src/JDOM.js'
+import { html as _html, comp as _comp } from './src/template/template.js'
+import * as hooks from './src/template/hooks.js'
 
 
 /**
@@ -16,13 +18,29 @@ export const $n = _JDOM.new
 export const $c = _JDOM.component
 export const $r = _JDOM.registerComponent
 export const $h = _JDOM.fromHTML
+export const $escHTML = _JDOM.escapeHTML
 export const JDOM = _JDOM
+export const html = _html
+export const comp = _comp
+
+export const state = hooks.state
+export const watch = hooks.watch
+export const computed = hooks.computed
+export const bind = hooks.bind
 
 export default {
     $,
     $n,
     $c,
     $r,
     $h,
-    JDOM
+    JDOM,
+
+    html,
+    comp,
+
+    watch,
+    state,
+    computed,
+    bind
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "A wrapper for query selector and html elements",
   "main": "index.js",