@riotjs/dom-bindings - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/esm.dom-bindings.js

@@ -514,11 +514,5 @@ import domdiff from 'domdiff';
 /**
- * Tags registry
- * It will contain the pair { `tag-name`: tag creation function }
- */
-var registry = new Map();
-
-/**
  * Create a new tag object if it was registered before, otherwise fallback to the simple
  * template chunk
- * @param   {string} name - tag name
+ * @param   {Function} component - component factory function
  * @param   {Array<Object>} slots - array containing the slots markup
@@ -528,6 +522,6 @@ * @param   {Array} attributes - dynamic attributes that will be received by the tag element
  */
-function getTag(name, slots = [], attributes = []) {
+function getTag(component, slots = [], attributes = []) {
   // if this tag was registered before we will return its implementation
-  if (registry.has(name)) {
-    return registry.get(name)({ slots, attributes })
+  if (component) {
+    return component({ slots, attributes })
   }
@@ -571,4 +565,4 @@
 
-function create$4(node, { name, slots, attributes }) {
-  const tag = getTag(name, slots, attributes);
+function create$4(node, { component, slots, attributes }) {
+  const tag = getTag(component, slots, attributes);
 
@@ -673,2 +667,4 @@ return {
 
+const SVG_RE = /svg/i;
+
 /**
@@ -683,3 +679,3 @@ * Inject the DOM tree into a target node
 
-  if (el.tagName === 'SVG') {
+  if (SVG_RE.test(el.tagName)) {
     moveChildren(clone, el);
@@ -846,2 +842,2 @@ } else {
 
-export { create$6 as template, registry, create$5 as createBinding, bindingTypes, expressionTypes };
+export { create$6 as template, create$5 as createBinding, bindingTypes, expressionTypes };

dist/umd.dom-bindings.js

@@ -1136,11 +1136,5 @@ (function (global, factory) {
   /**
-   * Tags registry
-   * It will contain the pair { `tag-name`: tag creation function }
-   */
-  var registry = new Map();
-
-  /**
    * Create a new tag object if it was registered before, otherwise fallback to the simple
    * template chunk
-   * @param   {string} name - tag name
+   * @param   {Function} component - component factory function
    * @param   {Array<Object>} slots - array containing the slots markup
@@ -1150,6 +1144,6 @@ * @param   {Array} attributes - dynamic attributes that will be received by the tag element
    */
-  function getTag(name, slots = [], attributes = []) {
+  function getTag(component, slots = [], attributes = []) {
     // if this tag was registered before we will return its implementation
-    if (registry.has(name)) {
-      return registry.get(name)({ slots, attributes })
+    if (component) {
+      return component({ slots, attributes })
     }
@@ -1193,4 +1187,4 @@
 
-  function create$4(node, { name, slots, attributes }) {
-    const tag = getTag(name, slots, attributes);
+  function create$4(node, { component, slots, attributes }) {
+    const tag = getTag(component, slots, attributes);
 
@@ -1295,2 +1289,4 @@ return {
 
+  const SVG_RE = /svg/i;
+
   /**
@@ -1305,3 +1301,3 @@ * Inject the DOM tree into a target node
 
-    if (el.tagName === 'SVG') {
+    if (SVG_RE.test(el.tagName)) {
       moveChildren(clone, el);
@@ -1469,3 +1465,2 @@ } else {
   exports.template = create$6;
-  exports.registry = registry;
   exports.createBinding = create$5;
@@ -1472,0 +1467,0 @@ exports.bindingTypes = bindingTypes;

package.json

 {
   "name": "@riotjs/dom-bindings",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Riot.js DOM bindings",
@@ -5,0 +5,0 @@ "main": "dist/umd.dom-bindings.js",

README.md

@@ -81,27 +81,2 @@ # dom-bindings
 
-
-### registry<Map>
-
-The registry Map can be used to store custom tags template implementations.
-
-<details>
-  <summary>Details</summary>
-If a custom tag template was previously registered, its template will be mounted via [tag binding](#tag-binding)
-
-```js
-// Store a custom tag implementation
-registry.set('my-tag', function({ slots, attributes }) {
-  const tmpl = template('hello world')
-  return tmpl
-})
-
-// The <my-tag> will be automatically mounted with the "hello world" text in it
-const tmpl = template('<section><my-tag class="a-custom-tag"/></section>', [{
-  selector: '.a-custom-tag',
-  type: bindingTypes.TAG,
-  name: 'my-tag',
-}])
-```
-</details>
-
 ### bindingTypes
@@ -143,3 +118,3 @@
 - [`if`](#if-binding) to handle conditional DOM structures
-- [`tag`](#tag-binding) to mount registered tag templates to any DOM node
+- [`tag`](#tag-binding) to mount a coustom tag template to any DOM node
 
@@ -378,3 +353,3 @@ Combining the bindings above we can map any javascript object to a DOM template.
 
-The `tag` bindings are needed to mount tags templates stored in the [`registry`](#registry) map
+The `tag` bindings are needed to mount custom components implementations
 
@@ -384,10 +359,10 @@ <details>
 
-`tag` bindings will enhance any child node with a template previously registered via `registry.set`. These templates are likely components that must be mounted as children in a parent component template
+`tag` bindings will enhance any child node with a custom component factory function. These bindings are likely riot components that must be mounted as children in a parent component template
 
-An tag binding might contain the following properties:
+A tag binding might contain the following properties:
 
-- `name`
-  - type: `String`
+- `component`
+  - type: `Function`
   - required: `true`
-  - description: id of the template to mount
+  - description: the factory function responsible for the tag creation
 - `slots`
@@ -408,5 +383,5 @@ - type: `Array<Slot>`
 
-// register a template tag
-registry.set('human-readable-time', function({ attributes }) {
+export default function HumanReadableTime({ attributes }) {
   const dateTimeAttr = attributes.find(({ name }) => name === 'datetime')
+
   return template('<!---->', [{
@@ -427,3 +402,3 @@ expressions: [{
   }])
-})
+}
 ```
@@ -433,5 +408,7 @@
 ```js
+import HumanReadableTime from './human-readable-time'
+
 const tagBinding = {
   type: bindingTypes.TAG,
-  name: 'human-readable-time',
+  component: HumanReadableTime,
   selector: 'time',
@@ -474,2 +451,14 @@ attributes: [{
 ```js
+const components = {
+  'my-tag': function({ slots, attributes }) {
+    return {
+      mount(el, scope) {
+        // do stuff on the mount
+      },
+      unmount() {
+        // do stuff on the unmount
+      }
+    }
+  }
+}
 const el = template('<ul><li expr0></li></ul>', [{
@@ -482,3 +471,3 @@ type: bindingTypes.EACH,
     type: bindingTypes.TAG,
-    name: 'my-tag'
+    component: components['my-tag']
   }])
@@ -500,3 +489,3 @@ }]).mount(target, { items: [1, 2] })
     type: bindingTypes.TAG,
-    name: 'my-tag'
+    component: components['my-tag']
   }])
@@ -503,0 +492,0 @@ }]).mount(target, { isVisible: true })

src/bindings/tag.js

 import { ATTRIBUTE } from '../expressions/expression-types'
 import curry from 'curri'
-import registry from '../registry'
 import template from '../template'
@@ -9,3 +8,3 @@
  * template chunk
- * @param   {string} name - tag name
+ * @param   {Function} component - component factory function
  * @param   {Array<Object>} slots - array containing the slots markup
@@ -15,6 +14,6 @@ * @param   {Array} attributes - dynamic attributes that will be received by the tag element
  */
-function getTag(name, slots = [], attributes = []) {
+function getTag(component, slots = [], attributes = []) {
   // if this tag was registered before we will return its implementation
-  if (registry.has(name)) {
-    return registry.get(name)({ slots, attributes })
+  if (component) {
+    return component({ slots, attributes })
   }
@@ -58,4 +57,4 @@
 
-export default function create(node, { name, slots, attributes }) {
-  const tag = getTag(name, slots, attributes)
+export default function create(node, { component, slots, attributes }) {
+  const tag = getTag(component, slots, attributes)
 
@@ -62,0 +61,0 @@ return {

src/index.js

@@ -61,15 +61,2 @@ /**
 /**
- * The registry will store all the custom tags templates and implementations
- * @type {Map}
- *
- * @example
- *
- * registry.set('my-tag', function({ slots, bindings, attributes }) {
- *   const tmpl = template('hello world')
- *   return tmpl
- * })
- */
-export { default as registry } from './registry'
-
-/**
  * Bind a new expression object to a single DOM node
@@ -76,0 +63,0 @@ * @param   {HTMLElement} root - DOM node where to bind the expression

src/util/inject-DOM.js

 import moveChildren from './move-children'
 
+const SVG_RE = /svg/i
+
 /**
@@ -12,3 +14,3 @@ * Inject the DOM tree into a target node
 
-  if (el.tagName === 'SVG') {
+  if (SVG_RE.test(el.tagName)) {
     moveChildren(clone, el)
@@ -15,0 +17,0 @@ } else {

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

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

Worsened metrics

Total package byte prevSize

98587

decreased by-0.98%

Number of package files

27

decreased by-3.57%

Lines of code

2811

decreased by-0.88%

Number of lines in readme file

489

decreased by-2.2%

No dependency changes