diff --git a/bower.json b/bower.json index a6217a91..94efe63b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "aurelia-templating", - "version": "0.13.15", + "version": "0.13.16", "description": "An extensible HTML templating engine supporting databinding, custom elements, attached behaviors and more.", "keywords": [ "aurelia", diff --git a/dist/amd/aurelia-templating.d.ts b/dist/amd/aurelia-templating.d.ts index bd4279a1..802af35f 100644 --- a/dist/amd/aurelia-templating.d.ts +++ b/dist/amd/aurelia-templating.d.ts @@ -9,6 +9,8 @@ declare module 'aurelia-templating' { import * as LogManager from 'aurelia-logging'; export let DOMBoundary: any; export function createTemplateFromMarkup(markup: any): any; + export function replaceNode(newNode: any, node: any, parentNode: any): any; + export function removeNode(node: any, parentNode: any): any; export const animationEvent: any; export class Animator { static configureDefault(container: any, animatorInstance: any): any; diff --git a/dist/amd/aurelia-templating.js b/dist/amd/aurelia-templating.js index e85bec5a..620e0e9c 100644 --- a/dist/amd/aurelia-templating.js +++ b/dist/amd/aurelia-templating.js @@ -6,6 +6,8 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); exports.createTemplateFromMarkup = createTemplateFromMarkup; + exports.replaceNode = replaceNode; + exports.removeNode = removeNode; exports.hyphenate = hyphenate; exports.nextElementSibling = nextElementSibling; exports.behavior = behavior; @@ -34,6 +36,7 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade var _core = _interopRequireDefault(_coreJs); var needsTemplateFixup = !('content' in document.createElement('template')); + var shadowPoly = window.ShadowDOMPolyfill || null; var DOMBoundary = 'aurelia-dom-boundary'; @@ -53,6 +56,26 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade return temp; } + function replaceNode(newNode, node, parentNode) { + if (node.parentNode) { + node.parentNode.replaceChild(newNode, node); + } else if (shadowPoly) { + shadowPoly.unwrap(parentNode).replaceChild(shadowPoly.unwrap(newNode), shadowPoly.unwrap(node)); + } else { + parentNode.replaceChild(newNode, node); + } + } + + function removeNode(node, parentNode) { + if (node.parentNode) { + node.parentNode.removeChild(node); + } else if (shadowPoly) { + shadowPoly.unwrap(parentNode).removeChild(shadowPoly.unwrap(node)); + } else { + parentNode.removeChild(node); + } + } + var animationEvent = { enterBegin: 'animation:enter:begin', enterActive: 'animation:enter:active', @@ -1084,7 +1107,7 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade view = children[i]; for (j = 0; j < jj; ++j) { - contentSelectors[j].removeAt(i, view.fragment); + contentSelectors[j].removeAt(0, view.fragment); } } @@ -1366,7 +1389,6 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade contentSelectors = [], containers = { root: container }, partReplacements = options.partReplacements, - domBoundary = container.get(DOMBoundary), i, ii, view, @@ -1381,8 +1403,6 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade instructable = instructables[i]; instruction = instructions[instructable.getAttribute('au-target-id')]; - instructable.domBoundary = domBoundary; - applyInstructions(containers, executionContext, instructable, instruction, behaviors, bindings, children, contentSelectors, partReplacements, resources); } @@ -2575,15 +2595,7 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade part = node.getAttribute('part'); node.removeAttribute(instruction.originalAttrName); - - if (node.parentNode) { - node.parentNode.replaceChild(template, node); - } else if (window.ShadowDOMPolyfill) { - ShadowDOMPolyfill.unwrap(parentNode).replaceChild(ShadowDOMPolyfill.unwrap(template), ShadowDOMPolyfill.unwrap(node)); - } else { - parentNode.replaceChild(template, node); - } - + replaceNode(template, node, parentNode); fragment.appendChild(node); instruction.viewFactory = compiler.compile(fragment, resources); @@ -2598,40 +2610,43 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade var partReplacements = instruction.partReplacements = {}; if (this.processContent(compiler, resources, node, instruction) && node.hasChildNodes()) { - instruction.skipContentProcessing = false; - - if (!this.usesShadowDOM) { - var fragment = document.createDocumentFragment(), - currentChild = node.firstChild, - nextSibling; + if (this.usesShadowDOM) { + var currentChild = node.firstChild, + nextSibling, + toReplace; while (currentChild) { nextSibling = currentChild.nextSibling; if (currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))) { partReplacements[toReplace] = compiler.compile(currentChild, resources); - } else { - fragment.appendChild(currentChild); + removeNode(currentChild, parentNode); } currentChild = nextSibling; } - instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = false; } else { - var currentChild = node.firstChild, - nextSibling, - toReplace; + var fragment = document.createDocumentFragment(), + currentChild = node.firstChild, + nextSibling; while (currentChild) { nextSibling = currentChild.nextSibling; if (currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))) { partReplacements[toReplace] = compiler.compile(currentChild, resources); + removeNode(currentChild, parentNode); + } else { + fragment.appendChild(currentChild); } currentChild = nextSibling; } + + instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = true; } } else { instruction.skipContentProcessing = true; @@ -2652,12 +2667,13 @@ define(['exports', 'core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loade if (this.elementName !== null && element) { if (this.usesShadowDOM) { host = element.createShadowRoot(); + container.registerInstance(DOMBoundary, host); } else { host = element; - } - if (instruction.anchorIsContainer) { - container.registerInstance(DOMBoundary, host); + if (this.targetShadowDOM) { + container.registerInstance(DOMBoundary, host); + } } } diff --git a/dist/aurelia-templating.d.ts b/dist/aurelia-templating.d.ts index bd4279a1..802af35f 100644 --- a/dist/aurelia-templating.d.ts +++ b/dist/aurelia-templating.d.ts @@ -9,6 +9,8 @@ declare module 'aurelia-templating' { import * as LogManager from 'aurelia-logging'; export let DOMBoundary: any; export function createTemplateFromMarkup(markup: any): any; + export function replaceNode(newNode: any, node: any, parentNode: any): any; + export function removeNode(node: any, parentNode: any): any; export const animationEvent: any; export class Animator { static configureDefault(container: any, animatorInstance: any): any; diff --git a/dist/aurelia-templating.js b/dist/aurelia-templating.js index 88109ea3..8cbdff0e 100644 --- a/dist/aurelia-templating.js +++ b/dist/aurelia-templating.js @@ -7,6 +7,7 @@ import {bindingMode,ObserverLocator,BindingExpression,Binding,ValueConverterReso import {TaskQueue} from 'aurelia-task-queue'; let needsTemplateFixup = !('content' in document.createElement('template')); +let shadowPoly = window.ShadowDOMPolyfill || null; export let DOMBoundary = 'aurelia-dom-boundary'; @@ -24,6 +25,31 @@ export function createTemplateFromMarkup(markup){ return temp; } +export function replaceNode(newNode, node, parentNode){ + if(node.parentNode){ + node.parentNode.replaceChild(newNode, node); + }else if(shadowPoly){ //HACK: IE template element and shadow dom polyfills not quite right... + shadowPoly.unwrap(parentNode).replaceChild( + shadowPoly.unwrap(newNode), + shadowPoly.unwrap(node) + ); + }else{ //HACK: same as above + parentNode.replaceChild(newNode, node); + } +} + +export function removeNode(node, parentNode) { + if(node.parentNode){ + node.parentNode.removeChild(node); + }else if(shadowPoly){ //HACK: IE template element and shadow dom polyfills not quite right... + shadowPoly.unwrap(parentNode).removeChild( + shadowPoly.unwrap(node) + ); + }else{ //HACK: same as above + parentNode.removeChild(node); + } +} + export const animationEvent = { enterBegin: 'animation:enter:begin', enterActive: 'animation:enter:active', @@ -994,7 +1020,7 @@ export class ViewSlot { view = children[i]; for(j = 0; j < jj; ++j){ - contentSelectors[j].removeAt(i, view.fragment); + contentSelectors[j].removeAt(0, view.fragment); } } @@ -1260,7 +1286,6 @@ export class ViewFactory{ contentSelectors = [], containers = { root:container }, partReplacements = options.partReplacements, - domBoundary = container.get(DOMBoundary), i, ii, view, instructable, instruction; if(element !== null && this.surrogateInstruction !== null){ @@ -1271,8 +1296,6 @@ export class ViewFactory{ instructable = instructables[i]; instruction = instructions[instructable.getAttribute('au-target-id')]; - instructable.domBoundary = domBoundary; - applyInstructions(containers, executionContext, instructable, instruction, behaviors, bindings, children, contentSelectors, partReplacements, resources); } @@ -2360,18 +2383,7 @@ export class HtmlBehaviorResource { part = node.getAttribute('part'); node.removeAttribute(instruction.originalAttrName); - - if(node.parentNode){ - node.parentNode.replaceChild(template, node); - }else if(window.ShadowDOMPolyfill){ //HACK: IE template element and shadow dom polyfills not quite right... - ShadowDOMPolyfill.unwrap(parentNode).replaceChild( - ShadowDOMPolyfill.unwrap(template), - ShadowDOMPolyfill.unwrap(node) - ); - }else{ //HACK: same as above - parentNode.replaceChild(template, node); - } - + replaceNode(template, node, parentNode); fragment.appendChild(node); instruction.viewFactory = compiler.compile(fragment, resources); @@ -2386,39 +2398,42 @@ export class HtmlBehaviorResource { var partReplacements = instruction.partReplacements = {}; if(this.processContent(compiler, resources, node, instruction) && node.hasChildNodes()){ - instruction.skipContentProcessing = false; - - if(!this.usesShadowDOM){ - var fragment = document.createDocumentFragment(), - currentChild = node.firstChild, - nextSibling; + if(this.usesShadowDOM){ + var currentChild = node.firstChild, + nextSibling, toReplace; while (currentChild) { nextSibling = currentChild.nextSibling; if(currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))){ partReplacements[toReplace] = compiler.compile(currentChild, resources); - }else{ - fragment.appendChild(currentChild); + removeNode(currentChild, parentNode); } currentChild = nextSibling; } - instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = false; }else{ - var currentChild = node.firstChild, - nextSibling, toReplace; + var fragment = document.createDocumentFragment(), + currentChild = node.firstChild, + nextSibling; while (currentChild) { nextSibling = currentChild.nextSibling; if(currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))){ partReplacements[toReplace] = compiler.compile(currentChild, resources); + removeNode(currentChild, parentNode); + }else{ + fragment.appendChild(currentChild); } currentChild = nextSibling; } + + instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = true; } }else{ instruction.skipContentProcessing = true; @@ -2435,12 +2450,13 @@ export class HtmlBehaviorResource { if(this.elementName !== null && element){ if(this.usesShadowDOM) { host = element.createShadowRoot(); + container.registerInstance(DOMBoundary, host); }else{ host = element; - } - if(instruction.anchorIsContainer){ - container.registerInstance(DOMBoundary, host); + if(this.targetShadowDOM){ + container.registerInstance(DOMBoundary, host); + } } } diff --git a/dist/commonjs/aurelia-templating.d.ts b/dist/commonjs/aurelia-templating.d.ts index bd4279a1..802af35f 100644 --- a/dist/commonjs/aurelia-templating.d.ts +++ b/dist/commonjs/aurelia-templating.d.ts @@ -9,6 +9,8 @@ declare module 'aurelia-templating' { import * as LogManager from 'aurelia-logging'; export let DOMBoundary: any; export function createTemplateFromMarkup(markup: any): any; + export function replaceNode(newNode: any, node: any, parentNode: any): any; + export function removeNode(node: any, parentNode: any): any; export const animationEvent: any; export class Animator { static configureDefault(container: any, animatorInstance: any): any; diff --git a/dist/commonjs/aurelia-templating.js b/dist/commonjs/aurelia-templating.js index 8042dfe1..6a7980a1 100644 --- a/dist/commonjs/aurelia-templating.js +++ b/dist/commonjs/aurelia-templating.js @@ -5,6 +5,8 @@ exports.__esModule = true; var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); exports.createTemplateFromMarkup = createTemplateFromMarkup; +exports.replaceNode = replaceNode; +exports.removeNode = removeNode; exports.hyphenate = hyphenate; exports.nextElementSibling = nextElementSibling; exports.behavior = behavior; @@ -53,6 +55,7 @@ var _aureliaLogging = require('aurelia-logging'); var LogManager = _interopRequireWildcard(_aureliaLogging); var needsTemplateFixup = !('content' in document.createElement('template')); +var shadowPoly = window.ShadowDOMPolyfill || null; var DOMBoundary = 'aurelia-dom-boundary'; @@ -72,6 +75,26 @@ function createTemplateFromMarkup(markup) { return temp; } +function replaceNode(newNode, node, parentNode) { + if (node.parentNode) { + node.parentNode.replaceChild(newNode, node); + } else if (shadowPoly) { + shadowPoly.unwrap(parentNode).replaceChild(shadowPoly.unwrap(newNode), shadowPoly.unwrap(node)); + } else { + parentNode.replaceChild(newNode, node); + } +} + +function removeNode(node, parentNode) { + if (node.parentNode) { + node.parentNode.removeChild(node); + } else if (shadowPoly) { + shadowPoly.unwrap(parentNode).removeChild(shadowPoly.unwrap(node)); + } else { + parentNode.removeChild(node); + } +} + var animationEvent = { enterBegin: 'animation:enter:begin', enterActive: 'animation:enter:active', @@ -1103,7 +1126,7 @@ var ViewSlot = (function () { view = children[i]; for (j = 0; j < jj; ++j) { - contentSelectors[j].removeAt(i, view.fragment); + contentSelectors[j].removeAt(0, view.fragment); } } @@ -1385,7 +1408,6 @@ var ViewFactory = (function () { contentSelectors = [], containers = { root: container }, partReplacements = options.partReplacements, - domBoundary = container.get(DOMBoundary), i, ii, view, @@ -1400,8 +1422,6 @@ var ViewFactory = (function () { instructable = instructables[i]; instruction = instructions[instructable.getAttribute('au-target-id')]; - instructable.domBoundary = domBoundary; - applyInstructions(containers, executionContext, instructable, instruction, behaviors, bindings, children, contentSelectors, partReplacements, resources); } @@ -2594,15 +2614,7 @@ var HtmlBehaviorResource = (function () { part = node.getAttribute('part'); node.removeAttribute(instruction.originalAttrName); - - if (node.parentNode) { - node.parentNode.replaceChild(template, node); - } else if (window.ShadowDOMPolyfill) { - ShadowDOMPolyfill.unwrap(parentNode).replaceChild(ShadowDOMPolyfill.unwrap(template), ShadowDOMPolyfill.unwrap(node)); - } else { - parentNode.replaceChild(template, node); - } - + replaceNode(template, node, parentNode); fragment.appendChild(node); instruction.viewFactory = compiler.compile(fragment, resources); @@ -2617,40 +2629,43 @@ var HtmlBehaviorResource = (function () { var partReplacements = instruction.partReplacements = {}; if (this.processContent(compiler, resources, node, instruction) && node.hasChildNodes()) { - instruction.skipContentProcessing = false; - - if (!this.usesShadowDOM) { - var fragment = document.createDocumentFragment(), - currentChild = node.firstChild, - nextSibling; + if (this.usesShadowDOM) { + var currentChild = node.firstChild, + nextSibling, + toReplace; while (currentChild) { nextSibling = currentChild.nextSibling; if (currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))) { partReplacements[toReplace] = compiler.compile(currentChild, resources); - } else { - fragment.appendChild(currentChild); + removeNode(currentChild, parentNode); } currentChild = nextSibling; } - instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = false; } else { - var currentChild = node.firstChild, - nextSibling, - toReplace; + var fragment = document.createDocumentFragment(), + currentChild = node.firstChild, + nextSibling; while (currentChild) { nextSibling = currentChild.nextSibling; if (currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))) { partReplacements[toReplace] = compiler.compile(currentChild, resources); + removeNode(currentChild, parentNode); + } else { + fragment.appendChild(currentChild); } currentChild = nextSibling; } + + instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = true; } } else { instruction.skipContentProcessing = true; @@ -2671,12 +2686,13 @@ var HtmlBehaviorResource = (function () { if (this.elementName !== null && element) { if (this.usesShadowDOM) { host = element.createShadowRoot(); + container.registerInstance(DOMBoundary, host); } else { host = element; - } - if (instruction.anchorIsContainer) { - container.registerInstance(DOMBoundary, host); + if (this.targetShadowDOM) { + container.registerInstance(DOMBoundary, host); + } } } diff --git a/dist/es6/aurelia-templating.d.ts b/dist/es6/aurelia-templating.d.ts index bd4279a1..802af35f 100644 --- a/dist/es6/aurelia-templating.d.ts +++ b/dist/es6/aurelia-templating.d.ts @@ -9,6 +9,8 @@ declare module 'aurelia-templating' { import * as LogManager from 'aurelia-logging'; export let DOMBoundary: any; export function createTemplateFromMarkup(markup: any): any; + export function replaceNode(newNode: any, node: any, parentNode: any): any; + export function removeNode(node: any, parentNode: any): any; export const animationEvent: any; export class Animator { static configureDefault(container: any, animatorInstance: any): any; diff --git a/dist/es6/aurelia-templating.js b/dist/es6/aurelia-templating.js index 88109ea3..8cbdff0e 100644 --- a/dist/es6/aurelia-templating.js +++ b/dist/es6/aurelia-templating.js @@ -7,6 +7,7 @@ import {bindingMode,ObserverLocator,BindingExpression,Binding,ValueConverterReso import {TaskQueue} from 'aurelia-task-queue'; let needsTemplateFixup = !('content' in document.createElement('template')); +let shadowPoly = window.ShadowDOMPolyfill || null; export let DOMBoundary = 'aurelia-dom-boundary'; @@ -24,6 +25,31 @@ export function createTemplateFromMarkup(markup){ return temp; } +export function replaceNode(newNode, node, parentNode){ + if(node.parentNode){ + node.parentNode.replaceChild(newNode, node); + }else if(shadowPoly){ //HACK: IE template element and shadow dom polyfills not quite right... + shadowPoly.unwrap(parentNode).replaceChild( + shadowPoly.unwrap(newNode), + shadowPoly.unwrap(node) + ); + }else{ //HACK: same as above + parentNode.replaceChild(newNode, node); + } +} + +export function removeNode(node, parentNode) { + if(node.parentNode){ + node.parentNode.removeChild(node); + }else if(shadowPoly){ //HACK: IE template element and shadow dom polyfills not quite right... + shadowPoly.unwrap(parentNode).removeChild( + shadowPoly.unwrap(node) + ); + }else{ //HACK: same as above + parentNode.removeChild(node); + } +} + export const animationEvent = { enterBegin: 'animation:enter:begin', enterActive: 'animation:enter:active', @@ -994,7 +1020,7 @@ export class ViewSlot { view = children[i]; for(j = 0; j < jj; ++j){ - contentSelectors[j].removeAt(i, view.fragment); + contentSelectors[j].removeAt(0, view.fragment); } } @@ -1260,7 +1286,6 @@ export class ViewFactory{ contentSelectors = [], containers = { root:container }, partReplacements = options.partReplacements, - domBoundary = container.get(DOMBoundary), i, ii, view, instructable, instruction; if(element !== null && this.surrogateInstruction !== null){ @@ -1271,8 +1296,6 @@ export class ViewFactory{ instructable = instructables[i]; instruction = instructions[instructable.getAttribute('au-target-id')]; - instructable.domBoundary = domBoundary; - applyInstructions(containers, executionContext, instructable, instruction, behaviors, bindings, children, contentSelectors, partReplacements, resources); } @@ -2360,18 +2383,7 @@ export class HtmlBehaviorResource { part = node.getAttribute('part'); node.removeAttribute(instruction.originalAttrName); - - if(node.parentNode){ - node.parentNode.replaceChild(template, node); - }else if(window.ShadowDOMPolyfill){ //HACK: IE template element and shadow dom polyfills not quite right... - ShadowDOMPolyfill.unwrap(parentNode).replaceChild( - ShadowDOMPolyfill.unwrap(template), - ShadowDOMPolyfill.unwrap(node) - ); - }else{ //HACK: same as above - parentNode.replaceChild(template, node); - } - + replaceNode(template, node, parentNode); fragment.appendChild(node); instruction.viewFactory = compiler.compile(fragment, resources); @@ -2386,39 +2398,42 @@ export class HtmlBehaviorResource { var partReplacements = instruction.partReplacements = {}; if(this.processContent(compiler, resources, node, instruction) && node.hasChildNodes()){ - instruction.skipContentProcessing = false; - - if(!this.usesShadowDOM){ - var fragment = document.createDocumentFragment(), - currentChild = node.firstChild, - nextSibling; + if(this.usesShadowDOM){ + var currentChild = node.firstChild, + nextSibling, toReplace; while (currentChild) { nextSibling = currentChild.nextSibling; if(currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))){ partReplacements[toReplace] = compiler.compile(currentChild, resources); - }else{ - fragment.appendChild(currentChild); + removeNode(currentChild, parentNode); } currentChild = nextSibling; } - instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = false; }else{ - var currentChild = node.firstChild, - nextSibling, toReplace; + var fragment = document.createDocumentFragment(), + currentChild = node.firstChild, + nextSibling; while (currentChild) { nextSibling = currentChild.nextSibling; if(currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))){ partReplacements[toReplace] = compiler.compile(currentChild, resources); + removeNode(currentChild, parentNode); + }else{ + fragment.appendChild(currentChild); } currentChild = nextSibling; } + + instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = true; } }else{ instruction.skipContentProcessing = true; @@ -2435,12 +2450,13 @@ export class HtmlBehaviorResource { if(this.elementName !== null && element){ if(this.usesShadowDOM) { host = element.createShadowRoot(); + container.registerInstance(DOMBoundary, host); }else{ host = element; - } - if(instruction.anchorIsContainer){ - container.registerInstance(DOMBoundary, host); + if(this.targetShadowDOM){ + container.registerInstance(DOMBoundary, host); + } } } diff --git a/dist/system/aurelia-templating.d.ts b/dist/system/aurelia-templating.d.ts index bd4279a1..802af35f 100644 --- a/dist/system/aurelia-templating.d.ts +++ b/dist/system/aurelia-templating.d.ts @@ -9,6 +9,8 @@ declare module 'aurelia-templating' { import * as LogManager from 'aurelia-logging'; export let DOMBoundary: any; export function createTemplateFromMarkup(markup: any): any; + export function replaceNode(newNode: any, node: any, parentNode: any): any; + export function removeNode(node: any, parentNode: any): any; export const animationEvent: any; export class Animator { static configureDefault(container: any, animatorInstance: any): any; diff --git a/dist/system/aurelia-templating.js b/dist/system/aurelia-templating.js index e4b1c700..de2353a8 100644 --- a/dist/system/aurelia-templating.js +++ b/dist/system/aurelia-templating.js @@ -1,12 +1,16 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader', 'aurelia-dependency-injection', 'aurelia-binding', 'aurelia-task-queue', 'aurelia-logging'], function (_export) { 'use strict'; - var core, Metadata, Origin, Decorators, relativeToFile, TemplateRegistryEntry, Loader, Container, bindingMode, ObserverLocator, BindingExpression, Binding, ValueConverterResource, EventManager, TaskQueue, LogManager, needsTemplateFixup, DOMBoundary, animationEvent, Animator, capitalMatcher, ViewStrategy, UseViewStrategy, ConventionalViewStrategy, NoViewStrategy, TemplateRegistryViewStrategy, InlineViewStrategy, BindingLanguage, ResourceRegistry, ViewResources, View, proto, placeholder, ContentSelector, ViewSlot, BoundViewFactory, defaultFactoryOptions, ViewFactory, nextInjectorId, defaultCompileOptions, hasShadowDOM, lastAUTargetID, ViewCompiler, logger, ProxyViewFactory, ViewEngine, BehaviorInstance, BindableProperty, BehaviorPropertyObserver, defaultInstruction, contentSelectorFactoryOptions, hasShadowDOM, HtmlBehaviorResource, ResourceModule, ResourceDescription, ModuleAnalyzer, noMutations, ChildObserver, ChildObserverBinder, CompositionEngine, ElementConfigResource; + var core, Metadata, Origin, Decorators, relativeToFile, TemplateRegistryEntry, Loader, Container, bindingMode, ObserverLocator, BindingExpression, Binding, ValueConverterResource, EventManager, TaskQueue, LogManager, needsTemplateFixup, shadowPoly, DOMBoundary, animationEvent, Animator, capitalMatcher, ViewStrategy, UseViewStrategy, ConventionalViewStrategy, NoViewStrategy, TemplateRegistryViewStrategy, InlineViewStrategy, BindingLanguage, ResourceRegistry, ViewResources, View, proto, placeholder, ContentSelector, ViewSlot, BoundViewFactory, defaultFactoryOptions, ViewFactory, nextInjectorId, defaultCompileOptions, hasShadowDOM, lastAUTargetID, ViewCompiler, logger, ProxyViewFactory, ViewEngine, BehaviorInstance, BindableProperty, BehaviorPropertyObserver, defaultInstruction, contentSelectorFactoryOptions, hasShadowDOM, HtmlBehaviorResource, ResourceModule, ResourceDescription, ModuleAnalyzer, noMutations, ChildObserver, ChildObserverBinder, CompositionEngine, ElementConfigResource; var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); _export('createTemplateFromMarkup', createTemplateFromMarkup); + _export('replaceNode', replaceNode); + + _export('removeNode', removeNode); + _export('hyphenate', hyphenate); _export('nextElementSibling', nextElementSibling); @@ -61,6 +65,26 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' return temp; } + function replaceNode(newNode, node, parentNode) { + if (node.parentNode) { + node.parentNode.replaceChild(newNode, node); + } else if (shadowPoly) { + shadowPoly.unwrap(parentNode).replaceChild(shadowPoly.unwrap(newNode), shadowPoly.unwrap(node)); + } else { + parentNode.replaceChild(newNode, node); + } + } + + function removeNode(node, parentNode) { + if (node.parentNode) { + node.parentNode.removeChild(node); + } else if (shadowPoly) { + shadowPoly.unwrap(parentNode).removeChild(shadowPoly.unwrap(node)); + } else { + parentNode.removeChild(node); + } + } + function addHyphenAndLower(char) { return '-' + char.toLowerCase(); } @@ -595,6 +619,7 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' }], execute: function () { needsTemplateFixup = !('content' in document.createElement('template')); + shadowPoly = window.ShadowDOMPolyfill || null; DOMBoundary = 'aurelia-dom-boundary'; _export('DOMBoundary', DOMBoundary); @@ -1571,7 +1596,7 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' view = children[i]; for (j = 0; j < jj; ++j) { - contentSelectors[j].removeAt(i, view.fragment); + contentSelectors[j].removeAt(0, view.fragment); } } @@ -1642,7 +1667,6 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' contentSelectors = [], containers = { root: container }, partReplacements = options.partReplacements, - domBoundary = container.get(DOMBoundary), i, ii, view, @@ -1657,8 +1681,6 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' instructable = instructables[i]; instruction = instructions[instructable.getAttribute('au-target-id')]; - instructable.domBoundary = domBoundary; - applyInstructions(containers, executionContext, instructable, instruction, behaviors, bindings, children, contentSelectors, partReplacements, resources); } @@ -2781,15 +2803,7 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' part = node.getAttribute('part'); node.removeAttribute(instruction.originalAttrName); - - if (node.parentNode) { - node.parentNode.replaceChild(template, node); - } else if (window.ShadowDOMPolyfill) { - ShadowDOMPolyfill.unwrap(parentNode).replaceChild(ShadowDOMPolyfill.unwrap(template), ShadowDOMPolyfill.unwrap(node)); - } else { - parentNode.replaceChild(template, node); - } - + replaceNode(template, node, parentNode); fragment.appendChild(node); instruction.viewFactory = compiler.compile(fragment, resources); @@ -2804,40 +2818,43 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' var partReplacements = instruction.partReplacements = {}; if (this.processContent(compiler, resources, node, instruction) && node.hasChildNodes()) { - instruction.skipContentProcessing = false; - - if (!this.usesShadowDOM) { - var fragment = document.createDocumentFragment(), - currentChild = node.firstChild, - nextSibling; + if (this.usesShadowDOM) { + var currentChild = node.firstChild, + nextSibling, + toReplace; while (currentChild) { nextSibling = currentChild.nextSibling; if (currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))) { partReplacements[toReplace] = compiler.compile(currentChild, resources); - } else { - fragment.appendChild(currentChild); + removeNode(currentChild, parentNode); } currentChild = nextSibling; } - instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = false; } else { - var currentChild = node.firstChild, - nextSibling, - toReplace; + var fragment = document.createDocumentFragment(), + currentChild = node.firstChild, + nextSibling; while (currentChild) { nextSibling = currentChild.nextSibling; if (currentChild.tagName === 'TEMPLATE' && (toReplace = currentChild.getAttribute('replace-part'))) { partReplacements[toReplace] = compiler.compile(currentChild, resources); + removeNode(currentChild, parentNode); + } else { + fragment.appendChild(currentChild); } currentChild = nextSibling; } + + instruction.contentFactory = compiler.compile(fragment, resources); + instruction.skipContentProcessing = true; } } else { instruction.skipContentProcessing = true; @@ -2858,12 +2875,13 @@ System.register(['core-js', 'aurelia-metadata', 'aurelia-path', 'aurelia-loader' if (this.elementName !== null && element) { if (this.usesShadowDOM) { host = element.createShadowRoot(); + container.registerInstance(DOMBoundary, host); } else { host = element; - } - if (instruction.anchorIsContainer) { - container.registerInstance(DOMBoundary, host); + if (this.targetShadowDOM) { + container.registerInstance(DOMBoundary, host); + } } } diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md index cdbe815f..8a54cc5d 100644 --- a/doc/CHANGELOG.md +++ b/doc/CHANGELOG.md @@ -1,3 +1,18 @@ +### 0.13.16 (2015-08-05) + + +#### Bug Fixes + +* **html-behavior:** remove double compile of template parts ([49a5ad79](http://github.com/aurelia/templating/commit/49a5ad79072791352b2c1db58e4f009fa861a456)) +* **view-factory:** unnecessary dom boundaries removed ([77452a17](http://github.com/aurelia/templating/commit/77452a1712249229a82252c22abd4a8d9444c78e)) +* **view-slot:** out of bounds on array for content selector remove all ([eb345050](http://github.com/aurelia/templating/commit/eb3450508ee91aa03e38aeaeac58ffc54bc07870), closes [#136](http://github.com/aurelia/templating/issues/136)) + + +#### Features + +* **view-engine:** preliminary support for element enhancement ([e8078686](http://github.com/aurelia/templating/commit/e8078686e7297caef3d7e6b3a9b610c8d5069f30)) + + ### 0.13.15 (2015-07-30) diff --git a/package.json b/package.json index 58609d50..55aaf204 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aurelia-templating", - "version": "0.13.15", + "version": "0.13.16", "description": "An extensible HTML templating engine supporting databinding, custom elements, attached behaviors and more.", "keywords": [ "aurelia",