Merge pull request #581 from callmephilip/fix/html2ft-edge-cases

Fix html2ft edge cases, group custom attrs, add tests

Author: jph00

fasthtml/components.py

@@ -189,17 +189,23 @@ def _parse(elm, lvl=0, indent=4):
         cts = elm.contents
         cs = [repr(c.strip()) if isinstance(c, str) else _parse(c, lvl+1)
               for c in cts if str(c).strip()]
-        attrs = []
+        attrs, exotic_attrs  = [], {}
         for key, value in sorted(elm.attrs.items(), key=lambda x: x[0]=='class'):
             if isinstance(value,(tuple,list)): value = " ".join(value)
-            key = rev_map.get(key, key)
-            attrs.append(f'{key.replace("-", "_")}={value!r}'
-                         if _re_h2x_attr_key.match(key) else f'**{{{key!r}:{value!r}}}')
+            key, value = rev_map.get(key, key), value or True
+            if _re_h2x_attr_key.match(key): attrs.append(f'{key.replace("-", "_")}={value!r}')
+            else: exotic_attrs[key] = value
+        if exotic_attrs: attrs.append(f'**{exotic_attrs!r}')
         spc = " "*lvl*indent
         onlychild = not cts or (len(cts)==1 and isinstance(cts[0],str))
         j = ', ' if onlychild else f',\n{spc}'
         inner = j.join(filter(None, cs+attrs))
-        if onlychild: return f'{tag_name}({inner})'
+        if onlychild:
+            if not attr1st: return f'{tag_name}({inner})'
+            else:
+                # respect attr1st setting
+                attrs = ', '.join(filter(None, attrs))
+                return f'{tag_name}({attrs})({cs[0] if cs else ""})'
         if not attr1st or not attrs: return f'{tag_name}(\n{spc}{inner}\n{" "*(lvl-1)*indent})' 
         inner_cs = j.join(filter(None, cs))
         inner_attrs = ', '.join(filter(None, attrs))

nbs/api/01_components.ipynb

@@ -738,17 +738,23 @@
     "        cts = elm.contents\n",
     "        cs = [repr(c.strip()) if isinstance(c, str) else _parse(c, lvl+1)\n",
     "              for c in cts if str(c).strip()]\n",
-    "        attrs = []\n",
+    "        attrs, exotic_attrs  = [], {}\n",
     "        for key, value in sorted(elm.attrs.items(), key=lambda x: x[0]=='class'):\n",
     "            if isinstance(value,(tuple,list)): value = \" \".join(value)\n",
-    "            key = rev_map.get(key, key)\n",
-    "            attrs.append(f'{key.replace(\"-\", \"_\")}={value!r}'\n",
-    "                         if _re_h2x_attr_key.match(key) else f'**{{{key!r}:{value!r}}}')\n",
+    "            key, value = rev_map.get(key, key), value or True\n",
+    "            if _re_h2x_attr_key.match(key): attrs.append(f'{key.replace(\"-\", \"_\")}={value!r}')\n",
+    "            else: exotic_attrs[key] = value\n",
+    "        if exotic_attrs: attrs.append(f'**{exotic_attrs!r}')\n",
     "        spc = \" \"*lvl*indent\n",
     "        onlychild = not cts or (len(cts)==1 and isinstance(cts[0],str))\n",
     "        j = ', ' if onlychild else f',\\n{spc}'\n",
     "        inner = j.join(filter(None, cs+attrs))\n",
-    "        if onlychild: return f'{tag_name}({inner})'\n",
+    "        if onlychild:\n",
+    "            if not attr1st: return f'{tag_name}({inner})'\n",
+    "            else:\n",
+    "                # respect attr1st setting\n",
+    "                attrs = ', '.join(filter(None, attrs))\n",
+    "                return f'{tag_name}({attrs})({cs[0] if cs else \"\"})'\n",
     "        if not attr1st or not attrs: return f'{tag_name}(\\n{spc}{inner}\\n{\" \"*(lvl-1)*indent})' \n",
     "        inner_cs = j.join(filter(None, cs))\n",
     "        inner_attrs = ', '.join(filter(None, attrs))\n",
