Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
vue-inbrowser-compiler-sucrase
Advanced tools
compile vue single file components right in your browser with support for TypeScript through sucrase
Compile vue components code into vue components objects inside of your browser
yarn add vue-inbrowser-compiler
This library is meant to help write components for vue that can be edited through text.
Compiles a string of pseudo javascript code written in es2015. It returns the body of a function as a string. Once you execute the function, it will return a VueJS component.
prototype: compile(code: string, config: BubleConfig): {script: string, style: string}
import { compile } from 'vue-inbrowser-compiler'
/**
* render a component
*/
function getComponent(code) {
const conpiledCode = compile(
code,
// pass in config options to buble to set up the output
{
target: { ie: 11 }
}
)
const func = new Function(conpiledCode.script)
return func()
}
The formats of the code here are the same as vue-live and vue-styleguidist
Most common use case is a simple vue template.
<button color="blue">Test This Buttton</button>
will be transformed into
return {
template: '<Button color="blue">Test This Buttton</Button>'
}
A more advanced use case if you want to use variables
// initialize variables here and use them below
let show = true
let today = new Date();
// starting from the first line that starts with a <tag>,
// the rest is considered a template
<input type="checkbox" v-model="show">
<date-picker
style="text-align:center;"
v-if="show"
:value="today"/>
will turn into
let show = true
let today = new Date();
return {
data(){
return{
show: show,
today: today
}
}
template: `<input type="checkbox" v-model="show">
<date-picker
style="text-align:center;"
v-if="show"
:value="today"/>`
}
A simple way to make it explicit
new Vue({
template: `
<div>
<input v-model="value" type="checkbox">
<h1 v-if="value">I am checked</h1>
</div>`,
data() {
return {
value: false
}
}
})
<template>
<div class="hello">
<h1>Colored Text</h1>
<button>{{ msg }}</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Push Me'
}
}
}
</script>
<style>
.hello {
text-align: center;
color: #900;
}
</style>
Detects if the code given corresponds to a VueJS Single File Component. If there is a <template>
or a <script>
tag, it will return true, otherwise return false.
prototype: isCodeVueSfc(code: string):boolean
import { isCodeVueSfc } from 'vue-inbrowser-compiler'
if (isCodeVueSfc(code)) {
doStuffForSFC(code)
} else {
doStuffForJSFiles(code)
}
Takes the css style passed in first argument, scopes it using the suffix and adds it to the current page.
prototype: addScopedStyle(css: string, suffix: string):void
In order to make JSX work with the compiler, you need to specify a pragma. Since tis pragma has a different form for VueJs than for ReactJs, we need to provide an adapter.
import { compile, adaptCreateElement } from 'vue-inbrowser-compiler'
/**
* render a JSX component
*/
function getComponent(code) {
const conpiledCode = compile(
code,
// in this config we set up the jsx pragma to a higher order function
{
jsx: '__pragma__(h)'
}
)
const func = new Function('__pragma__', conpiledCode.script)
// now pass the higher order function to the function call
return func(adaptCreateElement)
}
FAQs
compile vue single file components right in your browser with support for TypeScript through sucrase
The npm package vue-inbrowser-compiler-sucrase receives a total of 1,514 weekly downloads. As such, vue-inbrowser-compiler-sucrase popularity was classified as popular.
We found that vue-inbrowser-compiler-sucrase demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.