Skip to content

Commit

Permalink
fixes #557
Browse files Browse the repository at this point in the history
  • Loading branch information
@jph00
jph00 committed Oct 31, 2024
1 parent eb5e490 commit 78196f2
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 24 deletions.
15 changes: 12 additions & 3 deletions fasthtml/jupyter.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,24 @@ def stop(self):
wait_port_free(self.port)

# %% ../nbs/api/06_jupyter.ipynb
def HTMX(path="", host='localhost', port=8000, iframe_height="auto"):
def HTMX(path="", app=None, host='localhost', port=8000, height="auto", link=False, iframe=True):
"An iframe which displays the HTMX application in a notebook."
return HTML(f'<iframe src="http://{host}:{port}{str(path)}" style="width: 100%; height: {iframe_height}; border: none;" ' + """onload="{
if isinstance(path, (FT,tuple)):
route = f'/{unqid()}'
res = path
app.get(route)(lambda: res)
path = route
if isinstance(height, int): height = f"{height}px"
scr = """{
let frame = this;
window.addEventListener('message', function(e) {
if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe
if (e.data.height) frame.style.height = (e.data.height+1) + 'px';
}, false);
}" 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> """)
}""" if height == "auto" else ""
if link: display(HTML(f'<a href="http://{host}:{port}{path}" target="_blank">Open in new tab</a>'))
if iframe:
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> """)

