feat: add typings

.github/workflows/pr.yml

@@ -1,8 +1,8 @@
-name: Lint & Test
+name: Build & Test
 on:
   pull_request:
-    types: [opened,synchronize]
-    branches: master 
+    types: [opened, synchronize]
+    branches: master
 
 concurrency:
   group: test-${{ github.ref }}
@@ -19,11 +19,14 @@ jobs:
       - name: Install
         run: npm ci
 
-      - name: List
-        run: npm run lint
+      - name: Check types
+        run: npm run types:check
 
       - name: Test unit
-        run: npm run test:unit -- --runInBand
-
+        run: npm run test:unit
+
+      - name: Build Demo
+        run: npm run build:demo
+
       - name: Test e2e
-        run: npm run test:e2e -- --headless
+        run: npm run test:e2e

.github/workflows/release.yml

@@ -1,7 +1,7 @@
 name: Release
 on:
   push:
-    branches: [master,next]
+    branches: [master, next]
 
 concurrency:
   group: release-${{ github.ref }}
@@ -40,16 +40,19 @@ jobs:
         if: ${{ github.ref == 'refs/heads/master' }}
         uses: dswistowski/surge-sh-action@v1
         with:
-          domain: 'vue-live.surge.sh'
-          project: './dist/'
+          domain: "vue-live.surge.sh"
+          project: "./dist/"
           login: ${{ secrets.SURGE_LOGIN }}
           token: ${{ secrets.SURGE_TOKEN }}
 
       - name: Build
-        run: npm run build
+        run: npm run lib:build
+
+      - name: Typings
+        run: npm run lib:types
 
       - name: Release
         run: npx semantic-release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -23,3 +23,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+cypress/videos
+*tsbuildinfo

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+lib
+dist
+demo/assets/PureTemplate.html

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -139,10 +139,7 @@ When the template compilation and the script evaluation succeed, the `@success`
 
 ```vue
 <template>
-  <VueLive
-    :code="code"
-    @success="error = undefined"
-  />
+  <VueLive :code="code" @success="error = undefined" />
 </template>
 ```
 

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    baseUrl: "http://localhost:4173",
+  },
+});

tests/e2e/specs/LiveRefresh.js → cypress/e2e/LiveRefresh.cy.ts

@@ -6,9 +6,7 @@ describe("Live Refresh", () => {
 
     cy.get(".preview-code:first").as("container");
 
-    cy.get("@container")
-      .children("div:last-child")
-      .as("preview");
+    cy.get("@container").children("div:last-child").as("preview");
   });
 
   it("changes the render after code change", () => {
@@ -21,8 +19,6 @@ describe("Live Refresh", () => {
       .find(".prism-editor-wrapper textarea")
       .type(`${"{backspace}".repeat(codeToDelete.length)}/>`);
 
-    cy.get("@preview")
-      .find(".v3dp__datepicker input")
-      .should("have.value", "");
+    cy.get("@preview").find(".v3dp__datepicker input").should("have.value", "");
   });
 });

tests/e2e/support/index.js → cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

dangerfile.js

