From 89799aa0ac0c19eaeeaafbbc79a9521d8c58adb1 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 12:06:44 +0000 Subject: [PATCH 01/17] ci(publish.yml): update workflow to only run on push to master branch --- .github/workflows/publish.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index b72876e..9c95f9b 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -3,8 +3,6 @@ name: Node.js CI on: push: branches: [ master ] - pull_request: - branches: "*" jobs: quality: From 18d901fed743a157d66f66f8b4cd1bd2f15f7fa7 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 12:07:50 +0000 Subject: [PATCH 02/17] ci(publish.yml): update workflow name --- .github/workflows/publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 9c95f9b..83786c8 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -1,4 +1,4 @@ -name: Node.js CI +name: Publish on: push: From 42cf8e003070c3c48270e4374298b90974431ec2 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 12:24:11 +0000 Subject: [PATCH 03/17] chore(template.json): add extra properties to crestron object add type property to touchscreen object add web properties object --- template.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/template.json b/template.json index 4f204f3..1dc4a56 100644 --- a/template.json +++ b/template.json @@ -44,7 +44,12 @@ "crestron": { "project": { "touchscreen": { - "url": "" + "url": "Enter IP/Hostname of Crestron Touchpanel here...", + "type": "touchscreen" + }, + "web": { + "url": "Enter IP/Hostname of Crestron Processor here...", + "type": "web" } }, "crcomlib": { From ca6a5461b7b5bab078e354d2fb376bd428774f21 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 12:29:31 +0000 Subject: [PATCH 04/17] chore(template.json): update build:deploy and build:onestep scripts to be specific to touchscreens --- template.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/template.json b/template.json index 1dc4a56..a9f53d3 100644 --- a/template.json +++ b/template.json @@ -30,8 +30,8 @@ "serve": "serve -s build", "build-and-serve": "yarn build && yarn serve", "build:archive": "yarn clean:dist && yarn ch5-cli archive -p $npm_package_name -P samplesource=$npm_package_name -d build -o dist", - "build:deploy": "yarn ch5-cli deploy -p -H $npm_package_crestron_project_touchscreen_url -t touchscreen dist/$npm_package_name.ch5z", - "build:onestep": "yarn build && yarn build:archive && yarn build:deploy", + "build:deploy:touchscreen": "yarn ch5-cli deploy -p -H $npm_package_crestron_project_touchscreen_url -t $npm_package_crestron_project_touchscreen_type dist/$npm_package_name.ch5z", + "build:onestep:touchscreen": "yarn build && yarn build:archive && yarn build:deploy:touchscreen", "resolve:crcomlib": "jq '.main = \"build_bundles/cjs/cr-com-lib.js\"' $npm_package_crestron_crcomlib_packageJson | sponge $npm_package_crestron_crcomlib_packageJson", "lint": "eslint .", "lint:fix": "eslint --fix .", From 7b19866fa5be11e139a16779ad06093dddf1785c Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 12:32:04 +0000 Subject: [PATCH 05/17] chore(template.json): add build:deploy and build:onestep scripts specific for WebXPanel --- template.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/template.json b/template.json index a9f53d3..b805ff0 100644 --- a/template.json +++ b/template.json @@ -31,7 +31,9 @@ "build-and-serve": "yarn build && yarn serve", "build:archive": "yarn clean:dist && yarn ch5-cli archive -p $npm_package_name -P samplesource=$npm_package_name -d build -o dist", "build:deploy:touchscreen": "yarn ch5-cli deploy -p -H $npm_package_crestron_project_touchscreen_url -t $npm_package_crestron_project_touchscreen_type dist/$npm_package_name.ch5z", + "build:deploy:web": "yarn ch5-cli deploy -p -H $npm_package_crestron_project_web_url -t $npm_package_crestron_project_web_type dist/$npm_package_name.ch5z", "build:onestep:touchscreen": "yarn build && yarn build:archive && yarn build:deploy:touchscreen", + "build:onestep:web": "yarn build && yarn build:archive && yarn build:deploy:web", "resolve:crcomlib": "jq '.main = \"build_bundles/cjs/cr-com-lib.js\"' $npm_package_crestron_crcomlib_packageJson | sponge $npm_package_crestron_crcomlib_packageJson", "lint": "eslint .", "lint:fix": "eslint --fix .", From 94c767553656000984087794eee229ebaa77760e Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 12:43:29 +0000 Subject: [PATCH 06/17] chore(template.json): move node-sass to dev dependencies and bump versions --- template.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/template.json b/template.json index b805ff0..0379e2d 100644 --- a/template.json +++ b/template.json @@ -8,13 +8,11 @@ "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.4.1", "@types/node": "^16.11.26", - "@types/node-sass": "^4.11.1", "@types/react": "^17.0.40", "@types/react-dom": "^17.0.13", "@types/react-router-dom": "^5.3.3", "@types/styled-components": "^5.1.24", "eruda": "^2.4.1", - "node-sass": "^6.0.0", "react-icons": "^4.3.1", "react-router-dom": "^6.2.2", "styled-components": "^5.3.3", @@ -69,6 +67,7 @@ "devDependencies": { "@crestron/ch5-utilities-cli": "^0.1.52", "@types/ncp": "^2.0.5", + "@types/node-sass": "^4.11.2", "@types/rimraf": "^3.0.2", "@typescript-eslint/eslint-plugin": "^5.14.0", "@typescript-eslint/parser": "^5.14.0", @@ -86,6 +85,7 @@ "lint-staged": "^12.3.5", "ncp": "^2.0.0", "node-jq": "^2.1.0", + "node-sass": "^7.0.1", "prettier": "^2.5.1", "rimraf": "^3.0.2", "sponge": "^0.1.0" From 0f7defa72161d26c9e233a6007c05f6313887dc2 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 12:45:45 +0000 Subject: [PATCH 07/17] chore(vscode): add vscode settings file --- .vscode/settings.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..e11d671 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,15 @@ +{ + "typescript.validate.enable": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.formatOnPaste": true, + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/CVS": true, + "**/.DS_Store": true, + "**/*.js.map": true, + "node_modules": true + } +} From ca9b0afb5e6c5c21f9af514ea74f94873013a9f0 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 13:02:26 +0000 Subject: [PATCH 08/17] style(.eslintrc.json): add some extra rules to eslint --- template/.eslintrc.json | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/template/.eslintrc.json b/template/.eslintrc.json index 37957c9..b4c76c6 100644 --- a/template/.eslintrc.json +++ b/template/.eslintrc.json @@ -37,10 +37,18 @@ "avoidEscape": true } ], + "import/no-extraneous-dependencies": [ + "error", + { + "devDependencies": true + } + ], "react/jsx-uses-react": ["off"], "react/react-in-jsx-scope": ["off"], "react/jsx-props-no-spreading": ["warn"], "react/jsx-one-expression-per-line": "off", - "no-shadow": "off" + "no-shadow": "off", + "@typescript-eslint/no-shadow": "off", + "no-console": "off" } } From 8f40060c49b7700f190c8df0bf4886eedd632818 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 13:06:17 +0000 Subject: [PATCH 09/17] feat(index.tsx): only bridge window events if running on a touchscreen --- template/src/index.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/template/src/index.tsx b/template/src/index.tsx index 51ddd5a..2b97a0c 100644 --- a/template/src/index.tsx +++ b/template/src/index.tsx @@ -6,13 +6,20 @@ import { bridgeReceiveBooleanFromNative, bridgeReceiveStringFromNative, bridgeReceiveObjectFromNative, + isCrestronTouchscreen, } from "@crestron/ch5-crcomlib"; import App from "./App"; -(window as any).bridgeReceiveIntegerFromNative = bridgeReceiveIntegerFromNative; -(window as any).bridgeReceiveBooleanFromNative = bridgeReceiveBooleanFromNative; -(window as any).bridgeReceiveStringFromNative = bridgeReceiveStringFromNative; -(window as any).bridgeReceiveObjectFromNative = bridgeReceiveObjectFromNative; +if (isCrestronTouchscreen()) { + (window as any).bridgeReceiveIntegerFromNative = + bridgeReceiveIntegerFromNative; + (window as any).bridgeReceiveBooleanFromNative = + bridgeReceiveBooleanFromNative; + (window as any).bridgeReceiveStringFromNative = + bridgeReceiveStringFromNative; + (window as any).bridgeReceiveObjectFromNative = + bridgeReceiveObjectFromNative; +} ReactDOM.render( From a3c4c9b715fab54adcd53ba4b1db7a6e8fe70c45 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 13:12:47 +0000 Subject: [PATCH 10/17] feat(index.tsx): add react-router hash router to app --- template/src/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/template/src/index.tsx b/template/src/index.tsx index 2b97a0c..6f9eadc 100644 --- a/template/src/index.tsx +++ b/template/src/index.tsx @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; +import { HashRouter as Router } from "react-router-dom"; import "./index.css"; import { bridgeReceiveIntegerFromNative, @@ -23,7 +24,9 @@ if (isCrestronTouchscreen()) { ReactDOM.render( - + + + , document.getElementById("root"), ); From ba11c14cc1645361b2a167e9e937276b0c479455 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 14:55:22 +0000 Subject: [PATCH 11/17] chore(.editorconfig): add .editorconfig --- .editorconfig | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..8c3c619 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +root = true + +[*] + +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_style = tab +indent_size = tab +tab_width = 4 +trim_trailing_whitespace = true + +[*.md] + +trim_trailing_whitespace = false From 1ad069802cb2bd9cbbb711cf0e0cfde2c657a875 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 14:56:36 +0000 Subject: [PATCH 12/17] chore(vscode): add extra settings to vscode settings file --- .vscode/settings.json | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index e11d671..de69f4f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,15 +1,19 @@ { - "typescript.validate.enable": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true, - "editor.formatOnPaste": true, - "files.exclude": { - "**/.git": true, - "**/.svn": true, - "**/.hg": true, - "**/CVS": true, - "**/.DS_Store": true, - "**/*.js.map": true, - "node_modules": true - } + "typescript.validate.enable": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.formatOnPaste": true, + "files.trimTrailingWhitespace": true, + "[markdown]": { + "files.trimTrailingWhitespace": false + }, + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/CVS": true, + "**/.DS_Store": true, + "**/*.js.map": true, + "node_modules": true + } } From 4c015a0631702020bbe46e430d72b45fead1db1c Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 14:57:59 +0000 Subject: [PATCH 13/17] chore(template/.editorconfig): update .editorconfig to not trim trailing whitespace in .md files --- template/.editorconfig | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/template/.editorconfig b/template/.editorconfig index 0fd71f4..8c3c619 100644 --- a/template/.editorconfig +++ b/template/.editorconfig @@ -9,3 +9,7 @@ indent_style = tab indent_size = tab tab_width = 4 trim_trailing_whitespace = true + +[*.md] + +trim_trailing_whitespace = false From 4575275fd8819e89c27dceb7d18e5292641d786b Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 14:59:00 +0000 Subject: [PATCH 14/17] chore(template/vscode): add extra settings to vscode settings file --- template/.vscode/settings.json | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/template/.vscode/settings.json b/template/.vscode/settings.json index dc4417a..0c56e5f 100644 --- a/template/.vscode/settings.json +++ b/template/.vscode/settings.json @@ -1,6 +1,19 @@ { - "typescript.validate.enable": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.formatOnSave": true, - "editor.formatOnPaste": true + "typescript.validate.enable": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.formatOnPaste": true, + "files.trimTrailingWhitespace": true, + "[markdown]": { + "files.trimTrailingWhitespace": false + }, + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/CVS": true, + "**/.DS_Store": true, + "**/*.js.map": true, + "node_modules": true + } } From 774884c3d9c60338b0ee21ddd80df3f71970d9e4 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 15:00:26 +0000 Subject: [PATCH 15/17] docs(template/readme.md): update documentation with extras scripts and link to CH5 docs --- template/README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/template/README.md b/template/README.md index 4efd1ae..4e0c105 100644 --- a/template/README.md +++ b/template/README.md @@ -4,11 +4,16 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo ## Crestron CH5 Specific -`yarn build` will compile the code in src to the build directory. +`yarn build` will compile the code in src to the build directory. `yarn build:archive` will build a ch5z file from the most recently built build and output to the dist folder. -`yarn build:deploy` will deploy the ch5z from the dist folder to a touchpanel "panel". -`yarn build:onestep` will execute the above three steps in sequence. +`yarn build:deploy:touchscreen` will deploy the ch5z from the dist folder to a touchscreen. +`yarn build:onestep:touchscreen` will execute the build, archive and deploy steps in sequence. + +`yarn build:deploy:web` will deploy the ch5z from the dist folder to a control system. +`yarn build:onestep:web` will execute the build, archive and deploy steps in sequence. + +To learn more about Crestron CH5, check out the [Crestron CH5 documentation](https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Home.htm). ## Available Scripts From d90270ec83e5b459b669e060639d8ad972aad3b7 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 15:49:59 +0000 Subject: [PATCH 16/17] docs(readme.md): update documentation --- README.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/README.md b/README.md index 99f84f9..6474d8b 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ This is an unofficial third party TypeScript template for [Create React App](https://github.com/facebook/create-react-app) and [Crestron CH5](https://www.npmjs.com/package/@crestron/ch5-crcomlib) +The template is setup to work with Crestron CH5 out of the box so you can get up and running quickly. It also provides packages for page routing, styling using [CSS-in-JS](https://en.wikipedia.org/wiki/CSS-in-JS) (you can still use regular CSS or SCSS 😄), a wide variety of icons, mobile browser console, linting and more... 🚀 🚀 🚀 + To use this template, add `--template @norgate-av/crestron-ch5-typescript` when creating a new app. For example: @@ -14,7 +16,47 @@ npx create-react-app my-app --template @norgate-av/crestron-ch5-typescript yarn create react-app my-app --template @norgate-av/crestron-ch5-typescript ``` +## What does this template provide? + +- Crestron CH5 CrComLib +- Crestron CH5 WebXPanel +- Crestron CH5 CLI +- [Typescript](https://www.typescriptlang.org/) +- [React Router](https://reactrouterdotcom.fly.dev/) +- [Styled Components](https://styled-components.com/) +- [React Icons](https://react-icons.github.io/react-icons/) +- [Eruda](https://eruda.liriliri.io/) +- [ESLint](https://eslint.org/) +- [Prettier](https://prettier.io/) +- [Husky](https://typicode.github.io/husky/#/) +- [Lint-Staged](https://github.com/okonet/lint-staged) +- [Commitizen](https://commitizen-tools.github.io/commitizen/) +- [VSCode Workspace Config](https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings) +- [EditorConfig](https://editorconfig.org/) + +## Project Setup + +To upload to a Crestron touchscreen or control system, you must add the IP address or hostname to the project properties in `package.json`. + +```json +{ + "crestron": { + "project": { + "touchscreen": { + "url": "Enter IP/Hostname of Crestron Touchpanel here...", + "type": "touchscreen" + }, + "web": { + "url": "Enter IP/Hostname of Crestron Processor here...", + "type": "web" + } + } + } +} +``` + For more information, please refer to: - [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app. - [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App. +- [Crestron CH5 Documentation](https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Home.htm) From 7e98dadaf4aab4a88785bcd225e7987a474e9e49 Mon Sep 17 00:00:00 2001 From: Damien Butt Date: Sat, 26 Mar 2022 15:52:11 +0000 Subject: [PATCH 17/17] docs(template/readme.md): update documentation --- template/README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/template/README.md b/template/README.md index 4e0c105..b0df07c 100644 --- a/template/README.md +++ b/template/README.md @@ -15,6 +15,27 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo To learn more about Crestron CH5, check out the [Crestron CH5 documentation](https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Home.htm). +## Project Setup + +To upload to a Crestron touchscreen or control system, you must add the IP address or hostname to the project properties in `package.json`. + +```json +{ + "crestron": { + "project": { + "touchscreen": { + "url": "Enter IP/Hostname of Crestron Touchpanel here...", + "type": "touchscreen" + }, + "web": { + "url": "Enter IP/Hostname of Crestron Processor here...", + "type": "web" + } + } + } +} +``` + ## Available Scripts In the project directory, you can run: