CCA: Component metadata needs stringification?

Venkata Rahul S

I am doing my first Custom Web Component. All went well until the component registration (during the build). During the actual service, the

Composite.register("nheader", {
  view: view,
  viewModel: viewModel,
  metadata: JSON.parse(metadata)
});

call in the loader.ts failed with a JSON parse error:

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

I tried modifying the above code with the following:

Composite.register("nheader", {
  view: view,
  viewModel: viewModel,
  metadata: JSON.parse(JSON.stringify(metadata))
});

Now the error is gone and the page gets served without issues. Most possibly a scripting engine issue. I am using the Firefox Dev edition.

I see some changes in the component generation and documentation:

1. Please rename the metadata import as rawmetadata (for clarity) in the loader.ts
2. Please consider the stringification done as above, so that code works on all browsers. Or my understanding could be corrected. Please comment.
3. The component registration (along with its version) both as a standalone or as part of a pack happens automatically at build time. Can this fact be added to the CCA documentation please? There seems to be some disconnect here because I spent two days understanding how this wiring happens. Perhaps here?

John 'JB' Brock-Oracle

Hi Venkata,

There really should never be a reason to modify one of the loader.js files for a JET custom component.

The CLI does quite a bit of code manipulations during it's build process, yes. Especially for custom components.

If the component is written in TypeScript, there are custom compiler options being processed to help generate metadata for runtime use of the component, there is versioning added to the requirejs path definition to help with browser cache busting, etc.

The original error that you have shown above, would lead me to look at the component.json file for any malformed JSON.

Venkata Rahul S

It may not quite be an error with the component.json file, for otherwise, the file cannot be processed after the stringification modification inside the loader.ts. This may need a change in the loader.ts generator itself.

If the component is written in TypeScript, there are custom compiler options being processed to help generate metadata for runtime use of the component, there is versioning added to the requirejs path definition to help with browser cache busting, etc.

Can you please add something to the documentation to mention that versioning is automatically taken care of during the component registration step of the build. (This part of the framework is well designed IMO, but needs to be mentioned somewhere).