Fix StationPropertyRenderer import (#175)

* Remove top-level await import as rollup cannot handle them correctly

* Update scopes

* Update vite config

* Add preview script

app/frontend/package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
+    "preview": "vite preview --port 3000",
     "lint": "eslint ./src/**/*.{ts,tsx}",
     "typecheck": "tsc --noEmit",
     "typecheck:watch": "tsc --noEmit --watch"

app/frontend/src/app/App.tsx

@@ -57,7 +57,7 @@ const AuthorizationProvider = clientId
       redirect_uri: "/auth/callback",
       silent_redirect_uri: "/auth/silent",
       post_logout_redirect_uri: "/",
-      scope: "itwinjs imodelaccess:read imodels:read itwins:read openid profile",
+      scope: "itwin-platform itwinjs openid profile",
     })
   : (props: React.PropsWithChildren<object>) => <>{props.children}</>;
 

app/frontend/src/app/ITwinJsApp/ITwinJsApp.tsx

@@ -14,13 +14,15 @@ import { FrontendIModelsAccess } from "@itwin/imodels-access-frontend";
 import { IModelsClient } from "@itwin/imodels-client-management";
 import { Presentation } from "@itwin/presentation-frontend";
 import { LoadingIndicator } from "../common/LoadingIndicator.js";
+import { registerStationPropertyFeature } from "../experimental/StationPropertyValueRenderer.js";
 import { applyUrlPrefix, EXPERIMENTAL_STATION_VALUE_RENDERER } from "../utils/Environment.js";
 import { BackendApi } from "./api/BackendApi.js";
 import { demoIModels, IModelIdentifier } from "./IModelIdentifier.js";
 import { InitializedApp } from "./InitializedApp.js";
 
 if (EXPERIMENTAL_STATION_VALUE_RENDERER) {
-  await import("../experimental/StationPropertyValueRenderer.js");
+  // cannot do top-level await import due to issue in rollup: https://github.com/rollup/rollup/issues/4708
+  registerStationPropertyFeature();
 }
 
 export interface ITwinJsAppProps {

app/frontend/src/app/experimental/StationPropertyValueRenderer.tsx

@@ -19,23 +19,25 @@ import { Presentation } from "@itwin/presentation-frontend";
 
 type StationValueType = "from" | "to" | "at";
 
-Presentation.registerInitializationHandler(async (): Promise<() => void> => {
-  const customRenderers: Array<{ name: string; renderer: IPropertyValueRenderer }> = [
-    { name: "AtStation", renderer: new StationPropertyValueRenderer("at") },
-    { name: "FromStation", renderer: new StationPropertyValueRenderer("from") },
-    { name: "ToStation", renderer: new StationPropertyValueRenderer("to") },
-  ];
+export function registerStationPropertyFeature() {
+  Presentation.registerInitializationHandler(async (): Promise<() => void> => {
+    const customRenderers: Array<{ name: string; renderer: IPropertyValueRenderer }> = [
+      { name: "AtStation", renderer: new StationPropertyValueRenderer("at") },
+      { name: "FromStation", renderer: new StationPropertyValueRenderer("from") },
+      { name: "ToStation", renderer: new StationPropertyValueRenderer("to") },
+    ];
 
-  for (const { name, renderer } of customRenderers) {
-    PropertyValueRendererManager.defaultManager.registerRenderer(name, renderer);
-  }
-
-  return () => {
-    for (const { name } of customRenderers) {
-      PropertyValueRendererManager.defaultManager.unregisterRenderer(name);
+    for (const { name, renderer } of customRenderers) {
+      PropertyValueRendererManager.defaultManager.registerRenderer(name, renderer);
     }
-  };
-});
+
+    return () => {
+      for (const { name } of customRenderers) {
+        PropertyValueRendererManager.defaultManager.unregisterRenderer(name);
+      }
+    };
+  });
+}
 
 /**
  * Property value renderer for STATION values.

app/frontend/vite.config.mts

@@ -22,19 +22,18 @@ export default defineConfig(({ mode }) => {
             src: "./node_modules/@itwin/*/lib/public/*",
             dest: ".",
           },
-          { src: "public/locales", dest: "locales" },
         ],
       }),
-      monacoEditorPlugin.default({}),
+      monacoEditorPlugin.default({
+        languageWorkers: ["json"],
+      }),
     ],
     server: {
       port: 3000,
       strictPort: true,
     },
-    esbuild: {
-      supported: {
-        "top-level-await": true, // browsers can handle top-level-await features
-      },
+    build: {
+      target: "es2022",
     },
     css: {
       preprocessorOptions: {
@@ -67,7 +66,6 @@ function verifyEnvironmentVariables(mode: string): void {
   }
 
   if ((env.DEPLOYMENT_TYPE !== "dev" && !env.OAUTH_CLIENT_ID) || env.OAUTH_CLIENT_ID === "spa-xxxxxxxxxxxxxxxxxxxxxxxxx") {
-    // eslint-disable-next-line no-console
     throw new Error(`Environment variable OAUTH_CLIENT_ID has not been set. Instructions in .env file \
 will guide you through the setup process.`);
   }