Merge pull request #58 from vue-styleguidist/fix-acorn-instead-of-recast

fix: use acorn instead of recast

Author: elevatebart

README.md

@@ -100,6 +100,260 @@ module.exports = {
 };
 ```
 
+## Events
+
+### `@error`
+
+When the template compilation or the script evaluation fail, errors are returned in this box. Hooking on these errors will not prevent them from displaying on the preview panel but will allow you to provide more info to your users about how to fix what they see.
+
+```vue
+<template>
+  <VueLive
+    code="<h1>make this example {{ fail }}</h1>"
+    @error="(e) => log('Error on first example', e)"
+  />
+</template>
+```
+
+## Props
+
+### `code`
+
+**Type** String
+
+Specifies the initial code to be evaluated
+
+```vue
+<template>
+  <VueLive code="<button>test</button>" />
+</template>
+```
+
+### `layout`
+
+**Type** vue component
+
+Layout to be used for displaying the
+
+Example
+
+```vue
+<template>
+  <VueLive :layout="layout" />
+</template>
+<script>
+import layout from "./Layout.vue";
+
+export default {
+  data() {
+    return { layout };
+  },
+};
+</script>
+```
+
+`layout.vue`
+
+```vue
+<template>
+  <div class="my-vuelive">
+    <div class="my-vuelive-editor">
+      <slot name="editor"></slot>
+    </div>
+    <div class="my-vuelive-preview">
+      <slot name="preview"></slot>
+    </div>
+  </div>
+</template>
+<style>
+.my-vuelive {
+  border: 1px solid #ccc;
+  border-radius: 10px;
+}
+
+.my-vuelive-editor {
+  margin: 8px;
+}
+
+.my-vuelive-preview {
+  margin: 8px;
+}
+</style>
+```
+
+### `components`
+
+**Type** Object:
+
+- key: registration name
+- value: VueJs component object
+
+Register some components to be used in the vue-live instance.
+
+Example
+
+```vue
+<template>
+  <VueLive :components="registeredComponents" code="<DatePicker />" />
+</template>
+<script>
+import DatePicker from "./DatePicker.vue";
+
+export default {
+  data() {
+    return {
+      registeredComponents: {
+        DatePicker,
+      },
+    };
+  },
+};
+</script>
+```
+
+### `requires`
+
+**Type** Object:
+
+- key: query in the require/import statement
+- value: value returned by an es5 reauire statement
+
+To allow require statements on a code evaluated in the browser, we have to pre-package all dependencies. This allows bundlers to know in advance what external dependencies will be allowed in the code.
+
+Example
+
+```vue
+<template>
+  <VueLive :requires="preRequiredObjects" :code="code" />
+</template>
+<script>
+import DatePicker from "./DatePicker.vue";
+
+export default {
+  data() {
+    return {
+      // lodash can be pre-packaged by the bundler
+      // so it can be required at runtime
+      preRequiredObjects: {
+        lodash: require("lodash"),
+      },
+      code: `
+import _ from 'lodash'
+
+const val = _.each({1,2,3}, (i, v) => {
+  return \`\${i} value \${v}\`
+})
+
+<li v-for="v in val">
+  v : {{v}}
+</li>
+      `,
+    };
+  },
+};
+</script>
+```
+
+### `jsx`
+
+**Type** Boolean
+
+JSX does not always play nice with vue templates. If you want to expose vue templates, leave this option off. If you plan on using render functions with JSX, you will have to turn this option on.
+
+Example
+
+```vue
+<template>
+  <vue-live :code="code" jsx />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      code: `
+const args = {
+  type: "button",
+  value: "update me"
+};
+
+export default {
+  render() {
+    return <input {...args} />;
+  }
+};      
+      `,
+    };
+  },
+};
+</script>
+```
+
+### `delay`
+
+**Type** Number
+
+Time between a change in the code and its effect in the preview.
+
+> **Note** If a change happens before the prview has changed, the timer is reset.
+
+### `editorProps`
+
+**Type** Object
+
+Props passed directly to [vue-prism-editor](https://github.com/koca/vue-prism-editor) as a spread
+
+### `dataScope`
+
+**Type** Object
+
+Data object that wil be merged with the output data of the preview.
+
+Example
+
+````vue
+```vue
+<template>
+  <VueLive
+    :components="registeredComponents"
+    :data-scope="dataScope"
+    code="<DatePicker :value='today' />{{ today }}"
+  />
+</template>
+<script>
+import DatePicker from "./DatePicker.vue";
+
+export default {
+  data() {
+    return {
+      registeredComponents: {
+        DatePicker,
+      },
+      // Without this variable declaration,
+      // today will not have a value when entering the
+      // particularly useful when examples or only a template
+      dataScope: {
+        today: new Date(),
+      },
+    };
+  },
+};
+</script>
+````
+
+### `checkVariableAvailability`
+
+**Type** Boolean
+
+Makes sure that every variable in the template actually exists when the user starts editing.
+
+Throws an error in te preview field when the variable dont exist.
+
+### `squiggles`
+
+**Type** Boolean default: `true`
+
+Shows a red indicator when the parser errors with the code given.
+
 ## How to contribute
 
 ```sh

demo/App.vue

@@ -82,11 +82,19 @@
       <h2>Separate components for Editor and Preview</h2>
       <div class="separate">
         <div class="preview-separate">
-          <VueLivePreview :code="separateCode" />
+          <VueLivePreview
+            :code="separateCode"
+            @error="(e) => (error = e)"
+            @success="error = undefined"
+          />
         </div>
         <hr style="width: 950px" />
         <p>Edit the code here</p>
-        <VueLiveEditor :code="separateCode" @change="updateCode" />
+        <VueLiveEditor
+          :code="separateCode"
+          @change="updateCode"
+          :error="error"
+        />
         <div class="button-bar"><button>Save</button></div>
       </div>
     </div>
@@ -128,6 +136,7 @@ export default {
       realjsx,
       separateCode: codeSfc,
       openExamples: false,
+      error: undefined,
     };
   },
   methods: {