Package Exports

vue-inbrowser-compiler-sucrase
vue-inbrowser-compiler-sucrase/lib/vue-inbrowser-compiler-sucrase.cjs.js
vue-inbrowser-compiler-sucrase/lib/vue-inbrowser-compiler-sucrase.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-inbrowser-compiler-sucrase) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 compiledCode = compile(
    code,
    // in this config we set up the jsx pragma to a higher order function
    {
      jsx: '__pragma__(h)'
    }
  )
  const func = new Function('__pragma__', compiledCode.script)
  // now pass the higher order function to the function call
  return func(adaptCreateElement)
}