fix: custom component name should be constrained explicitely - WF-52

[FabienArcellier]

fix #517

---

[madeindjs]

In JS, we prefer camlCase like isValidKey.

Suggested change

	const is_valid_key = regex.test(key);
	if (!is_valid_key) {
	const isValidKey = regex.test(key);
	if (!isValidKey) {

[madeindjs]

Question, do we really want to stop the application here ? Do you think console.warn could be enough ?

[FabienArcellier]

I asked myself the question. I decided to raise an explicit error. A simple warning might be enough. I will adapt this message in this case.

[madeindjs]

I think the function name could be more meaningfull. Maybe checkCustomComponents

[FabienArcellier]

In this case I want to call the function like this declareCustomComponents. It seems more logical when you read the calling code :

export default declareCustomComponents({
	bubblemessage: BubbleMessage,
	bubbleMessageadvanced: BubbleMessageAdvanced,
});

[ramedina86]

@madeindjs thanks for taking a look at this

@FabienArcellier I think we should check during load, it'll be more straightforward and reliable. Also, let's try to keep core as lean as we can.

We can intercept the keys here:

importCustomComponentTemplate in loadExtensions.ts (for loading via transpiled extension)
if (WRITER_LIVE_CCT === "yes") {... in templateMap.ts (for loading live while developing)

[FabienArcellier]

@madeindjs thanks for taking a look at this

@FabienArcellier I think we should check during load, it'll be more straightforward and reliable. Also, let's try to keep core as lean as we can.

We can intercept the keys here:

importCustomComponentTemplate in loadExtensions.ts (for loading via transpiled extension) if (WRITER_LIVE_CCT === "yes") {... in templateMap.ts (for loading live while developing)

I have implemented this approach. I continue looking for a better way to raise the error during the build or using a dedicated npm command.

The problem only appears currently in runtime when you open the web application. It does not feel great.

[FabienArcellier]

I have implemented a command npm run custom.check that verify this rule. It will allow to check the status without running the entire app and allow a person to implement a start of continuous integration pipeline when building custom components. I add the info in the documentation.