Add ESM + CJS support for live-compositor and @live-compositor/core

.github/workflows/ts_sdk_check.yml

@@ -42,7 +42,7 @@ jobs:
 
             - name: Build
               working-directory: ./ts
-              run: npm run build
+              run: npm run build:all
 
             - name: Lint code
               working-directory: ./ts

ts/.eslintrc.base.json

@@ -8,6 +8,7 @@
     "prettier"
   ],
   "plugins": [
+    "import",
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
@@ -16,6 +17,17 @@
       "tsconfig.json"
     ]
   },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "**/tsconfig.json"
+      }
+    }
+  },
   "rules": {
     "prettier/prettier": ["error"],
     "@typescript-eslint/no-explicit-any": [0, {}],

ts/@live-compositor/browser-render/package.json

@@ -23,14 +23,5 @@
   },
   "peerDependencies": {
     "live-compositor": "^0.1.0"
-  },
-  "nx": {
-    "targets": {
-      "build": {
-        "dependsOn": [
-          "build-wasm"
-        ]
-      }
-    }
   }
 }

ts/@live-compositor/core/.eslintignore

@@ -1 +1,2 @@
-dist
+esm
+cjs

ts/@live-compositor/core/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+cjs
+esm

ts/@live-compositor/core/package.json

@@ -2,19 +2,30 @@
   "name": "@live-compositor/core",
   "version": "0.1.0",
   "description": "",
