Skip to content

Commit f3416db

Browse files
committed
fixes #752
1 parent deb3907 commit f3416db

File tree

2 files changed

+49
-19
lines changed

2 files changed

+49
-19
lines changed

fasthtml/jupyter.py

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ def stop(self):
111111
wait_port_free(self.port)
112112

113113
# %% ../nbs/api/06_jupyter.ipynb
114-
def HTMX(path="", app=None, host='localhost', port=8000, height="auto", link=False, iframe=True):
114+
def HTMX(path="/", host='localhost', app=None, port=8000, height="auto", link=False, iframe=True):
115115
"An iframe which displays the HTMX application in a notebook."
116116
if isinstance(path, (FT,tuple,Safe)):
117117
assert app, 'Need an app to render a component'
@@ -127,9 +127,11 @@ def HTMX(path="", app=None, host='localhost', port=8000, height="auto", link=Fal
127127
if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
128128
}, false);
129129
}""" if height == "auto" else ""
130-
if link: display(HTML(f'<a href="http://{host}:{port}{path}" target="_blank">Open in new tab</a>'))
130+
proto = 'http' if host=='localhost' else 'https'
131+
fullpath = f"{proto}://{host}:{port}{path}" if host else path
132+
if link: display(HTML(f'<a href="{fullpath}" target="_blank">Open in new tab</a>'))
131133
if iframe:
132-
return HTML(f'<iframe src="http://{host}:{port}{path}" style="width: 100%; height: {height}; border: none;" onload="{scr}" ' + """allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> """)
134+
return HTML(f'<iframe src="{fullpath}" style="width: 100%; height: {height}; border: none;" onload="{scr}" ' + """allow="accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking"></iframe> """)
133135

134136
# %% ../nbs/api/06_jupyter.ipynb
135137
def ws_client(app, nm='', host='localhost', port=8000, ws_connect='/ws', frame=True, link=True, **kwargs):

nbs/api/06_jupyter.ipynb

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@
486486
"text/html": [
487487
"<meta charset=\"utf-8\">\n",
488488
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n",
489-
"<script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js\"></script><script src=\"https://cdn.jsdelivr.net/gh/answerdotai/[email protected]/fasthtml.js\"></script><script src=\"https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js\"></script><script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script><script id=\"_Ma-6sCTJTHGTifD87uPCcg\">if (window.htmx) htmx.process(document.body)</script>"
489+
"<script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js\"></script><script src=\"https://cdn.jsdelivr.net/gh/answerdotai/[email protected]/fasthtml.js\"></script><script src=\"https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js\"></script><script src=\"https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js\"></script><script id=\"_DHTp7k3SRbaeAjPb6FGNOw\">if (window.htmx) htmx.process(document.body)</script>"
490490
],
491491
"text/plain": [
492492
"<IPython.core.display.HTML object>"
@@ -539,6 +539,32 @@
539539
"server = JupyUvi(app, port=port)"
540540
]
541541
},
542+
{
543+
"cell_type": "code",
544+
"execution_count": null,
545+
"id": "a4f1b1f5",
546+
"metadata": {},
547+
"outputs": [
548+
{
549+
"data": {
550+
"text/markdown": [
551+
"<div id=\"_Uxpzz_26TZeN-kzFA6LeKg\">\n",
552+
" <div id=\"_9s4Pdqx7TxGcbe-7x7MKVQ\"></div>\n",
553+
"<script id=\"_k1VVcEJeS3e1JxBePQpAnw\">if (window.htmx) htmx.process(document.body)</script></div>\n"
554+
],
555+
"text/plain": [
556+
"div(('',),{'id': '_9s4Pdqx7TxGcbe-7x7MKVQ'})"
557+
]
558+
},
559+
"execution_count": null,
560+
"metadata": {},
561+
"output_type": "execute_result"
562+
}
563+
],
564+
"source": [
565+
"(c := Div(''))"
566+
]
567+
},
542568
{
543569
"cell_type": "code",
544570
"execution_count": null,
@@ -567,12 +593,12 @@
567593
{
568594
"data": {
569595
"text/markdown": [
570-
"<div id=\"_lF3_zvFTTauKcZNcHZ8LpA\">\n",
571-
" <p hx-get=\"/hoho\" hx-trigger=\"load\" id=\"_aJqRycdpRPuyeiURlbZ8BA\">not loaded</p>\n",
572-
"<script id=\"_a5FhiYrpQeCFQCYQStn3lg\">if (window.htmx) htmx.process(document.body)</script></div>\n"
596+
"<div id=\"_evO_Voq9Qi_5b-1p0oZS0g\">\n",
597+
" <p hx-get=\"/hoho\" hx-trigger=\"load\" id=\"_gJNOsF9IQdmKesYSdh1qTA\">not loaded</p>\n",
598+
"<script id=\"_ow7qEPILT7OQmBtdrWq9xQ\">if (window.htmx) htmx.process(document.body)</script></div>\n"
573599
],
574600
"text/plain": [
575-
"p(('not loaded',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'id': '_aJqRycdpRPuyeiURlbZ8BA'})"
601+
"p(('not loaded',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'id': '_gJNOsF9IQdmKesYSdh1qTA'})"
576602
]
577603
},
578604
"execution_count": null,
@@ -601,12 +627,12 @@
601627
{
602628
"data": {
603629
"text/markdown": [
604-
"<div id=\"_xZGC746jR9a1OjZ0hEcqWw\">\n",
605-
" <div id=\"_tKRSel-kSYygGu6YDZPFKw\"></div>\n",
606-
"<script id=\"_Yt-BbxZkTbaYpQOMMVkVNw\">if (window.htmx) htmx.process(document.body)</script></div>\n"
630+
"<div id=\"_knZLzRRZSa_OAxB-fR4ksQ\">\n",
631+
" <div id=\"_o4AwfFRyQWmVI9xjlOzMHA\"></div>\n",
632+
"<script id=\"_y2CD7-QJS-6s7XTrdTdVZw\">if (window.htmx) htmx.process(document.body)</script></div>\n"
607633
],
608634
"text/plain": [
609-
"div(('',),{'id': '_tKRSel-kSYygGu6YDZPFKw'})"
635+
"div(('',),{'id': '_o4AwfFRyQWmVI9xjlOzMHA'})"
610636
]
611637
},
612638
"execution_count": null,
@@ -627,12 +653,12 @@
627653
{
628654
"data": {
629655
"text/markdown": [
630-
"<div id=\"_9bcZUsV0QmOr2D9CQRCrAw\">\n",
631-
" <p hx-get=\"/foo\" hx-trigger=\"load\" hx-target=\"#_tKRSel-kSYygGu6YDZPFKw\" id=\"_ANwkPUA8Qx6zBLptyU2RMg\">hi</p>\n",
632-
"<script id=\"_Nh6GPCU4RS6Kzw8Pblb6rg\">if (window.htmx) htmx.process(document.body)</script></div>\n"
656+
"<div id=\"_irfLkUpwQxeAxNgcbzO7cA\">\n",
657+
" <p hx-get=\"/foo\" hx-trigger=\"load\" hx-target=\"#_o4AwfFRyQWmVI9xjlOzMHA\" id=\"_RtkS_DHNSNWtnCdfdhuyoA\">hi</p>\n",
658+
"<script id=\"_GaeLaNuzS9ifDsTnO6pHYw\">if (window.htmx) htmx.process(document.body)</script></div>\n"
633659
],
634660
"text/plain": [
635-
"p(('hi',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'hx-target': '#_tKRSel-kSYygGu6YDZPFKw', 'id': '_ANwkPUA8Qx6zBLptyU2RMg'})"
661+
"p(('hi',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'hx-target': '#_o4AwfFRyQWmVI9xjlOzMHA', 'id': '_RtkS_DHNSNWtnCdfdhuyoA'})"
636662
]
637663
},
638664
"execution_count": null,
@@ -680,7 +706,7 @@
680706
"outputs": [],
681707
"source": [
682708
"#| export\n",
683-
"def HTMX(path=\"\", app=None, host='localhost', port=8000, height=\"auto\", link=False, iframe=True):\n",
709+
"def HTMX(path=\"/\", host='localhost', app=None, port=8000, height=\"auto\", link=False, iframe=True):\n",
684710
" \"An iframe which displays the HTMX application in a notebook.\"\n",
685711
" if isinstance(path, (FT,tuple,Safe)):\n",
686712
" assert app, 'Need an app to render a component'\n",
@@ -696,9 +722,11 @@
696722
" if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
697723
" }, false);\n",
698724
" }\"\"\" if height == \"auto\" else \"\"\n",
699-
" if link: display(HTML(f'<a href=\"http://{host}:{port}{path}\" target=\"_blank\">Open in new tab</a>'))\n",
725+
" proto = 'http' if host=='localhost' else 'https'\n",
726+
" fullpath = f\"{proto}://{host}:{port}{path}\" if host else path\n",
727+
" if link: display(HTML(f'<a href=\"{fullpath}\" target=\"_blank\">Open in new tab</a>'))\n",
700728
" if iframe:\n",
701-
" return HTML(f'<iframe src=\"http://{host}:{port}{path}\" style=\"width: 100%; height: {height}; border: none;\" onload=\"{scr}\" ' + \"\"\"allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> \"\"\")"
729+
" return HTML(f'<iframe src=\"{fullpath}\" style=\"width: 100%; height: {height}; border: none;\" onload=\"{scr}\" ' + \"\"\"allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> \"\"\")"
702730
]
703731
},
704732
{

0 commit comments

Comments
 (0)