ember-repl 8.0.2 → 8.2.0

package/src/compile/Compiled.ts

@@ -1,3 +1,5 @@
+import { assert } from '@ember/debug';
+
 import { resource, resourceFactory } from 'ember-resources';
 
 import { getCompiler } from '../services/compiler.ts';
@@ -6,7 +8,28 @@ import { compile } from './compile.ts';
 import type { CompileState } from './state.ts';
 import type { Format, Input } from './types.ts';
 
+export interface CompiledOptions {
+  format?: Format;
+  flavor?: string;
+  /**
+   * Arguments forwarded to the compiled component.
+   *
+   * Pass a stable object reference whose property values are reactive
+   * (e.g. a `TrackedObject` or a plain object with getters reading
+   * `@tracked` state). Property updates propagate to the rendered
+   * component without triggering a recompile.
+   *
+   * Keys must be present when compilation happens — additional keys
+   * added later will not become reactive.
+   */
+  args?: Record<string, unknown>;
+}
+
 export function Compiled(markdownText: Input | (() => Input)): CompileState;
+export function Compiled(
+  markdownText: Input | (() => Input),
+  options: CompiledOptions
+): CompileState;
 export function Compiled(
   markdownText: Input | (() => Input),
   format?: Format,
@@ -25,27 +48,53 @@ export function Compiled(
 /**
  * By default, this compiles to `glimdown`. A Markdown format which
  * extracts `live` tagged code snippets and compiles them to components.
+ *
+ * Pass a `CompiledOptions` bag as the second argument to specify
+ * `format`, `flavor`, and `args` forwarded to the rendered component.
  */
 export function Compiled(
   markdownText: Input | (() => Input),
-  maybeFormat?: Format | (() => Format),
+  maybeFormatOrOptions?: Format | (() => Format) | CompiledOptions,
   maybeFlavor?: string | (() => string)
 ): CompileState {
   return resource(({ owner }) => {
     const input =
       typeof markdownText === 'function' ? markdownText() : markdownText;
-    const format =
-      typeof maybeFormat === 'function'
-        ? maybeFormat()
-        : maybeFormat || 'glimdown';
-    const flavor =
-      typeof maybeFlavor === 'function' ? maybeFlavor() : maybeFlavor;
+
+    let format: Format | undefined;
+    let flavor: string | undefined;
+    let args: Record<string, unknown> | undefined;
+
+    if (typeof maybeFormatOrOptions === 'function') {
+      format = maybeFormatOrOptions();
+    } else if (typeof maybeFormatOrOptions === 'string') {
+      format = maybeFormatOrOptions;
+    } else if (maybeFormatOrOptions) {
+      format = maybeFormatOrOptions.format;
+      flavor = maybeFormatOrOptions.flavor;
+      args = maybeFormatOrOptions.args;
+    }
+
+    format ??= 'glimdown';
+
+    if (flavor === undefined) {
+      const positional =
+        typeof maybeFlavor === 'function' ? maybeFlavor() : maybeFlavor;
+
+      flavor = typeof positional === 'string' ? positional : undefined;
+    }
+
+    assert(
+      `second parameter to Compiled must be a format, an options bag, or a function that returns a format`,
+      typeof format === 'string'
+    );
 
     const compiler = getCompiler(owner);
 
     return compile(compiler, input, {
       format,
       flavor,
+      args,
     });
   });
 }

package/src/compile/compile.ts

@@ -12,6 +12,15 @@ interface Options {
   flavor?: string;
   remarkPlugins?: unknown[];
   rehypePlugins?: unknown[];
+  /**
+   * Arguments forwarded to the compiled component.
+   *
+   * Keys present on this object at compile time become reactive `@arg`
+   * references in the rendered component. Update the values on this object
+   * (e.g. via `@tracked` or `TrackedObject`) to propagate changes into the
+   * rendered component without recompiling.
+   */
+  args?: Record<string, unknown>;
   onSuccess?: (component: ComponentLike) => Promise<unknown> | unknown;
   onError?: (error: string) => Promise<unknown> | unknown;
   onCompileStart?: () => Promise<unknown> | unknown;
@@ -67,7 +76,10 @@ async function runTheCompiler({
   if (options.format === 'glimdown') {
     result = await service.compile('gmd', text, options as any);
   } else if (options.format === 'gjs') {
-    result = await service.compileGJS(text);
+    result = await service.compileGJS(
+      text,
+      options as unknown as Record<string, unknown>
+    );
   } else if (options.format === 'hbs') {
     result = await service.compileHBS(text, options as any);
   } else {

package/src/compile/state.ts

@@ -1,5 +1,7 @@
 import { tracked } from '@glimmer/tracking';
 
+import { errorMessage } from 'repl-sdk';
+
 import type { ComponentLike } from '@glint/template';
 
 export const RESOLVE = Symbol('CompileState::resolve');
@@ -42,7 +44,7 @@ export class CompileState implements State {
   }
 
   get reason() {
-    return this.error?.message;
+    return this.error ? errorMessage(this.error) : undefined;
   }
 
   get isWaiting() {

package/src/index.ts

@@ -5,5 +5,6 @@ export { getCompiler } from './services/compiler.ts';
 export { setup as setupCompiler } from './setup.ts';
 
 // Public Types
+export type { CompiledOptions } from './compile/Compiled.ts';
 export type { CompileState } from './compile/state.ts';
 export type { Format, ModuleMap, ScopeMap } from './compile/types.ts';

package/src/services/compiler.ts

@@ -383,9 +383,13 @@ export default class CompilerService {
    * The returned component can be invoked explicitly in the consuming project.
    *
    * @param {string} code the code to be compiled
+   * @param {object} [options] additional render options (e.g. `args`)
    */
-  compileGJS(code: string): Promise<CompileResult> {
-    return this.compile('gjs', code);
+  compileGJS(
+    code: string,
+    options?: Record<string, unknown>
+  ): Promise<CompileResult> {
+    return this.compile('gjs', code, options);
   }
 
   /**

package/src/services/known-modules.ts

@@ -8,11 +8,13 @@ const frameworkModules = {
   '@ember/component/helper': () => import('@ember/component/helper'),
   '@ember/component/template-only': () =>
     import('@ember/component/template-only'),
+  '@ember/controller': () => import('@ember/controller'),
   '@ember/debug': () => import('@ember/debug'),
   '@ember/destroyable': () => import('@ember/destroyable'),
   '@ember/helper': () => import('@ember/helper'),
   '@ember/modifier': () => import('@ember/modifier'),
   '@ember/object': () => import('@ember/object'),
+  '@ember/object/compat': () => import('@ember/object/compat'),
   '@ember/object/internals': () => import('@ember/object/internals'),
   '@ember/object/observers': () => import('@ember/object/observers'),
   '@ember/owner': () => import('@ember/owner'),