@aurelia/runtime-html - npm Package Compare versions

Comparing version 2.0.0-beta.8 to 2.0.0-beta.9

dist/types/app-task.d.ts

@@ -68,4 +68,4 @@ import type { IContainer, IRegistry, Key, Resolved } from '@aurelia/kernel';
 }>;
-export type AppTaskCallbackNoArg = () => unknown | Promise<unknown>;
-export type AppTaskCallback<T> = (arg: Resolved<T>) => unknown | Promise<unknown>;
+export type AppTaskCallbackNoArg = () => unknown;
+export type AppTaskCallback<T> = (arg: Resolved<T>) => unknown;
 //# sourceMappingURL=app-task.d.ts.map

dist/types/binding/spread-binding.d.ts

@@ -30,4 +30,3 @@ import { IServiceLocator, Key } from '@aurelia/kernel';
     get container(): IServiceLocator;
-    get definition(): CustomElementDefinition | CustomElementDefinition;
-    get isStrictBinding(): boolean;
+    get definition(): CustomElementDefinition;
     get state(): import("../templating/controller").State;
@@ -34,0 +33,0 @@ constructor(

dist/types/index.d.ts

@@ -45,3 +45,3 @@ export { bindable, Bindable, BindableDefinition, type PartialBindableDefinition, coercer, } from './bindable';
 export { DefinitionType, } from './resources/resources-shared';
-export { capture, containerless, customElement, CustomElement, type CustomElementDecorator, type CustomElementKind, type CustomElementType, CustomElementDefinition, type PartialCustomElementDefinition, strict, useShadowDOM, processContent, } from './resources/custom-element';
+export { capture, containerless, customElement, CustomElement, type CustomElementDecorator, type CustomElementKind, type CustomElementType, CustomElementDefinition, type PartialCustomElementDefinition, useShadowDOM, processContent, } from './resources/custom-element';
 export { AuCompose, type IDynamicComponentActivate, } from './resources/custom-elements/au-compose';
@@ -48,0 +48,0 @@ export { ValueConverter, ValueConverterDefinition, type PartialValueConverterDefinition, type ValueConverterKind, type ValueConverterDecorator, type ValueConverterType, valueConverter, } from './resources/value-converter';

dist/types/renderer.d.ts

@@ -175,18 +175,4 @@ import { type IContainer, type Class, type IRegistry } from '@aurelia/kernel';
     from: string | IsBindingBehavior;
-    /**
-     * Indicates whether the value of the expression "from"
-     * should be evaluated in strict mode.
-     *
-     * In none strict mode, "undefined" and "null" are coerced into empty string
-     */
-    strict: boolean;
     readonly type = InstructionType.textBinding;
-    constructor(from: string | IsBindingBehavior, 
-    /**
-     * Indicates whether the value of the expression "from"
-     * should be evaluated in strict mode.
-     *
-     * In none strict mode, "undefined" and "null" are coerced into empty string
-     */
-    strict: boolean);
+    constructor(from: string | IsBindingBehavior);
 }
