From 2ad198680524363c13ea1477315b4aa2a3780079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Tue, 9 Jul 2024 17:45:33 +0200 Subject: [PATCH 1/5] fix transform file extension for .ts and .tsx assets inside block.json files --- packages/toolkit/config/webpack/plugins.js | 4 +-- packages/toolkit/utils/__tests__/blocks.js | 16 ++++++------ packages/toolkit/utils/blocks.js | 29 ++++++++++++++++++++-- packages/toolkit/utils/index.js | 4 +-- 4 files changed, 39 insertions(+), 14 deletions(-) diff --git a/packages/toolkit/config/webpack/plugins.js b/packages/toolkit/config/webpack/plugins.js index 1d00c6ee..4ea7c0cd 100644 --- a/packages/toolkit/config/webpack/plugins.js +++ b/packages/toolkit/config/webpack/plugins.js @@ -19,7 +19,7 @@ const { fromConfigRoot, hasProjectFile, getArgFromCLI, - maybeInsertStyleVersionHash, + transformBlockJson, } = require('../../utils'); const { isPackageInstalled } = require('../../utils/package'); @@ -164,7 +164,7 @@ module.exports = ({ noErrorOnMissing: true, to: 'blocks/[path][name][ext]', transform: (content, absoluteFilename) => { - return maybeInsertStyleVersionHash(content, absoluteFilename); + return transformBlockJson(content, absoluteFilename); }, }, useBlockAssets && { diff --git a/packages/toolkit/utils/__tests__/blocks.js b/packages/toolkit/utils/__tests__/blocks.js index 9399f8fd..4703cb5b 100644 --- a/packages/toolkit/utils/__tests__/blocks.js +++ b/packages/toolkit/utils/__tests__/blocks.js @@ -1,5 +1,5 @@ import path from 'path'; -import { maybeInsertStyleVersionHash } from '../blocks'; +import { transformBlockJson } from '../blocks'; import { getFileContentHash as getFileContentHashMock } from '../file'; jest.mock('../file', () => { @@ -10,12 +10,12 @@ jest.mock('../file', () => { return module; }); -describe('maybeInsertStyleVersionHash', () => { +describe('transformBlockJson', () => { const absoluteteFileName = path.join('dist', 'blocks', 'block.json'); it('does nothing if version is set', () => { expect( - maybeInsertStyleVersionHash( + transformBlockJson( JSON.stringify({ version: 1, style: 'file:./style.css', @@ -27,7 +27,7 @@ describe('maybeInsertStyleVersionHash', () => { it('does nothing if style is not set', () => { expect( - maybeInsertStyleVersionHash( + transformBlockJson( JSON.stringify({ script: 'file:./script.js', }), @@ -42,7 +42,7 @@ describe('maybeInsertStyleVersionHash', () => { it('does nothing if style does not start with file:', () => { expect( - maybeInsertStyleVersionHash( + transformBlockJson( JSON.stringify({ style: 'style.css', }), @@ -51,7 +51,7 @@ describe('maybeInsertStyleVersionHash', () => { ).toEqual(JSON.stringify({ style: 'style.css' })); expect( - maybeInsertStyleVersionHash( + transformBlockJson( JSON.stringify({ style: ['another-css', 'style.css'], }), @@ -64,7 +64,7 @@ describe('maybeInsertStyleVersionHash', () => { getFileContentHashMock.mockReturnValue('12345678'); expect( - maybeInsertStyleVersionHash( + transformBlockJson( JSON.stringify({ style: 'file:./style.css', }), @@ -86,7 +86,7 @@ describe('maybeInsertStyleVersionHash', () => { ); expect( - maybeInsertStyleVersionHash( + transformBlockJson( JSON.stringify({ style: ['another-style', 'file:./style2.css'], }), diff --git a/packages/toolkit/utils/blocks.js b/packages/toolkit/utils/blocks.js index 6a35677a..9c42864b 100644 --- a/packages/toolkit/utils/blocks.js +++ b/packages/toolkit/utils/blocks.js @@ -1,7 +1,7 @@ const path = require('path'); const { getFileContentHash } = require('./file'); -const maybeInsertStyleVersionHash = (content, absoluteFilename) => { +const transformBlockJson = (content, absoluteFilename) => { const rawMetadata = content.toString(); if (rawMetadata === '') { return content; @@ -32,14 +32,39 @@ const maybeInsertStyleVersionHash = (content, absoluteFilename) => { styleFileContentHash += getFileContentHash(absoluteStylePath); }); + const { script, editorScript, viewScript, viewScriptModule, scriptModule } = metadata; + + const jsAssets = [script, editorScript, viewScript, viewScriptModule, scriptModule].filter( + Boolean, + ); + + const transformedJsAssets = jsAssets.map((asset) => { + const assetArray = Array.isArray(asset) ? asset : [asset]; + + return assetArray.map((rawJsPath) => { + if (!rawJsPath.startsWith('file:')) { + return rawJsPath; + } + const isFilePath = rawJsPath.startsWith('file:'); + if (!isFilePath) { + return rawJsPath; + } + + // 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, ); }; -module.exports = { maybeInsertStyleVersionHash }; +module.exports = { transformBlockJson }; diff --git a/packages/toolkit/utils/index.js b/packages/toolkit/utils/index.js index ca7245bf..391e388e 100644 --- a/packages/toolkit/utils/index.js +++ b/packages/toolkit/utils/index.js @@ -32,7 +32,7 @@ const { hasPackageProp, getPackagePath, getPackage, getPackageVersion } = requir const { displayWebpackStats } = require('./webpack'); -const { maybeInsertStyleVersionHash } = require('./blocks'); +const { transformBlockJson } = require('./blocks'); const { getProjectRoot, @@ -78,5 +78,5 @@ module.exports = { getTenUpScriptsPackageBuildConfig, hasWebpackConfig, displayWebpackStats, - maybeInsertStyleVersionHash, + transformBlockJson, }; From bb94bf5a9213f453173c6fd5e28a62f59133da84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Tue, 9 Jul 2024 17:48:52 +0200 Subject: [PATCH 2/5] add test cases --- packages/toolkit/utils/__tests__/blocks.js | 51 ++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/packages/toolkit/utils/__tests__/blocks.js b/packages/toolkit/utils/__tests__/blocks.js index 4703cb5b..86d3f265 100644 --- a/packages/toolkit/utils/__tests__/blocks.js +++ b/packages/toolkit/utils/__tests__/blocks.js @@ -107,4 +107,55 @@ describe('transformBlockJson', () => { path.join('dist', 'blocks', 'style2.css'), ); }); + + it('transforms ts and tsx to js', () => { + expect( + transformBlockJson( + JSON.stringify({ + script: 'file:./script.ts', + editorScript: 'file:./editor.tsx', + viewScript: 'file:./view.ts', + viewScriptModule: 'file:./view.tsx', + scriptModule: 'file:./script.tsx', + }), + absoluteteFileName, + ), + ).toEqual( + JSON.stringify( + { + script: 'file:./script.js', + editorScript: 'file:./editor.js', + viewScript: 'file:./view.js', + viewScriptModule: 'file:./view.js', + scriptModule: 'file:./script.js', + }, + null, + 2, + ), + ); + expect( + transformBlockJson( + JSON.stringify({ + script: ['file:./script.ts', 'file:./script.tsx'], + editorScript: ['file:./editor.ts', 'file:./editor.tsx'], + viewScript: ['file:./view.ts', 'file:./view.tsx'], + viewScriptModule: ['file:./view.tsx', 'file:./view.ts'], + scriptModule: ['file:./script.ts', 'file:./script.tsx'], + }), + absoluteteFileName, + ), + ).toEqual( + JSON.stringify( + { + script: ['file:./script.js', 'file:./script.js'], + editorScript: ['file:./editor.js', 'file:./editor.js'], + viewScript: ['file:./view.js', 'file:./view.js'], + viewScriptModule: ['file:./view.js', 'file:./view.js'], + scriptModule: ['file:./script.js', 'file:./script.js'], + }, + null, + 2, + ), + ); + }); }); From 7ce09d9a413f8bba3cf5d0d217a465dbb54c4955 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Tue, 9 Jul 2024 17:50:54 +0200 Subject: [PATCH 3/5] Create young-guests-deliver.md --- .changeset/young-guests-deliver.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/young-guests-deliver.md diff --git a/.changeset/young-guests-deliver.md b/.changeset/young-guests-deliver.md new file mode 100644 index 00000000..8576d4b6 --- /dev/null +++ b/.changeset/young-guests-deliver.md @@ -0,0 +1,5 @@ +--- +"10up-toolkit": patch +--- + +Fix: transform file extension for .ts and .tsx assets inside block.json files From ee914c02998ae39ff6f3176045f51ccc2dc6826a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Tue, 24 Sep 2024 07:20:22 +0200 Subject: [PATCH 4/5] update logic and tests to pass --- packages/toolkit/utils/__tests__/blocks.js | 16 ++-- packages/toolkit/utils/blocks.js | 100 ++++++++++++--------- 2 files changed, 69 insertions(+), 47 deletions(-) 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 }; From 95aeb0f4cbbd713cda5c1230c5293a7773dc2866 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Tue, 24 Sep 2024 07:23:24 +0200 Subject: [PATCH 5/5] simplify --- packages/toolkit/utils/blocks.js | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/packages/toolkit/utils/blocks.js b/packages/toolkit/utils/blocks.js index d7a1b2f1..55395a7d 100644 --- a/packages/toolkit/utils/blocks.js +++ b/packages/toolkit/utils/blocks.js @@ -1,6 +1,8 @@ const path = require('path'); const { getFileContentHash } = require('./file'); +const JS_ASSET_KEYS = ['script', 'editorScript', 'viewScript', 'viewScriptModule', 'scriptModule']; + /** * Transform the asset path from `.ts or .tsx` to `.js` * @@ -62,25 +64,11 @@ const transformBlockJson = (content, absoluteFilename) => { newMetadata.version = styleFileContentHash; } - if (metadata.script) { - newMetadata.script = transformTSAsset(metadata.script); - } - - if (metadata.editorScript) { - newMetadata.editorScript = transformTSAsset(metadata.editorScript); - } - - if (metadata.viewScript) { - newMetadata.viewScript = transformTSAsset(metadata.viewScript); - } - - if (metadata.viewScriptModule) { - newMetadata.viewScriptModule = transformTSAsset(metadata.viewScriptModule); - } - - if (metadata.scriptModule) { - newMetadata.scriptModule = transformTSAsset(metadata.scriptModule); - } + JS_ASSET_KEYS.forEach((key) => { + if (metadata[key]) { + newMetadata[key] = transformTSAsset(metadata[key]); + } + }); return JSON.stringify(newMetadata, null, 2); };