fix(au-slot): correctly prepare resources for slotted view (#1802)

Co-authored-by: Архипов Дмитрий <da@netcitylife.ru> [skip ci]
aurelia · Jul 18, 2023 · bf1ca4c · bf1ca4c
1 parent 15acfee
commit bf1ca4c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/packages/__tests__/3-runtime-html/au-slot.spec.tsx b/packages/__tests__/3-runtime-html/au-slot.spec.tsx
@@ -1,6 +1,6 @@
 import { delegateSyntax } from '@aurelia/compat-v1';
 import { IContainer, inject } from '@aurelia/kernel';
-import { BindingMode, Aurelia, AuSlotsInfo, bindable, customElement, CustomElement, IAuSlotsInfo, IPlatform } from '@aurelia/runtime-html';
+import { BindingMode, Aurelia, AuSlotsInfo, bindable, customElement, CustomElement, IAuSlotsInfo, IPlatform, ValueConverter } from '@aurelia/runtime-html';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { assert, createFixture, hJsx, TestContext } from '@aurelia/testing';
 import { createSpecFunction, TestExecutionContext, TestFunction } from '../util.js';
@@ -2140,4 +2140,40 @@ describe('3-runtime-html/au-slot.spec.tsx', function () {
     assert.instanceOf(parent, Parent);
     assert.strictEqual(parent.id, 1);
   });
+
+  it('provides right resources for slotted view', function () {
+    const { assertText } = createFixture(
+      '<el></el>',
+      {  },
+      [
+        CustomElement.define({
+          name: 'el',
+          template: '<el-with-slot>${"hey" | upper}</el-with-slot>',
+          dependencies: [
+            CustomElement.define({ name: 'el-with-slot', template: '<au-slot>' }, class ElWithSlot {}),
+            ValueConverter.define('upper', class { toView = v => v.toUpperCase(); }),
+          ]
+        }, class El {}),
+      ]
+    );
+    assertText('HEY');
+  });
+
+  it('provides right resources for passed through <au-slot>', function () {
+    const { assertText } = createFixture(
+      '<el></el>',
+      {  },
+      [
+        CustomElement.define({
+          name: 'el',
+          template: '<el-with-slot><au-slot>${"hey" | upper}</au-slot></el-with-slot>',
+          dependencies: [
+            CustomElement.define({ name: 'el-with-slot', template: '<au-slot>' }, class ElWithSlot {}),
+            ValueConverter.define('upper', class { toView = v => v.toUpperCase(); }),
+          ]
+        }, class El {}),
+      ]
+    );
+    assertText('HEY');
+  });
 });
diff --git a/packages/kernel/src/di.container.ts b/packages/kernel/src/di.container.ts
@@ -5,7 +5,7 @@ import { isNativeFunction } from './functions';
 import { type Class, type Constructable, type IDisposable } from './interfaces';
 import { emptyArray } from './platform';
 import { type IResourceKind, type ResourceDefinition, type ResourceType, getAllResources, hasResources } from './resource';
-import { createObject, getOwnMetadata, isFunction, isString } from './utilities';
+import { getOwnMetadata, isFunction, isString } from './utilities';
 import {
   IContainer,
   type Key,
@@ -83,21 +83,21 @@ export class Container implements IContainer {
       this._resolvers = new Map();
       this._factories = new Map<Constructable, Factory>();
 
-      this.res = createObject();
+      this.res = {};
     } else {
       this.root = parent.root;
 
       this._resolvers = new Map();
       this._factories = parent._factories;
+      this.res = {};
 
       if (config.inheritParentResources) {
-        this.res = Object.assign(
-          createObject(),
-          parent.res,
-          this.root.res
-        );
-      } else {
-        this.res = createObject();
+        // todo: when the simplify resource system work is commenced
+        //       this resource inheritance can just be a Object.create() call
+        //       with parent resources as the prototype of the child resources
+        for (const key in parent.res) {
+          this.registerResolver(key, parent.res[key]!);
+        }
       }
     }
 
@@ -277,7 +277,7 @@ export class Container implements IContainer {
   }
 
   public has<K extends Key>(key: K, searchAncestors: boolean = false): boolean {
-    return this._resolvers.has(key)
+    return this._resolvers.has(key) || isResourceKey(key) && key in this.res
       ? true
       : searchAncestors && this.parent != null
         ? this.parent.has(key, true)

diff --git a/packages/runtime-html/src/resources/custom-elements/au-slot.ts b/packages/runtime-html/src/resources/custom-elements/au-slot.ts
@@ -60,7 +60,7 @@ export class AuSlot implements ICustomElementViewModel, IAuSlot {
       factory = rendering.getViewFactory(slotInfo.fallback, contextController.container);
       this._hasProjection = false;
     } else {
-      container = hdrContext.parent!.controller.container.createChild();
+      container = hdrContext.parent!.controller.container.createChild({ inheritParentResources: true });
       registerResolver(
         container,
         contextController.definition.Type,