diff --git a/jsnox/jsnox-tests.ts b/jsnox/jsnox-tests.ts new file mode 100644 index 000000000..4e990766b --- /dev/null +++ b/jsnox/jsnox-tests.ts @@ -0,0 +1,57 @@ +/// +import React = require('react'); +import jsnox = require('jsnox'); +var $ = jsnox(React); + +interface PersonProps { + firstName: string + lastName: string + age: number +} + +var Person = React.createClass({ + render(): React.ReactHTMLElement { return null } +}); + +var PersonTag = React.createFactory(Person); + +var clickHandler: React.MouseEventHandler + +// Tests with spec string +function spec_string () { + var result: React.ReactHTMLElement + + // just spec string + result = $('div') + + // No properties, just children + result = $('div', 'hello') // one string child + result = $('div', $('span', 'world')) // one element child + result = $('div', ['hello', $('span', 'world')]) // mixed array of children + + // With html properties + result = $('div', { onClick: clickHandler }) // no children + result = $('div', { onClick: clickHandler }, 'hello') // one string child + result = $('div', { onClick: clickHandler }, $('span', 'world')) // one element child + result = $('div', { onClick: clickHandler }, ['hello', $('span', 'world')]) // mixed array of children +} + +// Tests with react component +function react_component() { + var result: React.ReactHTMLElement + + // with nothing more + result = $(Person) + + // No properties, just children + result = $(Person, 'hello') // one string child + result = $(Person, $('span', 'world')) // one element child + result = $(Person, ['hello', $('span', 'world')]) // mixed array of children + + // With component props + var props = { firstName: 'Bob', lastName: 'Garfield', age: 72 } + result = $(Person, props) // no children + result = $(Person, props, 'hello') // one string child + result = $(Person, props, $('span', 'world')) // one element child + result = $(Person, props, ['hello', PersonTag()]) // mixed array of children +} \ No newline at end of file diff --git a/jsnox/jsnox.d.ts b/jsnox/jsnox.d.ts new file mode 100644 index 000000000..b3e4460c0 --- /dev/null +++ b/jsnox/jsnox.d.ts @@ -0,0 +1,68 @@ +// Type definitions for JSnoX +// Project: https://github.com/af/jsnox +// Definitions by: Steve Baker +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module 'jsnox' { + + /* + * JSnoX requires an object with a createElement method. + * This will normally be the React object but could be something else + */ + interface ReactLikeObject { + createElement

(type: React.ComponentClass

| string, + props: P, children: React.ReactNode): React.ReactElement

; + } + + interface Module { + (reactObj: ReactLikeObject): CreateElement + } + + interface CreateElement { + /** + * Renders an HTML element from the given spec string, with children but without + * extra props. + * @param specString A string that defines a component in a way that resembles + * CSS selectors. Eg. "input:email#foo.bar.baz[name=email][required]" + * @param children A single React node (string or ReactElement) or array of nodes. + * Note that unlike with React itself, multiple children must be placed into an array. + */ + (specString: string, children: React.ReactNode): React.ReactHTMLElement + + /** + * Renders an HTML element from the given spec string, with optional props + * and children + * @param specString A string that defines a component in a way that resembles + * CSS selectors. Eg. "input:email#foo.bar.baz[name=email][required]" + * @param props Object of html attribute key-value pairs + * @param children A single React node (string or ReactElement) or array of nodes. + * Note that unlike with React itself, multiple children must be placed into an array. + */ + (specString: string, props?: React.HTMLAttributes, children?: React.ReactNode): React.ReactHTMLElement + + + /** + * Renders a React component, with children but no props + * @param component A plain React component (created from React.createClass()) or + * component factory (created from React.createFactory()) + * @param children A single React node (string or ReactElement) or array of nodes. + * Note that unlike with React itself, multiple children must be placed into an array. + */ +

(component: React.ComponentClass

, children: React.ReactNode): React.ReactElement

+ + /** + * Renders a React component, with optional props and children + * @param component A plain React component (created from React.createClass()) or + * component factory (created from React.createFactory()) + * @param props Props object to pass to the component + * @param children A single React node (string or ReactElement) or array of nodes. + * Note that unlike with React itself, multiple children must be placed into an array. + */ +

(component: React.ComponentClass

, props?: P, children?: React.ReactNode): React.ReactElement

+ } + + var exports: Module + export = exports +}