Merge pull request #22 from vue-styleguidist/feat-enable-jsx

feat: enable jsx support

Author: elevatebart

dangerfile.js

@@ -4,16 +4,16 @@ const path = require("path");
 const validateMessage = require("validate-commit-msg");
 
 const packageChanged = danger.git.modified_files.includes("package.json");
-const lockfileChanged = danger.git.modified_files.includes("yarn.lock");
+const lockfileChanged = danger.git.modified_files.includes("package-lock.json");
 
 if (packageChanged && !lockfileChanged) {
-  warn(`Changes were made to \`package.json\`, but not to \`yarn.lock\`.
-If you’ve changed any dependencies (added, removed or updated any packages), please run \`yarn install\` and commit changes in yarn.lock file.`);
+  warn(`Changes were made to \`package.json\`, but not to \`package-lock.json\`.
+If you’ve changed any dependencies (added, removed or updated any packages), please run \`npm install\` and commit changes in package-lock.json file.`);
 }
 
 if (!packageChanged && lockfileChanged) {
-  warn(`Changes were made to \`yarn.lock\`, but not to \`package.json\`.
-Please remove \`yarn.lock\` changes from your pull request. Try to run \`git checkout master -- yarn.lock\` and commit changes.`);
+  warn(`Changes were made to \`package-lock.json\`, but not to \`package.json\`.
+Please remove \`package-lock.json\` changes from your pull request. Try to run \`git checkout master -- package-lock.json\` and commit changes.`);
 }
 
 // Check test exclusion (.only) is included

demo/App.vue

@@ -5,13 +5,13 @@
       href="https://github.com/vue-styleguidist/vue-live/tree/master/demo"
     >Check out the source for this demo</a>
     <h2>With imported components</h2>
-    <VueLive :code="codeTemplate" :layout="CustomLayout" :components="registeredComponents"/>
+    <VueLive :code="codeTemplate" :layout="CustomLayout" :components="registeredComponents" />
     <h2>Display Single File Components</h2>
-    <VueLive :code="codeSfc" :layout="CustomLayout"/>
+    <VueLive :code="codeSfc" :layout="CustomLayout" />
     <h2>Pure JavaScript code</h2>
-    <VueLive :code="codeJs" :layout="CustomLayout"/>
+    <VueLive :code="codeJs" :layout="CustomLayout" />
     <h2>Use the requires prop to make libraries and packages available in the browser</h2>
-    <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires"/>
+    <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires" />
     <h2>With a custom update delay of 2 seconds</h2>
     <VueLive
       :code="`<input type='button' value='update me' />`"
@@ -20,14 +20,20 @@
     />
     <h2>Default Layout</h2>
     <div style="width:950px; max-width:95vw; margin:20px auto;">
-      <VueLive :code="`<input type='button' value='I am Groot' />`"/>
+      <VueLive :code="`<input type='button' value='I am Groot' />`" />
     </div>
     <h2>Custom Layout</h2>
     <div>
-      <p>Attributes available for custom layout: <code>code: String</code>, <code>language: String</code></p>
-      <VueLive :code="`<input type='button' value='I am Groot' />`" :layout="CustomLayout"/>
+      <p>
+        Attributes available for custom layout:
+        <code>code: String</code>,
+        <code>language: String</code>
+      </p>
+      <VueLive :code="`<input type='button' value='I am Groot' />`" :layout="CustomLayout" />
     </div>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+    <h2>It even supports jsx</h2>
+    <VueLive :code="realjsx" :layout="CustomLayout" :jsx="true" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />
   </main>
 </template>
 <script>
@@ -36,6 +42,7 @@ import CustomLayout from "./CustomLayout";
 import DatePicker from "vuejs-datepicker";
 import codeSfc from "!!raw-loader!./assets/Button.vue";
 import codeJs from "!!raw-loader!./assets/input.js";
+import realjsx from "!!raw-loader!./assets/real.jsx";
 import codeTemplate from "!!raw-loader!./assets/PureTemplate.html";
 import codeChicago from "!!raw-loader!./assets/Chicago.jsx";
 import all from "./assets/chicagoNeighbourhoods";
@@ -54,7 +61,8 @@ export default {
       codeJs,
       codeChicago,
       CustomLayout,
-      chicagoRequires: { "./chicagoNeighbourhoods": all }
+      chicagoRequires: { "./chicagoNeighbourhoods": all },
+      realjsx
     };
   }
 };

demo/assets/real.jsx

@@ -0,0 +1,10 @@
+const args = {
+  type: "button",
+  value: "update me"
+};
+
+export default {
+  render() {
+    return <input {...args} />;
+  }
+};