Merge branch 'main' into dependabot/npm_and_yarn/plop-4.0.0

.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"

.github/workflows/build_test.yml

@@ -5,9 +5,9 @@ name: Build and test
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
   # Allows GitHub to use this workflow to validate the merge queue
   merge_group:
@@ -20,33 +20,32 @@ env:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20]
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci --no-audit --no-fund --prefer-offline
-    - run: npm run lint
-    - run: npm run build
-    - run: npm run generate:jsonschema:dist
-    - run: sudo npx playwright install-deps
-    - run: npm test
-    - name: Upload Code Coverage reports
-      uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: code-coverage
-        path: coverage/
-        retention-days: 30
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci --no-audit --no-fund --prefer-offline
+      - run: npm run lint
+      - run: npm run build
+      - run: npm run generate:jsonschema:dist
+      - run: sudo npx playwright install-deps
+      - run: npm test
+      - name: Upload Code Coverage reports
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: code-coverage
+          path: coverage/
+          retention-days: 30
     # Commented out since it is outdated and is quite spammy
     # - name: Report code coverage
     #   uses: zgosalvez/github-actions-report-lcov@v2

.github/workflows/npm-publish-github-packages.yml

@@ -47,7 +47,7 @@ jobs:
           ref: ${{ inputs.ref }}
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: 'npm'
           registry-url: https://registry.npmjs.org/
           scope: '@umbraco-cms'

.nvmrc

@@ -1 +1 @@
-18.16
+20.9

.storybook/preview-head.html

@@ -9,7 +9,7 @@
   #root-inner {
     height: 100%;
   }
-	
+
 	body {
 		padding: 0px !important;
 	}
@@ -23,7 +23,7 @@
 		line-height: 1.3em;
 	}
 </style>
-<script src="https://cdn.jsdelivr.net/npm/msw/lib/iife/index.js"></script>
+<script src="umbraco/backoffice/msw/index.js"></script>
 <script>
 	(function () {
 		window.addEventListener('load', () => {

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}'`),
+					});
+				},
+			};
+		},
+	},
 };