repl-sdk

The repl-sdk is a singleton per window. There is a Compiler class that has two responsibilities, once configured. Those two responsibilities:

• render something based on the input (text + format)
  This includes:
  • downloading imported dependencies from npm
  • dynamically loading support for implemented compilers
  • handle custom compilers provided by a consumer
  • out of the box compilers are configurable
• (optionally) create an editor with syntax highlighting, folding, etc

With your favorite package manager

npm add repl-sdk

import { Compiler } from 'repl-sdk';

const compiler = new Compiler();

const { element, destroy } = await compiler.compile(
  'gjs',
  '... file contents ...',
  { /* options */ });

There is only available module, and two exports from that module

import {
  Compiler,
  defaults
} from 'repl-sdk';

By default, no configuration is needed.

import { Compiler } from 'repl-sdk';

const compiler = new Compiler();

import { Compiler } from 'repl-sdk';

const compiler = new Compiler({
  logging: location.search.includes('debug'),
});

import { Compiler } from 'repl-sdk';

const compiler = new Compiler({
  on: {
    log: (type, message) => {
      // put log messages somewhere
    }
  }
});

import { Compiler } from 'repl-sdk';

const compiler = new Compiler({
  options: {
    md: {
      remarkPlugins: [ /* ... */ ]
    },
    gjs: {
      owner: {
        lookup: () => {}
        resolveRegistration: () => {}
      }
    },
    jsx: {
      react: {
        /* ... */
      }
    }
  }
});

Calling compile takes 2 to 3 arguments, the file format, the file to compile, and then an optional set of options. The options are optional for all file formats except when there is some ambiguity -- such as for the jsx and hbs file formats.

The element doesn't need to be immediately attached anywhere, but in order for the user to view what was compiled, it will need to be placed somewhere.

import { Compiler } from 'repl-sdk';

const compiler = new Compiler();

const { element, destroy }
  = await compiler.compile('vue', '...', { /* options */ });

document.body.appendChild(element);

// sometime later, cleanup
destroy();

This editor uses codemirror which supports editing on both mobile and desktop devices, as well as proper keyboard accessibility.

It has all extensions and syntax configured for each of the supported language formats.

This is await import'd, so if you don't want to use codemirror, you will not pay for the bytes of codemirror in your bundled project.

import { Compiler } from 'repl-sdk';

const compiler = new Compiler();


await compiler.createEditor(
  // where to mount the editor
  element,
  {
    // initial text
    text,
    // initial file format (selects which plugins / syntax extensions to activate)
    format,
    // function to handle when the editor wants to submit updated text
    handleUpdate,
    // additional configuration of CodeMirror
    extensions: [ /* ... */ ],
  }
);

This is the default configuration for the Compiler. It provides only the formats configuration with all the default compilers.

This can be used to add custom compilers, remove existing compilers, or replace them entirely.

import { Compiler, defaults } from 'repl-sdk';

const { formats } = defaults;

const compiler = new Compiler({
  formats: {
    // Only configure the compiler for Svelte and Vue
    svelte: formats.svelte,
    vue: formats.vue,
  }
})