├── .editorconfig ├── .gitattributes ├── .github └── workflows │ └── tests.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc.js ├── README.md ├── dist ├── LiveCode.d.ts ├── LiveCode.d.ts.map ├── LiveCode.js ├── LiveCode.js.map ├── LiveCode.test.d.ts ├── LiveCode.test.d.ts.map ├── LiveCode.test.js ├── LiveCode.test.js.map ├── OutputView.d.ts ├── OutputView.d.ts.map ├── OutputView.js ├── OutputView.js.map ├── TestFeatures.d.ts ├── TestFeatures.d.ts.map ├── TestFeatures.js ├── TestFeatures.js.map ├── index.d.ts ├── index.d.ts.map ├── index.js ├── index.js.map ├── stripIndent.d.ts ├── stripIndent.d.ts.map ├── stripIndent.js └── stripIndent.js.map ├── examples └── index.html ├── lume.config.cjs ├── package-lock.json ├── package.json ├── src ├── LiveCode.test.ts ├── LiveCode.ts ├── OutputView.ts ├── TestFeatures.ts ├── index.ts └── stripIndent.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = tab 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | indent_size = 2 15 | indent_style = space 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /.github/workflows/tests.yml: -------------------------------------------------------------------------------- 1 | name: Build and Test 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ${{ matrix.operating-system }} 8 | 9 | strategy: 10 | matrix: 11 | # TODO windows-latest 12 | operating-system: [ubuntu-latest, macos-latest] 13 | 14 | steps: 15 | - uses: actions/checkout@v1 16 | - name: Use Node.js latest 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: latest 20 | - name: npm install, build, and test 21 | run: | 22 | npm i 23 | npm test 24 | env: 25 | CI: true 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .vscode 4 | *.log 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # TODO ignore everything, then selectively expose what is needed here. 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | import config from '@lume/cli/.prettierrc.js' 2 | export default config 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @lume/live-code 2 | 3 | A `` HTML element that gives you a code editor with live results as you type. 4 | 5 | 6 | Screenshot 2024-05-01 at 3 34 28 PM 7 | 8 | 9 | #### `npm install @lume/live-code` 10 | 11 | Compatible with Solid.js, Svelte, Vue, Angular, Ember, jQuery, React, Astro, Qwik.js, and every other web framework or library for creating HTML-based applications. 12 | 13 | ## Examples: 14 | 15 | - CodePen: https://codepen.io/trusktr/pen/PogvVBj 16 | - Live demos on Lume's docs site are made with ``: https://docs.lume.io/examples/hello-world/ 17 | 18 | ## Run the examples 19 | 20 | ``` 21 | npm install && npm start 22 | ``` 23 | 24 | ## Usage 25 | 26 | Specify content with the `content` attribute: 27 | 28 | ```html 29 | 30 | 31 | 36 | 37 | 40 | ``` 41 | 42 | Specify content with the `content` property: 43 | 44 | ```html 45 | 46 | 47 | 50 | 51 | 60 | ``` 61 | 62 | The `content` attribute or JS property is more useful for short pieces of text, 63 | or for programmatically setting from a string, and with template systems that 64 | set attributes from JS variables. 65 | 66 | Here's a JSX example (useful in React, Preact, Solid.js, etc, requires using a compiler such as Babel, TypeScript, or ESBuild): 67 | 68 | ```js 69 | function SomeComponent(props) { 70 | // Set the content from a variable. 71 | return 72 | } 73 | ``` 74 | 75 | Here's a Lit `html` example (does not require any build step): 76 | 77 | ```js 78 | render() { 79 | return html`` 80 | } 81 | ``` 82 | 83 | Here's a Solid.js `html` example in a Lume `Element` (does not require any build step): 84 | 85 | ```js 86 | template() { 87 | return html` this.someCode}>` 88 | } 89 | ``` 90 | 91 | Etc. `` can be used in Vue, Svelte, Angular, and all the rest. 92 | 93 | Specify a file with the `src` attribute or JS property, and text content will be fetched from that file: 94 | 95 | ```html 96 | 97 | ``` 98 | 99 | Lastly, use a `