Angular 13 compatibility (and other frameworks/bundlers)

[tajnymag]

At the moment, the library is published only in its amd, umd and cjs form. Would it be possible to also provide the unbundled esm format? Possibly also combined with specifying the exports (docs) field in package.json to make consuming bundlers aware of the available library formats.

We are trying to use the components in an Angular 13 project so far without any luck. The provided shell template helps only a little, as it heavily relies either on old, custom or heavily configured tooling.

However, with some modifications, we were able to make the package work. Here are the changes:

package.json#exports

We added the exports field to package.json. This allowed the angular compiler to import the correct compiled library.

"exports": {
        ".": {
            "import": "./build_bundles/lib-esm/index.js",
            "require": "./build_bundles/amd/index.js",
            "node": "./build_bundles/cjs/index.js",
            "default": "./build_bundles/umd/index.js"
        },
        "./esm": {
            "import": "./build_bundles/lib-esm/index.js",
            "types": "./build_bundles/lib-esm/index.d.ts"
        },
        "./umd": {
            "default": "./build_bundles/umd/index.js",
            "types": "./build_bundles/umd/index.d.ts"
        },
        "./cjs": {
            "node": "./build_bundles/cjs/index.js",
            "types": "./build_bundles/cjs/index.d.ts"
        },
        "./amd": {
            "require": "./build_bundles/amd/index.js",
            "types": "./build_bundles/amd/index.d.ts"
        }
    },

tsconfig.esm.json

npm build:dev:esm didn't seem to do anything. No errors and no artifacts created. We solved it by specifying files property in tsconfig.esm.json. There is probably a better way to solve this.

"include": ["**/*.ts"]

Usage of process.env

CH5ComponentLibrary relies on webpack to replace process.env used in the source files. This doesn't work for the esm build which are built with tsc only. Without further modifying the library, we opted to polyfill window.process.env in the global scope of our app.

<script>
  window['process'] = {
    env: {
      BUILD_VERSION: "1.0.0",
      BUILD_DATE: "2019-01-01",
    }
  }
  </script>

[craig-bowers]

Thanks for putting this together. I was trying to go through this video to learn how to implement React with Crestron but I was running into a brick wall for a while getting this error after installing the @crestron/ch5-crcomlib package:

It wouldn't work with either:
import { publishEvent } from '@crestron/ch5-crcomlib';
or
import * as CrComLib from '@crestron/ch5-crcomlib';
The result would be this error:

ERROR in ./src/App.tsx 10:0-54
Module not found: Error: Can't resolve '@crestron/ch5-crcomlib' in 'C:\...\crestron-react-app\src'

Your suggestions got me to where I need to be (I hope), but I wanted to add a few things I discovered along the way that might help others that find this thread (at least until Crestron decides to fix this). This is how I did it. Feel free to share improvements to my workflow.

1. Don't use Create React App or you will get a lot of source map errors when running npm run start. I was never planning to use CRA but the video I mentioned above used it and I was following along. I switched over to Vite and the errors went away.
2. Install the ch5-crcomlib package npm i @crestron/ch5-crcomlib. This won't work without doing the steps below, but it will get you started.
3. Clone this repo into a new folder outside your project https://github.com/Crestron/CH5ComponentLibrary
4. In the cloned repo, follow @tajnymag's instructions above by editing the package.json and tsconfig.esm.json files.
5. Now run npm run build:dev:esm and it will create a lib-esm folder in your build_bundles folder.
6. Copy the lib-esm folder into your vite project inside \node_modules@crestron\ch5-crcomlib\build_bundles. I renamed this from lib-esm to simply esm.
7. Open \node_modules@crestron\ch5-crcomlib\package.json and add the following line: "main": "./build_bundles/esm/index.js",
8. Inside the index.html file add @tajnymag's script to fix the process issues

<script>
window['process'] = {
  env: {
    BUILD_VERSION: '1.0.0',
    BUILD_DATE: '2019-01-01',
  },
};
</script>

9. Run npm run dev and you should be good to go.
10. This is as far as I've gotten so far. You might want to run npm run build:prod:esm before you push to production and move that folder over for production.