@@ -816,18 +822,18 @@
        "```python\n",
        "Form(\n",
        "    Fieldset(name='stuff')(\n",
-       "        Input(value='Profit', id='title', name='title', cls='char'),\n",
+       "        Input(value='Profit', id='title', name='title', cls='char')(),\n",
        "        Label(cls='px-2')(\n",
-       "            Input(type='checkbox', name='done', data_foo='bar', checked='1', cls='checkboxer'),\n",
+       "            Input(type='checkbox', name='done', data_foo='bar', checked='1', cls='checkboxer')(),\n",
        "            'Done'\n",
        "        ),\n",
-       "        Input(type='hidden', id='id', name='id', value='2'),\n",
+       "        Input(type='hidden', id='id', name='id', value='2')(),\n",
        "        Select(name='opt')(\n",
-       "            Option(value='a'),\n",
-       "            Option(value='b', selected='1')\n",
+       "            Option(value='a')(),\n",
+       "            Option(value='b', selected='1')()\n",
        "        ),\n",
-       "        Textarea('Details', id='details', name='details'),\n",
-       "        Button('Save')\n",
+       "        Textarea(id='details', name='details')('Details'),\n",
+       "        Button()('Save')\n",
        "    )\n",
        ")\n",
        "```"
@@ -885,30 +891,73 @@
   },
   {
    "cell_type": "markdown",
-   "id": "474e14b4",
+   "id": "defc22f0",
    "metadata": {},
    "source": [
-    "# Export -"
+    "## Tests"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "d211e8e2",
+   "id": "46083529",
    "metadata": {},
    "outputs": [],
    "source": [
     "#|hide\n",
-    "import nbdev; nbdev.nbdev_export()"
+    "def test_html2ft(html: str, attr1st=False):\n",
+    "    # html -> ft -> html\n",
+    "    assert html == to_xml(eval(html2ft(html, attr1st))).strip()"
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "814cf69a",
+   "id": "517bcd86",
    "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "test_html2ft('<input value=\"Profit\" name=\"title\" id=\"title\" class=\"char\">', attr1st=True)\n",
+    "test_html2ft('<input value=\"Profit\" name=\"title\" id=\"title\" class=\"char\">')\n",
+    "test_html2ft('<div id=\"foo\"></div>')\n",
+    "test_html2ft('<div id=\"foo\">hi</div>')\n",
+    "test_html2ft('<div x-show=\"open\" x-transition:enter=\"transition duration-300\" x-transition:enter-start=\"opacity-0 scale-90\">Hello 👋</div>')\n",
+    "test_html2ft('<div x-transition:enter.scale.80 x-transition:leave.scale.90>hello</div>')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "99773c69",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "assert html2ft('<div id=\"foo\">hi</div>', attr1st=True) == \"Div(id='foo')('hi')\"\n",
+    "assert html2ft(\"\"\"\n",
+    "  <div x-show=\"open\" x-transition:enter=\"transition duration-300\" x-transition:enter-start=\"opacity-0 scale-90\">Hello 👋</div>\n",
+    "\"\"\") == \"Div('Hello 👋', x_show='open', **{'x-transition:enter': 'transition duration-300', 'x-transition:enter-start': 'opacity-0 scale-90'})\"\n",
+    "assert html2ft('<div x-transition:enter.scale.80 x-transition:leave.scale.90>hello</div>') == \"Div('hello', **{'x-transition:enter.scale.80': True, 'x-transition:leave.scale.90': True})\"\n",
+    "assert html2ft(\"<img alt=' ' />\") == \"Img(alt=' ')\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "474e14b4",
+   "metadata": {},
+   "source": [
+    "# Export -"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d211e8e2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#|hide\n",
+    "import nbdev; nbdev.nbdev_export()"
+   ]
   }
  ],
  "metadata": {