From 1f124e81b4c1ea411107fa5190d8fb7b4e2a8963 Mon Sep 17 00:00:00 2001 From: Lucas Koehler Date: Fri, 14 Apr 2023 13:06:06 +0200 Subject: [PATCH] Format remaining files with prettier Part of #1551 --- .devcontainer/devcontainer.json | 46 +++--- .github/config/changelog.json | 4 +- .github/workflows/ci.yaml | 52 +++---- .github/workflows/release.yaml | 2 +- .prettierrc.js | 2 +- .vscode/extensions.json | 4 +- .vscode/settings.json | 16 +- MIGRATION.md | 90 +++++++----- README.md | 30 ++-- ROADMAP.md | 8 +- lerna.json | 13 +- packages/angular-material/.prettierrc.js | 2 +- packages/angular-material/README.md | 60 ++++---- .../example/index.bundled.html | 38 +++-- packages/angular-material/example/index.html | 40 ++--- .../angular-material/rollup.example.config.js | 25 ++-- .../test-config/karma-test-shim.js | 5 +- .../test-config/karma.conf.js | 28 ++-- .../test-config/protractor.conf.js | 16 +- .../test-config/webpack.test.js | 30 ++-- .../angular-material/test/tsconfig.test.json | 13 +- packages/angular-material/tsconfig.cjs.json | 2 +- .../angular-material/webpack/webpack.build.js | 18 +-- .../angular-material/webpack/webpack.dev.js | 68 +++++---- packages/angular-test/.prettierrc.js | 2 +- packages/angular-test/tsconfig.json | 8 +- packages/angular/.prettierrc.js | 2 +- packages/angular/README.md | 83 ++++++----- packages/angular/test/tsconfig.test.json | 13 +- packages/angular/tsconfig.cjs.json | 2 +- packages/core/.nycrc | 8 +- packages/core/README.md | 6 +- packages/core/rollup.config.js | 22 +-- packages/core/tsconfig.json | 8 +- packages/examples-app/README.md | 2 +- packages/examples-app/index.html | 33 ++--- packages/examples-app/prepare-examples-app.js | 6 +- packages/examples-react/.prettierrc.js | 2 +- packages/examples-react/public/index.html | 17 ++- packages/examples-react/src/App.css | 6 +- packages/examples/.prettierrc.js | 2 +- packages/examples/README.md | 2 +- packages/examples/rollup.config.js | 24 +-- packages/examples/tsconfig.json | 8 +- packages/material-renderers/.prettierrc.js | 2 +- packages/material-renderers/README.md | 33 ++--- .../example/index.bundled.html | 26 ++-- .../material-renderers/example/index.html | 26 ++-- packages/material-renderers/rollup.config.js | 24 +-- .../rollup.example.config.js | 25 ++-- packages/material-renderers/tsconfig.json | 8 +- .../material-renderers/webpack/webpack.dev.js | 12 +- packages/react/.prettierrc.js | 2 +- packages/react/README.md | 54 +++---- packages/react/__mocks__/react.js | 4 +- packages/react/rollup.config.js | 52 +++---- packages/react/tsconfig.json | 10 +- packages/react/tsconfig.redux.json | 6 +- packages/vanilla-renderers/.nycrc | 8 +- packages/vanilla-renderers/.prettierrc.js | 2 +- packages/vanilla-renderers/README.md | 30 ++-- packages/vanilla-renderers/Styles.md | 36 +++++ .../vanilla-renderers/example/example.css | 139 +++++++++--------- .../example/index.bundled.html | 48 +++--- packages/vanilla-renderers/example/index.html | 48 +++--- packages/vanilla-renderers/rollup.config.js | 24 +-- .../rollup.example.config.js | 27 ++-- packages/vanilla-renderers/tsconfig.json | 8 +- .../vanilla-renderers/webpack/webpack.dev.js | 18 +-- packages/vue/vue-vanilla/.prettierrc.js | 2 +- packages/vue/vue-vanilla/README.md | 68 +++++---- packages/vue/vue-vanilla/babel.config.js | 4 +- .../vue-vanilla/example/index.bundled.html | 26 ++-- packages/vue/vue-vanilla/rollup.config.js | 42 +++--- .../vue/vue-vanilla/rollup.example.config.js | 20 +-- packages/vue/vue-vanilla/shims-vue.d.ts | 8 +- packages/vue/vue-vanilla/tsconfig.json | 2 +- packages/vue/vue-vanilla/vanilla.css | 11 +- packages/vue/vue/.prettierrc.js | 2 +- packages/vue/vue/README.md | 114 +++++++------- packages/vue/vue/babel.config.js | 4 +- packages/vue/vue/jest.config.js | 4 +- packages/vue/vue/rollup.config.js | 40 ++--- packages/vue/vue/shims-vue.d.ts | 8 +- packages/vue2/vue2-vanilla/README.md | 71 +++++---- packages/vue2/vue2-vanilla/babel.config.js | 4 +- packages/vue2/vue2-vanilla/jest.config.js | 2 +- packages/vue2/vue2-vanilla/rollup.config.js | 42 +++--- packages/vue2/vue2-vanilla/shims-vue.d.ts | 4 +- packages/vue2/vue2-vanilla/vue.config.js | 4 +- packages/vue2/vue2/README.md | 118 +++++++-------- packages/vue2/vue2/babel.config.js | 4 +- packages/vue2/vue2/jest.config.js | 2 +- packages/vue2/vue2/rollup.config.js | 42 +++--- packages/vue2/vue2/shims-vue.d.ts | 4 +- packages/vue2/vue2/vue.config.js | 4 +- webpack/webpack.base.js | 90 ++++++------ webpack/webpack.dev.base.js | 48 +++--- 98 files changed, 1193 insertions(+), 1141 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 0337654b0..a6195ce26 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,26 +1,26 @@ // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: // https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/javascript-node { - "name": "Node.js", - "build": { - "dockerfile": "Dockerfile", - // Update 'VARIANT' to pick a Node version: 14, 16 - "args": { - "VARIANT": "14" - } - }, - // Set *default* container specific settings.json values on container create. - // Add the IDs of extensions you want installed when the container is created. - "customizations": { - "extensions": [ - "DavidAnson.vscode-markdownlint", - "dbaeumer.vscode-eslint", - "esbenp.prettier-vscode", - "vue.volar" - ] - }, - // Use 'postCreateCommand' to run commands after the container is created. - "postCreateCommand": "npm ci && npm run init && npm run build", - // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. - "remoteUser": "node" -} \ No newline at end of file + "name": "Node.js", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 14, 16 + "args": { + "VARIANT": "14" + } + }, + // Set *default* container specific settings.json values on container create. + // Add the IDs of extensions you want installed when the container is created. + "customizations": { + "extensions": [ + "DavidAnson.vscode-markdownlint", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "vue.volar" + ] + }, + // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "npm ci && npm run init && npm run build", + // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "node" +} diff --git a/.github/config/changelog.json b/.github/config/changelog.json index 586fc7c7c..04256b89c 100644 --- a/.github/config/changelog.json +++ b/.github/config/changelog.json @@ -2,7 +2,5 @@ "sort": "DESC", "pr_template": "- [${{LABELS}}] ${{TITLE}} (#${{NUMBER}})", "template": "${{UNCATEGORIZED}}", - "ignore_labels": [ - "dependencies" - ] + "ignore_labels": ["dependencies"] } diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 7a5d0a379..f661027ea 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -15,29 +15,29 @@ jobs: - windows-latest name: Run on ${{ matrix.os }} steps: - - uses: actions/checkout@v2 - - name: Setup node - uses: actions/setup-node@v2 - with: - node-version: 14 - - name: Build - run: | - npm ci - npm run init - npm run build - npm run bundle - - name: Test - if: matrix.os == 'windows-latest' - run: | - npm run test - - name: Test & Coverage - if: matrix.os == 'ubuntu-latest' - run: | - npm run test-cov - npm run check-format - npm run merge-report && cat coverage/lcov.info - - name: Upload Coveralls Report - if: success() && matrix.os == 'ubuntu-latest' - uses: coverallsapp/github-action@master - with: - github-token: ${{ secrets.GITHUB_TOKEN }} + - uses: actions/checkout@v2 + - name: Setup node + uses: actions/setup-node@v2 + with: + node-version: 14 + - name: Build + run: | + npm ci + npm run init + npm run build + npm run bundle + - name: Test + if: matrix.os == 'windows-latest' + run: | + npm run test + - name: Test & Coverage + if: matrix.os == 'ubuntu-latest' + run: | + npm run test-cov + npm run check-format + npm run merge-report && cat coverage/lcov.info + - name: Upload Coveralls Report + if: success() && matrix.os == 'ubuntu-latest' + uses: coverallsapp/github-action@master + with: + github-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index a23551150..8a001f488 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -6,7 +6,7 @@ on: jobs: release: - if: | + if: | startsWith(github.ref, 'refs/tags/v') && !contains(github.ref, 'alpha') && !contains(github.ref, 'beta') && diff --git a/.prettierrc.js b/.prettierrc.js index 6391982a0..2c26853c4 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -3,4 +3,4 @@ module.exports = { singleQuote: true, jsxSingleQuote: true, endOfLine: 'auto', -} \ No newline at end of file +}; diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 157515469..460ca3db3 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -6,8 +6,8 @@ "DavidAnson.vscode-markdownlint", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", - "ms-vscode-remote.remote-containers", + "ms-vscode-remote.remote-containers" ], // List of extensions recommended by VS Code that should not be recommended for users of this workspace. "unwantedRecommendations": [] -} \ No newline at end of file +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 106611d51..9c94fbac5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,38 +12,38 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true - }, + } }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true - }, + } }, "[json]": { - "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true - }, + } }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true - }, + } }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true - }, + } }, "search.exclude": { "**/docs": true, "**/node_modules": true, "**/lib": true - }, -} \ No newline at end of file + } +} diff --git a/MIGRATION.md b/MIGRATION.md index 909c8b287..9458c2f80 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -24,8 +24,16 @@ interface TesterContext { config: any; } -type Tester = (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => boolean; -type RankedTester = (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => number; +type Tester = ( + uischema: UISchemaElement, + schema: JsonSchema, + context: TesterContext +) => boolean; +type RankedTester = ( + uischema: UISchemaElement, + schema: JsonSchema, + context: TesterContext +) => number; ``` This allows the testers to resolve any `$ref` they might encounter in their handed over `schema` by using the context's `rootSchema`. @@ -50,7 +58,10 @@ To restore the old behavior, you can use `json-schema-ref-parser` or other libra ```ts import React, { useState } from 'react'; import { JsonForms } from '@jsonforms/react'; -import { materialCells, materialRenderers } from '@jsonforms/material-renderers'; +import { + materialCells, + materialRenderers, +} from '@jsonforms/material-renderers'; import $RefParser from '@apidevtools/json-schema-ref-parser'; import JsonRefs from 'json-refs'; @@ -58,22 +69,26 @@ import mySchemaWithReferences from 'myschema.json'; const refParserOptions = { dereference: { - circular: false - } -} + circular: false, + }, +}; function App() { const [data, setData] = useState(initialData); const [resolvedSchema, setSchema] = useState(); useEffect(() => { - $RefParser.dereference(mySchemaWithReferences).then(res => setSchema(res.$schema)); + $RefParser + .dereference(mySchemaWithReferences) + .then((res) => setSchema(res.$schema)); // or - JsonRefs.resolveRefs(mySchemaWithReferences).then(res => setSchema(res.resolved)); - },[]); + JsonRefs.resolveRefs(mySchemaWithReferences).then((res) => + setSchema(res.resolved) + ); + }, []); - if(resolvedSchema === undefined) { - return
Loading...
+ if (resolvedSchema === undefined) { + return
Loading...
; } return ( @@ -143,12 +158,12 @@ export const schema = { type: 'object', properties: { name: { - type: 'string' - } + type: 'string', + }, }, - required: ['name'] + required: ['name'], }; -export const data = {name: 'Send email to Adrian'}; +export const data = { name: 'Send email to Adrian' }; @Component({ selector: 'app-root', @@ -160,7 +175,7 @@ export const data = {name: 'Send email to Adrian'}; [renderers]="renderers" (dataChange)="onDataChange($event)" > - ` + `, }) export class AppComponent { readonly renderers = angularMaterialRenderers; @@ -201,15 +216,12 @@ All current Redux functionally can also be achieved with the standalone version. Previously the store was initialized like this: ```ts -const store = createStore( - combineReducers({ jsonforms: jsonformsReducer() }), - { - jsonforms: { - cells: materialCells, - renderers: materialRenderers - } - } -); +const store = createStore(combineReducers({ jsonforms: jsonformsReducer() }), { + jsonforms: { + cells: materialCells, + renderers: materialRenderers, + }, +}); store.dispatch(Actions.init(data, schema, uischema)); return ( @@ -250,7 +262,7 @@ Within the standalone version, the renderer can just be provided to the ` ( @@ -259,7 +271,6 @@ const MyApp = () => ( renderers={renderers} /> ); - ``` ##### Example 3: Listen to data and validation changes @@ -286,7 +297,10 @@ If you want to keep using the Redux variant of JSON Forms for now (which is not The new imports are available at `@jsonforms/react/lib/redux`, i.e. ```ts -import { jsonformsReducer, JsonFormsReduxProvider } from '@jsonforms/react/lib/redux'; +import { + jsonformsReducer, + JsonFormsReduxProvider, +} from '@jsonforms/react/lib/redux'; ``` ## Migrating from JSON Forms 1.x (AngularJS 1.x) @@ -298,8 +312,8 @@ The complexity of the migration of an existing JSON Forms 1.x application, which There are two big changes between JSON Forms 1 and JSON Forms 2 you need to understand when migrating your existing application. 1. JSON Forms 2.x does not rely on any specific UI framework [or library]. - The `2.0.0` initial release featured renderers based on [React](https://reactjs.org). - An [Angular](https://angular.io) based renderer set was released with `2.1.0`. + The `2.0.0` initial release featured renderers based on [React](https://reactjs.org). + An [Angular](https://angular.io) based renderer set was released with `2.1.0`. 2. Since JSON Forms 2.x maintains its internal state via [redux](https://redux.js.org/), you will need to add it as a dependency to your application. @@ -314,20 +328,20 @@ Instead of: ```ts const uischema = { - type: 'Control', - scope: { - $ref: '#/properties/name' - } -} + type: 'Control', + scope: { + $ref: '#/properties/name', + }, +}; ``` simply write: ```ts const uischema = { - type: 'Control', - scope: '#/properties/name' -} + type: 'Control', + scope: '#/properties/name', +}; ``` Otherwise the UI schema remains unchanged and works like in JSON Forms 1.x. diff --git a/README.md b/README.md index 36cb2cb4e..6923a41de 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # JSON Forms - More Forms. Less Code -*Complex forms in the blink of an eye* +_Complex forms in the blink of an eye_ ## Documentation @@ -32,28 +32,28 @@ In addition, EclipseSource also offers [professional support](https://jsonforms. ### First time setup -* Install [node.js](https://nodejs.org/) (only Node 14 and npm 6 is currently supported) -* Clone this repository -* Install dependencies: `npm ci` -* Hook up dependencies between packages: `npm run init` +- Install [node.js](https://nodejs.org/) (only Node 14 and npm 6 is currently supported) +- Clone this repository +- Install dependencies: `npm ci` +- Hook up dependencies between packages: `npm run init` ### VS Code dev container As an alternative to the first time setup, you can use the provided [VS Code dev container](https://code.visualstudio.com/docs/remote/containers) configured in [devcontainer.json](.devcontainer/devcontainer.json). -* Execute command: `Remote Containers: Reopen in container` -* Wait until the container is built and loaded -* First time setup and an initial build of all packages has been executed in the container +- Execute command: `Remote Containers: Reopen in container` +- Wait until the container is built and loaded +- First time setup and an initial build of all packages has been executed in the container ### Build & Testing -* Build (all packages): `npm run build` -* Test (all packages): `npm run test` -* Clean (delete `dist` folder of all packages): `npm run clean` -* Run React Vanilla examples: `cd packages/vanilla && npm run dev` -* Run React Material examples: `cd packages/material && npm run dev` -* Run Angular Material examples: `cd packages/angular-material && npm run dev` -* Run Vue Vanilla dev setup: `cd packages/vue/vue-vanilla && npm run serve` +- Build (all packages): `npm run build` +- Test (all packages): `npm run test` +- Clean (delete `dist` folder of all packages): `npm run clean` +- Run React Vanilla examples: `cd packages/vanilla && npm run dev` +- Run React Material examples: `cd packages/material && npm run dev` +- Run Angular Material examples: `cd packages/angular-material && npm run dev` +- Run Vue Vanilla dev setup: `cd packages/vue/vue-vanilla && npm run serve` ### Dependency & Release management diff --git a/ROADMAP.md b/ROADMAP.md index 916d7eccc..f58e51c5b 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -3,8 +3,10 @@ This roadmap defines our current view on how we will continue with the development of JSON Forms on a very coarse-grained level and is subject to change at any time: H1/2023 - * Improve developer tooling - * Improve release process to allow for more and less effort releases + +- Improve developer tooling +- Improve release process to allow for more and less effort releases H2/2023 - * Improve adopter experience + +- Improve adopter experience diff --git a/lerna.json b/lerna.json index b30a9f999..4eadf9103 100644 --- a/lerna.json +++ b/lerna.json @@ -1,14 +1,5 @@ { - "packages": [ - "packages/*", - "packages/vue/*", - "packages/vue2/*" - ], + "packages": ["packages/*", "packages/vue/*", "packages/vue2/*"], "version": "3.1.0-alpha.1", - "nohoist": [ - "core-js", - "vue", - "rollup-plugin-vue", - "@vue/test-utils" - ] + "nohoist": ["core-js", "vue", "rollup-plugin-vue", "@vue/test-utils"] } diff --git a/packages/angular-material/.prettierrc.js b/packages/angular-material/.prettierrc.js index 6391982a0..2c26853c4 100644 --- a/packages/angular-material/.prettierrc.js +++ b/packages/angular-material/.prettierrc.js @@ -3,4 +3,4 @@ module.exports = { singleQuote: true, jsxSingleQuote: true, endOfLine: 'auto', -} \ No newline at end of file +}; diff --git a/packages/angular-material/README.md b/packages/angular-material/README.md index 817807d30..c8ab6e12a 100644 --- a/packages/angular-material/README.md +++ b/packages/angular-material/README.md @@ -1,6 +1,6 @@ # JSON Forms - More Forms. Less Code -*Complex forms in the blink of an eye* +_Complex forms in the blink of an eye_ JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript. @@ -25,11 +25,11 @@ Use the `json-forms` component for each form you want to render and hand over th Example component file `app.component.ts`: ```ts -import { Component } from "@angular/core"; -import { angularMaterialRenderers } from "@jsonforms/angular-material"; +import { Component } from '@angular/core'; +import { angularMaterialRenderers } from '@jsonforms/angular-material'; @Component({ - selector: "app-root", + selector: 'app-root', template: ` + - - - JSON Forms Angular Material RendererSet - - - - - - - - - - + + + JSON Forms Angular Material RendererSet + + + + + + + + + + \ No newline at end of file +--> diff --git a/packages/angular-material/example/index.html b/packages/angular-material/example/index.html index 780779fd7..7eb9fa2b8 100644 --- a/packages/angular-material/example/index.html +++ b/packages/angular-material/example/index.html @@ -1,25 +1,31 @@ - + - - - Tour of Heroes - + + + Tour of Heroes + - - - - - - - - - - + + + + + + + + + + \ No newline at end of file +--> diff --git a/packages/angular-material/rollup.example.config.js b/packages/angular-material/rollup.example.config.js index 8869b27b6..7d0495919 100644 --- a/packages/angular-material/rollup.example.config.js +++ b/packages/angular-material/rollup.example.config.js @@ -8,13 +8,13 @@ import typescript from 'rollup-plugin-typescript2'; /** * @type {import('rollup').RollupOptions} -*/ + */ const config = { input: 'example/main.ts', output: { file: 'example/dist/bundle.js', format: 'iife', - sourcemap: true + sourcemap: true, }, plugins: [ replace({ @@ -30,23 +30,24 @@ const config = { tsconfigOverride: { compilerOptions: { // Do not emit typescript declarations for our bundled example app - declaration: false - } - }}), + declaration: false, + }, + }, + }), copy({ targets: [ { src: '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css', - dest: 'example/dist' + dest: 'example/dist', }, { src: 'example/index.bundled.html', dest: 'example/dist', - rename: () => 'index.html' - } - ] + rename: () => 'index.html', + }, + ], }), - ] -} + ], +}; -export default config; \ No newline at end of file +export default config; diff --git a/packages/angular-material/test-config/karma-test-shim.js b/packages/angular-material/test-config/karma-test-shim.js index cb0112587..de240f3e5 100755 --- a/packages/angular-material/test-config/karma-test-shim.js +++ b/packages/angular-material/test-config/karma-test-shim.js @@ -18,4 +18,7 @@ appContext.keys().forEach(appContext); var testing = require('@angular/core/testing'); var browser = require('@angular/platform-browser-dynamic/testing'); -testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting()); +testing.TestBed.initTestEnvironment( + browser.BrowserDynamicTestingModule, + browser.platformBrowserDynamicTesting() +); diff --git a/packages/angular-material/test-config/karma.conf.js b/packages/angular-material/test-config/karma.conf.js index 7ef05799f..7cecf6925 100755 --- a/packages/angular-material/test-config/karma.conf.js +++ b/packages/angular-material/test-config/karma.conf.js @@ -1,6 +1,6 @@ var webpackConfig = require('./webpack.test.js'); -module.exports = function(config) { +module.exports = function (config) { var _config = { basePath: '../', @@ -9,36 +9,38 @@ module.exports = function(config) { files: [ { pattern: './test-config/karma-test-shim.js', - watched: true - } + watched: true, + }, ], preprocessors: { - './test-config/karma-test-shim.js': ['webpack', 'sourcemap'] + './test-config/karma-test-shim.js': ['webpack', 'sourcemap'], }, webpack: webpackConfig, webpackMiddleware: { - stats: 'errors-only' + stats: 'errors-only', }, webpackServer: { - noInfo: true + noInfo: true, }, browserConsoleLogOptions: { level: 'log', format: '%b %T: %m', - terminal: true + terminal: true, }, coverageIstanbulReporter: { - reports: [ 'html', 'lcovonly' ], - fixWebpackSourcePaths: true + reports: ['html', 'lcovonly'], + fixWebpackSourcePaths: true, }, - reporters: config.coverage ? ['kjhtml', 'dots', 'coverage-istanbul'] : ['kjhtml', 'dots'], + reporters: config.coverage + ? ['kjhtml', 'dots', 'coverage-istanbul'] + : ['kjhtml', 'dots'], port: 9876, colors: true, @@ -48,10 +50,10 @@ module.exports = function(config) { customLaunchers: { ChromeHeadlessNoSandbox: { base: 'ChromeHeadless', - flags: ['--no-sandbox'] - } + flags: ['--no-sandbox'], + }, }, - singleRun: false + singleRun: false, }; config.set(_config); diff --git a/packages/angular-material/test-config/protractor.conf.js b/packages/angular-material/test-config/protractor.conf.js index 8a0a7fc2f..9f0daec9a 100644 --- a/packages/angular-material/test-config/protractor.conf.js +++ b/packages/angular-material/test-config/protractor.conf.js @@ -5,11 +5,9 @@ const { SpecReporter } = require('jasmine-spec-reporter'); exports.config = { allScriptsTimeout: 11000, - specs: [ - '../e2e/**/*.e2e-spec.ts' - ], + specs: ['../e2e/**/*.e2e-spec.ts'], capabilities: { - 'browserName': 'chrome' + browserName: 'chrome', }, directConnect: true, baseUrl: 'http://localhost:8100/', @@ -17,12 +15,14 @@ exports.config = { jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, - print: function() {} + print: function () {}, }, onPrepare() { require('ts-node').register({ - project: 'e2e/tsconfig.e2e.json' + project: 'e2e/tsconfig.e2e.json', }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } + jasmine + .getEnv() + .addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + }, }; diff --git a/packages/angular-material/test-config/webpack.test.js b/packages/angular-material/test-config/webpack.test.js index 2ab5a0645..431c39eb7 100755 --- a/packages/angular-material/test-config/webpack.test.js +++ b/packages/angular-material/test-config/webpack.test.js @@ -5,7 +5,7 @@ module.exports = { devtool: 'inline-source-map', resolve: { - extensions: ['.ts', '.js'] + extensions: ['.ts', '.js'], }, module: { @@ -16,19 +16,19 @@ module.exports = { options: { plugins: [ '@babel/plugin-proposal-optional-chaining', - '@babel/plugin-proposal-nullish-coalescing-operator' - ] + '@babel/plugin-proposal-nullish-coalescing-operator', + ], }, - exclude: /node_modules/ + exclude: /node_modules/, }, { test: /\.ts$/, loaders: [ { - loader: 'ts-loader' + loader: 'ts-loader', }, - 'angular2-template-loader' - ] + 'angular2-template-loader', + ], }, { test: /.+\.ts$/, @@ -36,18 +36,18 @@ module.exports = { loader: 'istanbul-instrumenter-loader', enforce: 'post', query: { - esModules: true - } + esModules: true, + }, }, { test: /\.html$/, - loader: 'html-loader?attrs=false' + loader: 'html-loader?attrs=false', }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, - loader: 'null-loader' - } - ] + loader: 'null-loader', + }, + ], }, plugins: [ @@ -56,8 +56,8 @@ module.exports = { /(angular(\\|\/)core(\\|\/)@angular)/, root('./src'), // location of your src {} // a map of your routes - ) - ] + ), + ], }; function root(localPath) { diff --git a/packages/angular-material/test/tsconfig.test.json b/packages/angular-material/test/tsconfig.test.json index 46da1c60a..8b6cff6dc 100644 --- a/packages/angular-material/test/tsconfig.test.json +++ b/packages/angular-material/test/tsconfig.test.json @@ -5,14 +5,7 @@ "target": "es6", "inlineSourceMap": true }, - "include": [ - "**/*.ts", - "**/*.tsx" - ], - "exclude":[ - "node_modules" - ], - "files": [ - "../src/index.ts" - ] + "include": ["**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"], + "files": ["../src/index.ts"] } diff --git a/packages/angular-material/tsconfig.cjs.json b/packages/angular-material/tsconfig.cjs.json index b04d624eb..b0c215c3d 100644 --- a/packages/angular-material/tsconfig.cjs.json +++ b/packages/angular-material/tsconfig.cjs.json @@ -5,5 +5,5 @@ "sourceMap": true, "target": "es5", "module": "commonjs" - }, + } } diff --git a/packages/angular-material/webpack/webpack.build.js b/packages/angular-material/webpack/webpack.build.js index 062808dcb..3a676b9a7 100644 --- a/packages/angular-material/webpack/webpack.build.js +++ b/packages/angular-material/webpack/webpack.build.js @@ -2,12 +2,12 @@ const merge = require('webpack-merge'); const baseConfig = require('../../../webpack/webpack.build.base.js'); module.exports = merge(baseConfig, { - output: { - filename: "jsonforms-angular-material.js", - library: "JSONFormsAngularMaterial" - }, - externals: { - '@jsonforms/core': 'JSONFormsCore', - '@jsonforms/angular': 'JSONFormsAngular' - }, -}); \ No newline at end of file + output: { + filename: 'jsonforms-angular-material.js', + library: 'JSONFormsAngularMaterial', + }, + externals: { + '@jsonforms/core': 'JSONFormsCore', + '@jsonforms/angular': 'JSONFormsAngular', + }, +}); diff --git a/packages/angular-material/webpack/webpack.dev.js b/packages/angular-material/webpack/webpack.dev.js index b0d25d9bd..6189cdcc7 100644 --- a/packages/angular-material/webpack/webpack.dev.js +++ b/packages/angular-material/webpack/webpack.dev.js @@ -1,37 +1,45 @@ var webpack = require('webpack'); -const path = require("path"); +const path = require('path'); const merge = require('webpack-merge'); -var copyWebpackPlugin = require("copy-webpack-plugin"); +var copyWebpackPlugin = require('copy-webpack-plugin'); const baseConfig = require('../../../webpack/webpack.base.js'); module.exports = merge(baseConfig, { - entry: [ - 'webpack-dev-server/client?http://localhost:8080', - 'webpack/hot/dev-server', - './example/main.ts' - ], - output: { - publicPath: "/assets/", - filename: "bundle.js" - }, + entry: [ + 'webpack-dev-server/client?http://localhost:8080', + 'webpack/hot/dev-server', + './example/main.ts', + ], + output: { + publicPath: '/assets/', + filename: 'bundle.js', + }, - devServer: { - contentBase: './example' - }, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - new copyWebpackPlugin([ - { from: '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css' } - ]) - + devServer: { + contentBase: './example', + }, + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new copyWebpackPlugin([ + { + from: '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css', + }, + ]), + ], + module: { + rules: [ + { + test: /\.html$/, + exclude: /node_modules/, + loader: 'html-loader?exportAsEs6Default', + }, + ], + }, + resolve: { + // manually link to angular path in case of dev + modules: [ + path.resolve(__dirname, '../../angular/node_modules'), + 'node_modules', ], - module: { - rules: [ - { test: /\.html$/, exclude: /node_modules/, loader: 'html-loader?exportAsEs6Default'} - ] - }, - resolve: { - // manually link to angular path in case of dev - modules: [path.resolve(__dirname, "../../angular/node_modules"), "node_modules"] - } -}); \ No newline at end of file + }, +}); diff --git a/packages/angular-test/.prettierrc.js b/packages/angular-test/.prettierrc.js index 6391982a0..2c26853c4 100644 --- a/packages/angular-test/.prettierrc.js +++ b/packages/angular-test/.prettierrc.js @@ -3,4 +3,4 @@ module.exports = { singleQuote: true, jsxSingleQuote: true, endOfLine: 'auto', -} \ No newline at end of file +}; diff --git a/packages/angular-test/tsconfig.json b/packages/angular-test/tsconfig.json index 5c9f3f825..9af7ef8c9 100644 --- a/packages/angular-test/tsconfig.json +++ b/packages/angular-test/tsconfig.json @@ -4,10 +4,6 @@ "outDir": "./lib", "sourceMap": true }, - "exclude":[ - "node_modules" - ], - "files": [ - "./src/index.ts" - ] + "exclude": ["node_modules"], + "files": ["./src/index.ts"] } diff --git a/packages/angular/.prettierrc.js b/packages/angular/.prettierrc.js index 6391982a0..2c26853c4 100644 --- a/packages/angular/.prettierrc.js +++ b/packages/angular/.prettierrc.js @@ -3,4 +3,4 @@ module.exports = { singleQuote: true, jsxSingleQuote: true, endOfLine: 'auto', -} \ No newline at end of file +}; diff --git a/packages/angular/README.md b/packages/angular/README.md index 1afb1bf33..c71fe53c9 100644 --- a/packages/angular/README.md +++ b/packages/angular/README.md @@ -1,6 +1,6 @@ # JSON Forms - More Forms. Less Code -*Complex forms in the blink of an eye* +_Complex forms in the blink of an eye_ JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript. @@ -20,30 +20,30 @@ Use the `JsonForms` component to render a form for your data. Mandatory props: -* `data: any` - the data to show -* `renderers: JsonFormsRendererRegistryEntry[]` - the Angular renderer set to use +- `data: any` - the data to show +- `renderers: JsonFormsRendererRegistryEntry[]` - the Angular renderer set to use Optional props: -* `schema: JsonSchema` - the data schema for the given data. Will be generated when not given. -* `uischema: UISchemaElement` - the UI schema for the given data schema. Will be generated when not given. -* `config: any` - form-wide options. May contain default ui schema options. -* `readonly: boolean` - whether all controls shall be readonly. -* `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching -* `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form -* `ajv: AJV` - custom Ajv instance for the form -* `locale` - string, for example for formatting numbers -* `dataChange` - event emitter which is called on each data change, containing the updated data and the validation result. -* `errors` - event emitter which is called with all validations errors. +- `schema: JsonSchema` - the data schema for the given data. Will be generated when not given. +- `uischema: UISchemaElement` - the UI schema for the given data schema. Will be generated when not given. +- `config: any` - form-wide options. May contain default ui schema options. +- `readonly: boolean` - whether all controls shall be readonly. +- `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching +- `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form +- `ajv: AJV` - custom Ajv instance for the form +- `locale` - string, for example for formatting numbers +- `dataChange` - event emitter which is called on each data change, containing the updated data and the validation result. +- `errors` - event emitter which is called with all validations errors. Example component file `app.component.ts`: ```ts -import { Component } from "@angular/core"; -import { angularMaterialRenderers } from "@jsonforms/angular-material"; +import { Component } from '@angular/core'; +import { angularMaterialRenderers } from '@jsonforms/angular-material'; @Component({ - selector: "app-root", + selector: 'app-root', template: ` + + + + JSON Forms Examples + + - - - JSON Forms Examples - - - - -

JSON Forms Examples

- - - \ No newline at end of file + +

JSON Forms Examples

+ + + diff --git a/packages/examples-app/prepare-examples-app.js b/packages/examples-app/prepare-examples-app.js index 3db3b1ed8..22d2cacc2 100644 --- a/packages/examples-app/prepare-examples-app.js +++ b/packages/examples-app/prepare-examples-app.js @@ -14,8 +14,8 @@ const examples = { 'react-vanilla': join(packagesDir, 'vanilla-renderers', 'example', 'dist'), 'react-material': join(packagesDir, 'material-renderers', 'example', 'dist'), 'angular-material': join(packagesDir, 'angular-material', 'example', 'dist'), - 'vue-vanilla': join(packagesDir, 'vue', 'vue-vanilla', 'example', 'dist') -} + 'vue-vanilla': join(packagesDir, 'vue', 'vue-vanilla', 'example', 'dist'), +}; // Clean and recreate dist dir console.log('Clean and recreate dist dir...'); @@ -26,7 +26,7 @@ mkdirSync(distDir, { recursive: true }); console.log('Copy index.html...'); console.log('Copy example apps...'); copyFileSync(join(__dirname, 'index.html'), join(distDir, 'index.html')); -Object.keys(examples).forEach(key => { +Object.keys(examples).forEach((key) => { console.log(`Copying example ${key}...`); const path = examples[key]; copySync(path, join(distDir, key)); diff --git a/packages/examples-react/.prettierrc.js b/packages/examples-react/.prettierrc.js index 6391982a0..2c26853c4 100644 --- a/packages/examples-react/.prettierrc.js +++ b/packages/examples-react/.prettierrc.js @@ -3,4 +3,4 @@ module.exports = { singleQuote: true, jsxSingleQuote: true, endOfLine: 'auto', -} \ No newline at end of file +}; diff --git a/packages/examples-react/public/index.html b/packages/examples-react/public/index.html index ed0ebafa1..29aba544c 100644 --- a/packages/examples-react/public/index.html +++ b/packages/examples-react/public/index.html @@ -1,15 +1,18 @@ - - - + + + - - + +