[repl, the library] Add support for rendering *any* codefence
NullVoxPopuli opened this issue · comments
NullVoxPopuli commented
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: