@riotjs/dom-bindings - npm Package Compare versions

Comparing version 1.0.0 to 4.0.0-rc.1

dist/esm.dom-bindings.js

@@ -15,2 +15,3 @@ /**
 const TAG = 3;
+const SLOT = 4;
 
@@ -21,3 +22,4 @@ var bindingTypes = {
   SIMPLE,
-  TAG
+  TAG,
+  SLOT
 };
@@ -1099,3 +1101,70 @@
 
+const SlotBinding = Object.seal({
+  // dynamic binding properties
+  node: null,
+  name: null,
+  template: null,
+
+  // API methods
+  mount(scope) {
+    const templateData = scope.slots ? scope.slots.find(({id}) => id === this.name) : false;
+    const {parentNode} = this.node;
+
+    this.template = templateData && create$6(
+      templateData.html,
+      templateData.bindings
+    ).createDOM(parentNode);
+
+    if (this.template) {
+      this.template.mount(this.node, scope);
+      moveSlotInnerContent(this.node);
+    }
+
+    parentNode.removeChild(this.node);
+
+    return this
+  },
+  update(scope) {
+    if (this.template) {
+      this.template.update(scope);
+    }
+
+    return this
+  },
+  unmount(scope) {
+    if (this.template) {
+      this.template.unmount(scope);
+    }
+
+    return this
+  }
+});
+
 /**
+ * Move the inner content of the slots outside of them
+ * @param   {HTMLNode} slot - slot node
+ * @returns {undefined} it's a void function
+ */
+function moveSlotInnerContent(slot) {
+  if (slot.firstChild) {
+    slot.parentNode.insertBefore(slot.firstChild, slot);
+    moveSlotInnerContent(slot);
+  }
+}
+
+/**
+ * Create a single slot binding
+ * @param   {HTMLElement} node - slot node
+ * @param   {string} options.name - slot id
+ * @returns {Object} Slot binding object
+ */
+function createSlot(node, { name }) {
+  return {
+    ...SlotBinding,
+    node,
+    name
+  }
+}
+
+/**
  * Create a new tag object if it was registered before, otherwise fallback to the simple
@@ -1207,3 +1276,4 @@ * template chunk
   [EACH]: create,
-  [TAG]: create$4
+  [TAG]: create$4,
+  [SLOT]: createSlot
 };
@@ -1210,0 +1280,0 @@

dist/umd.dom-bindings.js

@@ -21,2 +21,3 @@ (function (global, factory) {
   const TAG = 3;
+  const SLOT = 4;
 
@@ -27,3 +28,4 @@ var bindingTypes = {
     SIMPLE,
-    TAG
+    TAG,
+    SLOT
   };
@@ -1105,3 +1107,70 @@
 
+  const SlotBinding = Object.seal({
+    // dynamic binding properties
+    node: null,
+    name: null,
+    template: null,
+
+    // API methods
+    mount(scope) {
+      const templateData = scope.slots ? scope.slots.find(({id}) => id === this.name) : false;
+      const {parentNode} = this.node;
+
+      this.template = templateData && create$6(
+        templateData.html,
+        templateData.bindings
+      ).createDOM(parentNode);
+
+      if (this.template) {
+        this.template.mount(this.node, scope);
+        moveSlotInnerContent(this.node);
+      }
+
+      parentNode.removeChild(this.node);
+
+      return this
+    },
+    update(scope) {
+      if (this.template) {
+        this.template.update(scope);
+      }
+
+      return this
+    },
+    unmount(scope) {
+      if (this.template) {
+        this.template.unmount(scope);
+      }
+
+      return this
+    }
+  });
+
   /**
+   * Move the inner content of the slots outside of them
+   * @param   {HTMLNode} slot - slot node
+   * @returns {undefined} it's a void function
+   */
+  function moveSlotInnerContent(slot) {
+    if (slot.firstChild) {
+      slot.parentNode.insertBefore(slot.firstChild, slot);
+      moveSlotInnerContent(slot);
+    }
+  }
+
+  /**
+   * Create a single slot binding
+   * @param   {HTMLElement} node - slot node
+   * @param   {string} options.name - slot id
+   * @returns {Object} Slot binding object
+   */
+  function createSlot(node, { name }) {
+    return {
+      ...SlotBinding,
+      node,
+      name
+    }
+  }
+
+  /**
    * Create a new tag object if it was registered before, otherwise fallback to the simple
@@ -1213,3 +1282,4 @@ * template chunk
     [EACH]: create,
-    [TAG]: create$4
+    [TAG]: create$4,
+    [SLOT]: createSlot
   };
@@ -1216,0 +1286,0 @@

package.json

 {
   "name": "@riotjs/dom-bindings",
-  "version": "1.0.0",
+  "version": "4.0.0-rc.1",
   "description": "Riot.js DOM bindings",
@@ -45,7 +45,7 @@ "main": "dist/umd.dom-bindings.js",
     "esm": "^3.2.22",
-    "jsdom": "14.0.0",
+    "jsdom": "15.0.0",
     "jsdom-global": "3.0.2",
     "mocha": "^6.1.4",
-    "nyc": "^14.0.0",
-    "rollup": "^1.10.0",
+    "nyc": "^14.1.1",
+    "rollup": "^1.11.3",
     "rollup-plugin-alias": "^1.5.1",
@@ -52,0 +52,0 @@ "rollup-plugin-node-resolve": "^4.2.3",

README.md

@@ -429,3 +429,3 @@ # dom-bindings
 
-The slot binding will be used to manage nested templates that will be update with the properties from the parent scope
+The slot binding will be used to manage nested slotted templates that will be update using parent scope
 
@@ -442,3 +442,32 @@ <details>
   - description: id to find the expression we need to apply to the node. This id must be one of the keys available in the `expressionTypes` object
+- `name`
+  - type: `String`
+  - description: the name to identify the binding html we need to mount in this node
 
+
+```js
+// slots array that will be mounted receiving the scope of the parent template
+const slots = [{
+  id: 'foo',
+  bindings: [{
+    selector: '[expr1]',
+    expressions: [{
+      type: expressionTypes.TEXT,
+      childNodeIndex: 0,
+      evaluate: scope => scope.text
+    }]
+  }],
+  html: '<p expr1><!----></p>'
+}]
+
+const el = template('<article><slot expr0/></article>', [{
+  type: bindingTypes.SLOT,
+  selector: '[expr0]',
+  name: 'foo'
+}]).mount(app, {
+  text: 'hello',
+  slots
+})
+```
+
 </details>
@@ -445,0 +474,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94837

increased by3.89%

Lines of code

2798

increased by4.48%

Number of lines in readme file

548

increased by5.59%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes