eslint: add rule to detect erroneous external imports

.eslintrc.json

@@ -45,6 +45,12 @@
 				"local-rules/umb-class-prefix": "error",
 				"local-rules/prefer-static-styles-last": "warn",
 				"local-rules/ensure-relative-import-use-js-extension": "error",
+				"local-rules/enforce-umbraco-external-imports": [
+					"error",
+					{
+						"exceptions": ["@umbraco-cms", "@open-wc/testing", "@storybook", "msw", "."]
+					}
+				],
 				"@typescript-eslint/no-non-null-assertion": "off",
 				"@typescript-eslint/no-explicit-any": "warn",
 				"@typescript-eslint/no-unused-vars": "warn"

eslint-local-rules.cjs

@@ -338,4 +338,52 @@ module.exports = {
 			};
 		},
 	},
+
+	/** @type {import('eslint').Rule.RuleModule}*/
+	'enforce-umbraco-external-imports': {
+		meta: {
+			type: 'problem',
+			docs: {
+				description: 'Ensures that the application strictly uses node_modules imports from `@umbraco-cms/backoffice/external`. This is needed to run the application in the browser.',
+				recommended: true,
+			},
+			fixable: 'code',
+			schema: {
+				type: "array",
+				minItems: 0,
+				maxItems: 1,
+				items: [
+					{
+						type: "object",
+						properties: {
+							exceptions: { type: "array" }
+						},
+						additionalProperties: false
+					}
+				]
+			}
+		},
+		create: (context) => {
+			return {
+				ImportDeclaration: (node) => {
+					const { source } = node;
+					const { value } = source;
+
+					const options = context.options[0] || {};
+					const exceptions = options.exceptions || [];
+
+					// If import starts with any of the following, then it's allowed
+					if (exceptions.some(v => value.startsWith(v))) {
+						return;
+					}
+
+					context.report({
+						node,
+						message: 'node_modules imports should be proxied through `@umbraco-cms/backoffice/external`. Please create it if it does not exist.',
+						fix: (fixer) => fixer.replaceText(source, `'@umbraco-cms/backoffice/external${value.startsWith('/') ? '' : '/'}${value}'`),
+					});
+				},
+			};
+		},
+	},
 };

package.json

@@ -101,7 +101,7 @@
 		"auth:test:e2e": "npx playwright test --config apps/auth/",
 		"backoffice:test:e2e": "npx playwright test",
 		"test:e2e": "npm run auth:test:e2e && npm run backoffice:test:e2e",
-		"lint": "eslint src apps e2e",
+		"lint": "eslint src",
 		"lint:errors": "npm run lint -- --quiet",
 		"lint:fix": "npm run lint -- --fix",
 		"format": "prettier 'src/**/*.ts' -- check",

src/apps/app/index.ts

@@ -1,4 +1,3 @@
 export * from './app-context-config.interface.js';
-export * from './app-error.element.js';
 export * from './app.element.js';
 export * from './app.context.js';

src/external/monaco-editor/index.ts

@@ -1,3 +1,4 @@
+/* eslint local-rules/enforce-umbraco-external-imports: 0 */
 import styles from 'monaco-editor/min/vs/editor/editor.main.css';
 //eslint-disable-next-line
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';

src/external/sanitize-html/index.ts

@@ -1,3 +1,4 @@
+/* eslint local-rules/enforce-umbraco-external-imports: 0 */
 import DOMPurify from 'dompurify';
 
 const sanitizeHtml = DOMPurify.sanitize;

src/external/tinymce/index.ts