@@ -193,0 +179,0 @@ export declare class ListenerBindingInstruction {

dist/types/resources/custom-element.d.ts

@@ -25,3 +25,2 @@ import { DefinitionType } from './resources-shared';
     readonly containerless?: boolean;
-    readonly isStrictBinding?: boolean;
     readonly shadowOptions?: {
@@ -130,10 +129,2 @@ mode: 'open' | 'closed';
 export declare function containerless(): (target: Constructable) => void;
-/**
- * Decorator: Indicates that the custom element should be rendered with the strict binding option. undefined/null -> 0 or '' based on type
- */
-export declare function strict(target: Constructable): void;
-/**
- * Decorator: Indicates that the custom element should be rendered with the strict binding option. undefined/null -> 0 or '' based on type
- */
-export declare function strict(): (target: Constructable) => void;
 export declare class CustomElementDefinition<C extends Constructable = Constructable> implements ResourceDefinition<C, ICustomElementViewModel, PartialCustomElementDefinition> {
@@ -154,3 +145,2 @@ readonly Type: CustomElementType<C>;
     readonly containerless: boolean;
-    readonly isStrictBinding: boolean;
     readonly shadowOptions: {
@@ -157,0 +147,0 @@ mode: 'open' | 'closed';

dist/types/resources/custom-elements/au-compose.d.ts

@@ -11,3 +11,3 @@ import { Constructable } from '@aurelia/kernel';
      */
-    activate?(model?: T): unknown | Promise<unknown>;
+    activate?(model?: T): unknown;
 }
@@ -42,5 +42,5 @@ type ChangeSource = keyof Pick<AuCompose, 'template' | 'component' | 'model' | 'scopeBehavior' | 'composing' | 'composition'>;
     readonly _component: Constructable | object | undefined;
-    readonly _model: unknown | undefined;
+    readonly _model: unknown;
     readonly _src: ChangeSource | undefined;
-    constructor(_template: string | undefined, _component: Constructable | object | undefined, _model: unknown | undefined, _src: ChangeSource | undefined);
+    constructor(_template: string | undefined, _component: Constructable | object | undefined, _model: unknown, _src: ChangeSource | undefined);
 }
@@ -47,0 +47,0 @@ declare class CompositionContext {

dist/types/resources/template-controllers/if.d.ts

@@ -17,5 +17,6 @@ import { IViewFactory } from '../../templating/view';
     private pending;
-    attaching(initiator: IHydratedController, _parent: IHydratedController): void | Promise<void>;
+    attaching(_initiator: IHydratedController, _parent: IHydratedController): void | Promise<void>;
     detaching(initiator: IHydratedController, _parent: IHydratedParentController): void | Promise<void>;
     valueChanged(newValue: unknown, oldValue: unknown): void | Promise<void>;
+    private _swap;
     dispose(): void;
@@ -22,0 +23,0 @@ accept(visitor: ControllerVisitor): void | true;

dist/types/resources/template-controllers/repeat.d.ts

@@ -9,2 +9,3 @@ import { type Collection, ForOfStatement, type IndexMap, type IsBindingBehavior, IExpressionParser } from '@aurelia/runtime';
     views: ISyntheticView[];
+    private _oldViews;
     forOf: ForOfStatement;
@@ -11,0 +12,0 @@ local: string;

dist/types/templating/controller.d.ts

@@ -43,3 +43,2 @@ import { Scope, ICoercionConfiguration } from '@aurelia/runtime';
     hasLockedScope: boolean;
-    isStrictBinding: boolean;
     scope: Scope | null;
@@ -257,3 +256,2 @@ isBound: boolean;
     readonly viewModel: null;
-    readonly isStrictBinding: boolean;
     /**
@@ -371,3 +369,2 @@ * The physical DOM nodes that will be appended during the attach operation.
 export interface ICompiledCustomElementController<C extends IViewModel = IViewModel> extends IContextualCustomElementController<C> {
-    readonly isStrictBinding: boolean;
     /**
@@ -374,0 +371,0 @@ * The ShadowRoot, if this custom element uses ShadowDOM.

package.json

 {
   "name": "@aurelia/runtime-html",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "main": "dist/cjs/index.cjs",
@@ -27,7 +27,3 @@ "module": "dist/esm/index.mjs",
   "files": [
-    "dist/**/*.cjs",
-    "dist/**/*.dev.cjs.map",
-    "dist/**/*.mjs",
-    "dist/**/*.dev.mjs.map",
-    "dist/**/*.d.ts",
+    "dist",
     "src/**/*.ts",
@@ -41,3 +37,3 @@ "README.md",
     "lint": "eslint --cache --ext .js,.ts src/",
-    "lint:ci": "eslint --cache --ext .js,.ts --quiet --report-unused-disable-directives src/",
+    "lint:ci": "eslint --ext .js,.ts --quiet --report-unused-disable-directives src/",
     "build": "rollup -c",
@@ -55,10 +51,10 @@ "dev": "rollup -c -w",
   "dependencies": {
-    "@aurelia/kernel": "2.0.0-beta.8",
-    "@aurelia/metadata": "2.0.0-beta.8",
-    "@aurelia/platform": "2.0.0-beta.8",
-    "@aurelia/platform-browser": "2.0.0-beta.8",
-    "@aurelia/runtime": "2.0.0-beta.8"
+    "@aurelia/kernel": "2.0.0-beta.9",
+    "@aurelia/metadata": "2.0.0-beta.9",
+    "@aurelia/platform": "2.0.0-beta.9",
+    "@aurelia/platform-browser": "2.0.0-beta.9",
+    "@aurelia/runtime": "2.0.0-beta.9"
   },
   "devDependencies": {
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   },
@@ -65,0 +61,0 @@ "engines": {

src/app-task.ts

@@ -95,4 +95,4 @@ import { isFunction, objectFreeze } from './utilities';
 // the benefit of unknown is that application can avoid having to write () => { doThingsThatDoesNotReturnVoid() }
-export type AppTaskCallbackNoArg = () => unknown | Promise<unknown>;
-export type AppTaskCallback<T> = (arg: Resolved<T>) => unknown | Promise<unknown>;
+export type AppTaskCallbackNoArg = () => unknown;
+export type AppTaskCallback<T> = (arg: Resolved<T>) => unknown;
 
@@ -99,0 +99,0 @@ function createAppTaskSlotHook(slotName: TaskSlot) {

src/binding/spread-binding.ts

@@ -96,10 +96,6 @@ import { IServiceLocator, Key, emptyArray } from '@aurelia/kernel';
 
-  public get definition(): CustomElementDefinition | CustomElementDefinition {
+  public get definition(): CustomElementDefinition {
     return this.$controller.definition;
   }
 
-  public get isStrictBinding() {
-    return this.$controller.isStrictBinding;
-  }
-
   public get state() {
@@ -106,0 +102,0 @@ return this.$controller.state;

src/errors.ts

@@ -260,3 +260,2 @@ /* eslint-disable @typescript-eslint/no-unsafe-member-access */
       }
-      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
       cooked = cooked.slice(0, matches.index) + value + cooked.slice(regex.lastIndex);
@@ -263,0 +262,0 @@ matches = regex.exec(cooked);

src/index.ts

@@ -284,3 +284,2 @@ export {
   type PartialCustomElementDefinition,
-  strict,
   useShadowDOM,
@@ -287,0 +286,0 @@ processContent,

src/observation/observer-locator.ts

@@ -253,2 +253,11 @@ import { emptyObject, IServiceLocator, resolve } from '@aurelia/kernel';
       case 'title':
+      case 'popovertarget':
+      case 'popovertargetaction':
+        /* istanbul-ignore-next */
+        if (__DEV__) {
+          if ((key === 'popovertarget' || key === 'popovertargetaction') && obj.nodeName !== 'INPUT' && obj.nodeName !== 'BUTTON') {
+            // eslint-disable-next-line no-console
+            console.warn(`[aurelia] Popover API are only valid on <input> or <button>. Detected ${key} on <${obj.nodeName.toLowerCase()}>`);
+          }
+        }
         // assigning null/undefined to size on input is an error
@@ -255,0 +264,0 @@ // though it may be fine on other elements.

src/renderer.ts

@@ -228,9 +228,2 @@ import {
     public from: string | IsBindingBehavior,
-    /**
-     * Indicates whether the value of the expression "from"
-     * should be evaluated in strict mode.
-     *
-     * In none strict mode, "undefined" and "null" are coerced into empty string
-     */
-    public strict: boolean,
   ) {}
@@ -237,0 +230,0 @@ }

src/resources/custom-element.ts

@@ -55,3 +55,2 @@ import {
   readonly containerless?: boolean;
-  readonly isStrictBinding?: boolean;
   readonly shadowOptions?: { mode: 'open' | 'closed' } | null;
@@ -199,20 +198,2 @@ readonly hasSlots?: boolean;
 
-/**
- * Decorator: Indicates that the custom element should be rendered with the strict binding option. undefined/null -> 0 or '' based on type
- */
-export function strict(target: Constructable): void;
-/**
- * Decorator: Indicates that the custom element should be rendered with the strict binding option. undefined/null -> 0 or '' based on type
- */
-export function strict(): (target: Constructable) => void;
-export function strict(target?: Constructable): void | ((target: Constructable) => void) {
-  if (target === void 0) {
-    return function ($target: Constructable) {
-      annotateElementMetadata($target, 'isStrictBinding', true);
-    };
-  }
-
-  annotateElementMetadata(target, 'isStrictBinding', true);
-}
-
 const definitionLookup = new WeakMap<PartialCustomElementDefinition, CustomElementDefinition>();
@@ -237,3 +218,2 @@
     public readonly containerless: boolean,
-    public readonly isStrictBinding: boolean,
     public readonly shadowOptions: { mode: 'open' | 'closed' } | null,
@@ -297,3 +277,2 @@ /**
         fromDefinitionOrDefault('containerless', def, returnFalse),
-        fromDefinitionOrDefault('isStrictBinding', def, returnFalse),
         fromDefinitionOrDefault('shadowOptions', def, returnNull),
@@ -331,3 +310,2 @@ fromDefinitionOrDefault('hasSlots', def, returnFalse),
         fromAnnotationOrTypeOrDefault('containerless', Type, returnFalse),
-        fromAnnotationOrTypeOrDefault('isStrictBinding', Type, returnFalse),
         fromAnnotationOrTypeOrDefault('shadowOptions', Type, returnNull as () => { mode: 'open' | 'closed' } | null),
@@ -368,3 +346,2 @@ fromAnnotationOrTypeOrDefault('hasSlots', Type, returnFalse),
       fromAnnotationOrDefinitionOrTypeOrDefault('containerless', nameOrDef, Type, returnFalse),
-      fromAnnotationOrDefinitionOrTypeOrDefault('isStrictBinding', nameOrDef, Type, returnFalse),
       fromAnnotationOrDefinitionOrTypeOrDefault('shadowOptions', nameOrDef, Type, returnNull),
@@ -371,0 +348,0 @@ fromAnnotationOrDefinitionOrTypeOrDefault('hasSlots', nameOrDef, Type, returnFalse),

src/resources/custom-elements/au-compose.ts

@@ -25,3 +25,3 @@ import { Constructable, IContainer, InstanceProvider, emptyArray, onResolve, resolve, transient } from '@aurelia/kernel';
    */
-  activate?(model?: T): unknown | Promise<unknown>;
+  activate?(model?: T): unknown;
 }
@@ -207,5 +207,3 @@
     } else {
-      compositionHost = loc == null
-        ? host
-        : loc;
+      compositionHost = loc ?? host;
       comp = this._getComp(childCtn, component, compositionHost);
@@ -418,3 +416,3 @@ }
     public readonly _component: MaybePromise<Constructable | object> | undefined,
-    public readonly _model: unknown | undefined,
+    public readonly _model: unknown,
     public readonly _src: ChangeSource | undefined,
@@ -440,3 +438,3 @@ ) { }
     public readonly _component: Constructable | object | undefined,
-    public readonly _model: unknown | undefined,
+    public readonly _model: unknown,
     public readonly _src: ChangeSource | undefined,
@@ -443,0 +441,0 @@ ) { }

src/resources/template-controllers/if.ts

@@ -35,49 +35,4 @@ /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 
-  public attaching(initiator: IHydratedController, _parent: IHydratedController): void | Promise<void> {
-    let view: ISyntheticView | undefined;
-    const ctrl = this.$controller;
-    const swapId = this._swapId++;
-    /**
-     * returns true when
-     * 1. entering deactivation of the [if] itself
-     * 2. new swap has started since this change
-     */
-    const isCurrent = () => !this._wantsDeactivate && this._swapId === swapId + 1;
-    return onResolve(this.pending, () => {
-      if (!isCurrent()) {
-        return;
-      }
-      this.pending = void 0;
-      if (this.value) {
-        view = (this.view = this.ifView = this.cache && this.ifView != null
-          ? this.ifView
-          : this._ifFactory.create()
-        );
-      } else {
-        // truthy -> falsy
-        view = (this.view = this.elseView = this.cache && this.elseView != null
-          ? this.elseView
-          : this.elseFactory?.create()
-        );
-      }
-      // if the value is falsy
-      // and there's no [else], `view` will be null
-      if (view == null) {
-        return;
-      }
-      // todo: location should be based on either the [if]/[else] attribute
-      //       instead of always of the [if]
-      view.setLocation(this._location);
-
-      // Promise return values from user VM hooks are awaited by the initiator
-      this.pending = onResolve(
-        view.activate(initiator, ctrl, ctrl.scope),
-        () => {
-          if (isCurrent()) {
-            this.pending = void 0;
-          }
-        });
-      // old
-      // void (this.view = this.updateView(this.value, f))?.activate(initiator, this.ctrl, f, this.ctrl.scope);
-    });
+  public attaching(_initiator: IHydratedController, _parent: IHydratedController): void | Promise<void> {
+    return this._swap(this.value);
   }
@@ -96,15 +51,10 @@
   public valueChanged(newValue: unknown, oldValue: unknown): void | Promise<void> {
-    if (!this.$controller.isActive) {
-      return;
-    }
-    // change scenarios:
-    // truthy -> truthy (do nothing)
-    // falsy -> falsy (do nothing)
-    // truthy -> falsy (no cache = destroy)
-    // falsy -> truthy (no view = create)
+    if (!this.$controller.isActive) return;
+
     newValue = !!newValue;
     oldValue = !!oldValue;
-    if (newValue === oldValue) {
-      return;
-    }
+    if (newValue !== oldValue) return this._swap(newValue);
+  }
+
+  private _swap(value: unknown): void | Promise<void> {
     const currView = this.view;
@@ -128,3 +78,3 @@ const ctrl = this.$controller;
           // falsy -> truthy
-          if (newValue) {
+          if (value) {
             view = (this.view = this.ifView = this.cache && this.ifView != null
@@ -131,0 +81,0 @@ ? this.ifView

src/resources/template-controllers/repeat.ts

 import { type IDisposable, onResolve, IIndexable } from '@aurelia/kernel';
 import {
-  applyMutationsToIndices,
   BindingBehaviorExpression,
@@ -16,3 +15,2 @@ BindingContext,
   Scope,
-  synchronizeIndices,
   ValueConverterExpression,
@@ -52,2 +50,3 @@ astEvaluate,
   public views: ISyntheticView[] = [];
+  private _oldViews: ISyntheticView[] = [];
 
@@ -195,2 +194,3 @@ public forOf!: ForOfStatement;
     const oldViews = this.views;
+    this._oldViews = oldViews.slice();
     const oldLen = oldViews.length;
@@ -370,10 +370,9 @@ const key = this.key;
     } else {
-      const $indexMap = applyMutationsToIndices(indexMap);
       // first detach+unbind+(remove from array) the deleted view indices
-      if ($indexMap.deletedIndices.length > 0) {
+      if (indexMap.deletedIndices.length > 0) {
         const ret = onResolve(
-          this._deactivateAndRemoveViewsByKey($indexMap),
+          this._deactivateAndRemoveViewsByKey(indexMap),
           () => {
             // TODO(fkleuver): add logic to the controller that ensures correct handling of race conditions and add a variety of `if` integration tests
-            return this._createAndActivateAndSortViewsByKey(oldLen, $indexMap);
+            return this._createAndActivateAndSortViewsByKey(oldLen, indexMap!);
           },
@@ -385,3 +384,3 @@ );
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this._createAndActivateAndSortViewsByKey(oldLen, $indexMap);
+        this._createAndActivateAndSortViewsByKey(oldLen, indexMap);
       }
@@ -504,3 +503,3 @@ }
 
-    const deleted = indexMap.deletedIndices;
+    const deleted = indexMap.deletedIndices.slice().sort(compareNumber);
     const deletedLen = deleted.length;
@@ -518,6 +517,4 @@ let i = 0;
     i = 0;
-    let j = 0;
     for (; deletedLen > i; ++i) {
-      j = deleted[i] - i;
-      views.splice(j, 1);
+      views.splice(deleted[i] - i, 1);
     }
@@ -543,3 +540,3 @@
 
-    const { $controller, _factory, local, _normalizedItems, _location, views, _hasDestructuredLocal, _forOfBinding, _scopeMap, forOf } = this;
+    const { $controller, _factory, local, _normalizedItems, _location, views, _hasDestructuredLocal, _forOfBinding, _scopeMap, _oldViews, forOf } = this;
     const mapLen = indexMap.length;
@@ -560,3 +557,9 @@
     const newLen = indexMap.length;
-    synchronizeIndices(views, indexMap);
+    let source = 0;
+    i = 0;
+    for (; i < indexMap.length; ++i) {
+      if ((source = indexMap[i]) !== -2) {
+        views[i] = _oldViews[source];
+      }
+    }
 
@@ -845,1 +848,3 @@ // this algorithm retrieves the indices of the longest increasing subsequence of items in the repeater
 };
+
+const compareNumber = (a: number, b: number): number => a - b;

src/templating/children.ts

@@ -8,3 +8,3 @@ import { emptyArray, type IContainer, type IServiceLocator, Key , IIndexable, Constructable } from '@aurelia/kernel';
 import { type ICustomElementViewModel, type ICustomElementController } from './controller';
-import { createMutationObserver } from '../utilities-dom';
+import { createMutationObserver, isElement } from '../utilities-dom';
 
@@ -84,3 +84,3 @@ import type { INode } from '../dom';
     config = {
-      filter: (node: Node) => node.nodeType === 1 && (node as Element).matches(configOrTarget),
+      filter: (node: Node) => isElement(node) && node.matches(configOrTarget),
       map: el => el
@@ -87,0 +87,0 @@ };

src/templating/controller.projection.ts

@@ -9,2 +9,3 @@ import { type ICustomElementViewModel, type ICustomElementController } from './controller';
 import { ErrorNames, createMappedError } from '../errors';
+import { isElement } from '../utilities-dom';
 
@@ -141,3 +142,3 @@ export type PartialSlottedDefinition = {
       for (node of $slot === slot ? nodes : $slot.nodes) {
-        if (this._query === '*' || (node.nodeType === 1 && (node as Element).matches(this._query))) {
+        if (this._query === '*' || (isElement(node) && node.matches(this._query))) {
           $nodes[$nodes.length] = node;
@@ -144,0 +145,0 @@ }

src/utilities-dom.ts

@@ -100,1 +100,7 @@ import { type IRenderLocation } from './dom';
 export const createMutationObserver = (node: Node, callback: MutationCallback) => new node.ownerDocument!.defaultView!.MutationObserver(callback);
+
+/** @internal */
+export const isElement = (node: Node): node is Element => node.nodeType === 1;
+
+/** @internal */
+export const isTextNode = (node: Node): node is Text => node.nodeType === 3;

src/watch.ts

@@ -1,2 +0,1 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { emptyArray } from '@aurelia/kernel';
@@ -68,3 +67,3 @@ import { getAttributeDefinition, isAttributeType } from './resources/custom-attribute';
   return function decorator(
-    target: Constructable<T> | Constructable<T>['prototype'],
+    target: Constructable<T>,
     key?: PropertyKey,
@@ -74,3 +73,3 @@ descriptor?: PropertyDescriptor,
     const isClassDecorator = key == null;
-    const Type = isClassDecorator ? target : target.constructor;
+    const Type = isClassDecorator ? target : target.constructor as Constructable;
     const watchDef = new WatchDefinition<T>(
@@ -77,0 +76,0 @@ expressionOrPropertyAccessFn,

No alert changes

Improved metrics

Total package byte prevSize

4755573

increased by30.75%

Number of package files

227

increased by48.37%

Lines of code

85290

increased by16.21%

Dependency changes

• + Added@aurelia/kernel@2.0.0-beta.9(transitive)

• + Added@aurelia/metadata@2.0.0-beta.9(transitive)

• + Added@aurelia/platform@2.0.0-beta.9(transitive)

• + Added@aurelia/platform-browser@2.0.0-beta.9(transitive)

• + Added@aurelia/runtime@2.0.0-beta.9(transitive)

• - Removed@aurelia/kernel@2.0.0-beta.8(transitive)

• - Removed@aurelia/metadata@2.0.0-beta.8(transitive)

• - Removed@aurelia/platform@2.0.0-beta.8(transitive)

• - Removed@aurelia/platform-browser@2.0.0-beta.8(transitive)

• - Removed@aurelia/runtime@2.0.0-beta.8(transitive)

• Updated@aurelia/kernel@2.0.0-beta.9

• Updated@aurelia/metadata@2.0.0-beta.9

• Updated@aurelia/platform@2.0.0-beta.9

• Updated@aurelia/platform-browser@2.0.0-beta.9

• Updated@aurelia/runtime@2.0.0-beta.9