generate dev environment, add <vue-vega> component, and add example

.browserslistrc

@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules/
+/dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

babel.config.js

@@ -0,0 +1,17 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+  '@babel/preset-typescript',
+];
+module.exports = {
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+};

build/rollup.config.js

@@ -0,0 +1,68 @@
+// rollup.config.js
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import json from "@rollup/plugin-json";
+import ts from "rollup-plugin-ts";
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const commonSettings = {
+  external: ['vue', 'vue-demi', 'vega-embed'],
+}
+
+const commonPlugins = [
+  alias({
+    entries: [
+      {
+        find: '@',
+        replacement: `${path.resolve(projectRoot, 'src')}`,
+      },
+    ],
+  }),
+  ts({
+  }),
+  json()
+];
+
+export default [
+  // ESM build to be used with webpack/rollup.
+  {
+    ...commonSettings,
+    input: 'src/entry.ts',
+    output: {
+      format: 'esm',
+      file: 'dist/library.esm.js'
+    },
+    plugins: [
+      ...commonPlugins,
+      vue()
+    ]
+  },
+  // SSR build.
+  {
+    ...commonSettings,
+    input: 'src/entry.ts',
+    output: {
+      format: 'cjs',
+      file: 'dist/library.ssr.js'
+    },
+    plugins: [
+      ...commonPlugins,
+      vue({ template: { optimizeSSR: true } })
+    ]
+  }/*,
+  // Browser build.
+  {
+    ...commonSettings,
+    input: 'src/entry.iife.ts',
+    output: {
+      format: 'iife',
+      file: 'dist/library.js'
+    },
+    plugins: [
+      ...commonPlugins,
+      vue()
+    ]
+  }*/
+];

dev/serve.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Dev from './serve.vue';
+
+new Vue({
+    render: (h) => h(Dev),
+  }).$mount("#app");
+

dev/serve.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent } from 'vue-demi';
+
+// Uncomment import and local "components" registration if library is not registered globally.
+import { VueVega } from '@/entry';
+
+export default defineComponent({
+  name: 'ServeDev',
+  components: {
+    VueVega,
+  },
+  data() {
+    return {
+      spec: {
+        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+        description: "A simple bar chart with embedded data.",
+        mark: "bar",
+        encoding: {
+          x: { field: "a", type: "nominal", axis: { labelAngle: 0 } },
+          y: { field: "b", type: "quantitative" },
+        },
+        data: { "values" : [
+          { a: "A", b: 28 },
+          { a: "B", b: 55 },
+          { a: "C", b: 43 },
+          { a: "D", b: 91 },
+          { a: "E", b: 81 },
+          { a: "F", b: 53 },
+          { a: "G", b: 19 },
+          { a: "H", b: 87 },
+          { a: "I", b: 52 },
+        ] },
+      }
+    }
+  }
+});
+</script>
+
+<template>
+  <div id="app">
+    <vue-vega :spec="spec" />
+  </div>
+</template>