@@ -17,11 +17,11 @@ Please remove \`package-lock.json\` changes from your pull request. Try to run \
 }
 
 // Check test exclusion (.only) is included
-var modifiedSpecFiles = danger.git.modified_files.filter(function(filePath) {
+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 testFilesIncludeExclusion = modifiedSpecFiles.reduce(function (acc, value) {
   var content = fs.readFileSync(value).toString();
   var invalid =
     content.indexOf("it.only") >= 0 || content.indexOf("describe.only") >= 0;
@@ -36,7 +36,7 @@ if (testFilesIncludeExclusion.length > 0) {
 }
 
 //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 messageConventionValid = danger.git.commits.reduce(function (acc, value) {
   var valid = validateMessage(value.message);
   return valid && acc;
 }, true);

demo/App.vue

@@ -14,13 +14,8 @@
 
     <div class="livebox">
       <div class="hint">You can edit this <span>-></span></div>
-      <VueLive
-        :editorProps="{ lineNumbers: true }"
-        :code="codeTemplate"
-        :layout="CustomLayout"
-        :components="registeredComponents"
-        @error="(e) => log('Error on first example', e)"
-      />
+      <VueLive :editorProps="{ lineNumbers: true }" :code="codeTemplate" :layout="CustomLayout"
+        :components="registeredComponents" @error="(e: any) => log('Error on first example', e)" />
     </div>
 
     <span v-if="!openExamples">+</span><span v-else>-</span>&nbsp;
@@ -40,22 +35,14 @@
         Use the <b>requires</b> prop to make libraries and packages available in
         the browser
       </p>
-      <VueLive
-        :code="codeChicago"
-        :layout="CustomLayout"
-        :requires="chicagoRequires"
-      />
+      <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires" />
       <h2>Custom delay</h2>
       <p>
         When updates should not happen too often, for instance when a component
         need a lot of computing power to render, one can change the standard
         throttle timing.
       </p>
-      <VueLive
-        :code="`<input type='button' value='update me' />`"
-        :layout="CustomLayout"
-        :delay="2000"
-      />
+      <VueLive :code="`<input type='button' value='update me' />`" :layout="CustomLayout" :delay="2000" />
 
       <h2>Default Layout</h2>
       <div style="width: 950px; max-width: 95vw; margin: 20px auto">
@@ -70,10 +57,7 @@
           all props passed in the
           <code>layoutProps</code>
         </p>
-        <VueLive
-          :code="`<input type='button' value='I am Groot' />`"
-          :layout="CustomLayout"
-        />
+        <VueLive :code="`<input type='button' value='I am Groot' />`" :layout="CustomLayout" />
       </div>
 
       <h2>JSX</h2>
@@ -82,46 +66,36 @@
       <h2>Separate components for Editor and Preview</h2>
       <div class="separate">
         <div class="preview-separate">
-          <VueLivePreview
-            :code="separateCode"
-            @error="(e) => (error = e)"
-            @success="error = undefined"
-          />
+          <VueLivePreview :code="separateCode" @error="(e: any) => (error = e)" @success="error = undefined" />
         </div>
         <hr style="width: 950px" />
         <p>Edit the code here</p>
-        <VueLiveEditor
-          :code="separateCode"
-          @change="updateCode"
-          :error="error"
-        />
+        <VueLiveEditor :code="separateCode" @change="updateCode" :error="error" />
         <div class="button-bar"><button>Save</button></div>
       </div>
     </div>
 
-    <github-corners
-      url="https://github.com/vue-styleguidist/vue-live"
-      gitColor="#FFFFFF"
-    />
+    <github-corners url="https://github.com/vue-styleguidist/vue-live" gitColor="#FFFFFF" />
   </main>
 </template>
-<script>
-import { markRaw } from "vue";
+<script lang="ts">
+import { defineComponent, markRaw } from "vue";
 import DatePicker from "vue3-datepicker";
 import { VueLive, VueLiveEditor, VueLivePreview } from "../src";
-import CustomLayout from "./CustomLayout";
-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 CustomLayout from "./CustomLayout.vue";
+import codeSfc from "./assets/Button.vue?raw";
+import codeJs from "./assets/input.js?raw";
+import realjsx from "./assets/real.jsx?raw";
+import codeTemplate from "./assets/PureTemplate.html?raw";
+import codeChicago from "./assets/Chicago.jsx?raw";
 import all from "./assets/chicagoNeighbourhoods";
 import "prismjs/themes/prism-tomorrow.css";
 import "vue3-datepicker/dist/vue3-datepicker.css";
 
-import GithubCorners from "vue-github-corners";
+// @ts-ignore
+import GithubCorners from "@uivjs/vue-github-corners";
 
-export default {
+export default defineComponent({
   name: "VueLiveDemo",
   components: { VueLive, VueLiveEditor, VueLivePreview, GithubCorners },
   data() {
@@ -140,14 +114,14 @@ export default {
     };
   },
   methods: {
-    updateCode(code) {
+    updateCode(code: string) {
       this.separateCode = code;
     },
-    log() {
-      console.log(...arguments);
+    log(...args: any[]) {
+      console.log(...args);
     },
   },
-};
+});
 </script>
 
 <style>
@@ -165,6 +139,7 @@ body {
   padding: 8px 12px;
   box-sizing: border-box;
 }
+
 .separate {
   display: flex;
   flex-direction: column;
@@ -208,10 +183,12 @@ body {
     top: -35px;
     left: 0;
   }
+
   .hint span {
     transform: rotate(80deg) translate(10px, 10px);
     display: inline-block;
   }
+
   .separate {
     width: 90vw;
   }

demo/CustomLayout.vue

@@ -57,4 +57,4 @@
     border-radius: 0 0 10px 10px;
   }
 }
-</style>
+</style>

demo/assets/Button.vue

@@ -5,13 +5,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   data() {
     return {
-      msg: "Push Me"
+      msg: "Push Me",
     };
-  }
+  },
 };
 </script>
 

demo/assets/PureTemplate.html

@@ -1,8 +1,5 @@
 let show = true
-let today = new Date();
+let today = new Date()
 
-<input type="checkbox" v-model="show">
-<date-picker 
-  style="text-align:center;" 
-  v-if="show" 
-  v-model="today"/>
+<input type="checkbox" v-model="show" />
+<date-picker style="text-align: center" v-if="show" v-model="today" />