NullVoxPopuli / limber

Glimdown playground for documentation, demos, etc

Home Page:https://limber.glimdown.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

NullVoxPopuli opened this issue · comments

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: