Use dynamic context for "card context"

Author: lukemelia

packages/base/card-api.gts

@@ -22,6 +22,7 @@ import {
   isNotLoadedError,
   isNotReadyError,
   CardError,
+  CardContextName,
   NotLoaded,
   NotReady,
   getField,
@@ -283,11 +284,7 @@ export interface Field<
   ): Promise<any>;
   emptyValue(instance: BaseDef): any;
   validate(instance: BaseDef, value: any): void;
-  component(
-    model: Box<BaseDef>,
-    defaultFormat: Format,
-    context?: CardContext,
-  ): BoxComponent;
+  component(model: Box<BaseDef>, defaultFormat: Format): BoxComponent;
   getter(instance: BaseDef): BaseInstanceType<CardT>;
   queryableValue(value: any, stack: BaseDef[]): SearchT;
   queryMatcher(
@@ -753,12 +750,8 @@ class Contains<CardT extends FieldDefConstructor> implements Field<CardT, any> {
     );
   }
 
-  component(
-    model: Box<BaseDef>,
-    format: Format,
-    context?: CardContext,
-  ): BoxComponent {
-    return fieldComponent(this, model, format, context);
+  component(model: Box<BaseDef>, format: Format): BoxComponent {
+    return fieldComponent(this, model, format);
   }
 }
 
@@ -1049,18 +1042,14 @@ class LinksTo<CardT extends CardDefConstructor> implements Field<CardT> {
     return fieldInstance;
   }
 
-  component(
-    model: Box<CardDef>,
-    format: Format,
-    context?: CardContext,
-  ): BoxComponent {
+  component(model: Box<CardDef>, format: Format): BoxComponent {
     if (format === 'edit' && !this.computeVia) {
       let innerModel = model.field(
         this.name as keyof BaseDef,
       ) as unknown as Box<CardDef | null>;
-      return getLinksToEditor(innerModel, this, context);
+      return getLinksToEditor(innerModel, this);
     }
-    return fieldComponent(this, model, format, context);
+    return fieldComponent(this, model, format);
   }
 }
 
@@ -1435,11 +1424,7 @@ class LinksToMany<FieldT extends CardDefConstructor>
     return fieldInstances;
   }
 
-  component(
-    model: Box<CardDef>,
-    format: Format,
-    context?: CardContext,
-  ): BoxComponent {
+  component(model: Box<CardDef>, format: Format): BoxComponent {
     let fieldName = this.name as keyof BaseDef;
     let arrayField = model.field(
       fieldName,
@@ -1462,7 +1447,6 @@ class LinksToMany<FieldT extends CardDefConstructor>
       field: this,
       format: renderFormat ?? format,
       cardTypeFor,
-      context,
     });
   }
 }
@@ -1471,7 +1455,6 @@ function fieldComponent(
   field: Field<typeof BaseDef>,
   model: Box<BaseDef>,
   defaultFormat: Format,
-  context?: CardContext,
 ): BoxComponent {
   let fieldName = field.name as keyof BaseDef;
   let card: typeof BaseDef;
@@ -1482,7 +1465,7 @@ function fieldComponent(
       (model.value[fieldName]?.constructor as typeof BaseDef) ?? field.card;
   }
   let innerModel = model.field(fieldName) as unknown as Box<BaseDef>;
-  return getBoxComponent(card, defaultFormat, innerModel, field, context);
+  return getBoxComponent(card, defaultFormat, innerModel, field);
 }
 
 // our decorators are implemented by Babel, not TypeScript, so they have a
@@ -1660,13 +1643,8 @@ export class BaseDef {
     return _createFromSerialized(this, data, doc, relativeTo, identityContext);
   }
 
