Write declarative layouts in Python, today! :tada:

pip install vdom

Features

• Helpers for svg elements available in vdom.svg

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:

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

Instead of:

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

keyword arguments should come after the positional arguments.

Now with more helpers!

All the standard DOM elements are importable from vdom.helpers (#15)

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

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.

>>> 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 and hyperscript, allowing you to write condense React.createElement style writing:

>>> 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.

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: