Jupyter 兼容性

在 Jupyter notebook 中使用 FastHTML

from httpx import get, AsyncClient

辅助函数

---

源代码

nb_serve

 nb_serve (app, log_level='error', port=8000, host='0.0.0.0', **kwargs)

在指定的 port 和 log_level 上，使用 ASGI app 启动一个与 Jupyter 兼容的 uvicorn 服务器

---

源代码

nb_serve_async

 nb_serve_async (app, log_level='error', port=8000, host='0.0.0.0',
                 **kwargs)

nb_serve 的异步版本

---

源代码

is_port_free

 is_port_free (port, host='localhost')

检查 host 上的 port 是否空闲

---

源代码

wait_port_free

 wait_port_free (port, host='localhost', max_wait=3)

等待 host 上的 port 变为空闲

在 Jupyter 中使用 FastHTML

---

源代码

show

 show (*s, iframe=False, height='auto', style=None)

与 fasthtml.components.show 相同，但还会添加 htmx.process()

---

源代码

render_ft

 render_ft ()

---

源代码

htmx_config_port

 htmx_config_port (port=8000)

---

源代码

JupyUvi

 JupyUvi (app, log_level='error', host='0.0.0.0', port=8000, start=True,
          **kwargs)

在指定的 port 和 log_level 上，使用 ASGI app 启动和停止一个与 Jupyter 兼容的 uvicorn 服务器

创建此类的对象也会启动 Uvicorn 服务器。它在单独的线程中运行，因此您可以在 notebook 中使用常规的 HTTP 客户端函数。

app = FastHTML()
rt = app.route

@app.route
def index(): return 'hi'

port = 8000
server = JupyUvi(app, port=port)

get(f'https://:{port}').text

'hi'

您可以在不重启 notebook 或重新创建服务器或应用的情况下，停止服务器、修改路由，然后再次启动服务器。

server.stop()

app = FastHTML()
rt = app.route

@app.route
async def index(): return 'hi'

server = JupyUvi(app, port=port, start=False)
await server.start_async()

print((await AsyncClient().get(f'https://:{port}')).text)

hi

server.stop()

---

源代码

JupyUviAsync

 JupyUviAsync (app, log_level='error', host='0.0.0.0', port=8000,
               **kwargs)

在指定的 port 和 log_level 上，使用 ASGI app 启动和停止一个与 Jupyter 兼容的异步 uvicorn 服务器

server = JupyUviAsync(app, port=port)
await server.start()

async with AsyncClient() as client:
    r = await client.get(f'https://:{port}')
print(r.text)

hi

server.stop()

将 notebook 作为 Web 应用使用

您也可以直接在 notebook 中运行 HTMX Web 应用。为此，您必须使用 show(*def_hdrs()) 将默认的 FastHTML 标头添加到 notebook 的 DOM 中。此外，您可能会发现使用 auto_id 模式很方便，在这种模式下，如果未提供 FT 对象的 ID，则会自动生成。

fh_cfg['auto_id' ]=True

导入 fasthtml.jupyter 并调用 render_ft() 后，FT 组件会直接在 notebook 中渲染。

show(*def_hdrs())
render_ft()

处理函数的编写方式与常规 Web 应用完全相同

server = JupyUvi(app, port=port)

(c := Div(''))

@rt
def hoho(): return P('loaded!'), Div('hee hee', id=c, hx_swap_oob='true')

所有常规的 hx_* 属性都可以使用

P('not loaded', hx_get=hoho, hx_trigger='load')

未加载

FT 组件可以直接用作 id 值和 hx_target 值。

(c := Div(''))

@rt
def foo(): return Div('foo bar')
P('hi', hx_get=foo, hx_trigger='load', hx_target=c)

你好

server.stop()

在 IFrame 中运行应用

使用 IFrame 是实现应用样式和脚本完全隔离的好方法。HTMX 函数会为 Web 应用创建一个自动调整大小的 IFrame。

---

源代码

HTMX

 HTMX (path='/', host='localhost', app=None, port=8000, height='auto',
       link=False, iframe=True)

一个在 notebook 中显示 HTMX 应用的 iframe。

@rt
def index():
    return Div(
        P(A('Click me', hx_get=update, hx_target='#result')),
        P(A('No me!', hx_get=update, hx_target='#result')),
        Div(id='result'))

@rt
def update(): return Div(P('Hi!'),P('There!'))

server.start()

# Run the notebook locally to see the HTMX iframe in action
HTMX()

server.stop()

---

源代码

ws_client

 ws_client (app, nm='', host='localhost', port=8000, ws_connect='/ws',
            frame=True, link=True, **kwargs)