Using Scale with SolidJs

[W1ckh3ad]

Hello there,

I discovered SolidJs a couple of weeks ago and I decided to try it out as an alternative to react. I started with trying to use Scale components, but I failed.

I used the Solid typescript template, I didn't find the right template in CodeSandBox, but this is close.

JSX doesn't know the 'standard' Webcomponents.

I don't know if you had/have the time to check this or take a look at SolidJs.

I wrote on the SolidJs discord, if anyone of them can help me setting up using StencilJs components in SolidJs.
I will post the updates from them here.

I am grateful for every help.

[reld]

Hi @W1ckh3ad thank you for rising this issue.
As of now we don't officially support SolidJS. But you should be able to use the components with it.
I will make a small test and post my findings here.
Best Regards,
R

[christopherGdynia]

Hi @W1ckh3ad is my privat Account. I will add the answers from the Discord below, but they didn't help me at all ^^

I appreciate your help.

[W1ckh3ad]

RyanSolid answered this on my question how to use Webcomponents in Solid

"Solid supports Web Components as is without any wrapper generally although we do follow a few conventions which hopefully are compatible with Stencil. Generally we pass all props for web components as properties, converting dash-case to camelCase. If you have specific attributes or properties you want to set that don't follow this convention you can use attr: and prop: namespace on the props."

This doesn't help me, but maybe it wil help you.

[reld]

@W1ckh3ad Thanks for sharing the answer.
This is what I thought. SolidJS should not have any issues using web components.

Where exactly did you fail?
Did you go through the setup documentation? Where you able to actually use a component?
It seems to me, that your issue is on the setup of your project.

Do you have a repository showing your project's setup you can share?

[W1ckh3ad]

Hey @reld, thanks for your help and time

I started
npx degit solidjs/templates/ts my-app

After that I installed the @telekom/scale-components library

I added the styles and the polyfills to the index.tsx

when I am trying to use the webcomponent in JSX, is vscode telling me
"Property 'scale-button' does not exist on type 'JSX.IntrinsicElements'.ts(2339)"

I am kinda mad, that I can't it done.

My repos here

[reld]

Hey @W1ckh3ad
I see.. it seems to be a types issue. I am checking with the team about this.

I got two examples working on Codesandbox though.
One using typescript
https://codesandbox.io/s/fast-thunder-rytq9?file=/src/main.tsx

and the other without
https://codesandbox.io/s/solidjs-starter-template-forked-gq38f?file=/src/components/TodoList.js

Both work. The only difference is that the Typescript version is yelling about the missing types. ( but still works )

I'll get back to you as soon as I know more.

Cheers and make yourself a wonderful day
R

[christopherGdynia]

Hey @reld

OMG,
thank you very much,
why didn't I check it 🤦‍♂️

You too!

[acstll]

Hey @christopherGdynia

now we know it's a TypeScript issue with custom elements in JSX. I've seen this solved somewhere, we'll come back :)

[W1ckh3ad]

Hey @acstll @reld

I published my repos here

I didn't got it working what you did in your typescript codesandbox, maybe you can help on this.

The button component doesn't get rendered to the screen.

[christopherGdynia]

@acstll is this what you ment?
JSX typescript fix

[W1ckh3ad]

Hey @W1ckh3ad I see.. it seems to be a types issue. I am checking with the team about this.

I got two examples working on Codesandbox though. One using typescript https://codesandbox.io/s/fast-thunder-rytq9?file=/src/main.tsx

and the other without https://codesandbox.io/s/solidjs-starter-template-forked-gq38f?file=/src/components/TodoList.js

Both work. The only difference is that the Typescript version is yelling about the missing types. ( but still works )

I'll get back to you as soon as I know more.

Cheers and make yourself a wonderful day R

Hey,

I tried to get this work, but I didn't
Today, I forked your sandbox, created a github repository, cloned it and tryed it.
This doens't work either, I am kinda lost.

[acstll]

hey @W1ckh3ad

I'm taking a look at this again today… thanks for trying that out 🙏

[acstll]

Hey @christopherGdynia I'm sorry we haven't been able to solve this one yet!

Yes, stenciljs/core#1636 is exactly the problem. You can see there's no official solution from Stencil. But it's definitely something we need to address at some point.

Is this blocking you now or can we put it in the backlog and close?

[christopherGdynia]

Hi @acstll,
thanks for your help, no this isn't blocking.

My goal is it to test if we can use SolidJS instead of ReactJs