Hyperapp V2

hyperapp.d.ts

@@ -1,100 +1,34 @@
 export as namespace hyperapp
 
-/** @namespace [VDOM] */
+export type Children = VNode | string | number | null
 
-/** The VDOM representation of an Element.
- *
- * @memberOf [VDOM]
- */
-export interface VNode<Attributes = {}> {
-  nodeName: string
-  attributes?: Attributes
-  children: Array<VNode | string>
-  key: string
+export enum VNodeType {
+  DEFAULT = 0,
+  RECYCLED_NODE,
+  TEXT_NODE,
 }
 
-/** A Component is a function that returns a custom VNode or View.
- *
- * @memberOf [VDOM]
- */
-export interface Component<Attributes = {}, State = {}, Actions = {}> {
-  (attributes: Attributes, children: Array<VNode | string>):
-    | VNode<Attributes>
-    | View<State, Actions>
+export interface VNode<Props = {}> {
+  name: string,
+  props: Props,
+  children: Array<VNode>
+  element: Element,
+  key: string,
+  type: VNodeType
 }
 
 /**
- * Possibles children types
- */
-export type Children = VNode | string | number | null
-
-/** The soft way to create a VNode.
- * @param name      An element name or a Component function
- * @param attributes     Any valid HTML atributes, events, styles, and meta data
- * @param children  The children of the VNode
- * @returns A VNode tree.
- *
- * @memberOf [VDOM]
- */
-export function h<Attributes>(
-  nodeName: Component<Attributes, any, any> | string,
-  attributes?: Attributes,
+ * Create a new virtual DOM node. A virtual DOM is a description of what a DOM should look like using a tree of virtual nodes.
+ * @param name The name of an Element or a function that returns a virtual DOM node.
+ * @param props HTML props, SVG props, DOM events, Lifecycle Events, and Keys.
+ * @param children The element's child nodes.
+ */
+export function h<Props>(
+  name: string,
+  props?: Props | null,
   ...children: Array<Children | Children[]>
-): VNode<Attributes>
-
-/** @namespace [App] */
-
-/** The result of an action.
- *
- * @memberOf [App]
- */
-export type ActionResult<State> = Partial<State> | Promise<any> | null | void
-
-/** The interface for a single action implementation.
- *
- * @memberOf [App]
- */
-export type ActionType<State, Actions> = (
-  data?: any
-) =>
-  | ((state: State, actions: Actions) => ActionResult<State>)
-  | ActionResult<State>
-
-/** The interface for the actions tree implementation.
- *
- * @memberOf [App]
- */
-export type ActionsType<State, Actions> = {
-  [P in keyof Actions]:
-    | ActionType<State, Actions>
-    | ActionsType<any, Actions[P]>
-}
-
-/** The view function describes the application UI as a tree of VNodes.
- * @returns A VNode tree.
- * @memberOf [App]
- */
-export interface View<State, Actions> {
-  (state: State, actions: Actions): VNode<object>
-}
-
-/** The app() call creates and renders a new application.
- *
- * @param state The state object.
- * @param actions The actions object implementation.
- * @param view The view function.
- * @param container The DOM element where the app will be rendered to.
- * @returns The actions wired to the application.
- * @memberOf [App]
- */
-export function app<State, Actions>(
-  state: State,
-  actions: ActionsType<State, Actions>,
-  view: View<State, Actions>,
-  container: Element | null
-): Actions
+): VNode<Props>
 
-/** @namespace [JSX] */
 
 declare global {
   namespace JSX {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hyperapp",
-  "description": "1 kB JavaScript framework for building web applications.",
-  "version": "1.2.6",
+  "description": "JavaScript micro-framework for building web applications.",
+  "version": "2.0.0-beta.0",
   "main": "dist/hyperapp.js",
   "module": "src/index.js",
   "typings": "hyperapp.d.ts",
@@ -43,12 +43,12 @@
   },
   "devDependencies": {
     "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "jest": "^22.4.3",
-    "prettier": "^1.11.1",
-    "rollup": "^0.57.1",
-    "typescript": "2.8.1",
-    "uglify-js": "3.3.16"
+    "babel-preset-env": "^1.7.0",
+    "jest": "^23.3.0",
+    "prettier": "^1.13.7",
+    "rollup": "^0.62.0",
+    "typescript": "2.9.2",
+    "uglify-js": "3.4.3"
   },
   "prettier": {
     "semi": false