Fix/remove tsup (#503)

* Merge conflicts

* Remove bundling

* Move ts patch to root

* Fix testing

.changeset/eight-pans-reflect.md

@@ -0,0 +1,10 @@
+---
+"@tokens-studio/graph-engine-nodes-design-tokens": minor
+"@tokens-studio/graph-editor": minor
+"@tokens-studio/graph-engine": minor
+"@tokens-studio/graph-engine-nodes-image": minor
+"@tokens-studio/graph-engine-migration": minor
+"@tokens-studio/graph-engine-nodes-fs": minor
+---
+
+Removes tsup completely to prevent bundling, and rather to use raw typescript compilation

.gitignore

@@ -8,4 +8,5 @@ dist
 docs
 yarn-error.log
 out
-data/postgres
+data/postgres
+*.tsbuildinfo

package.json

@@ -41,6 +41,7 @@
     ]
   },
   "dependencies": {
+    "ts-patch": "^3.2.1",
     "patch-package": "^8.0.0"
   },
   "devDependencies": {

packages/graph-editor/package.json

@@ -130,7 +130,6 @@
     "resq": "^1.11.0",
     "start-server-and-test": "^2.0.4",
     "storybook": "^8.0.9",
-    "ts-patch": "^3.2.1",
     "typescript": "^5.4.5",
     "typescript-transform-paths": "^3.5.1",
     "vite": "^5.2.10",

packages/graph-editor/src/data/version.ts

@@ -1 +1 @@
-export const version = '4.1.1';
+export const version = '4.2.0';

packages/graph-editor/src/index.tsx

@@ -12,7 +12,6 @@ export * from './hooks/index.js';
 export * from './components/panels/dropPanel/index.js';
 //Export the menu items
 export * from './components/menubar/index.js';
-
 //Export the interface for custom controls
 export * from './components/controls/interface.js';
 //Default controls

packages/graph-engine/package.json

@@ -22,8 +22,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tspc  -p tsconfig.prod.json",
+    "dev": "tspc  -p tsconfig.prod.json --watch",
     "docs": "typedoc && typedoc --out docs --json ./docs/docs.json",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
@@ -37,6 +37,7 @@
   "dependencies": {
     "@bundled-es-modules/deepmerge": "^4.3.1",
     "@tokens-studio/types": "^0.3.0",
+    "ajv": "^8.17.1",
     "color-blind-esm": "^0.1.4",
     "colorjs.io": "^0.5.2",
     "compare-versions": "^6.1.0",
@@ -61,14 +62,14 @@
     "@tokens-studio/prettier-config-custom": "*",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.15.11",
-    "tsup": "^8.1.0",
     "typedoc": "^0.24.7",
     "typescript": "^5.4.5",
+    "typescript-transform-paths": "^3.5.1",
     "vitest": "^1.6.0"
   },
   "keywords": [
     "studio",
     "tokens",
     "ui"
   ]
-}
+}

packages/graph-engine/src/graph/graph.ts

@@ -806,7 +806,7 @@ export class Graph {
 			}
 
 			return acc.concat(target);
-		}, []);
+		}, [] as Node[]);
 		//Cheaper to emit once
 		this.emit('valueSent', edges);
 

packages/graph-engine/src/nodes/color/colorToString.ts

