Reorder custom creation methods and text cleanup

nbs/ref/defining_xt_component.ipynb

@@ -32,45 +32,14 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "## NotStr\n",
-    "\n",
-    "The first way is to use the `NotStr` class to use an HTML tag as a string.  It works as a one-off but quickly becomes harder to work with as complexity grows.  However we can see that you can genenrate the same xml using `NotStr` as the out-of-the-box components."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "from fasthtml.common import NotStr,Div, to_xml"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "<div></div>\n"
-     ]
-    }
-   ],
-   "source": [
-    "div_NotStr = NotStr('<div></div>') \n",
-    "print(div_NotStr)"
+    "## Automatic Creation"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "## Automatic Creation\n",
-    "\n",
-    "The next (and better) approach is to let FastHTML generate the component function for you.  As you can see in our `assert` this creates a function that creates the HTML just as we wanted.  This works even though there is not a `Some_never_before_used_tag` function in the `fasthtml.components` source code (you can verify this yourself by looking at the source code).  \n",
+    "The first approach is to let FastHTML generate the component function for you.  As you can see in our `assert` this creates a function that creates the HTML just as we wanted.  This works even though there is not a `Some_never_before_used_tag` function in the `fasthtml.components` source code (you can verify this yourself by looking at the source code).  \n",
     "\n",
     ":::{.callout-tip}\n",
     "Typically these tags are needed because a CSS or Javascript library created a new XML tag that isn't default HTML.  For example the `zero-md` javascript library looks for a `<zero-md></zero-md>` tag to know what to run its javascript code on.  Most CSS libraries work by creating styling based on the `class` attribute, but they can also apply styling to an arbitrary HTML tag that they made up.\n",
@@ -125,6 +94,7 @@
    "outputs": [],
    "source": [
     "import fasthtml\n",
+    "from fasthtml.common import to_xml\n",
     "\n",
     "auto_called = fasthtml.components.Some_never_before_used_tag()\n",
     "manual_called = fasthtml.components.__getattr__('Some_never_before_used_tag')()\n",
@@ -193,6 +163,50 @@
     "We can add any behavior in that function that we need to, so let's go through some progressively complex examples that you may need in some of your projects."
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## NotStr Creation"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "An uncommon method is to use the `NotStr` class using an HTML tag as a string.  It works as a one-off but quickly becomes harder to work with as complexity grows.  However we can see that you can genenrate the same xml using `NotStr` as the out-of-the-box components."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from fasthtml.common import NotStr,to_xml"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "'<div></div>'"
+      ]
+     },
+     "execution_count": null,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "div_NotStr = NotStr('<div></div>') \n",
+    "to_xml(div_NotStr)"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -232,7 +246,7 @@
     "def tag_with_underscores(*c, target_id=None, **kwargs): \n",
     "    return ft_hx('tag_with_underscores', *c, target_id=target_id, **kwargs)\n",
     "\n",
-    "tag_with_underscores()\n"
+    "tag_with_underscores()"
    ]
   },
   {
@@ -271,7 +285,6 @@
     }
    ],
    "source": [
-    "\n",
     "def tag_with_AtSymbol(*c, target_id=None, **kwargs): \n",
     "    return ft_hx('tag-with-@symbol', *c, target_id=target_id, **kwargs)\n",
     "\n",
@@ -292,6 +305,15 @@
     "It also may be that an argument in an HTML tag uses characters that can't be used in python arguments.  To handle these you can define those args using a dictionary."
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from fasthtml.common import Div"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -317,6 +339,13 @@
    "source": [
     "Div(normal_arg='normal stuff',**{'notNormal:arg:with_varing@symbols!':'123'})"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {