Skip to content

[repl, the library] Add support for rendering *any* codefence #1632

Description

@NullVoxPopuli

We can support any/all renderers via dynamic import, keyed off the code fence.

import { compile } from 'ember-repl';

await compile(text, {
  formats: {
    /**
     * example
     * ```gjs live
     * content here
     * ```
     */
    gjs: {
      needsLiveMeta: true, // default
      compiler: () => import(...),
    },
    /**
     * example
     * ```jsx live
     * content here
     * ```
     */
    jsx: {
      compiler: () => import(...),
    },
    /**
     * example
     * ```svelte live
     * content here
     * ```
     */
    svelte: {
      compiler: () => import(...),
    },
    /**
     * example
     * ```mermaid
     * content here
     * ```
     */
    mermaid: {
      needsLiveMeta: false, // compile and replace with mermaid output, not preview
      compiler: () => import(...),
    },
  },
  onSuccess: (RootComponent) => {
    /* do something with the rendered `text` */
  }
  /* ... */
});

To support https://mermaid.js.org/config/usage.html

The type for the above:

// ComponentLike is "native" to the system, since it's Ember
// string outputs will be innerHTML'd
//
// optionally, 
//   nothing may be returned of the compiler wants to render in to the parentElement
type Compiled = ComponentLike | string;
type Compiler = 
  | (textContent: string, parentElement: HTMLElement) => Compiled | void;

interface LanguageOptions {
  compiler: () => Promise<{ default: Compiler }>
  /* ... */
}

Once the change is made to the REPL, this'll need to be updated:

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions