Merge remote-tracking branch 'starter/main' into main

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2025-01-22
+
+-   Update Vite to version 5.4.14 due to CVE-2025-24010 ([GHSA-vg6x-rcgg-rjx6](https://github.com/vitejs/vite/security/advisories/GHSA-vg6x-rcgg-rjx6))
+
 ## 2024-12-05
 
 -   Update Open Pioneer Trails dependencies to latest version.

docs/tutorials/HowToCreateAnApp.md

@@ -223,6 +223,55 @@ That file can be directly imported (e.g. via `<script>` like in our test site ab
 
 For more details about our vite plugin, head over to its [Documentation](https://www.npmjs.com/package/@open-pioneer/vite-plugin-pioneer).
 
+### Clean application URLs
+
+The default file layout in this repository is designed for multiple applications and sites within the same project (for example, one or more productive sites and a few test sites).
+For this reason, the default root site is an overview page mainly aimed at developers.
+It links to other sites in the project:
+
+-   Overview site: <code>http[]()://example.com<b>**/**</b></code>
+-   Other sites: <code>http[]()://example.com<b>/sites/my-app/</b></code>
+
+If your project focuses on a single, central site, you may wish to invert this layout:
+
+-   Main site: <code>http[]()://example.com<b>/</b></code>
+-   (optional) Overview site: <code>http[]()://example.com<b>/app-overview/</b></code>
+-   (optional) Other apps: <code>http[]()://example.com<b>/test-app/</b></code>
+
+To achieve this, simply swap the corresponding `.html` files:
+
+-   Move `.html` files:
+    -   Move `src/index.html` to `src/app-overview/index.html` (or any other location in the source directory).
+    -   Move `src/sites/my-app/index.html` to `src/index.html`.
+    -   Relative links in your `.html` files may need adjusting!
+-   Update `vite.config.ts`:
+
+    -   Remove the reference to `my-app` and (optionally) include the new app overview site, if you want it built:
+
+        ```diff
+        // vite.config.ts
+        pioneer({
+            // Now points to the main site
+            rootSite: true,
+
+            sites: [
+        -       "my-app",
+        +       "app-overview",
+                // ...
+            ],
+            apps: []
+        }),
+        ```
+
+    -   To open the overview site when executing `pnpm dev`, configure:
+
+        ```diff
+        // vite.config.ts
+        +    server: {
+        +        open: "/app-overview/"
+        +    }
+        ```
+
 ## Next steps
 
 -   [How to deploy an app](./HowToDeployAnApp.md)

docs/tutorials/HowToUseAService.md

@@ -144,16 +144,16 @@ Next, we will fill in the implementation of `AttributeService`:
 
 ```ts
 // src/apps/empty-app/services.ts
-import { ServiceOptions, ServiceType } from "@open-pioneer/runtime";
+import { ServiceOptions, ApplicationContext } from "@open-pioneer/runtime";
 
 interface References {
-    ctx: ServiceType<"runtime.ApplicationContext">;
+    ctx: ApplicationContext;
 }
 
 const CLASS_NAME = "my-custom-class";
 
 export class AttributeService {
-    private _ctx: ServiceType<"runtime.ApplicationContext">;
+    private _ctx: ApplicationContext;
 
     // (1)
     constructor(options: ServiceOptions<References>) {
@@ -174,9 +174,8 @@ export class AttributeService {
 
     We use a `References` interface to declare which types (and names) to expect.
     This should match the configuration in your `build.config.mjs`.
-    Inside the `References` interface, you can either use the type `ApplicationContext` directly (from the runtime package) or use the `ServiceType<...>` helper, which retrieves the interface type when given an interface name.
-
-    > If you want to register your own interface names and types, see _TypeScript Integration_ in the [Services Reference](../reference/Services.md).
+    Inside the `References` interface, we use the `ApplicationContext` type directly from the runtime package.
+    You should consult the documentation of a package to find out which TypeScript type(s) correspond to the interfaces you want to reference.
 
     Note that this is only needed if you're using TypeScript. When you're using JavaScript, just use the `options` parameter directly.
 

pnpm-workspace.yaml

@@ -43,8 +43,7 @@ catalog:
 
   # Other dependencies
   "@chakra-ui/icons": ^2.2.4
-  "@chakra-ui/react": ^2.8.2
-  "@chakra-ui/system": ^2.6.2
+  "@chakra-ui/react": ^2.10.4
   "@emotion/cache": ^11.13.0
   "@emotion/react": ^11.13.0
   "@emotion/styled": ^11.13.0
@@ -99,5 +98,5 @@ catalog:
   typescript: ~5.6.3
   vite-plugin-eslint: ^1.8.1
   vite-plugin-checker: ^0.8.0
-  vite: ^5.4.9
+  vite: ^5.4.14
   vitest: ^2.1.3

vite.config.ts

@@ -93,13 +93,18 @@ export default defineConfig(({ mode }) => {
                     inline: [/@open-pioneer[/\\]/]
                 }
             }
-        }
+        },
 
-        // disable hot reloading
-        // in dev mode press "r" to trigger reload and make changes active
-        // See also: https://vitejs.dev/config/server-options.html#server-hmr
-        /*server: {
-            hmr: false
-        }*/
+        // prettier-ignore
+        server: {
+            // Use this option if your development setup uses hostnames other than localhost.
+            // See also https://vite.dev/config/server-options.html#server-allowedhosts
+            // allowedHosts: [".example.com"],
+
+            // disable hot reloading
+            // in dev mode press "r" to trigger reload and make changes active
+            // See also: https://vitejs.dev/config/server-options.html#server-hmr
+            // hmr: false
+        }
     };
 });