@aurelia/jit-html - npm Package Compare versions

Comparing version 0.8.0-dev.202010031322 to 0.8.0-dev.202010031518

dist/esnext/semantic-model.js

@@ -1,6 +0,6 @@
-import { BindingSymbol, CustomAttributeSymbol, CustomElementSymbol as $CustomElementSymbol, LetElementSymbol as $LetElementSymbol, PlainAttributeSymbol, PlainElementSymbol as $PlainElementSymbol, ReplacePartSymbol as $ReplacePartSymbol, TemplateControllerSymbol as $TemplateControllerSymbol, TextSymbol as $TextSymbol, } from '@aurelia/jit';
+import { BindingSymbol, CustomAttributeSymbol, CustomElementSymbol as $CustomElementSymbol, LetElementSymbol as $LetElementSymbol, PlainAttributeSymbol, PlainElementSymbol as $PlainElementSymbol, TemplateControllerSymbol as $TemplateControllerSymbol, TextSymbol as $TextSymbol, ProjectionSymbol as $ProjectionSymbol } from '@aurelia/jit';
 export const CustomElementSymbol = $CustomElementSymbol;
 export const LetElementSymbol = $LetElementSymbol;
 export const PlainElementSymbol = $PlainElementSymbol;
-export const ReplacePartSymbol = $ReplacePartSymbol;
+export const ProjectionSymbol = $ProjectionSymbol;
 export const TemplateControllerSymbol = $TemplateControllerSymbol;
@@ -7,0 +7,0 @@ export const TextSymbol = $TextSymbol;

dist/esnext/template-binder.js

@@ -5,10 +5,9 @@ /* eslint-disable compat/compat */
 import { BindingMode } from '@aurelia/runtime';
-import { BindingSymbol, CustomAttributeSymbol, CustomElementSymbol, LetElementSymbol, PlainAttributeSymbol, PlainElementSymbol, ReplacePartSymbol, TemplateControllerSymbol, TextSymbol, } from './semantic-model';
+import { BindingSymbol, CustomAttributeSymbol, CustomElementSymbol, LetElementSymbol, PlainAttributeSymbol, PlainElementSymbol, TemplateControllerSymbol, TextSymbol, ProjectionSymbol, } from './semantic-model';
 const invalidSurrogateAttribute = Object.assign(Object.create(null), {
     'id': true,
-    'replace': true
+    'au-slot': true,
 });
 const attributesToIgnore = Object.assign(Object.create(null), {
     'as-element': true,
-    'replace': true
 });
@@ -78,21 +77,2 @@ function hasInlineBindings(rawValue) {
 }
-function processReplacePart(dom, replacePart, manifestProxy) {
-    let proxyNode;
-    let currentTemplate;
-    if ((manifestProxy.flags & 512 /* hasMarker */) > 0) {
-        proxyNode = manifestProxy.marker;
-    }
-    else {
-        proxyNode = manifestProxy.physicalNode;
-    }
-    if (proxyNode.nodeName === 'TEMPLATE') {
-        // if it's a template element, no need to do anything special, just assign it to the replacePart
-        replacePart.physicalNode = proxyNode;
-    }
-    else {
-        // otherwise wrap the replace in a template
-        currentTemplate = replacePart.physicalNode = dom.createTemplate();
-        currentTemplate.content.appendChild(proxyNode);
-    }
-}
 /**
@@ -164,7 +144,8 @@ * TemplateBinder. Todo: describe goal of this class
         /* manifestRoot       */ null, 
-        /* parentManifestRoot */ null, 
-        /* partName           */ null);
+        /* parentManifestRoot */ null);
         return surrogate;
     }
-    bindManifest(parentManifest, node, surrogate, manifest, manifestRoot, parentManifestRoot, partName) {
+    bindManifest(parentManifest, node, surrogate, manifest, manifestRoot, parentManifestRoot) {
+        var _a;
+        let isAuSlot = false;
         switch (node.nodeName) {
@@ -179,8 +160,7 @@ case 'LET':
                 surrogate.hasSlots = true;
+                break;
+            case 'AU-SLOT':
+                isAuSlot = true;
+                break;
         }
-        // get the part name to override the name of the compiled definition
-        partName = node.getAttribute('replaceable');
-        if (partName === '') {
-            partName = 'default';
-        }
         let name = node.getAttribute('as-element');
@@ -198,3 +178,8 @@ if (name === null) {
             parentManifestRoot = manifestRoot;
-            manifestRoot = manifest = new CustomElementSymbol(this.dom, node, elementInfo);
+            const ceSymbol = new CustomElementSymbol(this.dom, node, elementInfo);
+            if (isAuSlot) {
+                ceSymbol.flags = 512 /* isAuSlot */;
+                ceSymbol.slotName = (_a = node.getAttribute("name")) !== null && _a !== void 0 ? _a : "default";
+            }
+            manifestRoot = manifest = ceSymbol;
         }
@@ -207,4 +192,3 @@ // lifting operations done by template controllers and replaces effectively unlink the nodes, so start at the bottom
         /* manifestRoot       */ manifestRoot, 
-        /* parentManifestRoot */ parentManifestRoot, 
-        /* partName           */ partName);
+        /* parentManifestRoot */ parentManifestRoot);
         // the parentManifest will receive either the direct child nodes, or the template controllers / replaces
@@ -218,4 +202,3 @@ // wrapping them
         /* manifestRoot       */ manifestRoot, 
-        /* parentManifestRoot */ parentManifestRoot, 
-        /* partName           */ partName);
+        /* parentManifestRoot */ parentManifestRoot);
         if (manifestRoot === manifest && manifest.isContainerless) {
@@ -251,3 +234,4 @@ node.parentNode.replaceChild(manifest.marker, node);
     }
-    bindAttributes(node, parentManifest, surrogate, manifest, manifestRoot, parentManifestRoot, partName) {
+    bindAttributes(node, parentManifest, surrogate, manifest, manifestRoot, parentManifestRoot) {
+        var _a;
         // This is the top-level symbol for the current depth.
@@ -286,4 +270,3 @@ // If there are no template controllers or replaces, it is always the manifest itself.
                     /* attrSyntax */ attrSyntax, 
-                    /* attrInfo   */ attrInfo, 
-                    /* partName   */ partName);
+                    /* attrInfo   */ attrInfo);
                     // the proxy and the manifest are only identical when we're at the first template controller (since the controller
@@ -328,23 +311,39 @@ // is assigned to the proxy), so this evaluates to true at most once per node
         }
+        let projection = node.getAttribute('au-slot');
+        if (projection === '') {
+            projection = 'default';
+        }
+        const hasProjection = projection !== null;
+        if (hasProjection && isTemplateControllerOf(manifestProxy, manifest)) {
+            // prevents <some-el au-slot TEMPLATE.CONTROLLER></some-el>.
+            throw new Error(`Unsupported usage of [au-slot="${projection}"] along with a template controller (if, else, repeat.for etc.) found (example: <some-el au-slot if.bind="true"></some-el>).`);
+            /**
+             * TODO: prevent <template TEMPLATE.CONTROLLER><some-el au-slot></some-el></template>.
+             * But there is not easy way for now, as the attribute binding is done after binding the child nodes.
+             * This means by the time the template controller in the ancestor is processed, the projection is already registered.
+             */
+        }
+        const parentName = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeName.toLowerCase();
+        if (hasProjection
+            && (manifestRoot === null
+                || parentName === void 0
+                || this.resources.getElementInfo(parentName) === null)) {
+            /**
+             * Prevents the following cases:
+             * - <template><div au-slot></div></template>
+             * - <my-ce><div><div au-slot></div></div></my-ce>
+             * - <my-ce><div au-slot="s1"><div au-slot="s2"></div></div></my-ce>
+             */
+            throw new Error(`Unsupported usage of [au-slot="${projection}"]. It seems that projection is attempted, but not for a custom element.`);
+        }
         processTemplateControllers(this.dom, manifestProxy, manifest);
-        let replace = node.getAttribute('replace');
-        if (replace === '' || (replace === null && manifestRoot !== null && manifestRoot.isContainerless && ((parentManifest.flags & 16 /* isCustomElement */) > 0))) {
-            replace = 'default';
-        }
-        const partOwner = manifest === manifestRoot ? parentManifestRoot : manifestRoot;
-        if (replace === null || partOwner === null) {
+        const projectionOwner = manifest === manifestRoot ? parentManifestRoot : manifestRoot;
+        if (!hasProjection || projectionOwner === null) {
             // the proxy is either the manifest itself or the outer-most controller; add it directly to the parent
             parentManifest.childNodes.push(manifestProxy);
         }
-        else {
-            // there is a replace attribute on this node, so add it to the parts collection of the manifestRoot
-            // instead of to the childNodes
-            const replacePart = new ReplacePartSymbol(replace);
-            replacePart.parent = parentManifest;
-            replacePart.template = manifestProxy;
-            partOwner.parts.push(replacePart);
-            if (parentManifest.templateController != null) {
-                parentManifest.templateController.parts.push(replacePart);
-            }
-            processReplacePart(this.dom, replacePart, manifestProxy);
+        else if (hasProjection) {
+            projectionOwner.projections.push(new ProjectionSymbol(projection, manifestProxy));
+            node.removeAttribute('au-slot');
+            node.remove();
         }
@@ -377,3 +376,3 @@ }
     }
