SolidJS•2y ago

Using WebComponents in SolidJS

Hi, I'm trying to use Sencha WebComponents in SolidJS: https://docs.sencha.com/extwebcomponents/7.5.0/guides/getting_started/getting_started_existing_javascript_modern.html I got it working, however there are typescript warnings for every sencha element used (even though it works in the browser):

      <ext-toolbar> {/* Shows a warning */}
        <ext-button text="get now" ontap="getNow"></ext-button> {/* Shows a warning */}
        <div id='updateDiv' style="margin-left:20px;"></div> {/* No warning here */}
      </ext-toolbar> {/* Shows a warning */}

      <ext-toolbar> {/* Shows a warning */}
        <ext-button text="get now" ontap="getNow"></ext-button> {/* Shows a warning */}
        <div id='updateDiv' style="margin-left:20px;"></div> {/* No warning here */}
      </ext-toolbar> {/* Shows a warning */}

Is there any way to bypass these warnings? Thanks.

14 Replies

Alex Lohr•2y ago

Those are typescript warnings. You can extend the IntrinsicElements in the JSX namespace of module "solid-js" to fix the warnings.

aabluedragonOP•2y ago

Is there a generic example of how to surpass warnings on elements prefixed with a certain string such as ext-

Alex Lohr•2y ago

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "ext-button": {
        "text": string,
        "ontap": (ev: Event) => void
      },
      "ext-toolbar": {}
    }
  }
}

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "ext-button": {
        "text": string,
        "ontap": (ev: Event) => void
      },
      "ext-toolbar": {}
    }
  }
}

aabluedragonOP•2y ago

Thanks, I guess one must declare each element specifically, no way to declare an entry for all elements prefixed with ext-

Unknown User•2y ago

Message Not Public

Alex Lohr•2y ago

No, because it cannot connect an arbitrary string to a JSX definition. Does your web components define their types somewhere in a namespace?

aabluedragonOP•2y ago

Doesn't look like @sencha/ext-web-components-modern has any typescript in it

Alex Lohr•2y ago

That's unfortunate.

Alex Lohr•2y ago

Maybe these will do: https://github.com/Dretch/typescript-declarations-for-ext

GitHub

GitHub - Dretch/typescript-declarations-for-ext

Contribute to Dretch/typescript-declarations-for-ext development by creating an account on GitHub.

Alex Lohr•2y ago

Or this: https://www.npmjs.com/package/@types/sencha_touch

npm

@types/sencha_touch

TypeScript definitions for Touch. Latest version: 2.3.25, last published: 2 years ago. Start using @types/sencha_touch in your project by running npm i @types/sencha_touch. There is 1 other project in the npm registry using @types/sencha_touch.

aabluedragonOP•2y ago

That repo seems to support up to ExtJS version 5.1.0 7.5.0 is the current version, though the general idea was correct on this repo This one appears to be relevant only for their Touch based lib

Alex Lohr•2y ago

Maybe you'll find something newer. Otherwise, the only thing I could think of is to create a wildcard definition from a * as ext import.

aabluedragonOP•2y ago

Too bad they don't have official typescript defs for it. I guess I'll just do that I haven't found any of the major GUI libs supporting SolidJS yet, looked at telerik and syncfusion, and extjs, all don't ship with proper SolidJS support.. so last resort is Sench ExtJS Web Components Unless something better comes up Currently my app uses Solid-Bootstrap

Unknown User•2y ago

Message Not Public

Gaming

Programming

Using WebComponents in SolidJS