From 5897d3c934be3b1d8efc5a23dd5815ef6f64fad1 Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 16 Jul 2024 11:41:55 +0100 Subject: [PATCH] Fix watermark imports in published packages (#4180) Different bundlers have different support for importing non-JS assets. We can't reliably import SVGs in our public packages and rely on that to do the right thing. When I tried installing a canary to work on a new cloudflare template, vite was erroring out due to those imports. I had to patch them out to get things running. This diff replaces the file-based assets with inlined svg-in-js strings. I haven't been able to test this though because I'm not really sure how. @mimecuvalo could you take a look? ### Change type - [x] `bugfix` --- .../watermarks/watermark-desktop-sdk.svg | 18 -------- .../assets/watermarks/watermark-desktop.svg | 9 ---- .../assets/watermarks/watermark-mobile.svg | 6 --- .../lib/editor/managers/WatermarkManager.ts | 5 +-- .../src/lib/editor/managers/watermarks.ts | 9 ++++ scripts/refresh-assets.ts | 44 +++++++++++++++---- 6 files changed, 47 insertions(+), 44 deletions(-) delete mode 100644 packages/editor/assets/watermarks/watermark-desktop-sdk.svg delete mode 100644 packages/editor/assets/watermarks/watermark-desktop.svg delete mode 100644 packages/editor/assets/watermarks/watermark-mobile.svg create mode 100644 packages/editor/src/lib/editor/managers/watermarks.ts diff --git a/packages/editor/assets/watermarks/watermark-desktop-sdk.svg b/packages/editor/assets/watermarks/watermark-desktop-sdk.svg deleted file mode 100644 index 1b5af207d..000000000 --- a/packages/editor/assets/watermarks/watermark-desktop-sdk.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/packages/editor/assets/watermarks/watermark-desktop.svg b/packages/editor/assets/watermarks/watermark-desktop.svg deleted file mode 100644 index 845261351..000000000 --- a/packages/editor/assets/watermarks/watermark-desktop.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/editor/assets/watermarks/watermark-mobile.svg b/packages/editor/assets/watermarks/watermark-mobile.svg deleted file mode 100644 index d892b076e..000000000 --- a/packages/editor/assets/watermarks/watermark-mobile.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/editor/src/lib/editor/managers/WatermarkManager.ts b/packages/editor/src/lib/editor/managers/WatermarkManager.ts index 6dc560c11..88457f37a 100644 --- a/packages/editor/src/lib/editor/managers/WatermarkManager.ts +++ b/packages/editor/src/lib/editor/managers/WatermarkManager.ts @@ -1,9 +1,8 @@ -import watermarkDesktop from '../../../../assets/watermarks/watermark-desktop.svg' -import watermarkMobile from '../../../../assets/watermarks/watermark-mobile.svg' import { TL_CONTAINER_CLASS } from '../../TldrawEditor' import { getDefaultCdnBaseUrl } from '../../utils/assets' import { Editor } from '../Editor' import { LicenseFromKeyResult } from './LicenseManager' +import { watermarkDesktopSvg, watermarkMobileSvg } from './watermarks' export const WATERMARK_DESKTOP_FILENAME = 'watermark-desktop.svg' export const WATERMARK_MOBILE_FILENAME = 'watermark-mobile.svg' @@ -22,7 +21,7 @@ export class WatermarkManager { if (navigator.onLine && !this.forceLocal) { src = `${getDefaultCdnBaseUrl()}/${WATERMARKS_FOLDER}/${isMobile ? WATERMARK_MOBILE_FILENAME : WATERMARK_DESKTOP_FILENAME}` } else { - src = isMobile ? watermarkMobile : watermarkDesktop + src = `data:image/svg+xml;utf8,${isMobile ? watermarkMobileSvg : watermarkDesktopSvg}` } if (src !== watermark.src) { diff --git a/packages/editor/src/lib/editor/managers/watermarks.ts b/packages/editor/src/lib/editor/managers/watermarks.ts new file mode 100644 index 000000000..f5b1bbad1 --- /dev/null +++ b/packages/editor/src/lib/editor/managers/watermarks.ts @@ -0,0 +1,9 @@ +// This file is automatically generated by scripts/refresh-assets.ts. +// Do not edit manually. Or do, I'm a comment, not a cop. + +export const watermarkDesktopSdkSvg = + '' +export const watermarkDesktopSvg = + '' +export const watermarkMobileSvg = + '' diff --git a/scripts/refresh-assets.ts b/scripts/refresh-assets.ts index 1061eacab..e034c2c10 100644 --- a/scripts/refresh-assets.ts +++ b/scripts/refresh-assets.ts @@ -316,11 +316,35 @@ async function copyWatermarks() { watermark.endsWith(extension) ) - const destinationFolderPath = join(REPO_ROOT, 'packages', 'editor', 'assets', 'watermarks') - // Copy all items into the new folder - for (const item of itemsToCopy) { - await writeFile(join(destinationFolderPath, item), readFileSync(join(sourceFolderPath, item))) + const optimizedItems = itemsToCopy.map((watermark) => { + const watermarkPath = join(sourceFolderPath, watermark) + const content = readFileSync(watermarkPath, 'utf8') + const svg = optimize(content, { path: watermarkPath }) + return { fileName: watermark, data: svg.data } + }) + + const file = new CodeFile() + for (const { fileName, data } of optimizedItems) { + const varName = file.formatName(fileName) + file.append(`export const ${varName} = ${JSON.stringify(data)};`) } + + const destinationFolderPath = join( + REPO_ROOT, + 'packages', + 'editor', + 'src', + 'lib', + 'editor', + 'managers', + 'watermarks.ts' + ) + await writeCodeFile( + 'scripts/refresh-assets.ts', + 'typescript', + destinationFolderPath, + file.toString() + ) } // 5. ASSET DECLARATION FILES @@ -520,7 +544,7 @@ class Code { class CodeFile extends Code { private imports = new Map() - constructor(private header: string) { + constructor(private header: string = '') { super() } @@ -543,12 +567,16 @@ class CodeFile extends Code { return name } - getName(name: string, suffix?: number): string { - const formatted = `$_${name.replace(/\W+/g, '_')}${suffix || ''}` + formatName(name: string) { + return `$_${name.replace(/\W+/g, '_')}` .replace(/^\$_+(\D)/, (_, s) => s.toLowerCase()) .replace(/_+(.)/g, (_, s) => s.toUpperCase()) + } - if (this.toString().includes(formatted)) { + getName(name: string, suffix?: number): string { + const formatted = this.formatName(`${name}${suffix ?? ''}`) + + if (this.toString().match(formatted)) { return this.getName(name, (suffix ?? 1) + 1) }