update logic and tests to pass

10up · Sep 24, 2024 · ee914c0 · ee914c0
1 parent 7225d5c
commit ee914c0
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 47 deletions.
diff --git a/packages/toolkit/utils/__tests__/blocks.js b/packages/toolkit/utils/__tests__/blocks.js
@@ -22,7 +22,7 @@ describe('transformBlockJson', () => {
 				}),
 				absoluteteFileName,
 			),
-		).toEqual(JSON.stringify({ version: 1, style: 'file:./style.css' }));
+		).toEqual(JSON.stringify({ version: 1, style: 'file:./style.css' }, null, 2));
 	});
 
 	it('does nothing if style is not set', () => {
@@ -34,9 +34,13 @@ describe('transformBlockJson', () => {
 				absoluteteFileName,
 			),
 		).toEqual(
-			JSON.stringify({
-				script: 'file:./script.js',
-			}),
+			JSON.stringify(
+				{
+					script: 'file:./script.js',
+				},
+				null,
+				2,
+			),
 		);
 	});
 
@@ -48,7 +52,7 @@ describe('transformBlockJson', () => {
 				}),
 				absoluteteFileName,
 			),
-		).toEqual(JSON.stringify({ style: 'style.css' }));
+		).toEqual(JSON.stringify({ style: 'style.css' }, null, 2));
 
 		expect(
 			transformBlockJson(
@@ -57,7 +61,7 @@ describe('transformBlockJson', () => {
 				}),
 				absoluteteFileName,
 			),
-		).toEqual(JSON.stringify({ style: ['another-css', 'style.css'] }));
+		).toEqual(JSON.stringify({ style: ['another-css', 'style.css'] }, null, 2));
 	});
 
 	it('adds version if style are set but version is not', () => {

diff --git a/packages/toolkit/utils/blocks.js b/packages/toolkit/utils/blocks.js
@@ -1,6 +1,30 @@
 const path = require('path');
 const { getFileContentHash } = require('./file');
 
+/**
+ * Transform the asset path from `.ts or .tsx` to `.js`
+ *
+ * When a block.json file has a script or style property that points to a `.ts or .tsx` file,
+ * this function will transform the path to point to the `.js` file instead.
+ *
+ * @param {string|Array<string>} asset - The asset path to transform
+ * @returns {string|Array<string>}
+ */
+function transformTSAsset(asset) {
+	function replaceExtension(filePath) {
+		const isFilePath = filePath.startsWith('file:');
+		if (!isFilePath) {
+			return filePath;
+		}
+
+		// replace the `.ts or .tsx` extension with `.js`
+		const jsPath = filePath.replace(/\.tsx?$/, '.js');
+		return jsPath;
+	}
+
+	return Array.isArray(asset) ? asset.map(replaceExtension) : replaceExtension(asset);
+}
+
 const transformBlockJson = (content, absoluteFilename) => {
 	const rawMetadata = content.toString();
 	if (rawMetadata === '') {
@@ -15,56 +39,50 @@ const transformBlockJson = (content, absoluteFilename) => {
 	const isFilePath = styleArray?.some((styleName) => styleName?.startsWith('file:'));
 	const hasVersion = version !== undefined;
 
-	if (hasVersion || !isFilePath) {
-		return content;
-	}
-
 	const absoluteDirectory = absoluteFilename.replace(/block\.json$/, '');
 
 	let styleFileContentHash = '';
 
-	styleArray.forEach((rawStylePath) => {
-		if (!rawStylePath.startsWith('file:')) {
-			return;
-		}
-		const stylePath = rawStylePath.replace('file:', '');
-		const absoluteStylePath = path.join(absoluteDirectory, stylePath);
-		styleFileContentHash += getFileContentHash(absoluteStylePath);
-	});
+	if (!hasVersion && isFilePath) {
+		styleArray.forEach((rawStylePath) => {
+			if (!rawStylePath.startsWith('file:')) {
+				return;
+			}
+			const stylePath = rawStylePath.replace('file:', '');
+			const absoluteStylePath = path.join(absoluteDirectory, stylePath);
+			styleFileContentHash += getFileContentHash(absoluteStylePath);
+		});
+	}
 
-	const { script, editorScript, viewScript, viewScriptModule, scriptModule } = metadata;
+	const newMetadata = {
+		...metadata,
+	};
 
-	const jsAssets = [script, editorScript, viewScript, viewScriptModule, scriptModule].filter(
-		Boolean,
-	);
+	if (!hasVersion && styleFileContentHash) {
+		newMetadata.version = styleFileContentHash;
+	}
 
-	const transformedJsAssets = jsAssets.map((asset) => {
-		const assetArray = Array.isArray(asset) ? asset : [asset];
+	if (metadata.script) {
+		newMetadata.script = transformTSAsset(metadata.script);
+	}
 
-		return assetArray.map((rawJsPath) => {
-			if (!rawJsPath.startsWith('file:')) {
-				return rawJsPath;
-			}
-			const isFilePath = rawJsPath.startsWith('file:');
-			if (!isFilePath) {
-				return rawJsPath;
-			}
+	if (metadata.editorScript) {
+		newMetadata.editorScript = transformTSAsset(metadata.editorScript);
+	}
 
-			// replace the `.ts or .tsx` extension with `.js`
-			const jsPath = rawJsPath.replace(/\.tsx?$/, '.js');
-			return jsPath;
-		});
-	});
-
-	return JSON.stringify(
-		{
-			...metadata,
-			version: styleFileContentHash,
-			...transformedJsAssets,
-		},
-		null,
-		2,
-	);
+	if (metadata.viewScript) {
+		newMetadata.viewScript = transformTSAsset(metadata.viewScript);
+	}
+
+	if (metadata.viewScriptModule) {
+		newMetadata.viewScriptModule = transformTSAsset(metadata.viewScriptModule);
+	}
+
+	if (metadata.scriptModule) {
+		newMetadata.scriptModule = transformTSAsset(metadata.scriptModule);
+	}
+
+	return JSON.stringify(newMetadata, null, 2);
 };
 
 module.exports = { transformBlockJson };