Separate webpack workflow into development and production for the library and typescript example packages

.env.template

@@ -0,0 +1 @@
+WEBSOCKET_URL=ws://example.com/your/ws

.github/workflows/release-workflow.yaml

@@ -19,7 +19,7 @@ jobs:
           node-version: "16.x"
           registry-url: "https://registry.npmjs.org"
       - run: npm ci
-      - run: npm run build
+      - run: npm run build-prod
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/tag-workflow.yaml

@@ -43,7 +43,7 @@ jobs:
     - name: Build SPS Frontend
       run: |
         cd ./examples/typescript      
-        npm run build-all
+        npm run build-all-prod
 
       # Build the Scalable Pixel Streaming Frontend Docker image from the dist directories of the packages
     - name: Build the Scalable Pixel Streaming Frontend Docker image and push to Docker

.github/workflows/test-pull-request.yaml

@@ -1,4 +1,4 @@
-# The following workflow will run when a pull request is opened, synched or reopened
+# The following workflow will run when a pull request is opened, synced or reopened
 # It's intent is to run a build of the package against the PR to ensure that it passes a code build check
 
 name: test-build
@@ -26,10 +26,34 @@ jobs:
         with:
           node-version: "16.x"
 
-      # install deps for frontend and library and build both
-      - name: Install library and frontend deps and build
+      # install deps for Library development and build
+      - name: Install library for development
+        working-directory: ./library
+        id: npm
+        run: |
+          npm ci
+          npm run build-dev
+
+      # install deps for Library production and build
+      - name: Install library for production
+        working-directory: ./library
+        id: npm
+        run: |
+          npm ci
+          npm run build-prod
+
+      # install deps for Frontend and Library for development and build both
+      - name: Install library and Frontend for development
+        working-directory: ./examples/typescript
+        id: npm
+        run: |
+          npm ci
+          npm run build-all-dev
+
+      # install deps for Frontend and Library for production and build both
+      - name: Install library and Frontend for production
         working-directory: ./examples/typescript
         id: npm
         run: |
           npm ci
-          npm run build-all
+          npm run build-all-prod

.gitignore

@@ -2,3 +2,5 @@ dist/
 node_modules/
 types/
 .vscode
+!.env.template
+.env

examples/typescript/package.json

@@ -2,13 +2,17 @@
   "name": "spstypescriptexample",
   "version": "1.0.0",
   "description": "The typescript example for consuming the Scalable Pixel Streaming Frontend",
-  "main": "index.ts",
+  "main": "./src/index.ts",
   "scripts": {
-    "build": "npx webpack",
+    "build-dev": "npx webpack --config webpack.dev.js",
+    "build-prod": "npx webpack --config webpack.prod.js",
     "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"
+    "serve-dev": "webpack serve --config webpack.dev.js",
+    "serve-prod": "webpack serve --config webpack.prod.js",
+    "symlink": "npm link ../../library",
+    "build-all-dev": "cd ../../library && npm install && npm run build-dev && cd ../examples/typescript && npm run symlink && npm run build-dev",
+    "build-all-prod": "cd ../../library && npm install && npm run build-prod && cd ../examples/typescript && npm run symlink && npm run build-prod"
   },
   "author": "TensorWorks Pty Ltd",
   "keywords": [],

examples/typescript/src/index.ts

@@ -1,18 +1,18 @@
-import * as spsFrontend from "@tensorworks/libspsfrontend";
+import {Config, PixelStreaming, SPSApplication, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend";
 
-// Apply default styling from Epic's frontend
-export const PixelStreamingApplicationStyles = new spsFrontend.PixelStreamingApplicationStyle();
+// Apply default styling from Epic Games Pixel Streaming Frontend
+export const PixelStreamingApplicationStyles = new 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 } });
+	const config = new 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({
+	// Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types
+	const stream = new PixelStreaming(config);
+	const spsApplication = new SPSApplication({
 		stream,
 		onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */
 	});

examples/typescript/webpack.common.js

@@ -0,0 +1,71 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        index: './src/index.ts',
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            WEBSOCKET_URL: JSON.stringify((process.env.WEBSOCKET_URL !== undefined) ? process.env.WEBSOCKET_URL : '')
+        }),
+        new HtmlWebpackPlugin({
+            title: 'Scalable Pixel Streaming Frontend',
+            template: './src/index.html',
+            filename: 'index.html'
+        }),
+    ],
+    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',
+        hashFunction: 'xxhash64'
+    },
+    experiments: {
+        futureDefaults: true
+    },
+    optimization: {
+        minimize: false
+    },
+    devServer: {
+        static: {
+            directory: path.join(__dirname, 'dist'),
+        },
+    },
+};

examples/typescript/webpack.dev.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+});

examples/typescript/webpack.prod.js

@@ -0,0 +1,14 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+    optimization: {
+      usedExports: true,
+      minimize: true
+    },
+    stats: 'errors-only',
+	performance: {
+		hints: false
+	}
+});

library/package.json

@@ -4,7 +4,8 @@
   "description": "The Scalable Pixel Streaming Frontend Library consuming Epic Games' Pixel Streaming Frontend",
   "main": "src/index.ts",
   "scripts": {
-    "build": "npx webpack",
+    "build-prod": "npx webpack --config webpack.prod.js",
+    "build-dev": "npx webpack --config webpack.dev.js",
     "watch": "npx webpack --watch",
     "serve": "webpack serve"
   },

library/webpack.common.js

@@ -0,0 +1,26 @@
+const package = require('./package.json');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: {
+        index: './src/index.ts'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                exclude: [/node_modules/]
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js']
+    },
+    plugins: [],
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        globalObject: 'this'
+    }
+};