diff --git a/packages/toolkit/utils/__tests__/blocks.js b/packages/toolkit/utils/__tests__/blocks.js index 86d3f265..94c2fffa 100644 --- 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 index 9c42864b..d7a1b2f1 100644 --- 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} asset - The asset path to transform + * @returns {string|Array} + */ +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 };