-  "main": "dist/index.js",
+  "type": "module",
+  "main": "cjs/index.js",
+  "exports": {
+    "import": "./esm/index.js",
+    "require": "./cjs/index.js",
+    "types": "./esm/index.d.ts"
+  },
   "scripts": {
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
-    "watch": "tsc --watch --preserveWatchOutput",
-    "build": "tsc",
-    "clean": "rimraf dist",
+    "watch": "concurrently \"npm run watch:esm\" \"npm run watch:cjs\"",
+    "watch:esm": "tsc --watch --preserveWatchOutput",
+    "watch:cjs": "tsc --watch --preserveWatchOutput -p ./tsconfig.cjs.json",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc && echo '{\"type\": \"module\"}' > esm/package.json",
+    "build:cjs": "tsc -p ./tsconfig.cjs.json && echo '{\"type\": \"commonjs\"}' > cjs/package.json",
+    "clean": "rimraf esm cjs",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "author": "",
   "license": "MIT",
   "files": [
-    "/dist"
+    "/esm",
+    "/cjs"
   ],
   "devDependencies": {
     "@types/react-reconciler": "0.28.8"

ts/@live-compositor/core/src/api.ts

@@ -1,5 +1,5 @@
 import { Api } from 'live-compositor';
-import { CompositorManager } from './compositorManager';
+import { CompositorManager } from './compositorManager.js';
 
 export { Api };
 

ts/@live-compositor/core/src/api/input.ts

@@ -1,4 +1,4 @@
-import { Api } from '../api';
+import { Api } from '../api.js';
 import { RegisterInput, Inputs } from 'live-compositor';
 
 export function intoRegisterInput(input: RegisterInput): Api.RegisterInput {

ts/@live-compositor/core/src/api/renderer.ts

@@ -1,4 +1,4 @@
-import { Api } from '../api';
+import { Api } from '../api.js';
 import { Renderers } from 'live-compositor';
 
 export function intoRegisterImage(image: Renderers.RegisterImage): Api.ImageSpec {

ts/@live-compositor/core/src/compositor.ts

@@ -4,13 +4,13 @@ import {
   RegisterOutput,
   Renderers,
 } from 'live-compositor';
-import { ApiClient } from './api';
-import Output from './output';
-import { CompositorManager } from './compositorManager';
-import { intoRegisterOutput } from './api/output';
-import { intoRegisterInput } from './api/input';
-import { onCompositorEvent } from './event';
-import { intoRegisterImage, intoRegisterWebRenderer } from './api/renderer';
+import { ApiClient } from './api.js';
+import Output from './output.js';
+import { CompositorManager } from './compositorManager.js';
+import { intoRegisterOutput } from './api/output.js';
+import { intoRegisterInput } from './api/input.js';
+import { onCompositorEvent } from './event.js';
+import { intoRegisterImage, intoRegisterWebRenderer } from './api/renderer.js';
 
 export class LiveCompositor {
   private manager: CompositorManager;

ts/@live-compositor/core/src/compositorManager.ts

@@ -1,4 +1,4 @@
-import { ApiRequest } from './api';
+import { ApiRequest } from './api.js';
 
 export interface CompositorManager {
   setupInstance(): Promise<void>;

ts/@live-compositor/core/src/index.ts

@@ -1,3 +1,3 @@
-export { ApiClient, ApiRequest } from './api';
-export { LiveCompositor } from './compositor';
-export { CompositorManager } from './compositorManager';
+export { ApiClient, ApiRequest } from './api.js';
+export { LiveCompositor } from './compositor.js';
+export { CompositorManager } from './compositorManager.js';

ts/@live-compositor/core/src/output.ts

@@ -1,9 +1,9 @@
 import { _liveCompositorInternals, RegisterOutput, View, Outputs } from 'live-compositor';
 import React, { useSyncExternalStore } from 'react';
-import { ApiClient, Api } from './api';
-import Renderer from './renderer';
-import { intoAudioInputsConfiguration } from './api/output';
-import { throttle } from './utils';
+import { ApiClient, Api } from './api.js';
+import Renderer from './renderer.js';
+import { intoAudioInputsConfiguration } from './api/output.js';
+import { throttle } from './utils.js';
 
 type OutputContext = _liveCompositorInternals.OutputContext;
 type InstanceContextStore = _liveCompositorInternals.InstanceContextStore;

ts/@live-compositor/core/src/renderer.ts

@@ -1,6 +1,6 @@
 import Reconciler from 'react-reconciler';
-import { DefaultEventPriority, LegacyRoot } from 'react-reconciler/constants';
-import { Api } from './api';
+import { DefaultEventPriority, LegacyRoot } from 'react-reconciler/constants.js';
+import { Api } from './api.js';
 import { _liveCompositorInternals } from 'live-compositor';
 import React from 'react';
 

ts/@live-compositor/core/tsconfig.cjs.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "cjs",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "esModuleInterop": true
+  }
+}

ts/@live-compositor/core/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "esm"
   }
 }

ts/live-compositor/.eslintignore

@@ -1 +1,2 @@
-dist
+esm
+cjs

ts/live-compositor/.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+esm
+cjs

ts/live-compositor/package.json

@@ -2,13 +2,23 @@
   "name": "live-compositor",
   "version": "0.1.0",
   "description": "",
-  "main": "dist/index.js",
+  "type": "module",
+  "main": "cjs/index.js",
+  "exports": {
+    "import": "./esm/index.js",
+    "require": "./cjs/index.js",
+    "types": "./esm/index.d.ts"
+  },
   "scripts": {
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
-    "watch": "tsc --watch --preserveWatchOutput",
-    "build": "tsc",
-    "clean": "rimraf dist",
+    "watch": "concurrently \"npm run watch:esm\" \"npm run watch:cjs\"",
+    "watch:esm": "tsc --watch --preserveWatchOutput",
+    "watch:cjs": "tsc --watch --preserveWatchOutput -p ./tsconfig.cjs.json",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc && echo '{\"type\": \"module\"}' > esm/package.json",
+    "build:cjs": "tsc -p ./tsconfig.cjs.json && echo '{\"type\": \"commonjs\"}' > cjs/package.json",
+    "clean": "rimraf esm cjs",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "author": "",
@@ -18,7 +28,8 @@
   },
   "homepage": "https://github.com/software-mansion/live-compositor",
   "files": [
-    "/dist"
+    "/esm",
+    "/cjs"
   ],
   "devDependencies": {
     "@types/react": "^18.3.3"

ts/live-compositor/src/api.ts

@@ -1 +1 @@
-export * from './api.generated';
+export * from './api.generated.js';

ts/live-compositor/src/component.ts

@@ -1,5 +1,5 @@
 import React, { useId } from 'react';
-import * as Api from './api';
+import * as Api from './api.js';
 
 type ComponentProps<P> = { children?: React.ReactNode; id?: Api.ComponentId } & P;
 

ts/live-compositor/src/components/Image.ts

@@ -1,5 +1,5 @@
-import * as Api from '../api';
-import { createCompositorComponent, SceneComponent } from '../component';
+import * as Api from '../api.js';
+import { createCompositorComponent, SceneComponent } from '../component.js';
 
 export type ImageProps = {
   children?: undefined;

ts/live-compositor/src/components/InputStream.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import * as Api from '../api';
-import { createCompositorComponent, SceneComponent } from '../component';
-import { useAudioInput } from '../hooks';
+import { createElement } from 'react';
+import * as Api from '../api.js';
+import { createCompositorComponent, SceneComponent } from '../component.js';
+import { useAudioInput } from '../hooks.js';
 
 export type InputStreamProps = {
   children?: undefined;
@@ -34,7 +34,7 @@ function InputStream(props: InputStreamProps) {
   useAudioInput(props.inputId, {
     volume: mute ? 0 : (volume ?? 1),
   });
-  return React.createElement(InnerInputStream, otherProps);
+  return createElement(InnerInputStream, otherProps);
 }
 
 function sceneBuilder(props: InputStreamProps, _children: SceneComponent[]): Api.Component {

ts/live-compositor/src/components/Rescaler.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import * as Api from '../api';
-import { intoApiTransition, Transition } from './common';
-import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component';
+import * as Api from '../api.js';
+import { intoApiTransition, Transition } from './common.js';
+import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component.js';
 
 export type RescalerProps = {
   children: React.ReactElement | string | number;

ts/live-compositor/src/components/Shader.ts

@@ -1,5 +1,5 @@
-import * as Api from '../api';
-import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component';
+import * as Api from '../api.js';
+import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component.js';
 
 export type ShaderProps = {
   /**

ts/live-compositor/src/components/Text.ts

@@ -1,6 +1,6 @@
-import * as Api from '../api';
-import { createCompositorComponent, SceneComponent } from '../component';
-import { intoApiRgbaColor } from './common';
+import * as Api from '../api.js';
+import { createCompositorComponent, SceneComponent } from '../component.js';
+import { intoApiRgbaColor } from './common.js';
 
 export type TextProps = {
   children?: (string | number)[] | string | number;

ts/live-compositor/src/components/Tiles.ts

@@ -1,6 +1,6 @@
-import * as Api from '../api';
-import { intoApiRgbaColor, intoApiTransition, Transition } from './common';
-import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component';
+import * as Api from '../api.js';
+import { intoApiRgbaColor, intoApiTransition, Transition } from './common.js';
+import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component.js';
 
 export type TilesProps = {
   /**

ts/live-compositor/src/components/View.ts

@@ -1,6 +1,6 @@
-import * as Api from '../api';
-import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component';
-import { intoApiRgbaColor, intoApiTransition, Transition } from './common';
+import * as Api from '../api.js';
+import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component.js';
+import { intoApiRgbaColor, intoApiTransition, Transition } from './common.js';
 
 export type ViewProps = {
   /**

ts/live-compositor/src/components/WebView.ts

@@ -1,5 +1,5 @@
-import * as Api from '../api';
-import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component';
+import * as Api from '../api.js';
+import { createCompositorComponent, SceneComponent, sceneComponentIntoApi } from '../component.js';
 
 export type WebViewProps = {
   /**

ts/live-compositor/src/components/common.ts

@@ -1,4 +1,4 @@
-import * as Api from '../api';
+import * as Api from '../api.js';
 
 export interface Transition {
   /**

ts/live-compositor/src/context/index.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
-import { InstanceContextStore } from './instanceContextStore';
-import { OutputContext } from './outputContext';
+import { InstanceContextStore } from './instanceContextStore.js';
+import { OutputContext } from './outputContext.js';
 
 type CompositorOutputContext = {
   // global store for the entire LiveCompositor instance

ts/live-compositor/src/context/instanceContextStore.ts

@@ -1,4 +1,4 @@
-import * as Api from '../api';
+import * as Api from '../api.js';
 
 export type StreamState = 'ready' | 'playing' | 'finished';
 

ts/live-compositor/src/context/outputContext.ts

@@ -1,4 +1,4 @@
-import { AudioInputsConfiguration } from '../types/registerOutput';
+import { AudioInputsConfiguration } from '../types/registerOutput.js';
 
 export type ContextAudioOptions = {
   volume: number;

ts/live-compositor/src/hooks.ts

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useSyncExternalStore } from 'react';
 
-import * as Api from './api';
-import { LiveCompositorContext } from './context';
-import { InputStreamInfo } from './context/instanceContextStore';
+import * as Api from './api.js';
+import { LiveCompositorContext } from './context/index.js';
+import { InputStreamInfo } from './context/instanceContextStore.js';
 
 export function useInputStreams(): Record<Api.InputId, InputStreamInfo> {
   const ctx = useContext(LiveCompositorContext);