Added for Function-Component in JDOM-Template

Author: JulianFun123

README.md

@@ -1,4 +1,4 @@
-# JDOM `3.0.1`
+# JDOM `3.0.2`
 ## A wrapper for query selector and html elements + templating & reactivity framework
 
 ## Install
@@ -9,12 +9,12 @@ npm install jdomjs
 
 ### Module
 ```js
-import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.0.1/index.js'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.0.2/index.js'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/jdom@3.0.1/dist/jdom.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jdom@3.0.2/dist/jdom.js"></script>
 ```
 
 ## DOM-Modfier Usage
@@ -164,6 +164,17 @@ html`
     name: ${name} <br>
     <input :bind=${name}>
 `
+
+// Function components
+function UserLayout({ exampleProp, $slot }) {
+    return html`<div class="user-profile">
+        ${$slot}
+    </div>`
+}
+
+html`<${UserLayout} exampleProp="test">
+    Profile
+</${UserLayout}>`
 ```
 
 # Reactivity (JDOM-Hooks)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A wrapper for query selector and html elements",
   "main": "index.js",
 

src/template/JDOMTemplateParser.js

@@ -87,21 +87,39 @@ export default class JDOMTemplateParser {
 
 
                 if (value === '>') {
-                    if (this.autoCloseTags.includes(tag.tag.toLowerCase())) {
+                    if (typeof tag.tag === 'string' && this.autoCloseTags.includes(tag.tag.toLowerCase())) {
                         this.next()
                         break
                     }
                     opened = true
                 }
             } else if (closingTag) {
-                const next = `</${tag.tag}`
+                const next = `</`
 
                 // TODO: Check why -1 is needed
                 if (this.nextIs(next, -1)) {
-                    this.next(next.length - 1)
-                    this.skipEmpty()
-                    // Skipping >
-                    this.next()
+                    let isEnding = false
+                    // typeof tag.tag === 'string'
+                    const afterClosingSlash = this.get(this.index + 1)
+                    if (afterClosingSlash.type === 'value') {
+                        if (typeof afterClosingSlash.value === 'function' && afterClosingSlash.value === tag.tag) {
+                            isEnding = true
+                            tag.attributes.slot = tag.body
+                            this.next()
+                        }
+                    } else {
+                        if (!this.nextIs(tag.tag))  {
+                            isEnding = true
+                            this.next(tag.tag.length)
+                        }
+                    }
+
+                    if (isEnding) {
+                        this.next(next.length - 1)
+                        this.skipEmpty()
+                        // Skipping >
+                        this.next()
+                    }
 
                     break
                 }

src/template/TemplateDOMAdapter.js

@@ -12,6 +12,11 @@ export default class TemplateDOMAdapter {
 
         if (typeof conf.tag === 'function') {
             const elAttribs = {}
+
+            if (conf.body.length > 0) {
+                elAttribs.$slot = (new TemplateDOMAdapter(conf.body)).create(svg)
+            }
+
             for (const [key, value] of conf.attributes) {
                 if (key === ':bind') {
                     elAttribs.value = value
@@ -24,6 +29,7 @@ export default class TemplateDOMAdapter {
 
             return this.createFromValue({value: newEl})
         }
+
         if (conf.tag.toLowerCase() === '!doctype')
             return null