Merge pull request #12 from SuperFlyTV/fix/assets-handling

fix: assets json not being generated

Author: Julusian

lib/main.d.ts

@@ -1,5 +1,6 @@
 declare module '*.png' // PNG file format is handled by rollup
 declare module '*.svg' // SVG file format is handled by rollup
+declare module '*.gif' // GIF file format is handled by rollup
 
 declare const __VERSION__: string // Injected by rollup
 declare const __VERSION_TSR__: string // Injected by rollup

lib/rollup/configFactory.mjs

@@ -8,6 +8,7 @@ import replacePlugin from '@rollup/plugin-replace'
 import { getTranslations } from '../translation/bundle.mjs'
 import { urlPluginExt } from './urlPlugin.mjs'
 import { uploadPlugin } from './uploadPlugin.mjs'
+import { tsconfigPathsPlugin } from './tsPathsPlugin.mjs'
 import path from 'node:path'
 import { execSync } from 'node:child_process'
 import { createRequire } from 'node:module'
@@ -73,10 +74,11 @@ export async function RollupConfigFactory(sources, distDir, server, development)
 
 					generatedCode: 'es2015',
 
-					plugins: [server ? uploadPlugin(server, id, development) : undefined],
+					plugins: [uploadPlugin(server, id, development)],
 				},
 
 				plugins: [
+					tsconfigPathsPlugin(),
 					replacePlugin({
 						preventAssignment: true,
 						values: {

lib/rollup/tsPathsPlugin.mjs

@@ -0,0 +1,55 @@
+import alias from '@rollup/plugin-alias'
+import ts from 'typescript'
+import path from 'node:path'
+import fs from 'node:fs'
+
+function escapeRegExp(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+/**
+ * Reimplement a tsconfig-paths plugin for rollup, so that image assets follow the tsconfig paths.
+ *
+ */
+export function tsconfigPathsPlugin() {
+	const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
+
+	if (!fs.existsSync(tsconfigPath)) return null
+
+	const read = ts.readConfigFile(tsconfigPath, ts.sys.readFile)
+	if (read.error) return null
+
+	const parsed = ts.parseJsonConfigFileContent(read.config, ts.sys, path.dirname(tsconfigPath))
+	const baseUrl = parsed.options.baseUrl || '.'
+	const paths = parsed.options.paths || {}
+
+	const absBase = path.resolve(path.dirname(tsconfigPath), baseUrl)
+
+	const entries = []
+	for (const [key, targets] of Object.entries(paths)) {
+		if (!targets || !targets[0]) continue
+		const keyIsWildcard = key.endsWith('/*')
+		const target = targets[0]
+		const targetIsWildcard = target.endsWith('/*')
+		const cleanedKey = keyIsWildcard ? key.slice(0, -2) : key
+		const cleanedTarget = targetIsWildcard ? target.slice(0, -2) : target
+		const replacementBase = path.join(absBase, cleanedTarget)
+
+		if (keyIsWildcard) {
+			entries.push({
+				// match imports like '@foo/bar' -> '@foo/(.*)'
+				find: new RegExp('^' + escapeRegExp(cleanedKey) + '/(.*)$'),
+				replacement: replacementBase + '/$1',
+			})
+		} else {
+			entries.push({
+				find: cleanedKey,
+				replacement: replacementBase,
+			})
+		}
+	}
+
+	if (entries.length === 0) return null
+
+	return alias({ entries })
+}

lib/rollup/uploadPlugin.mjs

@@ -2,6 +2,8 @@
 import fs from 'node:fs/promises'
 
 /**
+ * Plugin to upload the built blueprint to a server after bundling
+ * This also writes out a json file of the assets, which is needed for the bundling process
  * @returns {import('rollup').OutputPlugin}
  */
 export const uploadPlugin = (server, bundleId, development) => {
@@ -20,23 +22,25 @@ export const uploadPlugin = (server, bundleId, development) => {
 				} else if (item.type === 'chunk') {
 					if (!item.isEntry) throw new Error(`Expected a single code chunk: ${id}`)
 
-					try {
-						const res = await fetch(
-							server + '/api/private/blueprints/restore/' + bundleId + (development ? '?developmentMode=1' : ''),
-							{
-								method: 'POST',
-								body: item.code,
-								headers: {
-									'Content-Type': 'text/javascript',
-								},
+					if (server) {
+						try {
+							const res = await fetch(
+								server + '/api/private/blueprints/restore/' + bundleId + (development ? '?developmentMode=1' : ''),
+								{
+									method: 'POST',
+									body: item.code,
+									headers: {
+										'Content-Type': 'text/javascript',
+									},
+								}
+							)
+							if (!res.ok) {
+								throw new Error(`HTTP ${res.status}: ${await res.text()}`)
 							}
-						)
-						if (!res.ok) {
-							throw new Error(`HTTP ${res.status}: ${await res.text()}`)
+							console.log(`Blueprints '${id}' uploaded`)
+						} catch (e) {
+							console.error(`Blueprints '${id}' upload failed:`, e.toString(), e.stack)
 						}
-						console.log(`Blueprints '${id}' uploaded`)
-					} catch (e) {
-						console.error(`Blueprints '${id}' upload failed:`, e.toString(), e.stack)
 					}
 				} else {
 					// @ts-expect-error
@@ -48,20 +52,22 @@ export const uploadPlugin = (server, bundleId, development) => {
 				fs.writeFile(`dist/${bundleId}-assets.json`, JSON.stringify(assetsBundle)).catch((e) => {
 					console.error(`Failed to write assets bundle to disk:`, e.toString(), e.stack)
 				})
-				try {
-					const res = await fetch(server + '/api/private/blueprints/assets', {
-						method: 'POST',
-						body: JSON.stringify(assetsBundle),
-						headers: {
-							'Content-Type': 'application/json',
-						},
-					})
-					if (!res.ok) {
-						throw new Error(`HTTP ${res.status}: ${await res.text()}`)
+				if (server) {
+					try {
+						const res = await fetch(server + '/api/private/blueprints/assets', {
+							method: 'POST',
+							body: JSON.stringify(assetsBundle),
+							headers: {
+								'Content-Type': 'application/json',
+							},
+						})
+						if (!res.ok) {
+							throw new Error(`HTTP ${res.status}: ${await res.text()}`)
+						}
+						console.log(`Blueprints assets uploaded`)
+					} catch (e) {
+						console.error(`Blueprints assets upload failed:`, e.toString(), e.stack)
 					}
-					console.log(`Blueprints assets uploaded`)
-				} catch (e) {
-					console.error(`Blueprints assets upload failed:`, e.toString(), e.stack)
 				}
 			} else {
 				fs.rm(`dist/${bundleId}-assets.json`).catch(() => {

lib/rollup/urlPlugin.mjs

@@ -10,7 +10,7 @@ import fs from 'node:fs/promises'
  * @returns {import('rollup').Plugin}
  */
 export const urlPluginExt = (destDir) => {
-	const include = ['**/*.svg', '**/*.png']
+	const include = ['**/*.svg', '**/*.png', '**/*.gif']
 	const sourceDir = null // TODO?
 	const fileName = '[hash][extname]'
 

package.json

@@ -18,6 +18,7 @@
 		"node": ">=20.0.0"
 	},
 	"dependencies": {
+		"@rollup/plugin-alias": "^6.0.0",
 		"@rollup/plugin-commonjs": "^29.0.0",
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^16.0.3",

yarn.lock

@@ -354,6 +354,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/plugin-alias@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@rollup/plugin-alias@npm:6.0.0"
+  peerDependencies:
+    rollup: ">=4.0.0"
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10c0/d3cd6a236b6d209dd9d3882fab84ad6bd253dcc5bb9fc1308ac1c08d4217ce5cfac805271ebe36daab4816f6bf5096b1f824a9eb1eb4158c67976fde765266be
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-commonjs@npm:^29.0.0":
   version: 29.0.0
   resolution: "@rollup/plugin-commonjs@npm:29.0.0"
@@ -3292,6 +3304,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "sofie-blueprint-tools@workspace:."
   dependencies:
+    "@rollup/plugin-alias": "npm:^6.0.0"
     "@rollup/plugin-commonjs": "npm:^29.0.0"
     "@rollup/plugin-json": "npm:^6.1.0"
     "@rollup/plugin-node-resolve": "npm:^16.0.3"