Merge pull request #711 from umbraco/bugfix-browser-compatible-msw

Bugfix: Use iife version of MSW

.github/CONTRIBUTING.md

@@ -44,7 +44,7 @@ The frontend has an API formatter that takes the OpenAPI schema file and convert
 
 **How to convert it:**
 
-* Run `npm run generate:api`
+- Run `npm run generate:api`
 
 ## A contribution example
 
@@ -56,9 +56,9 @@ The frontend has an API formatter that takes the OpenAPI schema file and convert
 
 Links for Lit examples and documentation:
 
-* [https://lit.dev](https://lit.dev)
-* [https://lit.dev/docs/](https://lit.dev/docs/)
-* [https://lit.dev/playground/](https://lit.dev/playground/)
+- [https://lit.dev](https://lit.dev)
+- [https://lit.dev/docs/](https://lit.dev/docs/)
+- [https://lit.dev/playground/](https://lit.dev/playground/)
 
 ### Functionality
 
@@ -128,28 +128,29 @@ To declare the Published Cache Status Dashboard as a new manifest, we need to ad
 
 Let’s go through each of these properties…
 
-* Type: can be one of the following:
-  * section - examples include: `Content`, `Media`
-  * dashboard - a view within a section. Examples include: the welcome dashboard
-  * propertyEditorUI
-  * editorView
-  * propertyAction
-  * tree
-  * editor
-  * treeItemAction
+- Type: can be one of the following:
 
-* Alias: is the unique key used to identify this item.
-* Name: is the human-readable name for this item.
+  - section - examples include: `Content`, `Media`
+  - dashboard - a view within a section. Examples include: the welcome dashboard
+  - propertyEditorUI
+  - editorView
+  - propertyAction
+  - tree
+  - editor
+  - treeItemAction
 
-* ElementName: this is the customElementName declared on the element at the top of the file i.e
+- Alias: is the unique key used to identify this item.
+- Name: is the human-readable name for this item.
+
+- ElementName: this is the customElementName declared on the element at the top of the file i.e
 
 ```typescript
 @customElement('umb-dashboard-published-status')
 ```
 
-* Loader: references a function call to import the file that the element is declared within
+- Loader: references a function call to import the file that the element is declared within
 
-* Meta: allows us to reference additional data - in our case we can specify the section that our dashboard will sit within, the pathname that will be displayed in the url and the weight of the section
+- Meta: allows us to reference additional data - in our case we can specify the section that our dashboard will sit within, the pathname that will be displayed in the url and the weight of the section
 
 ## API mock handlers
 
@@ -162,19 +163,19 @@ From the existing functionality, we can see that this is a string message that i
 So to define this, we must first add a handler for the Published Status called `published-status.handlers.ts` within the mocks/domains folder. In this file we will have code that looks like the following:
 
 ```typescript
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbracoPath } from '@umbraco-cms/utils';
 
 export const handlers = [
- rest.get(umbracoPath('/published-cache/status'), (_req, res, ctx) => {
-  return res(
-   // Respond with a 200 status code
-   ctx.status(200),
-   ctx.json<string>(
-    'Database cache is ok. ContentStore contains 1 item and has 1 generation and 0 snapshot. MediaStore contains 5 items and has 1 generation and 0 snapshot.'
-   )
-  );
- }),
+	rest.get(umbracoPath('/published-cache/status'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<string>(
+				'Database cache is ok. ContentStore contains 1 item and has 1 generation and 0 snapshot. MediaStore contains 5 items and has 1 generation and 0 snapshot.'
+			)
+		);
+	}),
 ];
 ```
 
@@ -211,7 +212,7 @@ In depth: [https://storybook.js.org/docs/web-components/get-started/introduction
 
 Reference: [https://ambitious-stone-0033b3603.1.azurestaticapps.net/](https://ambitious-stone-0033b3603.1.azurestaticapps.net/)
 
-* Locally: `npm run storybook`
+- Locally: `npm run storybook`
 
 For Umbraco UI stories, please navigate to [https://uui.umbraco.com/](https://uui.umbraco.com/)
 

e2e/installer.spec.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 import { ProblemDetailsModel, RuntimeLevelModel, ServerStatusResponseModel } from '@umbraco-cms/backoffice/backend-api';

e2e/upgrader.spec.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 import { ProblemDetailsModel, RuntimeLevelModel, ServerStatusResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { expect, test } from './test';

index.html

@@ -5,7 +5,8 @@
 		<link rel="icon" type="image/svg+xml" href="favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Umbraco</title>
-		<script type="module" src="/src/index.ts"></script>
+		<script src="/node_modules/msw/lib/iife/index.js"></script>
+		<script type="module" src="index.ts"></script>
 		<base href="/" />
 	</head>
 

src/index.ts → index.ts

@@ -1,5 +1,5 @@
-import { UmbAppElement } from './app/app.element';
-import { startMockServiceWorker } from './core/mocks/browser';
+import { UmbAppElement } from './src/app/app.element';
+import { startMockServiceWorker } from './src/core/mocks';
 
 if (import.meta.env.VITE_UMBRACO_USE_MSW === 'on') {
 	startMockServiceWorker();

src/core/mocks/browser-handlers.ts

@@ -1,36 +1,36 @@
-import { handlers as dataTypeHandlers } from './domains/data-type';
-import { handlers as relationTypeHandlers } from './domains/relation-type.handlers';
-import { handlers as documentTypeHandlers } from './domains/document-type.handlers';
-import { handlers as installHandlers } from './domains/install.handlers';
-import * as manifestsHandlers from './domains/manifests.handlers';
-import { handlers as publishedStatusHandlers } from './domains/published-status.handlers';
-import * as serverHandlers from './domains/server.handlers';
-import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
-import { handlers as userHandlers } from './domains/user.handlers';
-import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
-import { handlers as usersHandlers } from './domains/users.handlers';
-import { handlers as userGroupsHandlers } from './domains/user-groups.handlers';
-import { handlers as examineManagementHandlers } from './domains/examine-management.handlers';
-import { handlers as modelsBuilderHandlers } from './domains/modelsbuilder.handlers';
-import { handlers as healthCheckHandlers } from './domains/health-check.handlers';
-import { handlers as profilingHandlers } from './domains/performance-profiling.handlers';
-import { handlers as documentHandlers } from './domains/document.handlers';
-import { handlers as mediaHandlers } from './domains/media.handlers';
-import { handlers as dictionaryHandlers } from './domains/dictionary.handlers';
-import { handlers as mediaTypeHandlers } from './domains/media-type.handlers';
-import { handlers as memberGroupHandlers } from './domains/member-group.handlers';
-import { handlers as memberHandlers } from './domains/member.handlers';
-import { handlers as memberTypeHandlers } from './domains/member-type.handlers';
-import { handlers as templateHandlers } from './domains/template.handlers';
-import { handlers as languageHandlers } from './domains/language.handlers';
-import { handlers as cultureHandlers } from './domains/culture.handlers';
-import { handlers as redirectManagementHandlers } from './domains/redirect-management.handlers';
-import { handlers as logViewerHandlers } from './domains/log-viewer.handlers';
-import { handlers as packageHandlers } from './domains/package.handlers';
-import { handlers as rteEmbedHandlers } from './domains/rte-embed.handlers';
-import { handlers as stylesheetHandlers } from './domains/stylesheet.handlers';
-import { handlers as partialViewsHandlers } from './domains/partial-views.handlers';
-import { handlers as tagHandlers } from './domains/tag-handlers';
+import { handlers as dataTypeHandlers } from './handlers/data-type';
+import { handlers as relationTypeHandlers } from './handlers/relation-type.handlers';
+import { handlers as documentTypeHandlers } from './handlers/document-type.handlers';
+import { handlers as installHandlers } from './handlers/install.handlers';
+import * as manifestsHandlers from './handlers/manifests.handlers';
+import { handlers as publishedStatusHandlers } from './handlers/published-status.handlers';
+import * as serverHandlers from './handlers/server.handlers';
+import { handlers as upgradeHandlers } from './handlers/upgrade.handlers';
+import { handlers as userHandlers } from './handlers/user.handlers';
+import { handlers as telemetryHandlers } from './handlers/telemetry.handlers';
+import { handlers as usersHandlers } from './handlers/users.handlers';
+import { handlers as userGroupsHandlers } from './handlers/user-groups.handlers';
+import { handlers as examineManagementHandlers } from './handlers/examine-management.handlers';
+import { handlers as modelsBuilderHandlers } from './handlers/modelsbuilder.handlers';
+import { handlers as healthCheckHandlers } from './handlers/health-check.handlers';
+import { handlers as profilingHandlers } from './handlers/performance-profiling.handlers';
+import { handlers as documentHandlers } from './handlers/document.handlers';
+import { handlers as mediaHandlers } from './handlers/media.handlers';
+import { handlers as dictionaryHandlers } from './handlers/dictionary.handlers';
+import { handlers as mediaTypeHandlers } from './handlers/media-type.handlers';
+import { handlers as memberGroupHandlers } from './handlers/member-group.handlers';
+import { handlers as memberHandlers } from './handlers/member.handlers';
+import { handlers as memberTypeHandlers } from './handlers/member-type.handlers';
+import { handlers as templateHandlers } from './handlers/template.handlers';
+import { handlers as languageHandlers } from './handlers/language.handlers';
+import { handlers as cultureHandlers } from './handlers/culture.handlers';
+import { handlers as redirectManagementHandlers } from './handlers/redirect-management.handlers';
+import { handlers as logViewerHandlers } from './handlers/log-viewer.handlers';
+import { handlers as packageHandlers } from './handlers/package.handlers';
+import { handlers as rteEmbedHandlers } from './handlers/rte-embed.handlers';
+import { handlers as stylesheetHandlers } from './handlers/stylesheet.handlers';
+import { handlers as partialViewsHandlers } from './handlers/partial-views.handlers';
+import { handlers as tagHandlers } from './handlers/tag-handlers';
 
 const handlers = [
 	serverHandlers.serverVersionHandler,

src/core/mocks/e2e-handlers.ts

@@ -1,19 +1,19 @@
-import { handlers as dataTypeHandlers } from './domains/data-type';
-import { handlers as documentTypeHandlers } from './domains/document-type.handlers';
-import { handlers as installHandlers } from './domains/install.handlers';
-import * as manifestsHandlers from './domains/manifests.handlers';
-import { handlers as publishedStatusHandlers } from './domains/published-status.handlers';
-import * as serverHandlers from './domains/server.handlers';
-import { handlers as upgradeHandlers } from './domains/upgrade.handlers';
-import { handlers as userHandlers } from './domains/user.handlers';
-import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
-import { handlers as examineManagementHandlers } from './domains/examine-management.handlers';
-import { handlers as modelsBuilderHandlers } from './domains/modelsbuilder.handlers';
-import { handlers as profileHandlers } from './domains/performance-profiling.handlers';
-import { handlers as healthCheckHandlers } from './domains/health-check.handlers';
-import { handlers as languageHandlers } from './domains/language.handlers';
-import { handlers as redirectManagementHandlers } from './domains/redirect-management.handlers';
-import { handlers as packageHandlers } from './domains/package.handlers';
+import { handlers as dataTypeHandlers } from './handlers/data-type';
+import { handlers as documentTypeHandlers } from './handlers/document-type.handlers';
+import { handlers as installHandlers } from './handlers/install.handlers';
+import * as manifestsHandlers from './handlers/manifests.handlers';
+import { handlers as publishedStatusHandlers } from './handlers/published-status.handlers';
+import * as serverHandlers from './handlers/server.handlers';
+import { handlers as upgradeHandlers } from './handlers/upgrade.handlers';
+import { handlers as userHandlers } from './handlers/user.handlers';
+import { handlers as telemetryHandlers } from './handlers/telemetry.handlers';
+import { handlers as examineManagementHandlers } from './handlers/examine-management.handlers';
+import { handlers as modelsBuilderHandlers } from './handlers/modelsbuilder.handlers';
+import { handlers as profileHandlers } from './handlers/performance-profiling.handlers';
+import { handlers as healthCheckHandlers } from './handlers/health-check.handlers';
+import { handlers as languageHandlers } from './handlers/language.handlers';
+import { handlers as redirectManagementHandlers } from './handlers/redirect-management.handlers';
+import { handlers as packageHandlers } from './handlers/package.handlers';
 
 export const handlers = [
 	serverHandlers.serverRunningHandler,

src/core/mocks/domains/culture.handlers.ts → src/core/mocks/handlers/culture.handlers.ts

@@ -1,4 +1,5 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
+
 import { umbCulturesData } from '../data/culture.data';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 

src/core/mocks/domains/data-type/copy.handlers.ts → src/core/mocks/handlers/data-type/copy.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDataTypeData } from '../../data/data-type.data';
 import { slug } from './slug';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/data-type/detail.handlers.ts → src/core/mocks/handlers/data-type/detail.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDataTypeData } from '../../data/data-type.data';
 import { slug } from './slug';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/data-type/folder.handlers.ts → src/core/mocks/handlers/data-type/folder.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDataTypeData } from '../../data/data-type.data';
 import { slug } from './slug';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/data-type/item.handlers.ts → src/core/mocks/handlers/data-type/item.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDataTypeData } from '../../data/data-type.data';
 import { slug } from './slug';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/data-type/move.handlers.ts → src/core/mocks/handlers/data-type/move.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDataTypeData } from '../../data/data-type.data';
 import { slug } from './slug';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/data-type/tree.handlers.ts → src/core/mocks/handlers/data-type/tree.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDataTypeData } from '../../data/data-type.data';
 import { slug } from './slug';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/dictionary.handlers.ts → src/core/mocks/handlers/dictionary.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDictionaryData } from '../data/dictionary.data';
 import {
 	ImportDictionaryRequestModel,

src/core/mocks/domains/document-type.handlers.ts → src/core/mocks/handlers/document-type.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDocumentTypeData } from '../data/document-type.data';
 import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/document.handlers.ts → src/core/mocks/handlers/document.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbDocumentData } from '../data/document.data';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 

src/core/mocks/domains/examine-management.handlers.ts → src/core/mocks/handlers/examine-management.handlers.ts

@@ -1,8 +1,13 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { searchResultMockData, getIndexByName, PagedIndexers } from '../data/examine.data';
 
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
-import { IndexResponseModel, PagedIndexResponseModel, PagedSearcherResponseModel, PagedSearchResultResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	IndexResponseModel,
+	PagedIndexResponseModel,
+	PagedSearcherResponseModel,
+	PagedSearchResultResponseModel,
+} from '@umbraco-cms/backoffice/backend-api';
 
 export const handlers = [
 	rest.get(umbracoPath('/indexer'), (_req, res, ctx) => {

src/core/mocks/domains/health-check.handlers.ts → src/core/mocks/handlers/health-check.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 
 import {
 	getGroupByName,

src/core/mocks/domains/install.handlers.ts → src/core/mocks/handlers/install.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import {
 	DatabaseInstallResponseModel,
 	InstallVResponseModel,

src/core/mocks/domains/language.handlers.ts → src/core/mocks/handlers/language.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbLanguagesData } from '../data/languages.data';
 import { LanguageResponseModel, ProblemDetailsModel } from '@umbraco-cms/backoffice/backend-api';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/log-viewer.handlers.ts → src/core/mocks/handlers/log-viewer.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbLogViewerData } from '../data/log-viewer.data';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 import { SavedLogSearchRequestModel } from '@umbraco-cms/backoffice/backend-api';

src/core/mocks/domains/manifests.handlers.ts → src/core/mocks/handlers/manifests.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 
 import type { PackageManifestResponse } from '../../../backoffice/packages/types';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';

src/core/mocks/domains/media-type.handlers.ts → src/core/mocks/handlers/media-type.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbMediaTypeData } from '../data/media-type.data';
 
 // TODO: add schema

src/core/mocks/domains/media.handlers.ts → src/core/mocks/handlers/media.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbMediaData } from '../data/media.data';
 import type { MediaDetails } from '../../../backoffice/media/media';
 

src/core/mocks/domains/member-group.handlers.ts → src/core/mocks/handlers/member-group.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbMemberGroupData } from '../data/member-group.data';
 
 // TODO: add schema

src/core/mocks/domains/member-type.handlers.ts → src/core/mocks/handlers/member-type.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbMemberTypeData } from '../data/member-type.data';
 
 // TODO: add schema

src/core/mocks/domains/member.handlers.ts → src/core/mocks/handlers/member.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { umbMemberData } from '../data/member.data';
 
 // TODO: add schema

src/core/mocks/domains/modelsbuilder.handlers.ts → src/core/mocks/handlers/modelsbuilder.handlers.ts

@@ -1,7 +1,11 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
-import { ModelsBuilderResponseModel, ModelsModeModel, OutOfDateStatusResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import {
+	ModelsBuilderResponseModel,
+	ModelsModeModel,
+	OutOfDateStatusResponseModel,
+} from '@umbraco-cms/backoffice/backend-api';
 
 export const handlers = [
 	rest.post(umbracoPath('/models-builder/build'), async (_req, res, ctx) => {

src/core/mocks/domains/package.handlers.ts → src/core/mocks/handlers/package.handlers.ts

@@ -1,4 +1,4 @@
-import { rest } from 'msw';
+const { rest } = window.MockServiceWorker;
 import { UmbId } from '@umbraco-cms/backoffice/id';
 
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';