vue-inbrowser-compiler

vue-inbrowser-compiler

Compile vue components code into vue components objects inside of your browser

install

yarn add vue-inbrowser-compiler

usage

This library is meant to help write components for vue that can be edited through text.

compile

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

pseudo jsx

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"/>`
}

Vue apps

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
    }
  }
})

Single File Components

<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>

isCodeVueSfc

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)
}

addScopedStyle

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

adaptCreateElement

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)
}

Changelog

3.16.0 (2019-07-15)

Bug Fixes

• docgen: allow for v-model in functional components (8884e62), closes #493
• bump clipboard-copy version (b3c86d9), closes #500
• rename createElement (429dd96)

Features

• add Higher order funciton to Compile pragmas (5783eb4)
• allow compiler to render/compile JSX (5084a39)
• use styleguidePublicPath in server (bd5e3ec)
• use the JSX capabilities of compiler (a6db6cb)