add spread operator props

Author: fabioricali

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+## [5.0.0] - 2023-08-
+- **Breaking changes**
+  - Removed property `autoCreateChildren` use instead `suspendcontent` prop in markup
+- **Added** spread operator props like `<my-component ...${myObject}/>`
+- **Improved** performance
+
 ## [4.0.3] - 2022-09-22
 - **Fixed** component data attributes do not work
 

src/directives/helpers.js

@@ -29,6 +29,7 @@ function extractDirectivesFromProps(cmp) {
     return cmp._directiveProps;
 }
 function isDirective(aName) {
+    //console.log(aName)
     //return REGEX.IS_DIRECTIVE.test(name);
     return aName[0] === 'd' && (aName[1] === '-' || aName[1] === ':');
 }

src/vdom/h.js

@@ -51,6 +51,13 @@ function generateItemKey(values) {
 }
 function fillCompiled(obj, values, parent, _this) {
     let keys = Object.keys(obj);
+    if (obj.__spreadprops) {
+        for (let o in values[0]) {
+            obj[o] = values[0][o]
+        }
+
+        delete obj.__spreadprops;
+    }
     for (let i = 0; i < keys.length; i++) {
         //for (let k in obj) {
         if (obj[keys[i]] && typeof obj[keys[i]] === 'object') {

src/vdom/parser.js

@@ -1,6 +1,6 @@
 import dashToCamel from "../utils/dashToCamel.js";
 import { REGEX, ATTR, TAG, PROPS_ATTRIBUTES } from "../constants.js";
-import directive from "../directives/index.js";
+//import directive from "../directives/index.js";
 import { isDirective } from "../directives/helpers.js";
 import { tplCache } from "./stores.js";
 const regExcludeSpecial = new RegExp(`<\/?(${TAG.TEXT_NODE_PLACE}|${TAG.ITERATE_NODE_PLACE})?>$`);
@@ -83,6 +83,7 @@ function compile(tpl) {
     let props;
     //console.log(tpl)
     while (match = REGEX.HTML_MARKUP.exec(tpl)) {
+        //console.log(match)
         if (lastTextPos > -1) {
             if ( /*lastTextPos > -1 && */lastTextPos + match[0].length < REGEX.HTML_MARKUP.lastIndex) {
                 // remove new line space
@@ -135,6 +136,10 @@ function compile(tpl) {
         if (regExcludeSpecial.test(match[0])) {
             continue;
         }
+        //support to spread operator
+        if(match[3] && match[3].startsWith('...')) {
+            match[3] = match[3].replace('...','__spreadprops="') + '"';
+        }
         // transform slot to dz-slot
         if (match[2] === 'slot')
             match[2] = TAG.SLOT;
@@ -222,7 +227,7 @@ function serializeProps($node) {
     }
     return props;
 }
-function propsFixer(nName, aName, aValue, props, $node) {
+function propsFixer(nName, aName, aValue, props/*, $node*/) {
     if (typeof aValue === 'string' && REGEX.IS_STRING_QUOTED.test(aValue))
         aValue = aValue.replace(REGEX.REPLACE_QUOT, '&quot;');
     //let isDirective = REGEX.IS_DIRECTIVE.test(aName);

test/spread.js

@@ -0,0 +1,44 @@
+import Doz from "../src/index.js";
+//import be from "bejs";
+
+describe('spread', function () {
+
+    beforeEach(function () {
+        document.body.innerHTML = '';
+        Doz.collection.removeAll();
+    });
+
+    describe('create app', function () {
+
+        it('should be ok', function (done) {
+
+            document.body.innerHTML = `<div id="app"></div>`;
+
+            Doz.component('salutation-card', {
+                props: {
+                    show: false
+                },
+                template(h) {
+                    return h`
+                        <div title="hello">Hello</div>
+                    `
+                },
+                onMount() {
+                    if (this.props.a && this.props.b) {
+                        done()
+                    } else {
+                        throw new Error('props not found')
+                    }
+                }
+            });
+            new Doz({
+                root: '#app',
+                template(h){
+                    let someProps = {a: 1, b: 2};
+                    return h`
+                    <salutation-card ...${someProps}/>
+                `}
+            });
+        });
+    });
+});