Merge pull request #44 from gnestor/vdom-notebook

Update vdom usage in README and example notebook
jupyterlab · Oct 7, 2017 · 5942380 · 5942380
2 parents 59226e1 + 438f5fc
commit 5942380
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 20 deletions.
diff --git a/notebooks/vdom-extension.ipynb b/notebooks/vdom-extension.ipynb
@@ -125,12 +125,12 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "## vdom.div(children: list)"
+    "## vdom.helpers.div(children: list)"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [
     {
@@ -141,7 +141,6 @@
         {
          "attributes": {},
          "children": "Our Incredibly Declarative Example",
-         "key": 0,
          "tagName": "h1"
         },
         {
@@ -151,20 +150,17 @@
           {
            "attributes": {},
            "children": "in Python",
-           "key": 1,
            "tagName": "b"
           },
           "?"
          ],
-         "key": 1,
          "tagName": "p"
         },
         {
          "attributes": {
           "src": "https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"
          },
          "children": null,
-         "key": 2,
          "tagName": "img"
         },
         {
@@ -174,35 +170,153 @@
           {
            "attributes": {},
            "children": "you",
-           "key": 1,
            "tagName": "b"
           },
           " create next?"
          ],
-         "key": 3,
          "tagName": "p"
         }
        ],
        "tagName": "div"
       },
       "text/plain": [
-       "<vdom.core.createComponent.<locals>.Component at 0x1066f5a58>"
+       "<div />"
       ]
      },
-     "execution_count": 7,
+     "execution_count": 1,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
-    "from vdom import h1, p, img, div, b\n",
+    "from vdom.helpers import h1, p, img, div, b\n",
     "\n",
-    "div([\n",
+    "div(\n",
     "    h1('Our Incredibly Declarative Example'),\n",
-    "    p(['Can you believe we wrote this ', b('in Python'), '?']),\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",
-    "])"
+    "    p('What will ', b('you'), ' create next?'),\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## vdom.createComponent(tag: string)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vdom.v1+json": {
+       "attributes": {
+        "enableBackground": "new 0 0 841.9 595.3",
+        "height": "128",
+        "id": "Layer_2_1_",
+        "version": "1.1",
+        "viewBox": "0 0 841.9 595.3",
+        "width": "128",
+        "x": "0px",
+        "y": "0px"
+       },
+       "children": {
+        "attributes": {},
+        "children": [
+         {
+          "attributes": {
+           "d": "M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3\n\t\tc4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9\n\t\tc-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6\n\t\tc-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11\n\t\tc-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6\n\t\tc-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4\n\t\tc6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6\n\t\tc28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5\n\t\tc-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2\n\t\tc-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8\n\t\tc6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9\n\t\tc8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3\n\t\tc5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z\n\t\t M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z\n\t\t M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z\n\t\t M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z\n\t\t M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z\n\t\t M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9\n\t\tc-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7\n\t\tc1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9\n\t\tC316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6\n\t\tc14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1\n\t\tc-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6\n\t\tC644,312.2,621.1,332.1,585.7,347.1z",
+           "fill": "#61DAFB"
+          },
+          "children": null,
+          "tagName": "path"
+         },
+         {
+          "attributes": {
+           "fill": "#61DAFB",
+           "points": "320.8,78.4 320.8,78.4 320.8,78.4"
+          },
+          "children": null,
+          "tagName": "polygon"
+         },
+         {
+          "attributes": {
+           "cx": "420.9",
+           "cy": "296.5",
+           "fill": "#61DAFB",
+           "r": "45.7"
+          },
+          "children": null,
+          "tagName": "circle"
+         },
+         {
+          "attributes": {
+           "fill": "#61DAFB",
+           "points": "520.5,78.1 520.5,78.1 520.5,78.1"
+          },
+          "children": null,
+          "tagName": "polygon"
+         }
+        ],
+        "tagName": "g"
+       },
+       "tagName": "svg"
+      },
+      "text/plain": [
+       "<svg />"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "from vdom import createComponent\n",
+    "\n",
+    "svg = createComponent('svg')\n",
+    "g = createComponent('g')\n",
+    "path = createComponent('path')\n",
+    "polygon = createComponent('polygon')\n",
+    "circle = createComponent('circle')\n",
+    "\n",
+    "orbital_paths = \"\"\"M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3\n",
+    "\t\tc4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9\n",
+    "\t\tc-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6\n",
+    "\t\tc-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11\n",
+    "\t\tc-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6\n",
+    "\t\tc-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4\n",
+    "\t\tc6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6\n",
+    "\t\tc28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5\n",
+    "\t\tc-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2\n",
+    "\t\tc-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8\n",
+    "\t\tc6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9\n",
+    "\t\tc8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3\n",
+    "\t\tc5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z\n",
+    "\t\t M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z\n",
+    "\t\t M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z\n",
+    "\t\t M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z\n",
+    "\t\t M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z\n",
+    "\t\t M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9\n",
+    "\t\tc-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7\n",
+    "\t\tc1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9\n",
+    "\t\tC316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6\n",
+    "\t\tc14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1\n",
+    "\t\tc-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6\n",
+    "\t\tC644,312.2,621.1,332.1,585.7,347.1z\"\"\"\n",
+    "\n",
+    "svg(\n",
+    "    g(\n",
+    "        path(fill=\"#61DAFB\", d=orbital_paths),\n",
+    "        polygon(fill=\"#61DAFB\", points=\"320.8,78.4 320.8,78.4 320.8,78.4\"),\n",
+    "        circle(fill=\"#61DAFB\", cx=\"420.9\", cy=\"296.5\", r=\"45.7\"),\n",
+    "        polygon(fill=\"#61DAFB\", points=\"520.5,78.1 520.5,78.1 520.5,78.1\")\n",
+    "    ), version=\"1.1\", id=\"Layer_2_1_\", x=\"0px\", y=\"0px\", viewBox=\"0 0 841.9 595.3\", enableBackground=\"new 0 0 841.9 595.3\", height=\"128\", width=\"128\"\n",
+    ")"
    ]
   },
   {

diff --git a/packages/vdom-extension/README.md b/packages/vdom-extension/README.md
@@ -61,14 +61,14 @@ VDOM({
 Using the [vdom Python library](https://github.com/nteract/vdom):
 
 ```python
-from vdom import h1, p, img, div, b
+from vdom.helpers import h1, p, img, div, b
 
-div([
+div(
     h1('Our Incredibly Declarative Example'),
-    p(['Can you believe we wrote this ', b('in Python'), '?']),
+    p('Can you believe we wrote this ', b('in Python'), '?'),
     img(src="https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"),
-    p(['What will ', b('you'), ' create next?']),
-])
+    p('What will ', b('you'), ' create next?'),
+)
 ```
 
 To render a `.vdom` or `.vdom.json` file as a tree, simply open it: