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 <[email protected]>

.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: >-

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

plugins/reporters/web-app-template/README.md

@@ -1,5 +1,4 @@
 This directory contains the code for Web App report generated by the ORT reporter.
-The code was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 
 ## Available Commands
 
@@ -10,11 +9,11 @@ In the `web-app-template` directory, you can run:
 Builds the `index.html` (used for debugging of the Web App) and `scan-report-template.html` in the `/build` directory.
 The [Kotlin report code](../web-app/src/main/kotlin/WebAppReporter.kt) uses `scan-report-template.html` as a template and injects scan results into it to create the final ORT Web App scan report.
 
-### `yarn start`
+### `yarn dev`
 
 Runs the app in the development mode.
 
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
 The page will reload if you make edits.
 You will also see any lint errors in the console.
 

plugins/reporters/web-app-template/build.gradle.kts

@@ -87,9 +87,7 @@ tasks {
         description = "Use Yarn to build the Node.js application."
         group = "Node"
 
-        inputs.files(".rescriptsrc.js")
         inputs.files(project.tasks["yarnInstall"].outputs.files)
-        inputs.dir("public")
         inputs.dir("src")
 
         outputs.cacheIf { true }

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": "./"
 }

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;

plugins/reporters/web-app-template/src/App.js → 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,48 +87,53 @@ class ReporterApp extends Component {
                         <Tabs
                             activeKey={showKey}
                             animated={false}
+                            items={[
+                                {
+                                    label: (
+                                        <span>
+                                            <PieChartOutlined />
+                                            Summary
+                                        </span>
+                                    ),
+                                    key: "ort-tabs-summary",
+                                    children: (
+                                        <SummaryView />
+                                    )
+                                },
+                                {
+                                    label: (
+                                        <span>
+                                            <TableOutlined />
+                                            Table
+                                        </span>
+                                    ),
+                                    key: "ort-tabs-table",
+                                    children: (
+                                        <TableView />
+                                    )
+                                },
+                                {
+                                    label: (
+                                        <span>
+                                        <PartitionOutlined />
+                                        Tree
+                                        </span>
+                                    ),
+                                    key: "ort-tabs-tree",
+                                    children: (
+                                        <TreeView />
+                                    )
+                                }
+
+                            ]}
                             onChange={this.onChangeTab}
                             tabBarExtraContent={(
                                 <ControlOutlined
                                     className="ort-control"
                                     onClick={this.onClickAbout}
                                 />
                             )}
-                        >
-                            <TabPane
-                                tab={(
-                                    <span>
-                                        <PieChartOutlined />
-                                        Summary
-                                    </span>
-                                )}
-                                key="ort-tabs-summary"
-                            >
-                                <SummaryView />
-                            </TabPane>
-                            <TabPane
-                                tab={(
-                                    <span>
-                                        <TableOutlined />
-                                        Table
-                                    </span>
-                                )}
-                                key="ort-tabs-table"
-                            >
-                                <TableView />
-                            </TabPane>
-                            <TabPane
-                                tab={(
-                                    <span>
-                                        <PartitionOutlined />
-                                        Tree
-                                    </span>
-                                )}
-                                key="ort-tabs-tree"
-                            >
-                                <TreeView />
-                            </TabPane>
-                        </Tabs>
+                        />
                     </Col>
                 </Row>
             );

plugins/reporters/web-app-template/src/index.js → 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(
+    <React.StrictMode>
         <Provider store={store}>
             <App />
         </Provider>
-    ),
-    document.getElementById('root')
-);
+    </React.StrictMode>
+)