Vdom

Write declarative layouts in Python, today! :tada:


pip install vdom


Features

* Helpers for svg elements available in `vdom.svg`

python
from vdom.svg import svg, circle

svg(
circle(
cy=10,
cx=10,
r=10
),
height=20
)


* Introduce `button`, `label`, and `style` elements

Fixes

* void elements (like `img`, `input_`) now prevent you from accidentally putting children on them (since that would be totally invalid)

Write declarative layouts in Python, today! :tada:


pip install vdom


Use positional arguments for children instead of arrays

You can now write:

python
div(
h1('Woohoo'),
p('it works')
)


Instead of:

python
div([
h1('Woohoo'),
p('it works')
])


keyword arguments should come after the positional arguments.

Now with more helpers!

_All_ the [standard DOM elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) are importable from `vdom.helpers` ([#15](https://github.com/nteract/vdom/pull/15))

python
from vdom.helpers import div, span, p, meter

def happiness(level=90):
smiley = "😃"
percent = level / 100.

if(percent < 0.25):
smiley = "☹️"
elif(percent < 0.50):
smiley = "😐"
elif(percent < 0.75):
smiley = "😀"


return span(
p('Happiness ', smiley),
meter(level, min=0, low=25, high=75, optimum=90, max=100, value=level)
)


Documentation

We've started off some light documentation of how to use `vdom`, and we would welcome more examples from *you*.

* [Design Patterns](https://github.com/nteract/vdom/blob/33dacf615ec006b07dfab77035fe5d5d4bb061ea/docs/design-patterns.md)

Under the hood

Basic tests are set up to ensure you can use `vdom` in python2 _and_ python3.

`vdom`

Write declarative layouts in Python, today! Now with cleaner interfaces that work out of the box. 🎉


pip install vdom


Deprecations

This cleans up probably the biggest misstep we could have made when starting this which was making a function called `createElement` that doesn't actually create the VDOM Element. It creates something more similar to creating a component which can create elements later (it's a factory...).

`createElement` is deprecated in favor of `createComponent`. We kept it backwards compatible with the last release (0.2), keeping it in for now (it's only been a week, but we might as well be kind).

That being said, there are some niftier helpers you may like better! See below for more.

New Functions

`createComponent`

`createComponent` is exactly the same as what `createElement` did before, with a better name.

python
>>> marquee = createComponent('marquee')
>>> marquee('woohoo')
<marquee>woohoo</marquee>


`h`

> Wait, did you pick a single letter for a function?

Yes, yes we did. Ok, it's not us. This comes by way of [`preact`](https://github.com/developit/preact#rendering-jsx) and [`hyperscript`](https://github.com/hyperhype/hyperscript), allowing you to write condense `React.createElement` style writing:

python
>>> h('div', [h('p', 'hey')])
<div><p>hey</p></div>


We don't have JSX in Python, so this is the closest we can really get. :wink:

Helpers

The `h1`, `img`, and other HTML elements are still created here, they're left alone for backwards compatibility. These were put in to be similar to [hyperscript-helpers](https://github.com/ohanhi/hyperscript-helpers).

Bug fix

Prior to this, you had to wrap VDOMEls in a call to `VDOM()`. That's no more, as VDOMElements provide the repr properly now:

<img width="777" alt="screen shot 2017-09-22 at 8 11 32 am" src="https://user-images.githubusercontent.com/836375/30751283-bb599302-9f6d-11e7-918b-318e95739034.png">