add typeConstraint to spec card st field contained examples can be re-rendered

Author: tintinthong

packages/base/contains-many-component.gts

@@ -17,9 +17,15 @@ import {
   PermissionsConsumer,
 } from './field-component';
 import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
-import { getPlural } from '@cardstack/runtime-common';
+import {
+  getPlural,
+  type ResolvedCodeRef,
+  Loader,
+  loadCard,
+} from '@cardstack/runtime-common';
 import { IconTrash } from '@cardstack/boxel-ui/icons';
 import { TemplateOnlyComponent } from '@ember/component/template-only';
+import { restartableTask } from 'ember-concurrency';
 
 interface ContainsManyEditorSignature {
   Args: {
@@ -30,6 +36,7 @@ interface ContainsManyEditorSignature {
       field: Field<typeof BaseDef>,
       boxedElement: Box<BaseDef>,
     ): typeof BaseDef;
+    typeConstraint?: ResolvedCodeRef;
   };
 }
 
@@ -131,11 +138,21 @@ class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
     </style>
   </template>
 
-  add = () => {
-    // TODO probably each field card should have the ability to say what a new item should be
-    let newValue =
+  addField = restartableTask(async () => {
+    let newValue: FieldDef | null =
       primitive in this.args.field.card ? null : new this.args.field.card();
+    // TODO probably each field card should have the ability to say what a new item should be
+    if (this.args.typeConstraint) {
+      let subclassField = await loadCard(this.args.typeConstraint, {
+        loader: myLoader(),
+      });
+      newValue = new subclassField();
+    }
     (this.args.model.value as any)[this.args.field.name].push(newValue);
+  });
+
+  add = () => {
+    this.addField.perform();
   };
 
   remove = (index: number) => {
@@ -202,6 +219,7 @@ export function getContainsManyComponent({
             @arrayField={{arrayField}}
             @field={{field}}
             @cardTypeFor={{cardTypeFor}}
+            @typeConstraint={{@typeConstraint}}
           />
         {{else}}
           {{#let
@@ -270,3 +288,14 @@ export function getContainsManyComponent({
     },
   });
 }
+
+function myLoader(): Loader {
+  // we know this code is always loaded by an instance of our Loader, which sets
+  // import.meta.loader.
+
+  // When type-checking realm-server, tsc sees this file and thinks
+  // it will be transpiled to CommonJS and so it complains about this line. But
+  // this file is always loaded through our loader and always has access to import.meta.
+  // @ts-ignore
+  return (import.meta as any).loader;
+}

packages/base/field-component.gts

@@ -281,6 +281,7 @@ export function getBoxComponent(
                         (not field.computeVia)
                         permissions.canWrite
                       }}
+                      @typeConstraint={{@typeConstraint}}
                     />
                   </div>
                 </DefaultFormatsProvider>
@@ -297,6 +298,7 @@ export function getBoxComponent(
                     @fieldName={{model.name}}
                     @context={{context}}
                     @canEdit={{and (not field.computeVia) permissions.canWrite}}
+                    @typeConstraint={{@typeConstraint}}
                     ...attributes
                   />
                 </DefaultFormatsProvider>

packages/base/spec.gts

@@ -157,7 +157,7 @@ export class Spec extends CardDef {
             <h2 id='examples'>Examples</h2>
           </header>
           {{#if (eq @model.specType 'field')}}
-            <@fields.containedExamples />
+            <@fields.containedExamples @typeConstraint={{this.absoluteRef}} />
           {{else}}
             <@fields.linkedExamples @typeConstraint={{this.absoluteRef}} />
           {{/if}}

packages/experiments-realm/polymorphic-field.gts

@@ -0,0 +1,79 @@
+import {
+  Component,
+  CardDef,
+  field,
+  contains,
+  StringField,
+  FieldDef,
+} from 'https://cardstack.com/base/card-api';
+import { on } from '@ember/modifier';
+
+export class TestField extends FieldDef {
+  static displayName = 'TestField';
+  @field firstName = contains(StringField);
+
+  static fitted = class Fitted extends Component<typeof this> {
+    <template>
+      <div data-test-baseclass>
+        BaseClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <div data-test-baseclass>
+        Embedded BaseClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+}
+export class SubTestField extends TestField {
+  static displayName = 'SubTestField';
+
+  static fitted = class Fitted extends Component<typeof this> {
+    <template>
+      <div data-test-subclass>
+        SubClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <div data-test-subclass>
+        Embedded SubClass
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+
+  static edit = class Edit extends Component<typeof this> {
+    <template>
+      <div data-test-edit>
+        Edit
+        <@fields.firstName />
+      </div>
+    </template>
+  };
+}
+export class TestCard extends CardDef {
+  static displayName = 'TestCard';
+  @field specialField = contains(TestField);
+
+  static isolated = class Isolated extends Component<typeof TestCard> {
+    setSubclass = () => {
+      this.args.model.specialField = new SubTestField({
+        firstName: 'New Name',
+      });
+    };
+    <template>
+      <button {{on 'click' this.setSubclass}} data-test-set-subclass>Set
+        Subclass From Outside</button>
+      <@fields.specialField />
+    </template>
+  };
+}