Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-inbrowser-compiler-utils
Advanced tools
vue-inbrowser-compiler-utils - npm Package Compare versions
Comparing version 4.0.0-beta.3 to 4.0.0-beta.8
@@ -6,2 +6,13 @@ # Change Log | ||
| # [4.0.0-beta.8](https://github.com/vue-styleguidist/vue-styleguidist/compare/v4.0.0-beta.7...v4.0.0-beta.8) (2019-10-28) | ||
| ### Features | ||
| * emit types for vue-styleguidist ([f0af958](https://github.com/vue-styleguidist/vue-styleguidist/commit/f0af958)) | ||
| # [4.0.0-beta.3](https://github.com/vue-styleguidist/vue-styleguidist/compare/v3.25.1-beta.1...v4.0.0-beta.3) (2019-10-24) | ||
@@ -8,0 +19,0 @@ |
| { | ||
| "name": "vue-inbrowser-compiler-utils", | ||
| "version": "4.0.0-beta.3", | ||
| "version": "4.0.0-beta.8", | ||
| "description": "use this with vue-inbrowser-compiler to allow jsx compilation", | ||
@@ -33,3 +33,3 @@ "module": "lib/vue-inbrowser-compiler-utils.esm.js", | ||
| "license": "MIT", | ||
| "gitHead": "b43e0c816957101d2b3c43d097d566a17834611f" | ||
| "gitHead": "a101d4fcb896159d259f9b79319338c1ad5f161e" | ||
| } |
183
README.md
@@ -1,4 +0,4 @@ | ||
| # vue-inbrowser-compiler | ||
| # vue-inbrowser-compiler-utils | ||
| Compile vue components code into vue components objects inside of your browser | ||
| Library allowing to use buble JSX with VueJs | ||
@@ -8,180 +8,3 @@ ## install | ||
| ```bash | ||
| yarn add vue-inbrowser-compiler | ||
| yarn add vue-inbrowser-compiler-utils | ||
| ``` | ||
| ## 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}` | ||
| ```js | ||
| 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. | ||
| ```html | ||
| <Button color="blue">Test This Buttton</Button> | ||
| ``` | ||
| will be transformed into | ||
| ```js | ||
| return { | ||
| template: '<Button color="blue">Test This Buttton</Button>' | ||
| } | ||
| ``` | ||
| A more advanced use case if you want to use variables | ||
| ```jsx | ||
| // 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 | ||
| ```js | ||
| 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 | ||
| ```js | ||
| 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 | ||
| ```html | ||
| <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](https://vuejs.org/v2/guide/single-file-components.html). If there is a `<template>` or a `<script>` tag, it will return true, otherwise return false. | ||
| **prototype**: `isCodeVueSfc(code: string):boolean` | ||
| ```js | ||
| 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. | ||
| ```js | ||
| 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) | ||
| } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-7.11%
43160
- Number of lines in readme file
- decreased by-94.65%
10
No dependency changes