From ad0c309e695f3bb25b034452391be6d3bcac3cdf Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 09:27:42 +1000 Subject: [PATCH 01/27] added new webpack files --- library/webpack.common.js | 0 library/webpack.dev.js | 0 library/webpack.prod.js | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 library/webpack.common.js create mode 100644 library/webpack.dev.js create mode 100644 library/webpack.prod.js diff --git a/library/webpack.common.js b/library/webpack.common.js new file mode 100644 index 00000000..e69de29b diff --git a/library/webpack.dev.js b/library/webpack.dev.js new file mode 100644 index 00000000..e69de29b diff --git a/library/webpack.prod.js b/library/webpack.prod.js new file mode 100644 index 00000000..e69de29b From 291b7e045521103934dd84946ceb2318960c1e24 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 09:38:23 +1000 Subject: [PATCH 02/27] removed old webpack config file --- library/webpack.config.js | 51 --------------------------------------- 1 file changed, 51 deletions(-) delete mode 100644 library/webpack.config.js diff --git a/library/webpack.config.js b/library/webpack.config.js deleted file mode 100644 index 01017f6f..00000000 --- a/library/webpack.config.js +++ /dev/null @@ -1,51 +0,0 @@ -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: [ - ], - // 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/, - ], - }, - ], - }, - resolve: { - extensions: ['.tsx', '.ts', '.js', '.svg'], - }, - output: { - filename: '[name].js', - library: 'libspsfrontend', - 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'), - }, - } - }; -} \ No newline at end of file From 790515e65a1e9128334fc09a0fc252bba910c2e4 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 09:38:46 +1000 Subject: [PATCH 03/27] added base for the webpack common file --- library/webpack.common.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/library/webpack.common.js b/library/webpack.common.js index e69de29b..59df1393 100644 --- a/library/webpack.common.js +++ b/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' + } +}; \ No newline at end of file From f41c888932726a5d3a920cb4296165989804732a Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 10:14:09 +1000 Subject: [PATCH 04/27] added base content to the dev and prod webpack files --- library/webpack.dev.js | 33 +++++++++++++++++++++++++++++++++ library/webpack.prod.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) diff --git a/library/webpack.dev.js b/library/webpack.dev.js index e69de29b..39a7eb09 100644 --- a/library/webpack.dev.js +++ b/library/webpack.dev.js @@ -0,0 +1,33 @@ +const { merge } = require('webpack-merge'); +const common = require('./webpack.common.js'); + +const devCommon = { + mode: 'development', + devtool: 'inline-source-map', + devServer: { + static: './dist', + } +}; + +module.exports = [ + merge(common, devCommon, { + output: { + filename: 'libspsfrontend.js', + library: { + name: 'libspsfrontend', // exposed variable that will provide access to the library classes + type: 'umd' + }, + }, + }), + merge(common, devCommon, { + output: { + filename: 'libspsfrontend.esm.js', + library: { + type: 'module' + }, + }, + experiments: { + outputModule: true + } + }) +]; diff --git a/library/webpack.prod.js b/library/webpack.prod.js index e69de29b..d59b0f26 100644 --- a/library/webpack.prod.js +++ b/library/webpack.prod.js @@ -0,0 +1,34 @@ +const { merge } = require('webpack-merge'); +const common = require('./webpack.common.js'); + +const prodCommon = { + mode: 'production', + optimization: { + usedExports: true, + minimize: true + }, + stats: 'errors-only', +}; + +module.exports = [ + merge(common, prodCommon, { + output: { + filename: 'libspsfrontend.js', + library: { + name: 'libspsfrontend', // exposed variable that will provide access to the library classes + type: 'umd' + }, + }, + }), + merge(common, prodCommon, { + output: { + filename: 'libspsfrontend.esm.js', + library: { + type: 'module' + }, + }, + experiments: { + outputModule: true + } + }) +]; From 1af870ef7f1484d2cc6a12533f33ef786217f9ad Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 10:41:11 +1000 Subject: [PATCH 05/27] moddified package.json for the new build configs --- library/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/library/package.json b/library/package.json index cd17d3d0..37b297e2 100644 --- a/library/package.json +++ b/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" }, From 7baa7852a389ede4fbf1fef6688eeb39a3d9f707 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 14:00:22 +1000 Subject: [PATCH 06/27] removed the old webpack common file from the example --- examples/typescript/webpack.config.js | 77 --------------------------- 1 file changed, 77 deletions(-) delete mode 100644 examples/typescript/webpack.config.js diff --git a/examples/typescript/webpack.config.js b/examples/typescript/webpack.config.js deleted file mode 100644 index 9deb0a8b..00000000 --- a/examples/typescript/webpack.config.js +++ /dev/null @@ -1,77 +0,0 @@ -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'), - }, - }, - }; -}; \ No newline at end of file From 00f006e5e10726b6fca50e2104624cf31a784fb7 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 15:03:11 +1000 Subject: [PATCH 07/27] added webpack dev and prod --- examples/typescript/webpack.dev.js | 8 ++++++++ examples/typescript/webpack.prod.js | 14 ++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 examples/typescript/webpack.dev.js create mode 100644 examples/typescript/webpack.prod.js diff --git a/examples/typescript/webpack.dev.js b/examples/typescript/webpack.dev.js new file mode 100644 index 00000000..09b07928 --- /dev/null +++ b/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', +}); \ No newline at end of file diff --git a/examples/typescript/webpack.prod.js b/examples/typescript/webpack.prod.js new file mode 100644 index 00000000..132f8a8b --- /dev/null +++ b/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 + } +}); From 54a9a6d6c01781ef1d43138c125a32a47f981a06 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 28 Mar 2023 15:06:22 +1000 Subject: [PATCH 08/27] updated the package.json for the typescript example --- examples/typescript/package.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/typescript/package.json b/examples/typescript/package.json index f826d6ca..1690ce13 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -4,11 +4,13 @@ "description": "The typescript example for consuming the Scalable Pixel Streaming Frontend", "main": "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" + "build-all-dev": "cd ../../library && npm install && npm run build-dev && cd ../examples/typescript && npm install && npm link ../../library && npm run build-dev", + "build-all-prod": "cd ../../library && npm install && npm run build-prod && cd ../examples/typescript && npm install && npm link ../../library && npm run build-prod" }, "author": "TensorWorks Pty Ltd", "keywords": [], From bfae2e49ff3fc50f589c526c85817c42e4c36b30 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 09:22:11 +1000 Subject: [PATCH 09/27] updated the nade of the library variable in the example index.ts --- examples/typescript/src/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index 9215c092..cbdf9d7e 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -1,18 +1,18 @@ -import * as spsFrontend from "@tensorworks/libspsfrontend"; +import * as libspsfrontend from "@tensorworks/libspsfrontend"; // Apply default styling from Epic's frontend -export const PixelStreamingApplicationStyles = new spsFrontend.PixelStreamingApplicationStyle(); +export const PixelStreamingApplicationStyles = new libspsfrontend.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 libspsfrontend.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({ + const stream = new libspsfrontend.PixelStreaming(config); + const spsApplication = new libspsfrontend.SPSApplication({ stream, onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */ }); From 8a487a84740449a4e913a697876e6fd3adf4eb1f Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 09:29:21 +1000 Subject: [PATCH 10/27] added symlink to package.json in the example --- examples/typescript/package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/typescript/package.json b/examples/typescript/package.json index 1690ce13..0d95d047 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -9,8 +9,9 @@ "watch": "npx webpack --watch", "start": "npx webpack && open-cli ./dist/index.html", "serve": "webpack serve", - "build-all-dev": "cd ../../library && npm install && npm run build-dev && cd ../examples/typescript && npm install && npm link ../../library && npm run build-dev", - "build-all-prod": "cd ../../library && npm install && npm run build-prod && cd ../examples/typescript && npm install && npm link ../../library && npm run build-prod" + "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": [], From 447ac0151f68eab451913db5652405e436a34332 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 13:32:08 +1000 Subject: [PATCH 11/27] updated main location and updated npm serve command --- examples/typescript/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/typescript/package.json b/examples/typescript/package.json index 0d95d047..8b5d39d9 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -2,13 +2,13 @@ "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-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", + "serve": "webpack serve --config webpack.dev.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" From 065c7fc83694abb633f7116d256c2df610211f6d Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 13:32:48 +1000 Subject: [PATCH 12/27] updated webpack config to webpack common to make use of the dev and prod environments --- examples/typescript/webpack.common.js | 72 +++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 examples/typescript/webpack.common.js diff --git a/examples/typescript/webpack.common.js b/examples/typescript/webpack.common.js new file mode 100644 index 00000000..a67d2769 --- /dev/null +++ b/examples/typescript/webpack.common.js @@ -0,0 +1,72 @@ +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((env.WEBSOCKET_URL !== undefined) ? 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'), + }, + }, +}; \ No newline at end of file From 7ff11b7c43ee510e345c650445bcbc0b4a9002f8 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 13:48:16 +1000 Subject: [PATCH 13/27] updated the websocket url env to make use of process --- examples/typescript/webpack.common.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/examples/typescript/webpack.common.js b/examples/typescript/webpack.common.js index a67d2769..d3bdd73b 100644 --- a/examples/typescript/webpack.common.js +++ b/examples/typescript/webpack.common.js @@ -7,10 +7,9 @@ module.exports = { index: './src/index.ts', }, plugins: [ - // new webpack.DefinePlugin({ - // WEBSOCKET_URL: JSON.stringify((env.WEBSOCKET_URL !== undefined) ? env.WEBSOCKET_URL : '') - // }), - + 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', From 3492e0ceb1423ec0425ba55ad0fa8980dcb92c5f Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 13:53:59 +1000 Subject: [PATCH 14/27] upgraded the tag workflow to use the production builder command --- .github/workflows/tag-workflow.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/tag-workflow.yaml b/.github/workflows/tag-workflow.yaml index d2b5a9c7..00b19a9d 100644 --- a/.github/workflows/tag-workflow.yaml +++ b/.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 From a27b2b99266b467efaff239a1d3510045fbc82d3 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 14:36:14 +1000 Subject: [PATCH 15/27] updated the tag and pull request workflows to use the new build commands --- .github/workflows/release-workflow.yaml | 2 +- .github/workflows/test-pull-request.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release-workflow.yaml b/.github/workflows/release-workflow.yaml index 9ecfa159..c4bfb230 100644 --- a/.github/workflows/release-workflow.yaml +++ b/.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 }} \ No newline at end of file diff --git a/.github/workflows/test-pull-request.yaml b/.github/workflows/test-pull-request.yaml index 6dde6116..5fa30d49 100644 --- a/.github/workflows/test-pull-request.yaml +++ b/.github/workflows/test-pull-request.yaml @@ -32,4 +32,4 @@ jobs: id: npm run: | npm ci - npm run build-all \ No newline at end of file + npm run build-all-prod \ No newline at end of file From 994367ba7d606c84f5cb516d7dc384dec221c591 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 14:36:52 +1000 Subject: [PATCH 16/27] fixed spelling mistake in the pull request workflow --- .github/workflows/test-pull-request.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test-pull-request.yaml b/.github/workflows/test-pull-request.yaml index 5fa30d49..3c2cc6e9 100644 --- a/.github/workflows/test-pull-request.yaml +++ b/.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 From 0e6eff2d1024c7c46e395f432ff5c83d8e283aa4 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Wed, 29 Mar 2023 14:41:04 +1000 Subject: [PATCH 17/27] updated comments in accordance to comment from luke post merge --- examples/typescript/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index cbdf9d7e..f1d5aaf2 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -1,6 +1,6 @@ import * as libspsfrontend from "@tensorworks/libspsfrontend"; -// Apply default styling from Epic's frontend +// Apply default styling from Epic Games Pixel Streaming Frontend export const PixelStreamingApplicationStyles = new libspsfrontend.PixelStreamingApplicationStyle(); PixelStreamingApplicationStyles.applyStyleSheet(); @@ -10,7 +10,7 @@ document.body.onload = function () { // Note: This config is extremely important, SPS only supports the browser sending the offer. const config = new libspsfrontend.Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); - // Create a Native DOM delegate instance that implements the Delegate interface class + // Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types const stream = new libspsfrontend.PixelStreaming(config); const spsApplication = new libspsfrontend.SPSApplication({ stream, From ded28fd5cd1dce4dc87323e4e9b8626a5bfa2f88 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 08:38:55 +1000 Subject: [PATCH 18/27] added env template for example and updated git ignore to accomadate this --- .env.template | 1 + .gitignore | 2 ++ 2 files changed, 3 insertions(+) create mode 100644 .env.template diff --git a/.env.template b/.env.template new file mode 100644 index 00000000..f018a2a5 --- /dev/null +++ b/.env.template @@ -0,0 +1 @@ +WEBSOCKET_URL=ws://example.com/your/ws \ No newline at end of file diff --git a/.gitignore b/.gitignore index 07bca9dd..e99a7f2e 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ dist/ node_modules/ types/ .vscode +!.env.template +.env From 86ddce525f6f2bb3c274696af5654b3358fb2d51 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 09:13:33 +1000 Subject: [PATCH 19/27] updated the pull request test to test all aspects of the library and frontend --- .github/workflows/test-pull-request.yaml | 28 ++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/.github/workflows/test-pull-request.yaml b/.github/workflows/test-pull-request.yaml index 3c2cc6e9..1d770478 100644 --- a/.github/workflows/test-pull-request.yaml +++ b/.github/workflows/test-pull-request.yaml @@ -26,8 +26,32 @@ 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: | From 86695b0dd3e92b9a1b21a33892d55db765d314cf Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 09:29:26 +1000 Subject: [PATCH 20/27] added serve for dev and prod --- examples/typescript/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/typescript/package.json b/examples/typescript/package.json index 8b5d39d9..d14a654a 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -8,7 +8,8 @@ "build-prod": "npx webpack --config webpack.prod.js", "watch": "npx webpack --watch", "start": "npx webpack && open-cli ./dist/index.html", - "serve": "webpack serve --config webpack.dev.js", + "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" From 0cbcf882f39e1ca387c18253c8e24afa4fd0e7a4 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 09:49:37 +1000 Subject: [PATCH 21/27] updated the index file to just import the required types --- examples/typescript/src/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index f1d5aaf2..77cf82d1 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -1,18 +1,18 @@ -import * as libspsfrontend from "@tensorworks/libspsfrontend"; +import {Config, PixelStreaming, SPSApplication, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; // Apply default styling from Epic Games Pixel Streaming Frontend -export const PixelStreamingApplicationStyles = new libspsfrontend.PixelStreamingApplicationStyle(); +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 libspsfrontend.Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); + const config = new Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); // Create stream and spsApplication instances that implement the Epic Games Pixel Streaming Frontend PixelStreaming and Application types - const stream = new libspsfrontend.PixelStreaming(config); - const spsApplication = new libspsfrontend.SPSApplication({ + const stream = new PixelStreaming(config); + const spsApplication = new SPSApplication({ stream, onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode) /* Light/Dark mode support. */ }); From 57089f65c30a4d20bdbe5aae074acd237aa69b81 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 10:05:23 +1000 Subject: [PATCH 22/27] updated the pull request test to test all aspects of the library and frontend --- .github/workflows/test-pull-request.yaml | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/.github/workflows/test-pull-request.yaml b/.github/workflows/test-pull-request.yaml index 1d770478..8e964bbc 100644 --- a/.github/workflows/test-pull-request.yaml +++ b/.github/workflows/test-pull-request.yaml @@ -26,34 +26,30 @@ jobs: with: node-version: "16.x" - # install deps for Library development and build - - name: Install library for development + # install deps for Library and build for development + - name: Install and build 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 + # install deps for Library and build for production + - name: Install and build 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 + # install deps for Frontend and Library and build both for development + - name: Install and build 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 + # install deps for Frontend and Library for and build both for production + - name: Install and build library and Frontend for production working-directory: ./examples/typescript - id: npm run: | npm ci npm run build-all-prod \ No newline at end of file From da665f89da4d6ad99b9ea6106b1bc754a5937966 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 12:11:34 +1000 Subject: [PATCH 23/27] moved env file and renamed to example also included dontenv plugin to load env files --- examples/typescript/.env.example | 1 + examples/typescript/package-lock.json | 16 ++++++++++++++++ examples/typescript/package.json | 5 +++-- examples/typescript/webpack.common.js | 1 + 4 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 examples/typescript/.env.example diff --git a/examples/typescript/.env.example b/examples/typescript/.env.example new file mode 100644 index 00000000..f018a2a5 --- /dev/null +++ b/examples/typescript/.env.example @@ -0,0 +1 @@ +WEBSOCKET_URL=ws://example.com/your/ws \ No newline at end of file diff --git a/examples/typescript/package-lock.json b/examples/typescript/package-lock.json index e4945e1c..c2aa7fa9 100644 --- a/examples/typescript/package-lock.json +++ b/examples/typescript/package-lock.json @@ -16,6 +16,7 @@ "copy-webpack-plugin": "^11.0.0", "css-loader": "^6.7.3", "declaration-bundler-webpack-plugin": "^1.0.3", + "dotenv": "^16.0.3", "html-loader": "^4.2.0", "html-webpack-plugin": "^5.5.0", "style-loader": "^3.3.1", @@ -2602,6 +2603,15 @@ "tslib": "^2.0.3" } }, + "node_modules/dotenv": { + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -10463,6 +10473,12 @@ "tslib": "^2.0.3" } }, + "dotenv": { + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", + "dev": true + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", diff --git a/examples/typescript/package.json b/examples/typescript/package.json index d14a654a..fac53ffd 100644 --- a/examples/typescript/package.json +++ b/examples/typescript/package.json @@ -25,14 +25,15 @@ "copy-webpack-plugin": "^11.0.0", "css-loader": "^6.7.3", "declaration-bundler-webpack-plugin": "^1.0.3", + "dotenv": "^16.0.3", + "html-loader": "^4.2.0", "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" } -} \ No newline at end of file +} diff --git a/examples/typescript/webpack.common.js b/examples/typescript/webpack.common.js index d3bdd73b..d8d4bb3c 100644 --- a/examples/typescript/webpack.common.js +++ b/examples/typescript/webpack.common.js @@ -1,6 +1,7 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); +require('dotenv').config({ path: './.env' }); module.exports = { entry: { From ba8f90a2d771f6d1b4de00c34a255f07c2038737 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 12:21:04 +1000 Subject: [PATCH 24/27] removed old template --- .env.template | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .env.template diff --git a/.env.template b/.env.template deleted file mode 100644 index f018a2a5..00000000 --- a/.env.template +++ /dev/null @@ -1 +0,0 @@ -WEBSOCKET_URL=ws://example.com/your/ws \ No newline at end of file From 4bb88dfa2966f0ba90a0566fea1ff3245936e2a5 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 12:21:37 +1000 Subject: [PATCH 25/27] updated index file to make use of the env if it is not empty --- examples/typescript/src/index.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index 77cf82d1..6999ef5a 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -1,15 +1,24 @@ -import {Config, PixelStreaming, SPSApplication, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; +import {Config, PixelStreaming, SPSApplication, TextParameters, PixelStreamingApplicationStyle} from "@tensorworks/libspsfrontend"; // Apply default styling from Epic Games Pixel Streaming Frontend export const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle(); PixelStreamingApplicationStyles.applyStyleSheet(); +// websocket url env +declare var WEBSOCKET_URL: string; + 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 Config({ useUrlParams: true, initialSettings: { OfferToReceive: true, TimeoutIfIdle: true } }); + // make usage of WEBSOCKET_URL if it is not empty + let webSocketAddress = WEBSOCKET_URL; + if(webSocketAddress !== ""){ + config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) + } + // 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({ From c8858a62aa30b7fbcd0ef29a30da0f9d1974602b Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Thu, 30 Mar 2023 12:22:58 +1000 Subject: [PATCH 26/27] updated if statement to single queals --- examples/typescript/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/typescript/src/index.ts b/examples/typescript/src/index.ts index 6999ef5a..e2337471 100644 --- a/examples/typescript/src/index.ts +++ b/examples/typescript/src/index.ts @@ -15,7 +15,7 @@ document.body.onload = function () { // make usage of WEBSOCKET_URL if it is not empty let webSocketAddress = WEBSOCKET_URL; - if(webSocketAddress !== ""){ + if(webSocketAddress != ""){ config.setTextSetting(TextParameters.SignallingServerUrl, webSocketAddress) } From 7d2f512e50ac52cb4a1c6de1f8d7f674a6a95f41 Mon Sep 17 00:00:00 2001 From: Adrian Zahra Date: Tue, 4 Apr 2023 10:55:06 +1000 Subject: [PATCH 27/27] updated the git ignore file for the env.example --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index e99a7f2e..86e183a7 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,5 @@ dist/ node_modules/ types/ .vscode -!.env.template +!.env.example .env