fix(plugin-alloy): Update meta hooks to use context field

Author: sullivanpj

packages/plugin-alloy/src/core/contexts/meta.ts

@@ -16,12 +16,9 @@
 
  ------------------------------------------------------------------- */
 
-import {
-  ComponentContext,
-  createNamedContext,
-  useContext
-} from "@alloy-js/core";
+import { UNSAFE_AlloyPluginContext } from "@powerlines/plugin-alloy/types/_internal";
 import type { StoragePreset } from "powerlines/types/fs";
+import { usePowerlines } from "./context";
 
 export interface MetaItem {
   /**
@@ -45,30 +42,18 @@ export interface MetaItem {
   [key: string]: any;
 }
 
-/**
- * The Powerlines meta context used to determine metadata of files generated during rendering.
- */
-export const MetaContext: ComponentContext<Record<string, MetaItem>> =
-  createNamedContext<Record<string, MetaItem>>("Meta");
-
-/**
- * Hook to access the Powerlines Context.
- *
- * @returns The Context.
- */
-export function useMetaContext(): Record<string, MetaItem> | undefined {
-  return useContext(MetaContext);
-}
-
 /**
  * Hook to safely access the render context's metadata.
  *
  * @returns The Powerlines context or undefined if not set.
  */
 export function useMetaSafe(): Record<string, MetaItem> | undefined {
-  const meta = useMetaContext();
+  const context = usePowerlines();
 
-  return meta ?? undefined;
+  return (
+    (context as unknown as UNSAFE_AlloyPluginContext).$$internal.meta.alloy ??
+    undefined
+  );
 }
 
 /**

packages/plugin-alloy/src/index.tsx

@@ -22,7 +22,6 @@ import rollupPlugin from "@alloy-js/rollup-plugin";
 import { StormJSON } from "@stryke/json/storm-json";
 import { findFileExtension } from "@stryke/path/file-path-fns";
 import { Plugin } from "powerlines/types/plugin";
-import { MetaContext } from "./core/contexts/meta";
 import { UNSAFE_AlloyPluginContext } from "./types/_internal";
 import { AlloyPluginContext, AlloyPluginOptions } from "./types/plugin";
 
@@ -99,22 +98,18 @@ export const plugin = <
           const context = this as unknown as UNSAFE_AlloyPluginContext;
           context.$$internal.meta.alloy ??= {};
 
-          this.render = async (child: Children) => {
-            const output = await renderAsync(
-              <MetaContext.Provider value={context.$$internal.meta.alloy}>
-                {child}
-              </MetaContext.Provider>
-            );
+          this.render = async (children: Children) => {
+            const output = await renderAsync(children);
 
             if (!Object.keys(output).length) {
               this.debug(
-                "No output files were rendered by Alloy-js templates."
+                "No output files were rendered by Alloy-js component templates."
               );
             } else {
               this.debug(
                 `Processing ${
                   Object.keys(output).length
-                } rendered output files from Alloy-js templates.`
+                } rendered output files from Alloy-js component templates.`
               );
 
               await traverseOutput(output, {
@@ -128,7 +123,8 @@ export const plugin = <
                 visitFile: file => {
                   if ("contents" in file) {
                     const metadata =
-                      context.$$internal.meta.alloy[file.path] ?? {};
+                      (this as unknown as UNSAFE_AlloyPluginContext).$$internal
+                        .meta.alloy[file.path] ?? {};
                     if (metadata.kind === "builtin") {
                       if (!metadata.id) {
                         throw new Error(

packages/plugin-alloy/src/types/plugin.ts

@@ -57,5 +57,36 @@ export type AlloyPluginResolvedConfig = BabelPluginResolvedConfig & {
 export type AlloyPluginContext<
   TResolvedConfig extends AlloyPluginResolvedConfig = AlloyPluginResolvedConfig
 > = PluginContext<TResolvedConfig> & {
-  render: (child: Children) => Promise<void>;
+  /**
+   * A function to render children components within the [Alloy](https://alloy-framework.github.io) context, and write any saved content to the file system.
+   *
+   * @remarks
+   * If the {@link children} provided to this function use the {@link PowerlinesContext} (accessible using the {@link usePowerlines} hook), it is very important that they are wrapped by the {@link Output} component. This ensures that the Powerlines context is properly provided to all child components during rendering. Since [\@alloy-js/core](https://alloy-framework.github.io) uses symbols to resolve context identifiers, failing to use the {@link Output} component will likely lead to unexpected behavior or errors during the rendering process.
+   *
+   * @example
+   * ```tsx
+   * import alloy from "@powerlines/plugin-alloy";
+   * import { Output } from "@powerlines/plugin-alloy/core/components/output";
+   *
+   * export const plugin = () => {
+   *   return [
+   *      alloy(),
+   *      {
+   *        name: "my-plugin",
+   *        async prepare() {
+   *          await this.render(
+   *            <Output context={this}>
+   *              ...
+   *            </Output>
+   *          );
+   *        }
+   *      }
+   *   ];
+   * };
+   * ```
+   *
+   * @param children - The children components to render.
+   * @returns A promise that resolves when rendering is complete.
+   */
+  render: (children: Children) => Promise<void>;
 };