├── .prettierrc.json
├── env.d.ts
├── demo
    ├── assets
    │   ├── PureTemplateDoubleRoot.html
    │   ├── PureTemplate.html
    │   ├── real.jsx
    │   ├── blob.tsx
    │   ├── input.js
    │   ├── Chicago.jsx
    │   ├── Button.vue
    │   ├── ButtonSetup.vue
    │   └── chicagoNeighbourhoods.ts
    ├── main.ts
    ├── CustomLayout.vue
    ├── find.polyfill.ts
    └── App.vue
├── .prettierignore
├── public
    ├── favicon.ico
    └── index.html
├── postcss.config.js
├── tsconfig.build.lib.json
├── vite.config.ts
├── tsconfig.vitest.json
├── cypress.config.ts
├── tsconfig.cy.json
├── cypress
    ├── e2e
    │   ├── CheckErrors.cy.ts
    │   └── LiveRefresh.cy.ts
    └── support
    │   ├── e2e.ts
    │   └── commands.ts
├── tsconfig.json
├── tsconfig.lib.json
├── tsconfig.config.json
├── .releaserc.js
├── index.html
├── tsconfig.app.json
├── .gitignore
├── src
    ├── VueLiveDefaultLayout.vue
    ├── utils
    │   ├── requireAtRuntime.ts
    │   ├── requireAtRuntime.spec.ts
    │   ├── evalInContext.ts
    │   ├── checkTemplate.ts
    │   └── checkTemplate.spec.ts
    ├── index.ts
    ├── Editor.vue
    ├── VueLive.vue
    └── Preview.vue
├── .github
    └── workflows
    │   ├── pr.yml
    │   └── release.yml
├── vite.config.lib.ts
├── dangerfile.js
├── package.json
└── README.md