@@ -41,7 +41,7 @@ export default class NodeDefinition extends Node {
 	execute(): void | Promise<void> {
 		const color = this.getInput('color');
 		let space = this.getInput('space');
-		let format = undefined;
+		let format: { format: string } | undefined = undefined;
 
 		if (space == 'hex') {
 			space = 'srgb';

packages/graph-engine/src/nodes/color/contrastingAlpha.ts

@@ -11,7 +11,7 @@ import {
 } from '../../schemas/index.js';
 import { ContrastAlgorithm } from '../../types/index.js';
 import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { Input, Output } from '../../programmatic';
+import { Input, Output } from '../../programmatic/index.js';
 import { flattenAlpha } from './lib/flattenAlpha.js';
 import Color from 'colorjs.io';
 

packages/graph-engine/src/nodes/curves/bezier.ts

@@ -1,7 +1,7 @@
 import { Curve } from '../../types.js';
 import { CurveSchema, NumberSchema } from '../../schemas/index.js';
 import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput, ToOutput } from '../../programmatic';
+import { ToInput, ToOutput } from '../../programmatic/index.js';
 
 export default class BezierCurveNode extends Node {
 	static title = 'Bezier Curve';

packages/graph-engine/src/nodes/curves/presetBeziers.ts

@@ -1,7 +1,7 @@
 import { Curve } from '../../types.js';
 import { CurveSchema, StringSchema } from '../../schemas/index.js';
 import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput, ToOutput } from '../../programmatic';
+import { ToInput, ToOutput } from '../../programmatic/index.js';
 
 export const presetBeziers = {
 	easeInOutSine: [0.445, 0.05, 0.55, 0.95],

packages/graph-engine/src/nodes/generic/subgraph.ts

@@ -36,8 +36,8 @@ export default class SubgraphNode extends Node {
 		//Pass capabilities down
 		this._innerGraph.capabilities = this.getGraph().capabilities;
 
-		let input: InputNode;
-		let output: OutputNode;
+		let input: InputNode | undefined = undefined;
+		let output: OutputNode | undefined = undefined;
 
 		if (!existing) {
 			input = new InputNode({ graph: this._innerGraph });
@@ -57,16 +57,16 @@ export default class SubgraphNode extends Node {
 					output = node as OutputNode;
 				}
 			});
-
-			if (!input) throw new Error('No input node found');
-			if (!output) throw new Error('No output node found');
 		}
 
+		if (!input) throw new Error('No input node found');
+		if (!output) throw new Error('No output node found');
+
 		autorun(() => {
 			//Get the existing inputs
 			const existing = this.inputs;
 			//Iterate through the inputs of the input node in the inner graph
-			Object.entries(input.inputs).map(([key, value]) => {
+			Object.entries(input!.inputs).map(([key, value]) => {
 				//If the key doesn't exist in the existing inputs, add it
 				if (!existing[key] && !value.annotations[hideFromParentSubgraph]) {
 					//Always add it as visible
@@ -91,7 +91,7 @@ export default class SubgraphNode extends Node {
 		autorun(() => {
 			const existing = this.outputs;
 			const existingPorts = Object.keys(existing);
-			Object.entries(output.inputs).map(([key, value]) => {
+			Object.entries(output!.inputs).map(([key, value]) => {
 				//If the key doesn't exist in the existing inputs, add it
 				if (!existing[key] && !value.annotations[hideFromParentSubgraph]) {
 					//Always add it as visible
@@ -108,7 +108,7 @@ export default class SubgraphNode extends Node {
 
 			//Remove any outputs that are no longer in the inner graph
 			existingPorts.forEach(port => {
-				if (!output.inputs[port]) {
+				if (!output!.inputs[port]) {
 					this.removeOutput(port);
 				}
 			});
@@ -150,7 +150,7 @@ export default class SubgraphNode extends Node {
 			inputs
 		});
 
-		Object.entries(result.output).forEach(([key, value]) => {
+		Object.entries(result.output || {}).forEach(([key, value]) => {
 			this.setOutput(key, value.value, value.type);
 		});
 	}

packages/graph-engine/src/nodes/math/rangeMapping.ts

@@ -2,7 +2,7 @@
 
 import { BooleanSchema, NumberSchema } from '../../schemas/index.js';
 import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput, ToOutput } from '../../programmatic';
+import { ToInput, ToOutput } from '../../programmatic/index.js';
 
 export default class RangeMappingNode extends Node {
 	static title = 'Range Mapping';

packages/graph-engine/src/nodes/preview/colorCompare.ts

@@ -1,5 +1,5 @@
 import { Color } from '../../types.js';
-import { ColorSchema } from '../../schemas';
+import { ColorSchema } from '../../schemas/index.js';
 import { Node } from '../../programmatic/node.js';
 import { ToInput } from '../../index.js';
 

packages/graph-engine/src/nodes/string/interpolate.ts

@@ -2,7 +2,7 @@
 
 import { INodeDefinition, Node } from '../../programmatic/node.js';
 import { StringSchema } from '../../schemas/index.js';
-import { ToInput, ToOutput } from '../../programmatic';
+import { ToInput, ToOutput } from '../../programmatic/index.js';
 import { annotatedDynamicInputs } from '../../annotations/index.js';
 
 export default class StringInterpolationNode extends Node {
@@ -52,7 +52,7 @@ export default class StringInterpolationNode extends Node {
 			this.setOutput('value', interpolatedString);
 		} catch (error) {
 			this.error = new Error(
-				`Error during string interpolation: ${error.message}`
+				`Error during string interpolation: ${(error as Error).message}`
 			);
 		}
 	}

packages/graph-engine/src/programmatic/input.ts

@@ -63,7 +63,7 @@ export class Input<T = any> extends Port<T> {
 				) {
 					const graph = this.node.getGraph();
 					const sourceNodesOutputTypes = this._edges.map(edge => {
-						const outputs = graph.getNode(edge.source).outputs;
+						const outputs = graph.getNode(edge.source)!.outputs;
 						return outputs[edge.sourceHandle].type;
 					});
 
@@ -80,7 +80,7 @@ export class Input<T = any> extends Port<T> {
 							items: sourceNodesOutputTypes[0]
 						};
 					} else {
-						this._dynamicType = undefined;
+						this._dynamicType = null;
 					}
 				} else {
 					this._dynamicType = opts.type;
@@ -96,7 +96,7 @@ export class Input<T = any> extends Port<T> {
 	 * Resets the value of the input to the default value
 	 */
 	reset() {
-		this._dynamicType = undefined;
+		this._dynamicType = null;
 		return (this._value = getDefaults(this._type) as T);
 	}
 
@@ -160,7 +160,7 @@ export class Input<T = any> extends Port<T> {
 
 	deserialize(serialized: SerializedInput) {
 		this.visible = serialized.visible ?? true;
-		this._dynamicType = serialized.dynamicType || undefined;
+		this._dynamicType = serialized.dynamicType || null;
 		this.annotations = serialized.annotations || {};
 		this._value = serialized.value;
 	}

packages/graph-engine/src/programmatic/node.ts

@@ -58,7 +58,7 @@ export class Node {
 
 	private _graph: Graph;
 
-	public error?: Error = null;
+	public error: Error | null = null;
 
 	constructor(props: INodeDefinition) {
 		this.id = props.id || uuid();
@@ -167,7 +167,7 @@ export class Node {
 		});
 		try {
 			await this.execute();
-			this.error = undefined;
+			this.error = null;
 		} catch (err) {
 			console.log(err);
 			this.error = err as Error;

packages/graph-engine/src/programmatic/output.ts

@@ -29,7 +29,7 @@ export class Output<T = any> extends Port<T> {
 
 	set(value: T, type?: GraphSchema) {
 		this._value = value;
-		this._dynamicType = type;
+		this._dynamicType = type || null;
 	}
 
 	connect(target: Input) {

packages/graph-engine/src/programmatic/port.ts

@@ -20,7 +20,7 @@ export class Port<T = any> {
 	public visible: boolean = false;
 	public node: Node;
 	//Note that we need null values for the observable to work
-	protected _dynamicType?: GraphSchema = null;
+	protected _dynamicType: GraphSchema | null = null;
 	protected _type: GraphSchema = AnySchema;
 	protected _value: T;
 	// Used to store arbitrary meta data. Most commonly used in the UI

packages/graph-engine/src/schemas/utils.ts

@@ -1,11 +1,13 @@
-export const extractArray = (schema: Record<string, unknown>) => {
+import { type SchemaObject } from 'ajv';
+
+export const extractArray = (schema: SchemaObject): SchemaObject => {
 	if (schema.type === 'array') {
 		return schema.items;
 	}
 	return schema;
 };
 
-export const arrayOf = (schema: Record<string, unknown>) => {
+export const arrayOf = (schema: SchemaObject) => {
 	return {
 		type: 'array',
 		items: schema

packages/graph-engine/src/types.ts

@@ -33,7 +33,7 @@ export type NodeStart = {
 
 export type NodeRun = {
 	node: Node;
-	error?: Error;
+	error: Error | null;
 	start: number;
 	end: number;
 };

packages/graph-engine/tests/suites/nodeUsage.test.ts

@@ -31,7 +31,7 @@ describe('nodeUsage', () => {
 		//Input is a special case with dynamic values so it needs to be executed and computed to generate the output values
 		const res = await input.run();
 
-		expect(res.error).to.be.undefined;
+		expect(res.error).to.be.null;
 
 		const edge = input.outputs.foo.connect(output.inputs.input);
 

packages/graph-engine/tests/suites/nodes/array/arrify.test.ts

@@ -1,9 +1,9 @@
-import { AnySchema, StringSchema } from '@/index.js';
-import { Graph } from '@/graph/graph.js';
-import { arrayOf } from '@/schemas/utils.js';
+import { AnySchema, StringSchema } from '../../../../src/index.js';
+import { Graph } from '../../../../src/graph/graph.js';
+import { arrayOf } from '../../../../src/schemas/utils.js';
 import { describe, expect, test } from 'vitest';
-import ConstantSourceNode from '@/nodes/generic/constant.js';
-import Node from '@/nodes/array/arrify.js';
+import ConstantSourceNode from '../../../../src/nodes/generic/constant.js';
+import Node from '../../../../src/nodes/array/arrify.js';
 
 describe('array/arrify', () => {
 	test('exports an array by default', async () => {

packages/graph-engine/tests/suites/nodes/array/flatten.test.ts

@@ -1,8 +1,8 @@
-import { Graph } from '@/graph/graph.js';
-import { NumberSchema } from '@/index.js';
-import { arrayOf } from '@/schemas/utils.js';
+import { Graph } from '../../../../src/graph/graph.js';
+import { NumberSchema } from '../../../../src/index.js';
+import { arrayOf } from '../../../../src/schemas/utils.js';
 import { describe, expect, test } from 'vitest';
-import Node from '@/nodes/array/flatten.js';
+import Node from '../../../../src/nodes/array/flatten.js';
 
 describe('array/flatten', () => {
 	test('does not work without inputs', async () => {