Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/vue-inbrowser-compiler below:

vue-inbrowser-compiler - npm

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4