/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/demo/assets/PureTemplateDoubleRoot.html:
--------------------------------------------------------------------------------
1 | <div>A</div>
2 | <div>B</div>
3 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Ignore artifacts:
2 | lib
3 | dist
4 | demo/assets/PureTemplate.html


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-styleguidist/vue-live/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/tsconfig.build.lib.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.lib.json",
3 |   "compilerOptions": {
4 |     "composite": false,
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/demo/main.ts:
--------------------------------------------------------------------------------
1 | import "./find.polyfill";
2 | import { createApp } from "vue";
3 | import App from "./App.vue";
4 | 
5 | createApp(App).mount("#app");
6 | 


--------------------------------------------------------------------------------
/demo/assets/PureTemplate.html:
--------------------------------------------------------------------------------
1 | let show = true
2 | let today = new Date()
3 | 
4 | <input type="checkbox" v-model="show" />
5 | <date-picker style="text-align: center" v-if="show" v-model="today" />
6 | 


--------------------------------------------------------------------------------
/demo/assets/real.jsx:
--------------------------------------------------------------------------------
 1 | const args = {
 2 |   type: "button",
 3 |   value: "update me",
 4 | };
 5 | 
 6 | export default {
 7 |   render() {
 8 |     return <input {...args} />;
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import vue from "@vitejs/plugin-vue";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [vue()],
7 | });
8 | 


--------------------------------------------------------------------------------
/tsconfig.vitest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.app.json",
 3 |   "exclude": [],
 4 |   "compilerOptions": {
 5 |     "composite": true,
 6 |     "lib": [],
 7 |     "types": ["node", "jsdom"]
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/demo/assets/blob.tsx:
--------------------------------------------------------------------------------
 1 | const args = {
 2 |   type: "button",
 3 |   value: "update me",
 4 | } as const;
 5 | 
 6 | type Key = keyof typeof args;
 7 | 
 8 | export default {
 9 |   render() {
10 |     return <input {...args} />;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/demo/assets/input.js:
--------------------------------------------------------------------------------
 1 | new Vue({
 2 |   template: `
 3 | <div>
 4 |   <input v-model="value" type="checkbox">
 5 |   <h1 v-if="value">I am checked</h1>
 6 | </div>`,
 7 |   data() {
 8 |     return {
 9 |       value: false,
10 |     };
11 |   },
12 | });
13 | 


--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "cypress";
 2 | 
 3 | export default defineConfig({
 4 |   projectId: 'wbesaj',
 5 |   e2e: {
 6 |     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
 7 |     baseUrl: "http://localhost:4173",
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/tsconfig.cy.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["cypress/**/*.ts"],
 4 |   "compilerOptions": {
 5 |     "ignoreDeprecations": "5.0",
 6 |     "composite": true,
 7 |     "isolatedModules": false,
 8 |     "types": ["cypress"]
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/cypress/e2e/CheckErrors.cy.ts:
--------------------------------------------------------------------------------
 1 | describe("Render Errors", () => {
 2 |   beforeEach(() => {
 3 |     cy.visit("/");
 4 |   });
 5 | 
 6 |   it("does not render an error", () => {
 7 |     cy.contains("More examples").click();
 8 |     cy.get("[class*='Preview_error']").should("not.exist");
 9 |   });
10 | });
11 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.config.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     },
10 |     {
11 |       "path": "./tsconfig.vitest.json"
12 |     },
13 |     {
14 |       "path": "./tsconfig.cy.json"
15 |     }
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["src/**/*", "src/**/*.vue"],
 4 |   "compilerOptions": {
 5 |     "rootDir": "src",
 6 |     "composite": true,
 7 |     "ignoreDeprecations": "5.0",
 8 |     "baseUrl": ".",
 9 |     "paths": {
10 |       "@/*": ["./src/*"]
11 |     },
12 |     "outDir": "lib"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.json",
 3 |   "include": [
 4 |     "vite.config.*",
 5 |     "vitest.config.*",
 6 |     "cypress.config.*",
 7 |     "package.json"
 8 |   ],
 9 |   "compilerOptions": {
10 |     "composite": true,
11 |     "ignoreDeprecations": "5.0",
12 |     "types": ["node"],
13 |     "resolveJsonModule": true
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/demo/assets/Chicago.jsx:
--------------------------------------------------------------------------------
 1 | import all from "./chicagoNeighbourhoods";
 2 | let i = 4;
 3 | const sel = [];
 4 | const getIndex = () => {
 5 |   const random = Math.random() * all.length
 6 |   return Math.floor(random)
 7 | }
 8 | 
 9 | while (i--) {
10 |   sel.push(all[getIndex()]);
11 | }
12 | 
13 | <h3>Here are {{ sel.length }} hoods</h3>
14 | <ul><li v-for="a in sel">{{ a }}</li></ul>
15 | 


--------------------------------------------------------------------------------
/.releaserc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   branches: [
 3 |     { name: "master" },
 4 |     { name: "next", channel: "next", prerelease: "beta" }, // Only after the `next` is created in the repo
 5 |   ],
 6 |   plugins: [
 7 |     "@semantic-release/commit-analyzer",
 8 |     "@semantic-release/release-notes-generator",
 9 |     "@semantic-release/npm",
10 |     "@semantic-release/github",
11 |   ],
12 | };
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vue Demo App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/demo/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/demo/assets/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>Colored Text</h1>
 4 |     <button>{{ msg }}</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | export default {
10 |   data() {
11 |     return {
12 |       msg: "Push Me",
13 |     };
14 |   },
15 | };
16 | </script>
17 | 
18 | <style>
19 | .hello {
20 |   text-align: center;
21 |   color: #900;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.lib.json",
 3 |   "include": [
 4 |     "env.d.ts",
 5 |     "src/**/*",
 6 |     "src/**/*.vue",
 7 |     "demo/**/*.vue",
 8 |     "demo/**/*.ts",
 9 |     "demo/**/*.tsx"
10 |   ],
11 |   "exclude": ["src/**/__tests__/*"],
12 |   "compilerOptions": {
13 |     "composite": true,
14 |     "rootDir": ".",
15 |     "noEmit": true,
16 | 		"jsx":"preserve"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /lib 
 5 | 
 6 | # tests artefact
 7 | /tests/e2e/videos
 8 | 
 9 | # local env files
10 | .env.local
11 | .env.*.local
12 | 
13 | # Log files
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | 
18 | # Editor directories and files
19 | .idea
20 | .vscode
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 | cypress/videos
27 | *tsbuildinfo
28 | 


--------------------------------------------------------------------------------
/src/VueLiveDefaultLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueLive-container">
 3 |     <div class="VueLive-editor">
 4 |       <slot name="editor" />
 5 |     </div>
 6 |     <div class="VueLivePreview">
 7 |       <slot name="preview" />
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <style>
13 | .VueLive-container {
14 |   display: flex;
15 | }
16 | .VueLive-editor {
17 |   width: 50%;
18 | }
19 | .VueLivePreview {
20 |   background-color: white;
21 |   width: 50%;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/utils/requireAtRuntime.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Return module from a given map (like {app: require('app')}) or throw.
 3 |  */
 4 | export default function requireAtRuntime(
 5 |   requires: Record<string, any>,
 6 |   filepath: string
 7 | ) {
 8 |   requires = requires || {};
 9 |   if (!(filepath in requires)) {
10 |     throw new Error(
11 |       "import or require() statements can be added only by setting it using the requires prop"
12 |     );
13 |   }
14 | 
15 |   return requires[filepath];
16 | }
17 | 


--------------------------------------------------------------------------------
/demo/assets/ButtonSetup.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref, h } from 'vue'
 3 | 
 4 | const MyButton = () => {
 5 | 	return h('button', 
 6 | 		{
 7 | 			style: { color: 'red' },
 8 | 			"data-cy": "my-button"
 9 | 		},
10 | 		'inline component'
11 | 	)
12 | }
13 | 
14 | const msg = ref("Push Me")
15 | </script>
16 | 
17 | <template>
18 |   <div class="hello">
19 |     <h1>Colored Text</h1>
20 |     <input v-model="msg">
21 | 		<div>
22 | 			{{ msg }}
23 | 		</div>
24 | 		<div>
25 | 			<MyButton/>
26 | 		</div>
27 |   </div>
28 | </template>


--------------------------------------------------------------------------------
/src/utils/requireAtRuntime.spec.ts:
--------------------------------------------------------------------------------
 1 | import { expect, test } from "vitest";
 2 | import requireAtRuntime from "./requireAtRuntime";
 3 | 
 4 | const map = {
 5 |   a: () => "a",
 6 | };
 7 | 
 8 | test("return a module from the map", () => {
 9 |   const result = requireAtRuntime(map, "a");
10 |   expect(result).toBeDefined();
11 |   expect(result()).toBe("a");
12 | });
13 | 
14 | test("throw if module is not in the map", () => {
15 |   const fn = () => requireAtRuntime(map, "pizza");
16 |   expect(fn).toThrowError("require() statements can be added");
17 | });
18 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title>vue-live</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but vue-live doesn't work properly without JavaScript
14 |         enabled. Please enable it to continue.</strong
15 |       >
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/utils/evalInContext.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * evaluate es5 code in the browser
 3 |  * and return value if there s a return statement
 4 |  * @param {String} code the body of the function to execute
 5 |  * @param {Function} require the fake function require
 6 |  */
 7 | export default function evalInContext(
 8 |   code: string,
 9 |   require: (path: string) => any,
10 |   adaptCreateElement: (h: any) => any,
11 |   concatenate: (...ags: any[]) => any,
12 |   h: (...ags: any[]) => any
13 | ): Record<string, any> {
14 |   // eslint-disable-next-line no-new-func
15 |   const func = new Function(
16 |     "require",
17 |     "__pragma__",
18 |     "__concatenate__",
19 |     "h",
20 |     code
21 |   );
22 | 
23 |   return func(require, adaptCreateElement, concatenate, h);
24 | }
25 | 


--------------------------------------------------------------------------------
/cypress/support/e2e.ts:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import "./commands";
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 


--------------------------------------------------------------------------------
/cypress/support/commands.ts:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 | 


--------------------------------------------------------------------------------
/cypress/e2e/LiveRefresh.cy.ts:
--------------------------------------------------------------------------------
 1 | // https://docs.cypress.io/api/introduction/api.html
 2 | 
 3 | describe("Live Refresh", () => {
 4 |   beforeEach(() => {
 5 |     cy.visit("/");
 6 | 
 7 |     cy.get(".preview-code:first").as("container");
 8 | 
 9 |     cy.get("@container").children("div:last-child").as("preview");
10 |   });
11 | 
12 |   it("changes the render after code change", () => {
13 |     const textToReplace = "inline component";
14 |     const textReplaced = "red component";
15 | 
16 |     cy.get("@preview")
17 |       .get("[data-cy=my-button]")
18 |       .should("have.text", textToReplace);
19 | 
20 |     cy.get("@container")
21 |       .find(".prism-editor-wrapper textarea").as("editor");
22 |     
23 | 		cy.get("@editor").invoke("val")
24 |       .then((val) => {
25 |         cy.get("@editor")
26 |           .clear()
27 |           .invoke('val', `${val}`.replace(textToReplace, textReplaced))
28 | 					.trigger('input');
29 | 
30 |         cy.get("@preview")
31 |           .get("[data-cy=my-button]")
32 |           .should("have.text", textReplaced);
33 |       });
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/.github/workflows/pr.yml:
--------------------------------------------------------------------------------
 1 | name: Build & Test
 2 | on:
 3 |   pull_request:
 4 |     types: [opened, synchronize]
 5 |     branches: master
 6 | 
 7 | concurrency:
 8 |   group: test-${{ github.ref }}
 9 |   cancel-in-progress: true
10 | 
11 | jobs:
12 |   test:
13 |     runs-on: ubuntu-latest
14 | 
15 |     steps:
16 |       - name: Checkout
17 |         uses: actions/checkout@v2
18 | 
19 |       - name: Install
20 |         run: npm ci
21 | 
22 |       - name: Check types
23 |         run: npm run types
24 | 
25 |       - name: Test unit
26 |         run: npm run test:unit
27 | 
28 |       - name: Build Demo
29 |         run: npm run build:demo
30 | 
31 |       - name: Run E2E Test
32 |         uses: cypress-io/github-action@v5
33 |         with:
34 |           start: npm run preview
35 |           record: true
36 |           browser: chrome
37 |         env:
38 |           # Recommended: pass the GitHub token lets this action correctly
39 |           # determine the unique run id necessary to re-run the checks
40 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
41 |           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
42 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import VueLive from "./VueLive.vue";
 2 | import VueLivePreview from "./Preview.vue";
 3 | import VueLiveEditor from "./Editor.vue";
 4 | 
 5 | // Export components individually
 6 | export { VueLive };
 7 | export { VueLivePreview };
 8 | export { VueLiveEditor };
 9 | 
10 | // What should happen if the user installs the library as a plugin
11 | // @ts-ignore
12 | export function install(Vue) {
13 |   // @ts-ignore
14 |   if (install.installed) return;
15 |   // @ts-ignore
16 |   install.installed = true;
17 |   Vue.component("VueLive", VueLive);
18 |   Vue.component("VueLivePreview", VueLivePreview);
19 |   Vue.component("VueLiveEditor", VueLiveEditor);
20 | }
21 | 
22 | // Create module definition for Vue.use(plugin)
23 | const plugin = {
24 |   install,
25 | };
26 | 
27 | // Auto-install when vue is found (eg. in browser via <script> tag)
28 | let GlobalVue = null;
29 | if (typeof window !== "undefined") {
30 |   // @ts-ignore
31 |   GlobalVue = window.Vue;
32 | } else if (typeof global !== "undefined") {
33 |   // @ts-ignore
34 |   GlobalVue = global.Vue;
35 | }
36 | if (GlobalVue) {
37 |   GlobalVue.use(plugin);
38 | }
39 | 
40 | // Export the library as a plugin
41 | export default plugin;
42 | 


--------------------------------------------------------------------------------
/demo/CustomLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="preview-code">
 3 |     <div>
 4 |       <slot name="editor"></slot>
 5 |     </div>
 6 |     <div>
 7 |       <slot name="preview"></slot>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <style>
12 | .preview-code {
13 |   display: flex;
14 |   width: 950px;
15 |   margin: 30px auto;
16 |   border-radius: 10px;
17 |   border: 1px solid #ccc;
18 |   box-shadow: 0 0 3px #ccc;
19 | }
20 | 
21 | .preview-code > div {
22 |   width: 100%;
23 | }
24 | 
25 | .preview-code > div:first-child {
26 |   border-radius: 10px 0 0 10px;
27 |   overflow: hidden;
28 | }
29 | 
30 | .preview-code > div:last-child {
31 |   padding: 30px;
32 |   background-color: #fff;
33 |   text-align: center;
34 |   border-radius: 0 10px 10px 0;
35 | }
36 | 
37 | @media only screen and (max-width: 1000px) {
38 |   .preview-code {
39 |     width: 90vw;
40 |   }
41 | }
42 | 
43 | @media only screen and (max-width: 568px) {
44 |   .preview-code {
45 |     display: block;
46 |   }
47 | 
48 |   .preview-code > div {
49 |     width: auto;
50 |   }
51 | 
52 |   .preview-code > div:first-child {
53 |     border-radius: 10px 10px 0 0;
54 |   }
55 | 
56 |   .preview-code > div:last-child {
57 |     border-radius: 0 0 10px 10px;
58 |   }
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/demo/find.polyfill.ts:
--------------------------------------------------------------------------------
 1 | export default {};
 2 | 
 3 | // https://tc39.github.io/ecma262/#sec-array.prototype.find
 4 | if (!Array.prototype.find) {
 5 |   Object.defineProperty(Array.prototype, "find", {
 6 |     value: function (
 7 |       predicate: (kValue: any, k: number, o: Record<number, any>) => boolean
 8 |     ) {
 9 |       // 1. Let O be ? ToObject(this value).
10 |       if (this == null) {
11 |         throw TypeError('"this" is null or not defined');
12 |       }
13 | 
14 |       var o = Object(this);
15 | 
16 |       // 2. Let len be ? ToLength(? Get(O, "length")).
17 |       var len = o.length >>> 0;
18 | 
19 |       // 3. If IsCallable(predicate) is false, throw a TypeError exception.
20 |       if (typeof predicate !== "function") {
21 |         throw TypeError("predicate must be a function");
22 |       }
23 | 
24 |       // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
25 |       var thisArg = arguments[1];
26 | 
27 |       // 5. Let k be 0.
28 |       var k = 0;
29 | 
30 |       // 6. Repeat, while k < len
31 |       while (k < len) {
32 |         // a. Let Pk be ! ToString(k).
33 |         // b. Let kValue be ? Get(O, Pk).
34 |         // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
35 |         // d. If testResult is true, return kValue.
36 |         var kValue = o[k];
37 |         if (predicate.call(thisArg, kValue, k, o)) {
38 |           return kValue;
39 |         }
40 |         // e. Increase k by 1.
41 |         k++;
42 |       }
43 | 
44 |       // 7. Return undefined.
45 |       return undefined;
46 |     },
47 |     configurable: true,
48 |     writable: true,
49 |   });
50 | }
51 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | on:
 3 |   push:
 4 |     branches: [master, next]
 5 | 
 6 | concurrency:
 7 |   group: release-${{ github.ref }}
 8 |   cancel-in-progress: true
 9 | 
10 | jobs:
11 |   test:
12 |     runs-on: ubuntu-latest
13 | 
14 |     steps:
15 |       - name: Checkout
16 |         uses: actions/checkout@v3
17 | 
18 |       - uses: actions/cache@v3
19 |         with:
20 |           path: ~/.npm
21 |           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
22 |           restore-keys: |
23 |             ${{ runner.os }}-node-
24 | 
25 |       - name: Install
26 |         run: npm ci
27 | 
28 |       - name: Run Unit Test
29 |         run: npm run test:unit
30 | 
31 |       - name: Build
32 |         if: ${{ github.ref == 'refs/heads/master' }}
33 |         run: npm run build:demo
34 | 
35 |       - name: Run E2E Test
36 |         uses: cypress-io/github-action@v5
37 |         with:
38 |           start: npm run preview
39 |           record: true
40 |           browser: chrome
41 |         env:
42 |           # Recommended: pass the GitHub token lets this action correctly
43 |           # determine the unique run id necessary to re-run the checks
44 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
45 |           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
46 | 
47 |       - name: Deploy to vue-live.surge.sh
48 |         if: ${{ github.ref == 'refs/heads/master' }}
49 |         uses: dswistowski/surge-sh-action@v1
50 |         with:
51 |           domain: "vue-live.surge.sh"
52 |           project: "./dist/"
53 |           login: ${{ secrets.SURGE_LOGIN }}
54 |           token: ${{ secrets.SURGE_TOKEN }}
55 | 
56 |       - name: Build
57 |         run: npm run build:lib
58 | 
59 |       - name: Typings
60 |         run: npm run types:lib
61 | 
62 |       - name: Release
63 |         run: npx semantic-release
64 |         env:
65 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
66 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
67 | 


--------------------------------------------------------------------------------
/vite.config.lib.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from "path";
 2 | import { defineConfig } from "vite";
 3 | import pkg from "./package.json";
 4 | import baseConfig from "./vite.config";
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default Object.assign(
 8 |   baseConfig,
 9 |   defineConfig({
10 |     build: {
11 |       outDir: "lib",
12 |       lib: {
13 |         // Could also be a dictionary or array of multiple entry points
14 |         entry: resolve(__dirname, "src/index.ts"),
15 |         name: "VueLive",
16 |         // the proper extensions will be added
17 |         fileName: "vue-live",
18 |       },
19 |       rollupOptions: {
20 |         // make sure to externalize deps that shouldn't be bundled
21 |         // into your library
22 |         external: [
23 |           ...Object.keys(pkg.dependencies),
24 |           // make sure jsx schema is loaded from external
25 |           "prismjs/components/prism-clike.js",
26 |           "prismjs/components/prism-markup.js",
27 |           "prismjs/components/prism-javascript.js",
28 |           "prismjs/components/prism-typescript.js",
29 |           "prismjs/components/prism-jsx.js",
30 |           "prismjs/components/prism-css.js",
31 |           "@vue/compiler-core/dist/compiler-core.cjs",
32 |           "@vue/compiler-dom/dist/compiler-dom.cjs",
33 |           "@vue/compiler-dom",
34 |           "vue",
35 |         ],
36 |         output: {
37 |           // Provide global variables to use in the UMD build
38 |           // for externalized deps
39 |           globals: {
40 |             vue: "Vue",
41 |             prismjs: "PrismJs",
42 |             acorn: "Acorn",
43 |             "hash-sum": "Hash",
44 |             "vue-inbrowser-compiler-sucrase": "VueInBrowserCompilerSucrase",
45 |             "vue-inbrowser-prismjs-highlighter": "VueInBrowserPrismjsHighlighter",
46 | 						"@vue/compiler-core": "VueCompilerCore",
47 | 						"@vue/compiler-dom": "VueCompilerDom",
48 | 						"acorn-walk": "AcornWalk",
49 | 						"vue-prism-editor": "VuePrismEditor",
50 | 						"debounce": "Debounce",
51 |           },
52 |           exports: "named",
53 |         },
54 |       },
55 |     },
56 |   })
57 | );
58 | 


--------------------------------------------------------------------------------
/dangerfile.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | const fs = require("fs");
 3 | const path = require("path");
 4 | const validateMessage = require("validate-commit-msg");
 5 | 
 6 | const packageChanged = danger.git.modified_files.includes("package.json");
 7 | const lockfileChanged = danger.git.modified_files.includes("package-lock.json");
 8 | 
 9 | if (packageChanged && !lockfileChanged) {
10 |   warn(`Changes were made to \`package.json\`, but not to \`package-lock.json\`.
11 | If you’ve changed any dependencies (added, removed or updated any packages), please run \`npm install\` and commit changes in package-lock.json file.`);
12 | }
13 | 
14 | if (!packageChanged && lockfileChanged) {
15 |   warn(`Changes were made to \`package-lock.json\`, but not to \`package.json\`.
16 | Please remove \`package-lock.json\` changes from your pull request. Try to run \`git checkout master -- package-lock.json\` and commit changes.`);
17 | }
18 | 
19 | // Check test exclusion (.only) is included
20 | var modifiedSpecFiles = danger.git.modified_files.filter(function (filePath) {
21 |   return filePath.match(/__tests__\/.+\.(js|jsx|ts|tsx)$/gi);
22 | });
23 | 
24 | var testFilesIncludeExclusion = modifiedSpecFiles.reduce(function (acc, value) {
25 |   var content = fs.readFileSync(value).toString();
26 |   var invalid =
27 |     content.indexOf("it.only") >= 0 || content.indexOf("describe.only") >= 0;
28 |   if (invalid) {
29 |     acc.push(path.basename(value));
30 |   }
31 |   return acc;
32 | }, []);
33 | 
34 | if (testFilesIncludeExclusion.length > 0) {
35 |   fail("an `only` was left in tests (" + testFilesIncludeExclusion + ")");
36 | }
37 | 
38 | //validate commit message in PR if it conforms conventional change log, notify if it doesn't.
39 | var messageConventionValid = danger.git.commits.reduce(function (acc, value) {
40 |   var valid = validateMessage(value.message);
41 |   return valid && acc;
42 | }, true);
43 | 
44 | let errorCount = 0;
45 | 
46 | if (!messageConventionValid) {
47 |   warn(
48 |     "commit message does not follows conventional change log (" +
49 |       ++errorCount +
50 |       ")"
51 |   );
52 |   markdown(
53 |     "> (" +
54 |       errorCount +
55 |       ") : vue-live uses conventional change log to generate changelog automatically. It seems some commit messages are not following those. Use `git commit --amend` or `git rebase -i` to fix them."
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-live",
 3 |   "version": "0.0.0-dev",
 4 |   "author": "Bart Ledoux <ledouxb@me.com>",
 5 |   "scripts": {
 6 |     "serve": "vite serve",
 7 |     "types": "vue-tsc --project ./tsconfig.app.json",
 8 |     "build:lib": "vite build --config ./vite.config.lib.ts",
 9 |     "types:lib": "vue-tsc --declaration --emitDeclarationOnly --project ./tsconfig.build.lib.json",
10 |     "build:demo": "vite build",
11 |     "start": "vite serve",
12 |     "preview": "vite preview --port 4173",
13 |     "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'",
14 |     "test:unit": "vitest run",
15 |     "cy": "cypress open --e2e"
16 |   },
17 |   "dependencies": {
18 |     "@vue/compiler-core": "^3.3.4",
19 |     "@vue/compiler-sfc": "^3.3.4",
20 |     "acorn": "^8.8.2",
21 |     "acorn-walk": "^8.2.0",
22 |     "core-js": "^3.30.2",
23 |     "debounce": "^1.2.1",
24 |     "hash-sum": "^2.0.0",
25 |     "prismjs": "^1.29.0",
26 |     "vue-inbrowser-compiler-sucrase": "^4.72.4",
27 |     "vue-inbrowser-prismjs-highlighter": "^4.69.1",
28 |     "vue-prism-editor": "^2.0.0-alpha.2"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/runtime": "^7.21.5",
32 |     "@types/debounce": "^1.2.1",
33 |     "@types/hash-sum": "^1.0.0",
34 |     "@types/jsdom": "^21.1.1",
35 |     "@types/node": "^20.2.1",
36 |     "@types/prismjs": "^1.26.0",
37 |     "@uivjs/vue-github-corners": "^1.0.1",
38 |     "@vitejs/plugin-vue": "^4.2.3",
39 |     "@vue/tsconfig": "^0.4.0",
40 |     "autoprefixer": "^10.4.14",
41 |     "cypress": "^13.3.0",
42 |     "prettier": "2.8.8",
43 |     "start-server-and-test": "^2.0.3",
44 |     "typescript": "^5.0.4",
45 |     "validate-commit-msg": "^1.1.3",
46 |     "vite": "^4.5.9",
47 |     "vitest": "^0.31.1",
48 |     "vue": "^3.3.4",
49 |     "vue-github-corners": "^1.2.3",
50 |     "vue-tsc": "1.6.5",
51 |     "vue3-datepicker": "^0.3.4"
52 |   },
53 |   "peerDependencies": {
54 |     "vue": ">= 3.0.8"
55 |   },
56 |   "browserslist": [
57 |     "> 1%",
58 |     "last 2 versions",
59 |     "ie 11"
60 |   ],
61 |   "bugs": {
62 |     "url": "https://github.com/vue-styleguidist/vue-live/issues"
63 |   },
64 |   "files": [
65 |     "lib"
66 |   ],
67 |   "license": "MIT",
68 |   "main": "lib/vue-live.umd.js",
69 |   "module": "lib/vue-live.mjs",
70 |   "types": "lib/index.d.ts",
71 |   "exports": {
72 |     ".": {
73 |       "import": "./lib/vue-live.mjs",
74 |       "require": "./lib/vue-live.umd.js",
75 |       "types": "./lib/index.d.ts"
76 |     },
77 |     "./style.css": "./lib/style.css"
78 |   },
79 |   "repository": {
80 |     "type": "git",
81 |     "url": "git+https://github.com/vue-styleguidist/vue-live.git"
82 |   }
83 | }


--------------------------------------------------------------------------------
/src/Editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <PrismEditor :class="{ 'VueLive-LineNumbers': editorProps.lineNumbers }" v-model="stableCode"
  3 |     @update:modelValue="updatePreview" :highlight="highlighter" v-bind="editorProps" :lineNumbers="false" />
  4 | </template>
  5 | 
  6 | <script lang="ts">
  7 | import { defineComponent, type PropType } from "vue";
  8 | import { PrismEditor } from "vue-prism-editor";
  9 | import makeHighlight, { CONFIGURED_LANGS, type CONFIGURED_LANGS_TYPE } from "vue-inbrowser-prismjs-highlighter";
 10 | import debounce from "debounce";
 11 | 
 12 | import "vue-prism-editor/dist/prismeditor.min.css";
 13 | 
 14 | 
 15 | const UPDATE_DELAY = 300;
 16 | 
 17 | export default defineComponent({
 18 |   name: "VueLiveEditor",
 19 |   inheritAttrs: false,
 20 |   components: { PrismEditor },
 21 |   props: {
 22 |     code: {
 23 |       type: String,
 24 |       required: true,
 25 |     },
 26 |     error: {
 27 |       type: [Error, Object] as PropType<(Error | Object) & { loc: any }>,
 28 |       default: undefined,
 29 |     },
 30 |     delay: {
 31 |       type: Number,
 32 |       default: UPDATE_DELAY,
 33 |     },
 34 |     editorProps: {
 35 |       type: Object,
 36 |       default: () => ({}),
 37 |     },
 38 |     prismLang: {
 39 |       type: String as PropType<CONFIGURED_LANGS_TYPE>,
 40 |       default: "html",
 41 |       validator: (val: CONFIGURED_LANGS_TYPE) => CONFIGURED_LANGS.includes(val),
 42 |     },
 43 |     jsx: {
 44 |       type: Boolean,
 45 |       default: false,
 46 |     },
 47 |     squiggles: {
 48 |       type: Boolean,
 49 |       default: true,
 50 |     },
 51 |   },
 52 |   data() {
 53 |     return {
 54 |       updatePreview: (() => { }) as (code: string) => void,
 55 |       /**
 56 |        * This data only gets changed when changing language.
 57 |        * it allows for copy and pasting without having the code
 58 |        * editor repainted every keystroke
 59 |        */
 60 |       stableCode: this.code,
 61 |       highlight: (() => (code: string) => code) as Awaited<ReturnType<typeof makeHighlight>>,
 62 |     };
 63 |   },
 64 |   async beforeMount() {
 65 |     /**
 66 |      * To load the prism jsx language with ESmodules we need to
 67 |      * load javascript first then load jsx
 68 |      * order is not guaranteed to work in ESmodules imports
 69 |      */
 70 |     this.highlight = await makeHighlight('VueLive-squiggles');
 71 |   },
 72 |   methods: {
 73 |     highlighter(code: string) {
 74 |       return this.highlight(this.prismLang, this.jsx)(
 75 |         code,
 76 |         this.squiggles && this.adaptedErrorLoc ? this.adaptedErrorLoc : undefined
 77 |       );
 78 |     },
 79 |   },
 80 |   computed: {
 81 |     adaptedErrorLoc() {
 82 |       // for now, we only support error in vsg format. 
 83 |       // TODO: figure out how SourceMaps work and use them to support vue-sfc format
 84 |       if (this.prismLang !== 'vsg') {
 85 |         return undefined
 86 |       }
 87 | 
 88 |       const scriptEnd = /\n[\t ]*</.exec(this.stableCode)
 89 |       const scriptCode = scriptEnd ? this.stableCode.slice(0, scriptEnd.index + 1) : ''
 90 |       const linesInScriptCode = (/^[\t ]*</.test(scriptCode) ? 0 : (scriptCode.match(/\n/g)?.length || 0)) + 1
 91 | 
 92 |       return this.error && this.error.loc ?
 93 |         this.error.loc.start ?
 94 |           {
 95 |             start: {
 96 |               ...this.error.loc.start,
 97 |               line: this.error.loc.start.line + linesInScriptCode,
 98 |             },
 99 |             end: {
100 |               ...this.error.loc.end,
101 |               line: this.error.loc.end.line + linesInScriptCode,
102 |             },
103 |           } : this.error.loc.line ? {
104 |             start: {
105 |               ...this.error.loc,
106 |               line: this.error.loc.line + linesInScriptCode,
107 |             },
108 |             end: {
109 |               ...this.error.loc,
110 |               line: this.error.loc.line + linesInScriptCode,
111 |             },
112 |           } : undefined : undefined
113 |     },
114 |   },
115 |   watch: {
116 |     code(value) {
117 |       this.updatePreview(value);
118 |     },
119 |   },
120 |   created() {
121 |     this.updatePreview = debounce((value: string) => {
122 |       this.stableCode = value;
123 |       this.$emit("change", value);
124 |     }, this.delay);
125 |   },
126 | });
127 | </script>
128 | 
129 | <style>
130 | .VueLive-squiggles-wrapper {
131 |   position: absolute;
132 |   width: 100%;
133 |   height: 100%;
134 | }
135 | 
136 | .VueLive-squiggles {
137 |   border-bottom: 2px dotted red;
138 | }
139 | 
140 | .VueLive-LineNumbers.prism-editor-wrapper pre.prism-editor__editor,
141 | .VueLive-LineNumbers.prism-editor-wrapper textarea.prism-editor__textarea {
142 |   padding-left: 2.5rem;
143 | }
144 | 
145 | 
146 | .VueLive-LineNumbers pre.prism-editor__editor {
147 |   counter-reset: step;
148 |   counter-increment: step 0;
149 | }
150 | 
151 | .VueLive-LineNumbers pre .line {
152 |   position: relative;
153 | }
154 | 
155 | .VueLive-LineNumbers pre .line::before {
156 |   content: counter(step);
157 |   counter-increment: step;
158 |   white-space: nowrap;
159 |   width: 2rem;
160 |   position: absolute;
161 |   left: -2.5rem;
162 |   display: inline-block;
163 |   text-align: right;
164 |   color: rgba(255, 255, 255, .4)
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/demo/assets/chicagoNeighbourhoods.ts:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   "Albany Park",
  3 |   "Altgeld Gardens",
  4 |   "Andersonville",
  5 |   "Archer Heights",
  6 |   "Armour Square",
  7 |   "Ashburn",
  8 |   "Ashburn Estates",
  9 |   "Auburn Gresham",
 10 |   "Avalon Park",
 11 |   "Avondale",
 12 |   "Avondale Gardens",
 13 |   "Back of the Yards",
 14 |   "Belmont Central",
 15 |   "Belmont Gardens",
 16 |   "Belmont Heights",
 17 |   "Belmont Terrace",
 18 |   "Beverly",
 19 |   "Beverly View",
 20 |   "Beverly Woods",
 21 |   "Big Oaks",
 22 |   "Boystown",
 23 |   "Bowmanville",
 24 |   "Brainerd",
 25 |   "Brickyard",
 26 |   "Bridgeport",
 27 |   "Brighton Park",
 28 |   "Bronzeville",
 29 |   "Bucktown",
 30 |   "Budlong Woods",
 31 |   "Buena Park",
 32 |   "Burnside",
 33 |   "Cabrini–Green",
 34 |   "Calumet Heights",
 35 |   "Canaryville",
 36 |   "Central Station",
 37 |   "Chatham",
 38 |   "Chicago Lawn",
 39 |   "Chinatown",
 40 |   "Chrysler Village",
 41 |   "Clarendon Park",
 42 |   "Clearing East",
 43 |   "Clearing West",
 44 |   "Cottage Grove Heights",
 45 |   "Cragin",
 46 |   "Crestline",
 47 |   "Dearborn Homes",
 48 |   "Dearborn Park",
 49 |   "Douglas Park",
 50 |   "Dunning",
 51 |   "East Beverly",
 52 |   "East Chatham",
 53 |   "East Garfield Park",
 54 |   "East Hyde Park",
 55 |   "East Pilsen",
 56 |   "East Side",
 57 |   "East Village",
 58 |   "Eden Green",
 59 |   "Edgebrook",
 60 |   "Edgewater",
 61 |   "Edgewater Beach",
 62 |   "Edgewater Glen",
 63 |   "Edison Park",
 64 |   "Englewood",
 65 |   "Fernwood",
 66 |   "Fifth City",
 67 |   "Ford City",
 68 |   "Forest Glen",
 69 |   "Fuller Park",
 70 |   "Fulton River District",
 71 |   "Gage Park",
 72 |   "Galewood",
 73 |   "The Gap",
 74 |   "Garfield Ridge",
 75 |   "Gladstone Park",
 76 |   "Gold Coast",
 77 |   "Golden Gate",
 78 |   "Goose Island",
 79 |   "Graceland West",
 80 |   "Grand Boulevard",
 81 |   "Grand Crossing",
 82 |   "Greater Grand Crossing",
 83 |   "Greektown",
 84 |   "Gresham",
 85 |   "Groveland Park",
 86 |   "Hamilton Park",
 87 |   "Hanson Park",
 88 |   "Heart of Chicago",
 89 |   "Hegewisch",
 90 |   "Hermosa",
 91 |   "Hollywood Park",
 92 |   "Homan Square",
 93 |   "Humboldt Park",
 94 |   "Hyde Park",
 95 |   "Illinois Medical District",
 96 |   "Irving Park",
 97 |   "Irving Woods",
 98 |   "The Island",
 99 |   "Jackowo",
100 |   "Jackson Park Highlands",
101 |   "Jefferson Park",
102 |   "K-Town",
103 |   "Kelvyn Park",
104 |   "Kennedy Park",
105 |   "Kensington",
106 |   "Kenwood",
107 |   "Kilbourn Park",
108 |   "Kosciuszko Park",
109 |   "Lake Meadows",
110 |   "Lake View",
111 |   "Lake View East",
112 |   "Lakewood / Balmoral",
113 |   "LeClaire Courts",
114 |   "Legends South (Robert Taylor Homes)",
115 |   "Lilydale",
116 |   "Lincoln Park",
117 |   "Lincoln Square",
118 |   "Lithuanian Plaza",
119 |   "Little Italy",
120 |   "Little Village",
121 |   "Logan Square",
122 |   "Longwood Manor",
123 |   "The Loop",
124 |   "Lower West Side",
125 |   "Loyola",
126 |   "Magnificent Mile",
127 |   "Margate Park",
128 |   "Marquette Park",
129 |   "Marshall Square",
130 |   "Marynook",
131 |   "Mayfair",
132 |   "McKinley Park",
133 |   "Merchant Park",
134 |   "Montclare",
135 |   "Morgan Park",
136 |   "Mount Greenwood",
137 |   "Museum Campus",
138 |   "New Eastside",
139 |   "Near North Side",
140 |   "Near West Side",
141 |   "New Chinatown",
142 |   "New City",
143 |   "Noble Square",
144 |   "North Austin",
145 |   "North Center",
146 |   "North Halsted",
147 |   "North Kenwood",
148 |   "North Lawndale",
149 |   "North Mayfair",
150 |   "North Park",
151 |   "Nortown",
152 |   "Norwood Park East",
153 |   "Norwood Park West",
154 |   "Oakland",
155 |   "O'Hare",
156 |   "Old Edgebrook",
157 |   "Old Irving Park",
158 |   "Old Norwood",
159 |   "Old Town",
160 |   "Old Town Triangle",
161 |   "Oriole Park",
162 |   "Palmer Square",
163 |   "Park Manor",
164 |   "Park West",
165 |   "Parkview",
166 |   "Peterson Park",
167 |   "Pill Hill",
168 |   "Pilsen",
169 |   "Polish Downtown",
170 |   "Polish Village",
171 |   "Portage Park",
172 |   "Prairie Avenue Historic District",
173 |   "Prairie Shores",
174 |   "Princeton Park",
175 |   "Printer's Row",
176 |   "Pulaski Park",
177 |   "Pullman",
178 |   "Ranch Triangle",
179 |   "Ravenswood",
180 |   "Ravenswood Gardens",
181 |   "Ravenswood Manor",
182 |   "River North",
183 |   "River West",
184 |   "River's Edge",
185 |   "Riverdale",
186 |   "Rogers Park",
187 |   "Roscoe Village",
188 |   "Rosehill",
189 |   "Roseland",
190 |   "Rosemoor",
191 |   "Saint Ben's",
192 |   "Sauganash",
193 |   "Schorsch Forest View",
194 |   "Schorsch Village",
195 |   "Scottsdale",
196 |   "Sheffield Neighbors",
197 |   "Sheridan Park",
198 |   "Sheridan Station Corridor",
199 |   "Sleepy Hollow",
200 |   "Smith Park",
201 |   "South Austin",
202 |   "South Chicago",
203 |   "South Commons",
204 |   "South Deering",
205 |   "South East Ravenswood",
206 |   "South Edgebrook",
207 |   "South Lawndale",
208 |   "South Loop",
209 |   "South Shore",
210 |   "Stateway Gardens",
211 |   "Stony Island Park",
212 |   "Streeterville",
213 |   "Talley's Corner",
214 |   "Tri-Taylor",
215 |   "Ukrainian Village",
216 |   "Union Ridge",
217 |   "University Village",
218 |   "Uptown",
219 |   "The Villa",
220 |   "Vittum Park",
221 |   "Wacławowo",
222 |   "Washington Heights",
223 |   "Washington Park",
224 |   "Wentworth Gardens",
225 |   "West Beverly",
226 |   "West Chatham",
227 |   "West Chesterfield",
228 |   "West DePaul",
229 |   "West Elsdon",
230 |   "West Englewood",
231 |   "West Garfield Park",
232 |   "West Humboldt Park",
233 |   "West Lakeview",
234 |   "West Lawn",
235 |   "West Loop",
236 |   "West Morgan Park",
237 |   "West Pullman",
238 |   "West Ridge",
239 |   "West Rogers Park",
240 |   "West Town",
241 |   "West Woodlawn",
242 |   "Wicker Park",
243 |   "Wildwood",
244 |   "Woodlawn",
245 |   "Wrightwood",
246 |   "Wrightwood Neighbors",
247 |   "Wrigleyville",
248 | ];
249 | 


--------------------------------------------------------------------------------
/src/VueLive.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <component
  3 |     :is="layout ? layout : VueLiveDefaultLayout"
  4 |     v-bind="layoutProps"
  5 |     :code="stableCode"
  6 |     :language="lang"
  7 |     :prism-lang="prismLang"
  8 |     :requires="requires"
  9 |     :data-scope="dataScope"
 10 |     :components="components"
 11 |   >
 12 |     <template v-slot:editor>
 13 |       <Editor
 14 |         :code="stableCode"
 15 |         :delay="delay"
 16 |         :prism-lang="prismLang"
 17 |         :editor-props="editorProps"
 18 |         :error="error"
 19 |         :jsx="jsx"
 20 |         :squiggles="squiggles"
 21 |         @change="updatePreview"
 22 |       />
 23 |     </template>
 24 |     <template v-slot:preview>
 25 |       <!--
 26 |         * Emitted every time the component rendered throws an error
 27 |         * Catches runtime and compilation errors
 28 |         * @event error
 29 |         * @property { Error } - the error thrown
 30 |       -->
 31 |       <Preview
 32 |         :key="codeKey"
 33 |         :code="model"
 34 |         @detect-language="switchLanguage"
 35 |         @error="handleError"
 36 |         @success="handleSuccess"
 37 |         :components="components"
 38 |         :directives="directives"
 39 |         :requires="requires"
 40 |         :jsx="jsx"
 41 |         :data-scope="dataScope"
 42 |         :check-variable-availability="checkVariableAvailability"
 43 |       />
 44 |     </template>
 45 |   </component>
 46 | </template>
 47 | <script lang="ts">
 48 | import { defineComponent, markRaw } from "vue";
 49 | import hash from "hash-sum";
 50 | 
 51 | import Preview from "./Preview.vue";
 52 | import Editor from "./Editor.vue";
 53 | import VueLiveDefaultLayout from "./VueLiveDefaultLayout.vue";
 54 | import type { CONFIGURED_LANGS_TYPE } from "vue-inbrowser-prismjs-highlighter";
 55 | 
 56 | const LANG_TO_PRISM = {
 57 |   vue: "html",
 58 |   vsg: "vsg",
 59 | } as const;
 60 | 
 61 | const UPDATE_DELAY = 300;
 62 | 
 63 | export default defineComponent({
 64 |   name: "VueLive",
 65 |   components: { Preview, Editor },
 66 |   props: {
 67 |     /**
 68 |      * code rendered in the preview and the editor
 69 |      */
 70 |     code: {
 71 |       type: String,
 72 |       required: true,
 73 |     },
 74 |     /**
 75 |      * Layout vue component with 2 slots named `editor` & `preview`
 76 |      */
 77 |     layout: {
 78 |       type: Object,
 79 |       default: undefined,
 80 |     },
 81 |     /**
 82 |      * Hashtable of auto-registered components
 83 |      * @example { DatePicker: VueDatePicker }
 84 |      * @example { VueDatePicker }
 85 |      */
 86 |     components: {
 87 |       type: Object,
 88 |       default: () => {},
 89 |     },
 90 |     /**
 91 |      * Hashtable of auto-registered directives
 92 |      * @example { Tooltip: VueTooltip }
 93 |      * @example { VueTooltip }
 94 |      */
 95 |     directives: {
 96 |       type: Object,
 97 |       default: () => {},
 98 |     },
 99 |     /**
100 |      * Hashtable of modules available in require and import statements
101 |      * in the Preview component
102 |      * @example { lodash: require("lodash") }
103 |      * @example { "foo/bar.js": import("foo/bar.js") }
104 |      */
105 |     requires: {
106 |       type: Object,
107 |       default: () => {},
108 |     },
109 |     /**
110 |      * Time in ms debouncing updates to the preview
111 |      */
112 |     delay: {
113 |       type: Number,
114 |       default: UPDATE_DELAY,
115 |     },
116 |     /**
117 |      * Do the code contain JSX rendered functions
118 |      */
119 |     jsx: {
120 |       type: Boolean,
121 |       default: false,
122 |     },
123 |     /**
124 |      * These props will be passed as a spreat to your layout
125 |      * They can be used to change the style
126 |      */
127 |     layoutProps: {
128 |       type: Object,
129 |       default: undefined,
130 |     },
131 |     /**
132 |      * Props of vue-prism-editor
133 |      * @example { lineNumbers: true }
134 |      * @see https://github.com/koca/vue-prism-editor
135 |      */
136 |     editorProps: {
137 |       type: Object,
138 |       default: () => ({}),
139 |     },
140 |     /**
141 |      * Outside data to the preview
142 |      * @example { count: 1 }
143 |      */
144 |     dataScope: {
145 |       type: Object,
146 |       default: () => {},
147 |     },
148 |     /**
149 |      * Set if checking variables for availability
150 |      * when used in template
151 |      * NOTE: if this is not checked, undefined vars will yield a blank output
152 |      */
153 |     checkVariableAvailability: {
154 |       type: Boolean,
155 |       default: true,
156 |     },
157 |     /**
158 |      * Show the red markings
159 |      * where the compiler found errors
160 |      */
161 |     squiggles: {
162 |       type: Boolean,
163 |       default: true,
164 |     },
165 |   },
166 |   data() {
167 |     return {
168 |       model: this.code,
169 |       lang: "vue",
170 |       prismLang: "html" as CONFIGURED_LANGS_TYPE,
171 |       VueLiveDefaultLayout: markRaw(VueLiveDefaultLayout) as any,
172 |       /**
173 |        * this data only gets changed when changing language.
174 |        * it allows for copy and pasting without having the code
175 |        * editor repainted every keystroke
176 |        */
177 |       stableCode: this.code,
178 |       error: undefined,
179 |     };
180 |   },
181 |   computed: {
182 |     codeKey() {
183 |       return hash(this.model);
184 |     },
185 |   },
186 |   watch: {
187 |     code(newCode) {
188 |       this.stableCode = newCode;
189 |       this.model = newCode;
190 |     },
191 |   },
192 |   methods: {
193 |     updatePreview(code: string) {
194 |       this.stableCode = code;
195 |       this.model = code;
196 |       this.$emit("change", code);
197 |     },
198 |     switchLanguage(newLang: "vue" | "vsg") {
199 |       this.lang = newLang;
200 |       const newPrismLang = LANG_TO_PRISM[newLang];
201 |       if (this.prismLang !== newPrismLang) {
202 |         this.prismLang = newPrismLang;
203 |         this.stableCode = this.model;
204 |       }
205 |     },
206 |     handleSuccess() {
207 |       this.error = undefined;
208 |       this.$emit("success");
209 |     },
210 |     handleError(e: any) {
211 |       this.error = e;
212 |       this.$emit("error", e);
213 |     },
214 |   },
215 | });
216 | </script>
217 | 


--------------------------------------------------------------------------------
/demo/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main style="text-align: center">
  3 |     <h1>Vue Live renders vue code in the browser</h1>
  4 |     <p class="description">
  5 |       <em>vue-live</em> is a VueJs component. It renders the code passed in prop
  6 |       using the VueJs compiler - yes exactly like the vuejs compiler. But wait!
  7 |       it has a <b>super-power</b>! It keeps the rendered code reactive in the
  8 |       browser.
  9 |     </p>
 10 |     <p class="description">
 11 |       If you edit the code in the editor on the left, the preview on the right
 12 |       will update automatically.
 13 |     </p>
 14 | 
 15 |     <div class="livebox">
 16 |       <div class="hint">You can edit this <span>-></span></div>
 17 |       <VueLive :editorProps="{ lineNumbers: true }" :code="codeSfcSetup" :layout="CustomLayout"
 18 |         :components="registeredComponents" @error="(e: any) => log('Error on first example', e)" />
 19 |     </div>
 20 | 
 21 |     <span v-if="!openExamples">+</span><span v-else>-</span>&nbsp;
 22 |     <a href="#" @click="openExamples = !openExamples">More examples</a>
 23 |     <div v-if="openExamples">
 24 |       <h2>Vue SFC</h2>
 25 |       <p>
 26 |         If this format is not fitting for you, vue-live renders VueJs single
 27 |         file components as well
 28 |       </p>
 29 |       <VueLive :code="codeSfc" :layout="CustomLayout" />
 30 | 			<h2>VSG partial mode or pure template</h2>
 31 |       <VueLive :code="codeTemplate" :layout="CustomLayout" />
 32 |       <h2>Pure JavaScript code</h2>
 33 |       <p>Or if you prefer to, use the <b>new Vue()</b> format</p>
 34 |       <VueLive :code="codeJs" :layout="CustomLayout" />
 35 |       <h2>Extra dependencies</h2>
 36 |       <p>
 37 |         Use the <b>requires</b> prop to make libraries and packages available in
 38 |         the browser
 39 |       </p>
 40 |       <VueLive :code="codeChicago" :layout="CustomLayout" :requires="chicagoRequires" />
 41 |       <h2>Custom delay</h2>
 42 |       <p>
 43 |         When updates should not happen too often, for instance when a component
 44 |         need a lot of computing power to render, one can change the standard
 45 |         throttle timing.
 46 |       </p>
 47 |       <VueLive :code="`<input type='button' value='update me' />`" :layout="CustomLayout" :delay="2000" />
 48 | 
 49 |       <h2>Default Layout</h2>
 50 |       <div style="width: 950px; max-width: 95vw; margin: 20px auto">
 51 |         <VueLive :code="`<input type='button' value='I am Groot' />`" />
 52 |       </div>
 53 |       <h2>Custom Layout</h2>
 54 |       <div>
 55 |         <p>Attributes available for custom layout:</p>
 56 |         <p>
 57 |           <code>code: String</code>, <code>language: String</code>,
 58 |           <code>components: Object</code>, <code>requires: Object</code>, ...
 59 |           all props passed in the
 60 |           <code>layoutProps</code>
 61 |         </p>
 62 |         <VueLive :code="`<input type='button' value='I am Groot' />`" :layout="CustomLayout" />
 63 |       </div>
 64 | 
 65 |       <h2>JSX</h2>
 66 |       <VueLive :code="realjsx" :layout="CustomLayout" :jsx="true" />
 67 | 
 68 | 			<h2>TSX</h2>
 69 |       <VueLive :code="blobtsx" :layout="CustomLayout" lang="tsx" :jsx="true" />
 70 | 
 71 |       <h2>Double Root</h2>
 72 |       <VueLive :code="doubleRoot" :layout="CustomLayout" />
 73 | 
 74 |       <h2>Separate components for Editor and Preview</h2>
 75 |       <div class="separate">
 76 |         <div class="preview-separate">
 77 |           <VueLivePreview :code="separateCode" @error="(e: any) => (error = e)" @success="error = undefined" />
 78 |         </div>
 79 |         <hr style="width: 950px" />
 80 |         <p>Edit the code here</p>
 81 |         <VueLiveEditor :code="separateCode" @change="updateCode" :error="error" />
 82 |         <div class="button-bar"><button>Save</button></div>
 83 |       </div>
 84 |     </div>
 85 | 
 86 |     <github-corners href="https://github.com/vue-styleguidist/vue-live" gitColor="#FFFFFF" />
 87 |   </main>
 88 | </template>
 89 | <script lang="ts">
 90 | import { defineComponent, markRaw } from "vue";
 91 | import DatePicker from "vue3-datepicker";
 92 | import { VueLive, VueLiveEditor, VueLivePreview } from "../src";
 93 | import CustomLayout from "./CustomLayout.vue";
 94 | import codeSfc from "./assets/Button.vue?raw";
 95 | import codeSfcSetup from "./assets/ButtonSetup.vue?raw";
 96 | import codeJs from "./assets/input.js?raw";
 97 | import realjsx from "./assets/real.jsx?raw";
 98 | import blobtsx from "./assets/blob.tsx?raw";
 99 | import codeTemplate from "./assets/PureTemplate.html?raw";
100 | import doubleRoot from "./assets/PureTemplateDoubleRoot.html?raw";
101 | import codeChicago from "./assets/Chicago.jsx?raw";
102 | import all from "./assets/chicagoNeighbourhoods";
103 | import "prismjs/themes/prism-tomorrow.css";
104 | import "vue3-datepicker/dist/vue3-datepicker.css";
105 | 
106 | // @ts-ignore
107 | import GithubCorners from "@uivjs/vue-github-corners";
108 | 
109 | export default defineComponent({
110 |   name: "VueLiveDemo",
111 |   components: { VueLive, VueLiveEditor, VueLivePreview, GithubCorners },
112 |   data() {
113 |     return {
114 |       registeredComponents: { DatePicker: markRaw(DatePicker) },
115 |       codeSfc,
116 | 			codeSfcSetup,
117 |       codeTemplate,
118 |       codeJs,
119 |       codeChicago,
120 |       CustomLayout: markRaw(CustomLayout),
121 |       chicagoRequires: { "./chicagoNeighbourhoods": all },
122 |       realjsx,
123 | 			blobtsx,
124 |       separateCode: codeSfc,
125 |       doubleRoot,
126 |       openExamples: false,
127 |       error: undefined,
128 |     };
129 |   },
130 |   methods: {
131 |     updateCode(code: string) {
132 |       this.separateCode = code;
133 |     },
134 |     log(...args: any[]) {
135 |       console.log(...args);
136 |     },
137 |   },
138 | });
139 | </script>
140 | 
141 | <style>
142 | @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");
143 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
144 | 
145 | body {
146 |   font-family: "Roboto Mono", monospace;
147 |   background-color: #ded;
148 | }
149 | 
150 | .prism-editor-wrapper {
151 |   background-color: #222;
152 |   color: #eee;
153 |   padding: 8px 12px;
154 |   box-sizing: border-box;
155 | }
156 | 
157 | .separate {
158 |   display: flex;
159 |   flex-direction: column;
160 |   width: 950px;
161 |   margin: 30px auto;
162 | }
163 | 
164 | .preview-separate {
165 |   padding: 30px;
166 |   background-color: #fff;
167 |   text-align: center;
168 |   border-radius: 10px 10px 0 0;
169 | }
170 | 
171 | .description {
172 |   max-width: 600px;
173 |   margin: 30px auto;
174 |   text-align: left;
175 | }
176 | 
177 | .livebox {
178 |   position: relative;
179 |   max-width: 950px;
180 |   margin: auto;
181 | }
182 | 
183 | .hint {
184 |   position: absolute;
185 |   top: 100px;
186 |   left: -200px;
187 |   font-family: "Nanum Pen Script";
188 |   font-size: 2em;
189 |   color: red;
190 |   transform: rotate(-30deg);
191 |   transition: transform 0.2s;
192 | }
193 | 
194 | @media (max-width: 1400px) {
195 |   .hint {
196 |     transform: none;
197 |     top: -35px;
198 |     left: 0;
199 |   }
200 | 
201 |   .hint span {
202 |     transform: rotate(80deg) translate(10px, 10px);
203 |     display: inline-block;
204 |   }
205 | 
206 |   .separate {
207 |     width: 90vw;
208 |   }
209 | }
210 | 
211 | .button-bar {
212 |   height: 70px;
213 |   padding: 5px 0;
214 |   text-align: left;
215 | }
216 | 
217 | .button-bar button {
218 |   font-size: 1.5em;
219 |   padding: 6px;
220 |   border-radius: 8px;
221 |   width: 200px;
222 | }
223 | </style>
224 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-live
  2 | 
  3 | A lightweight playground for live editing VueJs code in the browser
  4 | 
  5 | [![Build Status](https://travis-ci.com/vue-styleguidist/vue-live.svg?branch=master)](https://app.travis-ci.com/github/vue-styleguidist/vue-live)
  6 | [![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)
  7 | [![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)
  8 | 
  9 | ---
 10 | 
 11 | ## Usage
 12 | 
 13 | Install the dependency
 14 | 
 15 | ```
 16 | npm install --save vue-live
 17 | ```
 18 | 
 19 | The simplest way to render components is as a VueJs template:
 20 | 
 21 | ```vue
 22 | <template>
 23 |   <VueLive
 24 |     :code="`<date-picker />`"
 25 |     :components="{ DatePicker }"
 26 |     @error="(e) => handleError(e)"
 27 |   />
 28 | </template>
 29 | 
 30 | <script>
 31 | import { VueLive } from "vue-live";
 32 | // import the css separately for easier SSR
 33 | import "vue-live/lib/vue-live.esm.css";
 34 | import DatePicker from "vuejs-datepicker";
 35 | 
 36 | export default {
 37 |   components: { VueLive },
 38 |   data() {
 39 |     return {
 40 |       // make DatePicker available in template
 41 |       DatePicker,
 42 |     };
 43 |   },
 44 | };
 45 | </script>
 46 | ```
 47 | 
 48 | Check out the [demo](http://vue-live.surge.sh) for alternative syntaxes to write your showcases.
 49 | 
 50 | ### Install for Vue 2.X
 51 | 
 52 | The default version at `@latest` is for vue 3 and up.
 53 | 
 54 | To install the version for vue 2, use the following:
 55 | 
 56 | ```
 57 | npm install --save vue-live@1
 58 | ```
 59 | 
 60 | ## Events
 61 | 
 62 | ### `@error`
 63 | 
 64 | 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.
 65 | 
 66 | ```vue
 67 | <template>
 68 |   <VueLive
 69 |     code="<h1>make this example {{ fail }}</h1>"
 70 |     @error="(e) => log('Error on first example', e)"
 71 |   />
 72 | </template>
 73 | ```
 74 | 
 75 | ### `@success`
 76 | 
 77 | When the template compilation and the script evaluation succeed, the `@success` event is emitted. If you provided extra info to your user about previous errors, you can use this event to clear the error message.
 78 | 
 79 | ```vue
 80 | <template>
 81 |   <VueLive :code="code" @success="error = undefined" />
 82 | </template>
 83 | ```
 84 | 
 85 | ## Props
 86 | 
 87 | ### `code`
 88 | 
 89 | **Type** String
 90 | 
 91 | Specifies the initial code to be evaluated
 92 | 
 93 | ```vue
 94 | <template>
 95 |   <VueLive code="<button>test</button>" />
 96 | </template>
 97 | ```
 98 | 
 99 | ### `layout`
100 | 
101 | **Type** vue component
102 | 
103 | Layout to be used for displaying the
104 | 
105 | Example
106 | 
107 | ```vue
108 | <template>
109 |   <VueLive :layout="layout" />
110 | </template>
111 | <script>
112 | import layout from "./Layout.vue";
113 | 
114 | export default {
115 |   data() {
116 |     return { layout };
117 |   },
118 | };
119 | </script>
120 | ```
121 | 
122 | `layout.vue`
123 | 
124 | ```vue
125 | <template>
126 |   <div class="my-vuelive">
127 |     <div class="my-vuelive-editor">
128 |       <slot name="editor"></slot>
129 |     </div>
130 |     <div class="my-vuelive-preview">
131 |       <slot name="preview"></slot>
132 |     </div>
133 |   </div>
134 | </template>
135 | <style>
136 | .my-vuelive {
137 |   border: 1px solid #ccc;
138 |   border-radius: 10px;
139 | }
140 | 
141 | .my-vuelive-editor {
142 |   margin: 8px;
143 | }
144 | 
145 | .my-vuelive-preview {
146 |   margin: 8px;
147 | }
148 | </style>
149 | ```
150 | 
151 | ### `components`
152 | 
153 | **Type** Object:
154 | 
155 | - key: registration name
156 | - value: VueJs component object
157 | 
158 | Register some components to be used in the vue-live instance.
159 | 
160 | Example
161 | 
162 | ```vue
163 | <template>
164 |   <VueLive :components="registeredComponents" code="<DatePicker />" />
165 | </template>
166 | <script>
167 | import DatePicker from "./DatePicker.vue";
168 | 
169 | export default {
170 |   data() {
171 |     return {
172 |       registeredComponents: {
173 |         DatePicker,
174 |       },
175 |     };
176 |   },
177 | };
178 | </script>
179 | ```
180 | 
181 | ### `directives`
182 | 
183 | **Type** Object:
184 | 
185 | - key: registration name
186 | - value: VueJs directive object
187 | 
188 | You can use this prop in the same fashion as `components` above.
189 | 
190 | ### `requires`
191 | 
192 | **Type** Object:
193 | 
194 | - key: query in the require/import statement
195 | - value: value returned by an es5 reauire statement
196 | 
197 | 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.
198 | 
199 | Example
200 | 
201 | ```vue
202 | <template>
203 |   <VueLive :requires="preRequiredObjects" :code="code" />
204 | </template>
205 | <script>
206 | import DatePicker from "./DatePicker.vue";
207 | 
208 | export default {
209 |   data() {
210 |     return {
211 |       // lodash can be pre-packaged by the bundler
212 |       // so it can be required at runtime
213 |       preRequiredObjects: {
214 |         lodash: require("lodash"),
215 |       },
216 |       code: `
217 | import _ from 'lodash'
218 | 
219 | const val = _.each({1,2,3}, (i, v) => {
220 |   return \`\${i} value \${v}\`
221 | })
222 | 
223 | <li v-for="v in val">
224 |   v : {{v}}
225 | </li>
226 |       `,
227 |     };
228 |   },
229 | };
230 | </script>
231 | ```
232 | 
233 | ### `jsx`
234 | 
235 | **Type** Boolean
236 | 
237 | 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.
238 | 
239 | Example
240 | 
241 | ```vue
242 | <template>
243 |   <vue-live :code="code" jsx />
244 | </template>
245 | <script>
246 | export default {
247 |   data() {
248 |     return {
249 |       code: `
250 | const args = {
251 |   type: "button",
252 |   value: "update me"
253 | };
254 | 
255 | export default {
256 |   render() {
257 |     return <input {...args} />;
258 |   }
259 | };      
260 |       `,
261 |     };
262 |   },
263 | };
264 | </script>
265 | ```
266 | 
267 | ### `delay`
268 | 
269 | **Type** Number
270 | 
271 | Time between a change in the code and its effect in the preview.
272 | 
273 | > **Note** If a change happens before the prview has changed, the timer is reset.
274 | 
275 | ### `editorProps`
276 | 
277 | **Type** Object
278 | 
279 | Props passed directly to [vue-prism-editor](https://github.com/koca/vue-prism-editor) as a spread
280 | 
281 | ### `dataScope`
282 | 
283 | **Type** Object
284 | 
285 | Data object that wil be merged with the output data of the preview.
286 | 
287 | Example
288 | 
289 | ````vue
290 | ```vue
291 | <template>
292 |   <VueLive
293 |     :components="registeredComponents"
294 |     :data-scope="dataScope"
295 |     code="<DatePicker :value='today' />{{ today }}"
296 |   />
297 | </template>
298 | <script>
299 | import DatePicker from "./DatePicker.vue";
300 | 
301 | export default {
302 |   data() {
303 |     return {
304 |       registeredComponents: {
305 |         DatePicker,
306 |       },
307 |       // Without this variable declaration,
308 |       // today will not have a value when entering the
309 |       // particularly useful when examples or only a template
310 |       dataScope: {
311 |         today: new Date(),
312 |       },
313 |     };
314 |   },
315 | };
316 | </script>
317 | ````
318 | 
319 | ### `checkVariableAvailability`
320 | 
321 | **Type** Boolean
322 | 
323 | Makes sure that every variable in the template actually exists when the user starts editing.
324 | 
325 | Throws an error in te preview field when the variable dont exist.
326 | 
327 | ### `squiggles`
328 | 
329 | **Type** Boolean default: `true`
330 | 
331 | Shows a red indicator when the parser errors with the code given.
332 | 
333 | ## How to contribute
334 | 
335 | ```sh
336 | npm ci
337 | ```
338 | 
339 | ### Compiles and hot-reloads for development
340 | 
341 | ```sh
342 | npm run start
343 | ```
344 | 
345 | ### Compiles and minifies library for production using rollup
346 | 
347 | ```sh
348 | npm run build
349 | ```
350 | 
351 | ### Run unit and e2e tests
352 | 
353 | ```sh
354 | npm run test:unit
355 | npm run test:e2e
356 | ```
357 | 
358 | ### Lints and fixes files
359 | 
360 | ```sh
361 | npm run lint
362 | ```
363 | 
364 | <!-- now works with vue 3.3.X -->
365 | 


--------------------------------------------------------------------------------
/src/utils/checkTemplate.ts:
--------------------------------------------------------------------------------
  1 | import { parse as parseVue } from "@vue/compiler-dom";
  2 | import { createCompilerError } from "@vue/compiler-core";
  3 | import { parse as parseEs } from "acorn";
  4 | import { ancestor, simple } from "acorn-walk";
  5 | 
  6 | const ELEMENT = 1;
  7 | const SIMPLE_EXPRESSION = 4;
  8 | const INTERPOLATION = 5;
  9 | 
 10 | interface Options {
 11 |   template?: string;
 12 |   props?: any;
 13 |   data?: () => Record<string, any> | Record<string, any>;
 14 |   computed?: Record<string, any>;
 15 |   methods?: Record<string, any>;
 16 |   attrAllowList?: string[];
 17 |   setup?: () => Record<string, any> | void;
 18 | }
 19 | 
 20 | export default function (
 21 |   $options: Options,
 22 |   checkVariableAvailability: boolean
 23 | ) {
 24 |   if (!$options.template) {
 25 |     return;
 26 |   }
 27 |   let ast;
 28 |   try {
 29 |     ast = parseVue($options.template);
 30 |   } catch (e: any) {
 31 |     throw createCompilerError(e.code, e.loc);
 32 |   }
 33 | 
 34 |   if (!checkVariableAvailability) {
 35 |     return;
 36 |   }
 37 | 
 38 |   const propNamesArray = $options.props
 39 |     ? Array.isArray($options.props)
 40 |       ? $options.props
 41 |       : Object.keys($options.props)
 42 |     : [];
 43 | 
 44 |   const dataArray = $options.data
 45 |     ? typeof $options.data === "function"
 46 |       ? Object.keys($options.data())
 47 |       : Object.keys($options.data)
 48 |     : [];
 49 | 
 50 |   const computedArray = $options.computed ? Object.keys($options.computed) : [];
 51 | 
 52 |   const methodsArray =
 53 |     $options && $options.methods ? Object.keys($options.methods) : [];
 54 | 
 55 |   const setupOutput =
 56 |     $options && typeof $options.setup === "function"
 57 |       ? Object.keys($options.setup() ?? {})
 58 |       : [];
 59 | 
 60 |   const scriptVars = [
 61 |     ...propNamesArray,
 62 |     ...dataArray,
 63 |     ...computedArray,
 64 |     ...methodsArray,
 65 |     ...setupOutput,
 66 |   ];
 67 | 
 68 |   traverse(ast, [
 69 |     (templateAst: any, parentTemplateVars: any) => {
 70 |       const templateVars: string[] = [];
 71 |       if (templateAst.type === ELEMENT) {
 72 |         templateAst.props.forEach(
 73 |           (attr: {
 74 |             name: string;
 75 |             loc: any;
 76 |             type: number;
 77 |             exp?: { content: string };
 78 |           }) => {
 79 |             const exp =
 80 |               attr.type !== SIMPLE_EXPRESSION && attr.exp
 81 |                 ? attr.exp.content
 82 |                 : undefined;
 83 |             if (!exp) {
 84 |               return;
 85 |             }
 86 |             if (attr.name === "slot") {
 87 |               const astSlot = parseEs(`var ${exp}=1`, { ecmaVersion: 2020 });
 88 |               simple(astSlot, {
 89 |                 VariableDeclarator(declarator) {
 90 |                   // @ts-ignore
 91 |                   const { id } = declarator;
 92 |                   switch (id.type) {
 93 |                     case "ArrayPattern":
 94 |                       id.elements.forEach((e: any) => {
 95 |                         templateVars.push(e.name);
 96 |                       });
 97 |                       break;
 98 |                     case "ObjectPattern":
 99 |                       id.properties.forEach((e: any) => {
100 |                         templateVars.push(e.value.name);
101 |                       });
102 |                       break;
103 |                     case "Identifier":
104 |                       templateVars.push(id.name);
105 |                       break;
106 |                   }
107 |                   return false;
108 |                 },
109 |               });
110 |             } else if (attr.name === "for") {
111 |               const [vForLeft] = exp.split(/( in | of )/);
112 |               const doubleForRE = /\((\w+),(\w+)\)/;
113 |               if (doubleForRE.test(vForLeft.replace(" ", ""))) {
114 |                 const [, var1, var2] = Array.from(
115 |                   doubleForRE.exec(vForLeft.replace(" ", "")) || []
116 |                 );
117 | 
118 |                 templateVars.push(var1 || "");
119 |                 templateVars.push(var2 || "");
120 |               } else {
121 |                 templateVars.push(vForLeft);
122 |               }
123 |             } else {
124 |               try {
125 |                 checkExpression(exp, scriptVars, [
126 |                   ...parentTemplateVars,
127 |                   ...templateVars,
128 |                 ]);
129 |               } catch (e: any) {
130 |                 throw new VueLiveParseTemplateError(
131 |                   e.message,
132 |                   exp,
133 |                   e,
134 |                   attr.loc
135 |                 );
136 |               }
137 |             }
138 |           }
139 |         );
140 |       } else if (templateAst.type === INTERPOLATION) {
141 |         try {
142 |           if (templateAst.content) {
143 |             checkExpression(
144 |               templateAst.content.content,
145 |               scriptVars,
146 |               parentTemplateVars
147 |             );
148 |           }
149 |         } catch (e: any) {
150 |           throw new VueLiveParseTemplateError(
151 |             e.message,
152 |             templateAst.content,
153 |             e,
154 |             templateAst.loc
155 |           );
156 |         }
157 |       }
158 |       return templateVars;
159 |     },
160 |   ]);
161 | }
162 | 
163 | export function checkExpression(
164 |   expression: string,
165 |   availableVars: string[],
166 |   templateVars: string[]
167 | ) {
168 |   // try and parse the expression
169 |   const ast = parseEs(`(function(){return ${expression}})()`, {
170 |     ecmaVersion: 2020,
171 |   });
172 | 
173 |   // identify all variables that would be undefined because
174 |   // - not in the options object
175 |   // - not defined in the template
176 |   ancestor(ast, {
177 |     Identifier(identifier: any, ancestors: any) {
178 |       const varName = identifier.name;
179 |       if (
180 |         // if the identifier is a function call leave it alone
181 |         ancestors.length >= 2 &&
182 |         ancestors[ancestors.length - 2].type === "CallExpression" &&
183 |         ancestors[ancestors.length - 2].callee.name === varName
184 |       ) {
185 |         return;
186 |       } else if (
187 |         availableVars.indexOf(varName) === -1 &&
188 |         templateVars.indexOf(varName) === -1 &&
189 |         !/^\$/.test(varName)
190 |       ) {
191 |         const funcs = ancestors.filter(
192 |           (node: any) =>
193 |             node.type === "ArrowFunctionExpression" ||
194 |             node.type === "FunctionExpression"
195 |         );
196 |         if (
197 |           funcs.some((func: any) =>
198 |             func.params.some((p: any) => p.name === varName)
199 |           )
200 |         ) {
201 |           return;
202 |         }
203 |         throw new VueLiveUndefinedVariableError(
204 |           `Variable "${varName}" is not defined.`,
205 |           varName
206 |         );
207 |       }
208 |     },
209 |   });
210 | }
211 | 
212 | export function traverse(
213 |   templateAst: any,
214 |   handlers: any[],
215 |   availableVarNames: string[] = []
216 | ) {
217 |   const traverseAstChildren = (
218 |     templateAst: any,
219 |     availableVarNamesChildren: string[]
220 |   ) => {
221 |     const { children } = templateAst;
222 |     if (children) {
223 |       for (const childNode of children) {
224 |         traverse(childNode, handlers, availableVarNamesChildren);
225 |       }
226 |     }
227 |   };
228 | 
229 |   // we load this object with all available varnames
230 |   // discovered in the template parsing on v-for and v-slot
231 |   const availableVarNamesThisLevel = handlers.reduce((acc, handler) => {
232 |     const result = handler(templateAst, availableVarNames);
233 |     if (result && result.length) {
234 |       return acc.concat(result);
235 |     }
236 |     return acc;
237 |   }, []);
238 | 
239 |   traverseAstChildren(templateAst, [
240 |     ...availableVarNames,
241 |     ...availableVarNamesThisLevel,
242 |   ]);
243 | }
244 | 
245 | export class VueLiveUndefinedVariableError extends Error {
246 |   varName: string;
247 |   constructor(message: string, varName: string) {
248 |     super(message);
249 |     this.varName = varName;
250 |   }
251 | }
252 | 
253 | export class VueLiveParseTemplateAttrError extends Error {
254 |   loc: any;
255 |   constructor(message: string, loc: any) {
256 |     super(message);
257 |     this.loc = loc;
258 |   }
259 | }
260 | 
261 | export class VueLiveParseTemplateError extends Error {
262 |   expression: { content: string } | string;
263 |   subError: Error;
264 |   loc: any;
265 |   constructor(
266 |     message: string,
267 |     expression: { content: string } | string,
268 |     subError: Error,
269 |     loc: any
270 |   ) {
271 |     super(message);
272 |     this.expression = expression;
273 |     this.subError = subError;
274 |     this.loc = loc;
275 |   }
276 | }
277 | 


--------------------------------------------------------------------------------
/src/utils/checkTemplate.spec.ts:
--------------------------------------------------------------------------------
  1 | import { expect, test } from "vitest";
  2 | import checkTemplateDummy from "./checkTemplate";
  3 | 
  4 | const checkTemplate = (opts: any) => checkTemplateDummy(opts, true);
  5 | 
  6 | test("parse valid template without error with a function", () => {
  7 |   expect(() =>
  8 |     checkTemplate({ template: '<div><a :href="foo()">hello</a></div>' })
  9 |   ).not.toThrow();
 10 | });
 11 | 
 12 | test("parse valid template without error with a value in data", () => {
 13 |   expect(() =>
 14 |     checkTemplate({
 15 |       template: '<div><compo :value="today">hello</compo></div>',
 16 |       data() {
 17 |         return {
 18 |           today: "hello",
 19 |         };
 20 |       },
 21 |     })
 22 |   ).not.toThrow();
 23 | });
 24 | 
 25 | test("parse valid template without error with a value in props", () => {
 26 |   expect(() =>
 27 |     checkTemplate({
 28 |       template: '<div><compo :value="today">hello</compo></div>',
 29 |       props: {
 30 |         today: { type: String },
 31 |       },
 32 |     })
 33 |   ).not.toThrow();
 34 | });
 35 | 
 36 | test("parse valid template without error with a value in computed", () => {
 37 |   expect(() =>
 38 |     checkTemplate({
 39 |       template: '<div><compo :value="today">hello</compo></div>',
 40 |       computed: {
 41 |         today() {
 42 |           return "bonjour";
 43 |         },
 44 |       },
 45 |     })
 46 |   ).not.toThrow();
 47 | });
 48 | 
 49 | test("parse valid template without error with a value in methods", () => {
 50 |   expect(() =>
 51 |     checkTemplate({
 52 |       template: '<div><compo :value="today">hello</compo></div>',
 53 |       methods: {
 54 |         today() {
 55 |           return "bonjour";
 56 |         },
 57 |       },
 58 |     })
 59 |   ).not.toThrow();
 60 | });
 61 | 
 62 | test("parse valid template without error with values returned from setup", () => {
 63 |   expect(() =>
 64 |     checkTemplate({
 65 |       template: '<div><compo :value="today">{{ msg }}</compo></div>',
 66 |       setup() {
 67 |         return {
 68 |           today() {
 69 | 						return "bonjour";
 70 | 					},
 71 | 					msg: "hello"
 72 |         }
 73 |       },
 74 |     })
 75 |   ).not.toThrow();
 76 | });
 77 | 
 78 | test("parse false value as a valid value", () => {
 79 |   expect(() =>
 80 |     checkTemplate({
 81 |       template: `
 82 |   <div>
 83 |     <input v-model="value" type="checkbox">
 84 |     <h1 v-if="value">I am checked</h1>
 85 |   </div>`,
 86 |       data() {
 87 |         return {
 88 |           value: false,
 89 |         };
 90 |       },
 91 |     })
 92 |   ).not.toThrow();
 93 | });
 94 | 
 95 | test("parse invalid template with an error in the ++", () => {
 96 |   expect(() =>
 97 |     checkTemplate({
 98 |       template: '<div><compo :value="today++">hello</compo></div>',
 99 |     })
100 |   ).toThrow();
101 | });
102 | 
103 | test("parse invalid template with an error in a function call", () => {
104 |   expect(() =>
105 |     checkTemplate({
106 |       template: '<div><compo :value="callit(today)">hello</compo></div>',
107 |     })
108 |   ).toThrow();
109 | });
110 | 
111 | test("parse invalid template with an error in a function call and a spread", () => {
112 |   expect(() =>
113 |     checkTemplate({
114 |       template: '<div><compo :value="callit(...today)">hello</compo></div>',
115 |     })
116 |   ).toThrow();
117 | });
118 | 
119 | test("if it starts with dollar, it should not throw", () => {
120 |   expect(() =>
121 |     checkTemplate({
122 |       template: '<div><compo :value="$today++">hello</compo></div>',
123 |     })
124 |   ).not.toThrow();
125 | });
126 | 
127 | test("parse a valid arrow event handler properly", () => {
128 |   expect(() =>
129 |     checkTemplate({
130 |       template:
131 |         '<div><compo @click="( evt ) => { test(evt); }">hello</compo></div>',
132 |       methods: {
133 |         test(e: any) {
134 |           console.log(e.target);
135 |         },
136 |       },
137 |     })
138 |   ).not.toThrow();
139 | });
140 | 
141 | test("parse a valid standard event handler properly", () => {
142 |   expect(() =>
143 |     checkTemplate({
144 |       template:
145 |         '<div><compo @click="function( evt ) { test(evt); }">hello</compo></div>',
146 |       methods: {
147 |         test(e: any) {
148 |           console.log(e.target);
149 |         },
150 |       },
151 |     })
152 |   ).not.toThrow();
153 | });
154 | 
155 | test("parse invalid template with an error if the value is not in data", () => {
156 |   expect(() =>
157 |     checkTemplate({
158 |       template: '<div><compo :value="today">hello</compo></div>',
159 |     })
160 |   ).toThrowErrorMatchingInlineSnapshot(
161 |     `"Variable \\"today\\" is not defined."`
162 |   );
163 | });
164 | 
165 | test("parse template interpolation and detect lonely undefined variables", () => {
166 |   expect(() =>
167 |     checkTemplate({
168 |       template: "<div><compo>{{ hello }}</compo></div>",
169 |     })
170 |   ).toThrowErrorMatchingInlineSnapshot(
171 |     `"Variable \\"hello\\" is not defined."`
172 |   );
173 | });
174 | 
175 | test("parse template interpolation and detect impacted undefined variables", () => {
176 |   expect(() =>
177 |     checkTemplate({
178 |       template: "<div><compo>{{ hello + 'bonjour' }}</compo></div>",
179 |     })
180 |   ).toThrowErrorMatchingInlineSnapshot(
181 |     `"Variable \\"hello\\" is not defined."`
182 |   );
183 | });
184 | 
185 | test("parse template interpolation and detect impacted right variables", () => {
186 |   expect(() =>
187 |     checkTemplate({
188 |       template:
189 |         "<div><compo>{{ 'bonjour' + hello + 'sayonara' }}</compo></div>",
190 |     })
191 |   ).toThrowErrorMatchingInlineSnapshot(
192 |     `"Variable \\"hello\\" is not defined."`
193 |   );
194 | });
195 | 
196 | test("parse invalid : template by throwing an error", () => {
197 |   expect(() =>
198 |     checkTemplate({
199 |       template: '<div><a :href="+++foo()">hello</a></div>',
200 |     })
201 |   ).toThrowErrorMatchingInlineSnapshot(`"Assigning to rvalue (1:21)"`);
202 | });
203 | 
204 | test("parse invalid @ template by throwing an error", () => {
205 |   expect(() =>
206 |     checkTemplate({
207 |       template: '<div><a @click="+++foo()">hello</a></div>',
208 |     })
209 |   ).toThrowErrorMatchingInlineSnapshot(`"Assigning to rvalue (1:21)"`);
210 | });
211 | 
212 | test("parse valid object not to throw", () => {
213 |   expect(() =>
214 |     checkTemplate({
215 |       template: '<div><CustomSelect :options="{foo:1, bar:2}" /></div>',
216 |     })
217 |   ).not.toThrow();
218 | });
219 | 
220 | test("parse expression using multiple lines to throw", () => {
221 |   expect(() =>
222 |     checkTemplate({
223 |       template: `<div><CustomSelect @event="
224 |         test();
225 |         callFunction(hello);
226 |       " /></div>`,
227 |     })
228 |   ).toThrowErrorMatchingInlineSnapshot(
229 |     `"Variable \\"hello\\" is not defined."`
230 |   );
231 | });
232 | 
233 | test("parse v-for expressions and add their vars to available data", () => {
234 |   expect(() =>
235 |     checkTemplate({
236 |       template: `<div v-for="hello in [1,2]"><CustomSelect @event="
237 |         test();
238 |         callFunction(hello);
239 |       " /></div>`,
240 |     })
241 |   ).not.toThrow();
242 | });
243 | 
244 | test("parse v-for expressions with index and add their vars to available data", () => {
245 |   expect(() =>
246 |     checkTemplate({
247 |       template: `<div v-for="(hello, index) in [1,2]"><CustomSelect @event="
248 |         test(index);
249 |         callFunction(hello);
250 |       " /></div>`,
251 |     })
252 |   ).not.toThrow();
253 | });
254 | 
255 | test("parse v-slot-scope expressions without issues", () => {
256 |   expect(() =>
257 |     checkTemplate({
258 |       template: `<template v-slot:default="hello"><CustomSelect @event="
259 |         test();
260 |         callFunction(hello);
261 |       " /></template>`,
262 |     })
263 |   ).not.toThrow();
264 | });
265 | 
266 | test("parse v-slot-scope deconstructed expressions without issues", () => {
267 |   expect(() =>
268 |     checkTemplate({
269 |       template: `<template v-slot:default="{ bye: hello, whats: up, foo }"><CustomSelect @event="
270 |         test();
271 |         callFunction(hello);
272 |       " /></template>`,
273 |     })
274 |   ).not.toThrow();
275 | });
276 | 
277 | test("parse v-slot-scope deconstructed array expressions without issues", () => {
278 |   expect(() =>
279 |     checkTemplate({
280 |       template: `<template v-slot:default="[ hello ]"><CustomSelect @event="
281 |         test();
282 |         callFunction(hello);
283 |       " /></template>`,
284 |     })
285 |   ).not.toThrow();
286 | });
287 | 
288 | test("parse v-for nested expressions and add their vars to available data", () => {
289 |   expect(() =>
290 |     checkTemplate({
291 |       template: `<div v-for="hello in [1,2]">
292 |         <div v-for="other in [1,2]">
293 |           <CustomSelect @event="
294 |             test();
295 |             callFunction(hello);
296 |           " />
297 |         </div>
298 |       </div>`,
299 |     })
300 |   ).not.toThrow();
301 | });
302 | 
303 | 


--------------------------------------------------------------------------------
/src/Preview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <pre v-if="debug">{{ compiledCodeForDebug }}</pre>
  3 |   <pre class="VueLive-error" v-if="error">{{ error }}</pre>
  4 |   <component v-else-if="previewedComponent" :is="previewedComponent" :key="iteration">
  5 |     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
  6 |       <slot :name="name" v-bind="slotData" />
  7 |     </template>
  8 |   </component>
  9 | </template>
 10 | 
 11 | <script lang="ts">
 12 | import { markRaw, h, defineComponent } from "vue";
 13 | import * as Vue from "vue";
 14 | import {
 15 |   compile as compileScript,
 16 |   isCodeVueSfc,
 17 |   addScopedStyle,
 18 |   adaptCreateElement,
 19 |   concatenate,
 20 |   compileTemplateForEval
 21 | } from "vue-inbrowser-compiler-sucrase";
 22 | import checkTemplate, {
 23 |   VueLiveParseTemplateError,
 24 | } from "./utils/checkTemplate";
 25 | import evalInContext from "./utils/evalInContext";
 26 | import requireAtRuntime from "./utils/requireAtRuntime";
 27 | 
 28 | export default defineComponent({
 29 |   name: "VueLivePreviewComponent",
 30 |   emits: ["error", "success", "detect-language"],
 31 |   components: {},
 32 |   errorCaptured(err) {
 33 |     this.handleError(err);
 34 |   },
 35 |   props: {
 36 |     debug: {
 37 |       type: Boolean,
 38 |       default: false
 39 |     },
 40 |     /**
 41 |      * code rendered
 42 |      */
 43 |     code: {
 44 |       type: String,
 45 |       required: true,
 46 |     },
 47 |     /**
 48 |      * Hashtable of auto-registered components
 49 |      * @example { DatePicker: VueDatePicker }
 50 |      * @example { VueDatePicker }
 51 |      */
 52 |     components: {
 53 |       type: Object,
 54 |       default: () => { },
 55 |     },
 56 |     /**
 57 |      * Hashtable of auto-registered directives
 58 |      * @example { Tooltip: VueTooltip }
 59 |      * @example { VueTooltip }
 60 |      */
 61 |     directives: {
 62 |       type: Object,
 63 |       default: () => { },
 64 |     },
 65 |     /**
 66 |      * Hashtable of modules available in require and import statements
 67 |      * in the code prop
 68 |      * @example { lodash: require("lodash") }
 69 |      * @example { moment: require("moment") }
 70 |      */
 71 |     requires: {
 72 |       type: Object,
 73 |       default: () => { },
 74 |     },
 75 |     jsx: {
 76 |       type: Boolean,
 77 |       default: false,
 78 |     },
 79 |     /**
 80 |      * Outside data to the preview
 81 |      * @example { count: 1 }
 82 |      */
 83 |     dataScope: {
 84 |       type: Object,
 85 |       default: () => { },
 86 |     },
 87 |     /**
 88 |      * Avoid checking variables for availability it template
 89 |      */
 90 |     checkVariableAvailability: {
 91 |       type: Boolean,
 92 |       default: true,
 93 |     },
 94 |   },
 95 |   data() {
 96 |     return {
 97 |       scope: this.generateScope(),
 98 |       previewedComponent: markRaw(defineComponent({
 99 |         render: () => h("div"),
100 |       })),
101 |       iteration: 0,
102 |       error: false,
103 |       removeScopedStyle: () => { },
104 |       compiledCodeForDebug: "",
105 |     };
106 |   },
107 |   computed: {
108 |     requiresPlusVue(): Record<string, any> {
109 |       return { vue: Vue, ...this.requires };
110 |     },
111 |   },
112 |   created() {
113 |     this.renderComponent(this.code.trim());
114 |   },
115 |   destroyed() {
116 |     this.removeStyle();
117 |   },
118 |   watch: {
119 |     code(value) {
120 |       this.renderComponent(value.trim());
121 |     },
122 |   },
123 |   methods: {
124 |     /**
125 |      * Generates the Scope Id attribute value. It will be added to each
126 |      * tag if a style is applied to scope the style only to this example
127 |      */
128 |     generateScope() {
129 |       return "v-xxxxxxxx".replace(/[xy]/g, (c) => {
130 |         const r = (Math.random() * 16) | 0;
131 |         const v = c === "x" ? r : (r & 0x3) | 0x8;
132 |         return v.toString(16);
133 |       });
134 |     },
135 |     handleError(e: any) {
136 |       /**
137 |        * Emitted every time the component rendered throws an error
138 |        * Catches runtime and compilation errors
139 |        * @event
140 |        * @property { Error } - the error thrown
141 |        */
142 |       if (e.constructor === VueLiveParseTemplateError) {
143 |         e.message = `Cannot parse template expression: ${JSON.stringify(
144 |           (e.expression as any).content || e.expression
145 |         )}\n\n${e.message}`;
146 |       }
147 |       this.$emit("error", e);
148 |       this.error = e.message;
149 |     },
150 |     removeStyle() {
151 |       if (this.removeScopedStyle) {
152 |         this.removeScopedStyle();
153 |       }
154 |     },
155 |     async renderComponent(code: string) {
156 |       let options = defineComponent({});
157 |       let style;
158 |       const scopeAttribute = `data-${this.scope}`
159 |       try {
160 |         const renderedComponent = compileScript(
161 |           code,
162 |           this.jsx
163 |             ? {
164 |               jsxPragma: "__pragma__(h)",
165 |             } : {},
166 |             scopeAttribute
167 |         );
168 |         if(this.debug){
169 |           this.compiledCodeForDebug = Object.entries(renderedComponent).map(([key, code]) => typeof code === 'string' ? `<${key}>\n${code}\n</${key}>` : '').join("\n\n")
170 |         }
171 |         style = renderedComponent.style;
172 |         if (renderedComponent.script) {
173 |           // if the compiled code contains a script it might be "just" a script
174 |           // if so, change scheme used by editor
175 |           // NOTE: vsg is a superset of JavaScript allowing
176 |           // the template to add javascript code above the template without fluff, very useful for examples
177 |           // NOTE2: vsg stands for vue-styleguidist
178 |           this.$emit("detect-language", isCodeVueSfc(code) ? "vue" : "vsg");
179 | 
180 |           // compile and execute the script
181 |           // it can be:
182 |           // - a script setting up variables => we set up the data property of renderedComponent
183 |           // - a `new Vue()` script that will return a full config object
184 |           const calcOptions = async () => {
185 |             const script = renderedComponent.script;
186 |             const requires: typeof this.requires = {}
187 |             await Promise.allSettled(Object.keys(this.requiresPlusVue).map(async (key) => {
188 |               requires[key] = this.requiresPlusVue[key] instanceof Promise ? (await this.requiresPlusVue[key]).default : this.requiresPlusVue[key]
189 |             }))
190 |             options = defineComponent((evalInContext(
191 |               script,
192 |               (filepath) => requireAtRuntime(requires, filepath),
193 |               adaptCreateElement,
194 |               concatenate,
195 |               h
196 |             ) || {}));
197 |             options.name = "VueLiveCompiledExample";
198 |           };
199 |           await calcOptions();
200 | 
201 |           // In case the template is inlined in the script,
202 |           // we need to compile it
203 |           if (typeof options.template === "string") {
204 |             renderedComponent.template = options.template;
205 |             compileTemplateForEval(renderedComponent);
206 |             await calcOptions();
207 |             checkTemplate({
208 |               ...(options as any),
209 |               template: options.template,
210 |             },
211 |               this.checkVariableAvailability);
212 |             delete options.template;
213 |           }
214 | 
215 |           if (this.dataScope) {
216 |             const mergeData = { ...(options as any)?.data(), ...this.dataScope };
217 |             options.data = () => mergeData;
218 |           }
219 |         }
220 | 
221 |         const template = renderedComponent.raw.template
222 |         if (template) {
223 |           checkTemplate({
224 |             ...(options as any),
225 |             template,
226 |           },
227 |             this.checkVariableAvailability
228 |           );
229 |         }
230 |       } catch (e) {
231 |         this.handleError(e);
232 |         return;
233 |       }
234 | 
235 |       if (this.components) {
236 |         if (!options.components) {
237 |           options.components = this.components;
238 |         } else {
239 |           options.components = { ...options.components, ...this.components };
240 |         }
241 |       }
242 | 
243 |       if (this.directives) {
244 |         if (!options.directives) {
245 |           options.directives = this.directives;
246 |         } else {
247 |           options.directives = { ...options.directives, ...this.directives };
248 |         }
249 |       }
250 | 
251 |       this.removeStyle();
252 | 
253 |       if (style) {
254 |         // To add the scope id attribute to each item in the html
255 |         // this way when we add the scoped style sheet it will be applied
256 |         options.__scopeId = scopeAttribute;
257 |         this.removeScopedStyle = addScopedStyle(style, this.scope);
258 |       }
259 | 
260 |       if (!options.render) {
261 |         this.handleError({
262 |           message:
263 |             "[Vue Live] no template or render function specified. Example cannot be rendered.",
264 |         });
265 |         return;
266 |       }
267 | 
268 |       options.errorCaptured = (e: any) => {
269 |         this.handleError(e);
270 |         return false;
271 |       };
272 | 
273 |       this.previewedComponent = markRaw(options);
274 |       this.iteration = this.iteration + 1;
275 |       this.error = false;
276 |       this.$emit("success");
277 |     },
278 |   },
279 | });
280 | </script>
281 | 
282 | <style>
283 | .VueLive-error {
284 |   color: red;
285 |   text-align: left;
286 |   overflow: auto;
287 |   white-space: pre-wrap;
288 | }
289 | </style>
290 | 


--------------------------------------------------------------------------------