Permalink
Browse files

fix(ts-typings): update ts-typings to match latest API additions (#1006)

* feat(ts-typings): add prop.object definition and make it generic for better type inference

* feat(ts-typings): update attribute PropOptions type to match latest API
  • Loading branch information...
1 parent 7534ebd commit 7405f9bf567e3d58a4d361ad1879ff07a1d834c8 @Hotell Hotell committed on GitHub Jan 9, 2017
Showing with 74 additions and 5 deletions.
  1. +8 −2 src/index.d.ts
  2. +66 −3 test/definitions/misc.tsx
View
@@ -42,8 +42,13 @@ export class Component<Props> extends HTMLElement {
static rendered?(elem: Component<any>): void;
}
+type AttributeReflectionBaseType = boolean | string;
+type AttributeReflectionConfig = AttributeReflectionBaseType | {
+ source?: AttributeReflectionBaseType,
+ target?: AttributeReflectionBaseType
+}
export interface PropOptions<El, T> {
- attribute?: boolean | string;
+ attribute?: AttributeReflectionConfig ;
coerce?: (value: any) => T | null | undefined;
default?: T | null | undefined | ((elem: El, data: { name: string; }) => T | null | undefined);
deserialize?: (value: string | null) => T | null | undefined;
@@ -76,7 +81,8 @@ export var prop: {
number(attr?: PropOptions<any, number>): PropOptions<any, number>;
boolean(attr?: PropOptions<any, boolean>): PropOptions<any, boolean>;
string(attr?: PropOptions<any, string>): PropOptions<any, string>;
- array(attr?: PropOptions<any, any[]>): PropOptions<any, any[]>;
+ array<T>(attr?: PropOptions<any, T[]>): PropOptions<any, T[]>;
+ object<T extends Object>(attr?: PropOptions<any, T>): PropOptions<any, T>;
};
export function props(elem: Component<any>, props?: any): void;
@@ -93,6 +93,21 @@
};
}
});
+
+ class MyCmp extends skate.Component<any> {
+ static get props() {
+ return {
+ myProp: {
+ attribute: {
+ // set propert from my-prop attribute on element
+ source: true,
+ // reflect property value to different-prop on element
+ target: 'differentProp'
+ }
+ }
+ };
+ }
+ }
}
{ // https://github.com/skatejs/skatejs#coerce
customElements.define('my-component', class extends skate.Component<{ myProp: any; }> {
@@ -375,12 +390,16 @@
}
});
}
-{ // https://github.com/skatejs/skatejs#prop
- skate.prop.boolean();
-
+{ // https://skatejs.gitbooks.io/skatejs/content/docs/api/#prop
const myNewProp = skate.prop.create({});
myNewProp({});
+ skate.prop.boolean();
+ skate.prop.string();
+ skate.prop.number();
+ skate.prop.array();
+ skate.prop.object();
+
skate.prop.boolean({
coerce() {
// coerce it differently than the default way
@@ -390,6 +409,50 @@
// do something when set
}
});
+
+ type UserModel = { id: number, email: string }
+ class User extends skate.Component<{ user: UserModel }>{
+ static get is() { return 'my-user' }
+ static get props() {
+ return {
+ user: skate.prop.object({
+ default: { id: -1, email: '' }
+ })
+ }
+ }
+
+ user: UserModel;
+
+ renderCallback() {
+ const {id, email} = this.user;
+ return [
+ <p>
+ <div>ID: {id}</div>
+ <div>Email: {email}</div>
+ </p>
+ ];
+ }
+ }
+
+ class UserList extends skate.Component<{ users: UserModel[] }>{
+ static get is() { return 'my-user-list' }
+ static get props() {
+ return {
+ users: skate.prop.array()
+ }
+ }
+
+ users: UserModel[];
+
+ renderCallback() {
+ const {users} = this;
+ return [
+ <ul>
+ {users.map((user) => (<li><User user={user} /></li>))}
+ </ul>
+ ];
+ }
+ }
}
{ // https://github.com/skatejs/skatejs#props-elem-props
const { define, props } = skate;

0 comments on commit 7405f9b

Please sign in to comment.