refactor: add latest bore and allow ts declaration generation

global.d.ts

@@ -3,33 +3,8 @@ declare module '*.css';
 declare module '*.json';
 
 // Skate
-declare module 'skatejs-web-components';
 declare module 'core-js';
 
-// Bore
-declare module 'bore' {
-
-  interface BoreNode extends HTMLElement {
-  }
-  interface WrappedNode extends Wrapper {
-    node: BoreNode,
-  }
-  type Query<T> = string | JSX.Element | T | ((node: BoreNode) => boolean) | Object;
-
-  interface Wrapper {
-    readonly shadowRoot: ShadowRoot;
-    all<T extends HTMLElement>(query: Query<T>): WrappedNode[],
-    one<T extends HTMLElement>(query: Query<T>): WrappedNode,
-    has<T extends HTMLElement>(query: Query<T>): boolean,
-
-    wait(callback?: (wrapper: WrappedNode) => any): Promise<WrappedNode>,
-    waitFor(callback: (wrapper: WrappedNode) => boolean, options?: { delay?: number }): Promise<WrappedNode>,
-  }
-  export function mount(htmlOrNode: JSX.Element | JSX.Element[] | string): WrappedNode;
-  export function h(name: string, attrsOrProps?: Object, ...children: any[]): JSX.Element | JSX.Element[];
-
-}
-
 
 // Custom Elements
 declare const customElements: CustomElementRegistry;

package.json

@@ -39,7 +39,7 @@
     "@types/mocha": "^2.2.37",
     "@types/sinon-chai": "^2.7.27",
     "awesome-typescript-loader": "^3.0.3",
-    "bore": "^2.0.0",
+    "bore": "^2.0.1",
     "commitizen": "^2.9.5",
     "concurrently": "^3.1.0",
     "css-loader": "^0.26.1",

packages/_helpers/bore-h.ts

@@ -1,33 +1,36 @@
+/**
+ * @deprecated
+ */
 export function h( name: any, attrs: { [ key: string ]: any }, ...chren: any[] ) {
   const node = typeof name === 'function' ? handleFunction( name ) : document.createElement( name );
   Object.keys( attrs || [] ).forEach(( attrName: string ) =>
     shouldBeAttr( attrName, attrs[ attrName ] )
       ? ( attr( node, attrName, attrs[ attrName ] ) )
       : ( node[ attrName ] = attrs[ attrName ] )
   );
-  chren.forEach( (child) => node.appendChild( child instanceof Node ? child : document.createTextNode( child ) ) );
+  chren.forEach(( child ) => node.appendChild( child instanceof Node ? child : document.createTextNode( child ) ) );
   return node;
 }
 
