Skip to content

Commit bc64dc2

Browse files
jph00jph00
committed
fixes #796 
1 parent 00e13f6 commit bc64dc2

File tree

2 files changed

+164
-19
lines changed

2 files changed

+164
-19
lines changed

‎fasthtml/components.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ def File(fname):
127127
# %% ../nbs/api/01_components.ipynb
128128
def show(ft, *rest, iframe=False, height='auto', style=None):
129129
"Renders FT Components into HTML within a Jupyter notebook."
130+
if isinstance(ft, str): ft = Safe(ft)
130131
if rest: ft = (ft,)+rest
131132
res = to_xml(ft)
132133
if iframe:

‎nbs/api/01_components.ipynb‎

Lines changed: 163 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,13 @@
7979
"outputs": [
8080
{
8181
"data": {
82-
"text/markdown": "```html\n<p id=\"sentence_id\">\n<strong>FastHTML is <i>Fast</i></strong></p>\n\n```",
82+
"text/markdown": [
83+
"```html\n",
84+
"<p id=\"sentence_id\">\n",
85+
"<strong>FastHTML is <i>Fast</i></strong></p>\n",
86+
"\n",
87+
"```"
88+
],
8389
"text/plain": [
8490
"p((strong(('FastHTML is ', i(('Fast',),{})),{}),),{'id': 'sentence_id'})"
8591
]
@@ -328,7 +334,11 @@
328334
"outputs": [
329335
{
330336
"data": {
331-
"text/markdown": "```html\n<a @click.away=\"1\"></a>\n```",
337+
"text/markdown": [
338+
"```html\n",
339+
"<a @click.away=\"1\"></a>\n",
340+
"```"
341+
],
332342
"text/plain": [
333343
"a((),{'@click.away': 1})"
334344
]
@@ -350,7 +360,11 @@
350360
"outputs": [
351361
{
352362
"data": {
353-
"text/markdown": "```html\n<a @click.away=\"1\"></a>\n```",
363+
"text/markdown": [
364+
"```html\n",
365+
"<a @click.away=\"1\"></a>\n",
366+
"```"
367+
],
354368
"text/plain": [
355369
"a((),{'@click.away': 1})"
356370
]
@@ -372,7 +386,11 @@
372386
"outputs": [
373387
{
374388
"data": {
375-
"text/markdown": "```html\n<a @click.away=\"1\"></a>\n```",
389+
"text/markdown": [
390+
"```html\n",
391+
"<a @click.away=\"1\"></a>\n",
392+
"```"
393+
],
376394
"text/plain": [
377395
"a((),{'@click.away': 1})"
378396
]
@@ -382,7 +400,9 @@
382400
"output_type": "execute_result"
383401
}
384402
],
385-
"source": "ft_html('a', UserDict({'@click.away':1}))"
403+
"source": [
404+
"ft_html('a', UserDict({'@click.away':1}))"
405+
]
386406
},
387407
{
388408
"cell_type": "code",
@@ -402,7 +422,11 @@
402422
"outputs": [
403423
{
404424
"data": {
405-
"text/markdown": "```html\n<a id=\"someid\" name=\"someid\"></a>\n```",
425+
"text/markdown": [
426+
"```html\n",
427+
"<a id=\"someid\" name=\"someid\"></a>\n",
428+
"```"
429+
],
406430
"text/plain": [
407431
"a((),{'id': 'someid', 'name': 'someid'})"
408432
]
@@ -440,7 +464,11 @@
440464
"outputs": [
441465
{
442466
"data": {
443-
"text/markdown": "```html\n<a hx-vals='{\"a\": 1}'></a>\n```",
467+
"text/markdown": [
468+
"```html\n",
469+
"<a hx-vals='{\"a\": 1}'></a>\n",
470+
"```"
471+
],
444472
"text/plain": [
445473
"a((),{'hx-vals': '{\"a\": 1}'})"
446474
]
@@ -462,7 +490,11 @@
462490
"outputs": [
463491
{
464492
"data": {
465-
"text/markdown": "```html\n<a hx-target=\"#someid\"></a>\n```",
493+
"text/markdown": [
494+
"```html\n",
495+
"<a hx-target=\"#someid\"></a>\n",
496+
"```"
497+
],
466498
"text/plain": [
467499
"a((),{'hx-target': '#someid'})"
468500
]
@@ -514,7 +546,11 @@
514546
"outputs": [
515547
{
516548
"data": {
517-
"text/markdown": "```html\n<form hx-post=\"/\" hx-target=\"#tgt\" id=\"frm\" name=\"frm\"><button hx-target=\"#foo\" id=\"btn\" name=\"btn\"></button></form>\n```",
549+
"text/markdown": [
550+
"```html\n",
551+
"<form hx-post=\"/\" hx-target=\"#tgt\" id=\"frm\" name=\"frm\"><button hx-target=\"#foo\" id=\"btn\" name=\"btn\"></button></form>\n",
552+
"```"
553+
],
518554
"text/plain": [
519555
"form((button((),{'hx-target': '#foo', 'id': 'btn', 'name': 'btn'}),),{'hx-post': '/', 'hx-target': '#tgt', 'id': 'frm', 'name': 'frm'})"
520556
]
@@ -550,7 +586,12 @@
550586
"outputs": [
551587
{
552588
"data": {
553-
"text/markdown": "```html\n<input name=\"nm\">\n\n```",
589+
"text/markdown": [
590+
"```html\n",
591+
"<input name=\"nm\">\n",
592+
"\n",
593+
"```"
594+
],
554595
"text/plain": [
555596
"input((),{'name': 'nm'})"
556597
]
@@ -573,7 +614,12 @@
573614
"outputs": [
574615
{
575616
"data": {
576-
"text/markdown": "```html\n<input name=\"nm\" hx-swap-oob=\"true\">\n\n```",
617+
"text/markdown": [
618+
"```html\n",
619+
"<input name=\"nm\" hx-swap-oob=\"true\">\n",
620+
"\n",
621+
"```"
622+
],
577623
"text/plain": [
578624
"input((),{'name': 'nm', 'hx-swap-oob': 'true'})"
579625
]
@@ -595,7 +641,12 @@
595641
"outputs": [
596642
{
597643
"data": {
598-
"text/markdown": "```html\n<input name=\"nm\" hx-swap-oob=\"true\">\n\n```",
644+
"text/markdown": [
645+
"```html\n",
646+
"<input name=\"nm\" hx-swap-oob=\"true\">\n",
647+
"\n",
648+
"```"
649+
],
599650
"text/plain": [
600651
"input((),{'name': 'nm', 'hx-swap-oob': 'true'})"
601652
]
@@ -627,6 +678,7 @@
627678
"#| export\n",
628679
"def show(ft, *rest, iframe=False, height='auto', style=None):\n",
629680
" \"Renders FT Components into HTML within a Jupyter notebook.\"\n",
681+
" if isinstance(ft, str): ft = Safe(ft)\n",
630682
" if rest: ft = (ft,)+rest\n",
631683
" res = to_xml(ft)\n",
632684
" if iframe:\n",
@@ -722,6 +774,37 @@
722774
"show(fullpage, height=100, iframe=True)"
723775
]
724776
},
777+
{
778+
"cell_type": "markdown",
779+
"id": "7db522d2",
780+
"metadata": {},
781+
"source": [
782+
"Plain strings also work:"
783+
]
784+
},
785+
{
786+
"cell_type": "code",
787+
"execution_count": null,
788+
"id": "727d32b3",
789+
"metadata": {},
790+
"outputs": [
791+
{
792+
"data": {
793+
"text/html": [
794+
"<p>Hi <i>everyone</i></p>"
795+
],
796+
"text/plain": [
797+
"<IPython.core.display.HTML object>"
798+
]
799+
},
800+
"metadata": {},
801+
"output_type": "display_data"
802+
}
803+
],
804+
"source": [
805+
"show(\"<p>Hi <i>everyone</i></p>\")"
806+
]
807+
},
725808
{
726809
"cell_type": "markdown",
727810
"id": "41a00fe7",
@@ -791,7 +874,14 @@
791874
"outputs": [
792875
{
793876
"data": {
794-
"text/markdown": "```html\n<form><fieldset name=\"stuff\"> <input value=\"Profit\" id=\"title\" class=\"char\" name=\"title\">\n<label class=\"px-2\"> <input type=\"checkbox\" name=\"done\" data-foo=\"bar\" class=\"checkboxer\" checked=\"1\">\nDone</label> <input type=\"hidden\" id=\"id\" name=\"id\" value=\"2\">\n<select name=\"opt\"><option value=\"a\"></option><option value=\"b\" selected=\"1\"></option></select><textarea id=\"details\" name=\"details\">Details</textarea><button>Save</button></fieldset></form>\n```",
877+
"text/markdown": [
878+
"```html\n",
879+
"<form><fieldset name=\"stuff\"> <input value=\"Profit\" id=\"title\" class=\"char\" name=\"title\">\n",
880+
"<label class=\"px-2\"> <input type=\"checkbox\" name=\"done\" data-foo=\"bar\" class=\"checkboxer\" checked=\"1\">\n",
881+
"Done</label> <input type=\"hidden\" id=\"id\" name=\"id\" value=\"2\">\n",
882+
"<select name=\"opt\"><option value=\"a\"></option><option value=\"b\" selected=\"1\"></option></select><textarea id=\"details\" name=\"details\">Details</textarea><button>Save</button></fieldset></form>\n",
883+
"```"
884+
],
795885
"text/plain": [
796886
"form((fieldset((input((),{'value': 'Profit', 'id': 'title', 'class': 'char', 'name': 'title'}), label((input((),{'type': 'checkbox', 'name': 'done', 'data-foo': 'bar', 'class': 'checkboxer', 'checked': '1'}), 'Done'),{'class': 'px-2'}), input((),{'type': 'hidden', 'id': 'id', 'name': 'id', 'value': 2}), select((option((),{'value': 'a'}), option((),{'value': 'b', 'selected': '1'})),{'name': 'opt'}), textarea(('Details',),{'id': 'details', 'name': 'details'}), button(('Save',),{})),{'name': 'stuff'}),),{})"
797887
]
@@ -825,7 +915,11 @@
825915
"outputs": [
826916
{
827917
"data": {
828-
"text/markdown": "```html\n<form><select multiple=\"1\" name=\"items\"><option value=\"a\" selected=\"1\">a</option><option value=\"b\">b</option><option value=\"c\" selected=\"1\">c</option></select></form>\n```",
918+
"text/markdown": [
919+
"```html\n",
920+
"<form><select multiple=\"1\" name=\"items\"><option value=\"a\" selected=\"1\">a</option><option value=\"b\">b</option><option value=\"c\" selected=\"1\">c</option></select></form>\n",
921+
"```"
922+
],
829923
"text/plain": [
830924
"form((select((option(('a',),{'value': 'a', 'selected': '1'}), option(('b',),{'value': 'b'}), option(('c',),{'value': 'c', 'selected': '1'})),{'multiple': '1', 'name': 'items'}),),{})"
831925
]
@@ -857,7 +951,14 @@
857951
"outputs": [
858952
{
859953
"data": {
860-
"text/markdown": "```html\n<form><fieldset><label> <input type=\"checkbox\" name=\"items\" value=\"a\" checked=\"1\">\na</label><label> <input type=\"checkbox\" name=\"items\" value=\"b\">\nb</label><label> <input type=\"checkbox\" name=\"items\" value=\"c\" checked=\"1\">\nc</label></fieldset></form>\n```",
954+
"text/markdown": [
955+
"```html\n",
956+
"<form><fieldset><label> <input type=\"checkbox\" name=\"items\" value=\"a\" checked=\"1\">\n",
957+
"a</label><label> <input type=\"checkbox\" name=\"items\" value=\"b\">\n",
958+
"b</label><label> <input type=\"checkbox\" name=\"items\" value=\"c\" checked=\"1\">\n",
959+
"c</label></fieldset></form>\n",
960+
"```"
961+
],
861962
"text/plain": [
862963
"form((fieldset((label((input((),{'type': 'checkbox', 'name': 'items', 'value': 'a', 'checked': '1'}), 'a'),{}), label((input((),{'type': 'checkbox', 'name': 'items', 'value': 'b'}), 'b'),{}), label((input((),{'type': 'checkbox', 'name': 'items', 'value': 'c', 'checked': '1'}), 'c'),{})),{}),),{})"
863964
]
@@ -1064,7 +1165,29 @@
10641165
"outputs": [
10651166
{
10661167
"data": {
1067-
"text/markdown": "```python\nForm(\n Fieldset(\n Input(value='Profit', id='title', name='title', cls='char'),\n Label(\n Input(type='checkbox', name='done', data_foo='bar', checked='1', cls='checkboxer'),\n 'Done',\n cls='px-2'\n ),\n Input(type='hidden', id='id', name='id', value='2'),\n Select(\n Option(value='a'),\n Option(value='b', selected='1'),\n name='opt'\n ),\n Textarea('Details', id='details', name='details'),\n Button('Save'),\n name='stuff'\n )\n)\n```",
1168+
"text/markdown": [
1169+
"```python\n",
1170+
"Form(\n",
1171+
" Fieldset(\n",
1172+
" Input(value='Profit', id='title', name='title', cls='char'),\n",
1173+
" Label(\n",
1174+
" Input(type='checkbox', name='done', data_foo='bar', checked='1', cls='checkboxer'),\n",
1175+
" 'Done',\n",
1176+
" cls='px-2'\n",
1177+
" ),\n",
1178+
" Input(type='hidden', id='id', name='id', value='2'),\n",
1179+
" Select(\n",
1180+
" Option(value='a'),\n",
1181+
" Option(value='b', selected='1'),\n",
1182+
" name='opt'\n",
1183+
" ),\n",
1184+
" Textarea('Details', id='details', name='details'),\n",
1185+
" Button('Save'),\n",
1186+
" name='stuff'\n",
1187+
" )\n",
1188+
")\n",
1189+
"```"
1190+
],
10681191
"text/plain": [
10691192
"<IPython.core.display.Markdown object>"
10701193
]
@@ -1087,7 +1210,26 @@
10871210
"outputs": [
10881211
{
10891212
"data": {
1090-
"text/markdown": "```python\nForm(\n Fieldset(name='stuff')(\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 'Done'\n ),\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 ),\n Textarea(id='details', name='details')('Details'),\n Button()('Save')\n )\n)\n```",
1213+
"text/markdown": [
1214+
"```python\n",
1215+
"Form(\n",
1216+
" Fieldset(name='stuff')(\n",
1217+
" Input(value='Profit', id='title', name='title', cls='char')(),\n",
1218+
" Label(cls='px-2')(\n",
1219+
" Input(type='checkbox', name='done', data_foo='bar', checked='1', cls='checkboxer')(),\n",
1220+
" 'Done'\n",
1221+
" ),\n",
1222+
" Input(type='hidden', id='id', name='id', value='2')(),\n",
1223+
" Select(name='opt')(\n",
1224+
" Option(value='a')(),\n",
1225+
" Option(value='b', selected='1')()\n",
1226+
" ),\n",
1227+
" Textarea(id='details', name='details')('Details'),\n",
1228+
" Button()('Save')\n",
1229+
" )\n",
1230+
")\n",
1231+
"```"
1232+
],
10911233
"text/plain": [
10921234
"<IPython.core.display.Markdown object>"
10931235
]
@@ -1195,7 +1337,9 @@
11951337
"cell_type": "markdown",
11961338
"id": "474e14b4",
11971339
"metadata": {},
1198-
"source": "\"## Export -"
1340+
"source": [
1341+
"## Export -"
1342+
]
11991343
},
12001344
{
12011345
"cell_type": "code",
@@ -1214,7 +1358,7 @@
12141358
"id": "74aeda124534ac06",
12151359
"metadata": {},
12161360
"outputs": [],
1217-
"source": ""
1361+
"source": []
12181362
}
12191363
],
12201364
"metadata": {

0 commit comments

Comments
 (0)