-    bindChildNodes(node, surrogate, manifest, manifestRoot, parentManifestRoot, partName) {
+    bindChildNodes(node, surrogate, manifest, manifestRoot, parentManifestRoot) {
         let childNode;
@@ -397,4 +396,3 @@ if (node.nodeName === 'TEMPLATE') {
                     /* manifestRoot       */ manifestRoot, 
-                    /* parentManifestRoot */ parentManifestRoot, 
-                    /* partName           */ partName);
+                    /* parentManifestRoot */ parentManifestRoot);
                     childNode = nextChild;
@@ -432,3 +430,3 @@ break;
     }
-    declareTemplateController(attrSyntax, attrInfo, partName) {
+    declareTemplateController(attrSyntax, attrInfo) {
         let symbol;
@@ -440,7 +438,7 @@ const attrRawValue = attrSyntax.rawValue;
         if (isMultiBindings) {
-            symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, partName);
+            symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo);
             this.bindMultiAttribute(symbol, attrInfo, attrRawValue);
         }
         else {
-            symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, partName);
+            symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo);
             const bindingType = command === null ? 2048 /* Interpolation */ : command.bindingType;
@@ -447,0 +445,0 @@ const expr = this.exprParser.parse(attrRawValue, bindingType);

dist/esnext/template-compiler.js

@@ -14,4 +14,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { IAttributeParser, ResourceModel, } from '@aurelia/jit';
-import { mergeDistinct, PLATFORM, Registration, mergeArrays, toArray, ILogger, } from '@aurelia/kernel';
-import { HydrateAttributeInstruction, HydrateElementInstruction, HydrateTemplateController, IExpressionParser, InterpolationInstruction, ITemplateCompiler, LetBindingInstruction, LetElementInstruction, SetPropertyInstruction, CustomElementDefinition, IDOM, BindingMode, Bindable, CustomElement, } from '@aurelia/runtime';
+import { PLATFORM, Registration, mergeArrays, toArray, ILogger, } from '@aurelia/kernel';
+import { HydrateAttributeInstruction, HydrateElementInstruction, HydrateTemplateController, IExpressionParser, InterpolationInstruction, ITemplateCompiler, LetBindingInstruction, LetElementInstruction, SetPropertyInstruction, CustomElementDefinition, IDOM, BindingMode, Bindable, CustomElement, SlotInfo, AuSlotContentType, ProjectionContext, } from '@aurelia/runtime';
 import { SetAttributeInstruction, TextBindingInstruction, SetClassAttributeInstruction, SetStyleAttributeInstruction, } from '@aurelia/runtime-html';
@@ -28,4 +28,3 @@ import { IAttrSyntaxTransformer } from './attribute-syntax-transformer';
         this.surrogates = [];
-        this.scopeParts = [];
-        this.parts = {};
+        this.projectionsMap = new Map();
     }
@@ -38,6 +37,6 @@ toDefinition() {
             surrogates: mergeArrays(def.surrogates, this.surrogates),
-            scopeParts: mergeArrays(def.scopeParts, this.scopeParts),
             template: this.template,
             needsCompile: false,
             hasSlots: this.surrogate.hasSlots,
+            projectionsMap: this.projectionsMap,
         });
