Typescript bindings

[admin]

Do you have plans to include Typescript bindings some time in near future?
I am using proprietary in-house Typescript MVC framework and evaluating new UI layer for it for our next project.
Your framework looks very promising but without bindings can not use it 🙁
We use WebStorm IDE and FuseBox bundler.

[admin]

Hi petays,
Thank you for writing.
We will consider adding Typescript definitions in the future versions. At present, we are focused on building the User Interface components and adding the missing features to the existing components.
Is not it possible to use the Framework without Typescript? We have tutorials like that one https://www.htmlelements.com/docs/create-angular-and-react-applications-with-shared-web-components/ which shows how to use a Custom Element from our framework within Angular & React projects which use Typescript. As for Type checking, all properties in our UI Components are Typed(int, float, date, string, bool) with built-in type checking at run-time i.e invalid values are handled by the framework.
Best regards,
Boyko Markov
https://www.htmlelements.com
Smart HTML Elements Team

[admin]

Hi
Good to hear that you have not abandoned typescript totally.
It is indeed possible to use Smart HTML Elements with typescript using just one import:
import "@smarthtmlelements/smart-elements/source/smart.elements.js";
Only that I am missing intellisense and code completion as I can not use actual types but HTMLElement or nearest type from it if I believe that I can use it.
And can not Ctrl-click (jump) to object or method in question.
I have to copy every method that I use from your API or examples pages. It is a bit tedious but once I got all the words and have tested them to work things go quite smoothly 🙂
Overall I like custom tags very much as they make manipulating DOM elements really slick with only one instance to track and you can use DOM API for that.
IMO your framework has definitely a bright future as it matures a bit and is more feature complete.
Example: Smart HTML Elements with typescript without type definitions
P.S. I would love to have a preview button before submitting post with heavy formatting.

[admin]

I decided to roll on my own type definitions to keep typescript compiler happy.
With a smart guy this kind of type definitions could be generated programmatically in no time!
It is a bit tedious and I feel a bit stupid doing this, but I feel it is easier for my eyes to do this way:

export interface MenuEvent extends CustomEvent {
    detail: SmartMenuItem;
}
export interface SmartMenu extends HTMLElement {
    locale: string;
}
export interface SmartMenuItem extends HTMLElement {
    item: any;
    label: any;
    value: any;
}
export interface SmartTextBox extends HTMLElement {
    locale: string;
    readonly: boolean;
    required: boolean;
    theme: string;
    value: string;
}
export interface SmartPasswordTextBox extends HTMLElement {
    locale: string;
    maxLength: number;
    minLength: number;
    passwordStrength: (password, allowedSymbols) => string;
    required: boolean;
    showPasswordIcon: boolean;
    showPasswordStrength: boolean;
    theme: string;
    tooltipArrow: boolean;
    value: string;
}
export interface SmartDropDownList extends HTMLElement {
    displayMember: string;
    locale: string;
    selectedIndexes: any[];     // array type?
    selectedValues: any[];      // array type?
    selectionMode: string;
    valueMember: string;
    clearItems();
    insert(position: number, value: any);
}

[admin]

Hi petays,
Thanks for sharing this. We are sure it would be helpful to many.
Best Wishes,
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Update:
Typescript definitions are now part of the Smart Web Components download package.
Best Wishes,
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts