Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use dynamic context for "card context" #1191

Merged
merged 3 commits into from
Apr 23, 2024
Merged

Use dynamic context for "card context" #1191

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
adb9af9
Remove unused "renderedIn" from StackItem context
lukemelia Apr 18, 2024
0b48d91
Add ember-provide-consume-context addon
lukemelia Apr 18, 2024
91cd9f7
Use dynamic context for "card context"
lukemelia Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 17 additions & 36 deletions packages/base/card-api.gts
View file
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ import {
isNotLoadedError,
isNotReadyError,
CardError,
CardContextName,
NotLoaded,
NotReady,
getField,
@@ -116,7 +117,6 @@ export interface CardContext {
};
};
}>;
renderedIn?: Component<any>;
}

function isNotLoadedValue(val: any): val is NotLoadedValue {
@@ -284,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(
@@ -754,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);
}
}

@@ -1050,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);
}
}

@@ -1436,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,
@@ -1463,7 +1447,6 @@ class LinksToMany<FieldT extends CardDefConstructor>
field: this,
format: renderFormat ?? format,
cardTypeFor,
context,
});
}
}
@@ -1472,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;
@@ -1483,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
@@ -1661,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(
@@ -2739,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;
}
@@ -3102,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;
}
}
158 changes: 86 additions & 72 deletions packages/base/field-component.gts
View file
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very cool!


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>
Loading
Loading