Minimal demonstration of turning a Vite project with React + TypeScript acting as a single page application into a Crestron HTML5 project, along with PWA support
It has been common practice for this repo, among others, to reference the @crestron/ch5-crcomlib and @crestron/ch5-webxpanel libraries via their CJS builds in code. However CJS modules are meant for a Node.js runtime, not a browser runtime. CJS uses the require syntax, yet commonly we use ESM import syntax to import the CrComLib or WebXPanel objects into scope. This creates a mismatch at runtime for how/when the scripts are to be loaded by the UI container (panel, app, or browser). On 70-series panels (and certain browser versions) this often results in an excessive and constant stream of generic "Script error" invocations, and potential loss of functionality. It also requires developers to manually assign the CrComLib bridge functions to the window object, since CJS does not do this automatically (Node.js does not have a window object to bind to after all).
This branch focuses on switching to using UMD builds of the Crestron libraries instead of the (incorrect despite mostly working) CJS builds. This negates the need to manually bind the CrComLib methods to the window object as the UMD modules do this automatically, as well as removes confusion on the UI containers that could often cause script errors due to mismatched module types (since they do not recognize CJS/require syntax, and using import for CJS messes with Rollup (the Vite build tool)). This also means we don't need to use patch-package as we never have to import the libs in code, so we don't need to worry about the package.json main property for either Crestron lib, instead we just copy the lib files themselves into the output folder, and reference them in the index.html
It has been common practice for this repo, among others, to reference the
@crestron/ch5-crcomliband@crestron/ch5-webxpanellibraries via their CJS builds in code. However CJS modules are meant for a Node.js runtime, not a browser runtime. CJS uses therequiresyntax, yet commonly we use ESMimportsyntax to import the CrComLib or WebXPanel objects into scope. This creates a mismatch at runtime for how/when the scripts are to be loaded by the UI container (panel, app, or browser). On 70-series panels (and certain browser versions) this often results in an excessive and constant stream of generic "Script error" invocations, and potential loss of functionality. It also requires developers to manually assign the CrComLib bridge functions to the window object, since CJS does not do this automatically (Node.js does not have a window object to bind to after all).This branch focuses on switching to using UMD builds of the Crestron libraries instead of the (incorrect despite mostly working) CJS builds. This negates the need to manually bind the CrComLib methods to the window object as the UMD modules do this automatically, as well as removes confusion on the UI containers that could often cause script errors due to mismatched module types (since they do not recognize CJS/require syntax, and using
importfor CJS messes with Rollup (the Vite build tool)). This also means we don't need to usepatch-packageas we never have to import the libs in code, so we don't need to worry about the package.jsonmainproperty for either Crestron lib, instead we just copy the lib files themselves into the output folder, and reference them in the index.html