-function startsWith (key: string, val: string) {
-  return key.indexOf(val) === 0;
+function startsWith( key: string, val: string ) {
+  return key.indexOf( val ) === 0;
 }
-function shouldBeAttr (key: string, val: string) {
-  return startsWith(key, 'aria-') || startsWith(key, 'data-') || isAttribute(key);
+function shouldBeAttr( key: string, val: string ) {
+  return startsWith( key, 'aria-' ) || startsWith( key, 'data-' ) || isAttribute( key );
 }
 function isAttribute( key: string ) {
   return key === 'attributes';
 }
 
-function handleFunction (Fn: any) {
+function handleFunction( Fn: any ) {
   return Fn.prototype instanceof HTMLElement ? new Fn() : Fn();
 }
 
 // JQuery like attr
 function attr( node: any, attrName: string, attrValue: any ): void {
-  if ( isAttribute(attrName) ) {
+  if ( isAttribute( attrName ) ) {
     Object.keys( attrValue ).forEach(( key ) => {
-      node.setAttribute( key, attrValue[key] );
+      node.setAttribute( key, attrValue[ key ] );
     });
     return;
   }

packages/_helpers/colorTypes.ts

@@ -1,4 +1,4 @@
-const ColorTypes = {
+export const ColorTypes = {
   brand: 'brand',
   info: 'info',
   warning: 'warning',

packages/_helpers/definitions/events.ts

@@ -0,0 +1,3 @@
+  export type ClickEvent = typeof HTMLElement.prototype.onclick;
+  export type FocusEvent = typeof HTMLElement.prototype.onfocus;
+  export type BlurEvent = typeof HTMLElement.prototype.onblur;

packages/_helpers/definitions/types.ts

@@ -0,0 +1,4 @@
+// @TODO this should maybe be a part of Skate
+export type IntrinsicCustomElement<P> = P & Partial<HTMLElement>;
+// @TODO this should maybe be a part of Bore
+export type IntrinsicBoreElement<A, E> = { attrs?: A } & { events?: E };

packages/_helpers/index.ts

@@ -1,3 +1,7 @@
+import * as GenericEvents from './definitions/events';
+import * as GenericTypes from './definitions/types';
+
+export { GenericEvents, GenericTypes };
 export * from './colorTypes';
 export * from './css';
 export * from './sizes';

packages/_helpers/sizes.ts

@@ -1,4 +1,4 @@
-const Sizes = {
+export const Sizes = {
   xsmall: 'xsmall',
   small: 'small',
   medium: 'medium',

packages/button/Button.test.tsx

@@ -1,45 +1,64 @@
 import * as expect from 'expect';
-import { h } from '../_helpers';
-import { mount } from 'bore';
+import { h, mount } from 'bore';
+import { emit } from 'skatejs';
 
 import { Button } from './index';
 
 describe( Button.is, () => {
 
-describe( `Custom element`, () => {
-  it( `should be registered`, () => {
-    expect( customElements.get( Button.is ) ).toBe( Button );
-  });
-  it( `should render via JSX IntrinsicElement`, () => {
-    return mount( <bl-button>Hello</bl-button> ).wait( (element) => {
-      expect( element.node.localName ).toBe( Button.is );
+  describe( `Custom element`, () => {
+
+    it( `should be registered`, () => {
+      expect( customElements.get( Button.is ) ).toBe( Button );
     });
-  });
-  it( `should render`, () => {
-    return mount( <Button /> ).wait(( element ) => {
-      expect( element.has( '.c-button' ) ).toBe( true );
+
+    it( `should render via JSX IntrinsicElement`, () => {
+      return mount( <bl-button>Hello</bl-button> ).wait(( element ) => {
+        expect( element.node.localName ).toBe( Button.is );
+      });
+    });
+
+    it( `should render`, () => {
+      return mount( <Button /> ).wait(( element ) => {
+        expect( element.has( '.c-button' ) ).toBe( true );
+      });
     });
   });
-});
 
-describe( `API`, () => {
+  describe( `API`, () => {
 
-  describe( `[color]`, () => {
+    describe( `[color]`, () => {
 
-    it( `should render no color class on button by default`, () => {
-      return mount(<bl-button attributes={{color: 'brand'} as any}>huhuh</bl-button>).wait(( element ) => {
-        expect( element.one( 'button' ).node.className ).toContain( 'c-button' );
+      it( `should render no color class on button by default`, () => {
+        return mount( <bl-button attrs={{ color: 'brand' }}>huhuh</bl-button> ).wait(( element ) => {
+          expect( element.one( 'button' ).node.className ).toContain( 'c-button' );
+        });
       });
+
+      it( `should render color class on button`, () => {
+        return mount( <bl-button attrs={{ color: 'info' }}>hello</bl-button> ).wait(( element ) => {
+          expect( element.has( '.c-button--info' ) ).toBe( true );
+        });
+      });
+
     });
 
-    it( `should render color class on button`, () => {
-      return mount( <bl-button attributes={ { color: 'info' } as any }>hello</bl-button> ).wait(( element ) => {
-        expect( element.has( '.c-button--info' ) ).toBe( true );
+    describe( `events`, () => {
+
+      it( `should handle click`, () => {
+
+        let clickTriggered = false;
+        const handleClick = ( e: MouseEvent ) => { clickTriggered = true; };
+
+        return mount( <bl-button events={{ click: handleClick }}>Click me</bl-button> )
+          .wait(( element ) => {
+            emit( element.node, 'click' );
+            expect( clickTriggered ).toBe( true );
+          });
       });
+
     });
 
   });
 
 });
-
-});

packages/button/Button.tsx

@@ -1,33 +1,43 @@
-import { h, Component, prop } from 'skatejs';
+import { h, Component, prop, ComponentProps } from 'skatejs';
 
-import { ColorType, cssClassForColorType, css } from '../_helpers';
+import {
+  ColorType,
+  cssClassForColorType,
+  css,
+  GenericTypes,
+  GenericEvents
+} from '../_helpers';
 
 import styles from './Button.scss';
 
-// public
-type ButtonProps = Props & EventProps;
-type Props = {
+export type ButtonProps = Props & EventHandlers;
+
+export type Props = {
   disabled?: boolean,
   block?: boolean,
   close?: boolean,
   ghost?: boolean,
   color?: ColorType,
 };
-type EventProps = {
-  onClick?: typeof HTMLElement.prototype.onclick,
+
+export type Events = {
+  click?: GenericEvents.ClickEvent,
+};
+export type EventHandlers = {
+  onClick?: GenericEvents.ClickEvent,
 };
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      'bl-button': ButtonProps & Partial<HTMLElement>,
+      'bl-button': GenericTypes.IntrinsicCustomElement<ButtonProps> & GenericTypes.IntrinsicBoreElement<Props, Events>
     }
   }
 }
 
 export class Button extends Component<ButtonProps> {
   static get is() { return 'bl-button'; }
-  static get props() {
+  static get props(): ComponentProps<Button, Props> {
     return {
       disabled: prop.boolean( {
         attribute: true
@@ -47,7 +57,7 @@ export class Button extends Component<ButtonProps> {
           source: true
         }
       }),
-      color: prop.string( {
+      color: prop.string<Button, ColorType>( {
         attribute: {
           source: true
         }

packages/button/index.demo.tsx

@@ -1,13 +1,13 @@
-import { h, Component, prop, props } from 'skatejs';
+import { h, Component, prop, props, ComponentProps } from 'skatejs';
 import { Button } from './index';
 
-type DemoProps = { logger: string[] };
+export type DemoProps = { logger: string[] };
 export class Demo extends Component<DemoProps> {
   static get is() { return 'bl-button-demo'; }
 
-  static get props() {
+  static get props(): ComponentProps<Demo, DemoProps> {
     return {
-      logger: prop.array()
+      logger: prop.array<Demo, string>()
     };
   }
 

packages/button/package.json

@@ -3,6 +3,7 @@
   "version": "1.2.0",
   "main": "dist/main.js",
   "license": "MIT",
+  "typings": "definitions/index.d.ts",
   "scripts": {
     "start": "../../node_modules/.bin/webpack-dev-server --config ../../webpack.config.js --env.dev --hot --host 0.0.0.0 --env.element=button",
     "test": "npm run build:test && ../../node_modules/.bin/wct -l firefox",

packages/button/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "definitions"
+  },
   "include": [
     "../../global.d.ts",
     "*.ts",

toolbelt/templates/package.json

@@ -2,6 +2,7 @@
   "name": "bl-generic",
   "version": "1.0.0",
   "main": "dist/main.js",
+  "typings": "definitions/index.d.ts",
   "license": "MIT",
   "scripts": {
     "start": "../../node_modules/.bin/webpack-dev-server --config ../../webpack.config.js --env.dev --hot --host 0.0.0.0 --env.element=packageName",

toolbelt/templates/tsconfig.json

@@ -1,8 +1,13 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "definitions"
+  },
   "include": [
     "../../global.d.ts",
     "*.ts",
     "*.tsx"
   ]
+
 }

tsconfig.json

@@ -8,6 +8,7 @@
     "noUnusedLocals": true,
     "noEmitHelpers": true,
     "importHelpers": true,
+    "stripInternal": true,
     "moduleResolution": "node",
     "outDir": "ts-output",
     "rootDir": "./",

yarn.lock

@@ -524,7 +524,7 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bore@^2.0.0:
+bore@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/bore/-/bore-2.0.1.tgz#25b561fced51611e3af195a4635b8919b0de9c54"
   dependencies: