Babel

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Language Info

Name

babel

Extensions

.es, .babel

Editor

script

Compiler

The official @babel/standalone compiler.

Version

@babel/standalone: v7.17.2

Custom Settings

Custom settings added to the property babel are passed as a JSON object to the Babel.transform method during compile. Please check the documentation for full reference.

By default, the following configuration is used:

{
  "babel": { "presets": [["env", { "modules": false }], "typescript", "react"] }
}

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example Usage

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "babel": "export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!</>;\n",
    "compiled": "open"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "params": {
    "babel": "export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!</>;\n",
    "compiled": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "babel": "export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!</>;\n",
    "compiled": "open"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "params": {
    "babel": "export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!</>;\n",
    "compiled": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "babel": "export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!</>;\n",
    "compiled": "open"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Links

• Babel official website
• Babel documentation