Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
vue-inbrowser-compiler
Advanced tools
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
The npm package vue-inbrowser-compiler receives a total of 5,334 weekly downloads. As such, vue-inbrowser-compiler popularity was classified as popular.
We found that vue-inbrowser-compiler demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.