Use vite instead of bentley react-scripts.

iTwin · Oct 30, 2024 · 6dd9529 · 6dd9529
1 parent 2560ec7
commit 6dd9529
Show file tree

Hide file tree

Showing 15 changed files with 1,054 additions and 456 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ coverage/
 .env
 .idea/
 *.configStore/
+dist/
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/typescript/examples/web-app/index.html b/typescript/examples/web-app/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Reality APIs Web App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/src/index.ts"
+    ></script>
+  </body>
+</html>
diff --git a/typescript/examples/web-app/package.json b/typescript/examples/web-app/package.json
@@ -1,16 +1,19 @@
 {
   "name": "reality-capture-web-app",
+  "type": "module",
   "version": "0.1.0-dev.1",
   "description": "Sample web application to upload data, run reality capture jobs (Analysis, Conversion and Modeling) and display the productions",
   "private": true,
+  "main": "src/index.ts",
   "scripts": {
-    "build": "tsc 1>&2",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "clean": "rimraf lib build .rush",
     "lint": "eslint ./src --ext .ts,.tsx ",
     "lint-fix": "eslint ./src --fix --ext .ts,.tsx",
     "coverage": "",
-    "integration-tests": "",
-    "start": "react-scripts start"
+    "integration-tests": ""
   },
   "keywords": [],
   "author": {
@@ -20,35 +23,35 @@
   "license": "MIT",
   "dependencies": {
     "@azure/storage-blob": "12.12.0",
-    "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/appui-layout-react": "^4.6.3",
-    "@itwin/appui-react": "^4.6.3",
-    "@itwin/browser-authorization": "^1.0.0",
-    "@itwin/components-react": "^4.0.0",
-    "@itwin/core-bentley": "^4.0.0",
-    "@itwin/core-common": "^4.0.0",
-    "@itwin/core-frontend": "^4.6.3",
-    "@itwin/core-geometry": "^4.0.0",
-    "@itwin/core-markup": "^4.0.0",
-    "@itwin/core-orbitgt": "^4.0.0",
-    "@itwin/core-quantity": "^4.0.0",
-    "@itwin/core-react": "^4.0.0",
-    "@itwin/ecschema-metadata": "^4.0.0",
-    "@itwin/imodel-components-react": "^4.0.0",
+    "@itwin/appui-abstract": "^4.9.0",
+    "@itwin/appui-layout-react": "^4.8.0",
+    "@itwin/appui-react": "^4.17.0",
+    "@itwin/browser-authorization": "^1.1.2",
+    "@itwin/components-react": "^4.17.0",
+    "@itwin/core-bentley": "^4.9.0",
+    "@itwin/core-common": "^4.9.0",
+    "@itwin/core-frontend": "^4.9.0",
+    "@itwin/core-geometry": "^4.9.0",
+    "@itwin/core-markup": "^4.9.0",
+    "@itwin/core-orbitgt": "^4.9.0",
+    "@itwin/core-quantity": "^4.9.0",
+    "@itwin/core-react": "^4.17.0",
+    "@itwin/ecschema-metadata": "^4.9.0",
+    "@itwin/imodel-components-react": "^4.17.0",
     "@itwin/imodels-access-frontend": "^5.0.0",
     "@itwin/imodels-client-management": "^5.0.0",
-    "@itwin/itwinui-icons-react": "^2.2.0",
-    "@itwin/itwinui-react": "^3.0.0",
-    "@itwin/presentation-common": "^4.0.0",
+    "@itwin/itwinui-icons-react": "^2.9.0",
+    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/presentation-common": "^4.9.0",
     "@itwin/presentation-components": "^5.0.0",
-    "@itwin/presentation-frontend": "^4.0.0",
+    "@itwin/presentation-frontend": "^4.9.0",
     "@itwin/reality-capture-common": "workspace:*",
     "@itwin/reality-capture-analysis": "workspace:*",
     "@itwin/reality-capture-modeling": "workspace:*",
     "@itwin/reality-data-transfer": "workspace:*",
     "@itwin/reality-data-client": "workspace:*",
     "@itwin/web-viewer-react": "^4.3.2",
-    "@itwin/webgl-compatibility": "^4.0.0",
+    "@itwin/webgl-compatibility": "^4.9.0",
     "buffer": "^6.0.3",
     "fast-png": "^6.1.0",
     "react": "^18.0.0",
@@ -63,10 +66,12 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "eslint": "^8.19.0",
     "eslint-plugin-react": "^7.30.1",
     "rimraf": "^6.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
   },
   "overrides": {
     "@bentley/react-scripts": {

diff --git a/typescript/examples/web-app/public/index.html b/typescript/examples/web-app/public/index.html
diff --git a/typescript/examples/web-app/src/frontend/App.tsx b/typescript/examples/web-app/src/frontend/App.tsx
@@ -5,9 +5,10 @@
 
 import React, { useCallback, useEffect, useMemo } from "react";
 import "./App.css";
-import { ProgressLinear } from "@itwin/itwinui-react";
+import { ProgressLinear, ThemeProvider } from "@itwin/itwinui-react";
 import { BrowserAuthorizationClient } from "@itwin/browser-authorization";
 import { RealityDataAccessClient, RealityDataClientOptions } from "@itwin/reality-data-client";
+import { access } from "fs";
 import { TabMenu } from "./TabMenu";
 
 export function App() {
@@ -16,18 +17,18 @@ export function App() {
     const authClient = useMemo(
         () =>
             new BrowserAuthorizationClient({
-                scope: process.env.IMJS_AUTHORIZATION_SCOPES ?? "",
-                clientId: process.env.IMJS_AUTHORIZATION_CLIENT_ID ?? "",
-                redirectUri: process.env.IMJS_AUTHORIZATION_REDIRECT_URI ?? "",
+                scope: import.meta.env.IMJS_AUTHORIZATION_SCOPES ?? "",
+                clientId: import.meta.env.IMJS_AUTHORIZATION_CLIENT_ID ?? "",
+                redirectUri: import.meta.env.IMJS_AUTHORIZATION_REDIRECT_URI ?? "",
                 responseType: "code",
-                authority: process.env.IMJS_AUTHORIZATION_ISSUER_URL,
+                authority: import.meta.env.IMJS_AUTHORIZATION_ISSUER_URL,
             }),
         []
     );
 
     const realityDataAccessClient = useMemo(
         (): RealityDataAccessClient => {
-            let prefix = process.env.IMJS_URL_PREFIX ?? "";
+            let prefix = import.meta.env.IMJS_URL_PREFIX ?? "";
             if(prefix === "dev-")
                 prefix = "qa-";
 
@@ -41,39 +42,30 @@ export function App() {
 
     const login = useCallback(async () => {
         try {
-            await authClient.signInSilent();            
+            await authClient.signInSilent();
         } catch {
-            await authClient.signIn();           
+            await authClient.signIn();
         }
         setAccessToken(await authClient.getAccessToken());
     }, [authClient]);
 
     useEffect(() => {
-        // Temporary fix (ResizeObserver - loop limit exceeded)
-        class CalmResizeObserver extends ResizeObserver {
-            constructor(callback: ResizeObserverCallback) {
-                super((entries, observer) => {
-                    requestAnimationFrame(() => {
-                        callback(entries, observer);
-                    });
-                });
-            }
-        }
-
-        window.ResizeObserver = CalmResizeObserver;
-
         void login();
     }, [login]);
 
     return(
         <div className="App">
             {!accessToken && (
                 <div className="signin-content">
-                    <ProgressLinear indeterminate={true} labels={["Signing in..."]} />
+                    <ThemeProvider theme="light">
+                        <ProgressLinear indeterminate={true} labels={["Signing in..."]} />
+                    </ThemeProvider>
                 </div>
             )}
             {accessToken && (
-                <TabMenu realityDataAccessClient={realityDataAccessClient} authorizationClient={authClient}/>
+                <ThemeProvider theme="light">
+                    <TabMenu realityDataAccessClient={realityDataAccessClient} authorizationClient={authClient}/>
+                </ThemeProvider>
             )}
         </div>
     );

diff --git a/typescript/examples/web-app/src/frontend/CCSTab.tsx b/typescript/examples/web-app/src/frontend/CCSTab.tsx
@@ -32,7 +32,7 @@ export function ContextCapture(props: CcProps) {
     const contextCaptureService = React.useRef() as MutableRefObject<ContextCaptureService>;
 
     const initCc = useCallback(async () => {
-        const prefix = process.env.IMJS_URL_PREFIX ?? "";
+        const prefix = import.meta.env.IMJS_URL_PREFIX ?? "";
         contextCaptureService.current = new ContextCaptureService(props.authorizationClient.getAccessToken.bind(props.authorizationClient), prefix);
     }, []);
 
@@ -49,7 +49,7 @@ export function ContextCapture(props: CcProps) {
         settings.outputs.cesium3DTiles = "cesium3DTiles";
 
         const workspaceId = await contextCaptureService.current.createWorkspace(jobName + " workspace", 
-            process.env.IMJS_PROJECT_ID!);
+            import.meta.env.IMJS_PROJECT_ID!);
         const id = await contextCaptureService.current.createJob(CCJobType.FULL, settings, jobName, workspaceId);
         await contextCaptureService.current.submitJob(id);
         setJobId(id);

diff --git a/typescript/examples/web-app/src/frontend/DataTransferTab.tsx b/typescript/examples/web-app/src/frontend/DataTransferTab.tsx
@@ -52,7 +52,7 @@ export function Rds(props: RdsProps) {
     const realityDataTransfer = React.useRef() as MutableRefObject<RealityDataTransferBrowser>;
 
     const initRds = useCallback(async () => {
-        let prefix = process.env.IMJS_URL_PREFIX ?? "";
+        let prefix = import.meta.env.IMJS_URL_PREFIX ?? "";
         if(prefix === "dev-")
             prefix = "qa-";
 
@@ -212,7 +212,7 @@ export function Rds(props: RdsProps) {
         }
 
         const realityDataId = await realityDataTransfer.current.uploadRealityDataBrowser(filesToUpload, uploadedDataType, uploadedDataName,
-            process.env.IMJS_PROJECT_ID!, rootDocumentName.length > 0 ? rootDocumentName : undefined, 
+            import.meta.env.IMJS_PROJECT_ID!, rootDocumentName.length > 0 ? rootDocumentName : undefined, 
             props.useReferenceTable === true ? props.referenceTable : undefined);
 
         if(realityDataId)
@@ -232,7 +232,7 @@ export function Rds(props: RdsProps) {
     };
 
     const onDownloadFiles = async (): Promise<void> => {
-        await realityDataTransfer.current.downloadRealityDataBrowser(downloadId, process.env.IMJS_PROJECT_ID ?? "", props.useReferenceTable === 
+        await realityDataTransfer.current.downloadRealityDataBrowser(downloadId, import.meta.env.IMJS_PROJECT_ID ?? "", props.useReferenceTable === 
             true ? props.referenceTable : undefined);
         setDownloadProgress(100);
     };

diff --git a/typescript/examples/web-app/src/frontend/RDASTab.tsx b/typescript/examples/web-app/src/frontend/RDASTab.tsx
@@ -3,7 +3,7 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 
-import { Button, Input, LabeledInput, ProgressLinear, Select, SelectOption, ToggleSwitch } from "@itwin/itwinui-react";
+import { Button, Input, LabeledInput, ProgressLinear, Select, SelectOption, ThemeProvider, ToggleSwitch } from "@itwin/itwinui-react";
 import React, { ChangeEvent, MutableRefObject, useCallback, useEffect } from "react";
 import "./RDASTab.css";
 import { SelectRealityData } from "./SelectRealityData";
@@ -45,7 +45,7 @@ export function Rdas(props: RdasProps) {
     ];
 
     const initRdas = useCallback(async () => {
-        const prefix = process.env.IMJS_URL_PREFIX ?? "";
+        const prefix = import.meta.env.IMJS_URL_PREFIX ?? "";
         realityDataAnalysisService.current = new RealityDataAnalysisService(props.authorizationClient.getAccessToken.bind(props.authorizationClient), prefix);
     }, []);
 
@@ -87,7 +87,7 @@ export function Rdas(props: RdasProps) {
     const onJobRun = async (): Promise<void> => {
         setPercentage(0);
         setStep("Prepare step");
-        const id = await realityDataAnalysisService.current.createJob(jobSettings, rdasJobName, process.env.IMJS_PROJECT_ID!);
+        const id = await realityDataAnalysisService.current.createJob(jobSettings, rdasJobName, import.meta.env.IMJS_PROJECT_ID!);
         await realityDataAnalysisService.current.submitJob(id);
         setJobId(id);
         let currentStep = JobState.ACTIVE;
@@ -414,7 +414,7 @@ export function Rdas(props: RdasProps) {
     };
 
     return(
-        <div>
+        <>
             <div className="rdas-controls-group">
                 <h2 className="rdas-control">Run RDAS job</h2>
             </div>
@@ -472,6 +472,6 @@ export function Rdas(props: RdasProps) {
                     </div>     
                 </div>
             )}     
-        </div>
+        </>
     );
 }
diff --git a/typescript/examples/web-app/src/frontend/SelectRealityData.tsx b/typescript/examples/web-app/src/frontend/SelectRealityData.tsx
@@ -46,7 +46,7 @@ export function SelectRealityData(props: SelectRealityDataProps) {
         const suggestionNumber = props.suggestionNumber ?? 10;
         setLoading(true);
         do {
-            response = await props.realityDataAccessClient.getRealityDatas("", process.env.IMJS_PROJECT_ID, 
+            response = await props.realityDataAccessClient.getRealityDatas("", import.meta.env.IMJS_PROJECT_ID, 
                 {top: 500, continuationToken: continuationToken ?? undefined});
             continuationToken = response.continuationToken ?? "";
 

diff --git a/typescript/examples/web-app/src/frontend/TabMenu.tsx b/typescript/examples/web-app/src/frontend/TabMenu.tsx
@@ -5,7 +5,7 @@
 
 import React from "react";
 import { Viewer2D } from "./Viewer2D";
-import { Viewer3D } from "./Viewer3D";
+//import { Viewer3D } from "./Viewer3D";
 import "./App.css";
 import { Tab, Tabs } from "@itwin/itwinui-react";
 import { Rds } from "./DataTransferTab";
@@ -41,14 +41,14 @@ export function TabMenu(props: TabMenu) {
         case 1:
             return <ContextCapture realityDataAccessClient={props.realityDataAccessClient} authorizationClient={props.authorizationClient}/>;
         case 2:
-            return <Viewer2D realityDataAccessClient={props.realityDataAccessClient}/>;
-        case 3:
-            return <Viewer3D realityDataAccessClient={props.realityDataAccessClient} 
-                authClient={props.authorizationClient}/>;
-        case 4:
             return <Rds referenceTable={referenceTable} authorizationClient={props.authorizationClient} onReferenceTableChanged={onReferenceTableChanged} 
                 realityDataAccessClient={props.realityDataAccessClient} useReferenceTable={useReferenceTable} 
                 onUseReferenceTableChanged={onUseReferenceTableChanged} />;
+        case 3:
+            return <Viewer2D realityDataAccessClient={props.realityDataAccessClient}/>;
+        /*case 4:
+            return <Viewer3D realityDataAccessClient={props.realityDataAccessClient} 
+                authClient={props.authorizationClient}/>;*/
         default:
             return <Rdas realityDataAccessClient={props.realityDataAccessClient} authorizationClient={props.authorizationClient}/>;
         }
@@ -60,9 +60,8 @@ export function TabMenu(props: TabMenu) {
             labels={[                
                 <Tab key={0} label="RDAS" startIcon={<SvgProcess />} />,
                 <Tab key={1} label="CCS" startIcon={<SvgRealityMesh />} />,
-                <Tab key={2} label="2D viewer" startIcon={<Svg2D />} />,
-                <Tab key={3} label="3D viewer" startIcon={<Svg3D />} />,
-                <Tab key={4} label="Data Transfer" startIcon={<SvgUpload />} />,
+                <Tab key={2} label="Data Transfer" startIcon={<SvgUpload />} />,
+                <Tab key={3} label="2D viewer" startIcon={<Svg2D />} />,
             ]}
             onTabSelected={setTabIndex}
             type="borderless">

diff --git a/typescript/examples/web-app/src/frontend/Viewer2D.tsx b/typescript/examples/web-app/src/frontend/Viewer2D.tsx
@@ -221,7 +221,7 @@ export function Viewer2D(props: Viewer2DProps) {
         contextScene.references.clear();
 
         const realityData: ITwinRealityData = await props.realityDataAccessClient.getRealityData("", 
-            process.env.IMJS_PROJECT_ID, idToDisplay);
+            import.meta.env.IMJS_PROJECT_ID, idToDisplay);
         if(realityData.type === "ContextScene")
             contextScene = await parseContextScene(props.realityDataAccessClient, idToDisplay);
         else if(realityData.type === "CCImageCollection")
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ coverage/ @@
     .env
     .idea/
     *.configStore/
+    dist/