From cbd4e5a35d55e291c41cf468c0b33afc470bd8f0 Mon Sep 17 00:00:00 2001 From: Thomas Steenbergen Date: Sat, 25 Nov 2023 11:25:18 +0530 Subject: [PATCH] refactor(web-app-template): Use vite for builds Replace the create-react-app[1] and the rescripts[2] based build toolchain with vite[3] and vite-plugin-singlefile[4] as: - rescripts project has been archived. - continue using create-react-app is not viable due to upcoming API and packages deprecations. - vite has good community support, it builds faster and its toolchain comes out-of-the-box with almost everything we need. [1]: https://github.com/facebook/create-react-app [2]: https://github.com/harrysolovay/rescripts [3]: https://vitejs.dev/ [4]: https://github.com/richardtallent/vite-plugin-singlefile Signed-off-by: Thomas Steenbergen --- .ort.yml | 2 +- .../reporters/web-app-template/.gitattributes | 2 +- .../web-app-template/.rescriptsrc.js | 95 - plugins/reporters/web-app-template/README.md | 5 +- .../web-app-template/build.gradle.kts | 2 - .../web-app-template/{public => }/index.html | 1 + .../reporters/web-app-template/package.json | 45 +- .../reporters/web-app-template/src/App.css | 2 - .../web-app-template/src/{App.js => App.jsx} | 82 +- .../{AboutModal.js => AboutModal.jsx} | 0 .../{IssuesTable.js => IssuesTable.jsx} | 0 .../{LicenseChart.js => LicenseChart.jsx} | 0 ...nseStatsTable.js => LicenseStatsTable.jsx} | 0 .../{PackageDetails.js => PackageDetails.jsx} | 0 ...dingsTable.js => PackageFindingsTable.jsx} | 0 ...PackageLicenses.js => PackageLicenses.jsx} | 0 .../{PackagePaths.js => PackagePaths.jsx} | 0 ...ExcludesTable.js => PathExcludesTable.jsx} | 0 ...ResolutionTable.js => ResolutionTable.jsx} | 0 ...ationsTable.js => RuleViolationsTable.jsx} | 0 ...xcludesTable.js => ScopeExcludesTable.jsx} | 0 .../src/components/{Shared.js => Shared.jsx} | 0 .../{SummaryView.js => SummaryView.jsx} | 0 .../{TableView.js => TableView.jsx} | 0 .../components/{TreeView.js => TreeView.jsx} | 0 ...itiesTable.js => VulnerabilitiesTable.jsx} | 0 .../src/{index.js => index.jsx} | 20 +- .../reporters/web-app-template/src/logo.svg | 7 - .../reducers/{selectors.js => selectors.jsx} | 0 .../reporters/web-app-template/vite.config.js | 49 + plugins/reporters/web-app-template/yarn.lock | 12705 ++-------------- .../funTest/kotlin/WebAppReporterFunTest.kt | 2 +- 32 files changed, 1597 insertions(+), 11422 deletions(-) delete mode 100644 plugins/reporters/web-app-template/.rescriptsrc.js rename plugins/reporters/web-app-template/{public => }/index.html (99%) rename plugins/reporters/web-app-template/src/{App.js => App.jsx} (82%) rename plugins/reporters/web-app-template/src/components/{AboutModal.js => AboutModal.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{IssuesTable.js => IssuesTable.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{LicenseChart.js => LicenseChart.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{LicenseStatsTable.js => LicenseStatsTable.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{PackageDetails.js => PackageDetails.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{PackageFindingsTable.js => PackageFindingsTable.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{PackageLicenses.js => PackageLicenses.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{PackagePaths.js => PackagePaths.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{PathExcludesTable.js => PathExcludesTable.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{ResolutionTable.js => ResolutionTable.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{RuleViolationsTable.js => RuleViolationsTable.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{ScopeExcludesTable.js => ScopeExcludesTable.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{Shared.js => Shared.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{SummaryView.js => SummaryView.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{TableView.js => TableView.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{TreeView.js => TreeView.jsx} (100%) rename plugins/reporters/web-app-template/src/components/{VulnerabilitiesTable.js => VulnerabilitiesTable.jsx} (100%) rename plugins/reporters/web-app-template/src/{index.js => index.jsx} (79%) delete mode 100644 plugins/reporters/web-app-template/src/logo.svg rename plugins/reporters/web-app-template/src/reducers/{selectors.js => selectors.jsx} (100%) create mode 100644 plugins/reporters/web-app-template/vite.config.js diff --git a/.ort.yml b/.ort.yml index 683e971da07a5..e394e49177a73 100644 --- a/.ort.yml +++ b/.ort.yml @@ -148,7 +148,7 @@ curations: reason: "DOCUMENTATION_OF" comment: >- Documentation contains examples mentioning various licenses. - - path: "plugins/reporters/web-app-template/public/index.html" + - path: "plugins/reporters/web-app-template/index.html" concluded_license: "Apache-2.0" reason: "DATA_OF" comment: >- diff --git a/plugins/reporters/web-app-template/.gitattributes b/plugins/reporters/web-app-template/.gitattributes index a37a47c83eecd..24cbf0a1800f7 100644 --- a/plugins/reporters/web-app-template/.gitattributes +++ b/plugins/reporters/web-app-template/.gitattributes @@ -2,4 +2,4 @@ **/*.js text eol=lf # Fix GitHub language statistics, see https://github.com/github/linguist#using-gitattributes. -public/index.html linguist-generated=true +index.html linguist-generated=true diff --git a/plugins/reporters/web-app-template/.rescriptsrc.js b/plugins/reporters/web-app-template/.rescriptsrc.js deleted file mode 100644 index e9ff855194db7..0000000000000 --- a/plugins/reporters/web-app-template/.rescriptsrc.js +++ /dev/null @@ -1,95 +0,0 @@ -const {appendWebpackPlugin} = require('@rescripts/utilities') -const {editWebpackPlugin} = require('@rescripts/utilities') -const fs = require('fs'); -const fse = require('fs-extra'); -const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default; -const WebpackEventPlugin = require('webpack-event-plugin'); - -module.exports = { - webpack: config => { - if (process.env.NODE_ENV !== 'development') { - const configA = editWebpackPlugin( - p => { - p.inlineSource = '.(js|css)$'; - p.chunks = ['chunk']; - p.title = 'ORT WebApp Scan Report'; - - return p - }, - 'HtmlWebpackPlugin', - config, - ); - - const configB = editWebpackPlugin( - p => { - p.tests = [/.*/]; - return p - }, - 'InlineChunkHtmlPlugin', - configA, - ); - - const configC = appendWebpackPlugin( - new HTMLInlineCSSWebpackPlugin(), - configA, - ); - - const configD = appendWebpackPlugin( - new WebpackEventPlugin([{ - hook: 'done', - callback: (compilation) => { - console.log('Removing unneeded files in build dir...'); - - fse.remove('./build/static') - .catch(err => { - console.error(err); - }); - - fse.remove('./build/asset-manifest.json') - .catch(err => { - console.error(err); - }); - - fs.readdir('./build', (err, files) => { - for (let i = files.length - 1; i >= 0; i -= 1) { - let match = files[i].match(/precache-manifest.*.js/); - if (match !== null) - fse.remove(`./build/${match[0]}`) - .catch(err => { - console.error(err); - }); - } - }); - - fse.remove('./build/service-worker.js') - .catch(err => { - console.error(err); - }); - - console.log('Creating ORT template file...'); - - fs.readFile('./build/index.html', 'utf8', (err, data) => { - if (err) { - return console.log(err); - } - - const result = data.replace( - /( + diff --git a/plugins/reporters/web-app-template/package.json b/plugins/reporters/web-app-template/package.json index dd0328b390a73..983a8b5094de4 100644 --- a/plugins/reporters/web-app-template/package.json +++ b/plugins/reporters/web-app-template/package.json @@ -13,11 +13,12 @@ "url": "https://github.com/oss-review-toolkit/ort.git", "directory": "plugins/reporters/web-app-template" }, + "type": "module", "scripts": { - "start": "rescripts start", - "build": "rescripts build", - "test": "rescripts test", - "lint": "eslint ./src" + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" }, "dependencies": { "@ant-design/icons": "^5.0.1", @@ -26,35 +27,29 @@ "memoize-one": "^6.0.0", "pako": "^2.1.0", "prop-types": "^15.8.1", - "react": "^17.0.2", - "react-app-polyfill": "^2.0.0", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-redux": "^7.2.5", - "react-scripts": "4.0.3", "react-syntax-highlighter": "^15.5.0", "recharts": "2.4.3", "redux": "^4.2.1", "redux-logger": "^3.0.6", "redux-saga": "^1.2.2", - "resolve": "^1.22.1", - "scroll-into-view-if-needed": "^3.0.6" + "scroll-into-view-if-needed": "^3.1.0" }, "devDependencies": { - "@rescripts/cli": "^0.0.16", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^12.0.0", - "@testing-library/user-event": "^14.4.3", - "fs-extra": "^11.1.0", - "html-inline-css-webpack-plugin": "^1.11.1", - "webpack-event-plugin": "^1.1.1" + "@types/react": "^18.2.38", + "@types/react-dom": "^18.2.17", + "@vitejs/plugin-react": "^4.2.0", + "eslint": "^8.54.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.4", + "rollup": "^4.5.2", + "rollup-plugin-copy": "^3.5.0", + "vite": "^5.0.2", + "vite-plugin-singlefile": "^0.13.5" }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { "production": [ ">0.2%", "not dead", @@ -65,6 +60,4 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "homepage": "./" } diff --git a/plugins/reporters/web-app-template/src/App.css b/plugins/reporters/web-app-template/src/App.css index 3dfcb62b51fed..ba7ef9d504897 100644 --- a/plugins/reporters/web-app-template/src/App.css +++ b/plugins/reporters/web-app-template/src/App.css @@ -1,5 +1,3 @@ -@import '~antd/dist/antd.css'; - body { background: #fafafa; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/plugins/reporters/web-app-template/src/App.js b/plugins/reporters/web-app-template/src/App.jsx similarity index 82% rename from plugins/reporters/web-app-template/src/App.js rename to plugins/reporters/web-app-template/src/App.jsx index ee66bb03ce118..4e48748ba892f 100644 --- a/plugins/reporters/web-app-template/src/App.js +++ b/plugins/reporters/web-app-template/src/App.jsx @@ -45,13 +45,6 @@ import { getOrtResult } from './reducers/selectors'; -const { TabPane } = Tabs; - -/* TODO for combine CSS, JS and fonts into single HTML file look into https://webpack.js.org - * combined with https://www.npmjs.com/package/html-webpack-inline-source-plugin or - * https://www.npmjs.com/package/miku-html-webpack-inline-source-plugin - */ - class ReporterApp extends Component { constructor(props) { super(props); @@ -94,6 +87,45 @@ class ReporterApp extends Component { + + Summary + + ), + key: "ort-tabs-summary", + children: ( + + ) + }, + { + label: ( + + + Table + + ), + key: "ort-tabs-table", + children: ( + + ) + }, + { + label: ( + + + Tree + + ), + key: "ort-tabs-tree", + children: ( + + ) + } + + ]} onChange={this.onChangeTab} tabBarExtraContent={( )} - > - - - Summary - - )} - key="ort-tabs-summary" - > - - - - - Table - - )} - key="ort-tabs-table" - > - - - - - Tree - - )} - key="ort-tabs-tree" - > - - - + /> ); diff --git a/plugins/reporters/web-app-template/src/components/AboutModal.js b/plugins/reporters/web-app-template/src/components/AboutModal.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/AboutModal.js rename to plugins/reporters/web-app-template/src/components/AboutModal.jsx diff --git a/plugins/reporters/web-app-template/src/components/IssuesTable.js b/plugins/reporters/web-app-template/src/components/IssuesTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/IssuesTable.js rename to plugins/reporters/web-app-template/src/components/IssuesTable.jsx diff --git a/plugins/reporters/web-app-template/src/components/LicenseChart.js b/plugins/reporters/web-app-template/src/components/LicenseChart.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/LicenseChart.js rename to plugins/reporters/web-app-template/src/components/LicenseChart.jsx diff --git a/plugins/reporters/web-app-template/src/components/LicenseStatsTable.js b/plugins/reporters/web-app-template/src/components/LicenseStatsTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/LicenseStatsTable.js rename to plugins/reporters/web-app-template/src/components/LicenseStatsTable.jsx diff --git a/plugins/reporters/web-app-template/src/components/PackageDetails.js b/plugins/reporters/web-app-template/src/components/PackageDetails.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/PackageDetails.js rename to plugins/reporters/web-app-template/src/components/PackageDetails.jsx diff --git a/plugins/reporters/web-app-template/src/components/PackageFindingsTable.js b/plugins/reporters/web-app-template/src/components/PackageFindingsTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/PackageFindingsTable.js rename to plugins/reporters/web-app-template/src/components/PackageFindingsTable.jsx diff --git a/plugins/reporters/web-app-template/src/components/PackageLicenses.js b/plugins/reporters/web-app-template/src/components/PackageLicenses.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/PackageLicenses.js rename to plugins/reporters/web-app-template/src/components/PackageLicenses.jsx diff --git a/plugins/reporters/web-app-template/src/components/PackagePaths.js b/plugins/reporters/web-app-template/src/components/PackagePaths.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/PackagePaths.js rename to plugins/reporters/web-app-template/src/components/PackagePaths.jsx diff --git a/plugins/reporters/web-app-template/src/components/PathExcludesTable.js b/plugins/reporters/web-app-template/src/components/PathExcludesTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/PathExcludesTable.js rename to plugins/reporters/web-app-template/src/components/PathExcludesTable.jsx diff --git a/plugins/reporters/web-app-template/src/components/ResolutionTable.js b/plugins/reporters/web-app-template/src/components/ResolutionTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/ResolutionTable.js rename to plugins/reporters/web-app-template/src/components/ResolutionTable.jsx diff --git a/plugins/reporters/web-app-template/src/components/RuleViolationsTable.js b/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/RuleViolationsTable.js rename to plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx diff --git a/plugins/reporters/web-app-template/src/components/ScopeExcludesTable.js b/plugins/reporters/web-app-template/src/components/ScopeExcludesTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/ScopeExcludesTable.js rename to plugins/reporters/web-app-template/src/components/ScopeExcludesTable.jsx diff --git a/plugins/reporters/web-app-template/src/components/Shared.js b/plugins/reporters/web-app-template/src/components/Shared.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/Shared.js rename to plugins/reporters/web-app-template/src/components/Shared.jsx diff --git a/plugins/reporters/web-app-template/src/components/SummaryView.js b/plugins/reporters/web-app-template/src/components/SummaryView.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/SummaryView.js rename to plugins/reporters/web-app-template/src/components/SummaryView.jsx diff --git a/plugins/reporters/web-app-template/src/components/TableView.js b/plugins/reporters/web-app-template/src/components/TableView.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/TableView.js rename to plugins/reporters/web-app-template/src/components/TableView.jsx diff --git a/plugins/reporters/web-app-template/src/components/TreeView.js b/plugins/reporters/web-app-template/src/components/TreeView.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/TreeView.js rename to plugins/reporters/web-app-template/src/components/TreeView.jsx diff --git a/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.js b/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.js rename to plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx diff --git a/plugins/reporters/web-app-template/src/index.js b/plugins/reporters/web-app-template/src/index.jsx similarity index 79% rename from plugins/reporters/web-app-template/src/index.js rename to plugins/reporters/web-app-template/src/index.jsx index 0544d2b2f1054..e88f7d2f25c66 100644 --- a/plugins/reporters/web-app-template/src/index.js +++ b/plugins/reporters/web-app-template/src/index.jsx @@ -17,19 +17,17 @@ * License-Filename: LICENSE */ -import React from 'react'; -import { Provider } from 'react-redux'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; - +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' import store from './store'; +import { Provider } from 'react-redux'; -ReactDOM.render( - ( +ReactDOM.createRoot(document.getElementById('root')).render( + - ), - document.getElementById('root') -); + +) diff --git a/plugins/reporters/web-app-template/src/logo.svg b/plugins/reporters/web-app-template/src/logo.svg deleted file mode 100644 index 6b60c1042f58d..0000000000000 --- a/plugins/reporters/web-app-template/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/plugins/reporters/web-app-template/src/reducers/selectors.js b/plugins/reporters/web-app-template/src/reducers/selectors.jsx similarity index 100% rename from plugins/reporters/web-app-template/src/reducers/selectors.js rename to plugins/reporters/web-app-template/src/reducers/selectors.jsx diff --git a/plugins/reporters/web-app-template/vite.config.js b/plugins/reporters/web-app-template/vite.config.js new file mode 100644 index 0000000000000..7380cd35c5683 --- /dev/null +++ b/plugins/reporters/web-app-template/vite.config.js @@ -0,0 +1,49 @@ +/* + * Copyright (C) 2024 The ORT Project Authors (see ) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * License-Filename: LICENSE + */ + +import { defineConfig } from 'vite' +import copy from 'rollup-plugin-copy' +import react from '@vitejs/plugin-react' +import { viteSingleFile } from 'vite-plugin-singlefile' + +// https://vitejs.dev/config/ +export default defineConfig({ + build: { + outDir: 'build', + reportCompressedSize: false + }, + plugins: [ + react(), + viteSingleFile(), + copy({ + targets: [ + { + src: 'build/index.html', + dest: 'build/', + rename: 'scan-report-template.html', + transform: (contents, filename) => contents.toString().replace( + /(