NEXT-24207 - add routing for iframes

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.0.10] - 06.06.2023
+
+### Added
+
+- Added `location.updateUrl`, `location.startAutoUrlUpdater` and `location.stopAutoUrlUpdater` to allow extension developer to update the URL of the iframe so that even after reload the correct sub-route inside the iFrame gets opened
+
 ## [3.0.9] - 01.06.2023
 
 ### Added

docs/docs/guide/2_api-reference/location.md

@@ -112,4 +112,47 @@ sw.location.stopAutoResizer();
 No parameters needed.
 
 #### Return value:
-This method does not have a return value.
+This method does not have a return value.
+
+## URL changes inside your app
+
+Important: You can track and emit your URL changes only inside your own main module or settings page.
+
+### Update URL
+
+Send the current URL of your iFrame to the administration. When the user reloads the whole page your iFrame will get the
+last page you sent to the administration.
+
+#### Usage:
+
+```ts
+const currentUrl = window.location.href;
+
+sw.location.updateUrl(new URL(currentUrl))
+```
+
+#### Parameters:
+| Name            | Required | Default | Description                           |
+| :-------------- | :------- | :------ | :------------------------------------ |
+| First parameter | true     |         | An URL object which contains your URL |
+
+### Start automatic URL updates
+
+To avoid manually sending URL changes you can use this helper methods. It sends automatically changes in your URL to the
+administration.
+
+#### Usage:
+
+```ts
+sw.location.startAutoUrlUpdater();
+```
+
+### Stop automatic URL updates
+
+If you had started an automatic URL updater before then you can stop it by calling this method.
+
+#### Usage:
+
+```ts
+sw.location.stopAutoUrlUpdater();
+```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopware-ag/admin-extension-sdk",
   "license": "MIT",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "repository": "git://github.com/shopware/admin-extension-sdk.git",
   "description": "The SDK for App iframes to communicate with the Shopware Administration",
   "keywords": [

src/location/index.ts

@@ -50,6 +50,40 @@ export const stopAutoResizer = ():void => {
   }
 };
 
+export const updateUrl = (url: URL): Promise<void|null> => {
+  return send('locationUpdateUrl', {
+    hash: url.hash,
+    pathname: url.pathname,
+    searchParams: [...url.searchParams.entries()],
+    locationId: getLocationId(),
+  });
+};
+
+let urlUpdateInterval: null|number = null;
+
+export const startAutoUrlUpdater = ():void => {
+  let prevUrl: string|undefined = undefined;
+
+  if (urlUpdateInterval) {
+    clearInterval(urlUpdateInterval);
+  }
+
+  urlUpdateInterval = setInterval(() => {
+    const currUrl = window.location.href;
+
+    if (currUrl !== prevUrl) {
+      prevUrl = currUrl;
+      void updateUrl(new URL(currUrl));
+    }
+  }, 50) as unknown as number;
+};
+
+export const stopAutoUrlUpdater = ():void => {
+  if (urlUpdateInterval) {
+    clearInterval(urlUpdateInterval);
+  }
+};
+
 export const MAIN_HIDDEN = 'sw-main-hidden';
 
 export type locationUpdateHeight = {
@@ -65,3 +99,39 @@ export type locationUpdateHeight = {
    */
   locationId: string | null,
 }
+
+export type locationUpdateUrl = {
+  responseType: void,
+
+  /**
+   * The hash of the url
+   * 
+   * @example
+   * #/sw/dashboard
+   */
+  hash: string,
+
+  /**
+   * The pathname of the url
+   *
+   * @example
+   * /
+   */
+  pathname: string,
+
+  /**
+   * The searchParams of the url
+   * 
+   * @example
+   * [
+   *  ['foo', 'bar'],
+   *  ['baz', 'qux'],
+   * ]
+   */
+  searchParams: Array<[string, string]>,
+
+  /**
+   * The locationID of the current element
+   */
+  locationId: string | null,
+}

src/messages.types.ts

@@ -5,7 +5,7 @@ import type { uiComponentSectionRenderer } from './ui/componentSection/index';
 import type { uiTabsAddTabItem } from './ui/tabs';
 import type { uiModulePaymentOverviewCard } from './ui/module/payment/overviewCard';
 import type { cmsRegisterElement } from './ui/cms';
-import type { locationUpdateHeight } from './location/index';
+import type { locationUpdateHeight, locationUpdateUrl } from './location/index';
 import type { menuItemAdd } from './ui/menu';
 import type { settingsItemAdd } from './ui/settings';
 import type { mainModuleAdd } from './ui/mainModule';
@@ -51,6 +51,7 @@ export interface ShopwareMessageTypes {
   uiModulePaymentOverviewCard: uiModulePaymentOverviewCard,
   cmsRegisterElement: cmsRegisterElement,
   locationUpdateHeight: locationUpdateHeight,
+  locationUpdateUrl: locationUpdateUrl,
   menuItemAdd: menuItemAdd,
   settingsItemAdd: settingsItemAdd,
   mainModuleAdd: mainModuleAdd,