https://github.com/mikeal/funky

💪🏿 Front-end view system using basic functional programming and template literals.
https://github.com/mikeal/funky

Last synced: about 2 months ago
JSON representation

💪🏿 Front-end view system using basic functional programming and template literals.

• Host: GitHub
• URL: https://github.com/mikeal/funky
• Owner: mikeal
• Created: 2016-07-05T23:47:41.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-11T21:50:35.000Z (about 7 years ago)
• Last Synced: 2024-05-01T22:15:29.682Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 40
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Funky

Front-end view system using basic functional programming and template literals.

## Usage

#### `funk` | `funk.view`

```javascript

var funk = require('funky')

var docview = funk`

  


    ${item => item.text}

  

`


document.body.appendChild(docview({text: "Hello World!"}))

```

The `funk` and `funk.view` are function handlers for string template literals. 

The return value is a function.

When called this function returns a DOM element with some properties added. 

Any variables passed to the view function are passed to every function in the

template literal and the element will use the return values from those

functions.

#### `element.update()`

```javascript

var funk = require('funky')

var docview = funk`

  


    ${item => item.text}

  

`


document.body.appendChild(docview({text: "Hello World!", id: 'hello'}))

var element = docview({text: "Hello Second Line.", id: 'second-hello'})

document.body.appendChild(element)

// Update content 3 seconds after adding to DOM.

setTimeout(() => {

  element.update({text: "Updated, Hello Second Line.", id: 'second-hello'})

  document.getElementById('hello').update({text: "Updated", id: "hello"})

}, 1000 * 3)

```

DOM elements created by funky views have a method attached named `update`. This

function is used to update the element with new values as if they had been

passed to the original view creation.

Below the surface this uses 

[`yo-yo.update`](https://github.com/maxogden/yo-yo#updating-events) 

which uses efficient DOM diffing.

#### `funk.list`

List views are designed to operate almost exactly like regular JavaScript 

Arrays except when items are removed, added, or re-ordered, new views are

rendered to the DOM.

```javascript

var simpleview = funk`

  


    ${text => text}

  

`

var list = funk.list(simpleview, ["Hello World!", "Hello Second Line."])

document.body.appendChild(list.node)

```


The `list.node` property is the DOM node that can be attached.

List views can also directly be passed into other views.

```javascript

var simpleview = funk`

  


    ${text => text}

  

`

var list = funk.list(simpleview, ["Hello World!", "Hello Second Line."])

var listContainer = funk`
 id}">${list}
`('list-container')

document.body.appendChild(listContainer)

```