diff --git a/.gitignore b/.gitignore index b4cfca42..2318df22 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules lib stats.html +coverage diff --git a/README.md b/README.md index 3d261f74..8baa5405 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 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. @@ -8,29 +8,33 @@ See [jsonforms-vuetify-renderers.netlify.app](https://jsonforms-vuetify-renderer 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: (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 b/example/.eslintrc.cjs similarity index 63% rename from example/.eslintrc.js rename to example/.eslintrc.cjs index ecbec231..5675b805 100644 --- a/example/.eslintrc.js +++ b/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 new file mode 100644 index 00000000..2c26853c --- /dev/null +++ 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 deleted file mode 100644 index 59c57086..00000000 --- a/example/.prettierrc.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - jsxSingleQuote: true, - singleQuote: true, -} diff --git a/example/README.md b/example/README.md index 768282fb..10cde07e 100644 --- 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 deleted file mode 100644 index 078c0056..00000000 --- a/example/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: ['@vue/cli-plugin-babel/preset'], -}; diff --git a/example/env.d.ts b/example/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/example/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/example/index.html b/example/index.html new file mode 100644 index 00000000..c43e3641 --- /dev/null +++ b/example/index.html @@ -0,0 +1,18 @@ + + + + + + + + + JSON Forms Vue 3 Vuetify example + + +
+ + + diff --git a/example/package.json b/example/package.json index b4286c5f..16f0e1e4 100644 --- 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 deleted file mode 100644 index 97a935b7..00000000 --- a/example/public/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - JSON Forms Vue 3 Vuetify example - - - - - -
- - - diff --git a/example/src/App.vue b/example/src/App.vue index e09bb70d..fed23d54 100644 --- a/example/src/App.vue +++ b/example/src/App.vue @@ -1,11 +1,11 @@ + + - - - diff --git a/example/src/assets/JsonFormsLogo.vue b/example/src/assets/JsonFormsLogo.vue new file mode 100644 index 00000000..5a46270b --- /dev/null +++ b/example/src/assets/JsonFormsLogo.vue @@ -0,0 +1,59 @@ + + + diff --git a/example/src/assets/VuetifyLogo.vue b/example/src/assets/VuetifyLogo.vue new file mode 100644 index 00000000..931941d5 --- /dev/null +++ b/example/src/assets/VuetifyLogo.vue @@ -0,0 +1,85 @@ + + + diff --git a/example/src/assets/jsonforms.svg b/example/src/assets/jsonforms.svg deleted file mode 100644 index 774d78bc..00000000 --- a/example/src/assets/jsonforms.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/example/src/assets/vuetify.svg b/example/src/assets/vuetify.svg deleted file mode 100644 index 90961752..00000000 --- a/example/src/assets/vuetify.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Artboard 46 - - - - - \ No newline at end of file diff --git a/example/src/components/Settings.vue b/example/src/components/AppSettings.vue similarity index 56% rename from example/src/components/Settings.vue rename to example/src/components/AppSettings.vue index 610db120..40c3eb6a 100644 --- a/example/src/components/Settings.vue +++ b/example/src/components/AppSettings.vue @@ -1,7 +1,74 @@ + +