Add code ref validation to code ref field

Author: habdelra

packages/base/code-ref.gts

@@ -1,3 +1,4 @@
+import type Owner from '@ember/owner';
 import { tracked } from '@glimmer/tracking';
 import {
   Component,
@@ -14,7 +15,14 @@ import {
   type SerializeOpts,
   type JSONAPISingleResourceDocument,
 } from './card-api';
-import { ResolvedCodeRef } from '@cardstack/runtime-common';
+import { restartableTask } from 'ember-concurrency';
+import { consume } from 'ember-provide-consume-context';
+import {
+  type ResolvedCodeRef,
+  type Loader,
+  loadCard,
+  CardURLContextName,
+} from '@cardstack/runtime-common';
 import { not } from '@cardstack/boxel-ui/helpers';
 import { BoxelInput } from '@cardstack/boxel-ui/components';
 import CodeIcon from '@cardstack/boxel-icons/code';
@@ -39,35 +47,81 @@ class BaseView extends Component<typeof CodeRefField> {
 }
 
 class EditView extends Component<typeof CodeRefField> {
-  @tracked private rawInput: string | undefined = maybeSerializeCodeRef(
+  @consume(CardURLContextName) declare cardURL: string | undefined;
+  @tracked validationState: 'initial' | 'valid' | 'invalid' = 'initial';
+  @tracked private maybeCodeRef: string | undefined = maybeSerializeCodeRef(
     this.args.model ?? undefined,
   );
 
   <template>
     <BoxelInput
-      @value={{this.rawInput}}
+      data-test-hasValidated={{this.setIfValid.isIdle}}
+      @value={{this.maybeCodeRef}}
+      @state={{this.validationState}}
       @onInput={{this.onInput}}
       @disabled={{not @canEdit}}
     />
   </template>
 
-  private onInput = (inputVal: string) => {
-    this.rawInput = inputVal;
-    if (this.rawInput.length === 0) {
-      this.args.set(undefined);
-      return;
-    }
-
-    let parts = this.rawInput.split('/');
-    if (parts.length < 2) {
-      this.args.set(undefined);
-      return;
+  constructor(owner: Owner, args: any) {
+    super(owner, args);
+    if (this.maybeCodeRef != null) {
+      this.setIfValid.perform(this.maybeCodeRef, true);
     }
+  }
 
-    let name = parts.pop();
-    let module = parts.join('/');
-    this.args.set({ module, name });
+  private onInput = (inputVal: string) => {
+    this.maybeCodeRef = inputVal;
+    this.setIfValid.perform(this.maybeCodeRef);
   };
+
+  private setIfValid = restartableTask(
+    async (maybeCodeRef: string, checkOnly?: true) => {
+      this.validationState = 'initial';
+      if (maybeCodeRef.length === 0) {
+        if (!checkOnly) {
+          this.args.set(undefined);
+        }
+        return;
+      }
+
+      let parts = maybeCodeRef.split('/');
+      if (parts.length < 2) {
+        this.validationState = 'invalid';
+        return;
+      }
+
+      let name = parts.pop()!;
+      let module = parts.join('/');
+      try {
+        if (moduleIsUrlLike(module)) {
+          await loadCard(
+            { module, name },
+            {
+              loader: myLoader(),
+              relativeTo: this.cardURL ? new URL(this.cardURL) : undefined,
+            },
+          );
+          this.validationState = 'valid';
+          if (!checkOnly) {
+            this.args.set({ module, name });
+          }
+        } else {
+          let code = (await import(module))[name];
+          if (code) {
+            this.validationState = 'valid';
+            if (!checkOnly) {
+              this.args.set({ module, name });
+            }
+          } else {
+            this.validationState = 'invalid';
+          }
+        }
+      } catch (err) {
+        this.validationState = 'invalid';
+      }
+    },
+  );
 }
 
 export default class CodeRefField extends FieldDef {
@@ -128,3 +182,14 @@ function maybeSerializeCodeRef(
   }
   return undefined;
 }
+
+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/host/app/components/preview.gts

@@ -5,6 +5,7 @@ import { provide } from 'ember-provide-consume-context';
 import {
   CardContextName,
   DefaultFormatsContextName,
+  CardURLContextName,
   ResolvedCodeRef,
 } from '@cardstack/runtime-common';
 
@@ -46,6 +47,14 @@ export default class Preview extends Component<Signature> {
     };
   }
 
+  @provide(CardURLContextName)
+  // @ts-ignore "cardURL is declared but not used"
+  private get cardURL() {
+    return 'id' in this.args.card
+      ? (this.args.card?.id as string | undefined)
+      : undefined;
+  }
+
   <template>
     <this.renderedCard @displayContainer={{@displayContainer}} ...attributes />
   </template>