promote vue-live 2 to latest

.eslintignore

@@ -0,0 +1 @@
+demo/assets

.eslintrc

@@ -6,13 +6,13 @@
   "extends": ["plugin:vue/essential", "eslint:recommended"],
   "rules": {},
   "parserOptions": {
-    "parser": "babel-eslint"
+    "parser": "@babel/eslint-parser"
   },
   "overrides": [
     {
       "files": ["**/__tests__/*.js"],
       "parserOptions": {
-        "parser": "babel-eslint",
+        "parser": "@babel/eslint-parser",
         "sourceType": "module"
       },
       "env": {

.github/workflows/pr.yml

@@ -0,0 +1,29 @@
+name: Lint & Test
+on:
+  pull_request:
+    types: [opened,synchronize]
+    branches: master 
+
+concurrency:
+  group: test-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install
+        run: npm ci
+
+      - name: List
+        run: npm run lint
+
+      - name: Test unit
+        run: npm run test:unit -- --runInBand
+
+      - name: Test e2e
+        run: npm run test:e2e -- --headless

.github/workflows/release.yml

@@ -0,0 +1,39 @@
+name: Release
+on:
+  push:
+    branches: master
+
+concurrency:
+  group: release-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install
+        run: npm ci
+
+      - name: Test
+        run: |
+          npm run lint
+          npm run test:unit -- --runInBand
+          npm run test:e2e -- --headless
+
+      - name: Deploy to vue-live.surge.sh
+        uses: dswistowski/surge-sh-action@v1
+        with:
+          domain: 'vue-live.surge.sh'
+          project: './dist/'
+          login: ${{ secrets.SURGE_LOGIN }}
+          token: ${{ secrets.SURGE_TOKEN }}
+
+      - name: Build
+        run: npm run build
+
+      - name: Release
+        run: npx semantic-release

.releaserc.js

@@ -1,8 +1,12 @@
 module.exports = {
+  branches: [
+    { name: "master" },
+    { name: "next", channel: "next", prerelease: "beta" }, // Only after the `next` is created in the repo
+  ],
   plugins: [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
     "@semantic-release/npm",
-    "@semantic-release/github"
-  ]
+    "@semantic-release/github",
+  ],
 };

README.md

@@ -18,24 +18,28 @@ The simplest way to render components is as a VueJs template:
 
 ```vue
 <template>
-    <VueLive :code="`<date-picker />`" :components="{ DatePicker }" @error="(e) => handleError(e)" />
+  <VueLive
+    :code="`<date-picker />`"
+    :components="{ DatePicker }"
+    @error="(e) => handleError(e)"
+  />
 </template>
 
 <script>
 import { VueLive } from "vue-live";
-// if you are using vue-cli, you have to import the css separately
+// import the css separately for easier SSR
 import "vue-live/lib/vue-live.esm.css";
-import DatePicker from "vuejs-datepicker"
+import DatePicker from "vuejs-datepicker";
 
 export default {
-    components: { VueLive },
-    data(){
-        return {
-            // make DatePicker available in template
-            DatePicker
-        }
-    }
-}
+  components: { VueLive },
+  data() {
+    return {
+      // make DatePicker available in template
+      DatePicker,
+    };
+  },
+};
 </script>
 ```
 
@@ -55,7 +59,7 @@ module.exports = {
     alias: {
       // this enables loading the "full" version of vue
       // instead of only loading the vue runtime
-      vue$: "vue/dist/vue.esm.js",
+      vue$: "vue/dist/vue.esm-browser.js",
     },
   },
 };
@@ -68,10 +72,10 @@ module.exports = {
   configureWebpack: {
     resolve: {
       alias: {
-        vue$: "vue/dist/vue.esm.js"
-      }
-    }
-  }
+        vue$: "vue/dist/vue.esm.js",
+      },
+    },
+  },
 };
 ```
 
@@ -82,7 +86,7 @@ export default {
   build: {
     extend(config, { isDev, isClient }) {
       // ..
-      config.resolve.alias.vue$ = "vue/dist/vue.esm.js";
+      config.resolve.alias.vue$ = "vue/dist/vue.esm-browser.js";
     },
   },
 };
@@ -95,7 +99,7 @@ module.exports = {
   configureWebpack: {
     resolve: {
       alias: {
-        vue$: "vue/dist/vue.esm.js",
+        vue$: "vue/dist/vue.esm-browser.js",
       },
     },
   },

babel.config.js

@@ -5,10 +5,7 @@ module.exports = {
       include: ["node_modules"],
       presets: [
         [
-          "@babel/env",
-          {
-            modules: "cjs"
-          }
+          "@babel/env"
         ]
       ]
     }

demo/App.vue

@@ -106,16 +106,18 @@
   </main>
 </template>
 <script>
+import { markRaw } from "vue";
+import DatePicker from "vue3-datepicker";
 import { VueLive, VueLiveEditor, VueLivePreview } from "../src";
 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";
 import "prismjs/themes/prism-tomorrow.css";
+import "vue3-datepicker/dist/vue3-datepicker.css";
 
 import GithubCorners from "vue-github-corners";
 
@@ -124,12 +126,12 @@ export default {
   components: { VueLive, VueLiveEditor, VueLivePreview, GithubCorners },
   data() {
     return {
-      registeredComponents: { DatePicker },
+      registeredComponents: { DatePicker: markRaw(DatePicker) },
       codeSfc,
       codeTemplate,
       codeJs,
       codeChicago,
-      CustomLayout,
+      CustomLayout: markRaw(CustomLayout),
       chicagoRequires: { "./chicagoNeighbourhoods": all },
       realjsx,
       separateCode: codeSfc,

demo/CustomLayout.vue

@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="preview-code">
     <div>
       <slot name="editor"></slot>

demo/assets/PureTemplate.html

@@ -5,4 +5,4 @@
 <date-picker 
   style="text-align:center;" 
   v-if="show" 
-  :value="today"/>
+  v-model="today"/>

demo/main.js

@@ -1,10 +1,5 @@
 import "./find.polyfill";
-import Vue from "vue";
+import { createApp } from "vue";
 import App from "./App.vue";
 
-Vue.config.productionTip = false;
-Vue.config.devtools = true;
-
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app");
+createApp(App).mount("#app");

jest.config.js

@@ -1,20 +1,3 @@
 module.exports = {
-  moduleFileExtensions: ["js", "jsx", "json", "vue"],
-  transform: {
-    "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
-      "jest-transform-stub",
-    "^.+\\.jsx?$": "babel-jest",
-  },
-  transformIgnorePatterns: ["/node_modules/"],
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1",
-  },
-  snapshotSerializers: ["jest-serializer-vue"],
-  testMatch: ["**/__tests__/*.(js|jsx|ts|tsx)"],
-  testURL: "http://localhost/",
-  watchPlugins: [
-    "jest-watch-typeahead/filename",
-    "jest-watch-typeahead/testname",
-  ],
-};
+  preset: '@vue/cli-plugin-unit-jest'
+}