@@ -1,3 +1,4 @@
+/* eslint local-rules/enforce-umbraco-external-imports: 0 */
 /**
  * TinyMce is a CommonJS module, but in order to make @web/test-runner happy
  * we need to load it as a module and then manually register it in the browser

src/libs/extension-api/functions/create-extension-element.test.ts

@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
-import { customElement } from 'lit/decorators.js';
 import { ManifestElement, ManifestElementAndApi } from '../types.js';
 import { createExtensionElement } from './create-extension-element.function.js';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
 
 
 

src/packages/core/extension-registry/conditions/types.ts

@@ -1,6 +1,6 @@
-import type { UserPermissionConditionConfig } from '@umbraco-cms/backoffice/user-permission';
 import type { SectionAliasConditionConfig } from './section-alias.condition.js';
 import type { SwitchConditionConfig } from './switch.condition.js';
+import type { UserPermissionConditionConfig } from '@umbraco-cms/backoffice/user-permission';
 import type {
 	WorkspaceAliasConditionConfig,
 	WorkspaceEntityTypeConditionConfig,

src/packages/core/localization/stories/localize.element.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
 import type { UmbLocalizeElement } from '../localize.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 import '../localize.element.js';
 
 const meta: Meta<UmbLocalizeElement> = {

src/packages/core/section/index.ts

@@ -3,6 +3,5 @@ export * from './section-sidebar/index.js';
 export * from './section-sidebar-context-menu/index.js';
 export * from './section-sidebar-menu/index.js';
 export * from './section-sidebar-menu-with-entity-actions/index.js';
-export * from './section-main-views/index.js';
 export * from './section-default.element.js';
 export * from './section.context.js';

src/packages/core/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.stories.ts

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-
 import type { UmbSectionSidebarMenuWithEntityActionsElement } from './section-sidebar-menu-with-entity-actions.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
 import './section-sidebar-menu-with-entity-actions.element.js';
 
 export default {

src/packages/core/sorter/stories/sorter.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
 import type UmbTestSorterControllerElement from './test-sorter-controller.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 import './test-sorter-controller.element.js';
 
 const meta: Meta<UmbTestSorterControllerElement> = {

src/packages/documents/documents/user-permissions/repository/document-permission.repository.ts

@@ -1,4 +1,3 @@
-import { t } from 'msw/lib/glossary-de6278a9.js';
 import { UmbDocumentPermissionServerDataSource } from './document-permission.server.data.js';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 

src/packages/tags/repository/sources/tag.server.data.ts

@@ -1,4 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
 import { TagResource } from '@umbraco-cms/backoffice/backend-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';

src/packages/templating/scripts/workspace/scripts-workspace-edit.element.ts

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { UmbScriptsWorkspaceContext } from './scripts-workspace.context.js';
 import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import { UUITextStyles, UUIInputElement } from '@umbraco-cms/backoffice/external/uui';

src/packages/templating/stylesheets/repository/stylesheet.repository.ts

@@ -1,4 +1,3 @@
-import { Observable } from 'rxjs';
 import { StylesheetDetails } from '../index.js';
 import { UmbStylesheetTreeStore, UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN } from './stylesheet.tree.store.js';
 import { UmbStylesheetTreeServerDataSource } from './sources/stylesheet.tree.server.data.js';
@@ -7,6 +6,7 @@ import {
 	StylesheetGetFolderResponse,
 	UmbStylesheetFolderServerDataSource,
 } from './sources/stylesheet.folder.server.data.js';
+import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import {

src/packages/templating/stylesheets/workspace/stylesheet-workspace.element.ts

@@ -1,7 +1,6 @@
 import { serverFilePathFromUrlFriendlyPath } from '../../utils.js';
-import { UmbStylesheetWorkspaceEditorElement } from './stylesheet-workspace-editor.element.js';
 import { UmbStylesheetWorkspaceContext } from './stylesheet-workspace.context.js';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbRoute } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -10,7 +9,6 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
 @customElement('umb-stylesheet-workspace')
 export class UmbStylesheetWorkspaceElement extends UmbLitElement {
 	#workspaceContext = new UmbStylesheetWorkspaceContext(this);
-	#element = new UmbStylesheetWorkspaceEditorElement();
 
 	@state()
 	_routes: UmbRoute[] = [

src/packages/templating/stylesheets/workspace/views/code-editor/stylesheet-workspace-view-code-editor.element.ts

@@ -1,5 +1,5 @@
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_STYLESHEET_WORKSPACE_CONTEXT, UmbStylesheetWorkspaceContext } from '../../stylesheet-workspace.context.js';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';

src/packages/templating/templates/modals/query-builder/query-builder.element.ts

@@ -2,8 +2,8 @@ import { UmbTemplateRepository } from '../../repository/template.repository.js';
 import type { UmbQueryBuilderFilterElement } from './query-builder-filter.element.js';
 import { UUIComboboxListElement } from '@umbraco-cms/backoffice/external/uui';
 import { css, html, customElement, state, query, queryAll } from '@umbraco-cms/backoffice/external/lit';
-import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import {
+	UmbModalBaseElement ,
 	UMB_DOCUMENT_PICKER_MODAL,
 	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
 	UmbModalManagerContext,

src/shared/utils/media-helper.service.ts

@@ -2,7 +2,7 @@
 // contains only functions referenced by the TinyMCE editor
 // TODO: This should not be done in this way, we need to split this into seperate defined helper methods. This is also very specific to TinyMCE, so should be named that way.
 
-import { Editor, EditorEvent } from 'tinymce';
+import { tinymce } from '@umbraco-cms/backoffice/external/tinymce';
 
 export class UmbMediaHelper {
 	/**
@@ -11,7 +11,7 @@ export class UmbMediaHelper {
 	 * @param imageDomElement
 	 * @param imgUrl
 	 */
-	async sizeImageInEditor(editor: Editor, imageDomElement: HTMLElement, imgUrl?: string) {
+	async sizeImageInEditor(editor: tinymce.Editor, imageDomElement: HTMLElement, imgUrl?: string) {
 		const size = editor.dom.getSize(imageDomElement);
 		const maxImageSize = editor.options.get('maxImageSize');
 
@@ -94,7 +94,7 @@ export class UmbMediaHelper {
 	 *
 	 * @param editor
 	 */
-	async uploadBlobImages(editor: Editor) {
+	async uploadBlobImages(editor: tinymce.Editor) {
 		const content = editor.getContent();
 
 		// Upload BLOB images (dragged/pasted ones)
@@ -168,7 +168,7 @@ export class UmbMediaHelper {
 	 * @returns
 	 */
 	async onResize(
-		e: EditorEvent<{
+		e: tinymce.EditorEvent<{
 			target: HTMLElement;
 			width: number;
 			height: number;