Merge pull request #2033 from umbraco/v14/chore/check-paths-in-dist-cms

Chore: Check path length in dist-cms instead of src

Author: iOvergaard

.github/workflows/build_test.yml

@@ -36,6 +36,7 @@ jobs:
       - run: npm ci --no-audit --no-fund --prefer-offline
       - run: npm run lint:errors
       - run: npm run build:for:cms
+      - run: npm run check:paths
       - run: npm run generate:jsonschema:dist
 
   test:

devops/build/check-path-length.js

@@ -18,6 +18,28 @@ console.log('\n-----------------------------------');
 console.log('Results:');
 console.log('-----------------------------------\n');
 
+const hasError = checkPathLength(PROJECT_DIR);
+
+if (hasError) {
+	console.log('\n-----------------------------------');
+	console.log(ERROR_COLOR, 'Path length check failed');
+	console.log('-----------------------------------\n');
+	if (IS_CI && processExitCode) {
+		process.exit(processExitCode);
+	}
+} else {
+	console.log('\n-----------------------------------');
+	console.log(SUCCESS_COLOR, 'Path length check passed');
+	console.log('-----------------------------------\n');
+}
+
+// Functions
+
+/**
+ * Recursively check the path length of all files in a directory.
+ * @param {string} dir - The directory to check for path lengths
+ * @returns {boolean}
+ */
 function checkPathLength(dir) {
 	const files = readdirSync(dir);
 	let hasError = false;
@@ -28,11 +50,11 @@ function checkPathLength(dir) {
 			hasError = true;
 
 			if (IS_AZURE_PIPELINES) {
-				console.error(`##vso[task.logissue type=warning;sourcepath=${filePath};]Path exceeds maximum length of ${MAX_PATH_LENGTH} characters: ${filePath} with ${filePath.length} characters`);
+				console.error(`##vso[task.logissue type=error;sourcepath=${mapFileToSourcePath(filePath)};]Path exceeds maximum length of ${MAX_PATH_LENGTH} characters: ${filePath} with ${filePath.length} characters`);
 			} else if (IS_GITHUB_ACTIONS) {
-				console.error(`::warning file=${filePath},title=Path exceeds ${MAX_PATH_LENGTH} characters::Paths should not be longer than ${MAX_PATH_LENGTH} characters to support WIN32 systems. The file ${filePath} exceeds that with ${filePath.length - MAX_PATH_LENGTH} characters.`);
+				console.error(`::error file=${mapFileToSourcePath(filePath)},title=Path exceeds ${MAX_PATH_LENGTH} characters::Paths should not be longer than ${MAX_PATH_LENGTH} characters to support WIN32 systems. The file ${filePath} exceeds that with ${filePath.length - MAX_PATH_LENGTH} characters.`);
 			} else {
-				console.error(`Path exceeds maximum length of ${MAX_PATH_LENGTH} characters: ${FILE_PATH_COLOR}`, filePath, filePath.length - MAX_PATH_LENGTH);
+				console.error(FILE_PATH_COLOR, mapFileToSourcePath(filePath), '(exceeds by', filePath.length - MAX_PATH_LENGTH, 'chars)');
 			}
 		}
 
@@ -47,17 +69,12 @@ function checkPathLength(dir) {
 	return hasError;
 }
 
-const hasError = checkPathLength(PROJECT_DIR, MAX_PATH_LENGTH);
-
-if (hasError) {
-	console.error('\n-----------------------------------');
-	console.error(ERROR_COLOR, 'Path length check failed');
-	console.error('-----------------------------------\n');
-	if (IS_CI && processExitCode) {
-		process.exit(processExitCode);
-	}
-} else {
-	console.log('\n-----------------------------------');
-	console.log(SUCCESS_COLOR, 'Path length check passed');
-	console.log('-----------------------------------\n');
+/**
+ * Maps a file path to a source path for CI logs.
+ * @remark This might not always work as expected, especially on bundled files, but it's a best effort to map the file path to a source path.
+ * @param {string} file - The file path to map to a source path
+ * @returns {string}
+ */
+function mapFileToSourcePath(file) {
+	return file.replace(PROJECT_DIR, 'src').replace('.js', '.ts');
 }

package.json

@@ -151,13 +151,14 @@
 		"backoffice:test:e2e": "npx playwright test",
 		"build-storybook": "npm run wc-analyze && storybook build",
 		"build:for:cms": "npm run build && npm run build:workspaces && npm run generate:manifest && npm run package:validate && node ./devops/build/copy-to-cms.js",
-		"build:for:npm": "npm run build && npm run generate:manifest && npm run package:validate",
+		"build:for:npm": "npm run build -- --declaration && npm run generate:manifest && npm run package:validate",
 		"build:for:static": "vite build",
 		"build:vite": "tsc && vite build --mode staging",
 		"build:workspaces": "npm run build -ws --if-present",
-		"build": "tsc --project ./src/tsconfig.build.json && rollup -c ./src/rollup.config.js",
+		"build": "tsc --project ./src/tsconfig.build.json",
+		"postbuild": "rollup -c ./src/rollup.config.js",
 		"check": "npm run lint:errors && npm run compile && npm run build-storybook && npm run generate:jsonschema:dist",
-		"check:paths": "node ./devops/build/check-path-length.js src 140",
+		"check:paths": "node ./devops/build/check-path-length.js dist-cms 120",
 		"compile": "tsc",
 		"postinstall": "npm run generate:tsconfig",
 		"dev": "vite",
@@ -190,7 +191,7 @@
 		"wc-analyze": "wca **/*.element.ts --outFile dist-cms/custom-elements.json",
 		"generate:tsconfig": "node ./devops/tsconfig/index.js",
 		"generate:manifest": "node ./devops/build/create-umbraco-package.js",
-		"package:validate": "node ./devops/package/validate-exports.js && npm run check:paths",
+		"package:validate": "node ./devops/package/validate-exports.js",
 		"generate:ui-api-docs": "typedoc --options typedoc.config.js"
 	},
 	"engines": {

src/packages/media/media/property-editors/image-crops-configuration/index.ts

@@ -0,0 +1 @@
+export * from './property-editor-ui-image-crops.element.js';

src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.stories.ts

@@ -3,8 +3,8 @@ import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension
 export const manifest: ManifestPropertyEditorUi = {
 	type: 'propertyEditorUi',
 	alias: 'Umb.PropertyEditorUi.ImageCropsConfiguration',
-	name: 'Image Crops Configuration Property Editor UI',
-	element: () => import('./property-editor-ui-image-crops-configuration.element.js'),
+	name: 'Image Crops Property Editor UI',
+	element: () => import('./property-editor-ui-image-crops.element.js'),
 	meta: {
 		label: 'Image Crops Configuration',
 		icon: 'icon-autofill',

src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.test.ts

@@ -13,17 +13,13 @@ export type UmbCrop = {
 };
 
 /**
- * @element umb-property-editor-ui-image-crops-configuration
+ * @element umb-property-editor-ui-image-crops
  */
-@customElement('umb-property-editor-ui-image-crops-configuration')
-export class UmbPropertyEditorUIImageCropsConfigurationElement
-	extends UmbLitElement
-	implements UmbPropertyEditorUiElement
-{
+@customElement('umb-property-editor-ui-image-crops')
+export class UmbPropertyEditorUIImageCropsElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@query('#label')
 	private _labelInput!: HTMLInputElement;
 
-	//TODO MAKE TYPE
 	@property({ attribute: false })
 	value: UmbCrop[] = [];
 
@@ -188,7 +184,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 		`;
 	}
 
-	static override styles = [
+	static override readonly styles = [
 		UmbTextStyles,
 		css`
 			:host {
@@ -244,10 +240,10 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 	];
 }
 
-export default UmbPropertyEditorUIImageCropsConfigurationElement;
+export default UmbPropertyEditorUIImageCropsElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-property-editor-ui-image-crops-configuration': UmbPropertyEditorUIImageCropsConfigurationElement;
+		'umb-property-editor-ui-image-crops': UmbPropertyEditorUIImageCropsElement;
 	}
 }

src/packages/media/media/property-editors/image-crops/index.ts

@@ -0,0 +1,15 @@
+import type { UmbPropertyEditorUIImageCropsElement } from './property-editor-ui-image-crops.element.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import './property-editor-ui-image-crops.element.js';
+
+const meta: Meta<UmbPropertyEditorUIImageCropsElement> = {
+	title: 'Property Editor UIs/Image Crops',
+	id: 'umb-property-editor-ui-image-crops',
+	component: 'umb-property-editor-ui-image-crops',
+};
+
+export default meta;
+type Story = StoryObj<UmbPropertyEditorUIImageCropsElement>;
+
+export const Overview: Story = {};