eclipsesource · kchobantonov · May 14, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 lib
 stats.html
+coverage
diff --git a/README.md b/README.md
@@ -1,36 +1,40 @@
 # JSON Forms Vuetify renderers
 
-This is a monorepo containing the JSON Forms Vue 2 Vuetify renderers and an example application.
+This is a monorepo containing the JSON Forms Vue 3 Vuetify renderers and an example application.
 
 See [jsonforms-vuetify-renderers.netlify.app](https://jsonforms-vuetify-renderers.netlify.app) for the deployed example application.
 
 ## JSON Forms
 
 See [jsonforms.io](https://jsonforms.io/) and the [main repository](https://github.com/eclipsesource/jsonforms) for more information about JSON Forms.
 
-## Vue2 Vuetify renderer set
+## Vue3 Vuetify renderer set
 
 See the [README](https://github.com/eclipsesource/jsonforms-vuetify-renderers/blob/main/vue2-vuetify/README.md) of the Vue 2 Vuetify renderer set for detailed instructions on how to consume and use the JSON Forms Vue 2 Vuetify renderer set.
 
 ## Developer documentation
 
-Use Node 12+
+Use Node v18.19+
 
 ### Initial setup
 
-- Install monorepo dependencies: `npm ci`
-- Hook up dependencies between packages: `npm run init`
+- Install [node.js](https://nodejs.org/) (only Node v18.19+ < 19 is currently supported)
+- Install pnpm: <https://pnpm.io/installation> (use pnpm 8.6.2+)
+- Clone this repository
+- Install dependencies: `pnpm i --frozen-lockfile`
 
 ### Scripts
 
-- Build the renderer set: `npm run build`
-- Build and watch the renderer set: `npm run watch`
-- Remove build artifacts: `npm run clean`
-- Run example app: `npm run example:serve`
-- Build example app for production: `npm run example:build`
+- Build the renderer set: `pnpm run build`
+- Build and watch the renderer set: `pnpm run watch`
+- Remove build artifacts: `pnpm run clean`
+- Run example app: `pnpm run example:dev`
+- Build example app for production: `pnpm run example:build`
+- Run Tests: `pnpm run test`
+- Linting: `pnpm run lint`
 
 Recommendations:
 
-- For development use `npm run watch` combined with `npm run example:serve`.
-- To test production use `npm run build` combined with `npm run example:build`.
-  Then serve the built application from `example/dist` with a web server of your choice, e.g. `npx http-server example/dist`.
+- For development use `pnpm run watch` combined with `pnpm run example:dev`.
+- To test production use `pnpm run build` combined with `pnpm run example:build`.
+  Then serve the built application from `example/dist` with a web server of your choice, e.g. `npx http-server example/dist` or use `pnpm run example:preview`
diff --git a/example/.eslintrc.js → example/.eslintrc.cjs b/example/.eslintrc.js → example/.eslintrc.cjs
@@ -1,14 +1,15 @@
+require('@rushstack/eslint-patch/modern-module-resolution');
+
 module.exports = {
   root: true,
   env: {
     node: true,
   },
   extends: [
-    'plugin:vue/essential',
+    'plugin:vue/vue3-essential',
     'eslint:recommended',
-    '@vue/typescript/recommended',
-    '@vue/prettier',
-    '@vue/eslint-config-prettier',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting',
   ],
   parserOptions: {
     ecmaVersion: 2020,

diff --git a/example/.prettierrc.cjs b/example/.prettierrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+};
diff --git a/example/.prettierrc.js b/example/.prettierrc.js
diff --git a/example/README.md b/example/README.md
@@ -6,5 +6,5 @@
 
 ## Scripts
 
-- `npm run serve` to start the application
-- `npm run build` to build the application
+- `pnpm run dev` to start the application
+- `pnpm run build` to build the application
diff --git a/example/babel.config.js b/example/babel.config.js
diff --git a/example/env.d.ts b/example/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+    />
+    <title>JSON Forms Vue 3 Vuetify example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -2,44 +2,64 @@
   "name": "example",
   "version": "3.2.0-preview-alpha.3",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "vue-cli-service build",
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
+    "prebuild": "rimraf dist",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@jsonforms/core": "3.2.0-alpha.3",
-    "@jsonforms/vue": "3.2.0-alpha.3",
-    "@jsonforms/vue-vuetify": "^3.2.0-preview-alpha.3",
+    "@jsonforms/core": "3.2.1",
+    "@jsonforms/vue": "3.2.1",
+    "@jsonforms/vue-vuetify": "workspace:*",
+    "@vueuse/core": "^10.9.0",
+    "ajv": "^8.6.1",
     "ajv-keywords": "^5.1.0",
     "core-js": "^3.9.1",
+    "dayjs": "^1.10.6",
     "json-refs": "^3.0.15",
-    "monaco-editor": "^0.38.0",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
-    "vuetify": "^3.1.12",
-    "vuex": "^4.1.0"
+    "lodash": "^4.17.15",
+    "monaco-editor": "^0.48.0",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vuetify": "^3.6.6"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "eslint": "^8.37.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^9.10.0",
-    "monaco-editor-webpack-plugin": "^7.0.1",
-    "prettier": "^2.8.7",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@mdi/font": "^7.4.47",
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.6",
+    "@types/lodash": "^4.14.172",
+    "@types/node": "^20.12.5",
+    "@types/splitpanes": "^2.2.6",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "prettier": "^3.2.5",
     "rimraf": "^4.4.1",
-    "sass": "~1.32.0",
-    "sass-loader": "^10.0.0",
-    "typescript": "~4.7.4",
-    "vue-cli-plugin-vuetify": "~2.5.8",
-    "vuex-pathify": "^3.0.0-beta",
-    "webpack-plugin-vuetify": "^2.0.1"
+    "sass": "^1.75.0",
+    "typescript": "~5.4.0",
+    "vite": "^5.2.8",
+    "vite-plugin-node-polyfills": "^0.21.0",
+    "vite-plugin-vue-devtools": "^7.0.25",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vitest": "^1.4.0",
+    "vue-tsc": "^2.0.11"
   }
 }
diff --git a/example/public/index.html b/example/public/index.html
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,11 +1,11 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+</script>
+
 <template>
   <router-view />
 </template>
 
-<script lang="ts">
-export default { name: 'App' };
-</script>
-
-<style scoped>
-@import '~@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.esm.css';
+<style>
+@import '@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.css';
 </style>
diff --git a/example/src/assets/JsonFormsLogo.vue b/example/src/assets/JsonFormsLogo.vue
@@ -0,0 +1,59 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 150 100"
+    :width="width"
+    :height="height"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g
+      xmlns="http://www.w3.org/2000/svg"
+      transform="translate(0.000000,95.000000) scale(0.100000,-0.100000)"
+      :fill="primaryColor"
+      stroke="none"
+      id="g6"
+    >
+      <path
+        d="M161 937 c-49 -24 -62 -65 -70 -221 -7 -156 -15 -177 -67 -190 -18 -5 -24 -13 -24 -35 0 -22 7 -31 30 -41 48 -20 57 -50 62 -212 4 -121 8 -152 24 -180 25 -42 91 -67 131 -49 36 16 28 52 -14 63 -18 5 -36 14 -40 21 -4 6 -10 75 -13 152 -6 151 -22 208 -69 231 l-22 11 25 17 c47 30 59 70 65 219 6 146 10 157 58 157 28 0 37 14 29 46 -5 20 -12 24 -44 24 -20 0 -48 -6 -61 -13z"
+        id="path8"
+      />
+      <path
+        d="M1204 936 c-11 -29 1 -51 28 -54 49 -6 58 -33 58 -172 0 -141 13 -185 64 -209 l29 -14 -25 -13 c-46 -24 -61 -75 -68 -229 -3 -77 -9 -146 -13 -152 -4 -7 -22 -16 -40 -21 -22 -6 -33 -15 -35 -30 -5 -32 33 -47 86 -32 66 17 74 38 83 210 8 162 23 214 66 231 36 13 32 64 -6 77 -46 16 -54 44 -60 202 -7 158 -17 191 -67 210 -38 15 -94 12 -100 -4z"
+        id="path10"
+      />
+      <path
+        d="M467 923 c-15 -2 -43 -20 -62 -38 -45 -45 -47 -71 -43 -450 4 -430 -23 -400 368 -400 395 0 365 -37 365 445 0 479 27 444 -345 446 -140 1 -268 0 -283 -3z m553 -73 c19 -19 20 -33 20 -372 0 -313 -2 -353 -17 -370 -15 -17 -37 -18 -290 -18 -260 0 -274 1 -293 20 -19 19 -20 33 -20 370 0 337 1 351 20 370 19 19 33 20 290 20 257 0 271 -1 290 -20z"
+        id="path12"
+      />
+      <path
+        d="M500 740 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
+        id="path14"
+      />
+      <path
+        d="M500 590 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
+        id="path16"
+      />
+      <path
+        d="M500 410 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
+        id="path18"
+      />
+      <path
+        d="M500 240 c0 -19 7 -20 235 -20 228 0 235 1 235 20 0 19 -7 20 -235 20 -228 0 -235 -1 -235 -20z"
+        id="path20"
+      />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+
+const theme = useTheme();
+defineProps<{
+  width: string | number;
+  height: string | number;
+}>();
+
+const primaryColor = computed(() => theme.current.value.colors.primary);
+</script>