Custom Component Example "BubbleMessage" works half-way about streamsync

[ZBMO]

@ZBMO, @Killian604 and @joelwiesmann, I have opened a PR to fix the build on windows. It would be awesome if you could help us and take few minutes to check if it also solves the issue on your side.

That works great, I tested it with the default bubble components and my own. thank you!

[ZBMO]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

[ZBMO]

That's awesome, I think we should focus our investigation on the behavior of vite on windows.

thanks, idk if this is relevant but I can develop the custom components on windows using the instant reload, so custom.dev works ok on windows, just not the custom.build

[Killian604]

I also have this problem.
Steps followed from the following tutorial link: https://www.streamsync.cloud/custom-components.html

[FabienArcellier]

Hello,

I have try on my side, it's working well. Could you try with these files extension.zip ? It will help to know if we have to look for on the build process or on the browser integration.

I have checked on chromium and firefox on ubuntu. Do you have info about your environment (browser, os, ...)

[ZBMO]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

ok here they are, top one is a link to my extension files built on my windows computer (do not work right), bottom is the files from my other machine (they've been working). They are in fact different.
extension files from windows
extension files from ubuntu

@FabienArcellier i'll upload a video of it happening tomorrow.

[FabienArcellier]

I have done a diff on both files after reformating. I think the one from ubuntu (my version) is linked to the code of streamsync, the one on windows (your version) has built its own symbol.

The external link from vite.config.custom.js seems to be ignored on windows build. There is no trace in result file. @ramedina86 would have better understanding of this part than me.

/*
injectionKeys is externalised so that it can be linked at runtime.
Otherwise, new, independent instances of Symbol would be created, for which
nothing would be provided.
*/
const injectionKeysPath = fileURLToPath(
	new URL("src/injectionKeys.ts", import.meta.url),
);

Here is the diff of both file templates.umd.js after reformating, mine on ubuntu of the left, your on windows on the rigth
https://www.diffchecker.com/DStPaWJf/ (toke a look on line 2)

Could you share your list on npm dependencies ? Here is mine on ubuntu, I use node v16.20.2.

[email protected] /xxxxxxxxxxxxxxxxx/ui
├── @apache-arrow/[email protected]
├── @monaco-editor/[email protected]
├── @rushstack/[email protected]
├── @types/[email protected]
├── @vitejs/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] invalid: "latest" from the root project
├── [email protected]
└── [email protected]

[FabienArcellier]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

ok here they are, top one is a link to my extension files built on my windows computer (do not work right), bottom is the files from my other machine (they've been working). They are in fact different. extension files from windows extension files from ubuntu

@FabienArcellier i'll upload a video of it happening tomorrow.

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

[ZBMO]

I experience the same thing with the linked files, I am using nodejs v20.10.0 in a venv running python 3.10.11 I will upload examples of my files on windows and linux for the BubbleMessage and BubbleMessageAdvanced later tonight.

ok here they are, top one is a link to my extension files built on my windows computer (do not work right), bottom is the files from my other machine (they've been working). They are in fact different. extension files from windows extension files from ubuntu
@FabienArcellier i'll upload a video of it happening tomorrow.

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

[ZBMO]

I have done a diff on both files after reformating. I think the one from ubuntu (my version) is linked to the code of streamsync, the one on windows (your version) has built its own symbol.

The external link from vite.config.custom.js seems to be ignored on windows build. There is no trace in result file. @ramedina86 would have better understanding of this part than me.

/*
injectionKeys is externalised so that it can be linked at runtime.
Otherwise, new, independent instances of Symbol would be created, for which
nothing would be provided.
*/
const injectionKeysPath = fileURLToPath(
	new URL("src/injectionKeys.ts", import.meta.url),
);

Here is the diff of both file templates.umd.js after reformating, mine on ubuntu of the left, your on windows on the rigth https://www.diffchecker.com/DStPaWJf/ (toke a look on line 2)

Could you share your list on npm dependencies ? Here is mine on ubuntu, I use node v16.20.2.

[email protected] /xxxxxxxxxxxxxxxxx/ui
├── @apache-arrow/[email protected]
├── @monaco-editor/[email protected]
├── @rushstack/[email protected]
├── @types/[email protected]
├── @vitejs/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] invalid: "latest" from the root project
├── [email protected]
└── [email protected]

here's mine on windows, npm 10.2.3, node 20.10.0

[email protected] C:xxxxxxxxxxxxxxxxx\ui
├── @apache-arrow/[email protected]
├── @monaco-editor/[email protected]
├── @rushstack/[email protected]
├── @types/[email protected]
├── @vitejs/[email protected]
├── @vue/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] invalid: "latest" from the root project
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] invalid: "latest" from the root project
├── [email protected]
└── [email protected]

[FabienArcellier]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

[ZBMO]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

ah so do "npm custom.build" on ubuntu and then use those two generated files on a windows streamsync app, I will do that.

[ZBMO]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

components built on ubuntu work on both systems, components built on windows don't work on either system.

[ZBMO]

Could you try the version build on ubuntu on instance of streamsync application ? Does it work ?

can you clarify what the version build is? I just now made a fresh venv and a fresh clone of streamsync, ran custom.build and tried the two bubblemessage components and they worked fine

Sorry, I was unclear. Can you test one of the components built on Ubuntu on a streamsync application developed on Windows? Does it work ? If it works, we will focus our investigation on the build of custom compotent on windows platform.

here's a clip of what happens when I use the windows-built files

ss-error-example.mp4

[FabienArcellier]

That's awesome, I think we should focus our investigation on the behavior of vite on windows.

[FabienArcellier]

@ZBMO, @Killian604 and @joelwiesmann, I have opened a PR to fix the build on windows. It would be awesome if you could help us and take few minutes to check if it also solves the issue on your side.