# %% ../nbs/api/06_jupyter.ipynb
def ws_client(app, nm='', host='localhost', port=8000, ws_connect='/ws', frame=True, link=True, **kwargs):
Expand Down
71 changes: 50 additions & 21 deletions nbs/api/06_jupyter.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,12 +312,12 @@
{
"data": {
"text/markdown": [
"<div id=\"_TKB8uH2dQyuysr7uMoHg1w\">\n",
" <div id=\"_OuGkA_SAR62XC1cBsUPAwA\">Cogito ergo sum</div>\n",
"<script id=\"_O7x83b64QoCKuLp6V6Qxkw\">if (window.htmx) htmx.process(document.body)</script></div>\n"
"<div id=\"_1UNmvWGRSsixXcUZHbf-wQ\">\n",
" <div id=\"_hgmiODUiRLG6OeHkU0njMg\">Cogito ergo sum</div>\n",
"<script id=\"_1o0Rit9bSrulsa_LLrWqqA\">if (window.htmx) htmx.process(document.body)</script></div>\n"
],
"text/plain": [
"div(('Cogito ergo sum',),{'id': '_OuGkA_SAR62XC1cBsUPAwA'})"
"div(('Cogito ergo sum',),{'id': '_hgmiODUiRLG6OeHkU0njMg'})"
]
},
"execution_count": null,
Expand Down Expand Up @@ -365,12 +365,12 @@
{
"data": {
"text/markdown": [
"<div id=\"_Ea_nzHJeQG_3hj68pbJ_mQ\">\n",
" <p hx-get=\"/hoho\" hx-trigger=\"load\" id=\"_2BPhAdYwTAiA1lLrU-7-5w\">not loaded</p>\n",
"<script id=\"_Y_kyC8_oTdCB4gFQ4Rc3Qw\">if (window.htmx) htmx.process(document.body)</script></div>\n"
"<div id=\"_No2M3ASUSASbPpVC4nRHFA\">\n",
" <p hx-get=\"/hoho\" hx-trigger=\"load\" id=\"_fF780GsHSSGiQzXuoZh-yA\">not loaded</p>\n",
"<script id=\"_nXRIOiWnQ8_2pf4Y1v50QA\">if (window.htmx) htmx.process(document.body)</script></div>\n"
],
"text/plain": [
"p(('not loaded',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'id': '_2BPhAdYwTAiA1lLrU-7-5w'})"
"p(('not loaded',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'id': '_fF780GsHSSGiQzXuoZh-yA'})"
]
},
"execution_count": null,
Expand Down Expand Up @@ -399,12 +399,12 @@
{
"data": {
"text/markdown": [
"<div id=\"_Oj-JCsNBS0yOX8yZ_PvRmg\">\n",
" <div id=\"_37uuVSvXQ-a72m-bWqL9Ow\"></div>\n",
"<script id=\"_VEF-wKPfSp2u_apvxJxmWA\">if (window.htmx) htmx.process(document.body)</script></div>\n"
"<div id=\"_hB8FU3ZqROmlMshNk4d3Jw\">\n",
" <div id=\"_tStl-CrVQwuLkb7MBVESfQ\"></div>\n",
"<script id=\"_hNzWylboTlCOU_y0J2_RpQ\">if (window.htmx) htmx.process(document.body)</script></div>\n"
],
"text/plain": [
"div(('',),{'id': '_37uuVSvXQ-a72m-bWqL9Ow'})"
"div(('',),{'id': '_tStl-CrVQwuLkb7MBVESfQ'})"
]
},
"execution_count": null,
Expand All @@ -425,12 +425,12 @@
{
"data": {
"text/markdown": [
"<div id=\"_CzYHFVtdTCur3ZnHkxmU3g\">\n",
" <p hx-get=\"/foo\" hx-trigger=\"load\" hx-target=\"#_37uuVSvXQ-a72m-bWqL9Ow\" id=\"_VnfiEFZiQcavFO3IdDfe7A\">hi</p>\n",
"<script id=\"_AAmzR0FFQV_6MEepI-T0Ig\">if (window.htmx) htmx.process(document.body)</script></div>\n"
"<div id=\"_W7Pugv5rRJuTrnjBGu1yRw\">\n",
" <p hx-get=\"/foo\" hx-trigger=\"load\" hx-target=\"#_tStl-CrVQwuLkb7MBVESfQ\" id=\"_fKAPzVU8SFa_uz46_3pLkw\">hi</p>\n",
"<script id=\"_O7KAh_RbS1ees54ashHhPw\">if (window.htmx) htmx.process(document.body)</script></div>\n"
],
"text/plain": [
"p(('hi',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'hx-target': '#_37uuVSvXQ-a72m-bWqL9Ow', 'id': '_VnfiEFZiQcavFO3IdDfe7A'})"
"p(('hi',),{'hx-get': <fasthtml.core._mk_locfunc.<locals>._lf object>, 'hx-trigger': 'load', 'hx-target': '#_tStl-CrVQwuLkb7MBVESfQ', 'id': '_fKAPzVU8SFa_uz46_3pLkw'})"
]
},
"execution_count": null,
Expand Down Expand Up @@ -478,15 +478,24 @@
"outputs": [],
"source": [
"#| export\n",
"def HTMX(path=\"\", host='localhost', port=8000, iframe_height=\"auto\"):\n",
"def HTMX(path=\"\", app=None, host='localhost', port=8000, height=\"auto\", link=False, iframe=True):\n",
" \"An iframe which displays the HTMX application in a notebook.\"\n",
" return HTML(f'<iframe src=\"http://{host}:{port}{str(path)}\" style=\"width: 100%; height: {iframe_height}; border: none;\" ' + \"\"\"onload=\"{\n",
" if isinstance(path, (FT,tuple)):\n",
" route = f'/{unqid()}'\n",
" res = path\n",
" app.get(route)(lambda: res)\n",
" path = route\n",
" if isinstance(height, int): height = f\"{height}px\"\n",
" scr = \"\"\"{\n",
" let frame = this;\n",
" window.addEventListener('message', function(e) {\n",
" if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
" if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
" }, false);\n",
" }\" 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> \"\"\")"
" }\"\"\" if height == \"auto\" else \"\"\n",
" if link: display(HTML(f'<a href=\"http://{host}:{port}{path}\" target=\"_blank\">Open in new tab</a>'))\n",
" if iframe:\n",
" 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> \"\"\")"
]
},
{
Expand Down Expand Up @@ -522,10 +531,30 @@
"execution_count": null,
"id": "0063bb43",
"metadata": {},
"outputs": [],
"outputs": [
{
"data": {
"text/html": [
"<iframe src=\"http://localhost:8000\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
" let frame = this;\n",
" window.addEventListener('message', function(e) {\n",
" if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
" if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
" }, false);\n",
" }\" 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> "
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"execution_count": null,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# Run the notebook locally to see the HTMX iframe in action\n",
"# HTMX()"
"HTMX()"
]
},
{
Expand Down

0 comments on commit 78196f2

Please sign in to comment.