https://github.com/tresjs/repl
A Vue component to create a TresJS sandbox. Based on sfc.vuejs.org.
https://github.com/tresjs/repl
Last synced: 4 months ago
JSON representation
A Vue component to create a TresJS sandbox. Based on sfc.vuejs.org.
- Host: GitHub
- URL: https://github.com/tresjs/repl
- Owner: Tresjs
- License: mit
- Created: 2023-11-07T13:20:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-23T23:39:36.000Z (over 1 year ago)
- Last Synced: 2024-10-24T13:13:37.862Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://sandbox-tresjs.vercel.app
- Size: 480 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @tresjs/repl
TresJS repl as a Vue 3 component.
### With Monaco Editor
With Volar support, autocomplete, type inference, and semantic highlighting. Heavier bundle, loads dts files from CDN, better for standalone use cases.
```vue
import { Repl } from '@tresjs/repl'
import Monaco from '@tresjs/repl/monaco-editor'
import '@tresjs/repl/style.css'
```
## Advanced Usage
Customize the behavior of the REPL by manually initializing the store.
```vue
import { watchEffect } from 'vue'
import { Repl, ReplStore } from '@tresjs/repl'
import Monaco from '@tresjs/repl/monaco-editor'
// retrieve some configuration options from the URL
const query = new URLSearchParams(location.search)
const store = new ReplStore({
// initialize repl with previously serialized state
serializedState: location.hash.slice(1),
// starts on the output pane (mobile only) if the URL has a showOutput query
showOutput: query.has('showOutput'),
// starts on a different tab on the output pane if the URL has a outputMode query
// and default to the "preview" tab
outputMode: query.get('outputMode') || 'preview',
// specify the default URL to import Vue runtime from in the repl
// default is the CDN link from jsdelivr.com with version matching Vue's version
// from peerDependency
defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js',
})
// persist state to URL hash
watchEffect(() => history.replaceState({}, '', store.serialize()))
// pre-set import map
store.setImportMap({
imports: {
myLib: 'cdn link to esm build of myLib',
},
})
// use a specific version of Vue
store.setVueVersion('3.2.8')
```