From 7791d2213e6a4271c73167ae7c4012353499dd8a Mon Sep 17 00:00:00 2001 From: Swizz Date: Sat, 12 Aug 2017 08:27:05 +0200 Subject: [PATCH] Add README.md --- LICENSE.md | 2 +- README.md | 55 +++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/LICENSE.md b/LICENSE.md index c175d17..8deb62b 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,4 +1,4 @@ -Copyright © 2017-present [Jorge Bucaran](https://github.com/jbucaran) +Copyright © 2017-present [Quentin Gerodel](https://github.com/Swizz) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 90f4f81..6364235 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,79 @@ -# hyperapp-package -[![Travis CI](https://img.shields.io/travis/YOU/hyperapp-PACKAGE/master.svg)](https://travis-ci.org/YOU/hyperapp-PACKAGE) -[![Codecov](https://img.shields.io/codecov/c/github/YOU/hyperapp-PACKAGE/master.svg)](https://codecov.io/gh/YOU/hyperapp-PACKAGE) -[![npm](https://img.shields.io/npm/v/hyperapp-PACKAGE.svg)](https://www.npmjs.org/package/PACKAGE) +# hyperapp-html +[![Travis CI](https://img.shields.io/travis/Swizz/hyperapp-html/master.svg)](https://travis-ci.org/Swizz/hyperapp-html) +[![Codecov](https://img.shields.io/codecov/c/github/Swizz/hyperapp-html/master.svg)](https://codecov.io/gh/Swizz/hyperapp-html) +[![npm](https://img.shields.io/npm/v/hyperapp-html.svg)](https://www.npmjs.org/package/hyperapp-html) [![Slack](https://hyperappjs.herokuapp.com/badge.svg)](https://hyperappjs.herokuapp.com "Join us") -hyperapp-package is virgo HyperApp package starter. +Html helpers for hyperapp and every `h`. ## Installation Using [npm](https://npmjs.com):
-npm i hyperapp-PACKAGE
+npm i hyperapp-html
 
Then setup a [build pipeline](https://github.com/hyperapp/hyperapp/blob/master/docs/getting-started.md#build-pipeline) and import it. ```jsx -import { WHATEVER } from "hyperapp-PACKAGE" +import { div, h1 } from "hyperapp-html" ``` Using a CDN: ```html - + ``` -Then access the WHATEVER in the global scope as WHATEVER. +Then access the all hmtl tags or the factory in the global scope as div, h1, etc... ## Usage ```jsx -app({ -}) +const vnode = h1({ id: "title" }, "Hi.") ``` ## Example -[Try it online](PLEASE ADD A LIVE PLAYGROUND) + ```jsx app({ + state: { + title: "Hi." + }, + view: state => div({}, [ + h1(null, state.title) + ]) }) ``` ## API -### group -#### name +### Tags +#### tagname + +Type: (props: object, children: vnode[]) => vnode -Type: ... +Call the proper `h` to return a vnode according to the tag name. + +```jsx +const vnode = tagname({ id: "title" }, "Hi.") +``` -Desc. +### Factory +#### html +Type: (h: function) => tagsObject + +Return a calalog of html helpers that call the given `h` then return a vnode. + +```jsx +const { tagname } = html(h) + +const vnode = tagname({ id: "title" }, "Hi.") +``` ## License -hyperapp-PACKAGE is MIT licensed (by default). See [LICENSE](LICENSE.md). +hyperapp-html is MIT licensed. See [LICENSE](LICENSE.md).