Embedding

The REPL can be embedded via invocation of the REPL component. 
import { REPL } from 'limber-ui';

<template>
  <REPL
    @code="..."
    {{! ...options }} />
</template>
Output: The REPL component interprets and configures the URL set on the iframe that loads the REPL.

Install

With your favorite package manager 
npm add limber-ui
pnpm add limber-ui
(etc)

Options

For each option:

⚡ live
changes to this argument will update the REPL (or its container) without a full refresh of the iframe
🔃 reload
changes to this argument will cause the REPL to fully reload
These (both ⚡ live and 🔃 reload) are inverses of each other.

@code ⚡ live

string

This is the code that both shows up in the editor and is rendered in the output pane. By default the format is gjs, so the passed code should be written in gjs.

@format ⚡ live

string

This is the format that the REPL should both render and load the editor for. The default is "gjs", but valid options are:

  • "gjs"
  • "js"
  • "gmd"
  • "svelte"
  • "vue"
  • "mermaid"
  • "hbs|ember"
  • "jsx|react"

@clickToLoad 🔃 reload

boolean

By default, the REPL will load when its bounding box approaches the viewport ( via loading=lazy ). Setting @clickToLoad will require user interaction before rendering the iframe.

The UI for click to load has stable CSS classes available for customization. .limber__code__click-to-load and .limber__code__click-to-load__button 

<REPL
  @clickToLoad={{true}}
  @editorLoad="force" />

@editor 🔃 reload

string

Set the editor size and/or split. For example passing min will minimize the editor, and passing max will maximize the editor. Also, the percent of the vertical or horizontal direction can be specified as well. For example, passing 60v will cause a vertical split where the editor takes up 60% of the available space and 30h will cause a horizontal split where the editor takes up 30% of the available space. 

<REPL @editor="30v" />

@editorLoad 🔃 reload

string

Determines how the editor should load. Normally the editor will load automatically upon detecting interaction activity. This is to optimize page-load as editors can be a few MB when fully featured. Valid options:

  • "force" - the editor will always load eagerly
  • "onclick" - the editor will only load when the user clicks that they want to edit the example
  • "never" - the editor is entirely disabled and the left-hand side is only a highlighted code snippet as is not editable
@editorLoad 
<REPL @editorLoad="never" />

@lines ⚡ live

number

Sets the height of the iframe via specifying the number of lines of code to show. 

<REPL @lines={{4}} />

@title ⚡ live

string

Sets the title attribute on the iframe. If @title is not passed, this value will be generated for you. Helps with screen readers.

@shadowdom ⚡ live

qpBoolean

Sets whether or not the output area should be rendered within a shadow-dom. The default is to render the output in a shadow-dom (true).

Changing this can be helpful if importing a library only knows how to mutate the document's head (for styles or otherwise)

@nohighlight 🔃 reload

qpBoolean

If set to true, the preview code shown before the editor loads will not have highlighting enabled. This option has no affect when the editor is forced to eagerly load. 

<REPL @nohighlight={{true}} />