{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Render VDOM `json` in Python"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import display\n",
    "\n",
    "def VDOM(data={}):\n",
    "    bundle = {}\n",
    "    bundle['application/vdom.v1+json'] = data\n",
    "    display(bundle, raw=True)\n",
    "\n",
    "VDOM({\n",
    "    'tagName': 'div',\n",
    "    'attributes': {},\n",
    "    'children': [{\n",
    "        'tagName': 'h1',\n",
    "        'attributes': {},\n",
    "        'children': 'Our Incredibly Declarative Example',\n",
    "        'key': 0\n",
    "    }, {\n",
    "        'tagName': 'p',\n",
    "        'attributes': {},\n",
    "        'children': ['Can you believe we wrote this ', {\n",
    "            'tagName': 'b',\n",
    "            'attributes': {},\n",
    "            'children': 'in Python',\n",
    "            'key': 1\n",
    "        }, '?'],\n",
    "        'key': 1\n",
    "    }, {\n",
    "        'tagName': 'img',\n",
    "        'attributes': {\n",
    "            'src': 'https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif'\n",
    "        },\n",
    "        'key': 2\n",
    "    }, {\n",
    "        'tagName': 'p',\n",
    "        'attributes': {},\n",
    "        'children': ['What will ', {\n",
    "            'tagName': 'b',\n",
    "            'attributes': {},\n",
    "            'children': 'you',\n",
    "            'key': 1\n",
    "        }, ' create next?'],\n",
    "        'key': 3\n",
    "    }]\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Render VDOM using the `vdom` Python package\n",
    "\n",
    "May need to first run `pip install vdom`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from vdom import h1, p, img, div, b\n",
    "\n",
    "div(\n",
    "    h1('Our Incredibly Declarative Example'),\n",
    "    p('Can you believe we wrote this ', b('in Python'), '?'),\n",
    "    img(src=\"https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif\"),\n",
    "    p('What will ', b('you'), ' create next?'),\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}