live-code
所属分类：代码编辑器
开发工具：Vue
文件大小：0KB
下载次数：0
上传日期：2023-09-03 19:15:06
上 传 者：
sh-1993
说明： Vue的实时代码编辑器，
(Live code editor for Vue,)
文件列表:
.editorconfig (255, 2023-11-28)
.npmignore (71, 2023-11-28)
.npmrc (19, 2023-11-28)
.prettierignore (20, 2023-11-28)
.prettierrc.js (68, 2023-11-28)
dist/ (0, 2023-11-28)
dist/LiveCode.d.ts (2629, 2023-11-28)
dist/LiveCode.d.ts.map (1033, 2023-11-28)
dist/LiveCode.js (28641, 2023-11-28)
dist/LiveCode.js.map (9489, 2023-11-28)
dist/OutputView.d.ts (797, 2023-11-28)
dist/OutputView.d.ts.map (645, 2023-11-28)
dist/OutputView.js (7286, 2023-11-28)
dist/OutputView.js.map (2248, 2023-11-28)
dist/TestFeatures.d.ts (246, 2023-11-28)
dist/TestFeatures.d.ts.map (259, 2023-11-28)
dist/TestFeatures.js (4489, 2023-11-28)
dist/TestFeatures.js.map (703, 2023-11-28)
dist/index.d.ts (66, 2023-11-28)
dist/index.d.ts.map (123, 2023-11-28)
dist/index.js (64, 2023-11-28)
dist/index.js.map (121, 2023-11-28)
dist/stripIndent.d.ts (161, 2023-11-28)
dist/stripIndent.d.ts.map (201, 2023-11-28)
dist/stripIndent.js (539, 2023-11-28)
dist/stripIndent.js.map (675, 2023-11-28)
examples/ (0, 2023-11-28)
examples/index.html (3780, 2023-11-28)
package.json (1433, 2023-11-28)
src/ (0, 2023-11-28)
src/LiveCode.ts (14956, 2023-11-28)
src/OutputView.ts (3202, 2023-11-28)
src/TestFeatures.ts (1366, 2023-11-28)
src/index.ts (30, 2023-11-28)
... ...
# @lume/live-code
A `` 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:
```html
```
Specify content with the `content` property:
```html
```
The `content` attribute or JS property is more useful for short pieces of text, or
for programmatically setting from a string. Here's a JSX example (useful in
React, Preact, Solid.js, etc):
```js
function SomeComponent(props) {
return
}
```
Here's a Lit `html` example:
```js
render() {
return html``
}
```
Here's a Solid.js `html` example in a Lume `Element`:
```js
template() {
return html` this.someCode} mode="html>iframe">`
}
```
Etc. `` can be used in Vue, Svelte, Angular, and all the rest.
Specify a file with the `src` attribute or JS property to have text content fetched from a file.
```html
```
Lastly, use a `` to specify text content. This can be nicer than the
`content` attribute when the text is multiline:
```html
Example
```
Note that if `src` or `content` are specified, those take priority over the
`` method.
Note that `` 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 `` (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 or `reset()` method, the text in the editor will reset to the initial
value specified by this.
- `src` - Specify a file from which to get text content from. If `content` is
also specified, content loaded from `src` will have priority and `content` will
be overridden.
- `autorun` - A boolean. If true, editing the text will cause the preview area
to automatically re-run based on the new content. The `Rerun` button will always force a
rerun.
- `debounce` - A number. If `autorun` is `true`, then the automatic re-run will
happen only after a delay (as specified by this prop) after the user has stopped
inputting text.
- `mode` - The mode specified 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 `