From 4317fd68ca94b27fe3925860357c9310addf6918 Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Wed, 22 Jan 2025 13:55:16 +0400 Subject: [PATCH 01/10] add angular csp --- angular/designer/angular.json | 4 +++- angular/designer/src/app/app.component.ts | 2 +- angular/designer/src/index.html | 7 +++++++ angular/designer/src/knockout_global.js | 8 ++++++++ angular/viewer/angular.json | 4 ++-- angular/viewer/src/app/app.component.ts | 2 +- angular/viewer/src/index.html | 7 +++++++ 7 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 angular/designer/src/knockout_global.js diff --git a/angular/designer/angular.json b/angular/designer/angular.json index d637b7a..6d7ba14 100644 --- a/angular/designer/angular.json +++ b/angular/designer/angular.json @@ -29,7 +29,9 @@ "styles": [ "src/styles.css" ], - "scripts": [] + "scripts": [ + "src/knockout_global.js" + ] }, "configurations": { "production": { diff --git a/angular/designer/src/app/app.component.ts b/angular/designer/src/app/app.component.ts index d0a48cb..f1ed4c8 100644 --- a/angular/designer/src/app/app.component.ts +++ b/angular/designer/src/app/app.component.ts @@ -31,5 +31,5 @@ export class AppComponent { // The report name. reportName = "TestReport"; // The backend application URL. - host = 'https://localhost:5001/'; + host = 'http://localhost:5000/'; } diff --git a/angular/designer/src/index.html b/angular/designer/src/index.html index f9fbce0..66bb647 100644 --- a/angular/designer/src/index.html +++ b/angular/designer/src/index.html @@ -5,6 +5,13 @@ Designer + diff --git a/angular/designer/src/knockout_global.js b/angular/designer/src/knockout_global.js new file mode 100644 index 0000000..1014fa3 --- /dev/null +++ b/angular/designer/src/knockout_global.js @@ -0,0 +1,8 @@ +(function () { + window.eval = function (p) { + if (p !== "this") { + throw new Error("Invalid argument for eval. Only 'this' is allowed."); + } + return window; + }; +})(); \ No newline at end of file diff --git a/angular/viewer/angular.json b/angular/viewer/angular.json index 088d8d1..0d47f90 100644 --- a/angular/viewer/angular.json +++ b/angular/viewer/angular.json @@ -11,11 +11,11 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:application", + "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/viewer", "index": "src/index.html", - "browser": "src/main.ts", + "main": "src/main.ts", "polyfills": [ "zone.js" ], diff --git a/angular/viewer/src/app/app.component.ts b/angular/viewer/src/app/app.component.ts index 82c259e..a75fa56 100644 --- a/angular/viewer/src/app/app.component.ts +++ b/angular/viewer/src/app/app.component.ts @@ -21,6 +21,6 @@ import { DxReportViewerModule } from 'devexpress-reporting-angular'; export class AppComponent { title = 'DXReportViewerSample'; reportUrl: string = 'TestReport'; - hostUrl: string = 'https://localhost:5001/'; + hostUrl: string = 'http://localhost:5000/'; invokeAction: string = '/DXXRDV'; } diff --git a/angular/viewer/src/index.html b/angular/viewer/src/index.html index b9eda8c..c181a20 100644 --- a/angular/viewer/src/index.html +++ b/angular/viewer/src/index.html @@ -5,6 +5,13 @@ Viewer + From 68820ac073c4ff41aae6d4435fcb9712ff5fc019 Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Wed, 22 Jan 2025 14:04:40 +0400 Subject: [PATCH 02/10] add launchSettings file --- ServerApp/Properties/launchSettings.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 ServerApp/Properties/launchSettings.json diff --git a/ServerApp/Properties/launchSettings.json b/ServerApp/Properties/launchSettings.json new file mode 100644 index 0000000..861317c --- /dev/null +++ b/ServerApp/Properties/launchSettings.json @@ -0,0 +1,12 @@ +{ + "profiles": { + "ServerApp.Server": { + "commandName": "Project", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + }, + "applicationUrl": "http://localhost:5000" + } + } +} \ No newline at end of file From 38dbb5a835c6ad6360597f0ecdcb736ea7b5959a Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Wed, 22 Jan 2025 14:04:57 +0400 Subject: [PATCH 03/10] update gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index a5aba93..03b4076 100644 --- a/.gitignore +++ b/.gitignore @@ -49,7 +49,6 @@ BenchmarkDotNet.Artifacts/ project.lock.json project.fragment.lock.json artifacts/ -**/Properties/launchSettings.json *_i.c *_p.c From e5366c54edb8d95e8cc4a26a1ed0254a44d9ba69 Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Wed, 22 Jan 2025 14:27:52 +0400 Subject: [PATCH 04/10] add vue csp --- vue/designer/public/index.html | 7 +++++++ vue/designer/src/components/ReportDesignerComponent.vue | 2 +- vue/designer/vue.config.js | 7 +++++-- vue/viewer/public/index.html | 7 +++++++ vue/viewer/src/components/WebDocumentViewer.vue | 2 +- vue/viewer/vue.config.js | 5 ++++- 6 files changed, 25 insertions(+), 5 deletions(-) diff --git a/vue/designer/public/index.html b/vue/designer/public/index.html index 3e5a139..cad1386 100644 --- a/vue/designer/public/index.html +++ b/vue/designer/public/index.html @@ -4,6 +4,13 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/vue/designer/src/components/ReportDesignerComponent.vue b/vue/designer/src/components/ReportDesignerComponent.vue index 1a428d0..748a472 100644 --- a/vue/designer/src/components/ReportDesignerComponent.vue +++ b/vue/designer/src/components/ReportDesignerComponent.vue @@ -12,7 +12,7 @@ mounted() { var designerOptions = { reportUrl: ko.observable("TestReport"), requestOptions: { - host: "https://localhost:5001/", + host: "http://localhost:5000/", getDesignerModelAction: "DXXRD/GetDesignerModel" } }; diff --git a/vue/designer/vue.config.js b/vue/designer/vue.config.js index 910e297..01928e8 100644 --- a/vue/designer/vue.config.js +++ b/vue/designer/vue.config.js @@ -1,4 +1,7 @@ const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ - transpileDependencies: true -}) + transpileDependencies: true, + configureWebpack: { + devtool: 'source-map', + } +}) \ No newline at end of file diff --git a/vue/viewer/public/index.html b/vue/viewer/public/index.html index 3e5a139..e4b82ff 100644 --- a/vue/viewer/public/index.html +++ b/vue/viewer/public/index.html @@ -5,6 +5,13 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/vue/viewer/src/components/WebDocumentViewer.vue b/vue/viewer/src/components/WebDocumentViewer.vue index 3dc8402..9202e8e 100644 --- a/vue/viewer/src/components/WebDocumentViewer.vue +++ b/vue/viewer/src/components/WebDocumentViewer.vue @@ -13,7 +13,7 @@ const reportUrl = ko.observable("TestReport"); const viewerRef = this.$refs.viewer; const requestOptions = { - host: " https://localhost:5001/", + host: " http://localhost:5000/", invokeAction: "DXXRDV" }; const viewer = new DxReportViewer(viewerRef, { diff --git a/vue/viewer/vue.config.js b/vue/viewer/vue.config.js index 910e297..67e6ba2 100644 --- a/vue/viewer/vue.config.js +++ b/vue/viewer/vue.config.js @@ -1,4 +1,7 @@ const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ - transpileDependencies: true + transpileDependencies: true, + configureWebpack: { + devtool: 'source-map', + } }) From 6c99f3bee3ed79958e2c20f39d8ca637d5ce1234 Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Wed, 22 Jan 2025 15:14:12 +0400 Subject: [PATCH 05/10] update vite projects --- react/vite/designer/README.md | 44 ++++++++++++++++++- react/vite/designer/eslint.config.js | 20 +++------ react/vite/designer/index.html | 4 +- react/vite/designer/package.json | 5 ++- react/vite/designer/src/{App.jsx => App.tsx} | 2 +- .../vite/designer/src/{main.jsx => main.tsx} | 4 +- react/vite/designer/src/vite-env.d.ts | 1 + react/vite/designer/tsconfig.app.json | 26 +++++++++++ react/vite/designer/tsconfig.json | 7 +++ react/vite/designer/tsconfig.node.json | 24 ++++++++++ .../{vite.config.js => vite.config.ts} | 0 react/vite/viewer/README.md | 44 ++++++++++++++++++- react/vite/viewer/eslint.config.js | 20 +++------ react/vite/viewer/index.html | 4 +- react/vite/viewer/package.json | 5 ++- react/vite/viewer/src/{App.jsx => App.tsx} | 2 +- react/vite/viewer/src/{main.jsx => main.tsx} | 4 +- react/vite/viewer/src/vite-env.d.ts | 1 + react/vite/viewer/tsconfig.app.json | 26 +++++++++++ react/vite/viewer/tsconfig.json | 7 +++ react/vite/viewer/tsconfig.node.json | 24 ++++++++++ .../viewer/{vite.config.js => vite.config.ts} | 0 22 files changed, 228 insertions(+), 46 deletions(-) rename react/vite/designer/src/{App.jsx => App.tsx} (87%) rename react/vite/designer/src/{main.jsx => main.tsx} (61%) create mode 100644 react/vite/designer/src/vite-env.d.ts create mode 100644 react/vite/designer/tsconfig.app.json create mode 100644 react/vite/designer/tsconfig.json create mode 100644 react/vite/designer/tsconfig.node.json rename react/vite/designer/{vite.config.js => vite.config.ts} (100%) rename react/vite/viewer/src/{App.jsx => App.tsx} (85%) rename react/vite/viewer/src/{main.jsx => main.tsx} (61%) create mode 100644 react/vite/viewer/src/vite-env.d.ts create mode 100644 react/vite/viewer/tsconfig.app.json create mode 100644 react/vite/viewer/tsconfig.json create mode 100644 react/vite/viewer/tsconfig.node.json rename react/vite/viewer/{vite.config.js => vite.config.ts} (100%) diff --git a/react/vite/designer/README.md b/react/vite/designer/README.md index f768e33..74872fd 100644 --- a/react/vite/designer/README.md +++ b/react/vite/designer/README.md @@ -1,4 +1,4 @@ -# React + Vite +# React + TypeScript + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. @@ -6,3 +6,45 @@ Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js +export default tseslint.config({ + languageOptions: { + // other options... + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + }, +}) +``` + +- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` +- Optionally add `...tseslint.configs.stylisticTypeChecked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: + +```js +// eslint.config.js +import react from 'eslint-plugin-react' + +export default tseslint.config({ + // Set the react version + settings: { react: { version: '18.3' } }, + plugins: { + // Add the react plugin + react, + }, + rules: { + // other rules... + // Enable its recommended rules + ...react.configs.recommended.rules, + ...react.configs['jsx-runtime'].rules, + }, +}) +``` diff --git a/react/vite/designer/eslint.config.js b/react/vite/designer/eslint.config.js index 238d2e4..092408a 100644 --- a/react/vite/designer/eslint.config.js +++ b/react/vite/designer/eslint.config.js @@ -1,38 +1,28 @@ import js from '@eslint/js' import globals from 'globals' -import react from 'eslint-plugin-react' import reactHooks from 'eslint-plugin-react-hooks' import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' -export default [ +export default tseslint.config( { ignores: ['dist'] }, { - files: ['**/*.{js,jsx}'], + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, - parserOptions: { - ecmaVersion: 'latest', - ecmaFeatures: { jsx: true }, - sourceType: 'module', - }, }, - settings: { react: { version: '18.3' } }, plugins: { - react, 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, rules: { - ...js.configs.recommended.rules, - ...react.configs.recommended.rules, - ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, - 'react/jsx-no-target-blank': 'off', 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, }, -] +) diff --git a/react/vite/designer/index.html b/react/vite/designer/index.html index 0c589ec..e4b78ea 100644 --- a/react/vite/designer/index.html +++ b/react/vite/designer/index.html @@ -4,10 +4,10 @@ - Vite + React + Vite + React + TS
- + diff --git a/react/vite/designer/package.json b/react/vite/designer/package.json index e9c7fed..b2b283d 100644 --- a/react/vite/designer/package.json +++ b/react/vite/designer/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vite build", + "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, @@ -20,10 +20,11 @@ "@types/react-dom": "^18.3.5", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.17.0", - "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", + "typescript": "~5.6.2", + "typescript-eslint": "^8.18.2", "vite": "^6.0.5" } } diff --git a/react/vite/designer/src/App.jsx b/react/vite/designer/src/App.tsx similarity index 87% rename from react/vite/designer/src/App.jsx rename to react/vite/designer/src/App.tsx index 54d0157..25fc776 100644 --- a/react/vite/designer/src/App.jsx +++ b/react/vite/designer/src/App.tsx @@ -13,7 +13,7 @@ function App() { return ( - + ) } diff --git a/react/vite/designer/src/main.jsx b/react/vite/designer/src/main.tsx similarity index 61% rename from react/vite/designer/src/main.jsx rename to react/vite/designer/src/main.tsx index 3d9da8a..4aff025 100644 --- a/react/vite/designer/src/main.jsx +++ b/react/vite/designer/src/main.tsx @@ -1,8 +1,8 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import App from './App.jsx' +import App from './App.tsx' -createRoot(document.getElementById('root')).render( +createRoot(document.getElementById('root')!).render( , diff --git a/react/vite/designer/src/vite-env.d.ts b/react/vite/designer/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/react/vite/designer/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/react/vite/designer/tsconfig.app.json b/react/vite/designer/tsconfig.app.json new file mode 100644 index 0000000..358ca9b --- /dev/null +++ b/react/vite/designer/tsconfig.app.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/react/vite/designer/tsconfig.json b/react/vite/designer/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/react/vite/designer/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/react/vite/designer/tsconfig.node.json b/react/vite/designer/tsconfig.node.json new file mode 100644 index 0000000..db0becc --- /dev/null +++ b/react/vite/designer/tsconfig.node.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/react/vite/designer/vite.config.js b/react/vite/designer/vite.config.ts similarity index 100% rename from react/vite/designer/vite.config.js rename to react/vite/designer/vite.config.ts diff --git a/react/vite/viewer/README.md b/react/vite/viewer/README.md index f768e33..74872fd 100644 --- a/react/vite/viewer/README.md +++ b/react/vite/viewer/README.md @@ -1,4 +1,4 @@ -# React + Vite +# React + TypeScript + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. @@ -6,3 +6,45 @@ Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js +export default tseslint.config({ + languageOptions: { + // other options... + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + }, +}) +``` + +- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` +- Optionally add `...tseslint.configs.stylisticTypeChecked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: + +```js +// eslint.config.js +import react from 'eslint-plugin-react' + +export default tseslint.config({ + // Set the react version + settings: { react: { version: '18.3' } }, + plugins: { + // Add the react plugin + react, + }, + rules: { + // other rules... + // Enable its recommended rules + ...react.configs.recommended.rules, + ...react.configs['jsx-runtime'].rules, + }, +}) +``` diff --git a/react/vite/viewer/eslint.config.js b/react/vite/viewer/eslint.config.js index 238d2e4..092408a 100644 --- a/react/vite/viewer/eslint.config.js +++ b/react/vite/viewer/eslint.config.js @@ -1,38 +1,28 @@ import js from '@eslint/js' import globals from 'globals' -import react from 'eslint-plugin-react' import reactHooks from 'eslint-plugin-react-hooks' import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' -export default [ +export default tseslint.config( { ignores: ['dist'] }, { - files: ['**/*.{js,jsx}'], + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, - parserOptions: { - ecmaVersion: 'latest', - ecmaFeatures: { jsx: true }, - sourceType: 'module', - }, }, - settings: { react: { version: '18.3' } }, plugins: { - react, 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, rules: { - ...js.configs.recommended.rules, - ...react.configs.recommended.rules, - ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, - 'react/jsx-no-target-blank': 'off', 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, }, -] +) diff --git a/react/vite/viewer/index.html b/react/vite/viewer/index.html index 0c589ec..e4b78ea 100644 --- a/react/vite/viewer/index.html +++ b/react/vite/viewer/index.html @@ -4,10 +4,10 @@ - Vite + React + Vite + React + TS
- + diff --git a/react/vite/viewer/package.json b/react/vite/viewer/package.json index 16a4e73..9e3184d 100644 --- a/react/vite/viewer/package.json +++ b/react/vite/viewer/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vite build", + "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, @@ -20,10 +20,11 @@ "@types/react-dom": "^18.3.5", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.17.0", - "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", + "typescript": "~5.6.2", + "typescript-eslint": "^8.18.2", "vite": "^6.0.5" } } diff --git a/react/vite/viewer/src/App.jsx b/react/vite/viewer/src/App.tsx similarity index 85% rename from react/vite/viewer/src/App.jsx rename to react/vite/viewer/src/App.tsx index bb9812b..5e81b7f 100644 --- a/react/vite/viewer/src/App.jsx +++ b/react/vite/viewer/src/App.tsx @@ -8,7 +8,7 @@ function App() { return ( - + ) } diff --git a/react/vite/viewer/src/main.jsx b/react/vite/viewer/src/main.tsx similarity index 61% rename from react/vite/viewer/src/main.jsx rename to react/vite/viewer/src/main.tsx index 3d9da8a..4aff025 100644 --- a/react/vite/viewer/src/main.jsx +++ b/react/vite/viewer/src/main.tsx @@ -1,8 +1,8 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import App from './App.jsx' +import App from './App.tsx' -createRoot(document.getElementById('root')).render( +createRoot(document.getElementById('root')!).render( , diff --git a/react/vite/viewer/src/vite-env.d.ts b/react/vite/viewer/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/react/vite/viewer/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/react/vite/viewer/tsconfig.app.json b/react/vite/viewer/tsconfig.app.json new file mode 100644 index 0000000..358ca9b --- /dev/null +++ b/react/vite/viewer/tsconfig.app.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/react/vite/viewer/tsconfig.json b/react/vite/viewer/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/react/vite/viewer/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/react/vite/viewer/tsconfig.node.json b/react/vite/viewer/tsconfig.node.json new file mode 100644 index 0000000..db0becc --- /dev/null +++ b/react/vite/viewer/tsconfig.node.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/react/vite/viewer/vite.config.js b/react/vite/viewer/vite.config.ts similarity index 100% rename from react/vite/viewer/vite.config.js rename to react/vite/viewer/vite.config.ts From 01b90fcd366c9e5555b77a73665b332d9359a52a Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Sun, 23 Feb 2025 15:47:12 +0400 Subject: [PATCH 06/10] update angular --- README.md | 64 +++++++++++++++++++++----- angular/designer/angular.json | 3 ++ angular/designer/src/app/app.config.ts | 13 ++++-- angular/designer/src/index.html | 2 +- angular/viewer/angular.json | 3 ++ angular/viewer/src/app/app.config.ts | 16 +++++-- angular/viewer/src/index.html | 4 +- config.json | 2 +- 8 files changed, 86 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 587a572..79dcd42 100644 --- a/README.md +++ b/README.md @@ -5,23 +5,65 @@ # Product/Platform - Task -This is the repository template for creating new examples. Describe the solved task here. +This repository contains sample Angular, React and Vue projects with integrated Web Document Viewer and Web Report Designer components. -Put a screenshot that illustrates the result here. +## Angular -Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. +The Native Report Viewer and Report Designer are integrated to an Angular project created with Angular CLI. +For more information on CSP in Angular framework, refer to the following documentation article: [Content Security Policy](https://angular.dev/best-practices/security#content-security-policy). -## Files to Review +The following meta tag shows the minimum required CSP for our reporting controls: -- link.cs (VB: link.vb) -- link.js -- ... +```html + +``` -## Documentation +> [!IMPORTANT] +> We are using the placeholder random-nonce-value to denote the nonce in sample projects. You need to generate a random number, unique for each HTTP request. -- link -- link -- ... +### Run the Project + +Run the server application. To do this, run the following command from the *ServerApp* folder: + +```cmd +dotnet run +``` + +To run the client application, run the following commands: + +```cmd +npm install +npm start +``` + +### Files to Review + +**Viewer:** + +- [index.html](/angular/viewer/src/index.html) +- [app.config.ts](/angular/viewer/src/app/app.config.ts) +- [angular.json](/angular/viewer/angular.json) + +**Designer:** + + +- [index.html](/angular/designer/src/index.html) +- [app.config.ts](/angular/designer/src/app/app.config.ts) +- [angular.json](/angular/designer/angular.json) + +### Documentation + +- [Content Security Policy in Angular Apps](https://docs.devexpress.com/XtraReports/404552/web-reporting/angular-reporting/content-security-policy) + +#### Run the Project + +#### Files to Review ## More Examples diff --git a/angular/designer/angular.json b/angular/designer/angular.json index 6d7ba14..b0650fc 100644 --- a/angular/designer/angular.json +++ b/angular/designer/angular.json @@ -94,5 +94,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/angular/designer/src/app/app.config.ts b/angular/designer/src/app/app.config.ts index a1e7d6f..93aa257 100644 --- a/angular/designer/src/app/app.config.ts +++ b/angular/designer/src/app/app.config.ts @@ -1,8 +1,15 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { CSP_NONCE, ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; - import { routes } from './app.routes'; + +// For demonstration purposes only. +// Generate a random number, unique for each HTTP request. +const HARDCODED_NONCE = 'random_nonce_value'; + export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + { provide: CSP_NONCE, useValue: HARDCODED_NONCE }] }; diff --git a/angular/designer/src/index.html b/angular/designer/src/index.html index 66bb647..2b085e2 100644 --- a/angular/designer/src/index.html +++ b/angular/designer/src/index.html @@ -8,7 +8,7 @@ diff --git a/angular/viewer/angular.json b/angular/viewer/angular.json index 0d47f90..c89e931 100644 --- a/angular/viewer/angular.json +++ b/angular/viewer/angular.json @@ -92,5 +92,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/angular/viewer/src/app/app.config.ts b/angular/viewer/src/app/app.config.ts index a1e7d6f..cb9f7c3 100644 --- a/angular/viewer/src/app/app.config.ts +++ b/angular/viewer/src/app/app.config.ts @@ -1,8 +1,18 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { CSP_NONCE, ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; - import { routes } from './app.routes'; +// For demonstration purposes only. +// Generate a random number, unique for each HTTP request. +const HARDCODED_NONCE = 'random_nonce_value'; + export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + { + provide: CSP_NONCE, + useValue: HARDCODED_NONCE + } + ] }; diff --git a/angular/viewer/src/index.html b/angular/viewer/src/index.html index c181a20..c234212 100644 --- a/angular/viewer/src/index.html +++ b/angular/viewer/src/index.html @@ -8,13 +8,13 @@ - + diff --git a/config.json b/config.json index d660d4a..038dbef 100644 --- a/config.json +++ b/config.json @@ -1,4 +1,4 @@ { - "autoGenerateVb": true, + "autoGenerateVb": false, "runOnWeb": false } \ No newline at end of file From 71333ea808861cff3c05bffc7fe31c62364ea31b Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Sun, 23 Feb 2025 17:37:23 +0400 Subject: [PATCH 07/10] update vue part --- vue/vite/designer/.gitignore | 30 ++++++ vue/vite/designer/README.md | 29 ++++++ vue/vite/designer/index.html | 20 ++++ vue/vite/designer/jsconfig.json | 9 ++ vue/vite/designer/package.json | 22 ++++ vue/{ => vite}/designer/public/favicon.ico | Bin vue/vite/designer/src/App.vue | 25 +++++ vue/vite/designer/src/assets/base.css | 86 ++++++++++++++++ vue/vite/designer/src/assets/logo.svg | 1 + vue/vite/designer/src/assets/main.css | 35 +++++++ .../designer/src/components/HelloWorld.vue | 44 ++++++++ .../designer/src/components/TheWelcome.vue | 94 ++++++++++++++++++ .../designer/src/components/WelcomeItem.vue | 87 ++++++++++++++++ .../src/components/icons/IconCommunity.vue | 7 ++ .../components/icons/IconDocumentation.vue | 7 ++ .../src/components/icons/IconEcosystem.vue | 7 ++ .../src/components/icons/IconSupport.vue | 7 ++ .../src/components/icons/IconTooling.vue | 19 ++++ vue/vite/designer/src/knockout_global.js | 8 ++ vue/vite/designer/src/main.js | 13 +++ vue/vite/designer/vite.config.js | 19 ++++ vue/vite/viewer/.gitignore | 30 ++++++ vue/vite/viewer/README.md | 29 ++++++ vue/vite/viewer/index.html | 20 ++++ vue/vite/viewer/jsconfig.json | 8 ++ vue/vite/viewer/package.json | 22 ++++ vue/{ => vite}/viewer/public/favicon.ico | Bin vue/vite/viewer/src/App.vue | 28 ++++++ vue/vite/viewer/src/assets/base.css | 86 ++++++++++++++++ vue/vite/viewer/src/assets/logo.svg | 1 + vue/vite/viewer/src/assets/main.css | 35 +++++++ vue/vite/viewer/src/components/HelloWorld.vue | 44 ++++++++ vue/vite/viewer/src/components/TheWelcome.vue | 94 ++++++++++++++++++ .../viewer/src/components/WelcomeItem.vue | 87 ++++++++++++++++ .../src/components/icons/IconCommunity.vue | 7 ++ .../components/icons/IconDocumentation.vue | 7 ++ .../src/components/icons/IconEcosystem.vue | 7 ++ .../src/components/icons/IconSupport.vue | 7 ++ .../src/components/icons/IconTooling.vue | 19 ++++ vue/vite/viewer/src/main.js | 8 ++ vue/vite/viewer/vite.config.js | 18 ++++ vue/{ => vue-cli}/designer/.gitignore | 0 vue/{ => vue-cli}/designer/README.md | 0 vue/{ => vue-cli}/designer/babel.config.js | 0 vue/{ => vue-cli}/designer/jsconfig.json | 0 vue/{ => vue-cli}/designer/package.json | 6 +- vue/vue-cli/designer/public/favicon.ico | Bin 0 -> 4286 bytes vue/{ => vue-cli}/designer/public/index.html | 0 vue/{ => vue-cli}/designer/src/App.vue | 0 .../designer/src/assets/logo.png | Bin .../designer/src/components/HelloWorld.vue | 0 .../components/ReportDesignerComponent.vue | 0 vue/{ => vue-cli}/designer/src/main.js | 0 vue/{ => vue-cli}/designer/vue.config.js | 0 vue/{ => vue-cli}/viewer/.gitignore | 0 vue/{ => vue-cli}/viewer/README.md | 0 vue/{ => vue-cli}/viewer/babel.config.js | 0 vue/{ => vue-cli}/viewer/jsconfig.json | 0 vue/{ => vue-cli}/viewer/package.json | 6 +- vue/vue-cli/viewer/public/favicon.ico | Bin 0 -> 4286 bytes vue/{ => vue-cli}/viewer/public/index.html | 0 vue/{ => vue-cli}/viewer/src/App.vue | 0 vue/{ => vue-cli}/viewer/src/assets/logo.png | Bin .../viewer/src/components/HelloWorld.vue | 0 .../src/components/WebDocumentViewer.vue | 0 vue/{ => vue-cli}/viewer/src/main.js | 0 vue/{ => vue-cli}/viewer/vue.config.js | 0 67 files changed, 1132 insertions(+), 6 deletions(-) create mode 100644 vue/vite/designer/.gitignore create mode 100644 vue/vite/designer/README.md create mode 100644 vue/vite/designer/index.html create mode 100644 vue/vite/designer/jsconfig.json create mode 100644 vue/vite/designer/package.json rename vue/{ => vite}/designer/public/favicon.ico (100%) create mode 100644 vue/vite/designer/src/App.vue create mode 100644 vue/vite/designer/src/assets/base.css create mode 100644 vue/vite/designer/src/assets/logo.svg create mode 100644 vue/vite/designer/src/assets/main.css create mode 100644 vue/vite/designer/src/components/HelloWorld.vue create mode 100644 vue/vite/designer/src/components/TheWelcome.vue create mode 100644 vue/vite/designer/src/components/WelcomeItem.vue create mode 100644 vue/vite/designer/src/components/icons/IconCommunity.vue create mode 100644 vue/vite/designer/src/components/icons/IconDocumentation.vue create mode 100644 vue/vite/designer/src/components/icons/IconEcosystem.vue create mode 100644 vue/vite/designer/src/components/icons/IconSupport.vue create mode 100644 vue/vite/designer/src/components/icons/IconTooling.vue create mode 100644 vue/vite/designer/src/knockout_global.js create mode 100644 vue/vite/designer/src/main.js create mode 100644 vue/vite/designer/vite.config.js create mode 100644 vue/vite/viewer/.gitignore create mode 100644 vue/vite/viewer/README.md create mode 100644 vue/vite/viewer/index.html create mode 100644 vue/vite/viewer/jsconfig.json create mode 100644 vue/vite/viewer/package.json rename vue/{ => vite}/viewer/public/favicon.ico (100%) create mode 100644 vue/vite/viewer/src/App.vue create mode 100644 vue/vite/viewer/src/assets/base.css create mode 100644 vue/vite/viewer/src/assets/logo.svg create mode 100644 vue/vite/viewer/src/assets/main.css create mode 100644 vue/vite/viewer/src/components/HelloWorld.vue create mode 100644 vue/vite/viewer/src/components/TheWelcome.vue create mode 100644 vue/vite/viewer/src/components/WelcomeItem.vue create mode 100644 vue/vite/viewer/src/components/icons/IconCommunity.vue create mode 100644 vue/vite/viewer/src/components/icons/IconDocumentation.vue create mode 100644 vue/vite/viewer/src/components/icons/IconEcosystem.vue create mode 100644 vue/vite/viewer/src/components/icons/IconSupport.vue create mode 100644 vue/vite/viewer/src/components/icons/IconTooling.vue create mode 100644 vue/vite/viewer/src/main.js create mode 100644 vue/vite/viewer/vite.config.js rename vue/{ => vue-cli}/designer/.gitignore (100%) rename vue/{ => vue-cli}/designer/README.md (100%) rename vue/{ => vue-cli}/designer/babel.config.js (100%) rename vue/{ => vue-cli}/designer/jsconfig.json (100%) rename vue/{ => vue-cli}/designer/package.json (87%) create mode 100644 vue/vue-cli/designer/public/favicon.ico rename vue/{ => vue-cli}/designer/public/index.html (100%) rename vue/{ => vue-cli}/designer/src/App.vue (100%) rename vue/{ => vue-cli}/designer/src/assets/logo.png (100%) rename vue/{ => vue-cli}/designer/src/components/HelloWorld.vue (100%) rename vue/{ => vue-cli}/designer/src/components/ReportDesignerComponent.vue (100%) rename vue/{ => vue-cli}/designer/src/main.js (100%) rename vue/{ => vue-cli}/designer/vue.config.js (100%) rename vue/{ => vue-cli}/viewer/.gitignore (100%) rename vue/{ => vue-cli}/viewer/README.md (100%) rename vue/{ => vue-cli}/viewer/babel.config.js (100%) rename vue/{ => vue-cli}/viewer/jsconfig.json (100%) rename vue/{ => vue-cli}/viewer/package.json (87%) create mode 100644 vue/vue-cli/viewer/public/favicon.ico rename vue/{ => vue-cli}/viewer/public/index.html (100%) rename vue/{ => vue-cli}/viewer/src/App.vue (100%) rename vue/{ => vue-cli}/viewer/src/assets/logo.png (100%) rename vue/{ => vue-cli}/viewer/src/components/HelloWorld.vue (100%) rename vue/{ => vue-cli}/viewer/src/components/WebDocumentViewer.vue (100%) rename vue/{ => vue-cli}/viewer/src/main.js (100%) rename vue/{ => vue-cli}/viewer/vue.config.js (100%) diff --git a/vue/vite/designer/.gitignore b/vue/vite/designer/.gitignore new file mode 100644 index 0000000..8ee54e8 --- /dev/null +++ b/vue/vite/designer/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo diff --git a/vue/vite/designer/README.md b/vue/vite/designer/README.md new file mode 100644 index 0000000..2ec3cc7 --- /dev/null +++ b/vue/vite/designer/README.md @@ -0,0 +1,29 @@ +# designer + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). + +## Customize configuration + +See [Vite Configuration Reference](https://vite.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Compile and Minify for Production + +```sh +npm run build +``` diff --git a/vue/vite/designer/index.html b/vue/vite/designer/index.html new file mode 100644 index 0000000..fb9b5c9 --- /dev/null +++ b/vue/vite/designer/index.html @@ -0,0 +1,20 @@ + + + + + + + + Vite App + + +
+ + + diff --git a/vue/vite/designer/jsconfig.json b/vue/vite/designer/jsconfig.json new file mode 100644 index 0000000..418a8fe --- /dev/null +++ b/vue/vite/designer/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./src/*"], + "knockout": ["./src/knockout_global.js"] + } + }, + "exclude": ["node_modules", "dist"] +} diff --git a/vue/vite/designer/package.json b/vue/vite/designer/package.json new file mode 100644 index 0000000..b26d0bc --- /dev/null +++ b/vue/vite/designer/package.json @@ -0,0 +1,22 @@ +{ + "name": "designer", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@devexpress/analytics-core": "^24.2.3", + "devexpress-reporting": "^24.2.3", + "devextreme": "^24.2.3", + "vue": "^3.5.13" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.2.1", + "vite": "^6.0.11", + "vite-plugin-vue-devtools": "^7.7.0" + } +} diff --git a/vue/designer/public/favicon.ico b/vue/vite/designer/public/favicon.ico similarity index 100% rename from vue/designer/public/favicon.ico rename to vue/vite/designer/public/favicon.ico diff --git a/vue/vite/designer/src/App.vue b/vue/vite/designer/src/App.vue new file mode 100644 index 0000000..ebaf719 --- /dev/null +++ b/vue/vite/designer/src/App.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/vue/vite/designer/src/assets/base.css b/vue/vite/designer/src/assets/base.css new file mode 100644 index 0000000..8816868 --- /dev/null +++ b/vue/vite/designer/src/assets/base.css @@ -0,0 +1,86 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: + color 0.5s, + background-color 0.5s; + line-height: 1.6; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/vue/vite/designer/src/assets/logo.svg b/vue/vite/designer/src/assets/logo.svg new file mode 100644 index 0000000..7565660 --- /dev/null +++ b/vue/vite/designer/src/assets/logo.svg @@ -0,0 +1 @@ + diff --git a/vue/vite/designer/src/assets/main.css b/vue/vite/designer/src/assets/main.css new file mode 100644 index 0000000..36fb845 --- /dev/null +++ b/vue/vite/designer/src/assets/main.css @@ -0,0 +1,35 @@ +@import './base.css'; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; + padding: 3px; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/vue/vite/designer/src/components/HelloWorld.vue b/vue/vite/designer/src/components/HelloWorld.vue new file mode 100644 index 0000000..eff59f1 --- /dev/null +++ b/vue/vite/designer/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/vue/vite/designer/src/components/TheWelcome.vue b/vue/vite/designer/src/components/TheWelcome.vue new file mode 100644 index 0000000..e02c38f --- /dev/null +++ b/vue/vite/designer/src/components/TheWelcome.vue @@ -0,0 +1,94 @@ + + + diff --git a/vue/vite/designer/src/components/WelcomeItem.vue b/vue/vite/designer/src/components/WelcomeItem.vue new file mode 100644 index 0000000..6d7086a --- /dev/null +++ b/vue/vite/designer/src/components/WelcomeItem.vue @@ -0,0 +1,87 @@ + + + diff --git a/vue/vite/designer/src/components/icons/IconCommunity.vue b/vue/vite/designer/src/components/icons/IconCommunity.vue new file mode 100644 index 0000000..2dc8b05 --- /dev/null +++ b/vue/vite/designer/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/designer/src/components/icons/IconDocumentation.vue b/vue/vite/designer/src/components/icons/IconDocumentation.vue new file mode 100644 index 0000000..6d4791c --- /dev/null +++ b/vue/vite/designer/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/designer/src/components/icons/IconEcosystem.vue b/vue/vite/designer/src/components/icons/IconEcosystem.vue new file mode 100644 index 0000000..c3a4f07 --- /dev/null +++ b/vue/vite/designer/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/designer/src/components/icons/IconSupport.vue b/vue/vite/designer/src/components/icons/IconSupport.vue new file mode 100644 index 0000000..7452834 --- /dev/null +++ b/vue/vite/designer/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/designer/src/components/icons/IconTooling.vue b/vue/vite/designer/src/components/icons/IconTooling.vue new file mode 100644 index 0000000..660598d --- /dev/null +++ b/vue/vite/designer/src/components/icons/IconTooling.vue @@ -0,0 +1,19 @@ + + diff --git a/vue/vite/designer/src/knockout_global.js b/vue/vite/designer/src/knockout_global.js new file mode 100644 index 0000000..1014fa3 --- /dev/null +++ b/vue/vite/designer/src/knockout_global.js @@ -0,0 +1,8 @@ +(function () { + window.eval = function (p) { + if (p !== "this") { + throw new Error("Invalid argument for eval. Only 'this' is allowed."); + } + return window; + }; +})(); \ No newline at end of file diff --git a/vue/vite/designer/src/main.js b/vue/vite/designer/src/main.js new file mode 100644 index 0000000..80b1067 --- /dev/null +++ b/vue/vite/designer/src/main.js @@ -0,0 +1,13 @@ +import { createApp } from 'vue' +import App from './App.vue' +import "ace-builds/css/ace.css"; +import "ace-builds/css/theme/dreamweaver.css"; +import "ace-builds/css/theme/ambiance.css"; +import "devextreme/dist/css/dx.light.css"; +import "@devexpress/analytics-core/dist/css/dx-analytics.common.css"; +import "@devexpress/analytics-core/dist/css/dx-analytics.light.css"; +import "@devexpress/analytics-core/dist/css/dx-querybuilder.css"; +import "devexpress-reporting/dist/css/dx-webdocumentviewer.css"; +import "devexpress-reporting/dist/css/dx-reportdesigner.css"; + +createApp(App).mount('#app') diff --git a/vue/vite/designer/vite.config.js b/vue/vite/designer/vite.config.js new file mode 100644 index 0000000..7f309fa --- /dev/null +++ b/vue/vite/designer/vite.config.js @@ -0,0 +1,19 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueDevTools from 'vite-plugin-vue-devtools' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + vueDevTools(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + "knockout": "./src/knockout_global.js" + }, + }, +}) diff --git a/vue/vite/viewer/.gitignore b/vue/vite/viewer/.gitignore new file mode 100644 index 0000000..8ee54e8 --- /dev/null +++ b/vue/vite/viewer/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo diff --git a/vue/vite/viewer/README.md b/vue/vite/viewer/README.md new file mode 100644 index 0000000..f5ffb7e --- /dev/null +++ b/vue/vite/viewer/README.md @@ -0,0 +1,29 @@ +# viewer + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). + +## Customize configuration + +See [Vite Configuration Reference](https://vite.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Compile and Minify for Production + +```sh +npm run build +``` diff --git a/vue/vite/viewer/index.html b/vue/vite/viewer/index.html new file mode 100644 index 0000000..fb9b5c9 --- /dev/null +++ b/vue/vite/viewer/index.html @@ -0,0 +1,20 @@ + + + + + + + + Vite App + + +
+ + + diff --git a/vue/vite/viewer/jsconfig.json b/vue/vite/viewer/jsconfig.json new file mode 100644 index 0000000..5a1f2d2 --- /dev/null +++ b/vue/vite/viewer/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./src/*"] + } + }, + "exclude": ["node_modules", "dist"] +} diff --git a/vue/vite/viewer/package.json b/vue/vite/viewer/package.json new file mode 100644 index 0000000..75d94c7 --- /dev/null +++ b/vue/vite/viewer/package.json @@ -0,0 +1,22 @@ +{ + "name": "viewer", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@devexpress/analytics-core": "^24.2.3", + "devexpress-reporting": "^24.2.3", + "devextreme": "^24.2.3", + "vue": "^3.5.13" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.2.1", + "vite": "^6.0.11", + "vite-plugin-vue-devtools": "^7.7.0" + } +} diff --git a/vue/viewer/public/favicon.ico b/vue/vite/viewer/public/favicon.ico similarity index 100% rename from vue/viewer/public/favicon.ico rename to vue/vite/viewer/public/favicon.ico diff --git a/vue/vite/viewer/src/App.vue b/vue/vite/viewer/src/App.vue new file mode 100644 index 0000000..dd5c026 --- /dev/null +++ b/vue/vite/viewer/src/App.vue @@ -0,0 +1,28 @@ + + \ No newline at end of file diff --git a/vue/vite/viewer/src/assets/base.css b/vue/vite/viewer/src/assets/base.css new file mode 100644 index 0000000..8816868 --- /dev/null +++ b/vue/vite/viewer/src/assets/base.css @@ -0,0 +1,86 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: + color 0.5s, + background-color 0.5s; + line-height: 1.6; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/vue/vite/viewer/src/assets/logo.svg b/vue/vite/viewer/src/assets/logo.svg new file mode 100644 index 0000000..7565660 --- /dev/null +++ b/vue/vite/viewer/src/assets/logo.svg @@ -0,0 +1 @@ + diff --git a/vue/vite/viewer/src/assets/main.css b/vue/vite/viewer/src/assets/main.css new file mode 100644 index 0000000..36fb845 --- /dev/null +++ b/vue/vite/viewer/src/assets/main.css @@ -0,0 +1,35 @@ +@import './base.css'; + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; + padding: 3px; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } +} diff --git a/vue/vite/viewer/src/components/HelloWorld.vue b/vue/vite/viewer/src/components/HelloWorld.vue new file mode 100644 index 0000000..eff59f1 --- /dev/null +++ b/vue/vite/viewer/src/components/HelloWorld.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/vue/vite/viewer/src/components/TheWelcome.vue b/vue/vite/viewer/src/components/TheWelcome.vue new file mode 100644 index 0000000..e02c38f --- /dev/null +++ b/vue/vite/viewer/src/components/TheWelcome.vue @@ -0,0 +1,94 @@ + + + diff --git a/vue/vite/viewer/src/components/WelcomeItem.vue b/vue/vite/viewer/src/components/WelcomeItem.vue new file mode 100644 index 0000000..6d7086a --- /dev/null +++ b/vue/vite/viewer/src/components/WelcomeItem.vue @@ -0,0 +1,87 @@ + + + diff --git a/vue/vite/viewer/src/components/icons/IconCommunity.vue b/vue/vite/viewer/src/components/icons/IconCommunity.vue new file mode 100644 index 0000000..2dc8b05 --- /dev/null +++ b/vue/vite/viewer/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/viewer/src/components/icons/IconDocumentation.vue b/vue/vite/viewer/src/components/icons/IconDocumentation.vue new file mode 100644 index 0000000..6d4791c --- /dev/null +++ b/vue/vite/viewer/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/viewer/src/components/icons/IconEcosystem.vue b/vue/vite/viewer/src/components/icons/IconEcosystem.vue new file mode 100644 index 0000000..c3a4f07 --- /dev/null +++ b/vue/vite/viewer/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/viewer/src/components/icons/IconSupport.vue b/vue/vite/viewer/src/components/icons/IconSupport.vue new file mode 100644 index 0000000..7452834 --- /dev/null +++ b/vue/vite/viewer/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/vue/vite/viewer/src/components/icons/IconTooling.vue b/vue/vite/viewer/src/components/icons/IconTooling.vue new file mode 100644 index 0000000..660598d --- /dev/null +++ b/vue/vite/viewer/src/components/icons/IconTooling.vue @@ -0,0 +1,19 @@ + + diff --git a/vue/vite/viewer/src/main.js b/vue/vite/viewer/src/main.js new file mode 100644 index 0000000..abb2f78 --- /dev/null +++ b/vue/vite/viewer/src/main.js @@ -0,0 +1,8 @@ +import { createApp } from 'vue' +import App from './App.vue' +import "devextreme/dist/css/dx.light.css"; +import "@devexpress/analytics-core/dist/css/dx-analytics.common.css"; +import "@devexpress/analytics-core/dist/css/dx-analytics.light.css"; +import "devexpress-reporting/dist/css/dx-webdocumentviewer.css"; + +createApp(App).mount('#app') diff --git a/vue/vite/viewer/vite.config.js b/vue/vite/viewer/vite.config.js new file mode 100644 index 0000000..4217010 --- /dev/null +++ b/vue/vite/viewer/vite.config.js @@ -0,0 +1,18 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueDevTools from 'vite-plugin-vue-devtools' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + vueDevTools(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + }, + }, +}) diff --git a/vue/designer/.gitignore b/vue/vue-cli/designer/.gitignore similarity index 100% rename from vue/designer/.gitignore rename to vue/vue-cli/designer/.gitignore diff --git a/vue/designer/README.md b/vue/vue-cli/designer/README.md similarity index 100% rename from vue/designer/README.md rename to vue/vue-cli/designer/README.md diff --git a/vue/designer/babel.config.js b/vue/vue-cli/designer/babel.config.js similarity index 100% rename from vue/designer/babel.config.js rename to vue/vue-cli/designer/babel.config.js diff --git a/vue/designer/jsconfig.json b/vue/vue-cli/designer/jsconfig.json similarity index 100% rename from vue/designer/jsconfig.json rename to vue/vue-cli/designer/jsconfig.json diff --git a/vue/designer/package.json b/vue/vue-cli/designer/package.json similarity index 87% rename from vue/designer/package.json rename to vue/vue-cli/designer/package.json index 7151647..28fe86a 100644 --- a/vue/designer/package.json +++ b/vue/vue-cli/designer/package.json @@ -8,10 +8,10 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "@devexpress/analytics-core": "^24.2.3", + "@devexpress/analytics-core": "24.2-stable", "core-js": "^3.8.3", - "devexpress-reporting": "^24.2.3", - "devextreme": "^24.2.3", + "devexpress-reporting": "24.2-stable", + "devextreme": "24.2-stable", "vue": "^3.2.13" }, "devDependencies": { diff --git a/vue/vue-cli/designer/public/favicon.ico b/vue/vue-cli/designer/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/vue/designer/public/index.html b/vue/vue-cli/designer/public/index.html similarity index 100% rename from vue/designer/public/index.html rename to vue/vue-cli/designer/public/index.html diff --git a/vue/designer/src/App.vue b/vue/vue-cli/designer/src/App.vue similarity index 100% rename from vue/designer/src/App.vue rename to vue/vue-cli/designer/src/App.vue diff --git a/vue/designer/src/assets/logo.png b/vue/vue-cli/designer/src/assets/logo.png similarity index 100% rename from vue/designer/src/assets/logo.png rename to vue/vue-cli/designer/src/assets/logo.png diff --git a/vue/designer/src/components/HelloWorld.vue b/vue/vue-cli/designer/src/components/HelloWorld.vue similarity index 100% rename from vue/designer/src/components/HelloWorld.vue rename to vue/vue-cli/designer/src/components/HelloWorld.vue diff --git a/vue/designer/src/components/ReportDesignerComponent.vue b/vue/vue-cli/designer/src/components/ReportDesignerComponent.vue similarity index 100% rename from vue/designer/src/components/ReportDesignerComponent.vue rename to vue/vue-cli/designer/src/components/ReportDesignerComponent.vue diff --git a/vue/designer/src/main.js b/vue/vue-cli/designer/src/main.js similarity index 100% rename from vue/designer/src/main.js rename to vue/vue-cli/designer/src/main.js diff --git a/vue/designer/vue.config.js b/vue/vue-cli/designer/vue.config.js similarity index 100% rename from vue/designer/vue.config.js rename to vue/vue-cli/designer/vue.config.js diff --git a/vue/viewer/.gitignore b/vue/vue-cli/viewer/.gitignore similarity index 100% rename from vue/viewer/.gitignore rename to vue/vue-cli/viewer/.gitignore diff --git a/vue/viewer/README.md b/vue/vue-cli/viewer/README.md similarity index 100% rename from vue/viewer/README.md rename to vue/vue-cli/viewer/README.md diff --git a/vue/viewer/babel.config.js b/vue/vue-cli/viewer/babel.config.js similarity index 100% rename from vue/viewer/babel.config.js rename to vue/vue-cli/viewer/babel.config.js diff --git a/vue/viewer/jsconfig.json b/vue/vue-cli/viewer/jsconfig.json similarity index 100% rename from vue/viewer/jsconfig.json rename to vue/vue-cli/viewer/jsconfig.json diff --git a/vue/viewer/package.json b/vue/vue-cli/viewer/package.json similarity index 87% rename from vue/viewer/package.json rename to vue/vue-cli/viewer/package.json index dbe2731..b9c4296 100644 --- a/vue/viewer/package.json +++ b/vue/vue-cli/viewer/package.json @@ -8,10 +8,10 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "@devexpress/analytics-core": "^24.2.3", + "@devexpress/analytics-core": "24.2-stable", "core-js": "^3.8.3", - "devexpress-reporting": "^24.2.3", - "devextreme": "^24.2.3", + "devexpress-reporting": "24.2-stable", + "devextreme": "24.2-stable", "vue": "^3.2.13" }, "devDependencies": { diff --git a/vue/vue-cli/viewer/public/favicon.ico b/vue/vue-cli/viewer/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/vue/viewer/public/index.html b/vue/vue-cli/viewer/public/index.html similarity index 100% rename from vue/viewer/public/index.html rename to vue/vue-cli/viewer/public/index.html diff --git a/vue/viewer/src/App.vue b/vue/vue-cli/viewer/src/App.vue similarity index 100% rename from vue/viewer/src/App.vue rename to vue/vue-cli/viewer/src/App.vue diff --git a/vue/viewer/src/assets/logo.png b/vue/vue-cli/viewer/src/assets/logo.png similarity index 100% rename from vue/viewer/src/assets/logo.png rename to vue/vue-cli/viewer/src/assets/logo.png diff --git a/vue/viewer/src/components/HelloWorld.vue b/vue/vue-cli/viewer/src/components/HelloWorld.vue similarity index 100% rename from vue/viewer/src/components/HelloWorld.vue rename to vue/vue-cli/viewer/src/components/HelloWorld.vue diff --git a/vue/viewer/src/components/WebDocumentViewer.vue b/vue/vue-cli/viewer/src/components/WebDocumentViewer.vue similarity index 100% rename from vue/viewer/src/components/WebDocumentViewer.vue rename to vue/vue-cli/viewer/src/components/WebDocumentViewer.vue diff --git a/vue/viewer/src/main.js b/vue/vue-cli/viewer/src/main.js similarity index 100% rename from vue/viewer/src/main.js rename to vue/vue-cli/viewer/src/main.js diff --git a/vue/viewer/vue.config.js b/vue/vue-cli/viewer/vue.config.js similarity index 100% rename from vue/viewer/vue.config.js rename to vue/vue-cli/viewer/vue.config.js From dab7fa64468363efe28011c9d6c50de727716844 Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Sun, 23 Feb 2025 19:21:05 +0400 Subject: [PATCH 08/10] add vue csp --- README.md | 101 ++++++++++++++++++++++++- vue/vite/designer/index.html | 5 +- vue/vite/designer/package.json | 6 +- vue/vite/designer/vite.config.js | 10 ++- vue/vite/viewer/index.html | 5 +- vue/vite/viewer/src/knockout_global.js | 8 ++ vue/vite/viewer/vite.config.js | 5 ++ 7 files changed, 126 insertions(+), 14 deletions(-) create mode 100644 vue/vite/viewer/src/knockout_global.js diff --git a/README.md b/README.md index 79dcd42..7a51049 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,6 @@ npm start **Designer:** - - [index.html](/angular/designer/src/index.html) - [app.config.ts](/angular/designer/src/app/app.config.ts) - [angular.json](/angular/designer/angular.json) @@ -61,15 +60,109 @@ npm start - [Content Security Policy in Angular Apps](https://docs.devexpress.com/XtraReports/404552/web-reporting/angular-reporting/content-security-policy) +## Vue + +### Vite + +The *vite* folders contains Vue applications created with [Vite](https://vite.dev/guide/). + +For more information on CSP in Vite-based apps, refer to the following article: [Content Security Policy (CSP) +](https://vite.dev/guide/features#content-security-policy-csp). + +The following meta tag shows the minimum required CSP for our reporting controls: + + +```html + +``` + +> [!IMPORTANT] +> We are using the placeholder `random-nonce-value` to denote the nonce in sample projects. You need to generate a random number, unique for each HTTP request. + +#### Run the Project + +Run the server application. To do this, run the following command from the *ServerApp* folder: + +```cmd +dotnet run +``` + +To run the client application, run the following commands: + +```cmd +npm install +npm run dev +``` + +#### Files to Review + +**Viewer:** + +- [index.html](/vue/vite/viewer/index.html) +- [vite.config.js](/vue/vite/viewer/vite.config.js) + +**Designer:** + +- [index.html](/vue/vite/designer/index.html) +- [vite.config.js](/vue/vite/designer/vite.config.js) + +### Vue CLI + +The *vue-cli* folders contains Vue applications created with [Vue CLI](https://cli.vuejs.org/). + +The following meta tag shows the minimum required CSP for our reporting controls: + +```html + +``` + #### Run the Project +Run the server application. To do this, run the following command from the *ServerApp* folder: + +```cmd +dotnet run +``` + +To run the client application, run the following commands: + +```cmd +npm install +npm run serve +``` + #### Files to Review +**Viewer:** + +- [index.html](/vue/vue-cli/viewer/public/index.html) +- [vue.config.js](/vue/vue-cli/viewer/vue.config.js) + +**Designer:** + +- [index.html](/vue/vue-cli/viewer/public/index.html) +- [vue.config.js](/vue/vue-cli/viewer/vue.config.js) + +### Documentation + +- [Content Security Policy in Vue Apps](https://docs.devexpress.com/XtraReports/404558/web-reporting/vue-reporting/content-security-policy) + ## More Examples -- link -- link -- ... +- [Reporting for ASP.NET Core - Content Security Policy (CSP)](https://github.com/DevExpress-Examples/reporting-asp-net-core-content-security-policy) + ## Does this example address your development requirements/objectives? diff --git a/vue/vite/designer/index.html b/vue/vite/designer/index.html index fb9b5c9..1a3c231 100644 --- a/vue/vite/designer/index.html +++ b/vue/vite/designer/index.html @@ -7,14 +7,15 @@ Vite App
+ diff --git a/vue/vite/designer/package.json b/vue/vite/designer/package.json index b26d0bc..b6bfe41 100644 --- a/vue/vite/designer/package.json +++ b/vue/vite/designer/package.json @@ -9,9 +9,9 @@ "preview": "vite preview" }, "dependencies": { - "@devexpress/analytics-core": "^24.2.3", - "devexpress-reporting": "^24.2.3", - "devextreme": "^24.2.3", + "@devexpress/analytics-core": "24.2-stable", + "devexpress-reporting": "24.2-stable", + "devextreme": "24.2-stable", "vue": "^3.5.13" }, "devDependencies": { diff --git a/vue/vite/designer/vite.config.js b/vue/vite/designer/vite.config.js index 7f309fa..098045b 100644 --- a/vue/vite/designer/vite.config.js +++ b/vue/vite/designer/vite.config.js @@ -12,8 +12,12 @@ export default defineConfig({ ], resolve: { alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)), - "knockout": "./src/knockout_global.js" - }, + '@': fileURLToPath(new URL('./src', import.meta.url)) + }, }, + html: { + // For demonstration purposes only. + // Generate a random number, unique for each HTTP request. + cspNonce: 'random_nonce_value' + } }) diff --git a/vue/vite/viewer/index.html b/vue/vite/viewer/index.html index fb9b5c9..1a3c231 100644 --- a/vue/vite/viewer/index.html +++ b/vue/vite/viewer/index.html @@ -7,14 +7,15 @@ Vite App
+ diff --git a/vue/vite/viewer/src/knockout_global.js b/vue/vite/viewer/src/knockout_global.js new file mode 100644 index 0000000..1014fa3 --- /dev/null +++ b/vue/vite/viewer/src/knockout_global.js @@ -0,0 +1,8 @@ +(function () { + window.eval = function (p) { + if (p !== "this") { + throw new Error("Invalid argument for eval. Only 'this' is allowed."); + } + return window; + }; +})(); \ No newline at end of file diff --git a/vue/vite/viewer/vite.config.js b/vue/vite/viewer/vite.config.js index 4217010..b779067 100644 --- a/vue/vite/viewer/vite.config.js +++ b/vue/vite/viewer/vite.config.js @@ -15,4 +15,9 @@ export default defineConfig({ '@': fileURLToPath(new URL('./src', import.meta.url)) }, }, + html: { + // For demonstration purposes only. + // Generate a random number, unique for each HTTP request. + cspNonce: 'random_nonce_value' + } }) From d9e8cd00020a2bdb19dd403192433e496fd8108d Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Sun, 23 Feb 2025 20:48:32 +0400 Subject: [PATCH 09/10] add react csp --- README.md | 88 ++++++++++++++++++++-- react/nextjs/viewer/package.json | 2 +- react/vite/designer/index.html | 8 ++ react/vite/designer/package.json | 2 +- react/vite/designer/src/knockout_global.js | 8 ++ react/vite/designer/vite.config.ts | 5 ++ react/vite/viewer/index.html | 7 ++ react/vite/viewer/package.json | 2 +- react/vite/viewer/vite.config.ts | 5 ++ 9 files changed, 119 insertions(+), 8 deletions(-) create mode 100644 react/vite/designer/src/knockout_global.js diff --git a/README.md b/README.md index 7a51049..49d86e4 100644 --- a/README.md +++ b/README.md @@ -60,14 +60,92 @@ npm start - [Content Security Policy in Angular Apps](https://docs.devexpress.com/XtraReports/404552/web-reporting/angular-reporting/content-security-policy) + +## React + +### Vite + +The *vite* folder contains Vue applications created with [Vite](https://vite.dev/guide/). + +For more information on CSP in Vite-based apps, refer to the following article: [Content Security Policy (CSP)](https://vite.dev/guide/features#content-security-policy-csp). + +The following meta tag shows the minimum required CSP for our reporting controls: + +```html + +``` + +> [!IMPORTANT] +> We are using the placeholder `random-nonce-value` to denote the nonce in sample projects. You need to generate a random number, unique for each HTTP request. + +#### Run the Project + +Run the server application. To do this, run the following command from the *ServerApp* folder: + +```cmd +dotnet run +``` + +To run the client application, run the following commands: + +```cmd +npm install +npm run dev +``` + +#### Files to Review + +**Viewer:** + +- [index.html](/react/vite/viewer/index.html) +- [vite.config.js](/react/vite/viewer/vite.config.js) + +**Designer:** + +- [index.html](/react/vite/designer/index.html) +- [vite.config.js](/react/vite/designer/vite.config.js) + +### Next.js + +The *nextjs* folder contains Vue applications created with [Next.js](https://nextjs.org/). + +For more information on CSP in Next.js apps, refer to the following article: [Content Security Policy (CSP)](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy). + +#### Run the Project + +Run the server application. To do this, run the following command from the *ServerApp* folder: + +```cmd +dotnet run +``` + +To run the client application, run the following commands: + +```cmd +npm install +npm run dev +``` + +#### Files to Review + +**Viewer:** + +**Designer:** + + ## Vue ### Vite -The *vite* folders contains Vue applications created with [Vite](https://vite.dev/guide/). +The *vite* folder contains Vue applications created with [Vite](https://vite.dev/guide/). -For more information on CSP in Vite-based apps, refer to the following article: [Content Security Policy (CSP) -](https://vite.dev/guide/features#content-security-policy-csp). +For more information on CSP in Vite-based apps, refer to the following article: [Content Security Policy (CSP)](https://vite.dev/guide/features#content-security-policy-csp). The following meta tag shows the minimum required CSP for our reporting controls: @@ -77,7 +155,7 @@ The following meta tag shows the minimum required CSP for our reporting controls img-src data: https: http:; script-src 'self'; style-src 'self' 'nonce-random_nonce_value'; -connect-src 'self' http://localhost:5000 ws:; +connect-src 'self' http://localhost:5000; worker-src 'self' blob:; frame-src 'self' blob:;" /> ``` @@ -114,7 +192,7 @@ npm run dev ### Vue CLI -The *vue-cli* folders contains Vue applications created with [Vue CLI](https://cli.vuejs.org/). +The *vue-cli* folder contains Vue applications created with [Vue CLI](https://cli.vuejs.org/). The following meta tag shows the minimum required CSP for our reporting controls: diff --git a/react/nextjs/viewer/package.json b/react/nextjs/viewer/package.json index d9dfdb5..25b9212 100644 --- a/react/nextjs/viewer/package.json +++ b/react/nextjs/viewer/package.json @@ -9,7 +9,7 @@ "lint": "next lint" }, "dependencies": { - "devexpress-reporting-react": "24.2-next", + "devexpress-reporting-react": "24.2-stable", "next": "14.2.3", "react": "^18", "react-dom": "^18" diff --git a/react/vite/designer/index.html b/react/vite/designer/index.html index e4b78ea..97caf53 100644 --- a/react/vite/designer/index.html +++ b/react/vite/designer/index.html @@ -4,10 +4,18 @@ + Vite + React + TS
+ diff --git a/react/vite/designer/package.json b/react/vite/designer/package.json index b2b283d..7382847 100644 --- a/react/vite/designer/package.json +++ b/react/vite/designer/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "devexpress-reporting-react": "^24.2.3", + "devexpress-reporting-react": "24.2-stable", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/react/vite/designer/src/knockout_global.js b/react/vite/designer/src/knockout_global.js new file mode 100644 index 0000000..1014fa3 --- /dev/null +++ b/react/vite/designer/src/knockout_global.js @@ -0,0 +1,8 @@ +(function () { + window.eval = function (p) { + if (p !== "this") { + throw new Error("Invalid argument for eval. Only 'this' is allowed."); + } + return window; + }; +})(); \ No newline at end of file diff --git a/react/vite/designer/vite.config.ts b/react/vite/designer/vite.config.ts index 8b0f57b..71a0d63 100644 --- a/react/vite/designer/vite.config.ts +++ b/react/vite/designer/vite.config.ts @@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + html: { + // For demonstration purposes only. + // Generate a random number, unique for each HTTP request. + cspNonce: 'random_nonce_value' + } }) diff --git a/react/vite/viewer/index.html b/react/vite/viewer/index.html index e4b78ea..67b66ec 100644 --- a/react/vite/viewer/index.html +++ b/react/vite/viewer/index.html @@ -4,6 +4,13 @@ + Vite + React + TS diff --git a/react/vite/viewer/package.json b/react/vite/viewer/package.json index 9e3184d..8974d3b 100644 --- a/react/vite/viewer/package.json +++ b/react/vite/viewer/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "devexpress-reporting-react": "^24.2.3", + "devexpress-reporting-react": "24.2-stable", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/react/vite/viewer/vite.config.ts b/react/vite/viewer/vite.config.ts index 8b0f57b..71a0d63 100644 --- a/react/vite/viewer/vite.config.ts +++ b/react/vite/viewer/vite.config.ts @@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + html: { + // For demonstration purposes only. + // Generate a random number, unique for each HTTP request. + cspNonce: 'random_nonce_value' + } }) From c032d86a46716cdd7266d137b35b4a68bcce89fa Mon Sep 17 00:00:00 2001 From: Polina Tyureva Date: Sun, 23 Feb 2025 20:50:40 +0400 Subject: [PATCH 10/10] update readme --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 49d86e4..34186a8 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,7 @@ [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# Product/Platform - Task - +# Reporting for Web - Content Security Policy This repository contains sample Angular, React and Vue projects with integrated Web Document Viewer and Web Report Designer components. ## Angular