use rollup to maintain the library

.gitignore

@@ -2,6 +2,9 @@
 node_modules
 /dist
 
+# tests artefact
+/tests/e2e/videos
+
 # local env files
 .env.local
 .env.*.local

.travis.yml

@@ -22,13 +22,21 @@ branches:
   only:
     - master
 
+stages:
+  - test
+  - name: demo
+    if: type != pull_request AND branch = master
+  - name: release
+    if: type != pull_request AND branch = master  
+
 jobs:
   include:
     - stage: test
       script:
+        - npx danger ci
         - yarn lint
         - yarn test:unit --runInBand
-        - npx danger ci
+        - yarn test:e2e --headless
 
     - stage: demo
       script: yarn build:demo

README.md

@@ -1,18 +1,18 @@
-
 # vue-live
 
 A lightweight playground for live editing VueJs code in the browser
 
 [![Build Status](https://travis-ci.com/vue-styleguidist/vue-live.svg?branch=master)](https://travis-ci.com/vue-styleguidist/vue-live)
 [![NPM Version](https://img.shields.io/npm/v/vue-live.svg)](https://www.npmjs.com/package/vue-live) [![NPM Downloads](https://img.shields.io/npm/dm/vue-live.svg)](https://www.npmjs.com/package/vue-live)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-----
+---
 
 ## Usage
 
 The simplest way to render components is as a VueJs template:
 
-``` vue
+```vue
 <template>
     <VueLive :code="`<date-picker />`" :components="{ DatePicker }">
 </template>
@@ -36,26 +36,31 @@ export default {
 Check out the [demo](http://vue-live.surge.sh) for alernative syntaxes to write your showcases.
 
 ## How to contribute
+
 ```
 yarn install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 yarn serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 yarn build
 ```
 
 ### Run your tests
+
 ```
 yarn test:unit
 ```
 
 ### Lints and fixes files
+
 ```
 yarn lint
 ```

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

dangerfile.js

@@ -1,5 +1,7 @@
-// eslint-disable-next-line import/no-unresolved, import/extensions
-import { danger, warn } from "danger";
+/* eslint-disable */
+const fs = require("fs");
+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");
@@ -13,3 +15,43 @@ 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.`);
 }
+
+// Check test exclusion (.only) is included
+var modifiedSpecFiles = danger.git.modified_files.filter(function(filePath) {
+  return filePath.match(/__tests__\/.+\.(js|jsx|ts|tsx)$/gi);
+});
+
+var testFilesIncludeExclusion = modifiedSpecFiles.reduce(function(acc, value) {
+  var content = fs.readFileSync(value).toString();
+  var invalid =
+    content.indexOf("it.only") >= 0 || content.indexOf("describe.only") >= 0;
+  if (invalid) {
+    acc.push(path.basename(value));
+  }
+  return acc;
+}, []);
+
+if (testFilesIncludeExclusion.length > 0) {
+  fail("an `only` was left in tests (" + testFilesIncludeExclusion + ")");
+}
+
+//validate commit message in PR if it conforms conventional change log, notify if it doesn't.
+var messageConventionValid = danger.git.commits.reduce(function(acc, value) {
+  var valid = validateMessage(value.message);
+  return valid && acc;
+}, true);
+
+let errorCount = 0;
+
+if (!messageConventionValid) {
+  warn(
+    "commit message does not follows conventional change log (" +
+      ++errorCount +
+      ")"
+  );
+  markdown(
+    "> (" +
+      errorCount +
+      ") : vue-live uses conventional change log to generate changelog automatically. It seems some of commit messages are not following those, please check [contributing guideline](https://github.com/ReactiveX/rxjs/blob/master/CONTRIBUTING.md#commit-message-format) and update commit messages."
+  );
+}

demo/CustomLayout.vue

@@ -33,4 +33,28 @@
   text-align: center;
   border-radius: 0 10px 10px 0;
 }
+
+@media only screen and (max-width: 1000px) {
+  .preview-code {
+    width: 90vw;
+  }
+}
+
+@media only screen and (max-width: 568px) {
+  .preview-code {
+    display: block;
+  }
+
+  .preview-code > div {
+    width: auto;
+  }
+
+  .preview-code > div:first-child {
+    border-radius: 10px 10px 0 0;
+  }
+
+  .preview-code > div:last-child {
+    border-radius: 0 0 10px 10px;
+  }
+}
 </style>

package.json

@@ -1,26 +1,16 @@
 {
   "name": "vue-live",
   "version": "0.0.0-dev",
+  "author": "Bart Ledoux <ledouxb@me.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "cross-env LIB_MAKING=true vue-cli-service build --target lib --entry ./src/index.js",
-    "build:demo": "vue-cli-service build",
+    "build": "rollup -c",
     "lint": "vue-cli-service lint",
+    "build:demo": "vue-cli-service build",
+    "start": "vue-cli-service serve",
+    "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit"
   },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vue-styleguidist/vue-live.git"
-  },
-  "bugs": {
-    "url": "https://github.com/vue-styleguidist/vue-live/issues"
-  },
-  "author": "Bart Ledoux <ledouxb@me.com>",
-  "main": "./dist/vue-live.common.js",
-  "files": [
-    "./dist"
-  ],
   "dependencies": {
     "acorn": "^6.1.1",
     "buble": "^0.19.7",
@@ -34,6 +24,7 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.6.0",
+    "@vue/cli-plugin-e2e-cypress": "^3.7.0",
     "@vue/cli-plugin-eslint": "^3.6.0",
     "@vue/cli-plugin-unit-jest": "^3.6.3",
     "@vue/cli-service": "^3.6.0",
@@ -45,6 +36,14 @@
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "raw-loader": "^2.0.0",
+    "rollup": "^1.11.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-css-only": "^1.0.0",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-vue": "^5.0.0",
+    "validate-commit-msg": "^2.14.0",
     "vuejs-datepicker": "^1.5.4"
   },
   "eslintConfig": {
@@ -89,5 +88,17 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "bugs": {
+    "url": "https://github.com/vue-styleguidist/vue-live/issues"
+  },
+  "files": [
+    "./dist"
+  ],
+  "license": "MIT",
+  "main": "./dist/vue-live.common.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-styleguidist/vue-live.git"
+  }
 }

rollup.config.js

@@ -0,0 +1,43 @@
+import * as path from "path";
+import cjs from "rollup-plugin-commonjs";
+import node from "rollup-plugin-node-resolve";
+import babel from "rollup-plugin-babel";
+import vue from "rollup-plugin-vue";
+import css from "rollup-plugin-css-only";
+import json from "rollup-plugin-json";
+
+const resolve = _path => path.resolve(__dirname, _path);
+
+export default {
+  input: resolve("./src/main.js"),
+  output: {
+    file: resolve(`./dist/vue-live.common.js`),
+    format: "cjs"
+  },
+  plugins: [
+    cjs(),
+    node(),
+    babel({
+      babelrc: false,
+      presets: [["@vue/babel-preset-app", { useBuiltIns: false }]],
+      extensions: [".js"],
+      runtimeHelpers: true
+    }),
+    vue(),
+    css(),
+    json()
+  ],
+  external: [
+    "acorn",
+    "buble",
+    "walkes",
+    "hash-sum",
+    "vue-template-compiler",
+    "rewrite-imports",
+    "prismjs",
+    "prismjs/themes/prism-tomorrow.css",
+    "prismjs/components/prism-jsx.min",
+    "vue-prism-editor/dist/VuePrismEditor.css",
+    "vue-prism-editor"
+  ]
+};

src/Preview.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script>
-import { transform } from "buble";
 import compileCode, { isCodeVueSfc } from "./utils/compileCode";
 import getVars from "./utils/getVars";
 import getVueConfigObject from "./utils/getVueConfigObject";
@@ -71,7 +70,7 @@ export default {
           // it can be:
           // - a script setting up variables => we set up the data property of renderedComponent
           // - a `new Vue()` script that will return a full config object
-          script = transform(renderedComponent.script).code;
+          script = renderedComponent.script;
           data = getVueConfigObject(script, listVars) || {};
         }
         if (renderedComponent.html) {

src/VueLive.vue

@@ -22,10 +22,11 @@ import "vue-prism-editor/dist/VuePrismEditor.css";
 import "prismjs/components/prism-jsx.min";
 
 import PrismEditor from "vue-prism-editor";
-import Preview from "./Preview";
-import VueLiveLayout from "./VueLiveDefaultLayout";
 import hash from "hash-sum";
 
+import Preview from "./Preview.vue";
+import VueLiveLayout from "./VueLiveDefaultLayout.vue";
+
 const LANG_TO_PRISM = {
   vue: "html",
   js: "jsx"

src/utils/__tests__/addScopedStyle.unit.js

@@ -0,0 +1,10 @@
+import addScopedStyle from "../addScopedStyle";
+
+describe("addScopedStyle", () => {
+  it("should add scoped style to the head", () => {
+    addScopedStyle(".foo{ color:red}", "data-baz");
+    expect(document.head.getElementsByTagName("style")[0].innerHTML).toContain(
+      ".foo[data-data-baz] { color:red}"
+    );
+  });
+});

src/utils/__tests__/compileCode.unit.js

@@ -1,14 +1,14 @@
 /* eslint-disable no-eval */
-import compileCode from '../compileCode'
+import compileCode from "../compileCode";
 
-describe('compileCode', () => {
+describe("compileCode", () => {
   // eslint-disable-next-line no-unused-vars
-  let dummySet
+  let dummySet;
   // eslint-disable-next-line no-unused-vars
   function Vue(param) {
-    dummySet = param
+    dummySet = param;
   }
-  it('bake template into a new Vue', () => {
+  it("bake template into a new Vue", () => {
     const sut = compileCode(`
 <template>
 	<div/>
@@ -18,28 +18,28 @@ const param = 'Foo'
 export default {
 	param
 }
-</script>`)
-    eval(sut.script)
-    expect(dummySet).toMatchObject({ param: 'Foo' })
-  })
+</script>`);
+    eval(sut.script);
+    expect(dummySet).toMatchObject({ param: "Foo" });
+  });
 
-  it('shoud be fine with using the `new Vue` structure', () => {
+  it("shoud be fine with using the `new Vue` structure", () => {
     const sut = compileCode(`
 let param = 'Bar';
 new Vue({
 	param
-});`)
-    eval(sut.script)
-    expect(dummySet).toMatchObject({ param: 'Bar' })
-  })
+});`);
+    eval(sut.script);
+    expect(dummySet).toMatchObject({ param: "Bar" });
+  });
 
-  it('shoud work with the vsg way', () => {
+  it("shoud work with the vsg way", () => {
     const sut = compileCode(`
 		let param = 'BazBaz';
 		<div>
 			<button> {{param}} </button>
 		</div>
-		`)
-    expect(sut.script.trim()).toBe("let param = 'BazBaz';")
-  })
-})
+		`);
+    expect(sut.script.trim()).toBe("var param = 'BazBaz';");
+  });
+});