@aurelia/runtime-html - npm Package Compare versions

Comparing version 2.0.1-dev.202403150512 to 2.0.1-dev.202404030015

dist/types/app-root.d.ts

@@ -8,2 +8,9 @@ import { InstanceProvider } from '@aurelia/kernel';
     component: T | Constructable<T>;
+    /**
+     * When a HTML form is submitted, the default behavior is to "redirect" the page to the action of the form
+     * This is not desirable for SPA applications, so by default, this behavior is prevented.
+     *
+     * This option re-enables the default behavior of HTML forms.
+     */
+    allowActionlessForm?: boolean;
 }
@@ -32,3 +39,3 @@ export interface IAppRoot<C extends object = object> extends IDisposable {
 export declare const IAppRoot: import("@aurelia/kernel").InterfaceSymbol<IAppRoot<object>>;
-export declare class AppRoot<T extends object, K extends ICustomElementViewModel = T extends Constructable<infer R> ? R : T> implements IAppRoot<K> {
+export declare class AppRoot<T extends object, K extends ICustomElementViewModel = ICustomElementViewModel & (T extends Constructable<infer R> ? R : T)> implements IAppRoot<K> {
     readonly config: IAppRootConfig<K>;
@@ -35,0 +42,0 @@ readonly container: IContainer;

dist/types/aurelia.d.ts

@@ -34,2 +34,9 @@ import { IAppRoot } from './app-root';
     component: T | Constructable<T>;
+    /**
+     * When a HTML form is submitted, the default behavior is to "redirect" the page to the action of the form
+     * This is not desirable for SPA applications, so by default, this behavior is prevented.
+     *
+     * This option re-enables the default behavior of HTML forms.
+     */
+    allowActionlessForm?: boolean;
 }
@@ -46,3 +53,10 @@ export interface IEnhancementConfig<T> {
     container?: IContainer;
+    /**
+     * When a HTML form is submitted, the default behavior is to "redirect" the page to the action of the form
+     * This is not desirable for SPA applications, so by default, this behavior is prevented.
+     *
+     * This option re-enables the default behavior of HTML forms.
+     */
+    allowActionlessForm?: boolean;
 }
 //# sourceMappingURL=aurelia.d.ts.map

dist/types/compiler/template-compiler.d.ts

@@ -47,3 +47,3 @@ import { ITemplateCompiler } from '../renderer';
  */
-export declare const templateCompilerHooks: <T extends Constructable>(target?: T | undefined) => any;
+export declare const templateCompilerHooks: <T extends Constructable>(target?: T) => any;
 //# sourceMappingURL=template-compiler.d.ts.map

dist/types/index.d.ts

@@ -64,3 +64,3 @@ export { bindable, Bindable, BindableDefinition, type PartialBindableDefinition, coercer, } from './bindable';
 export { IPlatform, } from './platform';
-export { CSSModulesProcessorRegistry, cssModules, ShadowDOMRegistry, type IShadowDOMStyleFactory, shadowCSS, StyleConfiguration, type IShadowDOMConfiguration, AdoptedStyleSheetsStyles, StyleElementStyles, IShadowDOMStyles, IShadowDOMGlobalStyles, } from './templating/styles';
+export { CSSModulesProcessorRegistry, cssModules, ShadowDOMRegistry, shadowCSS, StyleConfiguration, IShadowDOMStyleFactory, type IShadowDOMConfiguration, AdoptedStyleSheetsStyles, StyleElementStyles, IShadowDOMStyles, IShadowDOMGlobalStyles, } from './templating/styles';
 export { Watch, watch, type IWatchDefinition, type IWatcherCallback, type IDepCollectionFn, } from './watch';
@@ -67,0 +67,0 @@ export { ComputedWatcher, ExpressionWatcher, } from './templating/watchers';

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

@@ -43,2 +43,4 @@ import { Key } from '@aurelia/kernel';
     for<C extends ICustomAttributeViewModel = ICustomAttributeViewModel>(node: Node, name: string): ICustomAttributeController<C> | undefined;
+    closest<A extends object | Constructable, TType extends A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A> = A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A>>(node: Node, Type: CustomAttributeType<TType>): ICustomAttributeController<InstanceType<TType>> | null;
+    closest<A extends object | Constructable, TType extends A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A> = A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A>>(node: Node, name: string): ICustomAttributeController<InstanceType<TType>> | null;
     isType<T>(value: T): value is (T extends Constructable ? CustomAttributeType<T> : never);
@@ -81,3 +83,3 @@ define<T extends Constructable>(name: string, Type: T): CustomAttributeType<T>;
     readonly containerStrategy: 'reuse' | 'new';
-    get type(): 'attribute';
+    get kind(): 'attribute';
     private constructor();
@@ -84,0 +86,0 @@ static create<T extends Constructable = Constructable>(nameOrDef: string | PartialCustomAttributeDefinition, Type: CustomAttributeType<T>): CustomAttributeDefinition<T>;

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

@@ -27,3 +27,3 @@ import type { Constructable, IContainer, ResourceType, PartialResourceDefinition, Key, ResourceDefinition } from '@aurelia/kernel';
 }>;
-export type CustomElementType<C extends Constructable = Constructable> = ResourceType<C, ICustomElementViewModel & (C extends Constructable<infer P> ? P : {}), PartialCustomElementDefinition>;
+export type CustomElementType<C extends Constructable = Constructable> = ResourceType<C, ICustomElementViewModel & (C extends Constructable<infer P> ? P : object), PartialCustomElementDefinition>;
 export type CustomElementKind = IResourceKind & {
@@ -149,3 +149,3 @@ /**
     readonly processContent: ProcessContentHook | null;
-    get type(): 'element';
+    get kind(): 'element';
     private constructor();
@@ -152,0 +152,0 @@ static create(def: PartialCustomElementDefinition, Type?: null): CustomElementDefinition;

dist/types/templating/styles.d.ts

 import { IContainer } from '@aurelia/kernel';
 import { IPlatform } from '../platform';
 import type { IRegistry } from '@aurelia/kernel';
+/**
+ * There are 2 implementations of CSS registry: css module registry and shadow dom registry.
+ *
+ * CSS registry alters the way class attribute works instead.
+ *
+ * Shadow dom registry regisiters some interfaces with the custom element container to handle shadow dom styles.
+ * abtraction summary:
+ * CSS registry ---(register)---> IShadowDOMStyleFactory ---(createStyles)---> IShadowDOMStyles ---(applyTo)---> ShadowRoot
+ */
+/**
+ * create a registry to register CSS module handling for a custom element.
+ * The resulting registry can be registered as a dependency of a custom element.
+ */
 export declare function cssModules(...modules: (Record<string, string>)[]): CSSModulesProcessorRegistry;
@@ -10,2 +23,6 @@ export declare class CSSModulesProcessorRegistry implements IRegistry {
 }
+/**
+ * Creates a registry to register shadow dom styles handling for a custom element.
+ * The resulting registry can be registered as a dependency of a custom element.
+ */
 export declare function shadowCSS(...css: (string | CSSStyleSheet)[]): ShadowDOMRegistry;
@@ -12,0 +29,0 @@ export interface IShadowDOMStyleFactory {

package.json

 {
   "name": "@aurelia/runtime-html",
-  "version": "2.0.1-dev.202403150512",
+  "version": "2.0.1-dev.202404030015",
   "main": "dist/cjs/index.cjs",
@@ -56,10 +56,10 @@ "module": "dist/esm/index.mjs",
   "dependencies": {
-    "@aurelia/kernel": "2.0.1-dev.202403150512",
-    "@aurelia/metadata": "2.0.1-dev.202403150512",
-    "@aurelia/platform": "2.0.1-dev.202403150512",
-    "@aurelia/platform-browser": "2.0.1-dev.202403150512",
-    "@aurelia/runtime": "2.0.1-dev.202403150512"
+    "@aurelia/kernel": "2.0.1-dev.202404030015",
+    "@aurelia/metadata": "2.0.1-dev.202404030015",
+    "@aurelia/platform": "2.0.1-dev.202404030015",
+    "@aurelia/platform-browser": "2.0.1-dev.202404030015",
+    "@aurelia/runtime": "2.0.1-dev.202404030015"
   },
   "devDependencies": {
-    "typescript": "5.2.2"
+    "typescript": "5.4.2"
   },
@@ -66,0 +66,0 @@ "engines": {

src/app-root.ts

@@ -19,2 +19,9 @@ import { BrowserPlatform } from '@aurelia/platform-browser';
   component: T | Constructable<T>;
+  /**
+   * When a HTML form is submitted, the default behavior is to "redirect" the page to the action of the form
+   * This is not desirable for SPA applications, so by default, this behavior is prevented.
+   *
+   * This option re-enables the default behavior of HTML forms.
+   */
+  allowActionlessForm?: boolean;
 }
@@ -48,3 +55,3 @@
   T extends object,
-  K extends ICustomElementViewModel = T extends Constructable<infer R> ? R : T,
+  K extends ICustomElementViewModel = ICustomElementViewModel & (T extends Constructable<infer R> ? R : T),
 > implements IAppRoot<K> {
@@ -58,2 +65,5 @@
 
+  /** @internal */
+  private readonly _useOwnAppTasks: boolean;
+
   public readonly host: HTMLElement;
@@ -69,4 +79,5 @@ public readonly platform: IPlatform;
     rootProvider: InstanceProvider<IAppRoot>,
-    enhance?: boolean
+    enhance: boolean = false,
   ) {
+    this._useOwnAppTasks = enhance;
     const host = this.host = config.host;
@@ -78,2 +89,13 @@ rootProvider.prepare(this);
     this._hydratePromise = onResolve(this._runAppTasks('creating'), () => {
+      if (!config.allowActionlessForm !== false) {
+        host.addEventListener('submit', (e: Event) => {
+          const target = e.target as HTMLFormElement;
+          const hasAction = (target.getAttribute('action')?.length ?? 0) > 0;
+
+          if (target.tagName === 'FORM' && !hasAction) {
+            e.preventDefault();
+          }
+        }, false);
+      }
+
       const childCtn = enhance ? container : container.createChild();
@@ -134,3 +156,7 @@ const component = config.component as Constructable | ICustomElementViewModel;
   private _runAppTasks(slot: TaskSlot): void | Promise<void> {
-    return onResolveAll(...this.container.getAll(IAppTask).reduce((results, task) => {
+    const container = this.container;
+    const appTasks = this._useOwnAppTasks && !container.has(IAppTask, false)
+      ? []
+      : container.getAll(IAppTask);
+    return onResolveAll(...appTasks.reduce((results, task) => {
       if (task.slot === slot) {
@@ -137,0 +163,0 @@ results.push(task.run());

src/aurelia.ts

@@ -164,2 +164,9 @@ import { DI, InstanceProvider, onResolve } from '@aurelia/kernel';
   component: T | Constructable<T>;
+  /**
+   * When a HTML form is submitted, the default behavior is to "redirect" the page to the action of the form
+   * This is not desirable for SPA applications, so by default, this behavior is prevented.
+   *
+   * This option re-enables the default behavior of HTML forms.
+   */
+  allowActionlessForm?: boolean;
 }
@@ -177,2 +184,9 @@
   container?: IContainer;
+  /**
+   * When a HTML form is submitted, the default behavior is to "redirect" the page to the action of the form
+   * This is not desirable for SPA applications, so by default, this behavior is prevented.
+   *
+   * This option re-enables the default behavior of HTML forms.
+   */
+  allowActionlessForm?: boolean;
 }

src/dom.ts

@@ -148,4 +148,4 @@ import { IContainer, InstanceProvider, type Writable } from '@aurelia/kernel';
     // Could be a shadow root; see if there's a controller and if so, get the original host via the projector
-    const controller = findElementControllerFor(node);
-    if (controller === void 0) {
+    const controller = findElementControllerFor(node, { optional: true });
+    if (controller == null) {
       // Not a shadow root (or at least, not one created by Aurelia)
@@ -152,0 +152,0 @@ // Nothing more we can try, just return null

src/index.ts

@@ -432,5 +432,5 @@ export {
   ShadowDOMRegistry,
-  type IShadowDOMStyleFactory,
   shadowCSS,
   StyleConfiguration,
+  IShadowDOMStyleFactory,
   type IShadowDOMConfiguration,
@@ -437,0 +437,0 @@ AdoptedStyleSheetsStyles,

src/resources/attribute-pattern.ts

@@ -508,3 +508,3 @@ import { emptyArray, IContainer, resolve, Registrable, getResourceKeyFor } from '@aurelia/kernel';
 const getAllPatternDefinitions = <P extends Constructable>(Type: P): AttributePatternDefinition[] =>
-  patterns.get(Type) ?? emptyArray;
+  patterns.get(Type as Constructable<IAttributePattern>) ?? emptyArray;
 
@@ -511,0 +511,0 @@ const patterns = new WeakMap<Constructable<IAttributePattern>, AttributePatternDefinition[]>();

src/resources/binding-command.ts

@@ -202,3 +202,3 @@ import { camelCase, mergeArrays, firstDefined, emptyArray, resourceBaseName, getResourceKeyFor, resource } from '@aurelia/kernel';
       // it means        : <my-el value.bind="value">
-      if (value === '' && info.def.type === dtElement) {
+      if (value === '' && info.def.kind === dtElement) {
         value = camelCase(target);
@@ -228,3 +228,3 @@ }
       // it means        : <my-el value.bind="value">
-      if (value === '' && info.def.type === dtElement) {
+      if (value === '' && info.def.kind === dtElement) {
         value = camelCase(target);
@@ -254,3 +254,3 @@ }
       // it means        : <my-el value.bind="value">
-      if (value === '' && info.def.type === dtElement) {
+      if (value === '' && info.def.kind === dtElement) {
         value = camelCase(target);
@@ -280,3 +280,3 @@ }
       // it means        : <my-el value.bind="value">
-      if (value === '' && info.def.type === dtElement) {
+      if (value === '' && info.def.kind === dtElement) {
         value = camelCase(target);
@@ -311,3 +311,3 @@ }
       // it means        : <my-el value.bind="value">
-      if (value === '' && info.def.type === dtElement) {
+      if (value === '' && info.def.kind === dtElement) {
         value = camelCase(target);
@@ -314,0 +314,0 @@ }

src/resources/custom-attribute.ts

 import { mergeArrays, firstDefined, Key, resourceBaseName, getResourceKeyFor } from '@aurelia/kernel';
 import { Bindable } from '../bindable';
 import { Watch } from '../watch';
-import { getRef } from '../dom';
+import { INode, getEffectiveParentNode, getRef } from '../dom';
 import { defineMetadata, getAnnotationKeyFor, getOwnMetadata, hasOwnMetadata } from '../utilities-metadata';
@@ -18,3 +18,3 @@ import { isFunction, isString, objectFreeze } from '../utilities';
 import type { BindableDefinition, PartialBindableDefinition } from '../bindable';
-import type { ICustomAttributeViewModel, ICustomAttributeController } from '../templating/controller';
+import type { ICustomAttributeViewModel, ICustomAttributeController, Controller } from '../templating/controller';
 import type { IWatchDefinition } from '../watch';
@@ -60,2 +60,4 @@ import { ErrorNames, createMappedError } from '../errors';
   for<C extends ICustomAttributeViewModel = ICustomAttributeViewModel>(node: Node, name: string): ICustomAttributeController<C> | undefined;
+  closest<A extends object | Constructable, TType extends A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A> = A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A>>(node: Node, Type: CustomAttributeType<TType>): ICustomAttributeController<InstanceType<TType>> | null;
+  closest<A extends object | Constructable, TType extends A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A> = A extends Constructable<infer T extends object> ? Constructable<T> : Constructable<A>>(node: Node, name: string): ICustomAttributeController<InstanceType<TType>> | null;
   isType<T>(value: T): value is (T extends Constructable ? CustomAttributeType<T> : never);
@@ -108,3 +110,3 @@ define<T extends Constructable>(name: string, Type: T): CustomAttributeType<T>;
   // a simple marker to distinguish between Custom Element definition & Custom attribute definition
-  public get type(): 'attribute' { return dtAttribute; }
+  public get kind(): 'attribute' { return dtAttribute; }
 
@@ -177,6 +179,6 @@ private constructor(
 /** @internal */
-export const caBaseName = /*@__PURE__*/getResourceKeyFor('custom-attribute');
+const caBaseName = /*@__PURE__*/getResourceKeyFor('custom-attribute');
 
 /** @internal */
-export const getAttributeKeyFrom = (name: string): string => `${caBaseName}:${name}`;
+const getAttributeKeyFrom = (name: string): string => `${caBaseName}:${name}`;
 
@@ -221,2 +223,26 @@ const getAttributeAnnotation = <K extends keyof PartialCustomAttributeDefinition>(
 
+const findClosestControllerByName = (node: Node, attrNameOrType: string | CustomAttributeType): ICustomAttributeController | null => {
+  let key = '';
+  let attrName = '';
+  if (isString(attrNameOrType)) {
+    key = getAttributeKeyFrom(attrNameOrType);
+    attrName = attrNameOrType;
+  } else {
+    const definition = getAttributeDefinition(attrNameOrType);
+    key = definition.key;
+    attrName = definition.name;
+  }
+  let cur = node as INode | null;
+  while (cur !== null) {
+    const controller = getRef(cur, key) as Controller | null;
+    if (controller?.is(attrName)) {
+      return controller as ICustomAttributeController;
+    }
+
+    cur = getEffectiveParentNode(cur);
+  }
+
+  return null;
+};
+
 export const CustomAttribute = objectFreeze<CustomAttributeKind>({
@@ -227,2 +253,3 @@ name: caBaseName,
   for: findAttributeControllerFor,
+  closest: findClosestControllerByName,
   define: defineAttribute,
@@ -229,0 +256,0 @@ getDefinition: getAttributeDefinition,

src/resources/custom-element.ts

@@ -56,3 +56,3 @@ import {
 
-export type CustomElementType<C extends Constructable = Constructable> = ResourceType<C, ICustomElementViewModel & (C extends Constructable<infer P> ? P : {}), PartialCustomElementDefinition>;
+export type CustomElementType<C extends Constructable = Constructable> = ResourceType<C, ICustomElementViewModel & (C extends Constructable<infer P> ? P : object), PartialCustomElementDefinition>;
 export type CustomElementKind = IResourceKind & {
@@ -196,3 +196,3 @@ /**
 export class CustomElementDefinition<C extends Constructable = Constructable> implements ResourceDefinition<C, ICustomElementViewModel, PartialCustomElementDefinition> {
-  public get type(): 'element' { return dtElement; }
+  public get kind(): 'element' { return dtElement; }
   private constructor(
@@ -199,0 +199,0 @@ public readonly Type: CustomElementType<C>,

src/templating/styles.ts

@@ -12,2 +12,16 @@ import { IContainer, noop, resolve } from '@aurelia/kernel';
 
+/**
+ * There are 2 implementations of CSS registry: css module registry and shadow dom registry.
+ *
+ * CSS registry alters the way class attribute works instead.
+ *
+ * Shadow dom registry regisiters some interfaces with the custom element container to handle shadow dom styles.
+ * abtraction summary:
+ * CSS registry ---(register)---> IShadowDOMStyleFactory ---(createStyles)---> IShadowDOMStyles ---(applyTo)---> ShadowRoot
+ */
+
+/**
+ * create a registry to register CSS module handling for a custom element.
+ * The resulting registry can be registered as a dependency of a custom element.
+ */
 export function cssModules(...modules: (Record<string, string>)[]): CSSModulesProcessorRegistry {
@@ -55,2 +69,6 @@ return new CSSModulesProcessorRegistry(modules);
 
+/**
+ * Creates a registry to register shadow dom styles handling for a custom element.
+ * The resulting registry can be registered as a dependency of a custom element.
+ */
 export function shadowCSS(...css: (string | CSSStyleSheet)[]): ShadowDOMRegistry {
@@ -83,3 +101,3 @@ return new ShadowDOMRegistry(css);
 
-class AdoptedStyleSheetsStylesFactory {
+class AdoptedStyleSheetsStylesFactory implements IShadowDOMStyleFactory {
   private readonly p = resolve(IPlatform);
@@ -93,3 +111,6 @@ private readonly cache = new Map<string, CSSStyleSheet>();
 
-class StyleElementStylesFactory {
+// not really needed nowadays since all browsers support adopted style sheet
+// though keep it here for a bit longer before removing
+/* istanbul ignore next */
+class StyleElementStylesFactory implements IShadowDOMStyleFactory {
   private readonly p = resolve(IPlatform);
@@ -132,4 +153,3 @@
           sheet = new p.CSSStyleSheet();
-          // eslint-disable-next-line
-          (sheet as any).replaceSync(x);
+          sheet.replaceSync(x);
           styleSheetCache.set(x, sheet);
@@ -136,0 +156,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

4865038

increased by0.25%

Lines of code

87722

increased by0.49%

Dependency changes

• + Added@aurelia/kernel@2.0.1-dev.202404030015(transitive)

• + Added@aurelia/metadata@2.0.1-dev.202404030015(transitive)

• + Added@aurelia/platform@2.0.1-dev.202404030015(transitive)

• + Added@aurelia/platform-browser@2.0.1-dev.202404030015(transitive)

• + Added@aurelia/runtime@2.0.1-dev.202404030015(transitive)

• - Removed@aurelia/kernel@2.0.1-dev.202403150512(transitive)

• - Removed@aurelia/metadata@2.0.1-dev.202403150512(transitive)

• - Removed@aurelia/platform@2.0.1-dev.202403150512(transitive)

• - Removed@aurelia/platform-browser@2.0.1-dev.202403150512(transitive)

• - Removed@aurelia/runtime@2.0.1-dev.202403150512(transitive)

• Updated@aurelia/kernel@2.0.1-dev.202404030015

• Updated@aurelia/metadata@2.0.1-dev.202404030015

• Updated@aurelia/platform@2.0.1-dev.202404030015

• Updated@aurelia/platform-browser@2.0.1-dev.202404030015

• Updated@aurelia/runtime@2.0.1-dev.202404030015