-  static getComponent(
-    card: BaseDef,
-    format: Format,
-    field?: Field,
-    context?: CardContext,
-  ) {
-    return getComponent(card, format, field, context);
+  static getComponent(card: BaseDef, format: Format, field?: Field) {
+    return getComponent(card, format, field);
   }
 
   static assignInitialFieldValue(
@@ -2738,15 +2716,13 @@ export function getComponent(
   model: BaseDef,
   format: Format,
   field?: Field,
-  context?: CardContext,
 ): BoxComponent {
   let box = Box.create(model);
   let boxComponent = getBoxComponent(
     model.constructor as BaseDefConstructor,
     format,
     box,
     field,
-    context,
   );
   return boxComponent;
 }
@@ -3101,3 +3077,9 @@ type ElementType<T> = T extends (infer V)[] ? V : never;
 function makeRelativeURL(maybeURL: string, opts?: SerializeOpts): string {
   return opts?.maybeRelativeURL ? opts.maybeRelativeURL(maybeURL) : maybeURL;
 }
+
+declare module 'ember-provide-consume-context/context-registry' {
+  export default interface ContextRegistry {
+    [CardContextName]: CardContext;
+  }
+}

packages/base/field-component.gts

@@ -12,12 +12,14 @@ import {
   isCompoundField,
   formats,
 } from './card-api';
-import { getField } from '@cardstack/runtime-common';
+import { CardContextName, getField } from '@cardstack/runtime-common';
 import type { ComponentLike } from '@glint/template';
 import { CardContainer } from '@cardstack/boxel-ui/components';
 import Modifier from 'ember-modifier';
 import { initSharedState } from './shared-state';
 import { eq } from '@cardstack/boxel-ui/helpers';
+import { consume } from 'ember-provide-consume-context';
+import Component from '@glimmer/component';
 
 interface BoxComponentSignature {
   Args: { Named: { format?: Format; displayContainer?: boolean } };
@@ -26,6 +28,33 @@ interface BoxComponentSignature {
 
 export type BoxComponent = ComponentLike<BoxComponentSignature>;
 
+interface CardContextConsumerSignature {
+  Blocks: { default: [CardContext] };
+}
+
+// cardComponentModifier, when provided, is used for the host environment to get access to card's rendered elements
+const DEFAULT_CARD_CONTEXT = {
+  cardComponentModifier: class NoOpModifier extends Modifier<any> {
+    modify() {}
+  },
+  actions: undefined,
+};
+
+export class CardContextConsumer extends Component<CardContextConsumerSignature> {
+  @consume(CardContextName) declare dynamicCardContext: CardContext;
+
+  get context(): CardContext {
+    return {
+      ...DEFAULT_CARD_CONTEXT,
+      ...this.dynamicCardContext,
+    };
+  }
+
+  <template>
+    {{yield this.context}}
+  </template>
+}
+
 const componentCache = initSharedState(
   'componentCache',
   () => new WeakMap<Box<BaseDef>, BoxComponent>(),
@@ -36,7 +65,6 @@ export function getBoxComponent(
   defaultFormat: Format,
   model: Box<BaseDef>,
   field: Field | undefined,
-  context: CardContext = {},
 ): BoxComponent {
   let stable = componentCache.get(model);
   if (stable) {
@@ -46,13 +74,6 @@ export function getBoxComponent(
     | { fields: FieldsTypeFor<BaseDef>; format: Format }
     | undefined;
 
-  // cardComponentModifier, when provided, is used for the host environment to get access to card's rendered elements
-  let cardComponentModifier =
-    context.cardComponentModifier ??
-    class NoOpModifier extends Modifier<any> {
-      modify() {}
-    };
-
   function lookupFormat(userFormat: Format | undefined): {
     Implementation: BaseDefComponent;
     fields: FieldsTypeFor<BaseDef>;
@@ -78,12 +99,7 @@ export function getBoxComponent(
     if (internalFieldsCache?.format === format) {
       fields = internalFieldsCache.fields;
     } else {
-      fields = fieldsComponentsFor(
-        {},
-        model,
-        defaultFieldFormat(format),
-        context,
-      );
+      fields = fieldsComponentsFor({}, model, defaultFieldFormat(format));
       internalFieldsCache = { fields, format };
     }
 
@@ -97,26 +113,57 @@ export function getBoxComponent(
   let component: TemplateOnlyComponent<{
     Args: { format?: Format; displayContainer?: boolean };
   }> = <template>
-    {{#let
-      (lookupFormat @format) (if (eq @displayContainer false) false true)
-      as |f displayContainer|
-    }}
-      {{#if (isCard model.value)}}
-        <CardContainer
-          @displayBoundaries={{displayContainer}}
-          class='field-component-card
-            {{f.format}}-format display-container-{{displayContainer}}'
-          {{cardComponentModifier
-            card=model.value
-            format=f.format
-            fieldType=field.fieldType
-            fieldName=field.name
-          }}
-          data-test-card-format={{f.format}}
-          data-test-field-component-card
-          {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
-          ...attributes
-        >
+    <CardContextConsumer as |context|>
+      {{#let
+        (lookupFormat @format) (if (eq @displayContainer false) false true)
+        as |f displayContainer|
+      }}
+        {{#if (isCard model.value)}}
+          <CardContainer
+            @displayBoundaries={{displayContainer}}
+            class='field-component-card
+              {{f.format}}-format display-container-{{displayContainer}}'
+            {{context.cardComponentModifier
+              card=model.value
+              format=f.format
+              fieldType=field.fieldType
+              fieldName=field.name
+            }}
+            data-test-card-format={{f.format}}
+            data-test-field-component-card
+            {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
+            ...attributes
+          >
+            <f.Implementation
+              @cardOrField={{card}}
+              @model={{model.value}}
+              @fields={{f.fields}}
+              @format={{f.format}}
+              @displayContainer={{@displayContainer}}
+              @set={{model.set}}
+              @fieldName={{model.name}}
+              @context={{context}}
+            />
+          </CardContainer>
+        {{else if (isCompoundField model.value)}}
+          <div
+            data-test-compound-field-format={{f.format}}
+            data-test-compound-field-component
+            {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
+            ...attributes
+          >
+            <f.Implementation
+              @cardOrField={{card}}
+              @model={{model.value}}
+              @fields={{f.fields}}
+              @format={{f.format}}
+              @displayContainer={{@displayContainer}}
+              @set={{model.set}}
+              @fieldName={{model.name}}
+              @context={{context}}
+            />
+          </div>
+        {{else}}
           <f.Implementation
             @cardOrField={{card}}
             @model={{model.value}}
@@ -127,38 +174,9 @@ export function getBoxComponent(
             @fieldName={{model.name}}
             @context={{context}}
           />
-        </CardContainer>
-      {{else if (isCompoundField model.value)}}
-        <div
-          data-test-compound-field-format={{f.format}}
-          data-test-compound-field-component
-          {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
-          ...attributes
-        >
-          <f.Implementation
-            @cardOrField={{card}}
-            @model={{model.value}}
-            @fields={{f.fields}}
-            @format={{f.format}}
-            @displayContainer={{@displayContainer}}
-            @set={{model.set}}
-            @fieldName={{model.name}}
-            @context={{context}}
-          />
-        </div>
-      {{else}}
-        <f.Implementation
-          @cardOrField={{card}}
-          @model={{model.value}}
-          @fields={{f.fields}}
-          @format={{f.format}}
-          @displayContainer={{@displayContainer}}
-          @set={{model.set}}
-          @fieldName={{model.name}}
-          @context={{context}}
-        />
-      {{/if}}
-    {{/let}}
+        {{/if}}
+      {{/let}}
+    </CardContextConsumer>
     <style>
       .field-component-card.embedded-format {
         padding: var(--boxel-sp);
@@ -187,7 +205,6 @@ export function getBoxComponent(
     component,
     model,
     defaultFieldFormat(defaultFormat),
-    context,
   );
 
   // This cast is safe because we're returning a proxy that wraps component.
@@ -212,7 +229,6 @@ function fieldsComponentsFor<T extends BaseDef>(
   target: object,
   model: Box<T>,
   defaultFormat: Format,
-  context?: CardContext,
 ): FieldsTypeFor<T> {
   // This is a cache of the fields we've already created components for
   // so that they do not get recreated
@@ -248,7 +264,6 @@ function fieldsComponentsFor<T extends BaseDef>(
       let result = field.component(
         model as unknown as Box<BaseDef>,
         defaultFormat,
-        context,
       );
       stableComponents.set(property, result);
       return result;
@@ -302,11 +317,10 @@ export function getPluralViewComponent(
     field: Field<typeof BaseDef>,
     boxedElement: Box<BaseDef>,
   ) => typeof BaseDef,
-  context?: CardContext,
 ): BoxComponent {
   let getComponents = () =>
     model.children.map((child) =>
-      getBoxComponent(cardTypeFor(field, child), format, child, field, context),
+      getBoxComponent(cardTypeFor(field, child), format, child, field),
     ); // Wrap the the components in a function so that the template is reactive to changes in the model (this is essentially a helper)
   let pluralViewComponent: TemplateOnlyComponent<BoxComponentSignature> =
     <template>