@lume/live-code v0.6.4
@lume/live-code
A <live-code>
element that gives you a code editor with live results as you type.
Live examples: https://docs.lume.io/examples/hello-world/
npm install @lume/live-code
Run the examples
npm install && npm start
Usage
Specify content with the content
attribute:
<live-code content="console.log('hello')" mode="script>iframe" />
<script type="importmap">
... setup the import map, f.e. see examples/index.html, or use an tool to generate an import map such as JSPM Importmap Generator. ...
</script>
<script type="module">
import '@lume/live-code' // defines the element
</script>
Specify content with the content
property:
<live-code id="editor" mode="script>iframe" />
<script type="importmap">
...
</script>
<script>
import '@lume/live-code' // defines the element
const editor = document.querySelector('#editor')
editor.content = `
if (true)
console.log('hello')
`
</script>
The content
attribute or JS property is more useful for short pieces of text,
or for programmatically setting from a string, and with template systems that
set attributes from JS variables.
Here's a JSX example (useful in React, Preact, Solid.js, etc):
function SomeComponent(props) {
// Set the content from a variable.
return <live-code content={props.someCode} />
}
Here's a Lit html
example:
render() {
return html`<live-code content=${this.someCode}></live-code>`
}
Here's a Solid.js html
example in a Lume Element
:
template() {
return html`<live-code content=${() => this.someCode}></live-code>`
}
Etc. <live-code>
can be used in Vue, Svelte, Angular, and all the rest.
Specify a file with the src
attribute or JS property, and text content will be fetched from that file:
<live-code src="./path/to/file.js" mode="script>iframe" />
Lastly, use a <template>
to specify text content inline. This can be cleaner
than placing multiline text inside the content
attribute by hand:
<live-code>
<template>
<h1>Example</h1>
<script>
const h1 = document.querySelector('h1')
h1.style.color = 'royalblue'
</script>
</template>
</live-code>
Note that if src
or content
are specified, those take priority over the
<template>
method.
Note that <template>
currently only works when it is initially present, but
not if it is added later. If you're doing things programmatically, then send the
content in via the content
property instead of appending a <template>
(f.e.
editor.content = template.innerHTML
).
Attributes
Each attribute has a respective JS property of the same name.
content
- Either a string of text, or a class or ID selector starting with.
or#
. The given text string, or the text content of the selected element, will appear in the editor. Any time the user resets the editor with the Reset button orreset()
method, the text in the editor will reset to the initial value specified by this. Default:""
which is ignored.src
- Specify a file from which to get text content from. Ifcontent
is also specified, content loaded fromsrc
will have priority andcontent
will be overridden. Default:""
which is ignored.autorun
- A boolean. If true, editing the text will cause the preview area to automatically re-run based on the new content. TheRerun
button will always force a rerun. Default:true
.stripIndent
- A boolean. If true, the given code will be unindented, which is useful for template strings that are indented within the source where they are defined. Default:true
.trim
- A boolean. If true, leading and trailing white space will be removed. Default:true
.debounce
- A number. Ifautorun
is true, then autorun is debounced by this amount in milliseconds after a user types into the code editor. Defaults:1000
.mode
- The mode specifies which type of content the editor will execute. Possible values are the following strings:"html>iframe"
- The content will be treated as HTML and placed in an iframe."script>iframe"
- The content is executed as a<script>
inside an iframe.
Default:
"html>iframe"
Methods
reset()
Resets the text content back to the original before it was modified. This is the same thing the Reset
button does.
copy()
Copy the current text to the system clipboard. This is the same thing the Copy
button does.
rerun()
Reruns the live output. This is the same thing the Rerun
button does.
toggleFullscreen()
Toggles fullscreen mode. This is the same thing the Toggle Fullscreen
button does.
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
7 months ago
7 months ago
5 months ago
5 months ago
6 months ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago