@tko/binding.component - npm Package Compare versions

Comparing version 4.0.0-beta1.3 to 4.0.0

dist/componentBinding.js

@@ -1,23 +0,11 @@
-// @tko/binding.component 🥊 4.0.0-beta1.3 ESM
-import {
-  virtualElements,
-  makeArray,
-  cloneNodes
-} from "@tko/utils";
-import {
-  unwrap
-} from "@tko/observable";
-import {
-  DescendantBindingHandler
-} from "@tko/bind";
-import {
-  JsxObserver,
-  maybeJsx
-} from "@tko/utils.jsx";
-import {
-  NativeProvider
-} from "@tko/provider.native";
+// @tko/binding.component 🥊 4.0.0 ESM
+"use strict";
+import { virtualElements, makeArray, cloneNodes } from "@tko/utils";
+import { unwrap } from "@tko/observable";
+import { DescendantBindingHandler } from "@tko/bind";
+import { JsxObserver, maybeJsx } from "@tko/utils.jsx";
+import { NativeProvider } from "@tko/provider.native";
 import { LifeCycle } from "@tko/lifecycle";
 import registry from "@tko/utils.component";
-var componentLoadingOperationUniqueId = 0;
+let componentLoadingOperationUniqueId = 0;
 export default class ComponentBinding extends DescendantBindingHandler {
@@ -43,10 +31,22 @@ constructor(params) {
     const componentViewModelFactory = componentDefinition.createViewModel;
-    return componentViewModelFactory ? componentViewModelFactory.call(componentDefinition, componentParams, { element, templateNodes: originalChildNodes }) : componentParams;
+    return componentViewModelFactory ? componentViewModelFactory.call(componentDefinition, componentParams, {
+      element,
+      templateNodes: originalChildNodes
+    }) : componentParams;
   }
+  /**
+   * Return the $componentTemplateSlotNodes for the given template
+   * @param {HTMLElement|jsx} template
+   */
   makeTemplateSlotNodes(originalChildNodes) {
     return Object.assign({}, ...this.genSlotsByName(originalChildNodes));
   }
+  /**
+   * Iterate over the templateNodes, yielding each '<element slot=name>'
+   * as an object * of {name: element}.
+   * @param {HTMLElement[]} templateNodes
+   */
   *genSlotsByName(templateNodes) {
     for (const node of templateNodes) {
-      if (node.nodeType !== 1) {
+      if (node.nodeType !== Node.ELEMENT_NODE) {
         continue;
@@ -98,3 +98,8 @@ }
     }
-    const componentViewModel = this.createViewModel(componentDefinition, element, this.originalChildNodes, componentParams);
+    const componentViewModel = this.createViewModel(
+      componentDefinition,
+      element,
+      this.originalChildNodes,
+      componentParams
+    );
     this.childBindingContext = this.makeChildBindingContext(componentViewModel);
@@ -101,0 +106,0 @@ const viewTemplate = componentViewModel && componentViewModel.template;

dist/componentBinding.js.map

 {
   "version": 3,
   "sources": ["../src/componentBinding.ts"],
-  "sourcesContent": ["//\n// Binding Handler for Components\n//\n\nimport {\n  virtualElements, makeArray, cloneNodes\n} from '@tko/utils'\n\nimport {\n  unwrap, isObservable\n} from '@tko/observable'\n\nimport {\n  DescendantBindingHandler, applyBindingsToDescendants\n} from '@tko/bind'\n\nimport {\n  JsxObserver, maybeJsx\n} from '@tko/utils.jsx'\n\nimport {\n  NativeProvider\n} from '@tko/provider.native'\n\nimport {LifeCycle} from '@tko/lifecycle'\n\nimport registry from '@tko/utils.component'\n\nvar componentLoadingOperationUniqueId = 0\n\nexport default class ComponentBinding extends DescendantBindingHandler {\n  constructor (params) {\n    super(params)\n    this.originalChildNodes = makeArray(\n      virtualElements.childNodes(this.$element)\n    )\n    this.computed('computeApplyComponent')\n  }\n\n  cloneTemplateIntoElement (componentName, template, element) {\n    if (!template) {\n      throw new Error('Component \\'' + componentName + '\\' has no template')\n    }\n\n    if (maybeJsx(template)) {\n      virtualElements.emptyNode(element)\n      this.addDisposable(new JsxObserver(template, element, null, undefined, true))\n\n    } else {\n      const clonedNodesArray = cloneNodes(template)\n      virtualElements.setDomNodeChildren(element, clonedNodesArray)\n    }\n  }\n\n  createViewModel (componentDefinition, element, originalChildNodes, componentParams) {\n    const componentViewModelFactory = componentDefinition.createViewModel\n    return componentViewModelFactory\n      ? componentViewModelFactory.call(componentDefinition, componentParams, { element, templateNodes: originalChildNodes })\n      : componentParams // Template-only component\n  }\n\n  /**\n   * Return the $componentTemplateSlotNodes for the given template\n   * @param {HTMLElement|jsx} template\n   */\n  makeTemplateSlotNodes (originalChildNodes) {\n    return Object.assign({}, ...this.genSlotsByName(originalChildNodes))\n  }\n\n  /**\n   * Iterate over the templateNodes, yielding each '<element slot=name>'\n   * as an object * of {name: element}.\n   * @param {HTMLElement} templateNodes\n   */\n  * genSlotsByName (templateNodes) {\n    for (const node of templateNodes) {\n      if (node.nodeType !== 1) { continue }\n      const slotName = node.getAttribute('slot')\n      if (!slotName) { continue }\n      yield {[slotName]: node}\n    }\n  }\n\n  computeApplyComponent () {\n    const value = unwrap(this.value)\n    let componentName\n    let componentParams\n\n    if (typeof value === 'string') {\n      componentName = value\n    } else {\n      componentName = unwrap(value.name)\n      componentParams = NativeProvider.getNodeValues(this.$element) ||\n        unwrap(value.params)\n    }\n\n    this.latestComponentName = componentName\n\n    if (!componentName) {\n      throw new Error('No component name specified')\n    }\n\n    this.loadingOperationId = this.currentLoadingOperationId = ++componentLoadingOperationUniqueId\n    registry.get(componentName, (defn) => this.applyComponentDefinition(componentName, componentParams, defn))\n  }\n\n  makeChildBindingContext ($component) {\n    const ctxExtender = (ctx) => Object.assign(ctx, {\n      $component,\n      $componentTemplateNodes: this.originalChildNodes,\n      $componentTemplateSlotNodes: this.makeTemplateSlotNodes(\n        this.originalChildNodes)\n    })\n\n    return this.$context.createChildContext($component, undefined, ctxExtender)\n  }\n\n  applyComponentDefinition (componentName, componentParams, componentDefinition) {\n    // If this is not the current load operation for this element, ignore it.\n    if (this.currentLoadingOperationId !== this.loadingOperationId ||\n        this.latestComponentName !== componentName) { return }\n\n    // Clean up previous state\n    this.cleanUpState()\n\n    const element = this.$element\n\n    // Instantiate and bind new component. Implicitly this cleans any old DOM nodes.\n    if (!componentDefinition) {\n      throw new Error('Unknown component \\'' + componentName + '\\'')\n    }\n\n    if (componentDefinition.template) {\n      this.cloneTemplateIntoElement(componentName, componentDefinition.template, element)\n    }\n\n    const componentViewModel = this.createViewModel(componentDefinition, element, this.originalChildNodes, componentParams)\n\n    this.childBindingContext = this.makeChildBindingContext(componentViewModel)\n\n    const viewTemplate = componentViewModel && componentViewModel.template\n\n    if (!viewTemplate && !componentDefinition.template) {\n      throw new Error('Component \\'' + componentName + '\\' has no template')\n    }\n\n    if (!componentDefinition.template) {\n      this.cloneTemplateIntoElement(componentName, viewTemplate, element)\n    }\n\n    if (componentViewModel instanceof LifeCycle) {\n      componentViewModel.anchorTo(this.$element)\n    }\n\n    this.currentViewModel = componentViewModel\n\n    const onBinding = this.onBindingComplete.bind(this, componentViewModel)\n    this.applyBindingsToDescendants(this.childBindingContext, onBinding)\n  }\n\n  onBindingComplete (componentViewModel, bindingResult) {\n    if (componentViewModel && componentViewModel.koDescendantsComplete) {\n      componentViewModel.koDescendantsComplete(this.$element)\n    }\n    this.completeBinding(bindingResult)\n  }\n\n  cleanUpState () {\n    const currentView = this.currentViewModel\n    const currentViewDispose = currentView && currentView.dispose\n    if (typeof currentViewDispose === 'function') {\n      currentViewDispose.call(currentView)\n    }\n    this.currentViewModel = null\n    // Any in-flight loading operation is no longer relevant, so make sure we ignore its completion\n    this.currentLoadingOperationId = null\n  }\n\n  dispose () {\n    this.cleanUpState()\n    super.dispose()\n  }\n\n  get controlsDescendants () { return true }\n  static get allowVirtualElements () { return true }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["//\n// Binding Handler for Components\n//\n\nimport { virtualElements, makeArray, cloneNodes } from '@tko/utils'\n\nimport { unwrap } from '@tko/observable'\n\nimport { DescendantBindingHandler } from '@tko/bind'\n\nimport { JsxObserver, maybeJsx } from '@tko/utils.jsx'\n\nimport { NativeProvider } from '@tko/provider.native'\n\nimport { LifeCycle } from '@tko/lifecycle'\n\nimport registry from '@tko/utils.component'\n\nimport type { BindingContext } from '@tko/bind'\n\nlet componentLoadingOperationUniqueId = 0\n\nexport default class ComponentBinding extends DescendantBindingHandler {\n  childBindingContext: BindingContext\n  currentLoadingOperationId: number | null\n  currentViewModel: any\n  latestComponentName: string\n  loadingOperationId: number\n  originalChildNodes: Node[]\n  constructor(params: any) {\n    super(params)\n    this.originalChildNodes = makeArray(virtualElements.childNodes(this.$element as Node))\n    this.computed('computeApplyComponent')\n  }\n\n  cloneTemplateIntoElement(componentName: string, template: any, element: Node) {\n    if (!template) {\n      throw new Error(\"Component '\" + componentName + \"' has no template\")\n    }\n\n    if (maybeJsx(template)) {\n      virtualElements.emptyNode(element)\n      this.addDisposable(new JsxObserver(template, element, null, undefined, true))\n    } else {\n      const clonedNodesArray = cloneNodes(template)\n      virtualElements.setDomNodeChildren(element, clonedNodesArray)\n    }\n  }\n\n  createViewModel(componentDefinition: any, element: Node, originalChildNodes: Node[], componentParams: any) {\n    const componentViewModelFactory = componentDefinition.createViewModel\n    return componentViewModelFactory\n      ? componentViewModelFactory.call(componentDefinition, componentParams, {\n          element,\n          templateNodes: originalChildNodes\n        })\n      : componentParams // Template-only component\n  }\n\n  /**\n   * Return the $componentTemplateSlotNodes for the given template\n   * @param {HTMLElement|jsx} template\n   */\n  makeTemplateSlotNodes(originalChildNodes: HTMLElement[]) {\n    return Object.assign({}, ...this.genSlotsByName(originalChildNodes))\n  }\n\n  /**\n   * Iterate over the templateNodes, yielding each '<element slot=name>'\n   * as an object * of {name: element}.\n   * @param {HTMLElement[]} templateNodes\n   */\n  *genSlotsByName(templateNodes: HTMLElement[]): Generator<{ [key: string]: HTMLElement }, void, unknown> {\n    for (const node of templateNodes) {\n      if (node.nodeType !== Node.ELEMENT_NODE) {\n        continue\n      }\n      const slotName = node.getAttribute('slot')\n      if (!slotName) {\n        continue\n      }\n      yield { [slotName]: node }\n    }\n  }\n\n  computeApplyComponent() {\n    const value = unwrap(this.value)\n    let componentName: string\n    let componentParams: any\n\n    if (typeof value === 'string') {\n      componentName = value\n    } else {\n      componentName = unwrap(value.name)\n      componentParams = NativeProvider.getNodeValues(this.$element) || unwrap(value.params)\n    }\n\n    this.latestComponentName = componentName\n\n    if (!componentName) {\n      throw new Error('No component name specified')\n    }\n\n    this.loadingOperationId = this.currentLoadingOperationId = ++componentLoadingOperationUniqueId\n    registry.get(componentName, (defn: any) => this.applyComponentDefinition(componentName, componentParams, defn))\n  }\n\n  makeChildBindingContext($component: any): any {\n    const ctxExtender = (ctx: any) =>\n      Object.assign(ctx, {\n        $component,\n        $componentTemplateNodes: this.originalChildNodes,\n        $componentTemplateSlotNodes: this.makeTemplateSlotNodes(this.originalChildNodes as HTMLElement[])\n      })\n\n    return this.$context.createChildContext($component, undefined, ctxExtender)\n  }\n\n  applyComponentDefinition(componentName: string, componentParams: any, componentDefinition: any) {\n    // If this is not the current load operation for this element, ignore it.\n    if (this.currentLoadingOperationId !== this.loadingOperationId || this.latestComponentName !== componentName) {\n      return\n    }\n\n    // Clean up previous state\n    this.cleanUpState()\n\n    const element = this.$element\n\n    // Instantiate and bind new component. Implicitly this cleans any old DOM nodes.\n    if (!componentDefinition) {\n      throw new Error(\"Unknown component '\" + componentName + \"'\")\n    }\n\n    if (componentDefinition.template) {\n      this.cloneTemplateIntoElement(componentName, componentDefinition.template, element)\n    }\n\n    const componentViewModel = this.createViewModel(\n      componentDefinition,\n      element,\n      this.originalChildNodes,\n      componentParams\n    )\n\n    this.childBindingContext = this.makeChildBindingContext(componentViewModel)\n\n    const viewTemplate = componentViewModel && componentViewModel.template\n\n    if (!viewTemplate && !componentDefinition.template) {\n      throw new Error(\"Component '\" + componentName + \"' has no template\")\n    }\n\n    if (!componentDefinition.template) {\n      this.cloneTemplateIntoElement(componentName, viewTemplate, element)\n    }\n\n    if (componentViewModel instanceof LifeCycle) {\n      componentViewModel.anchorTo(this.$element)\n    }\n\n    this.currentViewModel = componentViewModel\n\n    const onBinding = this.onBindingComplete.bind(this, componentViewModel)\n    this.applyBindingsToDescendants(this.childBindingContext, onBinding)\n  }\n\n  onBindingComplete(componentViewModel, bindingResult) {\n    if (componentViewModel && componentViewModel.koDescendantsComplete) {\n      componentViewModel.koDescendantsComplete(this.$element)\n    }\n    this.completeBinding(bindingResult)\n  }\n\n  cleanUpState() {\n    const currentView = this.currentViewModel\n    const currentViewDispose = currentView && currentView.dispose\n    if (typeof currentViewDispose === 'function') {\n      currentViewDispose.call(currentView)\n    }\n    this.currentViewModel = null\n    // Any in-flight loading operation is no longer relevant, so make sure we ignore its completion\n    this.currentLoadingOperationId = null\n  }\n\n  override dispose() {\n    this.cleanUpState()\n    super.dispose()\n  }\n\n  override get controlsDescendants() {\n    return true\n  }\n  static override get allowVirtualElements() {\n    return true\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

dist/index.js

@@ -1,4 +0,5 @@
-// @tko/binding.component 🥊 4.0.0-beta1.3 ESM
+// @tko/binding.component 🥊 4.0.0 ESM
+"use strict";
 import component from "./componentBinding";
 import slot from "./slotBinding";
-export var bindings = { component, slot };
+export const bindings = { component, slot };

dist/index.js.map

 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["\nimport component from './componentBinding'\nimport slot from './slotBinding'\nexport var bindings = { component, slot }\n"],
-  "mappings": ";AACA;AACA;AACO,WAAI,WAAW,EAAE,WAAW,KAAK;",
+  "sourcesContent": ["import component from './componentBinding'\nimport slot from './slotBinding'\nexport const bindings = { component, slot }\n"],
+  "mappings": ";;AAAA,OAAO,eAAe;AACtB,OAAO,UAAU;AACV,aAAM,WAAW,EAAE,WAAW,KAAK;",
   "names": []
 }

dist/index.mjs

@@ -1,4 +0,5 @@
-// @tko/binding.component 🥊 4.0.0-beta1.3 MJS
+// @tko/binding.component 🥊 4.0.0 MJS
+"use strict";
 import component from "./componentBinding";
 import slot from "./slotBinding";
-export var bindings = { component, slot };
+export const bindings = { component, slot };

dist/index.mjs.map

 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["\nimport component from './componentBinding'\nimport slot from './slotBinding'\nexport var bindings = { component, slot }\n"],
-  "mappings": ";AACA;AACA;AACO,WAAI,WAAW,EAAE,WAAW,KAAK;",
+  "sourcesContent": ["import component from './componentBinding'\nimport slot from './slotBinding'\nexport const bindings = { component, slot }\n"],
+  "mappings": ";;AAAA,OAAO,eAAe;AACtB,OAAO,UAAU;AACV,aAAM,WAAW,EAAE,WAAW,KAAK;",
   "names": []
 }

dist/slotBinding.js

@@ -1,25 +0,20 @@
-// @tko/binding.component 🥊 4.0.0-beta1.3 ESM
-import {
-  virtualElements
-} from "@tko/utils";
-import {
-  JsxObserver,
-  getOriginalJsxForNode
-} from "@tko/utils.jsx";
-import {
-  DescendantBindingHandler,
-  contextFor
-} from "@tko/bind";
+// @tko/binding.component 🥊 4.0.0 ESM
+"use strict";
+import { virtualElements } from "@tko/utils";
+import { JsxObserver, getOriginalJsxForNode } from "@tko/utils.jsx";
+import { DescendantBindingHandler, contextFor } from "@tko/bind";
 export default class SlotBinding extends DescendantBindingHandler {
-  constructor(...params) {
-    super(...params);
+  constructor(params) {
+    super(params);
     const slotNode = this.getSlot(this.value);
     const $slotContext = contextFor(slotNode);
-    const childContext = this.$context.extend({
-      $slotContext,
-      $slotData: $slotContext && $slotContext.$data
-    });
+    const childContext = this.$context.extend({ $slotContext, $slotData: $slotContext && $slotContext.$data });
     this.replaceSlotWithNode(this.$element, slotNode);
     this.applyBindingsToDescendants(childContext);
   }
+  /**
+   *
+   * @param {HTMLElement} nodeToReplace
+   * @param {HTMLElement} slotValue
+   */
   replaceSlotWithNode(nodeInComponentTemplate, slotNode) {
@@ -26,0 +21,0 @@ const nodes = this.cloneNodeFromOriginal(slotNode);

dist/slotBinding.js.map

 {
   "version": 3,
   "sources": ["../src/slotBinding.ts"],
-  "sourcesContent": ["/**\n * Slots work as follows (you'll note a similarity to vue).\n *\n * Component template definitions have <slot name='abc'> tags.\n *\n *    <template id='custom-component-template'>\n *      <slot name='abc'>\n *\n * Component use these slots with e.g.\n *\n *    <custom-component>\n *       <template slot='abc'>\n *\n * When the component template is rendered, the `slot` binding will map\n * every binding to its respective slot.\n */\nimport {\n  virtualElements\n} from '@tko/utils'\n\nimport {\n  JsxObserver, getOriginalJsxForNode\n} from '@tko/utils.jsx'\n\nimport {\n  DescendantBindingHandler, contextFor\n} from '@tko/bind'\n\n/**\n * SlotBinding replaces a slot with\n */\nexport default class SlotBinding extends DescendantBindingHandler {\n  constructor (...params) {\n    super(...params)\n    const slotNode = this.getSlot(this.value)\n    const $slotContext = contextFor(slotNode)\n\n    const childContext = this.$context.extend({\n      $slotContext,\n      $slotData: $slotContext && $slotContext.$data\n    })\n\n    this.replaceSlotWithNode(this.$element, slotNode)\n\n    this.applyBindingsToDescendants(childContext)\n  }\n\n  /**\n   *\n   * @param {HTMLElement} nodeToReplace\n   * @param {HTMLElement}} slotValue\n   */\n  replaceSlotWithNode (nodeInComponentTemplate, slotNode) {\n    const nodes = this.cloneNodeFromOriginal(slotNode)\n    virtualElements.emptyNode(nodeInComponentTemplate)\n    this.addDisposable(new JsxObserver(nodes, nodeInComponentTemplate, undefined, undefined, true))\n  }\n\n  cloneNodeFromOriginal (node) {\n    if (!node) { return [] }\n    const jsx = getOriginalJsxForNode(node)\n    if (jsx) { return jsx.children }\n\n    if ('content' in node) {\n      const clone = document.importNode(node.content, true)\n      return [...clone.childNodes]\n    }\n\n    const nodeArray = Array.isArray(node) ? node : [node]\n    return nodeArray.map(n => n.cloneNode(true))\n  }\n\n\n  getSlot (slotName) {\n    const {$componentTemplateSlotNodes} = this.$context\n\n    if (!slotName) {\n      return $componentTemplateSlotNodes[''] ||\n        [...this.$context.$componentTemplateNodes]\n          .filter(n => !n.getAttribute || !n.getAttribute('slot'))\n    }\n\n    return $componentTemplateSlotNodes[slotName]\n  }\n\n  static get allowVirtualElements () { return true }\n}\n"],
-  "mappings": ";AAgBA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAOA,qBAAqB,oBAAoB,yBAAyB;AAAA,EAChE,eAAgB,QAAQ;AACtB,UAAM,GAAG,MAAM;AACf,UAAM,WAAW,KAAK,QAAQ,KAAK,KAAK;AACxC,UAAM,eAAe,WAAW,QAAQ;AAExC,UAAM,eAAe,KAAK,SAAS,OAAO;AAAA,MACxC;AAAA,MACA,WAAW,gBAAgB,aAAa;AAAA,IAC1C,CAAC;AAED,SAAK,oBAAoB,KAAK,UAAU,QAAQ;AAEhD,SAAK,2BAA2B,YAAY;AAAA,EAC9C;AAAA,EAOA,oBAAqB,yBAAyB,UAAU;AACtD,UAAM,QAAQ,KAAK,sBAAsB,QAAQ;AACjD,oBAAgB,UAAU,uBAAuB;AACjD,SAAK,cAAc,IAAI,YAAY,OAAO,yBAAyB,QAAW,QAAW,IAAI,CAAC;AAAA,EAChG;AAAA,EAEA,sBAAuB,MAAM;AAC3B,QAAI,CAAC,MAAM;AAAE,aAAO,CAAC;AAAA,IAAE;AACvB,UAAM,MAAM,sBAAsB,IAAI;AACtC,QAAI,KAAK;AAAE,aAAO,IAAI;AAAA,IAAS;AAE/B,QAAI,aAAa,MAAM;AACrB,YAAM,QAAQ,SAAS,WAAW,KAAK,SAAS,IAAI;AACpD,aAAO,CAAC,GAAG,MAAM,UAAU;AAAA,IAC7B;AAEA,UAAM,YAAY,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AACpD,WAAO,UAAU,IAAI,OAAK,EAAE,UAAU,IAAI,CAAC;AAAA,EAC7C;AAAA,EAGA,QAAS,UAAU;AACjB,UAAM,EAAC,gCAA+B,KAAK;AAE3C,QAAI,CAAC,UAAU;AACb,aAAO,4BAA4B,OACjC,CAAC,GAAG,KAAK,SAAS,uBAAuB,EACtC,OAAO,OAAK,CAAC,EAAE,gBAAgB,CAAC,EAAE,aAAa,MAAM,CAAC;AAAA,IAC7D;AAEA,WAAO,4BAA4B;AAAA,EACrC;AAAA,aAEW,uBAAwB;AAAE,WAAO;AAAA,EAAK;AACnD;",
+  "sourcesContent": ["/**\n * Slots work as follows (you'll note a similarity to vue).\n *\n * Component template definitions have <slot name='abc'> tags.\n *\n *    <template id='custom-component-template'>\n *      <slot name='abc'>\n *\n * Component use these slots with e.g.\n *\n *    <custom-component>\n *       <template slot='abc'>\n *\n * When the component template is rendered, the `slot` binding will map\n * every binding to its respective slot.\n */\nimport { virtualElements } from '@tko/utils'\n\nimport { JsxObserver, getOriginalJsxForNode } from '@tko/utils.jsx'\n\nimport { DescendantBindingHandler, contextFor } from '@tko/bind'\n\n/**\n * SlotBinding replaces a slot with\n */\nexport default class SlotBinding extends DescendantBindingHandler {\n  constructor(params: any) {\n    super(params)\n    const slotNode = this.getSlot(this.value)\n    const $slotContext = contextFor(slotNode)\n\n    const childContext = this.$context.extend({ $slotContext, $slotData: $slotContext && $slotContext.$data })\n\n    this.replaceSlotWithNode(this.$element, slotNode)\n\n    this.applyBindingsToDescendants(childContext)\n  }\n\n  /**\n   *\n   * @param {HTMLElement} nodeToReplace\n   * @param {HTMLElement} slotValue\n   */\n  replaceSlotWithNode(nodeInComponentTemplate: HTMLElement, slotNode: Node): void {\n    const nodes = this.cloneNodeFromOriginal(slotNode)\n    virtualElements.emptyNode(nodeInComponentTemplate)\n    this.addDisposable(new JsxObserver(nodes, nodeInComponentTemplate, undefined, undefined, true))\n  }\n\n  cloneNodeFromOriginal(node: Node): any[] {\n    if (!node) {\n      return []\n    }\n    const jsx = getOriginalJsxForNode(node)\n    if (jsx) {\n      return jsx.children\n    }\n\n    if ('content' in node) {\n      const clone = document.importNode(node.content as Node, true)\n      return [...clone.childNodes]\n    }\n\n    const nodeArray = Array.isArray(node) ? node : [node]\n    return nodeArray.map(n => n.cloneNode(true))\n  }\n\n  getSlot(slotName: string): Node {\n    const { $componentTemplateSlotNodes }: any = this.$context\n\n    if (!slotName) {\n      return (\n        $componentTemplateSlotNodes['']\n        || [...(this.$context as any).$componentTemplateNodes].filter(n => !n.getAttribute || !n.getAttribute('slot'))\n      )\n    }\n\n    return $componentTemplateSlotNodes[slotName]\n  }\n\n  static override get allowVirtualElements(): true {\n    return true\n  }\n}\n"],
+  "mappings": ";;AAgBA,SAAS,uBAAuB;AAEhC,SAAS,aAAa,6BAA6B;AAEnD,SAAS,0BAA0B,kBAAkB;AAKrD,qBAAqB,oBAAoB,yBAAyB;AAAA,EAChE,YAAY,QAAa;AACvB,UAAM,MAAM;AACZ,UAAM,WAAW,KAAK,QAAQ,KAAK,KAAK;AACxC,UAAM,eAAe,WAAW,QAAQ;AAExC,UAAM,eAAe,KAAK,SAAS,OAAO,EAAE,cAAc,WAAW,gBAAgB,aAAa,MAAM,CAAC;AAEzG,SAAK,oBAAoB,KAAK,UAAU,QAAQ;AAEhD,SAAK,2BAA2B,YAAY;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,oBAAoB,yBAAsC,UAAsB;AAC9E,UAAM,QAAQ,KAAK,sBAAsB,QAAQ;AACjD,oBAAgB,UAAU,uBAAuB;AACjD,SAAK,cAAc,IAAI,YAAY,OAAO,yBAAyB,QAAW,QAAW,IAAI,CAAC;AAAA,EAChG;AAAA,EAEA,sBAAsB,MAAmB;AACvC,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AAAA,IACV;AACA,UAAM,MAAM,sBAAsB,IAAI;AACtC,QAAI,KAAK;AACP,aAAO,IAAI;AAAA,IACb;AAEA,QAAI,aAAa,MAAM;AACrB,YAAM,QAAQ,SAAS,WAAW,KAAK,SAAiB,IAAI;AAC5D,aAAO,CAAC,GAAG,MAAM,UAAU;AAAA,IAC7B;AAEA,UAAM,YAAY,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AACpD,WAAO,UAAU,IAAI,OAAK,EAAE,UAAU,IAAI,CAAC;AAAA,EAC7C;AAAA,EAEA,QAAQ,UAAwB;AAC9B,UAAM,EAAE,4BAA4B,IAAS,KAAK;AAElD,QAAI,CAAC,UAAU;AACb,aACE,4BAA4B,EAAE,KAC3B,CAAC,GAAI,KAAK,SAAiB,uBAAuB,EAAE,OAAO,OAAK,CAAC,EAAE,gBAAgB,CAAC,EAAE,aAAa,MAAM,CAAC;AAAA,IAEjH;AAEA,WAAO,4BAA4B,QAAQ;AAAA,EAC7C;AAAA,EAEA,WAAoB,uBAA6B;AAC/C,WAAO;AAAA,EACT;AACF;",
   "names": []
 }

package.json

 {
-  "version": "4.0.0-beta1.3",
+  "version": "4.0.0",
   "name": "@tko/binding.component",
@@ -8,9 +8,9 @@ "description": "component: binding for web components",
   "dependencies": {
-    "@tko/bind": "^4.0.0-beta1.3",
-    "@tko/lifecycle": "^4.0.0-beta1.3",
-    "@tko/observable": "^4.0.0-beta1.3",
-    "@tko/provider": "^4.0.0-beta1.3",
-    "@tko/utils": "^4.0.0-beta1.3",
-    "@tko/utils.component": "^4.0.0-beta1.3",
-    "@tko/utils.jsx": "^4.0.0-beta1.3",
+    "@tko/bind": "^4.0.0",
+    "@tko/lifecycle": "^4.0.0",
+    "@tko/observable": "^4.0.0",
+    "@tko/provider": "^4.0.0",
+    "@tko/utils": "^4.0.0",
+    "@tko/utils.component": "^4.0.0",
+    "@tko/utils.jsx": "^4.0.0",
     "tslib": "^2.2.0"
@@ -48,4 +48,3 @@ },
     "url": "git+https://github.com/knockout/tko.git"
-  },
-  "gitHead": "a8843acb8ae085915115e53a4e057b30731c635e"
+  }
 }

LICENSE

-The MIT License (MIT) - http://www.opensource.org/licenses/mit-license.php
-
-Copyright (c) Steven Sanderson, the Knockout.js team, and other contributors
-http://knockoutjs.com/
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

Fixed alerts

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

Improved metrics

Total package byte prevSize

407497

5.63%

Lines of code

4272

7.82%

Number of low quality alerts

0

-100%

Worsened metrics

Number of package files

11

-8.33%

Dependency changes

• Updated

  @tko/bind@^4.0.0

• Updated

  @tko/lifecycle@^4.0.0

• Updated

  @tko/observable@^4.0.0

• Updated

  @tko/provider@^4.0.0

• Updated

  @tko/utils@^4.0.0

• Updated

  @tko/utils.component@^4.0.0

• Updated

  @tko/utils.jsx@^4.0.0