@@ -65,3 +64,3 @@ }
     let TemplateCompiler = class TemplateCompiler {
-        constructor(factory, attrParser, exprParser, attrSyntaxModifier, logger) {
+        constructor(factory, attrParser, exprParser, attrSyntaxModifier, logger, dom) {
             this.factory = factory;
@@ -71,2 +70,3 @@ this.attrParser = attrParser;
             this.attrSyntaxModifier = attrSyntaxModifier;
+            this.dom = dom;
             this.logger = logger.scopeTo('TemplateCompiler');
@@ -80,3 +80,3 @@ }
         }
-        compile(partialDefinition, context) {
+        compile(partialDefinition, context, targetedProjections) {
             const definition = CustomElementDefinition.getOrCreate(partialDefinition);
@@ -111,3 +111,3 @@ if (definition.template === null || definition.template === void 0) {
             }
-            this.compileChildNodes(surrogate, compilation.instructions, compilation.scopeParts);
+            this.compileChildNodes(surrogate, compilation.instructions, compilation.projectionsMap, targetedProjections);
             const compiledDefinition = compilation.toDefinition();
@@ -117,4 +117,4 @@ this.compilation = null;
         }
-        compileChildNodes(parent, instructionRows, scopeParts) {
-            if ((parent.flags & 8192 /* hasChildNodes */) > 0) {
+        compileChildNodes(parent, instructionRows, projections, targetedProjections) {
+            if ((parent.flags & 16384 /* hasChildNodes */) > 0) {
                 const childNodes = parent.childNodes;
@@ -140,3 +140,3 @@ const ii = childNodes.length;
                     else {
-                        this.compileParentNode(childNode, instructionRows, scopeParts);
+                        this.compileParentNode(childNode, instructionRows, projections, targetedProjections);
                     }
@@ -146,10 +146,27 @@ }
         }
-        compileCustomElement(symbol, instructionRows, scopeParts) {
+        compileCustomElement(symbol, instructionRows, projections, targetedProjections) {
+            var _a;
+            const isAuSlot = (symbol.flags & 512 /* isAuSlot */) > 0;
             // offset 1 to leave a spot for the hydrate instruction so we don't need to create 2 arrays with a spread etc
             const instructionRow = this.compileAttributes(symbol, 1);
-            instructionRow[0] = new HydrateElementInstruction(symbol.res, this.compileBindings(symbol), this.compileParts(symbol, scopeParts));
+            const slotName = symbol.slotName;
+            let slotInfo = null;
+            if (isAuSlot) {
+                // eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion,@typescript-eslint/no-unnecessary-type-assertion
+                const targetedProjection = (_a = targetedProjections === null || targetedProjections === void 0 ? void 0 : targetedProjections.projections) === null || _a === void 0 ? void 0 : _a[slotName];
+                slotInfo = targetedProjection !== void 0
+                    ? new SlotInfo(slotName, AuSlotContentType.Projection, new ProjectionContext(targetedProjection, targetedProjections === null || targetedProjections === void 0 ? void 0 : targetedProjections.scope))
+                    : new SlotInfo(slotName, AuSlotContentType.Fallback, new ProjectionContext(this.compileProjectionFallback(symbol, projections, targetedProjections)));
+            }
+            const instruction = instructionRow[0] = new HydrateElementInstruction(symbol.res, this.compileBindings(symbol), slotInfo);
+            const compiledProjections = this.compileProjections(symbol, projections, targetedProjections);
+            if (compiledProjections !== null) {
+                projections.set(instruction, compiledProjections);
+            }
             instructionRows.push(instructionRow);
-            this.compileChildNodes(symbol, instructionRows, scopeParts);
+            if (!isAuSlot) {
+                this.compileChildNodes(symbol, instructionRows, projections, targetedProjections);
+            }
         }
-        compilePlainElement(symbol, instructionRows, scopeParts) {
+        compilePlainElement(symbol, instructionRows, projections, targetedProjections) {
             const attributes = this.compileAttributes(symbol, 0);
@@ -159,25 +176,23 @@ if (attributes.length > 0) {
             }
-            this.compileChildNodes(symbol, instructionRows, scopeParts);
+            this.compileChildNodes(symbol, instructionRows, projections, targetedProjections);
         }
-        compileParentNode(symbol, instructionRows, scopeParts) {
-            switch (symbol.flags & 511 /* type */) {
+        compileParentNode(symbol, instructionRows, projections, targetedProjections) {
+            switch (symbol.flags & 1023 /* type */) {
                 case 16 /* isCustomElement */:
-                    this.compileCustomElement(symbol, instructionRows, scopeParts);
+                case 512 /* isAuSlot */:
+                    this.compileCustomElement(symbol, instructionRows, projections, targetedProjections);
                     break;
                 case 64 /* isPlainElement */:
-                    this.compilePlainElement(symbol, instructionRows, scopeParts);
+                    this.compilePlainElement(symbol, instructionRows, projections, targetedProjections);
                     break;
                 case 1 /* isTemplateController */:
-                    this.compileTemplateController(symbol, instructionRows, scopeParts);
+                    this.compileTemplateController(symbol, instructionRows, projections, targetedProjections);
             }
         }
-        compileTemplateController(symbol, instructionRows, scopeParts) {
+        compileTemplateController(symbol, instructionRows, projections, targetedProjections) {
             const bindings = this.compileBindings(symbol);
             const controllerInstructionRows = [];
-            const controllerScopeParts = [];
-            this.compileParentNode(symbol.template, controllerInstructionRows, controllerScopeParts);
-            mergeDistinct(scopeParts, controllerScopeParts, false);
+            this.compileParentNode(symbol.template, controllerInstructionRows, projections, targetedProjections);
             const def = CustomElementDefinition.create({
-                name: symbol.partName === null ? symbol.res : symbol.partName,
-                scopeParts: controllerScopeParts,
+                name: symbol.res,
                 template: symbol.physicalNode,
@@ -187,14 +202,7 @@ instructions: controllerInstructionRows,
             });
-            let parts = void 0;
-            if ((symbol.flags & 16384 /* hasParts */) > 0) {
-                parts = {};
-                for (const part of symbol.parts) {
-                    parts[part.name] = this.compilation.parts[part.name];
-                }
-            }
-            instructionRows.push([new HydrateTemplateController(def, symbol.res, bindings, symbol.res === 'else', parts)]);
+            instructionRows.push([new HydrateTemplateController(def, symbol.res, bindings, symbol.res === 'else')]);
         }
         compileBindings(symbol) {
             let bindingInstructions;
-            if ((symbol.flags & 4096 /* hasBindings */) > 0) {
+            if ((symbol.flags & 8192 /* hasBindings */) > 0) {
                 // either a custom element with bindings, a custom attribute / template controller with dynamic options,
@@ -235,3 +243,3 @@ // or a single value custom attribute binding
             let attributeInstructions;
-            if ((symbol.flags & 2048 /* hasAttributes */) > 0) {
+            if ((symbol.flags & 4096 /* hasAttributes */) > 0) {
                 // any attributes on a custom element (which are not bindables) or a plain element
@@ -301,29 +309,41 @@ const customAttributes = symbol.customAttributes;
         // }
-        compileParts(symbol, scopeParts) {
-            const parts = {};
-            if ((symbol.flags & 16384 /* hasParts */) > 0) {
-                const replaceParts = symbol.parts;
-                const len = replaceParts.length;
-                let s = scopeParts.length;
-                for (let i = 0; i < len; ++i) {
-                    const replacePart = replaceParts[i];
-                    if (!scopeParts.includes(replacePart.name)) {
-                        scopeParts[s++] = replacePart.name;
+        compileProjections(symbol, projectionMap, targetedProjections) {
+            var _a;
+            if ((symbol.flags & 32768 /* hasProjections */) === 0) {
+                return null;
+            }
+            const dom = this.dom;
+            const projections = Object.create(null);
+            const $projections = symbol.projections;
+            const len = $projections.length;
+            for (let i = 0; i < len; ++i) {
+                const projection = $projections[i];
+                const name = projection.name;
+                const instructions = [];
+                this.compileParentNode(projection.template, instructions, projectionMap, targetedProjections);
+                const definition = projections[name];
+                if (definition === void 0) {
+                    let template = projection.template.physicalNode;
+                    if (template.tagName !== 'TEMPLATE') {
+                        const _template = dom.createTemplate();
+                        dom.appendChild(_template.content, template);
+                        template = _template;
                     }
-                    const partScopeParts = [];
-                    const partInstructionRows = [];
-                    this.compileParentNode(replacePart.template, partInstructionRows, partScopeParts);
-                    // TODO: the assignment to `this.compilation.parts[replacePart.name]` might be the cause of replaceable bug reported by rluba
-                    // need to verify this
-                    this.compilation.parts[replacePart.name] = parts[replacePart.name] = CustomElementDefinition.create({
-                        name: replacePart.name,
-                        scopeParts: partScopeParts,
-                        template: replacePart.physicalNode,
-                        instructions: partInstructionRows,
-                        needsCompile: false,
-                    });
+                    projections[name] = CustomElementDefinition.create({ name, template, instructions, needsCompile: false });
                 }
+                else {
+                    // consolidate the projections to same slot
+                    dom.appendChild(definition.template.content, (_a = projection.template) === null || _a === void 0 ? void 0 : _a.physicalNode);
+                    definition.instructions.push(...instructions);
+                }
             }
-            return parts;
+            return projections;
         }
+        compileProjectionFallback(symbol, projections, targetedProjections) {
+            const instructions = [];
+            this.compileChildNodes(symbol, instructions, projections, targetedProjections);
+            const template = this.dom.createTemplate();
+            template.content.append(...toArray(symbol.physicalNode.childNodes));
+            return CustomElementDefinition.create({ name: CustomElement.generateName(), template, instructions, needsCompile: false });
+        }
     };
@@ -336,3 +356,4 @@ TemplateCompiler = __decorate([
         __param(4, ILogger),
-        __metadata("design:paramtypes", [Object, Object, Object, Object, Object])
+        __param(5, IDOM),
+        __metadata("design:paramtypes", [Object, Object, Object, Object, Object, Object])
     ], TemplateCompiler);
@@ -339,0 +360,0 @@ return TemplateCompiler;

dist/semantic-model.d.ts

@@ -1,2 +0,2 @@
-import { AnySymbol as $AnySymbol, BindingSymbol, CustomAttributeSymbol, CustomElementSymbol as $CustomElementSymbol, ElementSymbol as $ElementSymbol, LetElementSymbol as $LetElementSymbol, NodeSymbol as $NodeSymbol, ParentNodeSymbol as $ParentNodeSymbol, PlainAttributeSymbol, PlainElementSymbol as $PlainElementSymbol, ReplacePartSymbol as $ReplacePartSymbol, ResourceAttributeSymbol as $ResourceAttributeSymbol, SymbolWithBindings as $SymbolWithBindings, SymbolWithMarker as $SymbolWithMarker, SymbolWithTemplate as $SymbolWithTemplate, TemplateControllerSymbol as $TemplateControllerSymbol, TextSymbol as $TextSymbol } from '@aurelia/jit';
+import { AnySymbol as $AnySymbol, BindingSymbol, CustomAttributeSymbol, CustomElementSymbol as $CustomElementSymbol, ElementSymbol as $ElementSymbol, LetElementSymbol as $LetElementSymbol, NodeSymbol as $NodeSymbol, ParentNodeSymbol as $ParentNodeSymbol, PlainAttributeSymbol, PlainElementSymbol as $PlainElementSymbol, ResourceAttributeSymbol as $ResourceAttributeSymbol, SymbolWithBindings as $SymbolWithBindings, SymbolWithMarker as $SymbolWithMarker, SymbolWithTemplate as $SymbolWithTemplate, TemplateControllerSymbol as $TemplateControllerSymbol, TextSymbol as $TextSymbol, ProjectionSymbol as $ProjectionSymbol } from '@aurelia/jit';
 export declare type AnySymbol = $AnySymbol<Text, HTMLTemplateElement | HTMLElement, Comment>;
@@ -16,3 +16,3 @@ export declare type ElementSymbol = $ElementSymbol<Text, HTMLTemplateElement | HTMLElement, Comment>;
 }
-declare class $$ReplacePartSymbol extends $ReplacePartSymbol<Text, HTMLTemplateElement | HTMLElement, Comment> {
+declare class $$ProjectionSymbol extends $ProjectionSymbol<Text, HTMLTemplateElement | HTMLElement, Comment> {
 }
@@ -26,3 +26,3 @@ declare class $$TemplateControllerSymbol extends $TemplateControllerSymbol<Text, HTMLTemplateElement | HTMLElement, Comment> {
 export declare const PlainElementSymbol: typeof $$PlainElementSymbol;
-export declare const ReplacePartSymbol: typeof $$ReplacePartSymbol;
+export declare const ProjectionSymbol: typeof $$ProjectionSymbol;
 export declare const TemplateControllerSymbol: typeof $$TemplateControllerSymbol;
@@ -36,3 +36,3 @@ export declare const TextSymbol: typeof $$TextSymbol;
 }
-export interface ReplacePartSymbol extends $$ReplacePartSymbol {
+export interface ProjectionSymbol extends $$ProjectionSymbol {
 }
@@ -39,0 +39,0 @@ export interface TemplateControllerSymbol extends $$TemplateControllerSymbol {

dist/umd/semantic-model.js

@@ -12,3 +12,3 @@ (function (factory) {
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.PlainAttributeSymbol = exports.CustomAttributeSymbol = exports.BindingSymbol = exports.TextSymbol = exports.TemplateControllerSymbol = exports.ReplacePartSymbol = exports.PlainElementSymbol = exports.LetElementSymbol = exports.CustomElementSymbol = void 0;
+    exports.PlainAttributeSymbol = exports.CustomAttributeSymbol = exports.BindingSymbol = exports.TextSymbol = exports.TemplateControllerSymbol = exports.ProjectionSymbol = exports.PlainElementSymbol = exports.LetElementSymbol = exports.CustomElementSymbol = void 0;
     const jit_1 = require("@aurelia/jit");
@@ -21,3 +21,3 @@ Object.defineProperty(exports, "BindingSymbol", { enumerable: true, get: function () { return jit_1.BindingSymbol; } });
     exports.PlainElementSymbol = jit_1.PlainElementSymbol;
-    exports.ReplacePartSymbol = jit_1.ReplacePartSymbol;
+    exports.ProjectionSymbol = jit_1.ProjectionSymbol;
     exports.TemplateControllerSymbol = jit_1.TemplateControllerSymbol;
@@ -24,0 +24,0 @@ exports.TextSymbol = jit_1.TextSymbol;

dist/umd/template-binder.js

@@ -20,7 +20,6 @@ /* eslint-disable compat/compat */
         'id': true,
-        'replace': true
+        'au-slot': true,
     });
     const attributesToIgnore = Object.assign(Object.create(null), {
         'as-element': true,
-        'replace': true
     });
@@ -90,21 +89,2 @@ function hasInlineBindings(rawValue) {
     }
-    function processReplacePart(dom, replacePart, manifestProxy) {
-        let proxyNode;
-        let currentTemplate;
-        if ((manifestProxy.flags & 512 /* hasMarker */) > 0) {
-            proxyNode = manifestProxy.marker;
-        }
-        else {
-            proxyNode = manifestProxy.physicalNode;
-        }
-        if (proxyNode.nodeName === 'TEMPLATE') {
-            // if it's a template element, no need to do anything special, just assign it to the replacePart
-            replacePart.physicalNode = proxyNode;
-        }
-        else {
-            // otherwise wrap the replace in a template
-            currentTemplate = replacePart.physicalNode = dom.createTemplate();
-            currentTemplate.content.appendChild(proxyNode);
-        }
-    }
     /**
@@ -176,7 +156,8 @@ * TemplateBinder. Todo: describe goal of this class
             /* manifestRoot       */ null, 
-            /* parentManifestRoot */ null, 
-            /* partName           */ null);
+            /* parentManifestRoot */ null);
             return surrogate;
         }
-        bindManifest(parentManifest, node, surrogate, manifest, manifestRoot, parentManifestRoot, partName) {
+        bindManifest(parentManifest, node, surrogate, manifest, manifestRoot, parentManifestRoot) {
+            var _a;
+            let isAuSlot = false;
             switch (node.nodeName) {
@@ -191,8 +172,7 @@ case 'LET':
                     surrogate.hasSlots = true;
+                    break;
+                case 'AU-SLOT':
+                    isAuSlot = true;
+                    break;
             }
-            // get the part name to override the name of the compiled definition
-            partName = node.getAttribute('replaceable');
-            if (partName === '') {
-                partName = 'default';
-            }
             let name = node.getAttribute('as-element');
@@ -210,3 +190,8 @@ if (name === null) {
                 parentManifestRoot = manifestRoot;
-                manifestRoot = manifest = new semantic_model_1.CustomElementSymbol(this.dom, node, elementInfo);
+                const ceSymbol = new semantic_model_1.CustomElementSymbol(this.dom, node, elementInfo);
+                if (isAuSlot) {
+                    ceSymbol.flags = 512 /* isAuSlot */;
+                    ceSymbol.slotName = (_a = node.getAttribute("name")) !== null && _a !== void 0 ? _a : "default";
+                }
+                manifestRoot = manifest = ceSymbol;
             }
@@ -219,4 +204,3 @@ // lifting operations done by template controllers and replaces effectively unlink the nodes, so start at the bottom
             /* manifestRoot       */ manifestRoot, 
-            /* parentManifestRoot */ parentManifestRoot, 
-            /* partName           */ partName);
+            /* parentManifestRoot */ parentManifestRoot);
             // the parentManifest will receive either the direct child nodes, or the template controllers / replaces
@@ -230,4 +214,3 @@ // wrapping them
             /* manifestRoot       */ manifestRoot, 
-            /* parentManifestRoot */ parentManifestRoot, 
-            /* partName           */ partName);
+            /* parentManifestRoot */ parentManifestRoot);
             if (manifestRoot === manifest && manifest.isContainerless) {
@@ -263,3 +246,4 @@ node.parentNode.replaceChild(manifest.marker, node);
         }
-        bindAttributes(node, parentManifest, surrogate, manifest, manifestRoot, parentManifestRoot, partName) {
+        bindAttributes(node, parentManifest, surrogate, manifest, manifestRoot, parentManifestRoot) {
+            var _a;
             // This is the top-level symbol for the current depth.
@@ -298,4 +282,3 @@ // If there are no template controllers or replaces, it is always the manifest itself.
                         /* attrSyntax */ attrSyntax, 
-                        /* attrInfo   */ attrInfo, 
-                        /* partName   */ partName);
+                        /* attrInfo   */ attrInfo);
                         // the proxy and the manifest are only identical when we're at the first template controller (since the controller
@@ -340,23 +323,39 @@ // is assigned to the proxy), so this evaluates to true at most once per node
             }
+            let projection = node.getAttribute('au-slot');
+            if (projection === '') {
+                projection = 'default';
+            }
+            const hasProjection = projection !== null;
+            if (hasProjection && isTemplateControllerOf(manifestProxy, manifest)) {
+                // prevents <some-el au-slot TEMPLATE.CONTROLLER></some-el>.
+                throw new Error(`Unsupported usage of [au-slot="${projection}"] along with a template controller (if, else, repeat.for etc.) found (example: <some-el au-slot if.bind="true"></some-el>).`);
+                /**
+                 * TODO: prevent <template TEMPLATE.CONTROLLER><some-el au-slot></some-el></template>.
+                 * But there is not easy way for now, as the attribute binding is done after binding the child nodes.
+                 * This means by the time the template controller in the ancestor is processed, the projection is already registered.
+                 */
+            }
+            const parentName = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeName.toLowerCase();
+            if (hasProjection
+                && (manifestRoot === null
+                    || parentName === void 0
+                    || this.resources.getElementInfo(parentName) === null)) {
+                /**
+                 * Prevents the following cases:
+                 * - <template><div au-slot></div></template>
+                 * - <my-ce><div><div au-slot></div></div></my-ce>
+                 * - <my-ce><div au-slot="s1"><div au-slot="s2"></div></div></my-ce>
+                 */
+                throw new Error(`Unsupported usage of [au-slot="${projection}"]. It seems that projection is attempted, but not for a custom element.`);
+            }
             processTemplateControllers(this.dom, manifestProxy, manifest);
-            let replace = node.getAttribute('replace');
-            if (replace === '' || (replace === null && manifestRoot !== null && manifestRoot.isContainerless && ((parentManifest.flags & 16 /* isCustomElement */) > 0))) {
-                replace = 'default';
-            }
-            const partOwner = manifest === manifestRoot ? parentManifestRoot : manifestRoot;
-            if (replace === null || partOwner === null) {
+            const projectionOwner = manifest === manifestRoot ? parentManifestRoot : manifestRoot;
+            if (!hasProjection || projectionOwner === null) {
                 // the proxy is either the manifest itself or the outer-most controller; add it directly to the parent
                 parentManifest.childNodes.push(manifestProxy);
             }
-            else {
-                // there is a replace attribute on this node, so add it to the parts collection of the manifestRoot
-                // instead of to the childNodes
-                const replacePart = new semantic_model_1.ReplacePartSymbol(replace);
-                replacePart.parent = parentManifest;
-                replacePart.template = manifestProxy;
-                partOwner.parts.push(replacePart);
-                if (parentManifest.templateController != null) {
-                    parentManifest.templateController.parts.push(replacePart);
-                }
-                processReplacePart(this.dom, replacePart, manifestProxy);
+            else if (hasProjection) {
+                projectionOwner.projections.push(new semantic_model_1.ProjectionSymbol(projection, manifestProxy));
+                node.removeAttribute('au-slot');
+                node.remove();
             }
@@ -389,3 +388,3 @@ }
         }
-        bindChildNodes(node, surrogate, manifest, manifestRoot, parentManifestRoot, partName) {
+        bindChildNodes(node, surrogate, manifest, manifestRoot, parentManifestRoot) {
             let childNode;
@@ -409,4 +408,3 @@ if (node.nodeName === 'TEMPLATE') {
                         /* manifestRoot       */ manifestRoot, 
-                        /* parentManifestRoot */ parentManifestRoot, 
-                        /* partName           */ partName);
+                        /* parentManifestRoot */ parentManifestRoot);
                         childNode = nextChild;
@@ -444,3 +442,3 @@ break;
         }
-        declareTemplateController(attrSyntax, attrInfo, partName) {
+        declareTemplateController(attrSyntax, attrInfo) {
             let symbol;
@@ -452,7 +450,7 @@ const attrRawValue = attrSyntax.rawValue;
             if (isMultiBindings) {
-                symbol = new semantic_model_1.TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, partName);
+                symbol = new semantic_model_1.TemplateControllerSymbol(this.dom, attrSyntax, attrInfo);
                 this.bindMultiAttribute(symbol, attrInfo, attrRawValue);
             }
             else {
-                symbol = new semantic_model_1.TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, partName);
+                symbol = new semantic_model_1.TemplateControllerSymbol(this.dom, attrSyntax, attrInfo);
                 const bindingType = command === null ? 2048 /* Interpolation */ : command.bindingType;
@@ -459,0 +457,0 @@ const expr = this.exprParser.parse(attrRawValue, bindingType);

dist/umd/template-compiler.js

@@ -39,4 +39,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             this.surrogates = [];
-            this.scopeParts = [];
-            this.parts = {};
+            this.projectionsMap = new Map();
         }
@@ -49,6 +48,6 @@ toDefinition() {
                 surrogates: kernel_1.mergeArrays(def.surrogates, this.surrogates),
-                scopeParts: kernel_1.mergeArrays(def.scopeParts, this.scopeParts),
                 template: this.template,
                 needsCompile: false,
                 hasSlots: this.surrogate.hasSlots,
+                projectionsMap: this.projectionsMap,
             });
@@ -76,3 +75,3 @@ }
         let TemplateCompiler = class TemplateCompiler {
-            constructor(factory, attrParser, exprParser, attrSyntaxModifier, logger) {
+            constructor(factory, attrParser, exprParser, attrSyntaxModifier, logger, dom) {
                 this.factory = factory;
@@ -82,2 +81,3 @@ this.attrParser = attrParser;
                 this.attrSyntaxModifier = attrSyntaxModifier;
+                this.dom = dom;
                 this.logger = logger.scopeTo('TemplateCompiler');
@@ -91,3 +91,3 @@ }
             }
-            compile(partialDefinition, context) {
+            compile(partialDefinition, context, targetedProjections) {
                 const definition = runtime_1.CustomElementDefinition.getOrCreate(partialDefinition);
@@ -122,3 +122,3 @@ if (definition.template === null || definition.template === void 0) {
                 }
-                this.compileChildNodes(surrogate, compilation.instructions, compilation.scopeParts);
+                this.compileChildNodes(surrogate, compilation.instructions, compilation.projectionsMap, targetedProjections);
                 const compiledDefinition = compilation.toDefinition();
@@ -128,4 +128,4 @@ this.compilation = null;
             }
-            compileChildNodes(parent, instructionRows, scopeParts) {
-                if ((parent.flags & 8192 /* hasChildNodes */) > 0) {
+            compileChildNodes(parent, instructionRows, projections, targetedProjections) {
+                if ((parent.flags & 16384 /* hasChildNodes */) > 0) {
                     const childNodes = parent.childNodes;
@@ -151,3 +151,3 @@ const ii = childNodes.length;
                         else {
-                            this.compileParentNode(childNode, instructionRows, scopeParts);
+                            this.compileParentNode(childNode, instructionRows, projections, targetedProjections);
                         }
@@ -157,10 +157,27 @@ }
             }
-            compileCustomElement(symbol, instructionRows, scopeParts) {
+            compileCustomElement(symbol, instructionRows, projections, targetedProjections) {
+                var _a;
+                const isAuSlot = (symbol.flags & 512 /* isAuSlot */) > 0;
                 // offset 1 to leave a spot for the hydrate instruction so we don't need to create 2 arrays with a spread etc
                 const instructionRow = this.compileAttributes(symbol, 1);
-                instructionRow[0] = new runtime_1.HydrateElementInstruction(symbol.res, this.compileBindings(symbol), this.compileParts(symbol, scopeParts));
+                const slotName = symbol.slotName;
+                let slotInfo = null;
+                if (isAuSlot) {
+                    // eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion,@typescript-eslint/no-unnecessary-type-assertion
+                    const targetedProjection = (_a = targetedProjections === null || targetedProjections === void 0 ? void 0 : targetedProjections.projections) === null || _a === void 0 ? void 0 : _a[slotName];
+                    slotInfo = targetedProjection !== void 0
+                        ? new runtime_1.SlotInfo(slotName, runtime_1.AuSlotContentType.Projection, new runtime_1.ProjectionContext(targetedProjection, targetedProjections === null || targetedProjections === void 0 ? void 0 : targetedProjections.scope))
+                        : new runtime_1.SlotInfo(slotName, runtime_1.AuSlotContentType.Fallback, new runtime_1.ProjectionContext(this.compileProjectionFallback(symbol, projections, targetedProjections)));
+                }
+                const instruction = instructionRow[0] = new runtime_1.HydrateElementInstruction(symbol.res, this.compileBindings(symbol), slotInfo);
+                const compiledProjections = this.compileProjections(symbol, projections, targetedProjections);
+                if (compiledProjections !== null) {
+                    projections.set(instruction, compiledProjections);
+                }
                 instructionRows.push(instructionRow);
-                this.compileChildNodes(symbol, instructionRows, scopeParts);
+                if (!isAuSlot) {
+                    this.compileChildNodes(symbol, instructionRows, projections, targetedProjections);
+                }
             }
-            compilePlainElement(symbol, instructionRows, scopeParts) {
+            compilePlainElement(symbol, instructionRows, projections, targetedProjections) {
                 const attributes = this.compileAttributes(symbol, 0);
@@ -170,25 +187,23 @@ if (attributes.length > 0) {
                 }
-                this.compileChildNodes(symbol, instructionRows, scopeParts);
+                this.compileChildNodes(symbol, instructionRows, projections, targetedProjections);
             }
-            compileParentNode(symbol, instructionRows, scopeParts) {
-                switch (symbol.flags & 511 /* type */) {
+            compileParentNode(symbol, instructionRows, projections, targetedProjections) {
+                switch (symbol.flags & 1023 /* type */) {
                     case 16 /* isCustomElement */:
-                        this.compileCustomElement(symbol, instructionRows, scopeParts);
+                    case 512 /* isAuSlot */:
+                        this.compileCustomElement(symbol, instructionRows, projections, targetedProjections);
                         break;
                     case 64 /* isPlainElement */:
-                        this.compilePlainElement(symbol, instructionRows, scopeParts);
+                        this.compilePlainElement(symbol, instructionRows, projections, targetedProjections);
                         break;
                     case 1 /* isTemplateController */:
-                        this.compileTemplateController(symbol, instructionRows, scopeParts);
+                        this.compileTemplateController(symbol, instructionRows, projections, targetedProjections);
                 }
             }
-            compileTemplateController(symbol, instructionRows, scopeParts) {
+            compileTemplateController(symbol, instructionRows, projections, targetedProjections) {
                 const bindings = this.compileBindings(symbol);
                 const controllerInstructionRows = [];
-                const controllerScopeParts = [];
-                this.compileParentNode(symbol.template, controllerInstructionRows, controllerScopeParts);
-                kernel_1.mergeDistinct(scopeParts, controllerScopeParts, false);
+                this.compileParentNode(symbol.template, controllerInstructionRows, projections, targetedProjections);
                 const def = runtime_1.CustomElementDefinition.create({
-                    name: symbol.partName === null ? symbol.res : symbol.partName,
-                    scopeParts: controllerScopeParts,
+                    name: symbol.res,
                     template: symbol.physicalNode,
@@ -198,14 +213,7 @@ instructions: controllerInstructionRows,
                 });
-                let parts = void 0;
-                if ((symbol.flags & 16384 /* hasParts */) > 0) {
-                    parts = {};
-                    for (const part of symbol.parts) {
-                        parts[part.name] = this.compilation.parts[part.name];
-                    }
-                }
-                instructionRows.push([new runtime_1.HydrateTemplateController(def, symbol.res, bindings, symbol.res === 'else', parts)]);
+                instructionRows.push([new runtime_1.HydrateTemplateController(def, symbol.res, bindings, symbol.res === 'else')]);
             }
             compileBindings(symbol) {
                 let bindingInstructions;
-                if ((symbol.flags & 4096 /* hasBindings */) > 0) {
+                if ((symbol.flags & 8192 /* hasBindings */) > 0) {
                     // either a custom element with bindings, a custom attribute / template controller with dynamic options,
@@ -246,3 +254,3 @@ // or a single value custom attribute binding
                 let attributeInstructions;
-                if ((symbol.flags & 2048 /* hasAttributes */) > 0) {
+                if ((symbol.flags & 4096 /* hasAttributes */) > 0) {
                     // any attributes on a custom element (which are not bindables) or a plain element
@@ -312,29 +320,41 @@ const customAttributes = symbol.customAttributes;
             // }
-            compileParts(symbol, scopeParts) {
-                const parts = {};
-                if ((symbol.flags & 16384 /* hasParts */) > 0) {
-                    const replaceParts = symbol.parts;
-                    const len = replaceParts.length;
-                    let s = scopeParts.length;
-                    for (let i = 0; i < len; ++i) {
-                        const replacePart = replaceParts[i];
-                        if (!scopeParts.includes(replacePart.name)) {
-                            scopeParts[s++] = replacePart.name;
+            compileProjections(symbol, projectionMap, targetedProjections) {
+                var _a;
+                if ((symbol.flags & 32768 /* hasProjections */) === 0) {
+                    return null;
+                }
+                const dom = this.dom;
+                const projections = Object.create(null);
+                const $projections = symbol.projections;
+                const len = $projections.length;
+                for (let i = 0; i < len; ++i) {
+                    const projection = $projections[i];
+                    const name = projection.name;
+                    const instructions = [];
+                    this.compileParentNode(projection.template, instructions, projectionMap, targetedProjections);
+                    const definition = projections[name];
+                    if (definition === void 0) {
+                        let template = projection.template.physicalNode;
+                        if (template.tagName !== 'TEMPLATE') {
+                            const _template = dom.createTemplate();
+                            dom.appendChild(_template.content, template);
+                            template = _template;
                         }
-                        const partScopeParts = [];
-                        const partInstructionRows = [];
-                        this.compileParentNode(replacePart.template, partInstructionRows, partScopeParts);
-                        // TODO: the assignment to `this.compilation.parts[replacePart.name]` might be the cause of replaceable bug reported by rluba
-                        // need to verify this
-                        this.compilation.parts[replacePart.name] = parts[replacePart.name] = runtime_1.CustomElementDefinition.create({
-                            name: replacePart.name,
-                            scopeParts: partScopeParts,
-                            template: replacePart.physicalNode,
-                            instructions: partInstructionRows,
-                            needsCompile: false,
-                        });
+                        projections[name] = runtime_1.CustomElementDefinition.create({ name, template, instructions, needsCompile: false });
                     }
+                    else {
+                        // consolidate the projections to same slot
+                        dom.appendChild(definition.template.content, (_a = projection.template) === null || _a === void 0 ? void 0 : _a.physicalNode);
+                        definition.instructions.push(...instructions);
+                    }
                 }
-                return parts;
+                return projections;
             }
+            compileProjectionFallback(symbol, projections, targetedProjections) {
+                const instructions = [];
+                this.compileChildNodes(symbol, instructions, projections, targetedProjections);
+                const template = this.dom.createTemplate();
+                template.content.append(...kernel_1.toArray(symbol.physicalNode.childNodes));
+                return runtime_1.CustomElementDefinition.create({ name: runtime_1.CustomElement.generateName(), template, instructions, needsCompile: false });
+            }
         };
@@ -347,3 +367,4 @@ TemplateCompiler = __decorate([
             __param(4, kernel_1.ILogger),
-            __metadata("design:paramtypes", [Object, Object, Object, Object, Object])
+            __param(5, runtime_1.IDOM),
+            __metadata("design:paramtypes", [Object, Object, Object, Object, Object, Object])
         ], TemplateCompiler);
@@ -350,0 +371,0 @@ return TemplateCompiler;

package.json

 {
   "name": "@aurelia/jit-html",
-  "version": "0.8.0-dev.202010031322",
+  "version": "0.8.0-dev.202010031518",
   "main": "dist/umd/index.js",
@@ -37,8 +37,8 @@ "module": "dist/esnext/index.js",
   "dependencies": {
-    "@aurelia/jit": "^0.8.0-dev.202010031322",
-    "@aurelia/kernel": "^0.8.0-dev.202010031322",
-    "@aurelia/metadata": "^0.8.0-dev.202010031322",
-    "@aurelia/runtime": "^0.8.0-dev.202010031322",
-    "@aurelia/runtime-html": "^0.8.0-dev.202010031322",
-    "@aurelia/scheduler": "^0.8.0-dev.202010031322"
+    "@aurelia/jit": "^0.8.0-dev.202010031518",
+    "@aurelia/kernel": "^0.8.0-dev.202010031518",
+    "@aurelia/metadata": "^0.8.0-dev.202010031518",
+    "@aurelia/runtime": "^0.8.0-dev.202010031518",
+    "@aurelia/runtime-html": "^0.8.0-dev.202010031518",
+    "@aurelia/scheduler": "^0.8.0-dev.202010031518"
   },
@@ -48,3 +48,3 @@ "devDependencies": {
   },
-  "gitHead": "1e3894bc1ef0353a02072cf41c902ac3b6eb6628"
+  "gitHead": "78689e3dd5e58f39dbb4d450cc87d723f2c763bd"
 }

src/semantic-model.ts

@@ -12,3 +12,2 @@ import {
   PlainElementSymbol as $PlainElementSymbol,
-  ReplacePartSymbol as $ReplacePartSymbol,
   ResourceAttributeSymbol as $ResourceAttributeSymbol,
@@ -20,2 +19,3 @@ SymbolWithBindings as $SymbolWithBindings,
   TextSymbol as $TextSymbol,
+  ProjectionSymbol as $ProjectionSymbol
 } from '@aurelia/jit';
@@ -36,3 +36,3 @@
 declare class $$PlainElementSymbol extends $PlainElementSymbol<Text, HTMLTemplateElement | HTMLElement, Comment> {}
-declare class $$ReplacePartSymbol extends $ReplacePartSymbol<Text, HTMLTemplateElement | HTMLElement, Comment> {}
+declare class $$ProjectionSymbol extends $ProjectionSymbol<Text, HTMLTemplateElement | HTMLElement, Comment> {}
 declare class $$TemplateControllerSymbol extends $TemplateControllerSymbol<Text, HTMLTemplateElement | HTMLElement, Comment> {}
@@ -44,3 +44,3 @@ declare class $$TextSymbol extends $TextSymbol<Text, Comment> {}
 export const PlainElementSymbol = $PlainElementSymbol as typeof $$PlainElementSymbol;
-export const ReplacePartSymbol = $ReplacePartSymbol as typeof $$ReplacePartSymbol;
+export const ProjectionSymbol = $ProjectionSymbol as typeof $$ProjectionSymbol;
 export const TemplateControllerSymbol = $TemplateControllerSymbol as typeof $$TemplateControllerSymbol;
@@ -52,3 +52,3 @@ export const TextSymbol = $TextSymbol as typeof $$TextSymbol;
 export interface PlainElementSymbol extends $$PlainElementSymbol {}
-export interface ReplacePartSymbol extends $$ReplacePartSymbol {}
+export interface ProjectionSymbol extends $$ProjectionSymbol {}
 export interface TemplateControllerSymbol extends $$TemplateControllerSymbol {}
@@ -55,0 +55,0 @@ export interface TextSymbol extends $$TextSymbol {}

src/template-binder.ts

@@ -36,7 +36,6 @@ /* eslint-disable compat/compat */
   PlainElementSymbol,
-  ReplacePartSymbol,
   ResourceAttributeSymbol,
-  SymbolWithMarker,
   TemplateControllerSymbol,
   TextSymbol,
+  ProjectionSymbol,
 } from './semantic-model';
@@ -46,3 +45,3 @@
   'id': true,
-  'replace': true
+  'au-slot': true,
 }) as Record<string, boolean | undefined>;
@@ -52,3 +51,2 @@
   'as-element': true,
-  'replace': true
 }) as Record<string, boolean | undefined>;
@@ -120,24 +118,2 @@
 
-function processReplacePart(
-  dom: IDOM,
-  replacePart: ReplacePartSymbol,
-  manifestProxy: ParentNodeSymbol | SymbolWithMarker,
-): void {
-  let proxyNode: HTMLElement;
-  let currentTemplate: HTMLTemplateElement;
-  if ((manifestProxy.flags & SymbolFlags.hasMarker) > 0) {
-    proxyNode = (manifestProxy as SymbolWithMarker).marker as unknown as HTMLElement;
-  } else {
-    proxyNode = manifestProxy.physicalNode as HTMLElement;
-  }
-  if (proxyNode.nodeName === 'TEMPLATE') {
-    // if it's a template element, no need to do anything special, just assign it to the replacePart
-    replacePart.physicalNode = proxyNode as HTMLTemplateElement;
-  } else {
-    // otherwise wrap the replace in a template
-    currentTemplate = replacePart.physicalNode = dom.createTemplate() as HTMLTemplateElement;
-    currentTemplate.content.appendChild(proxyNode);
-  }
-}
-
 /**
@@ -216,3 +192,2 @@ * TemplateBinder. Todo: describe goal of this class
       /* parentManifestRoot */ null,
-      /* partName           */ null,
     );
@@ -230,4 +205,4 @@
     parentManifestRoot: CustomElementSymbol | null,
-    partName: string | null,
   ): void {
+    let isAuSlot = false;
     switch (node.nodeName) {
@@ -243,10 +218,8 @@ case 'LET':
         surrogate.hasSlots = true;
+        break;
+      case 'AU-SLOT':
+        isAuSlot = true;
+        break;
     }
 
-    // get the part name to override the name of the compiled definition
-    partName = node.getAttribute('replaceable');
-    if (partName === '') {
-      partName = 'default';
-    }
-
     let name = node.getAttribute('as-element');
@@ -264,3 +237,8 @@ if (name === null) {
       parentManifestRoot = manifestRoot;
-      manifestRoot = manifest = new CustomElementSymbol(this.dom, node, elementInfo);
+      const ceSymbol = new CustomElementSymbol(this.dom, node, elementInfo);
+      if (isAuSlot) {
+        ceSymbol.flags = SymbolFlags.isAuSlot;
+        ceSymbol.slotName = node.getAttribute("name") ?? "default";
+      }
+      manifestRoot = manifest = ceSymbol;
     }
@@ -275,3 +253,2 @@
       /* parentManifestRoot */ parentManifestRoot,
-      /* partName           */ partName,
     );
@@ -288,3 +265,2 @@
       /* parentManifestRoot */ parentManifestRoot,
-      /* partName           */ partName,
     );
@@ -335,3 +311,2 @@
     parentManifestRoot: CustomElementSymbol | null,
-    partName: string | null,
   ): void {
@@ -377,3 +352,2 @@ // This is the top-level symbol for the current depth.
             /* attrInfo   */ attrInfo,
-            /* partName   */ partName,
           );
@@ -419,27 +393,41 @@
     }
-    processTemplateControllers(this.dom, manifestProxy, manifest);
 
-    let replace = node.getAttribute('replace');
-    if (replace === '' || (replace === null && manifestRoot !== null && manifestRoot.isContainerless && ((parentManifest.flags & SymbolFlags.isCustomElement) > 0))) {
-      replace = 'default';
+    let projection = node.getAttribute('au-slot');
+    if (projection === '') {
+      projection = 'default';
     }
+    const hasProjection = projection !== null;
+    if (hasProjection && isTemplateControllerOf(manifestProxy, manifest)) {
+      // prevents <some-el au-slot TEMPLATE.CONTROLLER></some-el>.
+      throw new Error(`Unsupported usage of [au-slot="${projection}"] along with a template controller (if, else, repeat.for etc.) found (example: <some-el au-slot if.bind="true"></some-el>).`);
+      /**
+       * TODO: prevent <template TEMPLATE.CONTROLLER><some-el au-slot></some-el></template>.
+       * But there is not easy way for now, as the attribute binding is done after binding the child nodes.
+       * This means by the time the template controller in the ancestor is processed, the projection is already registered.
+       */
+    }
+    const parentName = node.parentNode?.nodeName.toLowerCase();
+    if (hasProjection
+      && (manifestRoot === null
+        || parentName === void 0
+        || this.resources.getElementInfo(parentName!) === null)) {
+      /**
+       * Prevents the following cases:
+       * - <template><div au-slot></div></template>
+       * - <my-ce><div><div au-slot></div></div></my-ce>
+       * - <my-ce><div au-slot="s1"><div au-slot="s2"></div></div></my-ce>
+       */
+      throw new Error(`Unsupported usage of [au-slot="${projection}"]. It seems that projection is attempted, but not for a custom element.`);
+    }
 
-    const partOwner: CustomElementSymbol | null = manifest === manifestRoot ? parentManifestRoot : manifestRoot;
+    processTemplateControllers(this.dom, manifestProxy, manifest);
+    const projectionOwner: CustomElementSymbol | null = manifest === manifestRoot ? parentManifestRoot : manifestRoot;
 
-    if (replace === null || partOwner === null) {
+    if (!hasProjection || projectionOwner === null) {
       // the proxy is either the manifest itself or the outer-most controller; add it directly to the parent
       parentManifest.childNodes.push(manifestProxy);
-    } else {
-      // there is a replace attribute on this node, so add it to the parts collection of the manifestRoot
-      // instead of to the childNodes
-      const replacePart = new ReplacePartSymbol(replace);
-      replacePart.parent = parentManifest;
-      replacePart.template = manifestProxy;
-      partOwner!.parts.push(replacePart);
-
-      if (parentManifest.templateController != null) {
-        parentManifest.templateController.parts.push(replacePart);
-      }
-
-      processReplacePart(this.dom, replacePart, manifestProxy);
+    } else if (hasProjection) {
+      projectionOwner!.projections.push(new ProjectionSymbol(projection!, manifestProxy));
+      node.removeAttribute('au-slot');
+      node.remove();
     }
@@ -480,3 +468,2 @@ }
     parentManifestRoot: CustomElementSymbol | null,
-    partName: string | null,
   ): void {
@@ -502,3 +489,2 @@ let childNode: ChildNode | null;
             /* parentManifestRoot */ parentManifestRoot,
-            /* partName           */ partName,
           );
@@ -547,3 +533,2 @@ childNode = nextChild;
     attrInfo: AttrInfo,
-    partName: string | null,
   ): TemplateControllerSymbol {
@@ -557,6 +542,6 @@ let symbol: TemplateControllerSymbol;
     if (isMultiBindings) {
-      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, partName);
+      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo);
       this.bindMultiAttribute(symbol, attrInfo, attrRawValue);
     } else {
-      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, partName);
+      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo);
       const bindingType = command === null ? BindingType.Interpolation : command.bindingType;
@@ -563,0 +548,0 @@ const expr = this.exprParser.parse(attrRawValue, bindingType);

src/template-compiler.ts

@@ -9,3 +9,2 @@ import {
   IResolver,
-  mergeDistinct,
   PLATFORM,
@@ -38,2 +37,7 @@ Registration,
   CustomElement,
+  IProjections,
+  SlotInfo,
+  AuSlotContentType,
+  RegisteredProjections,
+  ProjectionContext,
 } from '@aurelia/runtime';
@@ -69,4 +73,3 @@ import {
   public readonly surrogates: ITargetedInstruction[] = [];
-  public readonly scopeParts: string[] = [];
-  public readonly parts: Record<string, PartialCustomElementDefinition> = {};
+  public readonly projectionsMap: Map<ITargetedInstruction, IProjections> = new Map<ITargetedInstruction, IProjections>();
 
@@ -86,6 +89,6 @@ public constructor(
       surrogates: mergeArrays(def.surrogates, this.surrogates),
-      scopeParts: mergeArrays(def.scopeParts, this.scopeParts),
       template: this.template,
       needsCompile: false,
       hasSlots: this.surrogate.hasSlots,
+      projectionsMap: this.projectionsMap,
     });
@@ -126,2 +129,3 @@ }
     @ILogger logger: ILogger,
+    @IDOM private readonly dom: IDOM,
   ) {
@@ -135,3 +139,7 @@ this.logger = logger.scopeTo('TemplateCompiler');
 
-  public compile(partialDefinition: PartialCustomElementDefinition, context: IContainer): CustomElementDefinition {
+  public compile(
+    partialDefinition: PartialCustomElementDefinition,
+    context: IContainer,
+    targetedProjections: RegisteredProjections | null,
+  ): CustomElementDefinition {
     const definition = CustomElementDefinition.getOrCreate(partialDefinition);
@@ -174,3 +182,3 @@ if (definition.template === null || definition.template === void 0) {
 
-    this.compileChildNodes(surrogate, compilation.instructions, compilation.scopeParts);
+    this.compileChildNodes(surrogate, compilation.instructions, compilation.projectionsMap, targetedProjections);
 
@@ -186,3 +194,4 @@ const compiledDefinition = compilation.toDefinition();
     instructionRows: ITargetedInstruction[][],
-    scopeParts: string[],
+    projections: WeakMap<ITargetedInstruction, IProjections>,
+    targetedProjections: RegisteredProjections | null,
   ): void {
@@ -208,3 +217,3 @@ if ((parent.flags & SymbolFlags.hasChildNodes) > 0) {
         } else {
-          this.compileParentNode(childNode as ParentNodeSymbol, instructionRows, scopeParts);
+          this.compileParentNode(childNode as ParentNodeSymbol, instructionRows, projections, targetedProjections);
         }
@@ -218,15 +227,32 @@ }
     instructionRows: ITargetedInstruction[][],
-    scopeParts: string[],
+    projections: WeakMap<ITargetedInstruction, IProjections>,
+    targetedProjections: RegisteredProjections | null,
   ): void {
+    const isAuSlot = (symbol.flags & SymbolFlags.isAuSlot) > 0;
     // offset 1 to leave a spot for the hydrate instruction so we don't need to create 2 arrays with a spread etc
     const instructionRow = this.compileAttributes(symbol, 1) as HTMLInstructionRow;
-    instructionRow[0] = new HydrateElementInstruction(
+    const slotName = symbol.slotName!;
+    let slotInfo: SlotInfo | null = null;
+    if (isAuSlot) {
+      // eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion,@typescript-eslint/no-unnecessary-type-assertion
+      const targetedProjection = targetedProjections?.projections?.[slotName!];
+      slotInfo = targetedProjection !== void 0
+        ? new SlotInfo(slotName, AuSlotContentType.Projection, new ProjectionContext(targetedProjection, targetedProjections?.scope))
+        : new SlotInfo(slotName, AuSlotContentType.Fallback, new ProjectionContext(this.compileProjectionFallback(symbol, projections, targetedProjections)));
+    }
+    const instruction = instructionRow[0] = new HydrateElementInstruction(
       symbol.res,
       this.compileBindings(symbol),
-      this.compileParts(symbol, scopeParts),
+      slotInfo,
     );
+    const compiledProjections = this.compileProjections(symbol, projections, targetedProjections);
+    if (compiledProjections !== null) {
+      projections.set(instruction, compiledProjections);
+    }
 
     instructionRows.push(instructionRow);
 
-    this.compileChildNodes(symbol, instructionRows, scopeParts);
+    if (!isAuSlot) {
+      this.compileChildNodes(symbol, instructionRows, projections, targetedProjections);
+    }
   }
@@ -237,3 +263,4 @@
     instructionRows: ITargetedInstruction[][],
-    scopeParts: string[],
+    projections: WeakMap<ITargetedInstruction, IProjections>,
+    targetedProjections: RegisteredProjections | null,
   ): void {
@@ -245,3 +272,3 @@ const attributes = this.compileAttributes(symbol, 0);
 
-    this.compileChildNodes(symbol, instructionRows, scopeParts);
+    this.compileChildNodes(symbol, instructionRows, projections, targetedProjections);
   }
@@ -252,13 +279,15 @@
     instructionRows: ITargetedInstruction[][],
-    scopeParts: string[],
+    projections: WeakMap<ITargetedInstruction, IProjections>,
+    targetedProjections: RegisteredProjections | null,
   ): void {
     switch (symbol.flags & SymbolFlags.type) {
       case SymbolFlags.isCustomElement:
-        this.compileCustomElement(symbol as CustomElementSymbol, instructionRows, scopeParts);
+      case SymbolFlags.isAuSlot:
+        this.compileCustomElement(symbol as CustomElementSymbol, instructionRows, projections, targetedProjections);
         break;
       case SymbolFlags.isPlainElement:
-        this.compilePlainElement(symbol as PlainElementSymbol, instructionRows, scopeParts);
+        this.compilePlainElement(symbol as PlainElementSymbol, instructionRows, projections, targetedProjections);
         break;
       case SymbolFlags.isTemplateController:
-        this.compileTemplateController(symbol as TemplateControllerSymbol, instructionRows, scopeParts);
+        this.compileTemplateController(symbol as TemplateControllerSymbol, instructionRows, projections, targetedProjections);
     }
@@ -270,3 +299,4 @@ }
     instructionRows: ITargetedInstruction[][],
-    scopeParts: string[],
+    projections: WeakMap<ITargetedInstruction, IProjections>,
+    targetedProjections: RegisteredProjections | null,
   ): void {
@@ -276,11 +306,7 @@ const bindings = this.compileBindings(symbol);
     const controllerInstructionRows: ITargetedInstruction[][] = [];
-    const controllerScopeParts: string[] = [];
 
-    this.compileParentNode(symbol.template!, controllerInstructionRows, controllerScopeParts);
+    this.compileParentNode(symbol.template!, controllerInstructionRows, projections, targetedProjections);
 
-    mergeDistinct(scopeParts, controllerScopeParts, false);
-
     const def = CustomElementDefinition.create({
-      name: symbol.partName === null ? symbol.res : symbol.partName,
-      scopeParts: controllerScopeParts,
+      name: symbol.res,
       template: symbol.physicalNode,
@@ -291,11 +317,3 @@ instructions: controllerInstructionRows,
 
-    let parts: Record<string, PartialCustomElementDefinition> | undefined = void 0;
-    if ((symbol.flags & SymbolFlags.hasParts) > 0) {
-      parts = {};
-      for (const part of symbol.parts) {
-        parts[part.name] = this.compilation.parts[part.name];
-      }
-    }
-
-    instructionRows.push([new HydrateTemplateController(def, symbol.res, bindings, symbol.res === 'else', parts)]);
+    instructionRows.push([new HydrateTemplateController(def, symbol.res, bindings, symbol.res === 'else')]);
   }
@@ -419,37 +437,52 @@
 
-  private compileParts(
+  private compileProjections(
     symbol: CustomElementSymbol,
-    scopeParts: string[],
-  ): Record<string, PartialCustomElementDefinition> {
-    const parts: Record<string, PartialCustomElementDefinition> = {};
+    projectionMap: WeakMap<ITargetedInstruction, IProjections>,
+    targetedProjections: RegisteredProjections | null,
+  ): IProjections | null {
 
-    if ((symbol.flags & SymbolFlags.hasParts) > 0) {
-      const replaceParts = symbol.parts;
-      const len = replaceParts.length;
-      let s = scopeParts.length;
+    if ((symbol.flags & SymbolFlags.hasProjections) === 0) { return null; }
 
-      for (let i = 0; i < len; ++i) {
-        const replacePart = replaceParts[i];
-        if (!scopeParts.includes(replacePart.name)) {
-          scopeParts[s++] = replacePart.name;
-        }
+    const dom = this.dom;
+    const projections: IProjections = Object.create(null);
+    const $projections = symbol.projections;
+    const len = $projections.length;
 
-        const partScopeParts: string[] = [];
-        const partInstructionRows: ITargetedInstruction[][] = [];
+    for (let i = 0; i < len; ++i) {
+      const projection = $projections[i];
+      const name = projection.name;
 
-        this.compileParentNode(replacePart.template!, partInstructionRows, partScopeParts);
+      const instructions: ITargetedInstruction[][] = [];
 
-        // TODO: the assignment to `this.compilation.parts[replacePart.name]` might be the cause of replaceable bug reported by rluba
-        // need to verify this
-        this.compilation.parts[replacePart.name] = parts[replacePart.name] = CustomElementDefinition.create({
-          name: replacePart.name,
-          scopeParts: partScopeParts,
-          template: replacePart.physicalNode,
-          instructions: partInstructionRows,
-          needsCompile: false,
-        });
+      this.compileParentNode(projection.template!, instructions, projectionMap, targetedProjections);
+
+      const definition = projections[name];
+      if (definition === void 0) {
+        let template = projection.template!.physicalNode!;
+        if (template.tagName !== 'TEMPLATE') {
+          const _template = dom.createTemplate() as HTMLTemplateElement;
+          dom.appendChild(_template.content, template);
+          template = _template;
+        }
+        projections[name] = CustomElementDefinition.create({ name, template, instructions, needsCompile: false });
+      } else {
+        // consolidate the projections to same slot
+        dom.appendChild((definition.template as HTMLTemplateElement).content, projection.template?.physicalNode!);
+        (definition.instructions as ITargetedInstruction[][]).push(...instructions);
       }
     }
-    return parts;
+    return projections;
   }
+
+  private compileProjectionFallback(
+    symbol: CustomElementSymbol,
+    projections: WeakMap<ITargetedInstruction, IProjections>,
+    targetedProjections: RegisteredProjections | null,
+  ): CustomElementDefinition {
+    const instructions: ITargetedInstruction[][] = [];
+    this.compileChildNodes(symbol, instructions, projections, targetedProjections);
+    const template = this.dom.createTemplate() as HTMLTemplateElement;
+    template.content.append(...toArray(symbol.physicalNode.childNodes));
+    return CustomElementDefinition.create({ name: CustomElement.generateName(), template, instructions, needsCompile: false });
+  }
 }
@@ -456,0 +489,0 @@

No alert changes

Improved metrics

Total package byte prevSize

366192

increased by2.21%

Lines of code

5188

increased by1.17%

Dependency changes

• Updated@aurelia/jit@^0.8.0-dev.202010031518

• Updated@aurelia/kernel@^0.8.0-dev.202010031518

• Updated@aurelia/metadata@^0.8.0-dev.202010031518

• Updated@aurelia/runtime@^0.8.0-dev.202010031518

• Updated@aurelia/runtime-html@^0.8.0-dev.202010031518

• Updated@aurelia/scheduler@^0.8.0-dev.202010031518