chore: Refactor shell's view to use same flow for home and default charms (commontoolsinc#2180)

Author: jsantell

packages/charm/src/manager.ts

@@ -283,6 +283,22 @@ export class CharmManager {
     await this.runtime.idle();
   }
 
+  /**
+   * Get the default pattern cell from the space cell.
+   * @returns The default pattern cell, or undefined if not set
+   */
+  async getDefaultPattern(): Promise<Cell<NameSchema> | undefined> {
+    const cell = await this.spaceCell.key("defaultPattern").sync();
+    if (!cell.get().get()) {
+      return undefined;
+    }
+    return this.get(
+      cell.get(),
+      true,
+      nameSchema,
+    );
+  }
+
   /**
    * Track a charm as recently viewed/interacted with.
    * Maintains a list of up to 10 most recent charms.

packages/charm/src/ops/mod.ts

@@ -1,4 +1,4 @@
 export { CharmsController } from "./charms-controller.ts";
 export { ACLManager } from "./acl-manager.ts";
-export type { CharmController } from "./charm-controller.ts";
+export { CharmController } from "./charm-controller.ts";
 export * from "./utils.ts";

packages/patterns/counter.tsx

@@ -17,15 +17,18 @@ export default recipe<RecipeState, RecipeOutput>((state) => {
     [NAME]: str`Simple counter: ${state.value}`,
     [UI]: (
       <div>
-        <ct-button onClick={decrement(state)}>
+        <ct-button id="counter-decrement" onClick={decrement(state)}>
           dec to {previous(state.value)}
         </ct-button>
         <ct-cell-context $cell={state.value} inline>
           <span id="counter-result">
             Counter is the {nth(state.value)} number
           </span>
         </ct-cell-context>
-        <ct-button onClick={increment({ value: state.value })}>
+        <ct-button
+          id="counter-increment"
+          onClick={increment({ value: state.value })}
+        >
           inc to {(state.value ?? 0) + 1}
         </ct-button>
       </div>

packages/shell/integration/charm.test.ts

@@ -60,7 +60,7 @@ describe("shell charm tests", () => {
     });
 
     let handle = await page.waitForSelector(
-      "ct-button",
+      "#counter-decrement",
       { strategy: "pierce" },
     );
     handle.click();

packages/shell/integration/iframe-counter-charm.disabled_test.ts

@@ -65,7 +65,7 @@ async function getCharmResult(page: Page): Promise<{ count: number }> {
   // Use the element handle to evaluate in its context
   return await appView.evaluate((element: XAppView) => {
     // Access the private _activeCharm property
-    const activeCharmTask = element._activeCharm;
+    const activeCharmTask = element._activePatterns;
 
     if (!activeCharmTask) {
       throw new Error("No _activeCharm property found on element");
@@ -76,7 +76,7 @@ async function getCharmResult(page: Page): Promise<{ count: number }> {
     }
 
     // Get the charm controller from the Task's value
-    const charmController = activeCharmTask.value;
+    const charmController = activeCharmTask.value.activePattern;
 
     // Get the result from the charm controller
     const result = charmController.result.get();

packages/shell/src/index.ts

@@ -16,7 +16,6 @@ console.log(`ENVIRONMENT=${ENVIRONMENT}`);
 console.log(`API_URL=${API_URL}`);
 console.log(`COMMIT_SHA=${COMMIT_SHA}`);
 
-// Configure LLM client to use the correct API URL
 setLLMUrl(API_URL.toString());
 
 setRecipeEnvironment({ apiUrl: API_URL });

packages/shell/src/lib/pattern-factory.ts

@@ -35,27 +35,35 @@ export async function create(
     new HttpProgramResolver(config.url.href),
   );
 
-  const charm = await cc.create(program, undefined, config.cause);
+  const charm = await cc.create(program, { start: true }, config.cause);
 
   // Wait for the link to be processed
   await runtime.idle();
   await manager.synced();
 
-  if (type === "space-default") {
-    // Link the default pattern to the space cell
-    await manager.linkDefaultPattern(charm.getCell());
-  }
+  // Link the default pattern to the space cell
+  await manager.linkDefaultPattern(charm.getCell());
 
   return charm;
 }
 
-export function getPattern(
-  charms: CharmController[],
+export async function get(
+  cc: CharmsController,
+): Promise<CharmController | undefined> {
+  const pattern = await cc.manager().getDefaultPattern();
+  if (!pattern) {
+    return undefined;
+  }
+  return new CharmController(cc.manager(), pattern);
+}
+
+export async function getOrCreate(
+  cc: CharmsController,
   type: BuiltinPatternType,
-): CharmController | undefined {
-  const config = Configs[type];
-  return charms.find((c) => {
-    const name = c.name();
-    return name && name.startsWith(config.name);
-  });
+): Promise<CharmController> {
+  const pattern = await get(cc);
+  if (pattern) {
+    return pattern;
+  }
+  return await create(cc, type);
 }

packages/shell/src/views/AppView.ts

@@ -1,14 +1,14 @@
 import { css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import { AppState } from "../lib/app/mod.ts";
+import { AppState, AppView } from "../lib/app/mod.ts";
 import { BaseView } from "./BaseView.ts";
 import { KeyStore } from "@commontools/identity";
 import { RuntimeInternals } from "../lib/runtime.ts";
 import { DebuggerController } from "../lib/debugger-controller.ts";
 import "./DebuggerView.ts";
 import { Task } from "@lit/task";
-import { CharmController } from "@commontools/charm/ops";
+import { CharmController, CharmsController } from "@commontools/charm/ops";
 import { CellEventTarget, CellUpdateEvent } from "../lib/cell-event-target.ts";
 import { NAME } from "@commontools/runner";
 import { type NameSchema, nameSchema } from "@commontools/charm";
@@ -129,45 +129,6 @@ export class XAppView extends BaseView {
     this.hasSidebarContent = event.detail.hasSidebarContent;
   };
 
-  // Maps the app level view to a specific charm to load
-  // as the primary, active charm.
-  _activeCharmId = new Task(this, {
-    task: async ([app, rt]): Promise<string | undefined> => {
-      if (!app || !rt) {
-        return;
-      }
-      if ("builtin" in app.view) {
-        if (app.view.builtin !== "home") {
-          console.warn("Unsupported view type");
-          return;
-        }
-        {
-          await rt.cc().manager().synced();
-          const pattern = await PatternFactory.getPattern(
-            rt.cc().getAllCharms(),
-            "home",
-          );
-          if (pattern) {
-            return pattern.id;
-          }
-        }
-        const pattern = await PatternFactory.create(
-          rt.cc(),
-          "home",
-        );
-        return pattern.id;
-      } else if ("spaceDid" in app.view) {
-        console.warn("Unsupported view type");
-      } else if ("spaceName" in app.view) {
-        // eventually, this should load the default pattern
-        // for a space if needed, but for now is handled
-        // in BodyView, and only set the active charm ID
-        // for explicit charms set in the URL.
-        return app.view.charmId;
-      }
-    },
-    args: () => [this.app, this.rt],
-  });
   private handleCellWatch = (e: Event) => {
     const event = e as CustomEvent<{ cell: unknown; label?: string }>;
     const { cell, label } = event.detail;
@@ -192,30 +153,42 @@ export class XAppView extends BaseView {
   };
 
   // Do not make private, integration tests access this directly.
-  _activeCharm = new Task(this, {
-    task: async ([activeCharmId]): Promise<CharmController | undefined> => {
-      if (!this.rt || !this.app || !activeCharmId) {
+  //
+  // This fetches the active pattern and space default pattern derived
+  // from the current view.
+  _activePatterns = new Task(this, {
+    task: async (
+      [app, rt],
+    ): Promise<
+      | { activePattern: CharmController; defaultPattern: CharmController }
+      | undefined
+    > => {
+      if (!app || !rt) {
         this.#setTitleSubscription();
         return;
       }
-      const current: CharmController | undefined = this._activeCharm.value;
-      if (
-        current && current.id === activeCharmId
-      ) {
-        return current;
-      }
-      const activeCharm = await this.rt.cc().get(
-        activeCharmId,
-        true,
-        nameSchema,
+
+      const patterns = await viewToPatterns(
+        rt.cc(),
+        app.view,
+        this._activePatterns.value?.activePattern,
       );
+      if (!patterns) {
+        this.#setTitleSubscription();
+        return;
+      }
+
       // Record the charm as recently accessed so recents stay fresh.
-      await this.rt.cc().manager().trackRecentCharm(activeCharm.getCell());
-      this.#setTitleSubscription(activeCharm);
+      await rt.cc().manager().trackRecentCharm(
+        patterns.activePattern.getCell(),
+      );
+      this.#setTitleSubscription(
+        patterns.activePattern as CharmController<NameSchema>,
+      );
 
-      return activeCharm;
+      return patterns;
     },
-    args: () => [this._activeCharmId.value],
+    args: () => [this.app, this.rt],
   });
 
   #setTitleSubscription(activeCharm?: CharmController<NameSchema>) {
@@ -280,10 +253,14 @@ export class XAppView extends BaseView {
     const unauthenticated = html`
       <x-login-view .keyStore="${this.keyStore}"></x-login-view>
     `;
+    const patterns = this._activePatterns.value;
+    const activePattern = patterns?.activePattern;
+    const defaultPattern = patterns?.defaultPattern;
     const authenticated = html`
       <x-body-view
         .rt="${this.rt}"
-        .activeCharm="${this._activeCharm.value}"
+        .activeCharm="${activePattern}"
+        .defaultCharm="${defaultPattern}"
         .showShellCharmListView="${app.showShellCharmListView ?? false}"
         .showSidebar="${app.showSidebar ?? false}"
       ></x-body-view>
@@ -301,7 +278,7 @@ export class XAppView extends BaseView {
           .rt="${this.rt}"
           .keyStore="${this.keyStore}"
           .charmTitle="${this.charmTitle}"
-          .charmId="${this._activeCharmId.value}"
+          .charmId="${activePattern?.id}"
           .showShellCharmListView="${app.showShellCharmListView ?? false}"
           .showDebuggerView="${app.showDebuggerView ?? false}"
           .showSidebar="${app.showSidebar ?? false}"
@@ -328,4 +305,49 @@ export class XAppView extends BaseView {
   }
 }
 
+async function viewToPatterns(
+  cc: CharmsController,
+  view: AppView,
+  currentActive?: CharmController<unknown>,
+): Promise<
+  {
+    activePattern: CharmController<unknown>;
+    defaultPattern: CharmController<unknown>;
+  } | undefined
+> {
+  if ("builtin" in view) {
+    if (view.builtin !== "home") {
+      console.warn("Unsupported view type");
+      return;
+    }
+    const pattern = await PatternFactory.getOrCreate(cc, "home");
+    return { activePattern: pattern, defaultPattern: pattern };
+  } else if ("spaceDid" in view) {
+    console.warn("Unsupported view type");
+    return;
+  } else if ("spaceName" in view) {
+    const defaultPattern = await PatternFactory.getOrCreate(
+      cc,
+      "space-default",
+    );
+
+    let activePattern: CharmController<unknown> | undefined;
+    // If viewing a specific charm, use it as active; otherwise use default
+    if (view.charmId) {
+      if (currentActive && currentActive.id === view.charmId) {
+        activePattern = currentActive;
+      } else {
+        activePattern = await cc.get(
+          view.charmId,
+          true,
+          nameSchema,
+        );
+      }
+    } else {
+      activePattern = defaultPattern;
+    }
+    return { activePattern, defaultPattern };
+  }
+}
+
 globalThis.customElements.define("x-app-view", XAppView);