wildpeaks/2018-example-typescript-webpack3-xsplit

[ARCHIVED] Boilerplate for creating XSplit Broadcaster extensions in Typescript

Boilerplate: XSplit Extension

Boilerplate for creating Custom Extensions for XSplit Broadcaster written in Typescript using Visual Studio Code.

---

Sources

The entry point of the extension is /src/extension.ts.

Additional code is stored in Local Modules in /src/node_modules. so no configuration is required for custom resolution paths in every tool of your toolchain because it uses the native Node resolution model.

This way, modules can be referenced with clean paths like components/MyComponent instead of brittle relative paths like ../../../components/MyComponent/MyComponent.ts.

---

Assets

Images referenced in modules get automatically added to the build (jpg, png, gif, svg), and tiny images are directly embedded as base64 values.

CSS files referenced in modules get aggregated and postprocessed using PostCSS Next to generate a single .css file.

Also, CSS is configured for local class identifiers, so you don't have to worry about choosing class names that are globally unique because Webpack will generate globally-unique names.

---

Declare assets for VSCode Intellisense

By default, Typescript doesn't know how to handle stylesheets and images. Therefore, modules that use assets should have a short .d.ts file that declares what the file contains for Intellisense to work.

MyComponent.css

.class1 {
	color: blue;
}
.class2 {
	color: green;
}

MyComponent.d.ts

declare module '*.css' {
	export const class1: string;
	export const class2: string;
}

declare module '*.jpg' {
	const _: string;
	export = _;
}

MyComponent.ts

/// <reference path="./MyComponent.d.ts" />
import {class1, class2} from './MyComponent.css';
import * as image from './image.jpg';

// class1 is a string
// class2 is a string
// image is a string

See /src/node_modules/components/MyComponent for an example that uses both CSS and images.

---

Build the extension

The default Build Task for VSCode generates minified files in /dist.

---

Debug the extension

First, enable Developer Mode in XSplit Broadcaster (in Settings > Advanced).

Then, start Webpack Dev Server task in VSCode if it's not already running.

Then, load the extension from http://localhost:8000 in XSplit.

Finally, start Attach to XSplit in the Debug tab in VSCode.

---

Tests

Configured for Jasmine.

If you have Wallaby for VSCode, you can also get realtime feedback from the tests directly in VSCode.

Tests that don't rely on DOM (or use jsdom) should have the extension .spec.ts, and are run in Node.

Tests that require a real DOM should be named *.chrome.spec.ts and are run in Headless Chrome. However, Wallaby cannot run both Node and Chrome tests at the same time for now.

---

Linting

VSCode is configured for linting Typescript with ESlint using the @wildpeaks/typescript shared config.

---