Adds the new TypeScript SPS example

examples/typescript/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "spstypescriptexample",
+  "version": "1.0.0",
+  "description": "The typescript example for consuming the Scalable Pixel Streaming Frontend",
+  "main": "index.ts",
+  "scripts": {
+    "build": "npx webpack",
+    "watch": "npx webpack --watch",
+    "start": "npx webpack && open-cli ./dist/index.html",
+    "serve": "webpack serve",
+    "build-all": "cd ../../library && npm install && npm run build && cd ../examples/typescript && npm install && npm link ../../library && npm run build"
+  },
+  "author": "TensorWorks Pty Ltd",
+  "keywords": [],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^18.15.1",
+    "@types/webpack": "^5.28.0",
+    "@webpack-cli/generators": "^3.0.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
+    "declaration-bundler-webpack-plugin": "^1.0.3",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.4.2",
+    "html-loader": "^4.2.0",
+    "typescript": "^4.9.5",
+    "webpack": "^5.76.1",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "wepack-cli": "^0.0.1-security"
+  }
+}

examples/typescript/src/index.ts

@@ -0,0 +1,21 @@
+import * as spsFrontend from "@tensorworks/lib-spsfrontend";
+
+// Apply default styling from Epic's frontend
+export const PixelStreamingApplicationStyles = new spsFrontend.PixelStreamingApplicationStyle();
+PixelStreamingApplicationStyles.applyStyleSheet();
+
+document.body.onload = function () {
+
+	// Create a config object.
+	// Note: This config is extremely important, SPS only supports the browser sending the offer.
+	const config = new spsFrontend.Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } });
+
+	// Create a Native DOM delegate instance that implements the Delegate interface class
+	const stream = new spsFrontend.PixelStreaming(config);
+	const spsApplication = new spsFrontend.SPSApplication({ 
+		stream,
+		onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */
+	});
+
+	document.body.appendChild(spsApplication.rootElement);
+}

tsconfig.json → examples/typescript/tsconfig.json

@@ -8,9 +8,13 @@
     "moduleResolution": "node",
     "sourceMap": false,
     "allowJs": true,
-    "declaration": false,
-    "typeRoots" : ["./node_modules/@types", "./typings"]
+    "declaration": false
   },
-  "lib": ["es2015"],
-  "include": ["./src/*.ts"],
-}
+  "lib": [
+    "es2015"
+  ],
+  "include": [
+    "./src/*.ts",
+    "index.d.ts"
+  ],
+}

examples/typescript/webpack.config.js

@@ -0,0 +1,77 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
+
+module.exports = (env) => {
+    return {
+        mode: "development",
+        entry: {
+            index: './src/index.ts',
+        },
+        plugins: [
+            new webpack.DefinePlugin({
+                WEBSOCKET_URL: JSON.stringify((env.WEBSOCKET_URL !== undefined) ? env.WEBSOCKET_URL : '')
+            }),
+
+            new HtmlWebpackPlugin({
+                title: 'Development',
+                template: './src/index.html',
+                filename: 'index.html'
+            }),
+        ],
+        // turn off so we can see the source map for dom delegate so we can debug the library
+        devtool: 'inline-source-map',
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    loader: 'ts-loader',
+                    exclude: [
+                        /node_modules/,
+                    ],
+                },
+                {
+                    test: /\.html$/i,
+                    use: 'html-loader'
+                },
+                {
+                    test: /\.css$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: '[name][ext]'
+                    }
+                },
+                {
+                    test: /\.(png|svg)$/i,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'images/[name][ext]'
+                    }
+                },
+            ],
+        },
+        resolve: {
+            extensions: ['.tsx', '.ts', '.js', '.svg'],
+        },
+        output: {
+            filename: '[name].js',
+            library: 'spstypescriptexample',
+            libraryTarget: 'umd',
+            path: path.resolve(__dirname, 'dist'),
+            clean: true,
+            globalObject: 'this'
+        },
+        experiments: {
+            futureDefaults: true
+        },
+        optimization: {
+            minimize: false
+        },
+        devServer: {
+            static: {
+                directory: path.join(__dirname, 'dist'),
+            },
+        },
+    };
+};