XSplit JS Framework (XJS)

2.10.2 verified Thu Apr 23 auth: no javascript abandoned

The XSplit JS Framework, distributed as `xjs-framework`, was designed to empower developers to create plugins for XSplit Broadcaster, facilitating rapid integration and interaction with the XSplit environment. Its primary utility revolved around providing an API and structure for building interactive components within the broadcasting software. The package's current stable version on npm is 2.10.2, which was last published approximately five years ago. Despite the listing of more recent 'releases' up to 2.9.0 in some contexts, the public npm package and the primary GitHub repository indicate a lack of active maintenance and new releases since early 2019. This framework differentiates itself by being purpose-built for the XSplit ecosystem, offering tools tailored to that specific plugin development environment, rather than being a general-purpose web framework.

Common errors

error ReferenceError: require is not defined ↓

cause Attempting to use `require()` in an ES module context or a browser environment where it's not supported, while `xjs-framework` might have historically been imported via CJS.

fix

If in an ES module, change const XJS = require('xjs-framework'); to import * as XJS from 'xjs-framework';. If in a browser context, ensure proper bundling and module loading or check if xjs-framework was meant for a Node.js-like runtime provided by XSplit.

error TypeError: Cannot read properties of undefined (reading 'onReady') ↓

cause The `PluginHost` object or similar core API component of `xjs-framework` was not correctly initialized or is unavailable in the current execution environment, often due to an outdated XSplit version or incorrect plugin manifest.

fix

Verify that your plugin's environment within XSplit Broadcaster is correctly set up. Check the XSplit Broadcaster documentation for the expected lifecycle and initialization of plugins. Ensure your plugin manifest correctly loads the framework.

Warnings

breaking The `xjs-framework` package has not seen a new public npm release in approximately five years (since version 2.10.2 in early 2019). This indicates the project is no longer actively maintained for new features or bug fixes, making it potentially incompatible with newer Node.js versions, XSplit Broadcaster releases, or modern web standards. ↓

fix Consider auditing your project for long-term viability. Migration to a currently maintained XSplit plugin development approach (if available) or an alternative framework might be necessary for future compatibility and security updates.

gotcha Despite 'recent releases' mentioned in older documentation or internal wikis, the official npm package `xjs-framework` remains at version 2.10.2, published 5 years ago. This discrepancy can lead to confusion about the project's maintenance status and available features. ↓

fix Always verify the actual publish date and version on npm for `xjs-framework` (`npmjs.com/package/xjs-framework`) and cross-reference with the provided GitHub repository's commit history to ascertain activity.

gotcha Given its age, `xjs-framework` may primarily rely on or expect CommonJS (CJS) module patterns, especially within the XSplit plugin runtime environment. Attempting to use pure ES Modules (ESM) features without proper transpilation or configuration might lead to module resolution errors. ↓

fix Ensure your build process correctly transpiles ESM to CJS if the XSplit runtime requires it, or specifically configure your TypeScript `tsconfig.json` with `"module": "CommonJS"` and `"esModuleInterop": true` if you encounter import issues.

Install

npm install xjs-framework

yarn add xjs-framework

pnpm add xjs-framework

Imports

XJS
wrong
```
const XJS = require('xjs-framework');
```
correct
```
import * as XJS from 'xjs-framework';
```
While CommonJS `require` was historically used (e.g., in older Node.js contexts or XSplit's runtime), modern TypeScript projects should prefer ESM `import * as XJS`.
PluginHost
```
import { PluginHost } from 'xjs-framework';
```
A common pattern in frameworks is named exports for specific modules or interfaces, such as a host object for plugin communication. Exact exports may vary and require consulting the (likely archived) documentation.
XJSPlugin
```
import type { XJSPlugin } from 'xjs-framework';
```
For type-checking without incurring runtime overhead, TypeScript users should utilize `import type` for interfaces, classes, or other types provided by the framework.

Quickstart

Demonstrates the basic structure of an XSplit Broadcaster plugin using hypothetical XJS Framework APIs for initialization, command registration, and communication with the host environment.

import { PluginHost } from 'xjs-framework';

interface MyPluginSettings {
  message: string;
  count: number;
}

async function initializePlugin() {
  console.log('XJS Plugin initializing...');
  
  // Simulate connection to XSplit Plugin Host
  const host = new PluginHost(); // Hypothetical initialization
  
  host.onReady(() => {
    console.log('PluginHost is ready!');
    
    // Example: Registering a simple command
    host.registerCommand('sayHello', (args: { name: string }) => {
      const greeting = `Hello, ${args.name || 'XSplit User'} from XJS Plugin!`;
      console.log(greeting);
      host.sendMessageToUI('logMessage', greeting);
    });

    // Example: Getting and setting settings (hypothetical)
    host.getSettings<MyPluginSettings>().then(settings => {
      console.log('Current settings:', settings);
      if (!settings.message) {
        host.setSettings({ message: 'Default XJS message', count: 0 });
      }
    });
    
    host.log('XJS Plugin loaded successfully!');
    host.sendMessageToUI('pluginLoaded', { success: true });
  });

  host.onError((error: Error) => {
    console.error('XJS Plugin Host error:', error);
    host.sendMessageToUI('pluginError', { message: error.message });
  });
  
  host.connect(); // Start the connection (hypothetical)
}

initializePlugin().catch(console.error);