├── .prettierignore
├── src
    ├── python-fastui
    │   ├── fastui
    │   │   ├── py.typed
    │   │   ├── components
    │   │   │   ├── py.typed
    │   │   │   ├── tables.py
    │   │   │   ├── display.py
    │   │   │   └── forms.py
    │   │   ├── base.py
    │   │   ├── auth
    │   │   │   ├── __init__.py
    │   │   │   └── shared.py
    │   │   ├── class_name.py
    │   │   ├── __main__.py
    │   │   ├── events.py
    │   │   ├── dev.py
    │   │   ├── __init__.py
    │   │   ├── types.py
    │   │   └── generate_typescript.py
    │   ├── requirements
    │   │   ├── lint.in
    │   │   ├── all.txt
    │   │   ├── test.in
    │   │   ├── render.txt
    │   │   ├── lint.txt
    │   │   ├── pyproject.txt
    │   │   └── test.txt
    │   ├── README.md
    │   ├── tests
    │   │   ├── test_dev.py
    │   │   ├── test_prebuilt_html.py
    │   │   ├── test_auth_shared.py
    │   │   ├── test_json_schema.py
    │   │   ├── test_components.py
    │   │   └── test_tables_display.py
    │   ├── LICENSE
    │   └── pyproject.toml
    ├── npm-fastui-prebuilt
    │   ├── src
    │   │   ├── vite-env.d.ts
    │   │   ├── main.tsx
    │   │   ├── App.tsx
    │   │   └── main.scss
    │   ├── README.md
    │   ├── typedoc.json
    │   ├── tsconfig.node.json
    │   ├── tsconfig.json
    │   ├── index.html
    │   ├── package.json
    │   ├── LICENSE
    │   └── vite.config.ts
    ├── npm-fastui
    │   ├── README.md
    │   ├── src
    │   │   ├── components
    │   │   │   ├── Code.tsx
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── text.tsx
    │   │   │   ├── PageTitle.tsx
    │   │   │   ├── paragraph.tsx
    │   │   │   ├── Iframe.tsx
    │   │   │   ├── div.tsx
    │   │   │   ├── button.tsx
    │   │   │   ├── LinkList.tsx
    │   │   │   ├── spinner.tsx
    │   │   │   ├── video.tsx
    │   │   │   ├── FireEvent.tsx
    │   │   │   ├── Json.tsx
    │   │   │   ├── error.tsx
    │   │   │   ├── modal.tsx
    │   │   │   ├── toast.tsx
    │   │   │   ├── footer.tsx
    │   │   │   ├── image.tsx
    │   │   │   ├── CodeLazy.tsx
    │   │   │   ├── Custom.tsx
    │   │   │   ├── pagination.tsx
    │   │   │   ├── heading.tsx
    │   │   │   ├── navbar.tsx
    │   │   │   ├── link.tsx
    │   │   │   ├── details.tsx
    │   │   │   ├── table.tsx
    │   │   │   ├── MarkdownLazy.tsx
    │   │   │   ├── form.tsx
    │   │   │   ├── ServerLoad.tsx
    │   │   │   └── index.tsx
    │   │   ├── Defaults.tsx
    │   │   ├── hooks
    │   │   │   ├── config.ts
    │   │   │   ├── eventContext.tsx
    │   │   │   ├── error.tsx
    │   │   │   ├── className.ts
    │   │   │   └── locationContext.tsx
    │   │   ├── controller.tsx
    │   │   ├── index.tsx
    │   │   ├── dev.tsx
    │   │   └── events.ts
    │   ├── tsconfig.json
    │   ├── typedoc.json
    │   ├── package.json
    │   └── LICENSE
    └── npm-fastui-bootstrap
    │   ├── README.md
    │   ├── typedoc.json
    │   ├── tsconfig.json
    │   ├── src
    │       ├── footer.tsx
    │       ├── modal.tsx
    │       ├── toast.tsx
    │       ├── navbar.tsx
    │       ├── pagination.tsx
    │       └── index.tsx
    │   ├── package.json
    │   └── LICENSE
├── screenshot.png
├── docs
    ├── guide.md
    ├── assets
    │   ├── favicon.png
    │   └── logo-white.svg
    ├── extra
    │   └── tweaks.css
    ├── api
    │   ├── typescript_components.md
    │   └── python_components.md
    └── plugins.py
├── typedoc.base.json
├── typedoc.json
├── requirements
    ├── docs.in
    └── docs.txt
├── .gitignore
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── ci.yml
├── tsconfig.json
├── demo
    ├── README.md
    ├── auth_user.py
    ├── __init__.py
    ├── shared.py
    ├── main.py
    ├── tests.py
    ├── tables.py
    ├── auth.py
    └── forms.py
├── pyproject.toml
├── LICENSE
├── .eslintrc.cjs
├── .pre-commit-config.yaml
├── package.json
├── Makefile
├── bump_npm.py
└── mkdocs.yml


/.prettierignore:
--------------------------------------------------------------------------------
1 | htmlcov/
2 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/py.typed:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/components/py.typed:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/python-fastui/requirements/lint.in:
--------------------------------------------------------------------------------
1 | ruff
2 | pyright
3 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pydantic/FastUI/HEAD/screenshot.png


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/docs/guide.md:
--------------------------------------------------------------------------------
1 | !!! warning "🚧 Work in Progress"
2 |     This page is a work in progress.
3 | 


--------------------------------------------------------------------------------
/docs/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pydantic/FastUI/HEAD/docs/assets/favicon.png


--------------------------------------------------------------------------------
/src/npm-fastui/README.md:
--------------------------------------------------------------------------------
1 | # FastUI
2 | 
3 | React frontend for [FastUI](https://github.com/pydantic/FastUI).
4 | 


--------------------------------------------------------------------------------
/typedoc.base.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://typedoc.org/schema.json",
3 |   "includeVersion": true
4 | }
5 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/README.md:
--------------------------------------------------------------------------------
1 | # FastUI pre-build
2 | 
3 | Pre-built files for [FastUI](https://github.com/pydantic/FastUI).
4 | 


--------------------------------------------------------------------------------
/src/python-fastui/requirements/all.txt:
--------------------------------------------------------------------------------
1 | -r ./lint.txt
2 | -r ./test.txt
3 | -r ./pyproject.txt
4 | uvicorn[standard]
5 | httpx
6 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/README.md:
--------------------------------------------------------------------------------
1 | # FastUI Bootstrap
2 | 
3 | Bootstrap components for [FastUI](https://github.com/pydantic/FastUI).
4 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/Code.tsx:
--------------------------------------------------------------------------------
1 | import { lazy } from 'react'
2 | 
3 | export const CodeComp = lazy(() => import('./CodeLazy'))
4 | 


--------------------------------------------------------------------------------
/src/python-fastui/requirements/test.in:
--------------------------------------------------------------------------------
1 | coverage
2 | pytest
3 | pytest-pretty
4 | dirty-equals
5 | pytest-asyncio
6 | httpx
7 | PyJWT
8 | 


--------------------------------------------------------------------------------
/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["./typedoc.base.json"],
3 |   "entryPointStrategy": "packages",
4 |   "entryPoints": ["./src/*"]
5 | }
6 | 


--------------------------------------------------------------------------------
/requirements/docs.in:
--------------------------------------------------------------------------------
1 | mkdocs
2 | mkdocs-material
3 | mkdocs-simple-hooks
4 | mkdocstrings[python]
5 | mkdocs-redirects
6 | mkdocs-material-extensions
7 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/Markdown.tsx:
--------------------------------------------------------------------------------
1 | import { lazy } from 'react'
2 | 
3 | export const MarkdownComp = lazy(() => import('./MarkdownLazy'))
4 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["../../typedoc.base.json"],
3 |   "entryPointStrategy": "expand",
4 |   "entryPoints": ["src"]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["../../typedoc.base.json"],
3 |   "entryPointStrategy": "expand",
4 |   "entryPoints": ["src"]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/npm-fastui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../../tsconfig.json",
3 |   "compilerOptions": {
4 |     "outDir": "dist"
5 |   },
6 |   "include": ["src"]
7 | }
8 | 


--------------------------------------------------------------------------------
/src/python-fastui/requirements/render.txt:
--------------------------------------------------------------------------------
1 | # this is used by render to install dependencies
2 | -r ./pyproject.txt
3 | src/python-fastui
4 | uvicorn[standard]
5 | httpx
6 | PyJWT
7 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/text.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react'
2 | 
3 | import type { Text } from '../models'
4 | 
5 | export const TextComp: FC<Text> = ({ text }) => <>{text}</>
6 | 


--------------------------------------------------------------------------------
/docs/extra/tweaks.css:
--------------------------------------------------------------------------------
1 | /* Revert hue value to that of pre mkdocs-material v9.4.0 */
2 | [data-md-color-scheme='slate'] {
3 |   --md-hue: 230;
4 |   --md-default-bg-color: hsla(230, 15%, 21%, 1);
5 | }
6 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "dist",
 5 |     "paths": {
 6 |       "fastui": ["../npm-fastui/src"]
 7 |     }
 8 |   },
 9 |   "include": ["src"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/base.py:
--------------------------------------------------------------------------------
1 | from pydantic import AliasGenerator, ConfigDict
2 | from pydantic import BaseModel as _BaseModel
3 | from pydantic.alias_generators import to_camel
4 | 
5 | 
6 | class BaseModel(_BaseModel):
7 |     model_config = ConfigDict(alias_generator=AliasGenerator(serialization_alias=to_camel))
8 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | 
 4 | import App from './App'
 5 | import './main.scss'
 6 | 
 7 | ReactDOM.createRoot(document.getElementById('root')!).render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 | )
12 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/PageTitle.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, useEffect } from 'react'
 2 | 
 3 | import type { PageTitle } from '../models'
 4 | 
 5 | export const PageTitleComp: FC<PageTitle> = (props) => {
 6 |   const { text } = props
 7 | 
 8 |   useEffect(() => {
 9 |     document.title = text
10 |   }, [text])
11 | 
12 |   return <></>
13 | }
14 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "paths": {
 5 |       "fastui": ["../npm-fastui/src"],
 6 |       "fastui-bootstrap": ["../npm-fastui-bootstrap/src"]
 7 |     }
 8 |   },
 9 |   "include": ["src"],
10 |   "references": [{ "path": "./tsconfig.node.json" }]
11 | }
12 | 


--------------------------------------------------------------------------------
/docs/api/typescript_components.md:
--------------------------------------------------------------------------------
 1 | # TypeScript Components
 2 | 
 3 | !!! warning "🚧 Work in Progress"
 4 |     This page is a work in progress.
 5 | 
 6 | <!-- Note -- we will enable this in the future when mkdocstrings-typescript and griffe-typedoc
 7 | Have publicly available options -->
 8 | <!-- ::: @pydantic/fastui
 9 |     handler: typescript -->
10 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/Defaults.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from 'react'
2 | 
3 | export const DefaultNotFound: FC<{ url: string }> = ({ url }) => <div>Page not found: {url}</div>
4 | 
5 | // default here does nothing
6 | export const DefaultTransition: FC<{ children: ReactNode; transitioning: boolean }> = ({ children }) => (
7 |   <div>{children}</div>
8 | )
9 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/paragraph.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Paragraph } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | 
 7 | export const ParagraphComp: FC<Paragraph> = (props) => {
 8 |   const { text } = props
 9 | 
10 |   return <p className={useClassName(props)}>{text}</p>
11 | }
12 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/Iframe.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react'
2 | 
3 | import type { Iframe } from '../models'
4 | 
5 | export const IframeComp: FC<Iframe> = (props) => {
6 |   const { src, width, height, title, sandbox, srcdoc } = props
7 |   return <iframe src={src} width={width} height={height} title={title} sandbox={sandbox} srcDoc={srcdoc} />
8 | }
9 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title></title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="root"></div>
10 |     <script type="module" src="/src/main.tsx"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/div.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import { Div, Page } from '../models'
 4 | import { useClassName } from '../hooks/className'
 5 | 
 6 | import { AnyCompList } from './index'
 7 | 
 8 | export const DivComp: FC<Div | Page> = (props) => (
 9 |   <div className={useClassName(props)}>
10 |     <AnyCompList propsList={props.components} />
11 |   </div>
12 | )
13 | 


--------------------------------------------------------------------------------
/src/npm-fastui/typedoc.json:
--------------------------------------------------------------------------------
1 | // TODO: we really want the entryPoint to be src, but mkdocstrings-typescript doesn't fully support this option yet,
2 | // as we can't specify the path within the package from which we want to pull docs, so right now
3 | // we resort to more specific entryPoints
4 | {
5 |   "extends": ["../../typedoc.base.json"],
6 |   "entryPointStrategy": "expand",
7 |   "entryPoints": ["src/models.d.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/auth/__init__.py:
--------------------------------------------------------------------------------
 1 | from .github import GitHubAuthProvider, GitHubEmail, GitHubExchange, GithubUser
 2 | from .shared import AuthError, AuthRedirect, fastapi_auth_exception_handling
 3 | 
 4 | __all__ = (
 5 |     'GitHubAuthProvider',
 6 |     'GitHubExchange',
 7 |     'GithubUser',
 8 |     'GitHubEmail',
 9 |     'AuthError',
10 |     'AuthRedirect',
11 |     'fastapi_auth_exception_handling',
12 | )
13 | 


--------------------------------------------------------------------------------
/src/python-fastui/README.md:
--------------------------------------------------------------------------------
1 | # FastUI
2 | 
3 | [![CI](https://github.com/pydantic/FastUI/actions/workflows/ci.yml/badge.svg)](https://github.com/pydantic/FastUI/actions?query=event%3Apush+branch%3Amain+workflow%3ACI)
4 | [![versions](https://img.shields.io/pypi/pyversions/fastui.svg)](https://github.com/pydantic/FastUI)
5 | [![license](https://img.shields.io/github/license/pydantic/FastUI.svg)](https://github.com/pydantic/FastUI/blob/main/LICENSE)
6 | 
7 | Python components for [FastUI](https://github.com/pydantic/FastUI).
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | /**/*.egg-info
10 | 
11 | node_modules
12 | dist
13 | dist-ssr
14 | *.local
15 | 
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | .idea
20 | .DS_Store
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 | 
27 | # python
28 | /env*/
29 | __pycache__/
30 | 
31 | /.logfire/
32 | /frontend-dist/
33 | /scratch/
34 | /packages-dist/
35 | /.coverage
36 | /users.db
37 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/button.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Button } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | import { useFireEvent } from '../events'
 7 | 
 8 | export const ButtonComp: FC<Button> = (props) => {
 9 |   const { text, onClick, htmlType } = props
10 | 
11 |   const { fireEvent } = useFireEvent()
12 | 
13 |   return (
14 |     <button className={useClassName(props)} type={htmlType} onClick={() => fireEvent(onClick)}>
15 |       {text}
16 |     </button>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/hooks/config.ts:
--------------------------------------------------------------------------------
 1 | import { createContext, FC, useContext } from 'react'
 2 | 
 3 | import type { FastUIProps } from '../index'
 4 | import type { FastProps } from '../models'
 5 | 
 6 | type Config = Omit<FastUIProps, 'DisplayError' | 'classNameGenerator' | 'devMode'>
 7 | 
 8 | export const ConfigContext = createContext<Config>({ APIRootUrl: '' })
 9 | 
10 | export const useCustomRender = (props: FastProps): FC | void => {
11 |   const { customRender } = useContext(ConfigContext)
12 | 
13 |   if (customRender) {
14 |     return customRender(props)
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/python-fastui/requirements/lint.txt:
--------------------------------------------------------------------------------
 1 | #
 2 | # This file is autogenerated by pip-compile with Python 3.11
 3 | # by the following command:
 4 | #
 5 | #    pip-compile --output-file=src/python-fastui/requirements/lint.txt --strip-extras src/python-fastui/requirements/lint.in
 6 | #
 7 | nodeenv==1.8.0
 8 |     # via pyright
 9 | pyright==1.1.335
10 |     # via -r src/python-fastui/requirements/lint.in
11 | ruff==0.1.5
12 |     # via -r src/python-fastui/requirements/lint.in
13 | 
14 | # The following packages are considered to be unsafe in a requirements file:
15 | # setuptools
16 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/class_name.py:
--------------------------------------------------------------------------------
 1 | # could be renamed to something general if there's more to add
 2 | from typing import Annotated, Literal
 3 | 
 4 | from pydantic import Field
 5 | from typing_extensions import TypeAliasType
 6 | 
 7 | ClassName = TypeAliasType('ClassName', str | list['ClassName'] | dict[str, bool | None] | None)
 8 | ClassNameField = Annotated[ClassName, Field(serialization_alias='className')]
 9 | 
10 | NamedStyle = TypeAliasType('NamedStyle', Literal['primary', 'secondary', 'warning'] | None)
11 | NamedStyleField = Annotated[NamedStyle, Field(serialization_alias='namedStyle')]
12 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/LinkList.tsx:
--------------------------------------------------------------------------------
 1 | import type { LinkList } from '../models'
 2 | 
 3 | import { useClassName } from '../hooks/className'
 4 | 
 5 | import { LinkComp } from './link'
 6 | 
 7 | export const LinkListComp = (props: LinkList) => {
 8 |   const itemClassName = useClassName(props, { el: 'link-list-item' })
 9 |   return (
10 |     <div className={useClassName(props)}>
11 |       {props.links.map((link, i) => (
12 |         <div key={i} className={itemClassName}>
13 |           <LinkComp {...{ ...link, mode: props.mode }} />
14 |         </div>
15 |       ))}
16 |     </div>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/spinner.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Spinner } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | 
 7 | export const SpinnerComp: FC<Spinner> = (props) => {
 8 |   const { text } = props
 9 | 
10 |   return (
11 |     <div className={useClassName(props)}>
12 |       <div className={useClassName(props, { el: 'text' })}>{text}</div>
13 |       <div className={useClassName(props, { el: 'animation' })}>
14 |         <div className="fastui-spinner-animation">loading...</div>
15 |       </div>
16 |     </div>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/video.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Video } from '../models'
 4 | 
 5 | export const VideoComp: FC<Video> = (props) => {
 6 |   const { sources, autoplay, controls, loop, muted, poster, width, height } = props
 7 |   return (
 8 |     <video
 9 |       autoPlay={autoplay}
10 |       controls={controls}
11 |       loop={loop}
12 |       muted={muted}
13 |       poster={poster}
14 |       width={width}
15 |       height={height}
16 |     >
17 |       {sources.map((src, i) => (
18 |         <source key={i} src={src} />
19 |       ))}
20 |     </video>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/FireEvent.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, useEffect } from 'react'
 2 | 
 3 | import type { FireEvent } from '../models'
 4 | 
 5 | import { useFireEvent } from '../events'
 6 | 
 7 | export const FireEventComp: FC<FireEvent> = ({ event, message }) => {
 8 |   const { fireEvent } = useFireEvent()
 9 | 
10 |   useEffect(() => {
11 |     // debounce the event so changes to fireEvent (from location changes) don't trigger the event many times
12 |     const clear = setTimeout(() => fireEvent(event), 50)
13 |     return () => clearTimeout(clear)
14 |   }, [fireEvent, event])
15 | 
16 |   return <>{message}</>
17 | }
18 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # Keep GitHub Actions up to date with GitHub's Dependabot...
 2 | # https://docs.github.com/en/code-security/dependabot/working-with-dependabot/keeping-your-actions-up-to-date-with-dependabot
 3 | # https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#package-ecosystem
 4 | version: 2
 5 | updates:
 6 |   - package-ecosystem: github-actions
 7 |     directory: /
 8 |     groups:
 9 |       github-actions:
10 |         patterns:
11 |           - "*"  # Group all Actions updates into a single larger pull request
12 |     schedule:
13 |       interval: monthly
14 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/Json.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Json } from '../models'
 4 | 
 5 | import { CodeComp } from './Code'
 6 | 
 7 | export const JsonComp: FC<Json> = (props) => {
 8 |   let { value, className } = props
 9 |   // if the value is a string, we assume it's already JSON, and parse it
10 |   if (typeof value === 'string') {
11 |     try {
12 |       value = JSON.parse(value)
13 |     } catch (e) {
14 |       // if it's not valid JSON, we just display it as a string
15 |     }
16 |   }
17 |   return <CodeComp type="Code" text={JSON.stringify(value, null, 2)} language="json" className={className} />
18 | }
19 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/error.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Error } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | 
 7 | export const ErrorComp: FC<Error> = (props) => {
 8 |   const { title, description, statusCode, children } = props
 9 |   return (
10 |     <>
11 |       <div className={useClassName(props)} role="alert">
12 |         {statusCode === 502 ? (
13 |           <>Backend server down.</>
14 |         ) : (
15 |           <>
16 |             <h4>{title}</h4>
17 |             {description}
18 |           </>
19 |         )}
20 |       </div>
21 |       {children}
22 |     </>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/modal.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, useEffect } from 'react'
 2 | 
 3 | import type { Modal } from '../models'
 4 | 
 5 | import { usePageEventListen } from '../events'
 6 | 
 7 | export const ModalComp: FC<Modal> = (props) => {
 8 |   const { title, openTrigger, openContext } = props
 9 | 
10 |   const { fireId, clear } = usePageEventListen(openTrigger, openContext)
11 | 
12 |   useEffect(() => {
13 |     if (fireId) {
14 |       setTimeout(() => {
15 |         alert(`${title}\n\nNote: modals are not implemented by pure FastUI, implement a component for 'ModalProps'.`)
16 |         clear()
17 |       })
18 |     }
19 |   }, [fireId, title, clear])
20 | 
21 |   return <></>
22 | }
23 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/toast.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, useEffect } from 'react'
 2 | 
 3 | import type { Toast } from '../models'
 4 | 
 5 | import { usePageEventListen } from '../events'
 6 | 
 7 | export const ToastComp: FC<Toast> = (props) => {
 8 |   const { title, openTrigger, openContext } = props
 9 | 
10 |   const { fireId, clear } = usePageEventListen(openTrigger, openContext)
11 | 
12 |   useEffect(() => {
13 |     if (fireId) {
14 |       setTimeout(() => {
15 |         alert(`${title}\n\nNote: modals are not implemented by pure FastUI, implement a component for 'ToastProps'.`)
16 |         clear()
17 |       })
18 |     }
19 |   }, [fireId, title, clear])
20 | 
21 |   return <></>
22 | }
23 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | import type { Footer } from '../models'
 2 | 
 3 | import { useClassName } from '../hooks/className'
 4 | 
 5 | import { LinkComp } from './link'
 6 | 
 7 | export const FooterComp = (props: Footer) => {
 8 |   const links = props.links.map((link) => {
 9 |     link.mode = link.mode || 'footer'
10 |     return link
11 |   })
12 |   const extraTextClassName = useClassName(props, { el: 'extra' })
13 |   return (
14 |     <footer className={useClassName(props)}>
15 |       {links.map((link, i) => (
16 |         <LinkComp key={i} {...link} />
17 |       ))}
18 |       {props.extraText && <div className={extraTextClassName}>{props.extraText}</div>}
19 |     </footer>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": false,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "react-jsx",
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "noUncheckedIndexedAccess": true,
22 | 
23 |     /* Output */
24 |     "declaration": true
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/image.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Image } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | import { useFireEvent } from '../events'
 7 | 
 8 | export const ImageComp: FC<Image> = (props) => {
 9 |   const { src, alt, width, height, referrerPolicy, loading, onClick } = props
10 | 
11 |   const { fireEvent } = useFireEvent()
12 | 
13 |   return (
14 |     <img
15 |       className={useClassName(props)}
16 |       src={src}
17 |       alt={alt}
18 |       width={width}
19 |       height={height}
20 |       referrerPolicy={referrerPolicy}
21 |       loading={loading}
22 |       onClick={() => fireEvent(onClick)}
23 |     />
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/CodeLazy.tsx:
--------------------------------------------------------------------------------
 1 | import * as codeStyles from 'react-syntax-highlighter/dist/esm/styles/prism'
 2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 3 | 
 4 | import type { Code } from '../models'
 5 | 
 6 | import { useClassName } from '../hooks/className'
 7 | 
 8 | export default function (props: Code) {
 9 |   const { text, language, codeStyle } = props
10 |   const codeLookup = codeStyle as keyof typeof codeStyles
11 |   const style = (codeStyle && codeStyles[codeLookup]) || codeStyles.coldarkCold
12 |   return (
13 |     <SyntaxHighlighter className={useClassName(props)} PreTag="div" language={language} style={style}>
14 |       {text}
15 |     </SyntaxHighlighter>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@pydantic/fastui-prebuilt",
 3 |   "version": "0.0.26",
 4 |   "description": "Pre-built files for FastUI",
 5 |   "main": "dist/index.html",
 6 |   "type": "module",
 7 |   "author": "Samuel Colvin",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/pydantic/fastui",
10 |   "private": false,
11 |   "keywords": [
12 |     "fastui",
13 |     "jsx",
14 |     "typescript",
15 |     "react",
16 |     "fastapi"
17 |   ],
18 |   "scripts": {
19 |     "dev": "vite",
20 |     "prepublishOnly": "rm -rf dist && tsc --noEmit && vite build",
21 |     "typecheck": "tsc --noEmit",
22 |     "typewatch": "tsc --noEmit --watch"
23 |   },
24 |   "devDependencies": {
25 |     "@vitejs/plugin-react-swc": "^3.3.2",
26 |     "vite": "^5.0.12"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/Custom.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Custom } from '../models'
 4 | 
 5 | import { DisplayError } from '../hooks/error'
 6 | 
 7 | import { JsonComp } from './Json'
 8 | 
 9 | export const CustomComp: FC<Custom> = (props) => {
10 |   const { data, subType, library } = props
11 | 
12 |   const description = [`The custom component "${subType}"`]
13 |   if (library) {
14 |     description.push(`from library "${library}"`)
15 |   }
16 |   description.push(`has no implementation with this frontend app.`)
17 | 
18 |   return (
19 |     <DisplayError title="Custom component without implementation" description={description.join(' ')}>
20 |       Custom component data:
21 |       <JsonComp type="JSON" value={data} />
22 |     </DisplayError>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | # FastUI Demo
 2 | 
 3 | This a simple demo app for FastUI, it's deployed at [fastui-demo.onrender.com](https://fastui-demo.onrender.com).
 4 | 
 5 | ## Running
 6 | 
 7 | To run the demo app, execute the following commands from the FastUI repo root
 8 | 
 9 | ```bash
10 | # create a virtual env
11 | python3.11 -m venv env311
12 | # activate the env
13 | . env311/bin/activate
14 | # install deps
15 | make install
16 | # run the demo server
17 | make dev
18 | ```
19 | 
20 | Then navigate to [http://localhost:8000](http://localhost:8000)
21 | 
22 | If you want to run the dev version of the React frontend, run
23 | 
24 | ```bash
25 | npm install
26 | npm run dev
27 | ```
28 | 
29 | This will run at [http://localhost:3000](http://localhost:3000), and connect to the backend running at `localhost:3000`.
30 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/src/footer.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | import { components, models, useClassName } from 'fastui'
 3 | 
 4 | export const Footer: FC<models.Footer> = (props) => {
 5 |   const links = props.links.map((link) => {
 6 |     link.mode = link.mode || 'footer'
 7 |     return link
 8 |   })
 9 |   const extraProp = useClassName(props, { el: 'extra' })
10 |   return (
11 |     <footer className={useClassName(props)}>
12 |       <ul className={useClassName(props, { el: 'link-list' })}>
13 |         {links.map((link, i) => (
14 |           <li key={i} className="nav-item">
15 |             <components.LinkComp {...link} />
16 |           </li>
17 |         ))}
18 |       </ul>
19 |       {props.extraText && <div className={extraProp}>{props.extraText}</div>}
20 |     </footer>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/src/python-fastui/tests/test_dev.py:
--------------------------------------------------------------------------------
 1 | from unittest.mock import patch
 2 | 
 3 | from fastui.dev import dev_fastapi_app
 4 | from httpx import ASGITransport, AsyncClient
 5 | 
 6 | 
 7 | def mock_signal(_sig, on_signal):
 8 |     on_signal()
 9 | 
10 | 
11 | async def test_dev_connect():
12 |     with patch('fastui.dev.signal.signal', new=mock_signal):
13 |         app = dev_fastapi_app()
14 |         async with app.router.lifespan_context(app):
15 |             transport = ASGITransport(app=app)
16 |             async with AsyncClient(transport=transport, base_url='http://test') as client:
17 |                 r = await client.get('/api/__dev__/reload')
18 |                 assert r.status_code == 200
19 |                 assert r.headers['content-type'] == 'text/plain; charset=utf-8'
20 |                 assert r.text.startswith('fastui-dev-reload\n')
21 | 


--------------------------------------------------------------------------------
/docs/assets/logo-white.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
2 |   <path
3 |      fill="#fff"
4 |      d="M 119.18,86.64 98.02,57.3 c 0,0 0,0 0,0 L 63.77,9.8 c -1.74,-2.4 -5.76,-2.4 -7.49,0 l -34.24,47.49 c 0,0 0,0 0,0 L 0.87,86.64 c -0.86,1.2 -1.1,2.73 -0.65,4.13 0.46,1.4 1.55,2.5 2.95,2.96 l 55.41,18.14 c 0,0 0,0 0.01,9e-4 0.46,0.15 0.94,0.23 1.43,0.23 0.49,0 0.97,-0.08 1.43,-0.23 0,0 0,0 0.01,0 L 116.87,93.73 c 1.4,-0.46 2.5,-1.55 2.95,-2.96 0.46,-1.4 0.22,-2.93 -0.65,-4.13 z m -59.15,-66.25 22.21,30.8 -20.77,-6.8 c -0.16,-0.05 -0.33,-0.04 -0.49,-0.08 -0.16,-0.04 -0.32,-0.06 -0.48,-0.08 -0.16,-0.02 -0.31,-0.08 -0.47,-0.08 -0.16,0 -0.31,0.06 -0.47,0.08 -0.17,0.02 -0.32,0.04 -0.48,0.08 -0.16,0.03 -0.33,0.03 -0.48,0.08 h 0 l -20.64,6.76 -0.13,0.04 22.21,-30.8 z m -31.38,43.52 24.18,-7.92 2.58,-0.84 V 101.12 L 12.06,86.92 Z m 36,37.2 V 55.15 l 26.76,8.76 16.59,23 z"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@pydantic/fastui-bootstrap",
 3 |   "version": "0.0.26",
 4 |   "description": "Bootstrap renderer for FastUI",
 5 |   "main": "dist/index.js",
 6 |   "types": "dist/index.d.ts",
 7 |   "author": "Samuel Colvin",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/pydantic/fastui",
10 |   "private": false,
11 |   "keywords": [
12 |     "fastui",
13 |     "bootstrap",
14 |     "jsx",
15 |     "typescript",
16 |     "react",
17 |     "fastapi"
18 |   ],
19 |   "scripts": {
20 |     "prepublishOnly": "rm -rf dist && tsc",
21 |     "typecheck": "tsc --noEmit",
22 |     "typewatch": "tsc --noEmit --watch"
23 |   },
24 |   "dependencies": {
25 |     "bootstrap": "^5.3.2",
26 |     "react": "^18.2.0",
27 |     "react-bootstrap": "^2.9.1",
28 |     "react-dom": "^18.2.0",
29 |     "sass": "^1.69.5"
30 |   },
31 |   "peerDependencies": {
32 |     "@pydantic/fastui": "0.0.26"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/controller.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext, useEffect, useState } from 'react'
 2 | 
 3 | import { LocationContext } from './hooks/locationContext'
 4 | import { ServerLoadFetch } from './components/ServerLoad'
 5 | import { loadEvent, LoadEventDetail } from './events'
 6 | 
 7 | export function FastUIController() {
 8 |   const { fullPath } = useContext(LocationContext)
 9 |   const [path, setPath] = useState(fullPath)
10 |   const [reloadValue, setReloadValue] = useState(0)
11 | 
12 |   useEffect(() => {
13 |     function onEvent(e: Event) {
14 |       const { path, reloadValue } = (e as CustomEvent<LoadEventDetail>).detail
15 | 
16 |       setPath(path ?? fullPath)
17 |       setReloadValue(reloadValue ?? 0)
18 |     }
19 | 
20 |     document.addEventListener(loadEvent, onEvent)
21 | 
22 |     return () => {
23 |       document.removeEventListener(loadEvent, onEvent)
24 |     }
25 |   }, [fullPath])
26 | 
27 |   return <ServerLoadFetch path={path} devReload={reloadValue} />
28 | }
29 | 


--------------------------------------------------------------------------------
/src/npm-fastui/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@pydantic/fastui",
 3 |   "version": "0.0.26",
 4 |   "description": "Build better UIs faster.",
 5 |   "main": "dist/index.js",
 6 |   "types": "dist/index.d.ts",
 7 |   "author": "Samuel Colvin",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/pydantic/fastui",
10 |   "private": false,
11 |   "keywords": [
12 |     "fastui",
13 |     "jsx",
14 |     "typescript",
15 |     "react",
16 |     "fastapi"
17 |   ],
18 |   "scripts": {
19 |     "prepublishOnly": "rm -rf dist && tsc",
20 |     "typecheck": "tsc --noEmit",
21 |     "typewatch": "tsc --noEmit --watch"
22 |   },
23 |   "dependencies": {
24 |     "@microsoft/fetch-event-source": "^2.0.1",
25 |     "react": "^18.2.0",
26 |     "react-dom": "^18.2.0",
27 |     "react-markdown": "^9.0.1",
28 |     "react-select": "^5.8.0",
29 |     "react-syntax-highlighter": "^15.5.0",
30 |     "remark-gfm": "^4.0.0"
31 |   },
32 |   "devDependencies": {
33 |     "@types/react-syntax-highlighter": "^15.5.10"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/python-fastui/tests/test_prebuilt_html.py:
--------------------------------------------------------------------------------
 1 | from fastui import prebuilt_html
 2 | 
 3 | 
 4 | def test_prebuilt_html():
 5 |     html = prebuilt_html()
 6 |     assert html.startswith('<!doctype html>')
 7 |     assert 'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt' in html
 8 |     assert '<title></title>' in html
 9 |     assert '<meta name="fastui:APIRootUrl"' not in html
10 |     assert '<meta name="fastui:APIPathMode"' not in html
11 |     assert '<meta name="fastui:APIPathStrip"' not in html
12 | 
13 | 
14 | def test_prebuilt_html_meta_tags():
15 |     html = prebuilt_html(
16 |         title='Test Title',
17 |         api_root_url='/admin/api',
18 |         api_path_mode='query',
19 |         api_path_strip='/admin',
20 |     )
21 |     assert '<title>Test Title</title>' in html
22 |     assert '<meta name="fastui:APIRootUrl" content="/admin/api" />' in html
23 |     assert '<meta name="fastui:APIPathMode" content="query" />' in html
24 |     assert '<meta name="fastui:APIPathStrip" content="/admin" />' in html
25 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/pagination.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Pagination, Link } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | 
 7 | import { LinkListComp } from './LinkList'
 8 | 
 9 | export const PaginationComp: FC<Pagination> = (props) => {
10 |   const { page, pageCount } = props
11 |   const className = useClassName(props)
12 | 
13 |   if (pageCount === 1) return null
14 | 
15 |   const links: Link[] = [
16 |     {
17 |       type: 'Link',
18 |       components: [{ type: 'Text', text: 'Previous' }],
19 |       locked: page !== 1,
20 |       onClick: { type: 'go-to', query: { page: page - 1 } },
21 |     },
22 |     {
23 |       type: 'Link',
24 |       components: [{ type: 'Text', text: 'Next' }],
25 |       locked: page !== pageCount,
26 |       onClick: { type: 'go-to', query: { page: page + 1 } },
27 |     },
28 |   ]
29 | 
30 |   return (
31 |     <div className={className}>
32 |       <LinkListComp type="LinkList" links={links} mode="pagination" />
33 |     </div>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/pyproject.toml:
--------------------------------------------------------------------------------
 1 | # this is not the used for the python package "fastui",
 2 | # for that see packages/python-fastui/pyproject.toml
 3 | 
 4 | [tool.ruff]
 5 | line-length = 120
 6 | extend-select = ["Q", "RUF100", "UP", "I"]
 7 | flake8-quotes = {inline-quotes = "single", multiline-quotes = "double"}
 8 | format.quote-style="single"
 9 | target-version = "py310"
10 | 
11 | [tool.pyright]
12 | include = ["src/python-fastui/fastui"]
13 | 
14 | [tool.pytest.ini_options]
15 | testpaths = [
16 |     "src/python-fastui/tests",
17 |     "demo/tests.py",
18 | ]
19 | xfail_strict = true
20 | filterwarnings = ["error"]
21 | asyncio_mode = "auto"
22 | 
23 | [tool.coverage.run]
24 | source = ["src/python-fastui/fastui"]
25 | omit = [
26 |     "src/python-fastui/fastui/__main__.py",
27 |     "src/python-fastui/fastui/generate_typescript.py",
28 | ]
29 | 
30 | [tool.coverage.report]
31 | precision = 2
32 | exclude_lines = [
33 |     'pragma: no cover',
34 |     'raise NotImplementedError',
35 |     'if TYPE_CHECKING:',
36 |     'if typing.TYPE_CHECKING:',
37 |     '@overload',
38 |     '@typing.overload',
39 |     '\(Protocol\):$',
40 | ]
41 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/heading.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Heading } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | import { slugify } from '../tools'
 7 | 
 8 | export const HeadingComp: FC<Heading> = (props) => {
 9 |   const { level, text, htmlId } = props
10 |   const HeadingComponent = getComponent(level)
11 |   return <HeadingComponent text={text} id={htmlId || slugify(text)} className={useClassName(props)} />
12 | }
13 | 
14 | function getComponent(level: 1 | 2 | 3 | 4 | 5 | 6): FC<{ text: string; id?: string; className?: string }> {
15 |   switch (level) {
16 |     case 1:
17 |       return ({ text, ...rest }) => <h1 {...rest}>{text}</h1>
18 |     case 2:
19 |       return ({ text, ...rest }) => <h2 {...rest}>{text}</h2>
20 |     case 3:
21 |       return ({ text, ...rest }) => <h3 {...rest}>{text}</h3>
22 |     case 4:
23 |       return ({ text, ...rest }) => <h4 {...rest}>{text}</h4>
24 |     case 5:
25 |       return ({ text, ...rest }) => <h5 {...rest}>{text}</h5>
26 |     case 6:
27 |       return ({ text, ...rest }) => <h6 {...rest}>{text}</h6>
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/docs/api/python_components.md:
--------------------------------------------------------------------------------
 1 | # Python Components
 2 | 
 3 | ::: fastui.components
 4 |     handler: python
 5 |     options:
 6 |         inherited_members: true
 7 |         docstring_options:
 8 |             ignore_init_summary: false
 9 |     members:
10 |         - Text
11 |         - Paragraph
12 |         - PageTitle
13 |         - Div
14 |         - Page
15 |         - Heading
16 |         - Markdown
17 |         - Code
18 |         - Json
19 |         - Button
20 |         - Link
21 |         - LinkList
22 |         - Navbar
23 |         - Modal
24 |         - ServerLoad
25 |         - Image
26 |         - Iframe
27 |         - FireEvent
28 |         - Error
29 |         - Spinner
30 |         - Toast
31 |         - Custom
32 |         - Table
33 |         - Pagination
34 |         - Display
35 |         - Details
36 |         - Form
37 |         - FormField
38 |         - ModelForm
39 |         - Footer
40 |         - AnyComponent
41 |         - FormFieldBoolean
42 |         - FormFieldFile
43 |         - FormFieldInput
44 |         - FormFieldSelect
45 |         - FormFieldSelectSearch
46 | 
47 | <!-- TODO: don't render attributes in TOC -->
48 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/__main__.py:
--------------------------------------------------------------------------------
 1 | import argparse
 2 | from pathlib import Path
 3 | 
 4 | from . import __version__, generate_typescript
 5 | 
 6 | 
 7 | def cli():
 8 |     parser = argparse.ArgumentParser(prog='FastUI', description='FastUI CLI.')
 9 |     parser.add_argument(
10 |         '--version',
11 |         action='version',
12 |         version=f'fastui {__version__}',
13 |     )
14 | 
15 |     subparsers = parser.add_subparsers(dest='command', required=True)
16 | 
17 |     generate_typescript_parser = subparsers.add_parser(
18 |         'generate', help='Generate typescript types from Python definitions of FastUI components.'
19 |     )
20 |     generate_typescript_parser.add_argument(
21 |         'python_object', metavar='python-object', type=str, help='Python object to generate types for.'
22 |     )
23 |     generate_typescript_parser.add_argument(
24 |         'typescript_output_file', metavar='typescript-output-file', type=Path, help='Path to output typescript file.'
25 |     )
26 | 
27 |     args = parser.parse_args()
28 |     generate_typescript.main(args.python_object, args.typescript_output_file)
29 | 
30 | 
31 | if __name__ == '__main__':
32 |     cli()
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 to present Pydantic Services inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/hooks/eventContext.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, FC, ReactNode, useCallback, useContext } from 'react'
 2 | 
 3 | export type ContextType = Record<string, string | number>
 4 | 
 5 | const EventContext = createContext<ContextType | null>(null)
 6 | 
 7 | export const useEventContext = (): ((template: string) => string) => {
 8 |   const context = useContext(EventContext)
 9 | 
10 |   return useCallback((template: string): string => applyContext(template, context), [context])
11 | }
12 | 
13 | export const EventContextProvider: FC<{ children: ReactNode; context: ContextType | null }> = ({
14 |   children,
15 |   context,
16 | }) => {
17 |   return <EventContext.Provider value={context}>{children}</EventContext.Provider>
18 | }
19 | 
20 | const applyContext = (template: string, context: ContextType | null): string => {
21 |   if (!context) {
22 |     return template
23 |   }
24 | 
25 |   return template.replace(/{(.+?)}/g, (_, key: string): string => {
26 |     const v = context[key]
27 |     if (v === undefined) {
28 |       throw new Error(`field "${key}" not found in ${JSON.stringify(context)}`)
29 |     } else {
30 |       return v.toString()
31 |     }
32 |   })
33 | }
34 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/src/modal.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | import { models, components, events, renderClassName, EventContextProvider } from 'fastui'
 3 | import BootstrapModal from 'react-bootstrap/Modal'
 4 | 
 5 | export const Modal: FC<models.Modal> = (props) => {
 6 |   const { className, title, body, footer, openTrigger, openContext } = props
 7 | 
 8 |   const { eventContext, fireId, clear } = events.usePageEventListen(openTrigger, openContext)
 9 | 
10 |   return (
11 |     <EventContextProvider context={eventContext}>
12 |       <BootstrapModal className={renderClassName(className)} show={!!fireId} onHide={clear}>
13 |         <BootstrapModal.Header closeButton>
14 |           <BootstrapModal.Title>{title}</BootstrapModal.Title>
15 |         </BootstrapModal.Header>
16 |         <BootstrapModal.Body>
17 |           <components.AnyCompList propsList={body} />
18 |         </BootstrapModal.Body>
19 |         {footer && (
20 |           <BootstrapModal.Footer className="modal-footer">
21 |             <components.AnyCompList propsList={footer} />
22 |           </BootstrapModal.Footer>
23 |         )}
24 |       </BootstrapModal>
25 |     </EventContextProvider>
26 |   )
27 | }
28 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/src/toast.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | import { components, events, renderClassName, EventContextProvider, models } from 'fastui'
 3 | import BootstrapToast from 'react-bootstrap/Toast'
 4 | import BootstrapToastContainer from 'react-bootstrap/ToastContainer'
 5 | 
 6 | export const Toast: FC<models.Toast> = (props) => {
 7 |   const { className, title, body, position, openTrigger, openContext } = props
 8 | 
 9 |   const { eventContext, fireId, clear } = events.usePageEventListen(openTrigger, openContext)
10 | 
11 |   return (
12 |     <EventContextProvider context={eventContext}>
13 |       <BootstrapToastContainer position={position} className="position-fixed bottom-0 end-0 p-3">
14 |         <BootstrapToast className={renderClassName(className)} show={!!fireId} onClose={clear}>
15 |           <BootstrapToast.Header>
16 |             <strong className="me-auto">{title}</strong>
17 |           </BootstrapToast.Header>
18 |           <BootstrapToast.Body>
19 |             <components.AnyCompList propsList={body} />
20 |           </BootstrapToast.Body>
21 |         </BootstrapToast>
22 |       </BootstrapToastContainer>
23 |     </EventContextProvider>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/src/npm-fastui/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 to present Pydantic Services inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/python-fastui/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 to present Pydantic Services inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 to present Pydantic Services inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 to present Pydantic Services inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/python-fastui/tests/test_auth_shared.py:
--------------------------------------------------------------------------------
 1 | import pytest
 2 | from fastapi import FastAPI
 3 | from fastui.auth import AuthError, AuthRedirect, fastapi_auth_exception_handling
 4 | from starlette.testclient import TestClient
 5 | 
 6 | 
 7 | @pytest.fixture(name='app')
 8 | def app_fixture() -> FastAPI:
 9 |     app = FastAPI()
10 |     fastapi_auth_exception_handling(app)
11 | 
12 |     @app.post('/do-redirect/')
13 |     async def do_redirect():
14 |         raise AuthRedirect('/new-path')
15 | 
16 |     @app.post('/do-error/')
17 |     async def do_error():
18 |         raise AuthError('error message', code='error-code')
19 | 
20 |     return app
21 | 
22 | 
23 | @pytest.fixture
24 | def client(app: FastAPI):
25 |     with TestClient(app) as test_client:
26 |         yield test_client
27 | 
28 | 
29 | def test_auth_redirect(client: TestClient):
30 |     r = client.post('/do-redirect/')
31 |     assert r.status_code == 345
32 |     # insert_assert(r.json())
33 |     assert r.json() == [{'event': {'url': '/new-path', 'type': 'go-to'}, 'type': 'FireEvent'}]
34 | 
35 | 
36 | def test_auth_error(client: TestClient):
37 |     r = client.post('/do-error/')
38 |     assert r.status_code == 401
39 |     assert r.json() == {'detail': 'error message'}
40 | 


--------------------------------------------------------------------------------
/src/python-fastui/requirements/pyproject.txt:
--------------------------------------------------------------------------------
 1 | #
 2 | # This file is autogenerated by pip-compile with Python 3.14
 3 | # by the following command:
 4 | #
 5 | #    pip-compile --constraint=src/python-fastui/requirements/lint.txt --extra=fastapi --output-file=src/python-fastui/requirements/pyproject.txt --strip-extras src/python-fastui/pyproject.toml
 6 | #
 7 | annotated-doc==0.0.3
 8 |     # via fastapi
 9 | annotated-types==0.6.0
10 |     # via pydantic
11 | anyio==4.11.0
12 |     # via starlette
13 | dnspython==2.5.0
14 |     # via email-validator
15 | email-validator==2.1.0.post1
16 |     # via pydantic
17 | fastapi==0.120.1
18 |     # via fastui (src/python-fastui/pyproject.toml)
19 | idna==3.11
20 |     # via
21 |     #   anyio
22 |     #   email-validator
23 | pydantic==2.12.3
24 |     # via
25 |     #   fastapi
26 |     #   fastui (src/python-fastui/pyproject.toml)
27 | pydantic-core==2.41.4
28 |     # via pydantic
29 | python-multipart==0.0.7
30 |     # via fastui (src/python-fastui/pyproject.toml)
31 | sniffio==1.3.1
32 |     # via anyio
33 | starlette==0.48.0
34 |     # via fastapi
35 | typing-extensions==4.15.0
36 |     # via
37 |     #   fastapi
38 |     #   pydantic
39 |     #   pydantic-core
40 |     #   typing-inspection
41 | typing-inspection==0.4.2
42 |     # via pydantic
43 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/events.py:
--------------------------------------------------------------------------------
 1 | from typing import Annotated, Literal
 2 | 
 3 | from pydantic import Field
 4 | from typing_extensions import TypeAliasType
 5 | 
 6 | from .base import BaseModel
 7 | 
 8 | ContextType = TypeAliasType('ContextType', dict[str, str | int])
 9 | 
10 | 
11 | class PageEvent(BaseModel, defer_build=True):
12 |     name: str
13 |     push_path: str | None = None
14 |     context: ContextType | None = None
15 |     clear: bool | None = None
16 |     next_event: 'AnyEvent | None' = None
17 |     type: Literal['page'] = 'page'
18 | 
19 | 
20 | class GoToEvent(BaseModel):
21 |     # can be a path or a full URL
22 |     url: str | None = None
23 |     query: dict[str, str | float | None] | None = None
24 |     target: Literal['_blank'] | None = None
25 |     type: Literal['go-to'] = 'go-to'
26 | 
27 | 
28 | class BackEvent(BaseModel):
29 |     type: Literal['back'] = 'back'
30 | 
31 | 
32 | class AuthEvent(BaseModel):
33 |     # False means clear the token and thereby logout the user
34 |     token: str | Literal[False]
35 |     url: str | None = None
36 |     type: Literal['auth'] = 'auth'
37 | 
38 | 
39 | AnyEvent = Annotated[PageEvent | GoToEvent | BackEvent | AuthEvent, Field(discriminator='type')]
40 | 
41 | PageEvent.model_rebuild(_types_namespace={'AnyEvent': AnyEvent})
42 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'standard',
 6 |     'eslint:recommended',
 7 |     'plugin:react/recommended',
 8 |     'plugin:@typescript-eslint/recommended',
 9 |     'plugin:react-hooks/recommended',
10 |     'prettier',
11 |   ],
12 |   ignorePatterns: ['node_modules', 'dist', 'htmlcov'],
13 |   parser: '@typescript-eslint/parser',
14 |   plugins: ['react', '@typescript-eslint', 'react-refresh', 'simple-import-sort'],
15 |   rules: {
16 |     'react-refresh/only-export-components': 'off', // how much effect does this have?
17 |     '@typescript-eslint/no-explicit-any': 'off',
18 |     'no-use-before-define': 'off',
19 |     'react/react-in-jsx-scope': 'off',
20 |     'react/prop-types': 'off',
21 |     'react/display-name': 'off',
22 |     'import/order': [
23 |       'error',
24 |       {
25 |         'newlines-between': 'always',
26 |         groups: ['builtin', 'external', 'internal', 'object', 'type', 'parent', 'index', 'sibling'],
27 |         pathGroups: [
28 |           {
29 |             pattern: '@/**',
30 |             group: 'internal',
31 |           },
32 |           {
33 |             pattern: './../**',
34 |             group: 'parent',
35 |           },
36 |         ],
37 |       },
38 |     ],
39 |   },
40 | }
41 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import type { Navbar } from '../models'
 2 | 
 3 | import { useClassName } from '../hooks/className'
 4 | 
 5 | import { LinkComp, LinkRender } from './link'
 6 | 
 7 | export const NavbarComp = (props: Navbar) => {
 8 |   const startLinks = props.startLinks.map((link) => {
 9 |     link.mode = link.mode || 'navbar'
10 |     return link
11 |   })
12 |   const endLinks = props.endLinks.map((link) => {
13 |     link.mode = link.mode || 'navbar'
14 |     return link
15 |   })
16 |   return (
17 |     <nav className={useClassName(props)}>
18 |       <div className={useClassName(props, { el: 'contents' })}>
19 |         <NavbarTitle {...props} />
20 |         {startLinks.map((link, i) => (
21 |           <LinkComp key={i} {...link} />
22 |         ))}
23 |         {endLinks.map((link, i) => (
24 |           <LinkComp key={i} {...link} />
25 |         ))}
26 |       </div>
27 |     </nav>
28 |   )
29 | }
30 | 
31 | const NavbarTitle = (props: Navbar) => {
32 |   const { title, titleEvent } = props
33 |   const className = useClassName(props, { el: 'title' })
34 |   if (title) {
35 |     if (titleEvent) {
36 |       return (
37 |         <LinkRender onClick={titleEvent} className={className}>
38 |           {title}
39 |         </LinkRender>
40 |       )
41 |     } else {
42 |       return <span className={className}>{title}</span>
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/python-fastui/pyproject.toml:
--------------------------------------------------------------------------------
 1 | [build-system]
 2 | requires = ["hatchling"]
 3 | build-backend = "hatchling.build"
 4 | 
 5 | [tool.hatch.version]
 6 | path = "fastui/__init__.py"
 7 | 
 8 | [project]
 9 | name = "fastui"
10 | description = "Build better UIs faster."
11 | authors = [{ name = "Samuel Colvin", email = "s@muelcolvin.com" }]
12 | license = "MIT"
13 | readme = "README.md"
14 | classifiers = [
15 |     "Development Status :: 4 - Beta",
16 |     "Topic :: Internet",
17 |     "License :: OSI Approved :: MIT License",
18 |     "Programming Language :: Python :: 3",
19 |     'Programming Language :: Python :: 3 :: Only',
20 |     'Programming Language :: Python :: 3.10',
21 |     'Programming Language :: Python :: 3.11',
22 |     'Programming Language :: Python :: 3.12',
23 |     'Programming Language :: Python :: 3.13',
24 |     'Programming Language :: Python :: 3.14',
25 |     "Intended Audience :: Developers",
26 |     "Intended Audience :: Information Technology",
27 |     "Framework :: Pydantic :: 2",
28 |     "Framework :: FastAPI",
29 | ]
30 | requires-python = ">=3.10"
31 | dependencies = ["pydantic[email]>=2.8.0"]
32 | dynamic = ["version"]
33 | 
34 | [project.optional-dependencies]
35 | fastapi = [
36 |     "fastapi>=0.104",
37 |     "python-multipart>=0.0.6",
38 | ]
39 | 
40 | [project.urls]
41 | Homepage = "https://github.com/pydantic/FastUI"
42 | 
43 | [project.scripts]
44 | fastui = "fastui.__main__:cli"
45 | 


--------------------------------------------------------------------------------
/src/python-fastui/tests/test_json_schema.py:
--------------------------------------------------------------------------------
 1 | from dirty_equals import IsPartialDict
 2 | from fastapi import FastAPI
 3 | from fastui import FastUI, components
 4 | from fastui.generate_typescript import generate_json_schema
 5 | from httpx import ASGITransport, AsyncClient
 6 | 
 7 | 
 8 | async def test_json_schema():
 9 |     schema = generate_json_schema(FastUI)
10 |     assert schema == {
11 |         '$defs': IsPartialDict({'AnyEvent': IsPartialDict()}),
12 |         'items': {'$ref': '#/$defs/FastProps'},
13 |         'title': 'FastUI',
14 |         'type': 'array',
15 |     }
16 |     # TODO test more specific cases
17 | 
18 | 
19 | async def test_openapi():
20 |     app = FastAPI()
21 | 
22 |     @app.get('/api/', response_model=FastUI, response_model_exclude_none=True)
23 |     def test_endpoint():
24 |         return [components.Text(text='hello')]
25 | 
26 |     transport = ASGITransport(app=app)
27 | 
28 |     async with AsyncClient(transport=transport, base_url='http://test') as client:
29 |         r = await client.get('/openapi.json')
30 |         assert r.status_code == 200
31 |         assert r.headers['content-type'] == 'application/json'
32 |         assert r.json() == {
33 |             'openapi': '3.1.0',
34 |             'info': {
35 |                 'title': 'FastAPI',
36 |                 'version': '0.1.0',
37 |             },
38 |             'paths': IsPartialDict(),
39 |             'components': IsPartialDict(),
40 |         }
41 | 


--------------------------------------------------------------------------------
/.pre-commit-config.yaml:
--------------------------------------------------------------------------------
 1 | repos:
 2 |   - repo: https://github.com/pre-commit/pre-commit-hooks
 3 |     rev: v5.0.0
 4 |     hooks:
 5 |       - id: no-commit-to-branch
 6 |       - id: check-yaml
 7 |         args: ['--unsafe']
 8 |       - id: check-toml
 9 |       - id: end-of-file-fixer
10 |       - id: trailing-whitespace
11 | 
12 |   - repo: local
13 |     hooks:
14 |       - id: python-format
15 |         name: python-format
16 |         types_or: [python]
17 |         entry: make format
18 |         language: system
19 |         pass_filenames: false
20 |       - id: python-typecheck
21 |         name: python-typecheck
22 |         types_or: [python]
23 |         entry: make typecheck
24 |         language: system
25 |         pass_filenames: false
26 |       - id: js-prettier
27 |         name: js-prettier
28 |         types_or: [javascript, jsx, ts, tsx, css, json, markdown]
29 |         entry: npm run prettier
30 |         language: system
31 |         exclude: '^docs/.*'
32 |       - id: js-lint
33 |         name: js-lint
34 |         types_or: [ts, tsx]
35 |         entry: npm run lint-fix
36 |         language: system
37 |         pass_filenames: false
38 |       - id: js-typecheck
39 |         name: js-typecheck
40 |         types_or: [ts, tsx]
41 |         entry: npm run typecheck
42 |         language: system
43 |         pass_filenames: false
44 |       - id: python-generate-ts
45 |         name: python-generate-ts
46 |         types_or: [python]
47 |         entry: make typescript-models
48 |         language: system
49 |         pass_filenames: false
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "FastUI",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "workspaces": [
 6 |     "src/*"
 7 |   ],
 8 |   "scripts": {
 9 |     "dev": "npm run --workspace=@pydantic/fastui-prebuilt dev",
10 |     "build": "npm run --workspaces prepublishOnly",
11 |     "typecheck": "npm run --workspaces typecheck",
12 |     "lint": "eslint src --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
13 |     "lint-fix": "npm run lint -- --fix",
14 |     "prettier": "prettier --write",
15 |     "format": "npm run prettier -- . && npm run lint-fix",
16 |     "generate-json-schema": "./src/python-fastui/tests/react-fastui-json-schema.sh"
17 |   },
18 |   "prettier": {
19 |     "singleQuote": true,
20 |     "semi": false,
21 |     "trailingComma": "all",
22 |     "tabWidth": 2,
23 |     "printWidth": 119,
24 |     "bracketSpacing": true
25 |   },
26 |   "devDependencies": {
27 |     "@types/node": "^20.9.1",
28 |     "@types/react": "^18.2.15",
29 |     "@types/react-dom": "^18.2.7",
30 |     "@typescript-eslint/eslint-plugin": "^6.0.0",
31 |     "@typescript-eslint/parser": "^6.0.0",
32 |     "eslint": "^8.53.0",
33 |     "eslint-config-prettier": "^9.0.0",
34 |     "eslint-config-standard": "^17.1.0",
35 |     "eslint-plugin-react": "^7.33.2",
36 |     "eslint-plugin-react-hooks": "^4.6.0",
37 |     "eslint-plugin-react-refresh": "^0.4.4",
38 |     "eslint-plugin-simple-import-sort": "^10.0.0",
39 |     "json-schema-to-typescript": "^15.0.4",
40 |     "typescript": "^5.0.2"
41 |   },
42 |   "dependencies": {
43 |     "prettier": "^3.2.5",
44 |     "typedoc": "^0.25.13"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | 
 3 | import react from '@vitejs/plugin-react-swc'
 4 | import { defineConfig, HttpProxy } from 'vite'
 5 | 
 6 | export default () => {
 7 |   const serverConfig = {
 8 |     host: true,
 9 |     port: 3000,
10 |     proxy: {
11 |       '/api': {
12 |         target: 'http://localhost:8000',
13 |         configure: (proxy: HttpProxy.Server) => {
14 |           proxy.on('error', (err, _, res) => {
15 |             const { code } = err as any
16 |             if (code === 'ECONNREFUSED') {
17 |               res.writeHead(502, { 'content-type': 'text/plain' })
18 |               res.end('vite-proxy: Proxy connection refused')
19 |             }
20 |           })
21 |         },
22 |       },
23 |     },
24 |   }
25 | 
26 |   return defineConfig({
27 |     // @ts-expect-error - no need to type check this file
28 |     plugins: [react()],
29 |     resolve: {
30 |       alias: {
31 |         '@': path.resolve(__dirname, './src'),
32 |         fastui: path.resolve(__dirname, '../npm-fastui/src'),
33 |         'fastui-bootstrap': path.resolve(__dirname, '../npm-fastui-bootstrap/src'),
34 |       },
35 |     },
36 |     server: serverConfig,
37 |     preview: serverConfig,
38 |     build: {
39 |       sourcemap: true,
40 |       // we don't need hashes in URLs, we the URL will change when we release a new version
41 |       rollupOptions: {
42 |         output: {
43 |           entryFileNames: `assets/[name].js`,
44 |           chunkFileNames: `assets/[name].js`,
45 |           assetFileNames: `assets/[name].[ext]`,
46 |         },
47 |       },
48 |     },
49 |   })
50 | }
51 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/link.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, MouseEventHandler, ReactNode, useContext } from 'react'
 2 | 
 3 | import type { Link, AnyEvent } from '../models'
 4 | 
 5 | import { useClassName } from '../hooks/className'
 6 | import { LocationContext } from '../hooks/locationContext'
 7 | import { useFireEvent } from '../events'
 8 | 
 9 | import { AnyCompList } from './index'
10 | 
11 | export const LinkComp: FC<Link> = (props) => (
12 |   <LinkRender className={useClassName(props)} onClick={props.onClick} locked={props.locked}>
13 |     <AnyCompList propsList={props.components} />
14 |   </LinkRender>
15 | )
16 | 
17 | interface LinkRenderProps {
18 |   children: ReactNode
19 |   locked?: boolean
20 |   onClick?: AnyEvent
21 |   className?: string
22 |   ariaLabel?: string
23 | }
24 | 
25 | export const LinkRender: FC<LinkRenderProps> = (props) => {
26 |   const { className, ariaLabel, children, onClick, locked } = props
27 | 
28 |   const { fireEvent } = useFireEvent()
29 |   const { computeQuery } = useContext(LocationContext)
30 | 
31 |   let href = locked ? undefined : '#'
32 |   if (!locked && onClick && onClick.type === 'go-to') {
33 |     if (onClick.url) {
34 |       href = onClick.url
35 |     } else if (onClick.query) {
36 |       href = computeQuery(onClick.query)
37 |     }
38 |   }
39 | 
40 |   const clickHandler: MouseEventHandler<HTMLAnchorElement> = (e) => {
41 |     e.preventDefault()
42 |     if (!locked) {
43 |       fireEvent(onClick)
44 |     }
45 |   }
46 | 
47 |   return (
48 |     <a href={href} className={className} onClick={clickHandler} aria-label={ariaLabel} aria-disabled={locked}>
49 |       {children}
50 |     </a>
51 |   )
52 | }
53 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/details.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | 
 3 | import type { Details, Display, DisplayMode } from '../models'
 4 | 
 5 | import { asTitle } from '../tools'
 6 | import { useClassName } from '../hooks/className'
 7 | 
 8 | import { DisplayComp, DisplayLookupProps, renderEvent } from './display'
 9 | 
10 | export const DetailsComp: FC<Details> = (props) => (
11 |   <dl className={useClassName(props)}>
12 |     {props.fields.map((field, id) => (
13 |       <FieldDetail key={id} props={props} fieldDisplay={field} />
14 |     ))}
15 |   </dl>
16 | )
17 | 
18 | const FieldDetail: FC<{ props: Details; fieldDisplay: DisplayLookupProps | Display }> = ({ props, fieldDisplay }) => {
19 |   const onClick = fieldDisplay.onClick
20 |   let title = fieldDisplay.title
21 |   const rest: { mode?: DisplayMode; tableWidthPercent?: number } = { mode: fieldDisplay.mode }
22 |   let value: any
23 | 
24 |   if ('type' in fieldDisplay && fieldDisplay.type === 'Display') {
25 |     // fieldDisplay is Display
26 |     value = fieldDisplay.value
27 |   } else if ('field' in fieldDisplay) {
28 |     // fieldDisplay is DisplayLookupProps
29 |     const field = fieldDisplay.field
30 |     title = title ?? asTitle(field)
31 |     value = props.data[field]
32 |     rest.tableWidthPercent = fieldDisplay.tableWidthPercent
33 |   }
34 |   const renderedOnClick = renderEvent(onClick, props.data)
35 |   return (
36 |     <>
37 |       <dt className={useClassName(props, { el: 'dt' })}>{title}</dt>
38 |       <dd className={useClassName(props, { el: 'dd' })}>
39 |         <DisplayComp type="Display" onClick={renderedOnClick} value={value !== undefined ? value : null} {...rest} />
40 |       </dd>
41 |     </>
42 |   )
43 | }
44 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/table.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, CSSProperties } from 'react'
 2 | 
 3 | import type { Table } from '../models'
 4 | 
 5 | import { asTitle } from '../tools'
 6 | import { useClassName } from '../hooks/className'
 7 | 
 8 | import { DisplayComp, DisplayLookupProps, DataModel, renderEvent } from './display'
 9 | 
10 | export const TableComp: FC<Table> = (props) => {
11 |   const { columns, data, noDataMessage } = props
12 |   const noDataClassName = useClassName(props, { el: 'no-data-message' })
13 | 
14 |   return (
15 |     <table className={useClassName(props)}>
16 |       <thead>
17 |         <tr>
18 |           {columns.map((col, id) => (
19 |             <th key={id} style={colWidth(col.tableWidthPercent)}>
20 |               {col.title ?? asTitle(col.field)}
21 |             </th>
22 |           ))}
23 |         </tr>
24 |       </thead>
25 |       <tbody>
26 |         {data.map((row, rowId) => (
27 |           <tr key={rowId}>
28 |             {columns.map((column, id) => (
29 |               <Cell key={id} row={row} column={column} />
30 |             ))}
31 |           </tr>
32 |         ))}
33 |       </tbody>
34 |       {data.length === 0 && <caption className={noDataClassName}>{noDataMessage || 'No data'}</caption>}
35 |     </table>
36 |   )
37 | }
38 | 
39 | const colWidth = (w: number | undefined): CSSProperties | undefined => (w ? { width: `${w}%` } : undefined)
40 | 
41 | const Cell: FC<{ row: DataModel; column: DisplayLookupProps }> = ({ row, column }) => {
42 |   const { field, onClick, ...rest } = column
43 |   const value = row[field]
44 |   const renderedOnClick = renderEvent(onClick, row)
45 |   return (
46 |     <td>
47 |       <DisplayComp type="Display" onClick={renderedOnClick} value={value !== undefined ? value : null} {...rest} />
48 |     </td>
49 |   )
50 | }
51 | 


--------------------------------------------------------------------------------
/src/python-fastui/requirements/test.txt:
--------------------------------------------------------------------------------
 1 | #
 2 | # This file is autogenerated by pip-compile with Python 3.14
 3 | # by the following command:
 4 | #
 5 | #    pip-compile --constraint=src/python-fastui/requirements/lint.txt --constraint=src/python-fastui/requirements/pyproject.txt --output-file=src/python-fastui/requirements/test.txt --strip-extras src/python-fastui/requirements/test.in
 6 | #
 7 | anyio==4.11.0
 8 |     # via
 9 |     #   -c src/python-fastui/requirements/pyproject.txt
10 |     #   httpx
11 | certifi==2024.2.2
12 |     # via
13 |     #   httpcore
14 |     #   httpx
15 | coverage==7.4.1
16 |     # via -r src/python-fastui/requirements/test.in
17 | dirty-equals==0.7.1.post0
18 |     # via -r src/python-fastui/requirements/test.in
19 | h11==0.14.0
20 |     # via httpcore
21 | httpcore==1.0.8
22 |     # via httpx
23 | httpx==0.28.1
24 |     # via -r src/python-fastui/requirements/test.in
25 | idna==3.11
26 |     # via
27 |     #   -c src/python-fastui/requirements/pyproject.txt
28 |     #   anyio
29 |     #   httpx
30 | iniconfig==2.3.0
31 |     # via pytest
32 | markdown-it-py==3.0.0
33 |     # via rich
34 | mdurl==0.1.2
35 |     # via markdown-it-py
36 | packaging==25.0
37 |     # via pytest
38 | pluggy==1.6.0
39 |     # via pytest
40 | pygments==2.19.2
41 |     # via
42 |     #   pytest
43 |     #   rich
44 | pyjwt==2.8.0
45 |     # via -r src/python-fastui/requirements/test.in
46 | pytest==8.4.2
47 |     # via
48 |     #   -r src/python-fastui/requirements/test.in
49 |     #   pytest-asyncio
50 |     #   pytest-pretty
51 | pytest-asyncio==1.2.0
52 |     # via -r src/python-fastui/requirements/test.in
53 | pytest-pretty==1.3.0
54 |     # via -r src/python-fastui/requirements/test.in
55 | pytz==2025.2
56 |     # via dirty-equals
57 | rich==14.2.0
58 |     # via pytest-pretty
59 | sniffio==1.3.1
60 |     # via
61 |     #   -c src/python-fastui/requirements/pyproject.txt
62 |     #   anyio
63 | 


--------------------------------------------------------------------------------
/demo/auth_user.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | from dataclasses import asdict, dataclass
 3 | from datetime import datetime, timedelta
 4 | from typing import Annotated, Any
 5 | 
 6 | import jwt
 7 | from fastapi import Header, HTTPException
 8 | from fastui.auth import AuthRedirect
 9 | from typing_extensions import Self
10 | 
11 | JWT_SECRET = 'secret'
12 | 
13 | 
14 | @dataclass
15 | class User:
16 |     email: str | None
17 |     extra: dict[str, Any]
18 | 
19 |     def encode_token(self) -> str:
20 |         payload = asdict(self)
21 |         payload['exp'] = datetime.now() + timedelta(hours=1)
22 |         return jwt.encode(payload, JWT_SECRET, algorithm='HS256', json_encoder=CustomJsonEncoder)
23 | 
24 |     @classmethod
25 |     def from_request(cls, authorization: Annotated[str, Header()] = '') -> Self:
26 |         user = cls.from_request_opt(authorization)
27 |         if user is None:
28 |             raise AuthRedirect('/auth/login/password')
29 |         else:
30 |             return user
31 | 
32 |     @classmethod
33 |     def from_request_opt(cls, authorization: Annotated[str, Header()] = '') -> Self | None:
34 |         try:
35 |             token = authorization.split(' ', 1)[1]
36 |         except IndexError:
37 |             return None
38 | 
39 |         try:
40 |             payload = jwt.decode(token, JWT_SECRET, algorithms=['HS256'])
41 |         except jwt.ExpiredSignatureError:
42 |             return None
43 |         except jwt.DecodeError:
44 |             raise HTTPException(status_code=401, detail='Invalid token')
45 |         else:
46 |             # existing token might not have 'exp' field
47 |             payload.pop('exp', None)
48 |             return cls(**payload)
49 | 
50 | 
51 | class CustomJsonEncoder(json.JSONEncoder):
52 |     def default(self, obj: Any) -> Any:
53 |         if isinstance(obj, datetime):
54 |             return obj.isoformat()
55 |         else:
56 |             return super().default(obj)
57 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | .DEFAULT_GOAL:=all
 2 | path = src/python-fastui
 3 | 
 4 | .PHONY: install
 5 | install:
 6 | 	pip install -U pip pre-commit pip-tools
 7 | 	pip install -r $(path)/requirements/all.txt
 8 | 	pip install -e $(path)
 9 | 	pre-commit install
10 | 
11 | 
12 | .PHONY: install-docs
13 | install-docs:
14 | 	pip install -r requirements/docs.txt
15 | 
16 | # note -- mkdocstrings-typescript and griffe-typedoc are not yet publicly available
17 | # but the following can be added above the pip install -r requirements/docs.txt line in the future
18 | # pip install mkdocstrings-python mkdocstrings-typescript griffe-typedoc
19 | 
20 | .PHONY: update-lockfiles
21 | update-lockfiles:
22 | 	@echo "Updating requirements files using pip-compile"
23 | 	pip-compile -q --strip-extras -o $(path)/requirements/lint.txt $(path)/requirements/lint.in
24 | 	pip-compile -q --strip-extras -o $(path)/requirements/pyproject.txt -c $(path)/requirements/lint.txt $(path)/pyproject.toml --extra=fastapi
25 | 	pip-compile -q --strip-extras -o $(path)/requirements/test.txt -c $(path)/requirements/lint.txt -c $(path)/requirements/pyproject.txt $(path)/requirements/test.in
26 | 	pip install --dry-run -r $(path)/requirements/all.txt
27 | 
28 | .PHONY: format
29 | format:
30 | 	ruff check --fix-only $(path) demo
31 | 	ruff format $(path) demo
32 | 
33 | .PHONY: lint
34 | lint:
35 | 	ruff check $(path) demo
36 | 	ruff format --check $(path) demo
37 | 
38 | .PHONY: typecheck
39 | typecheck:
40 | 	pyright
41 | 
42 | .PHONY: test
43 | test:
44 | 	coverage run -m pytest
45 | 
46 | .PHONY: testcov
47 | testcov: test
48 | 	coverage html
49 | 
50 | .PHONY: typescript-models
51 | typescript-models:
52 | 	fastui generate fastui:FastUI src/npm-fastui/src/models.d.ts
53 | 
54 | .PHONY: dev
55 | dev:
56 | 	uvicorn demo:app --reload --reload-dir .
57 | 
58 | .PHONY: docs
59 | docs:
60 | 	mkdocs build
61 | 
62 | .PHONY: serve
63 | serve:
64 | 	mkdocs serve
65 | 
66 | .PHONY: all
67 | all: testcov lint
68 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/src/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react'
 2 | import { components, useClassName, models } from 'fastui'
 3 | import BootstrapNavbar from 'react-bootstrap/Navbar'
 4 | 
 5 | export const Navbar: FC<models.Navbar> = (props) => {
 6 |   const startLinks = props.startLinks.map((link) => {
 7 |     link.mode = link.mode || 'navbar'
 8 |     return link
 9 |   })
10 |   const endLinks = props.endLinks.map((link) => {
11 |     link.mode = link.mode || 'navbar'
12 |     return link
13 |   })
14 |   return (
15 |     <BootstrapNavbar expand="lg" className={useClassName(props)}>
16 |       <div className={useClassName(props, { el: 'contents' })}>
17 |         <NavbarTitle {...props} />
18 |         <BootstrapNavbar.Toggle aria-controls="navbar-collapse" />
19 |         <BootstrapNavbar.Collapse id="navbar-collapse">
20 |           <ul className="navbar-nav me-auto">
21 |             {startLinks.map((link, i) => (
22 |               <li key={i} className="nav-item">
23 |                 <components.LinkComp {...link} />
24 |               </li>
25 |             ))}
26 |           </ul>
27 |           <ul className="navbar-nav ms-auto">
28 |             {endLinks.map((link, i) => (
29 |               <li key={i} className="nav-item">
30 |                 <components.LinkComp {...link} />
31 |               </li>
32 |             ))}
33 |           </ul>
34 |         </BootstrapNavbar.Collapse>
35 |       </div>
36 |     </BootstrapNavbar>
37 |   )
38 | }
39 | 
40 | const NavbarTitle = (props: models.Navbar) => {
41 |   const { title, titleEvent } = props
42 |   const className = useClassName(props, { el: 'title' })
43 |   if (title) {
44 |     if (titleEvent) {
45 |       return (
46 |         <components.LinkRender onClick={titleEvent} className={className}>
47 |           {title}
48 |         </components.LinkRender>
49 |       )
50 |     } else {
51 |       return <span className={className}>{title}</span>
52 |     }
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/dev.py:
--------------------------------------------------------------------------------
 1 | import asyncio
 2 | import os
 3 | import signal
 4 | import typing as _t
 5 | from contextlib import asynccontextmanager
 6 | 
 7 | try:
 8 |     from fastapi import FastAPI
 9 |     from fastapi.responses import StreamingResponse
10 |     from starlette import types
11 | except ImportError as e:
12 |     raise ImportError('fastui.dev requires fastapi to be installed, install with `pip install fastui[fastapi]`') from e
13 | 
14 | 
15 | def dev_fastapi_app(reload_path: str = '/api/__dev__/reload', **fastapi_kwargs) -> FastAPI:
16 |     dev_reload = DevReload(fastapi_kwargs.pop('lifespan', None))
17 | 
18 |     app = FastAPI(lifespan=dev_reload.lifespan)
19 |     app.get(reload_path, include_in_schema=False)(dev_reload.dev_reload_endpoints)
20 |     return app
21 | 
22 | 
23 | class DevReload:
24 |     def __init__(self, default_lifespan: types.Lifespan[FastAPI] | None):
25 |         self.default_lifespan = default_lifespan
26 |         self.stop = asyncio.Event()
27 | 
28 |     @asynccontextmanager
29 |     async def lifespan(self, app: FastAPI):
30 |         signal.signal(signal.SIGTERM, self._on_signal)
31 |         if self.default_lifespan:
32 |             async with self.default_lifespan(app):
33 |                 yield
34 |         else:
35 |             yield
36 | 
37 |     async def dev_reload_endpoints(self):
38 |         return StreamingResponse(self.ping(), media_type='text/plain')
39 | 
40 |     def _on_signal(self, *_args: _t.Any):
41 |         # print('setting stop', _args)
42 |         self.stop.set()
43 | 
44 |     async def ping(self):
45 |         # print('connected', os.getpid())
46 |         yield b'fastui-dev-reload\n'
47 |         yield b'.'
48 |         while True:
49 |             try:
50 |                 await asyncio.wait_for(self.stop.wait(), timeout=2)
51 |             except asyncio.TimeoutError:
52 |                 yield b'.'
53 |             else:
54 |                 yield b'%d' % os.getpid()
55 |                 break
56 | 


--------------------------------------------------------------------------------
/src/python-fastui/tests/test_components.py:
--------------------------------------------------------------------------------
 1 | """
 2 | Simple tests of component creation.
 3 | 
 4 | NOTE: we do NOT want to exhaustively construct every component just for the same of it -
 5 | that's just testing pydantic!
 6 | """
 7 | from fastui import FastUI, components
 8 | from pydantic import HttpUrl
 9 | 
10 | 
11 | def test_div_text():
12 |     div = components.Div(components=[components.Text(text='hello world')])
13 | 
14 |     assert div.model_dump(by_alias=True, exclude_none=True) == {
15 |         'components': [
16 |             {
17 |                 'text': 'hello world',
18 |                 'type': 'Text',
19 |             },
20 |         ],
21 |         'type': 'Div',
22 |     }
23 | 
24 | 
25 | def test_div_class_name():
26 |     div = components.Div(components=[], class_name='foobar')
27 | 
28 |     assert div.model_dump(by_alias=True, exclude_none=True) == {
29 |         'components': [],
30 |         'className': 'foobar',
31 |         'type': 'Div',
32 |     }
33 | 
34 | 
35 | def test_root_model():
36 |     m = FastUI(root=[components.Text(text='hello world')])
37 |     assert m.model_dump(by_alias=True, exclude_none=True) == [
38 |         {
39 |             'text': 'hello world',
40 |             'type': 'Text',
41 |         }
42 |     ]
43 | 
44 | 
45 | def test_root_model_single():
46 |     # fixed by validator
47 |     m = FastUI(root=components.Text(text='hello world'))
48 |     assert m.model_dump(by_alias=True, exclude_none=True) == [
49 |         {
50 |             'text': 'hello world',
51 |             'type': 'Text',
52 |         }
53 |     ]
54 | 
55 | 
56 | def test_iframe():
57 |     iframe = components.Iframe(src='https://www.example.com', srcdoc='<p>hello world</p>', sandbox='allow-scripts')
58 |     assert iframe.model_dump(by_alias=True, exclude_none=True) == {
59 |         'src': HttpUrl('https://www.example.com'),
60 |         'type': 'Iframe',
61 |         'srcdoc': '<p>hello world</p>',
62 |         'sandbox': 'allow-scripts',
63 |     }
64 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, ReactNode } from 'react'
 2 | 
 3 | import type { FastProps } from './models'
 4 | 
 5 | import { LocationProvider } from './hooks/locationContext'
 6 | import { FastUIController } from './controller'
 7 | import { ClassNameContext, ClassNameGenerator } from './hooks/className'
 8 | import { ErrorContextProvider } from './hooks/error'
 9 | import { ConfigContext } from './hooks/config'
10 | import { DevReload } from './dev'
11 | export type * as models from './models'
12 | export * as components from './components'
13 | export * as events from './events'
14 | export type { ClassNameGenerator } from './hooks/className'
15 | export { useClassName, renderClassName } from './hooks/className'
16 | export { pathMatch } from './hooks/locationContext'
17 | export { EventContextProvider } from './hooks/eventContext'
18 | 
19 | export type CustomRender = (props: FastProps) => FC | void
20 | 
21 | export interface FastUIProps {
22 |   APIRootUrl: string
23 |   // defaults to 'append'
24 |   APIPathMode?: 'append' | 'query'
25 |   // start of the path to remove from the URL before making a request to the API
26 |   APIPathStrip?: string
27 |   NotFound?: FC<{ url: string }>
28 |   Transition?: FC<{ children: ReactNode; transitioning: boolean }>
29 |   classNameGenerator?: ClassNameGenerator
30 |   customRender?: CustomRender
31 |   // defaults to `process.env.NODE_ENV === 'development'
32 |   devMode?: boolean
33 | }
34 | 
35 | export function FastUI(props: FastUIProps) {
36 |   const { classNameGenerator, devMode, ...rest } = props
37 |   return (
38 |     <ClassNameContext.Provider value={classNameGenerator ?? null}>
39 |       <ErrorContextProvider>
40 |         <LocationProvider>
41 |           <ConfigContext.Provider value={rest}>
42 |             <DevReload enabled={devMode} />
43 |             <FastUIController />
44 |           </ConfigContext.Provider>
45 |         </LocationProvider>
46 |       </ErrorContextProvider>
47 |     </ClassNameContext.Provider>
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/demo/__init__.py:
--------------------------------------------------------------------------------
 1 | from __future__ import annotations as _annotations
 2 | 
 3 | import sys
 4 | from contextlib import asynccontextmanager
 5 | 
 6 | from fastapi import FastAPI
 7 | from fastapi.responses import HTMLResponse, PlainTextResponse
 8 | from fastui import prebuilt_html
 9 | from fastui.auth import fastapi_auth_exception_handling
10 | from fastui.dev import dev_fastapi_app
11 | from httpx import AsyncClient
12 | 
13 | from .auth import router as auth_router
14 | from .components_list import router as components_router
15 | from .forms import router as forms_router
16 | from .main import router as main_router
17 | from .sse import router as sse_router
18 | from .tables import router as table_router
19 | 
20 | 
21 | @asynccontextmanager
22 | async def lifespan(app_: FastAPI):
23 |     async with AsyncClient() as client:
24 |         app_.state.httpx_client = client
25 |         yield
26 | 
27 | 
28 | frontend_reload = '--reload' in sys.argv
29 | if frontend_reload:
30 |     # dev_fastapi_app reloads in the browser when the Python source changes
31 |     app = dev_fastapi_app(lifespan=lifespan)
32 | else:
33 |     app = FastAPI(lifespan=lifespan)
34 | 
35 | fastapi_auth_exception_handling(app)
36 | app.include_router(components_router, prefix='/api/components')
37 | app.include_router(sse_router, prefix='/api/components')
38 | app.include_router(table_router, prefix='/api/table')
39 | app.include_router(forms_router, prefix='/api/forms')
40 | app.include_router(auth_router, prefix='/api/auth')
41 | app.include_router(main_router, prefix='/api')
42 | 
43 | 
44 | @app.get('/robots.txt', response_class=PlainTextResponse)
45 | async def robots_txt() -> str:
46 |     return 'User-agent: *\nAllow: /'
47 | 
48 | 
49 | @app.get('/favicon.ico', status_code=404, response_class=PlainTextResponse)
50 | async def favicon_ico() -> str:
51 |     return 'page not found'
52 | 
53 | 
54 | @app.get('/{path:path}')
55 | async def html_landing() -> HTMLResponse:
56 |     return HTMLResponse(prebuilt_html(title='FastUI Demo'))
57 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/hooks/error.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, FC, ReactNode, useCallback, useContext, useState } from 'react'
 2 | 
 3 | import type { Error as ErrorProps } from '../models'
 4 | 
 5 | import { ErrorComp } from '../components'
 6 | 
 7 | import { useCustomRender } from './config'
 8 | 
 9 | interface ErrorDetails {
10 |   title: string
11 |   description: string
12 |   statusCode?: number
13 | }
14 | 
15 | interface ErrorDisplayProps extends ErrorDetails {
16 |   children?: ReactNode
17 | }
18 | 
19 | interface ErrorContextType {
20 |   error: ErrorDetails | null
21 |   setError: (error: ErrorDetails | null) => void
22 | }
23 | 
24 | export const DisplayError: FC<ErrorDisplayProps> = ({ title, description, statusCode, children }) => {
25 |   const props: ErrorProps = {
26 |     title,
27 |     description,
28 |     statusCode,
29 |     children,
30 |     type: 'Error',
31 |   }
32 |   const CustomRenderComp = useCustomRender(props)
33 |   if (CustomRenderComp) {
34 |     return <CustomRenderComp />
35 |   } else {
36 |     return <ErrorComp {...props} />
37 |   }
38 | }
39 | 
40 | export const ErrorContext = createContext<ErrorContextType>({
41 |   error: null,
42 |   setError: () => null,
43 | })
44 | 
45 | const MaybeError: FC<{ children: ReactNode }> = ({ children }) => {
46 |   const { error } = useContext(ErrorContext)
47 |   if (error) {
48 |     return <DisplayError {...error}>{children}</DisplayError>
49 |   } else {
50 |     return <>{children}</>
51 |   }
52 | }
53 | 
54 | interface Props {
55 |   children: ReactNode
56 | }
57 | 
58 | export const ErrorContextProvider: FC<Props> = ({ children }) => {
59 |   const [error, setErrorState] = useState<ErrorDetails | null>(null)
60 | 
61 |   const setError = useCallback(
62 |     (error: ErrorDetails | null) => {
63 |       if (error) {
64 |         console.warn('setting error:', error)
65 |       }
66 |       setErrorState(error)
67 |     },
68 |     [setErrorState],
69 |   )
70 | 
71 |   return (
72 |     <ErrorContext.Provider value={{ error, setError }}>
73 |       <MaybeError>{children}</MaybeError>
74 |     </ErrorContext.Provider>
75 |   )
76 | }
77 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/auth/shared.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | from abc import ABC, abstractmethod
 3 | from typing import TYPE_CHECKING
 4 | 
 5 | from .. import AnyComponent, FastUI, events
 6 | from .. import components as c
 7 | 
 8 | if TYPE_CHECKING:
 9 |     from fastapi import FastAPI
10 | 
11 | __all__ = 'AuthError', 'AuthRedirect', 'fastapi_auth_exception_handling'
12 | 
13 | 
14 | class AuthException(ABC, Exception):
15 |     """
16 |     Base exception for all auth-related errors.
17 |     """
18 | 
19 |     @abstractmethod
20 |     def response_data(self) -> tuple[int, str]:
21 |         raise NotImplementedError
22 | 
23 | 
24 | class AuthError(AuthException):
25 |     def __init__(self, message: str, *, code: str):
26 |         super().__init__(message)
27 |         self.code = code
28 | 
29 |     def response_data(self) -> tuple[int, str]:
30 |         return 401, json.dumps({'detail': str(self)})
31 | 
32 | 
33 | class AuthRedirect(AuthException):
34 |     """
35 |     Special exception which should cause a 345 HTTP response with a body containing
36 |     FastUI components to redirect the user to a new page.
37 |     """
38 | 
39 |     def __init__(self, path: str, message: str | None = None):
40 |         super().__init__(f'Auth redirect to `{path}`' + (f': {message}' if message else ''))
41 |         self.path = path
42 |         self.message = message
43 | 
44 |     def response_data(self) -> tuple[int, str]:
45 |         components: list[AnyComponent] = [c.FireEvent(event=events.GoToEvent(url=self.path), message=self.message)]
46 |         return 345, FastUI(root=components).model_dump_json(exclude_none=True)
47 | 
48 | 
49 | def fastapi_auth_exception_handling(app: 'FastAPI') -> None:
50 |     """
51 |     Register an exception handler for any `AuthException` in a FastAPI app.
52 |     """
53 |     from fastapi import Request, Response
54 | 
55 |     @app.exception_handler(AuthException)
56 |     def auth_exception_handler(_request: Request, e: AuthException) -> Response:
57 |         status_code, body = e.response_data()
58 |         return Response(body, media_type='application/json', status_code=status_code)
59 | 


--------------------------------------------------------------------------------
/demo/shared.py:
--------------------------------------------------------------------------------
 1 | from __future__ import annotations as _annotations
 2 | 
 3 | from fastui import AnyComponent
 4 | from fastui import components as c
 5 | from fastui.events import GoToEvent
 6 | 
 7 | 
 8 | def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyComponent]:
 9 |     return [
10 |         c.PageTitle(text=f'FastUI Demo — {title}' if title else 'FastUI Demo'),
11 |         c.Navbar(
12 |             title='FastUI Demo',
13 |             title_event=GoToEvent(url='/'),
14 |             start_links=[
15 |                 c.Link(
16 |                     components=[c.Text(text='Components')],
17 |                     on_click=GoToEvent(url='/components'),
18 |                     active='startswith:/components',
19 |                 ),
20 |                 c.Link(
21 |                     components=[c.Text(text='Tables')],
22 |                     on_click=GoToEvent(url='/table/cities'),
23 |                     active='startswith:/table',
24 |                 ),
25 |                 c.Link(
26 |                     components=[c.Text(text='Auth')],
27 |                     on_click=GoToEvent(url='/auth/login/password'),
28 |                     active='startswith:/auth',
29 |                 ),
30 |                 c.Link(
31 |                     components=[c.Text(text='Forms')],
32 |                     on_click=GoToEvent(url='/forms/login'),
33 |                     active='startswith:/forms',
34 |                 ),
35 |             ],
36 |         ),
37 |         c.Page(
38 |             components=[
39 |                 *((c.Heading(text=title),) if title else ()),
40 |                 *components,
41 |             ],
42 |         ),
43 |         c.Footer(
44 |             extra_text='FastUI Demo',
45 |             links=[
46 |                 c.Link(
47 |                     components=[c.Text(text='Github')], on_click=GoToEvent(url='https://github.com/pydantic/FastUI')
48 |                 ),
49 |                 c.Link(components=[c.Text(text='PyPI')], on_click=GoToEvent(url='https://pypi.org/project/fastui/')),
50 |                 c.Link(components=[c.Text(text='NPM')], on_click=GoToEvent(url='https://www.npmjs.com/org/pydantic/')),
51 |             ],
52 |         ),
53 |     ]
54 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { CustomRender, FastUI, renderClassName } from 'fastui'
 2 | import * as bootstrap from 'fastui-bootstrap'
 3 | import { FC, ReactNode } from 'react'
 4 | 
 5 | export default function App() {
 6 |   return (
 7 |     <FastUI
 8 |       APIRootUrl={getMetaContent('fastui:APIRootUrl') || '/api'}
 9 |       APIPathMode={getMetaContent('fastui:APIPathMode') as undefined | 'append' | 'query'}
10 |       APIPathStrip={getMetaContent('fastui:APIPathStrip')}
11 |       classNameGenerator={bootstrap.classNameGenerator}
12 |       customRender={customRender}
13 |       NotFound={NotFound}
14 |       Transition={Transition}
15 |     />
16 |   )
17 | }
18 | 
19 | function getMetaContent(name: string): string | undefined {
20 |   return document.querySelector(`meta[name="${name}"]`)?.getAttribute('content') || undefined
21 | }
22 | 
23 | const NotFound = ({ url }: { url: string }) => (
24 |   <div className="container mt-5 text-center">
25 |     <h1>Page not found</h1>
26 |     <p>
27 |       No page found at <code>{url}</code>.
28 |     </p>
29 |   </div>
30 | )
31 | 
32 | const Transition: FC<{ children: ReactNode; transitioning: boolean }> = ({ children, transitioning }) => (
33 |   <>
34 |     <div className={renderClassName({ 'transition-overlay': true, transitioning })} />
35 |     {children}
36 |   </>
37 | )
38 | 
39 | const customRender: CustomRender = (props) => {
40 |   const { type } = props
41 |   if (type === 'Custom' && props.library === undefined && props.subType === 'cowsay') {
42 |     console.assert(typeof props.data === 'string', 'cowsay data must be a string')
43 |     const text = props.data as string
44 |     return () => <Cowsay text={text} />
45 |   } else {
46 |     return bootstrap.customRender(props)
47 |   }
48 | }
49 | 
50 | const COWSAY = ` {above}
51 | < {text} >
52 |  {below}
53 |         \\   ^__^
54 |          \\  (oo)\\_______
55 |             (__)\\       )\\/\\
56 |                 ||----w |
57 |                 ||     ||`
58 | 
59 | const Cowsay: FC<{ text: string }> = ({ text }) => {
60 |   const len = text.length
61 |   const cowsay = COWSAY.replace('{text}', text)
62 |     .replace('{above}', '_'.repeat(len + 2))
63 |     .replace('{below}', '-'.repeat(len + 2))
64 |   return <pre>{cowsay}</pre>
65 | }
66 | 


--------------------------------------------------------------------------------
/demo/main.py:
--------------------------------------------------------------------------------
 1 | from __future__ import annotations as _annotations
 2 | 
 3 | from fastapi import APIRouter
 4 | from fastui import AnyComponent, FastUI
 5 | from fastui import components as c
 6 | 
 7 | from .shared import demo_page
 8 | 
 9 | router = APIRouter()
10 | 
11 | 
12 | @router.get('/', response_model=FastUI, response_model_exclude_none=True)
13 | def api_index() -> list[AnyComponent]:
14 |     # language=markdown
15 |     markdown = """\
16 | This site provides a demo of [FastUI](https://github.com/pydantic/FastUI), the code for the demo
17 | is [here](https://github.com/pydantic/FastUI/tree/main/demo).
18 | 
19 | You can find the documentation for FastUI [here](https://docs.pydantic.dev/fastui/).
20 | 
21 | The following components are demonstrated:
22 | 
23 | * `Markdown` — that's me :-)
24 | * `Text`— example [here](/components#text)
25 | * `Paragraph` — example [here](/components#paragraph)
26 | * `PageTitle` — you'll see the title in the browser tab change when you navigate through the site
27 | * `Heading` — example [here](/components#heading)
28 | * `Code` — example [here](/components#code)
29 | * `Button` — example [here](/components#button-and-modal)
30 | * `Link` — example [here](/components#link-list)
31 | * `LinkList` — example [here](/components#link-list)
32 | * `Navbar` — see the top of this page
33 | * `Footer` — see the bottom of this page
34 | * `Modal` — static example [here](/components#button-and-modal), dynamic content example [here](/components#dynamic-modal)
35 | * `ServerLoad` — see [dynamic modal example](/components#dynamic-modal) and [SSE example](/components#server-load-sse)
36 | * `Image` - example [here](/components#image)
37 | * `Iframe` - example [here](/components#iframe)
38 | * `Video` - example [here](/components#video)
39 | * `Toast` - example [here](/components#toast)
40 | * `Table` — See [cities table](/table/cities) and [users table](/table/users)
41 | * `Pagination` — See the bottom of the [cities table](/table/cities)
42 | * `ModelForm` — See [forms](/forms/login)
43 | 
44 | Authentication is supported via:
45 | * token based authentication — see [here](/auth/login/password) for an example of password authentication
46 | * GitHub OAuth — see [here](/auth/login/github) for an example of GitHub OAuth login
47 | """
48 |     return demo_page(c.Markdown(text=markdown))
49 | 
50 | 
51 | @router.get('/{path:path}', status_code=404)
52 | async def api_404():
53 |     # so we don't fall through to the index page
54 |     return {'message': 'Not Found'}
55 | 


--------------------------------------------------------------------------------
/bump_npm.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | from __future__ import annotations
 3 | 
 4 | import json
 5 | import re
 6 | from pathlib import Path
 7 | 
 8 | 
 9 | def replace_package_json(package_json: Path, new_version: str, deps: bool = False) -> tuple[Path, str]:
10 |     content = package_json.read_text()
11 |     content, r_count = re.subn(r'"version": *".*?"', f'"version": "{new_version}"', content, count=1)
12 |     assert r_count == 1 , f'Failed to update version in {package_json}, expect replacement count 1, got {r_count}'
13 |     if deps:
14 |         content, r_count = re.subn(r'"(@pydantic/.+?)": *".*?"', fr'"\1": "{new_version}"', content)
15 |         assert r_count == 1, f'Failed to update version in {package_json}, expect replacement count 1, got {r_count}'
16 | 
17 |     return package_json, content
18 | 
19 | 
20 | def main():
21 |     this_dir = Path(__file__).parent
22 |     fastui_package_json = this_dir / 'src/npm-fastui/package.json'
23 |     with fastui_package_json.open() as f:
24 |         old_version = json.load(f)['version']
25 | 
26 |     rest, patch_version = old_version.rsplit('.', 1)
27 |     new_version = f'{rest}.{int(patch_version) + 1}'
28 |     bootstrap_package_json = this_dir / 'src/npm-fastui-bootstrap/package.json'
29 |     prebuilt_package_json = this_dir / 'src/npm-fastui-prebuilt/package.json'
30 |     to_update: list[tuple[Path, str]] = [
31 |         replace_package_json(fastui_package_json, new_version),
32 |         replace_package_json(bootstrap_package_json, new_version, deps=True),
33 |         replace_package_json(prebuilt_package_json, new_version),
34 |     ]
35 | 
36 |     python_init = this_dir / 'src/python-fastui/fastui/__init__.py'
37 |     python_content = python_init.read_text()
38 |     python_content, r_count = re.subn(r"(_PREBUILT_VERSION = )'.+'", fr"\1'{new_version}'", python_content)
39 |     assert r_count == 1, f'Failed to update version in {python_init}, expect replacement count 1, got {r_count}'
40 |     to_update.append((python_init, python_content))
41 | 
42 |     # logic is finished, no update all files
43 |     print(f'Updating files:')
44 |     for package_json, content in to_update:
45 |         print(f'  {package_json.relative_to(this_dir)}')
46 |         package_json.write_text(content)
47 | 
48 |     print(f"""
49 | Bumped from `{old_version}` to `{new_version}` in {len(to_update)} files.
50 | 
51 | To publish the new version, run:
52 | 
53 | > npm --workspaces publish
54 | """)
55 | 
56 | 
57 | if __name__ == '__main__':
58 |     main()
59 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/__init__.py:
--------------------------------------------------------------------------------
 1 | import typing as _t
 2 | 
 3 | import pydantic
 4 | 
 5 | from .components import AnyComponent
 6 | 
 7 | __version__ = '0.9.0'
 8 | __all__ = 'AnyComponent', 'FastUI', 'prebuilt_html'
 9 | 
10 | 
11 | class FastUI(pydantic.RootModel):
12 |     """
13 |     The root component of a FastUI application.
14 |     """
15 | 
16 |     root: list[AnyComponent]
17 | 
18 |     @pydantic.field_validator('root', mode='before')
19 |     def coerce_to_list(cls, v):
20 |         if isinstance(v, list):
21 |             return v
22 |         else:
23 |             return [v]
24 | 
25 | 
26 | _PREBUILT_VERSION = '0.0.26'
27 | _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'
28 | 
29 | 
30 | def prebuilt_html(
31 |     *,
32 |     title: str = '',
33 |     api_root_url: str | None = None,
34 |     api_path_mode: _t.Literal['append', 'query'] | None = None,
35 |     api_path_strip: str | None = None,
36 | ) -> str:
37 |     """
38 |     Returns a simple HTML page which includes the FastUI react frontend, loaded from https://www.jsdelivr.com/.
39 | 
40 |     Arguments:
41 |         title: page title
42 |         api_root_url: the root URL of the API backend, which will be used to get data, default is '/api'.
43 |         api_path_mode: whether to append the page path to the root API request URL, or use it as a query parameter,
44 |             default is 'append'.
45 |         api_path_strip: string to remove from the start of the page path before making the API request.
46 | 
47 |     Returns:
48 |         HTML string which can be returned by an endpoint to serve the FastUI frontend.
49 |     """
50 |     meta_extra = []
51 |     if api_root_url is not None:
52 |         meta_extra.append(f'<meta name="fastui:APIRootUrl" content="{api_root_url}" />')
53 |     if api_path_mode is not None:
54 |         meta_extra.append(f'<meta name="fastui:APIPathMode" content="{api_path_mode}" />')
55 |     if api_path_strip is not None:
56 |         meta_extra.append(f'<meta name="fastui:APIPathStrip" content="{api_path_strip}" />')
57 |     meta_extra_str = '\n    '.join(meta_extra)
58 |     # language=HTML
59 |     return f"""\
60 | <!doctype html>
61 | <html lang="en">
62 |   <head>
63 |     <meta charset="UTF-8" />
64 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
65 |     <title>{title}</title>
66 |     <script type="module" crossorigin src="{_PREBUILT_CDN_URL}/index.js"></script>
67 |     <link rel="stylesheet" crossorigin href="{_PREBUILT_CDN_URL}/index.css">
68 |     {meta_extra_str}
69 |   </head>
70 |   <body>
71 |     <div id="root"></div>
72 |   </body>
73 | </html>
74 | """
75 | 


--------------------------------------------------------------------------------
/docs/plugins.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | import re
 3 | 
 4 | from typing import Match
 5 | 
 6 | from mkdocs.config import Config
 7 | from mkdocs.structure.files import Files
 8 | from mkdocs.structure.pages import Page
 9 | 
10 | try:
11 |     import pytest
12 | except ImportError:
13 |     pytest = None
14 | 
15 | 
16 | def on_pre_build(config: Config):
17 |     pass
18 | 
19 | 
20 | def on_files(files: Files, config: Config) -> Files:
21 |     return remove_files(files)
22 | 
23 | 
24 | def remove_files(files: Files) -> Files:
25 |     to_remove = []
26 |     for file in files:
27 |         if file.src_path in {'plugins.py'}:
28 |             to_remove.append(file)
29 |         elif file.src_path.startswith('__pycache__/'):
30 |             to_remove.append(file)
31 | 
32 |     for f in to_remove:
33 |         files.remove(f)
34 | 
35 |     return files
36 | 
37 | 
38 | def on_page_markdown(markdown: str, page: Page, config: Config, files: Files) -> str:
39 |     markdown = remove_code_fence_attributes(markdown)
40 |     return add_version(markdown, page)
41 | 
42 | 
43 | def add_version(markdown: str, page: Page) -> str:
44 |     if page.file.src_uri == 'index.md':
45 |         version_ref = os.getenv('GITHUB_REF')
46 |         if version_ref and version_ref.startswith('refs/tags/'):
47 |             version = re.sub('^refs/tags/', '', version_ref.lower())
48 |             url = f'https://github.com/pydantic/FastUI/releases/tag/{version}'
49 |             version_str = f'Documentation for version: [{version}]({url})'
50 |         elif sha := os.getenv('GITHUB_SHA'):
51 |             sha = sha[:7]
52 |             url = f'https://github.com/pydantic/FastUI/commit/{sha}'
53 |             version_str = f'Documentation for development version: [{sha}]({url})'
54 |         else:
55 |             version_str = 'Documentation for development version'
56 |         markdown = re.sub(r'{{ *version *}}', version_str, markdown)
57 |     return markdown
58 | 
59 | 
60 | def remove_code_fence_attributes(markdown: str) -> str:
61 |     """
62 |     There's no way to add attributes to code fences that works with both pycharm and mkdocs, hence we use
63 |     `py key="value"` to provide attributes to pytest-examples, then remove those attributes here.
64 | 
65 |     https://youtrack.jetbrains.com/issue/IDEA-297873 & https://python-markdown.github.io/extensions/fenced_code_blocks/
66 |     """
67 | 
68 |     def remove_attrs(match: Match[str]) -> str:
69 |         suffix = re.sub(
70 |             r' (?:test|lint|upgrade|group|requires|output|rewrite_assert)=".+?"', '', match.group(2), flags=re.M
71 |         )
72 |         return f'{match.group(1)}{suffix}'
73 | 
74 |     return re.sub(r'^( *``` *py)(.*)', remove_attrs, markdown, flags=re.M)
75 | 


--------------------------------------------------------------------------------
/mkdocs.yml:
--------------------------------------------------------------------------------
 1 | site_name: FastUI
 2 | site_description: Build web application user interfaces defined by declarative Python code.
 3 | site_url: https://docs.pydantic.dev/fastui/
 4 | 
 5 | theme:
 6 |   name: 'material'
 7 |   palette:
 8 |   - media: "(prefers-color-scheme: light)"
 9 |     scheme: default
10 |     primary: pink
11 |     accent: pink
12 |     toggle:
13 |       icon: material/lightbulb-outline
14 |       name: "Switch to dark mode"
15 |   - media: "(prefers-color-scheme: dark)"
16 |     scheme: slate
17 |     primary: pink
18 |     accent: pink
19 |     toggle:
20 |       icon: material/lightbulb
21 |       name: "Switch to light mode"
22 |   features:
23 |     - content.code.annotate
24 |     - content.tabs.link
25 |     - content.code.copy
26 |     - announce.dismiss
27 |     - navigation.tabs
28 |     - search.suggest
29 |     - search.highlight
30 |   logo: assets/logo-white.svg
31 |   favicon: assets/favicon.png
32 | 
33 | repo_name: pydantic/FastUI
34 | repo_url: https://github.com/pydantic/FastUI
35 | edit_uri: ''
36 | 
37 | # https://www.mkdocs.org/user-guide/configuration/#validation
38 | validation:
39 |   omitted_files: warn
40 |   absolute_links: warn
41 |   unrecognized_links: warn
42 | 
43 | extra_css:
44 |   - 'extra/tweaks.css'
45 | 
46 | # TODO: add flarelytics support
47 | # extra_javascript:
48 | #   - '/flarelytics/client.js'
49 | 
50 | markdown_extensions:
51 |   - toc:
52 |       permalink: true
53 |   - admonition
54 |   - pymdownx.details
55 |   - pymdownx.extra
56 |   - pymdownx.superfences
57 |   - pymdownx.highlight:
58 |       anchor_linenums: true
59 |   - pymdownx.inlinehilite
60 |   - pymdownx.snippets
61 |   - attr_list
62 |   - md_in_html
63 |   - pymdownx.emoji:
64 |       emoji_index: !!python/name:material.extensions.emoji.twemoji
65 |       emoji_generator: !!python/name:material.extensions.emoji.to_svg
66 | watch:
67 |   - src
68 | plugins:
69 |   - search
70 |   - mkdocstrings:
71 |       handlers:
72 |         python:
73 |           paths:
74 |             - src/python-fastui
75 |           options:
76 |             members_order: source
77 |             separate_signature: true
78 |             docstring_options:
79 |               ignore_init_summary: true
80 |             merge_init_into_class: true
81 |             show_signature_annotations: true
82 |             signature_crossrefs: true
83 |   - mkdocs-simple-hooks:
84 |       hooks:
85 |         on_pre_build: 'docs.plugins:on_pre_build'
86 |         on_files: 'docs.plugins:on_files'
87 |         on_page_markdown: 'docs.plugins:on_page_markdown'
88 | nav:
89 |   - Introduction: index.md
90 |   - Guide: guide.md
91 |   - API Documentation:
92 |     - Python Components: api/python_components.md
93 |     - TypeScript Components: api/typescript_components.md
94 | 


--------------------------------------------------------------------------------
/requirements/docs.txt:
--------------------------------------------------------------------------------
  1 | #
  2 | # This file is autogenerated by pip-compile with Python 3.11
  3 | # by the following command:
  4 | #
  5 | #    pip-compile --output-file=requirements/docs.txt requirements/docs.in
  6 | #
  7 | babel==2.14.0
  8 |     # via mkdocs-material
  9 | certifi==2024.2.2
 10 |     # via requests
 11 | charset-normalizer==3.3.2
 12 |     # via requests
 13 | click==8.1.7
 14 |     # via
 15 |     #   mkdocs
 16 |     #   mkdocstrings
 17 | colorama==0.4.6
 18 |     # via
 19 |     #   griffe
 20 |     #   mkdocs-material
 21 | ghp-import==2.1.0
 22 |     # via mkdocs
 23 | griffe==0.44.0
 24 |     # via mkdocstrings-python
 25 | idna==3.7
 26 |     # via requests
 27 | jinja2==3.1.3
 28 |     # via
 29 |     #   mkdocs
 30 |     #   mkdocs-material
 31 |     #   mkdocstrings
 32 | markdown==3.6
 33 |     # via
 34 |     #   mkdocs
 35 |     #   mkdocs-autorefs
 36 |     #   mkdocs-material
 37 |     #   mkdocstrings
 38 |     #   pymdown-extensions
 39 | markupsafe==2.1.5
 40 |     # via
 41 |     #   jinja2
 42 |     #   mkdocs
 43 |     #   mkdocs-autorefs
 44 |     #   mkdocstrings
 45 | mergedeep==1.3.4
 46 |     # via mkdocs
 47 | mkdocs==1.5.3
 48 |     # via
 49 |     #   -r requirements/docs.in
 50 |     #   mkdocs-autorefs
 51 |     #   mkdocs-material
 52 |     #   mkdocs-redirects
 53 |     #   mkdocs-simple-hooks
 54 |     #   mkdocstrings
 55 | mkdocs-autorefs==1.0.1
 56 |     # via mkdocstrings
 57 | mkdocs-material==9.5.18
 58 |     # via -r requirements/docs.in
 59 | mkdocs-material-extensions==1.3.1
 60 |     # via
 61 |     #   -r requirements/docs.in
 62 |     #   mkdocs-material
 63 | mkdocs-redirects==1.2.1
 64 |     # via -r requirements/docs.in
 65 | mkdocs-simple-hooks==0.1.5
 66 |     # via -r requirements/docs.in
 67 | mkdocstrings[python]==0.24.3
 68 |     # via
 69 |     #   -r requirements/docs.in
 70 |     #   mkdocstrings-python
 71 | mkdocstrings-python==1.10.0
 72 |     # via mkdocstrings
 73 | packaging==24.0
 74 |     # via mkdocs
 75 | paginate==0.5.6
 76 |     # via mkdocs-material
 77 | pathspec==0.12.1
 78 |     # via mkdocs
 79 | platformdirs==4.2.0
 80 |     # via
 81 |     #   mkdocs
 82 |     #   mkdocstrings
 83 | pygments==2.17.2
 84 |     # via mkdocs-material
 85 | pymdown-extensions==10.8
 86 |     # via
 87 |     #   mkdocs-material
 88 |     #   mkdocstrings
 89 | python-dateutil==2.9.0.post0
 90 |     # via ghp-import
 91 | pyyaml==6.0.1
 92 |     # via
 93 |     #   mkdocs
 94 |     #   pymdown-extensions
 95 |     #   pyyaml-env-tag
 96 | pyyaml-env-tag==0.1
 97 |     # via mkdocs
 98 | regex==2024.4.16
 99 |     # via mkdocs-material
100 | requests==2.31.0
101 |     # via mkdocs-material
102 | six==1.16.0
103 |     # via python-dateutil
104 | urllib3==2.2.1
105 |     # via requests
106 | watchdog==4.0.0
107 |     # via mkdocs
108 | 


--------------------------------------------------------------------------------
/src/npm-fastui-prebuilt/src/main.scss:
--------------------------------------------------------------------------------
  1 | $primary: black;
  2 | $secondary: white;
  3 | $link-color: #0d6efd; // bootstrap primary
  4 | 
  5 | @import 'bootstrap/scss/bootstrap';
  6 | 
  7 | html,
  8 | body,
  9 | #root {
 10 |   height: 100%;
 11 | }
 12 | 
 13 | #root {
 14 |   display: flex;
 15 |   flex-direction: column;
 16 | }
 17 | 
 18 | .page {
 19 |   // margin-top because the top is sticky
 20 |   margin-top: 70px;
 21 | }
 22 | 
 23 | :root {
 24 |   --bs-font-sans-serif: 'IBM Plex Sans', sans-serif;
 25 |   --bs-code-color: rgb(31, 35, 40);
 26 |   //
 27 | }
 28 | @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap');
 29 | 
 30 | body {
 31 |   margin-bottom: 60px;
 32 | }
 33 | 
 34 | .bg-body {
 35 |   --bs-bg-opacity: 0.6;
 36 |   backdrop-filter: blur(8px);
 37 | }
 38 | 
 39 | h1,
 40 | h2,
 41 | h3,
 42 | h4,
 43 | h5,
 44 | h6 {
 45 |   scroll-margin-top: 60px;
 46 | }
 47 | 
 48 | .transition-overlay {
 49 |   position: fixed;
 50 |   top: 0;
 51 |   left: 0;
 52 |   width: 0;
 53 |   height: 0;
 54 |   pointer-events: none;
 55 |   background-color: white;
 56 |   z-index: 9999;
 57 |   opacity: 0;
 58 |   transition: opacity 0.4s ease-in-out;
 59 |   &.transitioning {
 60 |     opacity: 0.8;
 61 |     pointer-events: auto;
 62 |     width: 100%;
 63 |     height: 100%;
 64 |   }
 65 | }
 66 | 
 67 | .fastui-markdown code {
 68 |   padding: 0.2em 0.4em;
 69 |   margin: 0;
 70 |   font-size: 85%;
 71 |   white-space: break-spaces;
 72 |   background-color: rgba(175, 184, 193, 0.2);
 73 |   border-radius: 6px;
 74 | }
 75 | 
 76 | // custom spinner from https://cssloaders.github.io/
 77 | .fastui-spinner-animation,
 78 | .fastui-spinner-animation:before,
 79 | .fastui-spinner-animation:after {
 80 |   border-radius: 50%;
 81 |   width: 2.5em;
 82 |   height: 2.5em;
 83 |   animation-fill-mode: both;
 84 |   animation: spinner-dots 1.8s infinite ease-in-out;
 85 | }
 86 | .fastui-spinner-animation {
 87 |   top: -2.5em;
 88 |   color: var(--bs-dark);
 89 |   font-size: 7px;
 90 |   position: relative;
 91 |   text-indent: -9999em;
 92 |   transform: translateZ(0);
 93 |   animation-delay: -0.16s;
 94 |   &:before,
 95 |   &:after {
 96 |     content: '';
 97 |     position: absolute;
 98 |     top: 0;
 99 |   }
100 |   &:before {
101 |     left: -3.5em;
102 |     animation-delay: -0.32s;
103 |   }
104 |   &:after {
105 |     left: 3.5em;
106 |   }
107 | }
108 | @keyframes spinner-dots {
109 |   0%,
110 |   80%,
111 |   100% {
112 |     box-shadow: 0 2.5em 0 -1.3em;
113 |   }
114 |   40% {
115 |     box-shadow: 0 2.5em 0 0;
116 |   }
117 | }
118 | 
119 | // make sure alerts aren't hidden behind the navbar
120 | .error-alert {
121 |   position: relative;
122 |   top: 60px;
123 | }
124 | 
125 | .btn-secondary {
126 |   --bs-btn-border-color: #dee2e6;
127 | }
128 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/dev.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, useContext, useEffect } from 'react'
 2 | 
 3 | import { sleep } from './tools'
 4 | import { ErrorContext } from './hooks/error'
 5 | import { fireLoadEvent } from './events'
 6 | import { ConfigContext } from './hooks/config'
 7 | 
 8 | let devConnected = false
 9 | 
10 | export const DevReload: FC<{ enabled?: boolean }> = ({ enabled }) => {
11 |   if (typeof enabled === 'undefined') {
12 |     enabled = process.env.NODE_ENV === 'development'
13 |   }
14 | 
15 |   if (enabled) {
16 |     return <DevReloadActive />
17 |   } else {
18 |     return <></>
19 |   }
20 | }
21 | 
22 | const DevReloadActive = () => {
23 |   const { setError } = useContext(ErrorContext)
24 |   const { APIRootUrl } = useContext(ConfigContext)
25 | 
26 |   useEffect(() => {
27 |     let listening = true
28 |     let lastValue = 0
29 | 
30 |     async function listen() {
31 |       let count = 0
32 |       let failCount = 0
33 |       // this avoids connecting twice when vite is reloading
34 |       await sleep(100)
35 |       while (true) {
36 |         if (!listening || failCount >= 5) {
37 |           return count
38 |         }
39 |         const response = await fetch(APIRootUrl + '/__dev__/reload')
40 |         count++
41 |         console.debug(`dev reload connected ${count}...`)
42 |         // if the response is okay, and we previously failed, clear error
43 |         if (response.ok && failCount > 0) {
44 |           setError(null)
45 |         } else if (response.status === 404) {
46 |           console.log('dev reload endpoint not found, disabling dev reload')
47 |           return count
48 |         }
49 |         // await like this means we wait for the entire response to be received
50 |         const text = await response.text()
51 |         if (response.ok && text.startsWith('fastui-dev-reload')) {
52 |           failCount = 0
53 |           const valueMatch = text.match(/(\d+)$/)
54 |           const value = valueMatch ? parseInt(valueMatch[1]!) : 0
55 |           if (value !== lastValue) {
56 |             lastValue = value
57 |             // wait long enough for the server to be back online
58 |             await sleep(300)
59 |             console.debug('dev reloading')
60 |             fireLoadEvent({ reloadValue: value })
61 |             setError(null)
62 |           }
63 |         } else if (response.ok) {
64 |           console.log("dev reload endpoint didn't return magic value, disabling dev reload")
65 |           return count
66 |         } else {
67 |           failCount++
68 |           await sleep(2000)
69 |         }
70 |       }
71 |     }
72 | 
73 |     if (!devConnected) {
74 |       devConnected = true
75 |       listen().then((count) => count > 0 && console.debug('dev reload disconnected.'))
76 |       return () => {
77 |         listening = false
78 |         devConnected = false
79 |       }
80 |     }
81 |   }, [setError, APIRootUrl])
82 |   return <></>
83 | }
84 | 


--------------------------------------------------------------------------------
/demo/tests.py:
--------------------------------------------------------------------------------
 1 | import re
 2 | 
 3 | import pytest
 4 | from dirty_equals import IsList, IsStr
 5 | from fastapi.testclient import TestClient
 6 | 
 7 | from . import app
 8 | 
 9 | 
10 | @pytest.fixture
11 | def client():
12 |     with TestClient(app) as test_client:
13 |         yield test_client
14 | 
15 | 
16 | def test_index(client: TestClient):
17 |     r = client.get('/')
18 |     assert r.status_code == 200, r.text
19 |     assert r.text.startswith('<!doctype html>\n')
20 |     assert r.headers.get('content-type') == 'text/html; charset=utf-8'
21 | 
22 | 
23 | def test_api_root(client: TestClient):
24 |     r = client.get('/api/')
25 |     assert r.status_code == 200
26 |     data = r.json()
27 |     assert data == [
28 |         {
29 |             'text': 'FastUI Demo',
30 |             'type': 'PageTitle',
31 |         },
32 |         {
33 |             'title': 'FastUI Demo',
34 |             'titleEvent': {'url': '/', 'type': 'go-to'},
35 |             'startLinks': IsList(length=4),
36 |             'endLinks': [],
37 |             'type': 'Navbar',
38 |         },
39 |         {
40 |             'components': [
41 |                 {
42 |                     'text': IsStr(regex='This site provides a demo of.*', regex_flags=re.DOTALL),
43 |                     'type': 'Markdown',
44 |                 },
45 |             ],
46 |             'type': 'Page',
47 |         },
48 |         {
49 |             'extraText': 'FastUI Demo',
50 |             'links': IsList(length=3),
51 |             'type': 'Footer',
52 |         },
53 |     ]
54 | 
55 | 
56 | def get_menu_links():
57 |     """
58 |     This is pretty cursory, we just go through the menu and load each page.
59 |     """
60 |     with TestClient(app) as client:
61 |         r = client.get('/api/')
62 |         assert r.status_code == 200
63 |         data = r.json()
64 |         for link in data[1]['startLinks']:
65 |             url = link['onClick']['url']
66 |             yield pytest.param(f'/api{url}', id=url)
67 | 
68 | 
69 | @pytest.mark.parametrize('url', get_menu_links())
70 | def test_menu_links(client: TestClient, url: str):
71 |     r = client.get(url)
72 |     assert r.status_code == 200
73 |     data = r.json()
74 |     assert isinstance(data, list)
75 | 
76 | 
77 | # def test_forms_validate_correct_select_multiple(client: TestClient):
78 | #     countries = client.get('api/forms/search', params={'q': None})
79 | #     countries_options = countries.json()['options']
80 | #     r = client.post(
81 | #         'api/forms/select',
82 | #         data={
83 | #             'select_single': ToolEnum._member_names_[0],
84 | #             'select_multiple': ToolEnum._member_names_[0],
85 | #             'search_select_single': countries_options[0]['options'][0]['value'],
86 | #             'search_select_multiple': countries_options[0]['options'][0]['value'],
87 | #         },
88 | #     )
89 | #     assert r.status_code == 200
90 | 
91 | 
92 | # TODO tests for forms, including submission
93 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/src/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import { FC } from 'react'
  2 | import { components, models, renderClassName } from 'fastui'
  3 | 
  4 | interface Link {
  5 |   Display: FC
  6 |   ariaLabel?: string
  7 |   locked?: boolean
  8 |   active?: boolean
  9 |   page?: number
 10 |   pageQueryParam?: string
 11 | }
 12 | 
 13 | export const Pagination: FC<models.Pagination> = (props) => {
 14 |   const { page, pageCount, pageQueryParam } = props
 15 |   if (pageCount === 1) return null
 16 | 
 17 |   const links: Link[] = [
 18 |     {
 19 |       Display: () => <span aria-hidden="true">&laquo;</span>,
 20 |       ariaLabel: 'Previous',
 21 |       locked: page === 1,
 22 |       page: page - 1,
 23 |       pageQueryParam,
 24 |     },
 25 |     {
 26 |       Display: () => <>1</>,
 27 |       locked: page === 1,
 28 |       active: page === 1,
 29 |       page: 1,
 30 |       pageQueryParam,
 31 |     },
 32 |   ]
 33 | 
 34 |   if (page > 4) {
 35 |     links.push({ Display: () => <>...</>, pageQueryParam })
 36 |   }
 37 | 
 38 |   for (let p = page - 2; p <= page + 2; p++) {
 39 |     if (p <= 1 || p >= pageCount) continue
 40 |     links.push({
 41 |       Display: () => <>{p}</>,
 42 |       locked: page === p,
 43 |       active: page === p,
 44 |       page: p,
 45 |       pageQueryParam,
 46 |     })
 47 |   }
 48 | 
 49 |   if (page < pageCount - 3) {
 50 |     links.push({ Display: () => <>...</>, pageQueryParam })
 51 |   }
 52 | 
 53 |   links.push({
 54 |     Display: () => <>{pageCount}</>,
 55 |     locked: page === pageCount,
 56 |     page: pageCount,
 57 |     pageQueryParam,
 58 |   })
 59 | 
 60 |   links.push({
 61 |     Display: () => <span aria-hidden="true">&raquo;</span>,
 62 |     ariaLabel: 'Next',
 63 |     locked: page === pageCount,
 64 |     page: page + 1,
 65 |     pageQueryParam,
 66 |   })
 67 | 
 68 |   return (
 69 |     <nav aria-label="Pagination">
 70 |       <ul className="pagination justify-content-center">
 71 |         {links.map((link, i) => (
 72 |           <PaginationLink key={i} {...link} />
 73 |         ))}
 74 |       </ul>
 75 |     </nav>
 76 |   )
 77 | }
 78 | 
 79 | const PaginationLink: FC<Link> = ({ Display, ariaLabel, locked, active, page, pageQueryParam }) => {
 80 |   if (!page) {
 81 |     return (
 82 |       <li className="page-item">
 83 |         <span className="page-link px-2 text-muted">
 84 |           <Display />
 85 |         </span>
 86 |       </li>
 87 |     )
 88 |   }
 89 |   const className = renderClassName({ 'page-link': true, disabled: locked && !active, active } as models.ClassName)
 90 |   const onClick: models.GoToEvent = {
 91 |     type: 'go-to',
 92 |     query: { [pageQueryParam !== undefined ? pageQueryParam : 'page']: page },
 93 |   }
 94 |   return (
 95 |     <li className="page-item">
 96 |       <components.LinkRender onClick={onClick} className={className} locked={locked || active} ariaLabel={ariaLabel}>
 97 |         <Display />
 98 |       </components.LinkRender>
 99 |     </li>
100 |   )
101 | }
102 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/MarkdownLazy.tsx:
--------------------------------------------------------------------------------
  1 | import { FC, MouseEventHandler, ReactNode } from 'react'
  2 | import ReactMarkdown, { Components } from 'react-markdown'
  3 | import remarkGfm from 'remark-gfm'
  4 | 
  5 | import type { Markdown, Code, AnyEvent } from '../models'
  6 | 
  7 | import { useClassName } from '../hooks/className'
  8 | import { useFireEvent } from '../events'
  9 | import { useCustomRender } from '../hooks/config'
 10 | 
 11 | import { CodeComp } from './Code'
 12 | 
 13 | const MarkdownComp: FC<Markdown> = (props) => {
 14 |   const { text, codeStyle } = props
 15 |   const components: Components = {
 16 |     a({ children, href }) {
 17 |       return <MarkdownA href={href}>{children}</MarkdownA>
 18 |     },
 19 |     code({ children, className }) {
 20 |       return (
 21 |         <MarkdownCode className={className} codeStyle={codeStyle}>
 22 |           {children}
 23 |         </MarkdownCode>
 24 |       )
 25 |     },
 26 |   }
 27 | 
 28 |   return (
 29 |     <ReactMarkdown
 30 |       className={useClassName(props, { dft: 'fastui-markdown' })}
 31 |       remarkPlugins={[remarkGfm]}
 32 |       components={components}
 33 |     >
 34 |       {text}
 35 |     </ReactMarkdown>
 36 |   )
 37 | }
 38 | 
 39 | export default MarkdownComp
 40 | 
 41 | const MarkdownA: FC<{ children: ReactNode; href?: string }> = ({ children, href }) => {
 42 |   const { fireEvent } = useFireEvent()
 43 | 
 44 |   let onClick: AnyEvent | undefined
 45 |   let preventDefault = true
 46 |   if (!href) {
 47 |     href = '#'
 48 |   } else if (href === '!back') {
 49 |     href = '#'
 50 |     onClick = { type: 'back' }
 51 |   } else if (href.startsWith('!')) {
 52 |     onClick = { type: 'page', name: href.slice(1) }
 53 |     href = '#'
 54 |   } else if (href.startsWith('#')) {
 55 |     preventDefault = href.length === 1
 56 |   } else {
 57 |     onClick = { type: 'go-to', url: href }
 58 |   }
 59 | 
 60 |   const clickHandler: MouseEventHandler<HTMLAnchorElement> = (e) => {
 61 |     if (preventDefault) {
 62 |       e.preventDefault()
 63 |       fireEvent(onClick)
 64 |     }
 65 |   }
 66 | 
 67 |   return (
 68 |     <a href={href} onClick={clickHandler}>
 69 |       {children}
 70 |     </a>
 71 |   )
 72 | }
 73 | 
 74 | interface MarkdownCodeProps {
 75 |   children: ReactNode
 76 |   className?: string
 77 |   codeStyle?: string
 78 | }
 79 | 
 80 | const MarkdownCode: FC<MarkdownCodeProps> = ({ children, className, codeStyle }) => {
 81 |   const match = /language-(\w+)/.exec(className || '')
 82 |   if (match) {
 83 |     return (
 84 |       <MarkdownCodeHighlight codeStyle={codeStyle} language={match[1]}>
 85 |         {children}
 86 |       </MarkdownCodeHighlight>
 87 |     )
 88 |   } else {
 89 |     return <code className={className}>{children}</code>
 90 |   }
 91 | }
 92 | 
 93 | interface MarkdownCodeHighlightProps {
 94 |   children: ReactNode
 95 |   language?: string
 96 |   codeStyle?: string
 97 | }
 98 | 
 99 | const MarkdownCodeHighlight: FC<MarkdownCodeHighlightProps> = ({ children, codeStyle, language }) => {
100 |   const codeProps: Code = {
101 |     type: 'Code',
102 |     text: String(children).replace(/\n$/, ''),
103 |     language,
104 |     codeStyle,
105 |   }
106 |   const CustomRenderComp = useCustomRender(codeProps)
107 |   if (CustomRenderComp) {
108 |     return <CustomRenderComp />
109 |   } else {
110 |     return <CodeComp {...codeProps} />
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/types.py:
--------------------------------------------------------------------------------
 1 | import typing as _t
 2 | 
 3 | import pydantic
 4 | import typing_extensions as _te
 5 | from pydantic.json_schema import CoreRef, GenerateJsonSchema, JsonRef
 6 | from pydantic_core import core_schema
 7 | 
 8 | IS_PYDANTIC_211_OR_GREATER = tuple(int(v) for v in pydantic.VERSION.split('.')[:2]) >= (2, 11)
 9 | 
10 | 
11 | # TODO: replace with https://docs.pydantic.dev/dev/api/types/#pydantic.types.JsonValue, maybe?
12 | class JsonDataSchema:
13 |     @staticmethod
14 |     def __get_pydantic_json_schema__(
15 |         _core_schema: core_schema.CoreSchema, handler: pydantic.GetJsonSchemaHandler
16 |     ) -> _t.Any:
17 |         json_data_schema = core_schema.union_schema(
18 |             [
19 |                 core_schema.str_schema(),
20 |                 core_schema.float_schema(),
21 |                 core_schema.bool_schema(),
22 |                 core_schema.none_schema(),
23 |                 core_schema.list_schema(core_schema.definition_reference_schema('JsonData')),
24 |                 core_schema.dict_schema(core_schema.str_schema(), core_schema.definition_reference_schema('JsonData')),
25 |             ],
26 |             ref='JsonData',
27 |         )
28 |         rv = handler(json_data_schema)
29 |         if IS_PYDANTIC_211_OR_GREATER:
30 |             # Terrible hack. This is mimicking `GenerateJsonSchema.generate_inner.<locals>.populate_defs()`,
31 |             # which used to be called in some place until 2.11, where the call was removed by
32 |             # https://github.com/pydantic/pydantic/pull/11475.
33 |             # The approach taken by this `JsonDataSchema` annotation (manually setting references) isn't viable,
34 |             # but Pydantic is missing proper semantics on the behavior of core schema references
35 |             gen_js_schema = _t.cast(GenerateJsonSchema, handler.generate_json_schema)  # type: ignore
36 |             defs_ref, ref_json_schema = gen_js_schema.get_cache_defs_ref_schema(CoreRef('JsonData'))
37 |             json_ref = JsonRef(ref_json_schema['$ref'])
38 |             if rv.get('$ref', None) != json_ref:
39 |                 gen_js_schema.definitions[defs_ref] = rv
40 |             rv = ref_json_schema
41 |         return rv
42 | 
43 | 
44 | JsonData = _te.Annotated[_t.Any, JsonDataSchema()]
45 | 
46 | 
47 | class PydanticModelSchema:
48 |     @staticmethod
49 |     def __get_pydantic_json_schema__(
50 |         _core_schema: core_schema.CoreSchema, handler: pydantic.GetJsonSchemaHandler
51 |     ) -> _t.Any:
52 |         model_json_schema = core_schema.dict_schema(
53 |             core_schema.str_schema(),
54 |             core_schema.definition_reference_schema('JsonData'),
55 |             ref='DataModel',
56 |         )
57 |         rv = handler(model_json_schema)
58 |         if IS_PYDANTIC_211_OR_GREATER:
59 |             # Terrible hack. This is mimicking `GenerateJsonSchema.generate_inner.<locals>.populate_defs()`,
60 |             # which used to be called in some place until 2.11, where the call was removed by
61 |             # https://github.com/pydantic/pydantic/pull/11475.
62 |             # The approach taken by this `PydanticModelSchema` annotation (manually setting references) isn't viable,
63 |             # but Pydantic is missing proper semantics on the behavior of core schema references
64 |             gen_js_schema = _t.cast(GenerateJsonSchema, handler.generate_json_schema)  # type: ignore
65 |             defs_ref, ref_json_schema = gen_js_schema.get_cache_defs_ref_schema(CoreRef('DataModel'))
66 |             json_ref = JsonRef(ref_json_schema['$ref'])
67 |             if rv.get('$ref', None) != json_ref:
68 |                 gen_js_schema.definitions[defs_ref] = rv
69 |             rv = ref_json_schema
70 |         return rv
71 | 
72 | 
73 | DataModel = _te.Annotated[pydantic.BaseModel, PydanticModelSchema()]
74 | DataModelGeneric = _t.TypeVar('DataModelGeneric', bound=DataModel)
75 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/components/tables.py:
--------------------------------------------------------------------------------
 1 | import typing as _t
 2 | 
 3 | import pydantic
 4 | import typing_extensions as _te
 5 | from pydantic_core import core_schema as _core_schema
 6 | 
 7 | from .. import class_name as _class_name
 8 | from .. import types as _types
 9 | from ..base import BaseModel
10 | from . import display
11 | 
12 | # TODO allow dataclasses and typed dicts here too
13 | 
14 | 
15 | # In Python 3.14, when evaluating the annotation of field `data_model`, `type` would refer
16 | # to the assigned value to the field `type` (of value `'Table'`):
17 | type_ = type
18 | 
19 | 
20 | class Table(BaseModel, extra='forbid'):
21 |     """Table component."""
22 | 
23 |     data: _t.Sequence[pydantic.SerializeAsAny[_types.DataModel]]
24 |     """Sequence of data models to display in the table."""
25 | 
26 |     columns: list[display.DisplayLookup] | None = None
27 |     """List of columns to display in the table. If not provided, columns will be inferred from the data model."""
28 | 
29 |     data_model: type_[pydantic.BaseModel] | None = pydantic.Field(default=None, exclude=True)
30 |     """Data model to use for the table. If not provided, the model will be inferred from the first data item."""
31 | 
32 |     no_data_message: str | None = None
33 |     """Message to display when there is no data."""
34 | 
35 |     class_name: _class_name.ClassNameField = None
36 |     """Optional class name to apply to the paragraph's HTML component."""
37 | 
38 |     type: _t.Literal['Table'] = 'Table'
39 |     """The type of the component. Always 'Table'."""
40 | 
41 |     @pydantic.model_validator(mode='after')
42 |     def _fill_columns(self) -> _te.Self:
43 |         if self.data_model:
44 |             data_model_type = self.data_model
45 |         else:
46 |             try:
47 |                 data_model_type = type(self.data[0])
48 |             except IndexError:
49 |                 raise ValueError('Cannot infer model from empty data, please set `Table(..., model=MyModel)`')
50 | 
51 |         all_model_fields = {**data_model_type.model_fields, **data_model_type.model_computed_fields}
52 |         if self.columns is None:
53 |             self.columns = [
54 |                 display.DisplayLookup(field=name, title=field.title) for name, field in all_model_fields.items()
55 |             ]
56 |         else:
57 |             # add pydantic titles to columns that don't have them
58 |             for column in (c for c in self.columns if c.title is None):
59 |                 field = all_model_fields.get(column.field)
60 |                 if field and field.title:
61 |                     column.title = field.title
62 |         return self
63 | 
64 |     @classmethod
65 |     def __get_pydantic_json_schema__(
66 |         cls, core_schema: _core_schema.CoreSchema, handler: pydantic.GetJsonSchemaHandler
67 |     ) -> _t.Any:
68 |         json_schema = handler(core_schema)
69 |         schema_def = handler.resolve_ref_schema(json_schema)
70 |         # columns are filled by `_fill_columns`
71 |         schema_def['required'].append('columns')
72 |         return json_schema
73 | 
74 | 
75 | class Pagination(BaseModel):
76 |     """Pagination component to use with tables."""
77 | 
78 |     page: int
79 |     """The current page number."""
80 | 
81 |     page_size: int
82 |     """The number of items per page."""
83 | 
84 |     total: int
85 |     """The total number of items."""
86 | 
87 |     page_query_param: str = 'page'
88 |     """The query parameter to use for the page number."""
89 | 
90 |     class_name: _class_name.ClassNameField = None
91 |     """Optional class name to apply to the pagination's HTML component."""
92 | 
93 |     type: _t.Literal['Pagination'] = 'Pagination'
94 |     """The type of the component. Always 'Pagination'."""
95 | 
96 |     @pydantic.computed_field(alias='pageCount')
97 |     def page_count(self) -> int:
98 |         return (self.total - 1) // self.page_size + 1
99 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/components/display.py:
--------------------------------------------------------------------------------
  1 | import enum
  2 | import typing as _t
  3 | from abc import ABC
  4 | 
  5 | import annotated_types as _at
  6 | import pydantic
  7 | import typing_extensions as _te
  8 | from pydantic_core import core_schema as _core_schema
  9 | 
 10 | from .. import class_name as _class_name
 11 | from .. import events
 12 | from .. import types as _types
 13 | from ..base import BaseModel
 14 | 
 15 | __all__ = 'DisplayMode', 'DisplayLookup', 'Display', 'Details'
 16 | 
 17 | 
 18 | class DisplayMode(str, enum.Enum):
 19 |     """Display mode for a value."""
 20 | 
 21 |     auto = 'auto'  # default, same as None below
 22 |     plain = 'plain'
 23 |     datetime = 'datetime'
 24 |     date = 'date'
 25 |     duration = 'duration'
 26 |     as_title = 'as_title'
 27 |     markdown = 'markdown'
 28 |     json = 'json'
 29 |     inline_code = 'inline_code'
 30 |     currency = 'currency'
 31 | 
 32 | 
 33 | class DisplayBase(BaseModel, ABC):
 34 |     """Base class for display components."""
 35 | 
 36 |     mode: DisplayMode | None = None
 37 |     """Display mode for the value."""
 38 | 
 39 |     title: str | None = None
 40 |     """Title to display for the value."""
 41 | 
 42 |     on_click: events.AnyEvent | None = None
 43 |     """Event to trigger when the value is clicked."""
 44 | 
 45 | 
 46 | class DisplayLookup(DisplayBase, extra='forbid'):
 47 |     """Description of how to display a value looked up from data, either in a table or detail view."""
 48 | 
 49 |     field: str
 50 |     """Field to display."""
 51 | 
 52 |     table_width_percent: _te.Annotated[int, _at.Interval(ge=0, le=100)] | None = None
 53 |     """Percentage width - 0 to 100, specific to tables."""
 54 | 
 55 | 
 56 | class Display(DisplayBase, extra='forbid'):
 57 |     """Description of how to display a value, either in a table or detail view."""
 58 | 
 59 |     value: _types.JsonData
 60 |     """Value to display."""
 61 | 
 62 |     type: _t.Literal['Display'] = 'Display'
 63 |     """The type of the component. Always 'Display'."""
 64 | 
 65 | 
 66 | class Details(BaseModel, extra='forbid'):
 67 |     """Details associated with displaying a data model."""
 68 | 
 69 |     data: pydantic.SerializeAsAny[_types.DataModel]
 70 |     """Data model to display."""
 71 | 
 72 |     fields: list[DisplayLookup | Display] | None = None
 73 |     """Fields to display."""
 74 | 
 75 |     class_name: _class_name.ClassNameField = None
 76 |     """Optional class name to apply to the details component."""
 77 | 
 78 |     type: _t.Literal['Details'] = 'Details'
 79 |     """The type of the component. Always 'Details'."""
 80 | 
 81 |     @pydantic.model_validator(mode='after')
 82 |     def _fill_fields(self) -> _te.Self:
 83 |         fields = {**type(self.data).model_fields, **type(self.data).model_computed_fields}
 84 | 
 85 |         if self.fields is None:
 86 |             self.fields = [DisplayLookup(field=name, title=field.title) for name, field in fields.items()]
 87 |         else:
 88 |             # add pydantic titles to fields that don't have them
 89 |             for field in (c for c in self.fields if c.title is None):
 90 |                 if isinstance(field, DisplayLookup):
 91 |                     pydantic_field = type(self.data).model_fields.get(field.field)
 92 |                     if pydantic_field and pydantic_field.title:
 93 |                         field.title = pydantic_field.title
 94 |                 elif isinstance(field, Display):
 95 |                     field.title = field.title
 96 |         return self
 97 | 
 98 |     @classmethod
 99 |     def __get_pydantic_json_schema__(
100 |         cls, core_schema: _core_schema.CoreSchema, handler: pydantic.GetJsonSchemaHandler
101 |     ) -> _t.Any:
102 |         json_schema = handler(core_schema)
103 |         schema_def = handler.resolve_ref_schema(json_schema)
104 |         schema_def['required'].append('fields')
105 |         return json_schema
106 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/events.ts:
--------------------------------------------------------------------------------
  1 | import { useContext, useState, useEffect, useCallback } from 'react'
  2 | 
  3 | import type { PageEvent, AnyEvent } from './models'
  4 | 
  5 | import { LocationContext } from './hooks/locationContext'
  6 | import { ContextType } from './hooks/eventContext'
  7 | import { AUTH_TOKEN_KEY } from './tools'
  8 | 
  9 | export interface PageEventDetail {
 10 |   clear: boolean
 11 |   context?: ContextType
 12 | }
 13 | 
 14 | function pageEventType(event: PageEvent): string {
 15 |   return `fastui:${event.name}`
 16 | }
 17 | 
 18 | export function useFireEvent(): { fireEvent: (event?: AnyEvent) => void } {
 19 |   const location = useContext(LocationContext)
 20 | 
 21 |   function fireEventImpl(event?: AnyEvent) {
 22 |     if (!event) {
 23 |       return
 24 |     }
 25 |     console.debug('firing event', event)
 26 |     const { type } = event
 27 |     switch (type) {
 28 |       case 'page': {
 29 |         if (event.pushPath) {
 30 |           location.gotoCosmetic(event.pushPath)
 31 |         }
 32 |         const detail: PageEventDetail = { clear: event.clear || false, context: event.context }
 33 |         document.dispatchEvent(new CustomEvent(pageEventType(event), { detail }))
 34 |         if (event.nextEvent) {
 35 |           fireEventImpl(event.nextEvent)
 36 |         }
 37 |         break
 38 |       }
 39 |       case 'go-to':
 40 |         if (event.url) {
 41 |           if (event.target) {
 42 |             window.open(event.url, event.target)
 43 |           } else {
 44 |             location.goto(event.url)
 45 |           }
 46 |         }
 47 |         if (event.query) {
 48 |           location.setQuery(event.query)
 49 |         }
 50 |         break
 51 |       case 'auth':
 52 |         if (event.token) {
 53 |           localStorage.setItem(AUTH_TOKEN_KEY, event.token)
 54 |         } else {
 55 |           localStorage.removeItem(AUTH_TOKEN_KEY)
 56 |         }
 57 |         if (event.url) {
 58 |           location.goto(event.url)
 59 |         }
 60 |         break
 61 |       case 'back':
 62 |         location.back()
 63 |         break
 64 |     }
 65 |   }
 66 | 
 67 |   // fireEventImpl is recursive, but it doesn't make sense for fireEvent to have fireEventImpl as a dep
 68 |   // eslint-disable-next-line react-hooks/exhaustive-deps
 69 |   const fireEvent = useCallback(fireEventImpl, [location])
 70 | 
 71 |   return { fireEvent }
 72 | }
 73 | 
 74 | export const loadEvent = 'fastui:load'
 75 | 
 76 | export interface LoadEventDetail {
 77 |   path?: string
 78 |   reloadValue?: number
 79 | }
 80 | 
 81 | export function fireLoadEvent(detail: LoadEventDetail) {
 82 |   document.dispatchEvent(new CustomEvent(loadEvent, { detail }))
 83 | }
 84 | 
 85 | interface EventDetails {
 86 |   eventContext: ContextType | null
 87 |   fireId: string | null
 88 |   clear: () => void
 89 | }
 90 | 
 91 | export function usePageEventListen(event?: PageEvent, initialContext: ContextType | null = null): EventDetails {
 92 |   const [eventContext, setEventContext] = useState<ContextType | null>(initialContext)
 93 |   const [fireId, setFireId] = useState<string | null>(null)
 94 | 
 95 |   const eventType = event && pageEventType(event)
 96 | 
 97 |   useEffect(() => {
 98 |     if (!eventType) {
 99 |       setEventContext(null)
100 |       setFireId(null)
101 |       return
102 |     }
103 | 
104 |     const onEvent = (e: Event) => {
105 |       const event = e as CustomEvent<PageEventDetail>
106 |       const { context, clear } = event.detail
107 |       if (clear) {
108 |         setEventContext(null)
109 |         setFireId(null)
110 |       } else {
111 |         setEventContext(context || {})
112 |         setFireId(`${event.type}:${event.timeStamp}`)
113 |       }
114 |     }
115 | 
116 |     document.addEventListener(eventType, onEvent)
117 |     return () => document.removeEventListener(eventType, onEvent)
118 |   }, [eventType])
119 | 
120 |   return {
121 |     eventContext,
122 |     fireId,
123 |     clear: useCallback(() => {
124 |       setEventContext(null)
125 |       setFireId(null)
126 |     }, []),
127 |   }
128 | }
129 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/hooks/className.ts:
--------------------------------------------------------------------------------
  1 | import { createContext, useContext } from 'react'
  2 | 
  3 | import type { FastClassNameProps } from '../components'
  4 | import type { ClassName } from '../models'
  5 | 
  6 | import { LocationContext } from './locationContext'
  7 | 
  8 | interface ClassNameGeneratorArgs {
  9 |   props: FastClassNameProps
 10 |   fullPath: string
 11 |   subElement?: string
 12 | }
 13 | 
 14 | export type ClassNameGenerator = (args: ClassNameGeneratorArgs) => ClassName | undefined
 15 | export const ClassNameContext = createContext<ClassNameGenerator | null>(null)
 16 | 
 17 | interface UseClassNameExtra {
 18 |   // default className to use if the class name generator is not set or returns undefined.
 19 |   dft?: ClassName
 20 |   // identifier of the element within the component to generate the class name for.
 21 |   el?: string
 22 | }
 23 | 
 24 | /**
 25 |  * Generates a `className` from `props`, `classNameGenerator` or the default value.
 26 |  *
 27 |  * @param props The full props object sent from the backend, this is passed to the class name generator.
 28 |  * @param extra dft class name or sub-element
 29 |  */
 30 | export function useClassName(props: FastClassNameProps, extra?: UseClassNameExtra): string | undefined {
 31 |   const classNameGenerator = useContext(ClassNameContext)
 32 |   const { fullPath } = useContext(LocationContext)
 33 |   let { dft, el } = extra || {}
 34 |   const genArgs: ClassNameGeneratorArgs = { props, fullPath, subElement: el }
 35 | 
 36 |   if (el) {
 37 |     // if getting the class for a sub-element, we don't care about `props.ClassName`
 38 |     if (classNameGenerator) {
 39 |       const generated = classNameGenerator(genArgs)
 40 |       if (generated) {
 41 |         return renderClassName(classNameGenerator(genArgs))
 42 |       }
 43 |     }
 44 |     return renderClassName(dft)
 45 |   } else {
 46 |     const { className } = props
 47 |     if (combineClassNameProp(className)) {
 48 |       if (classNameGenerator) {
 49 |         dft = classNameGenerator(genArgs) || dft
 50 |       }
 51 |       return combine(dft, className)
 52 |     } else {
 53 |       return renderClassName(className)
 54 |     }
 55 |   }
 56 | }
 57 | 
 58 | /**
 59 |  * Decide whether we should generate combine the props class name with the generated or default, or not.
 60 |  *
 61 |  * e.g. if the ClassName contains a `+` if it's an Array or Record, or starts with `+ `
 62 |  * then we generate the default className and append the user's className to it.
 63 |  * @param classNameProp
 64 |  */
 65 | function combineClassNameProp(classNameProp?: ClassName): boolean {
 66 |   if (Array.isArray(classNameProp)) {
 67 |     // classNameProp is an array, check if it contains `+`
 68 |     return classNameProp.some((c) => c === '+')
 69 |   } else if (typeof classNameProp === 'string') {
 70 |     // classNameProp is a string, check if it starts with `+ `
 71 |     return /^\+ /.test(classNameProp)
 72 |   } else if (typeof classNameProp === 'object') {
 73 |     // classNameProp is an object, check if its keys contain `+`
 74 |     return Object.keys(classNameProp).some((key) => key === '+')
 75 |   } else {
 76 |     // classNameProp is undefined, return true as we want to generate the default className
 77 |     return true
 78 |   }
 79 | }
 80 | 
 81 | function combine(cn1?: ClassName, cn2?: ClassName): string {
 82 |   if (!cn1) {
 83 |     return renderClassName(cn2)
 84 |   } else if (!cn2) {
 85 |     return renderClassName(cn1)
 86 |   } else {
 87 |     return renderClassName(cn1) + ' ' + renderClassName(cn2)
 88 |   }
 89 | }
 90 | 
 91 | /**
 92 |  * Renders the className to a string, removing plus signs.
 93 |  * @param className
 94 |  */
 95 | export function renderClassName(className?: ClassName): string {
 96 |   if (typeof className === 'string') {
 97 |     return className.replace(/^\+ /, '')
 98 |   } else if (Array.isArray(className)) {
 99 |     return className
100 |       .filter((c) => c !== '+')
101 |       .map(renderClassName)
102 |       .join(' ')
103 |   } else if (typeof className === 'object') {
104 |     return Object.entries(className)
105 |       .filter(([key, value]) => key !== '+' && !!value)
106 |       .map(([key]) => key)
107 |       .join(' ')
108 |   } else {
109 |     return ''
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
  1 | name: CI
  2 | 
  3 | on:
  4 |   push:
  5 |     branches:
  6 |       - main
  7 |     tags:
  8 |       - '**'
  9 |   pull_request:
 10 |     types: [opened, synchronize]
 11 | 
 12 | jobs:
 13 |   lint:
 14 |     runs-on: ubuntu-latest
 15 | 
 16 |     steps:
 17 |       - uses: actions/checkout@v4
 18 | 
 19 |       - uses: actions/setup-python@v5
 20 |         with:
 21 |           python-version: '3.11'
 22 | 
 23 |       - uses: actions/setup-node@v4
 24 |         with:
 25 |           node-version: 18
 26 | 
 27 |       - run: pip install -r src/python-fastui/requirements/all.txt
 28 |       - run: pip install src/python-fastui
 29 | 
 30 |       - run: npm install
 31 | 
 32 |       - uses: pre-commit/action@v3.0.1
 33 |         with:
 34 |           extra_args: --all-files
 35 |         env:
 36 |           SKIP: no-commit-to-branch
 37 | 
 38 |   docs-build:
 39 |     runs-on: ubuntu-latest
 40 | 
 41 |     steps:
 42 |       - uses: actions/checkout@v4
 43 | 
 44 |       - uses: actions/setup-python@v5
 45 |         with:
 46 |           python-version: '3.11'
 47 | 
 48 |       # note: PPPR_TOKEN is not available on PRs sourced from forks, but the necessary
 49 |       # dependencies are also listed in docs.txt :)
 50 |       - name: install
 51 |         run: |
 52 |           pip install --upgrade pip
 53 |           pip install --extra-index-url https://pydantic:${PPPR_TOKEN}@pppr.pydantic.dev/simple/ mkdocs-material mkdocstrings-python
 54 |           pip install -r requirements/docs.txt
 55 |         # note -- we can use these in the future when mkdocstrings-typescript and griffe-typedoc beocome publicly available
 56 |         # pip install --extra-index-url https://pydantic:${PPPR_TOKEN}@pppr.pydantic.dev/simple/ mkdocs-material mkdocstrings-python griffe-typedoc mkdocstrings-typescript
 57 |         # npm install
 58 |         # npm install -g typedoc
 59 |         env:
 60 |           PPPR_TOKEN: ${{ secrets.PPPR_TOKEN }}
 61 | 
 62 |       - name: build site
 63 |         run: mkdocs build --strict
 64 | 
 65 |   test:
 66 |     name: test ${{ matrix.python-version }} on ${{ matrix.os }}
 67 |     strategy:
 68 |       fail-fast: false
 69 |       matrix:
 70 |         os: [ubuntu-latest, macos-15-intel, macos-latest]
 71 |         python-version: ['3.10', '3.11', '3.12', '3.13', '3.14']
 72 |         exclude:
 73 |           - os: macos-15-intel
 74 |             python-version: '3.10'
 75 |           - os: macos-15-intel
 76 |             python-version: '3.11'
 77 |           - os: macos-15-intel
 78 |             python-version: '3.12'
 79 |           - os: macos-latest
 80 |             python-version: '3.13'
 81 | 
 82 |     runs-on: ${{ matrix.os }}
 83 | 
 84 |     env:
 85 |       PYTHON: ${{ matrix.python-version }}
 86 |       OS: ${{ matrix.os }}
 87 | 
 88 |     steps:
 89 |       - uses: actions/checkout@v4
 90 | 
 91 |       - name: set up python
 92 |         uses: actions/setup-python@v5
 93 |         with:
 94 |           python-version: ${{ matrix.python-version }}
 95 | 
 96 |       - run: pip install -r src/python-fastui/requirements/test.txt
 97 |       - run: pip install -r src/python-fastui/requirements/pyproject.txt
 98 |       - run: pip install -e src/python-fastui
 99 | 
100 |       - run: coverage run -m pytest src
101 |       # display coverage and fail if it's below 80%, which shouldn't happen
102 |       - run: coverage report --fail-under=80
103 | 
104 |       # test demo on 3.11 and 3.12, these tests are intentionally omitted from coverage
105 |       - if: matrix.python-version == '3.11' || matrix.python-version == '3.12'
106 |         run: pytest demo/tests.py
107 | 
108 |       - run: coverage xml
109 | 
110 |       - uses: codecov/codecov-action@v5
111 |         with:
112 |           file: ./coverage.xml
113 |           env_vars: PYTHON,OS
114 | 
115 |   npm-build:
116 |     runs-on: ubuntu-latest
117 | 
118 |     steps:
119 |       - uses: actions/checkout@v4
120 | 
121 |       - uses: actions/setup-node@v4
122 |         with:
123 |           node-version: 18
124 | 
125 |       - run: npm install
126 |       - run: npm run build
127 |       - run: tree src
128 | 
129 |   check: # This job does nothing and is only used for the branch protection
130 |     if: always()
131 |     needs: [lint, test, npm-build]
132 |     runs-on: ubuntu-latest
133 | 
134 |     steps:
135 |       - name: Decide whether the needed jobs succeeded or failed
136 |         uses: re-actors/alls-green@release/v1
137 |         id: all-green
138 |         with:
139 |           jobs: ${{ toJSON(needs) }}
140 | 
141 |   release:
142 |     needs: [check]
143 |     if: "success() && startsWith(github.ref, 'refs/tags/')"
144 |     runs-on: ubuntu-latest
145 |     environment: release
146 | 
147 |     permissions:
148 |       id-token: write
149 | 
150 |     steps:
151 |       - uses: actions/checkout@v4
152 | 
153 |       - uses: actions/setup-python@v5
154 |         with:
155 |           python-version: '3.11'
156 | 
157 |       - run: pip install -U build
158 | 
159 |       - id: check-version
160 |         uses: samuelcolvin/check-python-version@v4.1
161 |         with:
162 |           version_file_path: 'src/python-fastui/fastui/__init__.py'
163 | 
164 |       - run: python -m build --outdir dist src/python-fastui
165 | 
166 |       - run: ls -lh dist
167 | 
168 |       - uses: pypa/gh-action-pypi-publish@release/v1
169 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/hooks/locationContext.tsx:
--------------------------------------------------------------------------------
  1 | import { createContext, ReactNode, useEffect, useState, useCallback, useContext } from 'react'
  2 | 
  3 | import { fireLoadEvent } from '../events'
  4 | 
  5 | import { ErrorContext } from './error'
  6 | 
  7 | function parseLocation(): string {
  8 |   const { href, origin } = window.location
  9 |   // remove origin from the beginning of href
 10 |   return href.slice(origin.length)
 11 | }
 12 | 
 13 | export interface LocationState {
 14 |   fullPath: string
 15 |   goto: (pushPath: string) => void
 16 |   computeQuery: (queryUpdate: Record<string, string | number | null>) => string
 17 |   setQuery: (queryUpdate: Record<string, string | number | null>) => void
 18 |   // like `goto`, but does not fire `fireLoadEvent`
 19 |   gotoCosmetic: (pushPath: string) => void
 20 |   back: () => void
 21 | }
 22 | 
 23 | const initialPath = parseLocation()
 24 | 
 25 | const initialState = {
 26 |   fullPath: initialPath,
 27 |   goto: () => null,
 28 |   computeQuery: () => '',
 29 |   setQuery: () => null,
 30 |   gotoCosmetic: () => null,
 31 |   back: () => null,
 32 | }
 33 | 
 34 | export const LocationContext = createContext<LocationState>(initialState)
 35 | 
 36 | export function LocationProvider({ children }: { children: ReactNode }) {
 37 |   const [fullPath, setFullPath] = useState(initialPath)
 38 |   const { setError } = useContext(ErrorContext)
 39 | 
 40 |   const onPopState = useCallback(() => {
 41 |     const fullPath = parseLocation()
 42 |     setError(null)
 43 |     setFullPath(fullPath)
 44 |     fireLoadEvent({ path: fullPath })
 45 |   }, [setError, setFullPath])
 46 | 
 47 |   useEffect(() => {
 48 |     window.addEventListener('popstate', onPopState)
 49 |     return () => {
 50 |       window.removeEventListener('popstate', onPopState)
 51 |     }
 52 |   }, [onPopState])
 53 | 
 54 |   const pushPath = useCallback(
 55 |     (newPath: string): string => {
 56 |       if (newPath === '.' || newPath === '') {
 57 |         newPath = stripQuery(fullPath)
 58 |       } else if (!newPath.startsWith('/')) {
 59 |         // get rid of `.` and `./` at the beginning of the path
 60 |         if (newPath.startsWith('.')) {
 61 |           newPath = newPath.slice(1)
 62 |           if (newPath.startsWith('/')) {
 63 |             newPath = newPath.slice(1)
 64 |           }
 65 |         }
 66 | 
 67 |         const oldPath = stripQuery(fullPath)
 68 |         // we're now sure newPath does not start with a `/`
 69 |         if (oldPath.endsWith('/') || newPath.startsWith('?')) {
 70 |           newPath = oldPath + newPath
 71 |         } else {
 72 |           newPath = oldPath + '/' + newPath
 73 |         }
 74 |       }
 75 | 
 76 |       window.history.pushState(null, '', newPath)
 77 |       setError(null)
 78 |       setFullPath(newPath)
 79 |       return newPath
 80 |     },
 81 |     [setError, fullPath],
 82 |   )
 83 |   const computeQuery = useCallback(
 84 |     (queryUpdate: Record<string, string | number | null>): string => {
 85 |       const query = getQuery(fullPath)
 86 |       for (const [key, value] of Object.entries(queryUpdate)) {
 87 |         if (value === null) {
 88 |           query.delete(key)
 89 |         } else {
 90 |           query.set(key, value.toString())
 91 |         }
 92 |       }
 93 |       const queryString = query.toString()
 94 |       if (queryString !== '') {
 95 |         return '?' + queryString
 96 |       } else {
 97 |         return ''
 98 |       }
 99 |     },
100 |     [fullPath],
101 |   )
102 | 
103 |   const value: LocationState = {
104 |     fullPath,
105 |     goto: useCallback(
106 |       (newPath) => {
107 |         if (newPath.startsWith('http')) {
108 |           window.location.href = newPath
109 |         } else {
110 |           const path = pushPath(newPath)
111 |           fireLoadEvent({ path })
112 |         }
113 |       },
114 |       [pushPath],
115 |     ),
116 |     computeQuery,
117 |     setQuery: useCallback(
118 |       (queryUpdate) => {
119 |         const newPath = stripQuery(fullPath) + computeQuery(queryUpdate)
120 |         const path = pushPath(newPath)
121 |         fireLoadEvent({ path })
122 |       },
123 |       [computeQuery, fullPath, pushPath],
124 |     ),
125 |     gotoCosmetic: useCallback(
126 |       (newPath) => {
127 |         pushPath(newPath)
128 |       },
129 |       [pushPath],
130 |     ),
131 |     back: useCallback(() => {
132 |       window.history.back()
133 |     }, []),
134 |   }
135 | 
136 |   return <LocationContext.Provider value={value}>{children}</LocationContext.Provider>
137 | }
138 | 
139 | export function pathMatch(matchPath: string | boolean | undefined, fullPath: string): boolean {
140 |   const path = stripQuery(fullPath)
141 |   if (typeof matchPath === 'string') {
142 |     if (matchPath.startsWith('regex:')) {
143 |       const regex = new RegExp(matchPath.slice(6))
144 |       return regex.test(path)
145 |     } else if (matchPath.startsWith('startswith:')) {
146 |       return path.startsWith(matchPath.slice(11))
147 |     } else {
148 |       return path === matchPath
149 |     }
150 |   } else if (matchPath === undefined) {
151 |     return false
152 |   } else {
153 |     return matchPath
154 |   }
155 | }
156 | 
157 | function stripQuery(fullPath: string): string {
158 |   const q = fullPath.indexOf('?')
159 |   if (q === -1) {
160 |     return fullPath
161 |   } else {
162 |     return fullPath.slice(0, q)
163 |   }
164 | }
165 | 
166 | function getQuery(fullPath: string): URLSearchParams {
167 |   const q = fullPath.indexOf('?')
168 |   if (q === -1) {
169 |     return new URLSearchParams()
170 |   } else {
171 |     return new URLSearchParams(fullPath.slice(q + 1))
172 |   }
173 | }
174 | 


--------------------------------------------------------------------------------
/src/npm-fastui-bootstrap/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import { pathMatch } from 'fastui'
  2 | 
  3 | import type { ClassNameGenerator, CustomRender, models } from 'fastui'
  4 | 
  5 | import { Modal } from './modal'
  6 | import { Navbar } from './navbar'
  7 | import { Pagination } from './pagination'
  8 | import { Footer } from './footer'
  9 | import { Toast } from './toast'
 10 | 
 11 | export const customRender: CustomRender = (props) => {
 12 |   const { type } = props
 13 |   switch (type) {
 14 |     case 'Navbar':
 15 |       return () => <Navbar {...props} />
 16 |     case 'Footer':
 17 |       return () => <Footer {...props} />
 18 |     case 'Modal':
 19 |       return () => <Modal {...props} />
 20 |     case 'Pagination':
 21 |       return () => <Pagination {...props} />
 22 |     case 'Toast':
 23 |       return () => <Toast {...props} />
 24 |   }
 25 | }
 26 | 
 27 | export const classNameGenerator: ClassNameGenerator = ({
 28 |   props,
 29 |   fullPath,
 30 |   subElement,
 31 | }): models.ClassName | undefined => {
 32 |   const { type } = props
 33 |   switch (type) {
 34 |     case 'Page':
 35 |       return 'container mt-80 mb-3 page'
 36 |     case 'Button':
 37 |       return {
 38 |         btn: true,
 39 |         'btn-primary': !props.namedStyle || props.namedStyle === 'primary',
 40 |         'btn-secondary': props.namedStyle === 'secondary',
 41 |         'btn-warning': props.namedStyle === 'warning',
 42 |       }
 43 |     case 'Table':
 44 |       switch (subElement) {
 45 |         case 'no-data-message':
 46 |           return 'text-center mt-2'
 47 |         default:
 48 |           return 'table table-striped table-bordered'
 49 |       }
 50 |     case 'Details':
 51 |       switch (subElement) {
 52 |         case 'dt':
 53 |           return 'col-sm-3 col-md-2 text-sm-end'
 54 |         case 'dd':
 55 |           return 'col-sm-9 col-md-10'
 56 |         default:
 57 |           return 'row'
 58 |       }
 59 |     case 'Form':
 60 |     case 'ModelForm':
 61 |       if (props.displayMode === 'inline') {
 62 |         switch (subElement) {
 63 |           case 'form-container':
 64 |             return ''
 65 |           default:
 66 |             return 'row row-cols-lg-4 align-items-center justify-content-end'
 67 |         }
 68 |       } else if (props.displayMode === 'page') {
 69 |         switch (subElement) {
 70 |           case 'form-container':
 71 |             return 'row justify-content-center'
 72 |           default:
 73 |             return 'col-md-4'
 74 |         }
 75 |       } else {
 76 |         break
 77 |       }
 78 |     case 'FormFieldInput':
 79 |     case 'FormFieldTextarea':
 80 |     case 'FormFieldBoolean':
 81 |     case 'FormFieldSelect':
 82 |     case 'FormFieldSelectSearch':
 83 |     case 'FormFieldFile':
 84 |       switch (subElement) {
 85 |         case 'textarea':
 86 |         case 'input':
 87 |           return {
 88 |             'form-control': type !== 'FormFieldBoolean',
 89 |             'is-invalid': props.error != null,
 90 |             'form-check-input': type === 'FormFieldBoolean',
 91 |           }
 92 |         case 'select':
 93 |           return 'form-select'
 94 |         case 'select-react':
 95 |           return ''
 96 |         case 'label':
 97 |           if (props.displayMode === 'inline') {
 98 |             return 'visually-hidden'
 99 |           } else {
100 |             return { 'form-label': true, 'fw-bold': !!props.required, 'form-check-label': type === 'FormFieldBoolean' }
101 |           }
102 |         case 'error':
103 |           return 'invalid-feedback'
104 |         case 'description':
105 |           return 'form-text'
106 |         default:
107 |           return {
108 |             'mb-3': true,
109 |             'form-check': type === 'FormFieldBoolean',
110 |             'form-switch': type === 'FormFieldBoolean' && props.mode === 'switch',
111 |           }
112 |       }
113 |     case 'Navbar':
114 |       switch (subElement) {
115 |         case 'contents':
116 |           return 'container'
117 |         case 'title':
118 |           return 'navbar-brand'
119 |         default:
120 |           return 'border-bottom fixed-top bg-body'
121 |       }
122 |     case 'Footer':
123 |       switch (subElement) {
124 |         case 'link-list':
125 |           return 'nav justify-content-center pb-1'
126 |         case 'extra':
127 |           return 'text-center text-muted pb-3'
128 |         default:
129 |           return 'border-top pt-1 mt-auto bg-body'
130 |       }
131 |     case 'Link':
132 |       return {
133 |         active: pathMatch(props.active, fullPath),
134 |         'nav-link': props.mode === 'navbar' || props.mode === 'tabs' || props.mode === 'footer',
135 |         'text-muted': props.mode === 'footer',
136 |       }
137 |     case 'LinkList':
138 |       if (subElement === 'link-list-item' && props.mode) {
139 |         return 'nav-item'
140 |       } else {
141 |         switch (props.mode) {
142 |           case 'tabs':
143 |             return 'nav nav-underline'
144 |           case 'vertical':
145 |             return 'nav flex-column'
146 |           default:
147 |             return ''
148 |         }
149 |       }
150 |     case 'Code':
151 |       return 'rounded'
152 |     case 'Error':
153 |       if (props.statusCode === 502) {
154 |         return 'm-3 text-muted'
155 |       } else {
156 |         return 'error-alert alert alert-danger m-3'
157 |       }
158 |     case 'Spinner':
159 |       if (subElement === 'text') {
160 |         return 'd-flex justify-content-center mb-2'
161 |       } else if (subElement === 'animation') {
162 |         return 'd-flex justify-content-center'
163 |       } else {
164 |         return 'my-4'
165 |       }
166 |   }
167 | }
168 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/generate_typescript.py:
--------------------------------------------------------------------------------
  1 | from __future__ import annotations as _annotations
  2 | 
  3 | import re
  4 | import subprocess
  5 | from pathlib import Path
  6 | from typing import Any, cast
  7 | 
  8 | from pydantic import ImportString, TypeAdapter
  9 | from pydantic.json_schema import GenerateJsonSchema, JsonSchemaValue
 10 | from pydantic_core import core_schema, to_json
 11 | 
 12 | 
 13 | def main(python_object_str: str, typescript_output_file: Path):  # pragma: no cover
 14 |     root_model = TypeAdapter(ImportString).validate_python(python_object_str)
 15 |     json_schema = generate_json_schema(root_model)
 16 |     json_schema_file = Path('fastui-json-schema.json')
 17 |     json_schema_file.write_bytes(to_json(json_schema, indent=2))
 18 |     # NOTE: `json-schema-to-typescript` generates ugly schemas
 19 |     # (https://github.com/bcherny/json-schema-to-typescript/issues/193).
 20 |     # Note sure what the way forward is.
 21 |     json2ts(json_schema_file, typescript_output_file)
 22 | 
 23 | 
 24 | def generate_json_schema(root_model: Any) -> JsonSchemaValue:
 25 |     fastui_schema = TypeAdapter(root_model).json_schema(
 26 |         by_alias=True, mode='serialization', schema_generator=CustomGenerateJsonSchema
 27 |     )
 28 |     # the following post-processing is a workaround for
 29 |     # https://github.com/pydantic/pydantic/issues/8320
 30 |     any_comp_def = fastui_schema['$defs']['Div']['properties']['components']['items'].copy()
 31 |     any_comp_ref = {'$ref': '#/$defs/FastProps'}
 32 | 
 33 |     def replace_any_comp(value: Any) -> Any:
 34 |         if isinstance(value, dict):
 35 |             if value == any_comp_def:
 36 |                 return any_comp_ref
 37 |             else:
 38 |                 return {k: replace_any_comp(v) for k, v in value.items()}
 39 |         elif isinstance(value, list):
 40 |             return [replace_any_comp(v) for v in value]
 41 |         else:
 42 |             return value
 43 | 
 44 |     fastui_schema['items'] = any_comp_ref
 45 |     fastui_schema = replace_any_comp(fastui_schema)
 46 |     fastui_schema['$defs']['FastProps'] = any_comp_def
 47 |     fastui_schema.pop('description')
 48 |     return fastui_schema
 49 | 
 50 | 
 51 | class CustomGenerateJsonSchema(GenerateJsonSchema):
 52 |     def field_title_should_be_set(self, schema) -> bool:
 53 |         return False
 54 | 
 55 |     def default_schema(self, schema: core_schema.WithDefaultSchema) -> JsonSchemaValue:
 56 |         inner = schema['schema']
 57 |         if is_type_schema(schema):
 58 |             return self.generate_inner(inner)
 59 | 
 60 |         # if inner.get('type') == 'nullable' and inner.get('ref', '').startswith('fastui.class_name.ClassName:'):
 61 |         #     return self.generate_inner(inner)
 62 | 
 63 |         return super().default_schema(schema)
 64 | 
 65 |     def field_is_required(
 66 |         self,
 67 |         field: core_schema.ModelField | core_schema.DataclassField | core_schema.TypedDictField,
 68 |         total: bool,
 69 |     ) -> bool:
 70 |         inner = field['schema']
 71 |         if inner['type'] == 'default' and is_type_schema(cast(core_schema.WithDefaultSchema, inner)):
 72 |             return True
 73 |         else:
 74 |             return super().field_is_required(field, total)
 75 | 
 76 |     def nullable_schema(self, schema: core_schema.NullableSchema) -> JsonSchemaValue:
 77 |         null_schema = {'type': 'null'}
 78 |         inner_json_schema = self.generate_inner(schema['schema'])
 79 | 
 80 |         if inner_json_schema == null_schema:
 81 |             return null_schema
 82 |         else:
 83 |             # since we use `exclude_none=True`, field can't be null
 84 |             return inner_json_schema
 85 | 
 86 |     def tagged_union_schema(self, schema: core_schema.TaggedUnionSchema) -> JsonSchemaValue:
 87 |         if schema['discriminator'] == 'type':
 88 |             if 'go-to' in schema['choices']:
 89 |                 schema['ref'] = 'fastui.events.AnyEvent'
 90 |         return super().tagged_union_schema(schema)
 91 | 
 92 | 
 93 | def is_type_schema(schema: core_schema.WithDefaultSchema) -> bool:
 94 |     inner = schema['schema']
 95 |     if inner['type'] == 'literal':
 96 |         expected = cast(core_schema.LiteralSchema, inner)['expected']
 97 |         if len(expected) == 1 and expected[0] == schema.get('default', object()):
 98 |             return True
 99 |     return False
100 | 
101 | 
102 | TS_PREFIX = b"""\
103 | /**
104 |  * This file was automatically generated by json-schema-to-typescript.
105 |  * DO NOT MODIFY IT BY HAND. Instead, modify python types, then run
106 |  * `fastui generate <python-object> <typescript-output-file>`.
107 |  */"""
108 | 
109 | 
110 | def json2ts(input_file: Path, output_file: Path):  # pragma: no cover
111 |     args = (
112 |         'npx',
113 |         'json2ts',
114 |         str(input_file),
115 |         str(output_file),
116 |         '--additionalProperties',
117 |         'false',
118 |         '--no-style.semi',
119 |         '--style.singleQuote',
120 |         '--no-unknownAny',
121 |     )
122 |     try:
123 |         subprocess.run(args, check=True)
124 |     except (subprocess.CalledProcessError, FileNotFoundError) as e:
125 |         raise RuntimeError(
126 |             "Failed to run json2ts, you'll need to install `npx` and `json-schema-to-typescript`, "
127 |             f"then run the command:\n\n    {' '.join(args)}\n\n"
128 |         ) from e
129 |     else:
130 |         assert output_file.is_file()
131 |         # remove the root list type that we don't need
132 |         output = (
133 |             output_file.read_bytes()
134 |             .replace(b'export type FastUI = FastProps[]\n', b'')
135 |             .replace(b'/* eslint-disable */\n', b'')
136 |         )
137 |         output = re.sub(rb'/\*\*\s+\* This file was automatically generated.+?\*/', TS_PREFIX, output, flags=re.DOTALL)
138 |         output_file.write_bytes(output)
139 |         input_file.unlink()
140 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/form.tsx:
--------------------------------------------------------------------------------
  1 | import { FC, FormEvent, useContext, useState, useRef, useCallback, useEffect } from 'react'
  2 | 
  3 | import type { Form, ModelForm, FastProps } from '../models'
  4 | 
  5 | import { useClassName } from '../hooks/className'
  6 | import { useRequest, RequestArgs } from '../tools'
  7 | import { LocationContext } from '../hooks/locationContext'
  8 | import { usePageEventListen } from '../events'
  9 | 
 10 | import { AnyCompList } from './index'
 11 | 
 12 | import { ButtonComp } from './button'
 13 | import { FormFieldProps } from './FormField'
 14 | 
 15 | export const FormComp: FC<Form | ModelForm> = (props) => {
 16 |   const formRef = useRef<HTMLFormElement>(null)
 17 |   const {
 18 |     formFields,
 19 |     initial,
 20 |     submitUrl,
 21 |     method,
 22 |     footer,
 23 |     displayMode,
 24 |     submitOnChange,
 25 |     submitTrigger,
 26 |     loading: loadingComponents,
 27 |   } = props
 28 | 
 29 |   // mostly equivalent to `<input disabled`
 30 |   const [locked, setLocked] = useState(false)
 31 |   const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
 32 |   const [error, setError] = useState<string | null>(null)
 33 |   const [responseComponentProps, setResponseComponentProps] = useState<FastProps[] | null>(null)
 34 | 
 35 |   // if form fields change or the submit url changes, clear the response
 36 |   useEffect(() => {
 37 |     setResponseComponentProps(null)
 38 |   }, [formFields, submitUrl])
 39 | 
 40 |   const request = useRequest()
 41 |   const { goto } = useContext(LocationContext)
 42 | 
 43 |   const submit = useCallback(
 44 |     async (formData: FormData) => {
 45 |       setLocked(true)
 46 |       setError(null)
 47 |       setFieldErrors({})
 48 | 
 49 |       if (method === 'GOTO') {
 50 |         // this seems to work in common cases, but typescript doesn't like it
 51 |         const query = new URLSearchParams(formData as any)
 52 |         for (const [k, v] of query.entries()) {
 53 |           if (v === '') {
 54 |             query.delete(k)
 55 |           }
 56 |         }
 57 |         const queryStr = query.toString()
 58 |         goto(queryStr === '' ? submitUrl : `${submitUrl}?${queryStr}`)
 59 |         setLocked(false)
 60 |         return
 61 |       }
 62 | 
 63 |       const requestArgs: RequestArgs = { url: submitUrl, expectedStatus: [200, 422] }
 64 |       if (method === 'GET') {
 65 |         // as above with URLSearchParams
 66 |         requestArgs.query = new URLSearchParams(formData as any)
 67 |       } else {
 68 |         requestArgs.formData = formData
 69 |       }
 70 | 
 71 |       const [status, data] = await request(requestArgs)
 72 |       if (status === 200) {
 73 |         setResponseComponentProps(data as FastProps[])
 74 |       } else {
 75 |         console.assert(status === 422)
 76 |         const errorResponse = data as ErrorResponse
 77 |         const formErrors = errorResponse.detail.form
 78 |         if (formErrors) {
 79 |           setFieldErrors(Object.fromEntries(formErrors.map((e) => [locToName(e.loc), e.msg])))
 80 |         } else {
 81 |           console.warn('Non-field error submitting form:', data)
 82 |           setError('Error submitting form')
 83 |         }
 84 |       }
 85 |       setLocked(false)
 86 |     },
 87 |     [goto, method, request, submitUrl],
 88 |   )
 89 | 
 90 |   const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
 91 |     e.preventDefault()
 92 |     const formData = new FormData(e.currentTarget)
 93 |     await submit(formData)
 94 |   }
 95 | 
 96 |   const onChange = useCallback(() => {
 97 |     submitOnChange && formRef.current && formRef.current.requestSubmit()
 98 |   }, [submitOnChange])
 99 | 
100 |   const { fireId } = usePageEventListen(submitTrigger)
101 | 
102 |   useEffect(() => {
103 |     fireId && formRef.current && formRef.current.requestSubmit()
104 |   }, [fireId])
105 | 
106 |   const fieldProps: FormFieldProps[] = formFields.map((formField) => {
107 |     const f = {
108 |       ...formField,
109 |       error: fieldErrors[formField.name],
110 |       locked,
111 |       displayMode,
112 |       onChange,
113 |     } as FormFieldProps
114 |     const formInitial = initial && initial[formField.name]
115 |     if (formInitial !== undefined) {
116 |       ;(f as any).initial = formInitial
117 |     }
118 |     return f
119 |   })
120 | 
121 |   const containerClassName = useClassName(props, { el: 'form-container' })
122 |   const formClassName = useClassName(props)
123 | 
124 |   if (responseComponentProps) {
125 |     return (
126 |       <div className={containerClassName}>
127 |         <AnyCompList propsList={responseComponentProps} />
128 |       </div>
129 |     )
130 |   } else {
131 |     return (
132 |       <div className={containerClassName}>
133 |         <form ref={formRef} className={formClassName} onSubmit={onSubmit}>
134 |           {locked && loadingComponents && <AnyCompList propsList={loadingComponents} />}
135 |           <AnyCompList propsList={fieldProps} />
136 |           {error ? <div>Error: {error}</div> : null}
137 |           <Footer footer={footer} />
138 |         </form>
139 |       </div>
140 |     )
141 |   }
142 | }
143 | 
144 | const Footer: FC<{ footer?: FastProps[] }> = ({ footer }) => {
145 |   if (typeof footer === 'undefined') {
146 |     return <ButtonComp type="Button" text="Submit" htmlType="submit" />
147 |   } else {
148 |     return <AnyCompList propsList={footer} />
149 |   }
150 | }
151 | 
152 | type Loc = (string | number)[]
153 | interface Error {
154 |   type: string
155 |   loc: Loc
156 |   msg: string
157 | }
158 | 
159 | interface ErrorResponse {
160 |   detail: { form?: Error[] }
161 | }
162 | 
163 | /**
164 |  * Should match `loc_to_name` in python so errors can be connected to the correct field
165 |  */
166 | function locToName(loc: Loc): string {
167 |   if (loc.some((v) => typeof v === 'string' && v.includes('.'))) {
168 |     return JSON.stringify(loc)
169 |   } else if (typeof loc[0] === 'string' && loc[0].startsWith('[')) {
170 |     return JSON.stringify(loc)
171 |   } else {
172 |     return loc.join('.')
173 |   }
174 | }
175 | 


--------------------------------------------------------------------------------
/demo/tables.py:
--------------------------------------------------------------------------------
  1 | from datetime import date
  2 | from functools import cache
  3 | from pathlib import Path
  4 | 
  5 | import pydantic
  6 | from fastapi import APIRouter
  7 | from fastui import AnyComponent, FastUI
  8 | from fastui import components as c
  9 | from fastui.components.display import DisplayLookup, DisplayMode
 10 | from fastui.events import BackEvent, GoToEvent
 11 | from pydantic import BaseModel, Field, TypeAdapter
 12 | 
 13 | from .shared import demo_page
 14 | 
 15 | router = APIRouter()
 16 | 
 17 | 
 18 | class City(BaseModel):
 19 |     id: int = Field(title='ID')
 20 |     city: str = Field(title='Name')
 21 |     city_ascii: str = Field(title='City Ascii')
 22 |     lat: float = Field(title='Latitude')
 23 |     lng: float = Field(title='Longitude')
 24 |     country: str = Field(title='Country')
 25 |     iso2: str = Field(title='ISO2')
 26 |     iso3: str = Field(title='ISO3')
 27 |     admin_name: str | None = Field(title='Admin Name')
 28 |     capital: str | None = Field(title='Capital')
 29 |     population: float = Field(title='Population')
 30 | 
 31 | 
 32 | @cache
 33 | def cities_list() -> list[City]:
 34 |     cities_adapter = TypeAdapter(list[City])
 35 |     cities_file = Path(__file__).parent / 'cities.json'
 36 |     cities = cities_adapter.validate_json(cities_file.read_bytes())
 37 |     cities.sort(key=lambda city: city.population, reverse=True)
 38 |     return cities
 39 | 
 40 | 
 41 | @cache
 42 | def cities_lookup() -> dict[id, City]:
 43 |     return {city.id: city for city in cities_list()}
 44 | 
 45 | 
 46 | class FilterForm(pydantic.BaseModel):
 47 |     country: str = Field(json_schema_extra={'search_url': '/api/forms/search', 'placeholder': 'Filter by Country...'})
 48 | 
 49 | 
 50 | @router.get('/cities', response_model=FastUI, response_model_exclude_none=True)
 51 | def cities_view(page: int = 1, country: str | None = None) -> list[AnyComponent]:
 52 |     cities = cities_list()
 53 |     page_size = 50
 54 |     filter_form_initial = {}
 55 |     if country:
 56 |         cities = [city for city in cities if city.iso3 == country]
 57 |         country_name = cities[0].country if cities else country
 58 |         filter_form_initial['country'] = {'value': country, 'label': country_name}
 59 |     return demo_page(
 60 |         *tabs(),
 61 |         c.ModelForm(
 62 |             model=FilterForm,
 63 |             submit_url='.',
 64 |             initial=filter_form_initial,
 65 |             method='GOTO',
 66 |             submit_on_change=True,
 67 |             display_mode='inline',
 68 |         ),
 69 |         c.Table(
 70 |             data=cities[(page - 1) * page_size : page * page_size],
 71 |             data_model=City,
 72 |             columns=[
 73 |                 DisplayLookup(field='city', on_click=GoToEvent(url='./{id}'), table_width_percent=33),
 74 |                 DisplayLookup(field='country', table_width_percent=33),
 75 |                 DisplayLookup(field='population', table_width_percent=33),
 76 |             ],
 77 |         ),
 78 |         c.Pagination(page=page, page_size=page_size, total=len(cities)),
 79 |         title='Cities',
 80 |     )
 81 | 
 82 | 
 83 | @router.get('/cities/{city_id}', response_model=FastUI, response_model_exclude_none=True)
 84 | def city_view(city_id: int) -> list[AnyComponent]:
 85 |     city = cities_lookup()[city_id]
 86 |     return demo_page(
 87 |         *tabs(),
 88 |         c.Link(components=[c.Text(text='Back')], on_click=BackEvent()),
 89 |         c.Details(data=city),
 90 |         title=city.city,
 91 |     )
 92 | 
 93 | 
 94 | class User(BaseModel):
 95 |     id: int = Field(title='ID')
 96 |     name: str = Field(title='Name')
 97 |     dob: date = Field(title='Date of Birth')
 98 |     enabled: bool | None = None
 99 |     status_markdown: str | None = Field(default=None, title='Status')
100 | 
101 | 
102 | users: list[User] = [
103 |     User(id=1, name='John', dob=date(1990, 1, 1), enabled=True, status_markdown='**Active**'),
104 |     User(id=2, name='Jane', dob=date(1991, 1, 1), enabled=False, status_markdown='*Inactive*'),
105 |     User(id=3, name='Jack', dob=date(1992, 1, 1)),
106 | ]
107 | 
108 | 
109 | @router.get('/users', response_model=FastUI, response_model_exclude_none=True)
110 | def users_view() -> list[AnyComponent]:
111 |     return demo_page(
112 |         *tabs(),
113 |         c.Table(
114 |             data=users,
115 |             columns=[
116 |                 DisplayLookup(field='name', on_click=GoToEvent(url='/table/users/{id}/')),
117 |                 DisplayLookup(field='dob', mode=DisplayMode.date),
118 |                 DisplayLookup(field='enabled'),
119 |                 DisplayLookup(field='status_markdown', mode=DisplayMode.markdown),
120 |             ],
121 |         ),
122 |         title='Users',
123 |     )
124 | 
125 | 
126 | def tabs() -> list[AnyComponent]:
127 |     return [
128 |         c.LinkList(
129 |             links=[
130 |                 c.Link(
131 |                     components=[c.Text(text='Cities')],
132 |                     on_click=GoToEvent(url='/table/cities'),
133 |                     active='startswith:/table/cities',
134 |                 ),
135 |                 c.Link(
136 |                     components=[c.Text(text='Users')],
137 |                     on_click=GoToEvent(url='/table/users'),
138 |                     active='startswith:/table/users',
139 |                 ),
140 |             ],
141 |             mode='tabs',
142 |             class_name='+ mb-4',
143 |         ),
144 |     ]
145 | 
146 | 
147 | @router.get('/users/{id}/', response_model=FastUI, response_model_exclude_none=True)
148 | def user_profile(id: int) -> list[AnyComponent]:
149 |     user: User | None = users[id - 1] if id <= len(users) else None
150 |     return demo_page(
151 |         *tabs(),
152 |         c.Link(components=[c.Text(text='Back')], on_click=BackEvent()),
153 |         c.Details(
154 |             data=user,
155 |             fields=[
156 |                 DisplayLookup(field='name'),
157 |                 DisplayLookup(field='dob', mode=DisplayMode.date),
158 |                 DisplayLookup(field='enabled'),
159 |             ],
160 |         ),
161 |         title=user.name,
162 |     )
163 | 


--------------------------------------------------------------------------------
/src/python-fastui/tests/test_tables_display.py:
--------------------------------------------------------------------------------
  1 | import pytest
  2 | from fastui import components
  3 | from fastui.components import display
  4 | from pydantic import BaseModel, Field, computed_field
  5 | 
  6 | 
  7 | class User(BaseModel):
  8 |     id: int
  9 |     name: str = Field(title='Name')
 10 | 
 11 |     @computed_field(title='Representation')
 12 |     @property
 13 |     def representation(self) -> str:
 14 |         return f'{self.id}: {self.name}'
 15 | 
 16 | 
 17 | users = [User(id=1, name='john'), User(id=2, name='jack')]
 18 | 
 19 | 
 20 | def test_table_no_columns():
 21 |     table = components.Table(data=users)
 22 | 
 23 |     # insert_assert(table.model_dump(by_alias=True, exclude_none=True))
 24 |     assert table.model_dump(by_alias=True, exclude_none=True) == {
 25 |         'data': [
 26 |             {'id': 1, 'name': 'john', 'representation': '1: john'},
 27 |             {'id': 2, 'name': 'jack', 'representation': '2: jack'},
 28 |         ],
 29 |         'columns': [
 30 |             {'field': 'id'},
 31 |             {'field': 'name', 'title': 'Name'},
 32 |             {'field': 'representation', 'title': 'Representation'},
 33 |         ],
 34 |         'type': 'Table',
 35 |     }
 36 | 
 37 | 
 38 | def test_table_columns():
 39 |     table = components.Table(
 40 |         data=users,
 41 |         columns=[
 42 |             display.DisplayLookup(field='id', title='ID'),
 43 |             display.DisplayLookup(field='name'),
 44 |             display.DisplayLookup(field='representation'),
 45 |         ],
 46 |     )
 47 | 
 48 |     # insert_assert(table.model_dump(by_alias=True, exclude_none=True))
 49 |     assert table.model_dump(by_alias=True, exclude_none=True) == {
 50 |         'data': [
 51 |             {'id': 1, 'name': 'john', 'representation': '1: john'},
 52 |             {'id': 2, 'name': 'jack', 'representation': '2: jack'},
 53 |         ],
 54 |         'columns': [
 55 |             {'title': 'ID', 'field': 'id'},
 56 |             {'title': 'Name', 'field': 'name'},
 57 |             {'title': 'Representation', 'field': 'representation'},
 58 |         ],
 59 |         'type': 'Table',
 60 |     }
 61 | 
 62 | 
 63 | def test_table_empty_no_data_model():
 64 |     with pytest.raises(ValueError, match='Value error, Cannot infer model from empty data'):
 65 |         components.Table(data=[])
 66 | 
 67 | 
 68 | def test_table_empty_data_model():
 69 |     table = components.Table(data=[], data_model=User)
 70 | 
 71 |     # insert_assert(table.model_dump(by_alias=True, exclude_none=True))
 72 |     assert table.model_dump(by_alias=True, exclude_none=True) == {
 73 |         'data': [],
 74 |         'columns': [
 75 |             {'field': 'id'},
 76 |             {'title': 'Name', 'field': 'name'},
 77 |             {'title': 'Representation', 'field': 'representation'},
 78 |         ],
 79 |         'type': 'Table',
 80 |     }
 81 | 
 82 | 
 83 | def test_display_no_fields():
 84 |     d = components.Details(data=users[0])
 85 | 
 86 |     # insert_assert(d.model_dump(by_alias=True, exclude_none=True))
 87 |     assert d.model_dump(by_alias=True, exclude_none=True) == {
 88 |         'data': {'id': 1, 'name': 'john', 'representation': '1: john'},
 89 |         'fields': [
 90 |             {'field': 'id'},
 91 |             {'title': 'Name', 'field': 'name'},
 92 |             {'title': 'Representation', 'field': 'representation'},
 93 |         ],
 94 |         'type': 'Details',
 95 |     }
 96 | 
 97 | 
 98 | def test_display_fields():
 99 |     d = components.Details(
100 |         data=users[0], fields=[display.DisplayLookup(field='id', title='ID'), display.DisplayLookup(field='name')]
101 |     )
102 | 
103 |     # insert_assert(d.model_dump(by_alias=True, exclude_none=True))
104 |     assert d.model_dump(by_alias=True, exclude_none=True) == {
105 |         'data': {'id': 1, 'name': 'john', 'representation': '1: john'},
106 |         'fields': [{'title': 'ID', 'field': 'id'}, {'title': 'Name', 'field': 'name'}],
107 |         'type': 'Details',
108 |     }
109 | 
110 | 
111 | def test_details_with_display_lookup_and_display():
112 |     d = components.Details(
113 |         data=users[0],
114 |         fields=[
115 |             display.DisplayLookup(field='id', title='ID'),
116 |             display.DisplayLookup(field='name'),
117 |             display.Display(value='display value', title='Display Title'),
118 |         ],
119 |     )
120 | 
121 |     # insert_assert(d.model_dump(by_alias=True, exclude_none=True))
122 |     assert d.model_dump(by_alias=True, exclude_none=True) == {
123 |         'data': {'id': 1, 'name': 'john', 'representation': '1: john'},
124 |         'fields': [
125 |             {'title': 'ID', 'field': 'id'},
126 |             {'title': 'Name', 'field': 'name'},
127 |             {'title': 'Display Title', 'value': 'display value', 'type': 'Display'},
128 |         ],
129 |         'type': 'Details',
130 |     }
131 | 
132 | 
133 | def test_table_respect_computed_field_title():
134 |     class Foo(BaseModel):
135 |         id: int
136 | 
137 |         @computed_field(title='Foo Name')
138 |         def name(self) -> str:
139 |             return f'foo{self.id}'
140 | 
141 |     foos = [Foo(id=1)]
142 |     table = components.Table(data=foos)
143 | 
144 |     # insert_assert(table.model_dump(by_alias=True, exclude_none=True))
145 |     assert table.model_dump(by_alias=True, exclude_none=True) == {
146 |         'data': [{'id': 1, 'name': 'foo1'}],
147 |         'columns': [{'field': 'id'}, {'title': 'Foo Name', 'field': 'name'}],
148 |         'type': 'Table',
149 |     }
150 | 
151 | 
152 | def test_details_respect_computed_field_title():
153 |     class Foo(BaseModel):
154 |         id: int
155 | 
156 |         @computed_field(title='Foo Name')
157 |         def name(self) -> str:
158 |             return f'foo{self.id}'
159 | 
160 |     foos = Foo(id=1)
161 |     details = components.Details(data=foos)
162 | 
163 |     # insert_assert(table.model_dump(by_alias=True, exclude_none=True))
164 |     assert details.model_dump(by_alias=True, exclude_none=True) == {
165 |         'data': {'id': 1, 'name': 'foo1'},
166 |         'fields': [{'field': 'id'}, {'title': 'Foo Name', 'field': 'name'}],
167 |         'type': 'Details',
168 |     }
169 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/ServerLoad.tsx:
--------------------------------------------------------------------------------
  1 | import { FC, useCallback, useContext, useEffect, useState } from 'react'
  2 | 
  3 | import type { ServerLoad, PageEvent, FastProps } from '../models'
  4 | 
  5 | import { ErrorContext } from '../hooks/error'
  6 | import { useRequest, useSSE, Method } from '../tools'
  7 | import { DefaultNotFound, DefaultTransition } from '../Defaults'
  8 | import { ConfigContext } from '../hooks/config'
  9 | import { usePageEventListen } from '../events'
 10 | import { EventContextProvider, useEventContext } from '../hooks/eventContext'
 11 | import { LocationContext } from '../hooks/locationContext'
 12 | 
 13 | import { AnyCompList } from './index'
 14 | 
 15 | import { SpinnerComp } from './spinner'
 16 | 
 17 | export const ServerLoadComp: FC<ServerLoad> = (props) => {
 18 |   const { path, components, loadTrigger, sse, method, sseRetry } = props
 19 |   if (components) {
 20 |     return (
 21 |       <ServerLoadDefer
 22 |         path={path}
 23 |         components={components}
 24 |         loadTrigger={loadTrigger}
 25 |         sse={sse}
 26 |         method={method}
 27 |         sseRetry={sseRetry}
 28 |       />
 29 |     )
 30 |   } else if (sse) {
 31 |     return <ServerLoadSSE path={path} method={method} sseRetry={sseRetry} />
 32 |   } else {
 33 |     return <ServerLoadFetch path={path} />
 34 |   }
 35 | }
 36 | 
 37 | interface DeferProps {
 38 |   path: string
 39 |   components: FastProps[]
 40 |   loadTrigger?: PageEvent
 41 |   sse?: boolean
 42 |   method?: Method
 43 |   sseRetry?: number
 44 | }
 45 | 
 46 | const ServerLoadDefer: FC<DeferProps> = ({ components, path, loadTrigger, sse, method, sseRetry }) => {
 47 |   const { eventContext } = usePageEventListen(loadTrigger)
 48 | 
 49 |   if (eventContext) {
 50 |     return (
 51 |       <EventContextProvider context={eventContext}>
 52 |         {sse ? (
 53 |           <ServerLoadSSE path={path} method={method} sseRetry={sseRetry} />
 54 |         ) : (
 55 |           <ServerLoadFetch path={path} method={method} />
 56 |         )}
 57 |       </EventContextProvider>
 58 |     )
 59 |   } else {
 60 |     return <AnyCompList propsList={components} />
 61 |   }
 62 | }
 63 | 
 64 | interface FetchProps {
 65 |   path: string
 66 |   devReload?: number
 67 |   method?: Method
 68 | }
 69 | 
 70 | export const ServerLoadFetch: FC<FetchProps> = ({ path, devReload, method }) => {
 71 |   const [transitioning, setTransitioning] = useState<boolean>(false)
 72 |   const [componentProps, setComponentProps] = useState<FastProps[] | null>(null)
 73 |   const [notFoundUrl, setNotFoundUrl] = useState<string | undefined>(undefined)
 74 | 
 75 |   const { fullPath } = useContext(LocationContext)
 76 |   const url = useServerUrl(path)
 77 |   const request = useRequest()
 78 | 
 79 |   useEffect(() => {
 80 |     setTransitioning(true)
 81 |     let componentLoaded = true
 82 |     request({ url, method, expectedStatus: [200, 345, 404] }).then(([status, data]) => {
 83 |       if (componentLoaded) {
 84 |         // 345 is treat the same as 200 - the server is expected to return valid FastUI components
 85 |         if (status === 200 || status === 345) {
 86 |           setComponentProps(data as FastProps[])
 87 |           // if there's a fragment, scroll to that ID once the page is loaded
 88 |           const fragment = getFragment(path)
 89 |           if (fragment) {
 90 |             setTimeout(() => {
 91 |               const element = document.getElementById(fragment)
 92 |               if (element) {
 93 |                 element.scrollIntoView()
 94 |               }
 95 |             }, 50)
 96 |           }
 97 |         } else {
 98 |           setNotFoundUrl(url)
 99 |         }
100 |       }
101 |       setTransitioning(false)
102 |     })
103 | 
104 |     return () => {
105 |       componentLoaded = false
106 |     }
107 |   }, [url, path, request, devReload, method])
108 | 
109 |   useEffect(() => {
110 |     setNotFoundUrl(undefined)
111 |   }, [fullPath])
112 | 
113 |   return <Render propsList={componentProps} notFoundUrl={notFoundUrl} transitioning={transitioning} />
114 | }
115 | 
116 | interface SSEProps {
117 |   path: string
118 |   method?: Method
119 |   sseRetry?: number
120 | }
121 | 
122 | export const ServerLoadSSE: FC<SSEProps> = ({ path, method, sseRetry }) => {
123 |   const [componentProps, setComponentProps] = useState<FastProps[] | null>(null)
124 | 
125 |   const url = useServerUrl(path)
126 |   const onMessage = useCallback((data: any) => setComponentProps(data as FastProps[]), [])
127 |   useSSE(url, onMessage, method, sseRetry)
128 | 
129 |   return <Render propsList={componentProps} transitioning={false} />
130 | }
131 | 
132 | const Render: FC<{ propsList: FastProps[] | null; notFoundUrl?: string; transitioning: boolean }> = ({
133 |   propsList,
134 |   notFoundUrl,
135 |   transitioning,
136 | }) => {
137 |   const { error } = useContext(ErrorContext)
138 |   const { NotFound, Transition } = useContext(ConfigContext)
139 |   const NotFoundComp = NotFound ?? DefaultNotFound
140 |   const TransitionComp = Transition ?? DefaultTransition
141 | 
142 |   if (notFoundUrl) {
143 |     return <NotFoundComp url={notFoundUrl} />
144 |   } else if (propsList === null) {
145 |     if (error) {
146 |       return <></>
147 |     } else {
148 |       return <SpinnerComp type="Spinner" />
149 |     }
150 |   } else {
151 |     return (
152 |       <TransitionComp transitioning={transitioning}>
153 |         <AnyCompList propsList={propsList} />
154 |       </TransitionComp>
155 |     )
156 |   }
157 | }
158 | 
159 | function useServerUrl(path: string): string {
160 |   const { APIRootUrl, APIPathMode, APIPathStrip } = useContext(ConfigContext)
161 |   if (APIPathStrip && path.startsWith(APIPathStrip)) {
162 |     path = path.slice(APIPathStrip.length)
163 |   }
164 |   const applyContext = useEventContext()
165 |   const requestPath = applyContext(path)
166 | 
167 |   if (APIPathMode === 'query') {
168 |     return `${APIRootUrl}?path=${encodeURIComponent(requestPath)}`
169 |   } else {
170 |     return APIRootUrl + requestPath
171 |   }
172 | }
173 | 
174 | function getFragment(path: string): string | undefined {
175 |   const index = path.indexOf('#')
176 |   if (index !== -1) {
177 |     return path.slice(index + 1)
178 |   }
179 | }
180 | 


--------------------------------------------------------------------------------
/src/npm-fastui/src/components/index.tsx:
--------------------------------------------------------------------------------
  1 | import { FC } from 'react'
  2 | 
  3 | import type { FastProps, Display, Text, ServerLoad, PageTitle, FireEvent } from '../models'
  4 | 
  5 | import { DisplayError } from '../hooks/error'
  6 | import { useCustomRender } from '../hooks/config'
  7 | import { unreachable } from '../tools'
  8 | 
  9 | import { TextComp } from './text'
 10 | import { ParagraphComp } from './paragraph'
 11 | import { PageTitleComp } from './PageTitle'
 12 | import { DivComp } from './div'
 13 | import { HeadingComp } from './heading'
 14 | import { MarkdownComp } from './Markdown'
 15 | import { CodeComp } from './Code'
 16 | import { FormComp } from './form'
 17 | import {
 18 |   FormFieldInputComp,
 19 |   FormFieldTextareaComp,
 20 |   FormFieldBooleanComp,
 21 |   FormFieldSelectComp,
 22 |   FormFieldSelectSearchComp,
 23 |   FormFieldFileComp,
 24 | } from './FormField'
 25 | import { ButtonComp } from './button'
 26 | import { LinkComp, LinkRender } from './link'
 27 | import { LinkListComp } from './LinkList'
 28 | import { NavbarComp } from './navbar'
 29 | import { ModalComp } from './modal'
 30 | import { TableComp } from './table'
 31 | import { PaginationComp } from './pagination'
 32 | import { DetailsComp } from './details'
 33 | import { DisplayComp } from './display'
 34 | import { JsonComp } from './Json'
 35 | import { FooterComp } from './footer'
 36 | import { ServerLoadComp } from './ServerLoad'
 37 | import { ImageComp } from './image'
 38 | import { IframeComp } from './Iframe'
 39 | import { VideoComp } from './video'
 40 | import { FireEventComp } from './FireEvent'
 41 | import { ErrorComp } from './error'
 42 | import { SpinnerComp } from './spinner'
 43 | import { CustomComp } from './Custom'
 44 | import { ToastComp } from './toast'
 45 | 
 46 | // TODO some better way to export components
 47 | export {
 48 |   TextComp,
 49 |   ParagraphComp,
 50 |   PageTitleComp,
 51 |   DivComp,
 52 |   HeadingComp,
 53 |   MarkdownComp,
 54 |   CodeComp,
 55 |   FormComp,
 56 |   FormFieldInputComp,
 57 |   FormFieldBooleanComp,
 58 |   FormFieldSelectComp,
 59 |   FormFieldSelectSearchComp,
 60 |   FormFieldFileComp,
 61 |   ButtonComp,
 62 |   LinkComp,
 63 |   LinkListComp,
 64 |   NavbarComp,
 65 |   ModalComp,
 66 |   TableComp,
 67 |   PaginationComp,
 68 |   DetailsComp,
 69 |   DisplayComp,
 70 |   JsonComp,
 71 |   FooterComp,
 72 |   ServerLoadComp,
 73 |   ImageComp,
 74 |   IframeComp,
 75 |   VideoComp,
 76 |   FireEventComp,
 77 |   ErrorComp,
 78 |   SpinnerComp,
 79 |   CustomComp,
 80 |   LinkRender,
 81 |   ToastComp,
 82 | }
 83 | 
 84 | export type FastClassNameProps = Exclude<FastProps, Text | Display | ServerLoad | PageTitle | FireEvent>
 85 | 
 86 | export const AnyCompList: FC<{ propsList: FastProps[] }> = ({ propsList }) => (
 87 |   <>
 88 |     {propsList.map((child, i) => (
 89 |       <AnyComp key={i} {...child} />
 90 |     ))}
 91 |   </>
 92 | )
 93 | 
 94 | export const AnyComp: FC<FastProps> = (props) => {
 95 |   const CustomRenderComp = useCustomRender(props)
 96 |   if (CustomRenderComp) {
 97 |     return <CustomRenderComp />
 98 |   }
 99 | 
100 |   const { type } = props
101 |   try {
102 |     switch (type) {
103 |       case 'Text':
104 |         return <TextComp {...props} />
105 |       case 'Paragraph':
106 |         return <ParagraphComp {...props} />
107 |       case 'PageTitle':
108 |         return <PageTitleComp {...props} />
109 |       case 'Div':
110 |       case 'Page':
111 |         return <DivComp {...props} />
112 |       case 'Heading':
113 |         return <HeadingComp {...props} />
114 |       case 'Markdown':
115 |         return <MarkdownComp {...props} />
116 |       case 'Code':
117 |         return <CodeComp {...props} />
118 |       case 'Button':
119 |         return <ButtonComp {...props} />
120 |       case 'Link':
121 |         return <LinkComp {...props} />
122 |       case 'LinkList':
123 |         return <LinkListComp {...props} />
124 |       case 'Navbar':
125 |         return <NavbarComp {...props} />
126 |       case 'Footer':
127 |         return <FooterComp {...props} />
128 |       case 'Form':
129 |       case 'ModelForm':
130 |         return <FormComp {...props} />
131 |       case 'FormFieldInput':
132 |         return <FormFieldInputComp {...props} />
133 |       case 'FormFieldTextarea':
134 |         return <FormFieldTextareaComp {...props} />
135 |       case 'FormFieldBoolean':
136 |         return <FormFieldBooleanComp {...props} />
137 |       case 'FormFieldFile':
138 |         return <FormFieldFileComp {...props} />
139 |       case 'FormFieldSelect':
140 |         return <FormFieldSelectComp {...props} />
141 |       case 'FormFieldSelectSearch':
142 |         return <FormFieldSelectSearchComp {...props} />
143 |       case 'Modal':
144 |         return <ModalComp {...props} />
145 |       case 'Table':
146 |         return <TableComp {...props} />
147 |       case 'Pagination':
148 |         return <PaginationComp {...props} />
149 |       case 'Details':
150 |         return <DetailsComp {...props} />
151 |       case 'Display':
152 |         return <DisplayComp {...props} />
153 |       case 'JSON':
154 |         return <JsonComp {...props} />
155 |       case 'ServerLoad':
156 |         return <ServerLoadComp {...props} />
157 |       case 'Image':
158 |         return <ImageComp {...props} />
159 |       case 'Iframe':
160 |         return <IframeComp {...props} />
161 |       case 'Video':
162 |         return <VideoComp {...props} />
163 |       case 'FireEvent':
164 |         return <FireEventComp {...props} />
165 |       case 'Error':
166 |         return <ErrorComp {...props} />
167 |       case 'Spinner':
168 |         return <SpinnerComp {...props} />
169 |       case 'Custom':
170 |         return <CustomComp {...props} />
171 |       case 'Toast':
172 |         return <ToastComp {...props} />
173 |       default:
174 |         unreachable('Unexpected component type', type, props)
175 |         return <DisplayError title="Invalid Server Response" description={`Unknown component type: "${type}"`} />
176 |     }
177 |   } catch (e) {
178 |     // TODO maybe we shouldn't catch this error (by default)?
179 |     const description = (e as any).message
180 |     return <DisplayError title="Render Error" description={description} />
181 |   }
182 | }
183 | 


--------------------------------------------------------------------------------
/demo/auth.py:
--------------------------------------------------------------------------------
  1 | from __future__ import annotations as _annotations
  2 | 
  3 | import asyncio
  4 | import json
  5 | import os
  6 | from dataclasses import asdict
  7 | from typing import Annotated, Literal, TypeAlias
  8 | 
  9 | from fastapi import APIRouter, Depends, Request
 10 | from fastui import AnyComponent, FastUI
 11 | from fastui import components as c
 12 | from fastui.auth import AuthRedirect, GitHubAuthProvider
 13 | from fastui.events import AuthEvent, GoToEvent, PageEvent
 14 | from fastui.forms import fastui_form
 15 | from httpx import AsyncClient
 16 | from pydantic import BaseModel, EmailStr, Field, SecretStr
 17 | 
 18 | from .auth_user import User
 19 | from .shared import demo_page
 20 | 
 21 | router = APIRouter()
 22 | 
 23 | GITHUB_CLIENT_ID = os.getenv('GITHUB_CLIENT_ID', '0d0315f9c2e055d032e2')
 24 | # this will give an error when making requests to GitHub, but at least the app will run
 25 | GITHUB_CLIENT_SECRET = SecretStr(os.getenv('GITHUB_CLIENT_SECRET', 'dummy-secret'))
 26 | # use 'http://localhost:3000/auth/login/github/redirect' in development
 27 | GITHUB_REDIRECT = os.getenv('GITHUB_REDIRECT')
 28 | 
 29 | 
 30 | async def get_github_auth(request: Request) -> GitHubAuthProvider:
 31 |     client: AsyncClient = request.app.state.httpx_client
 32 |     return GitHubAuthProvider(
 33 |         httpx_client=client,
 34 |         github_client_id=GITHUB_CLIENT_ID,
 35 |         github_client_secret=GITHUB_CLIENT_SECRET,
 36 |         redirect_uri=GITHUB_REDIRECT,
 37 |         scopes=['user:email'],
 38 |     )
 39 | 
 40 | 
 41 | LoginKind: TypeAlias = Literal['password', 'github']
 42 | 
 43 | 
 44 | @router.get('/login/{kind}', response_model=FastUI, response_model_exclude_none=True)
 45 | def auth_login(
 46 |     kind: LoginKind,
 47 |     user: Annotated[User | None, Depends(User.from_request_opt)],
 48 | ) -> list[AnyComponent]:
 49 |     if user is not None:
 50 |         # already logged in
 51 |         raise AuthRedirect('/auth/profile')
 52 | 
 53 |     return demo_page(
 54 |         c.LinkList(
 55 |             links=[
 56 |                 c.Link(
 57 |                     components=[c.Text(text='Password Login')],
 58 |                     on_click=PageEvent(name='tab', push_path='/auth/login/password', context={'kind': 'password'}),
 59 |                     active='/auth/login/password',
 60 |                 ),
 61 |                 c.Link(
 62 |                     components=[c.Text(text='GitHub Login')],
 63 |                     on_click=PageEvent(name='tab', push_path='/auth/login/github', context={'kind': 'github'}),
 64 |                     active='/auth/login/github',
 65 |                 ),
 66 |             ],
 67 |             mode='tabs',
 68 |             class_name='+ mb-4',
 69 |         ),
 70 |         c.ServerLoad(
 71 |             path='/auth/login/content/{kind}',
 72 |             load_trigger=PageEvent(name='tab'),
 73 |             components=auth_login_content(kind),
 74 |         ),
 75 |         title='Authentication',
 76 |     )
 77 | 
 78 | 
 79 | @router.get('/login/content/{kind}', response_model=FastUI, response_model_exclude_none=True)
 80 | def auth_login_content(kind: LoginKind) -> list[AnyComponent]:
 81 |     match kind:
 82 |         case 'password':
 83 |             return [
 84 |                 c.Heading(text='Password Login', level=3),
 85 |                 c.Paragraph(
 86 |                     text=(
 87 |                         'This is a very simple demo of password authentication, '
 88 |                         'here you can "login" with any email address and password.'
 89 |                     )
 90 |                 ),
 91 |                 c.Paragraph(text='(Passwords are not saved and is email stored in the browser via a JWT only)'),
 92 |                 c.ModelForm(model=LoginForm, submit_url='/api/auth/login', display_mode='page'),
 93 |             ]
 94 |         case 'github':
 95 |             return [
 96 |                 c.Heading(text='GitHub Login', level=3),
 97 |                 c.Paragraph(text='Demo of GitHub authentication.'),
 98 |                 c.Paragraph(text='(Credentials are stored in the browser via a JWT only)'),
 99 |                 c.Button(text='Login with GitHub', on_click=GoToEvent(url='/auth/login/github/gen')),
100 |             ]
101 |         case _:
102 |             raise ValueError(f'Invalid kind {kind!r}')
103 | 
104 | 
105 | class LoginForm(BaseModel):
106 |     email: EmailStr = Field(
107 |         title='Email Address', description='Enter whatever value you like', json_schema_extra={'autocomplete': 'email'}
108 |     )
109 |     password: SecretStr = Field(
110 |         title='Password',
111 |         description='Enter whatever value you like, password is not checked',
112 |         json_schema_extra={'autocomplete': 'current-password'},
113 |     )
114 | 
115 | 
116 | @router.post('/login', response_model=FastUI, response_model_exclude_none=True)
117 | async def login_form_post(form: Annotated[LoginForm, fastui_form(LoginForm)]) -> list[AnyComponent]:
118 |     user = User(email=form.email, extra={})
119 |     token = user.encode_token()
120 |     return [c.FireEvent(event=AuthEvent(token=token, url='/auth/profile'))]
121 | 
122 | 
123 | @router.get('/profile', response_model=FastUI, response_model_exclude_none=True)
124 | async def profile(user: Annotated[User, Depends(User.from_request)]) -> list[AnyComponent]:
125 |     return demo_page(
126 |         c.Paragraph(text=f'You are logged in as "{user.email}".'),
127 |         c.Button(text='Logout', on_click=PageEvent(name='submit-form')),
128 |         c.Heading(text='User Data:', level=3),
129 |         c.Code(language='json', text=json.dumps(asdict(user), indent=2)),
130 |         c.Form(
131 |             submit_url='/api/auth/logout',
132 |             form_fields=[c.FormFieldInput(name='test', title='', initial='data', html_type='hidden')],
133 |             footer=[],
134 |             submit_trigger=PageEvent(name='submit-form'),
135 |         ),
136 |         title='Authentication',
137 |     )
138 | 
139 | 
140 | @router.post('/logout', response_model=FastUI, response_model_exclude_none=True)
141 | async def logout_form_post() -> list[AnyComponent]:
142 |     return [c.FireEvent(event=AuthEvent(token=False, url='/auth/login/password'))]
143 | 
144 | 
145 | @router.get('/login/github/gen', response_model=FastUI, response_model_exclude_none=True)
146 | async def auth_github_gen(github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)]) -> list[AnyComponent]:
147 |     auth_url = await github_auth.authorization_url()
148 |     return [c.FireEvent(event=GoToEvent(url=auth_url))]
149 | 
150 | 
151 | @router.get('/login/github/redirect', response_model=FastUI, response_model_exclude_none=True)
152 | async def github_redirect(
153 |     code: str,
154 |     state: str | None,
155 |     github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)],
156 | ) -> list[AnyComponent]:
157 |     exchange = await github_auth.exchange_code(code, state)
158 |     user_info, emails = await asyncio.gather(
159 |         github_auth.get_github_user(exchange), github_auth.get_github_user_emails(exchange)
160 |     )
161 |     user = User(
162 |         email=next((e.email for e in emails if e.primary and e.verified), None),
163 |         extra={
164 |             'github_user_info': user_info.model_dump(),
165 |             'github_emails': [e.model_dump() for e in emails],
166 |         },
167 |     )
168 |     token = user.encode_token()
169 |     return [c.FireEvent(event=AuthEvent(token=token, url='/auth/profile'))]
170 | 


--------------------------------------------------------------------------------
/demo/forms.py:
--------------------------------------------------------------------------------
  1 | from __future__ import annotations as _annotations
  2 | 
  3 | import enum
  4 | from collections import defaultdict
  5 | from datetime import date
  6 | from typing import Annotated, Literal, TypeAlias
  7 | 
  8 | from fastapi import APIRouter, Request, UploadFile
  9 | from fastui import AnyComponent, FastUI
 10 | from fastui import components as c
 11 | from fastui.events import GoToEvent, PageEvent
 12 | from fastui.forms import FormFile, SelectSearchResponse, Textarea, fastui_form
 13 | from httpx import AsyncClient
 14 | from pydantic import BaseModel, EmailStr, Field, SecretStr, field_validator
 15 | from pydantic_core import PydanticCustomError
 16 | 
 17 | from .shared import demo_page
 18 | 
 19 | router = APIRouter()
 20 | 
 21 | 
 22 | @router.get('/search', response_model=SelectSearchResponse)
 23 | async def search_view(request: Request, q: str) -> SelectSearchResponse:
 24 |     path_ends = f'name/{q}' if q else 'all'
 25 |     client: AsyncClient = request.app.state.httpx_client
 26 |     r = await client.get(f'https://restcountries.com/v3.1/{path_ends}')
 27 |     if r.status_code == 404:
 28 |         options = []
 29 |     else:
 30 |         r.raise_for_status()
 31 |         data = r.json()
 32 |         if path_ends == 'all':
 33 |             # if we got all, filter to the 20 most populous countries
 34 |             data.sort(key=lambda x: x['population'], reverse=True)
 35 |             data = data[0:20]
 36 |             data.sort(key=lambda x: x['name']['common'])
 37 | 
 38 |         regions = defaultdict(list)
 39 |         for co in data:
 40 |             regions[co['region']].append({'value': co['cca3'], 'label': co['name']['common']})
 41 |         options = [{'label': k, 'options': v} for k, v in regions.items()]
 42 |     return SelectSearchResponse(options=options)
 43 | 
 44 | 
 45 | FormKind: TypeAlias = Literal['login', 'select', 'big']
 46 | 
 47 | 
 48 | @router.get('/{kind}', response_model=FastUI, response_model_exclude_none=True)
 49 | def forms_view(kind: FormKind) -> list[AnyComponent]:
 50 |     return demo_page(
 51 |         c.LinkList(
 52 |             links=[
 53 |                 c.Link(
 54 |                     components=[c.Text(text='Login Form')],
 55 |                     on_click=PageEvent(name='change-form', push_path='/forms/login', context={'kind': 'login'}),
 56 |                     active='/forms/login',
 57 |                 ),
 58 |                 c.Link(
 59 |                     components=[c.Text(text='Select Form')],
 60 |                     on_click=PageEvent(name='change-form', push_path='/forms/select', context={'kind': 'select'}),
 61 |                     active='/forms/select',
 62 |                 ),
 63 |                 c.Link(
 64 |                     components=[c.Text(text='Big Form')],
 65 |                     on_click=PageEvent(name='change-form', push_path='/forms/big', context={'kind': 'big'}),
 66 |                     active='/forms/big',
 67 |                 ),
 68 |             ],
 69 |             mode='tabs',
 70 |             class_name='+ mb-4',
 71 |         ),
 72 |         c.ServerLoad(
 73 |             path='/forms/content/{kind}',
 74 |             load_trigger=PageEvent(name='change-form'),
 75 |             components=form_content(kind),
 76 |         ),
 77 |         title='Forms',
 78 |     )
 79 | 
 80 | 
 81 | @router.get('/content/{kind}', response_model=FastUI, response_model_exclude_none=True)
 82 | def form_content(kind: FormKind):
 83 |     match kind:
 84 |         case 'login':
 85 |             return [
 86 |                 c.Heading(text='Login Form', level=2),
 87 |                 c.Paragraph(text='Simple login form with email and password.'),
 88 |                 c.ModelForm(model=LoginForm, display_mode='page', submit_url='/api/forms/login'),
 89 |             ]
 90 |         case 'select':
 91 |             return [
 92 |                 c.Heading(text='Select Form', level=2),
 93 |                 c.Paragraph(text='Form showing different ways of doing select.'),
 94 |                 c.ModelForm(model=SelectForm, display_mode='page', submit_url='/api/forms/select'),
 95 |             ]
 96 |         case 'big':
 97 |             return [
 98 |                 c.Heading(text='Large Form', level=2),
 99 |                 c.Paragraph(text='Form with a lot of fields.'),
100 |                 c.ModelForm(model=BigModel, display_mode='page', submit_url='/api/forms/big'),
101 |             ]
102 |         case _:
103 |             raise ValueError(f'Invalid kind {kind!r}')
104 | 
105 | 
106 | class LoginForm(BaseModel):
107 |     email: EmailStr = Field(title='Email Address', description="Try 'x@y' to trigger server side validation")
108 |     password: SecretStr
109 | 
110 | 
111 | @router.post('/login', response_model=FastUI, response_model_exclude_none=True)
112 | async def login_form_post(form: Annotated[LoginForm, fastui_form(LoginForm)]):
113 |     print(form)
114 |     return [c.FireEvent(event=GoToEvent(url='/'))]
115 | 
116 | 
117 | class ToolEnum(str, enum.Enum):
118 |     hammer = 'hammer'
119 |     screwdriver = 'screwdriver'
120 |     saw = 'saw'
121 |     claw_hammer = 'claw_hammer'
122 | 
123 | 
124 | class SelectForm(BaseModel):
125 |     select_single: ToolEnum = Field(title='Select Single')
126 |     select_multiple: list[ToolEnum] = Field(title='Select Multiple')
127 |     search_select_single: str = Field(json_schema_extra={'search_url': '/api/forms/search'})
128 |     search_select_multiple: list[str] = Field(json_schema_extra={'search_url': '/api/forms/search'})
129 | 
130 |     @field_validator('select_multiple', 'search_select_multiple', mode='before')
131 |     @classmethod
132 |     def correct_select_multiple(cls, v: list[str]) -> list[str]:
133 |         if isinstance(v, list):
134 |             return v
135 |         else:
136 |             return [v]
137 | 
138 | 
139 | @router.post('/select', response_model=FastUI, response_model_exclude_none=True)
140 | async def select_form_post(form: Annotated[SelectForm, fastui_form(SelectForm)]):
141 |     # print(form)
142 |     return [c.FireEvent(event=GoToEvent(url='/'))]
143 | 
144 | 
145 | class SizeModel(BaseModel):
146 |     width: int = Field(description='This is a field of a nested model')
147 |     height: int = Field(description='This is a field of a nested model')
148 | 
149 | 
150 | class BigModel(BaseModel):
151 |     name: str | None = Field(
152 |         None, description='This field is not required, it must start with a capital letter if provided'
153 |     )
154 |     info: Annotated[str | None, Textarea(rows=5)] = Field(None, description='Optional free text information about you.')
155 |     repo: str = Field(json_schema_extra={'placeholder': '{org}/{repo}'}, title='GitHub repository')
156 |     profile_pic: Annotated[UploadFile, FormFile(accept='image/*', max_size=16_000)] = Field(
157 |         description='Upload a profile picture, must not be more than 16kb'
158 |     )
159 |     profile_pics: Annotated[list[UploadFile], FormFile(accept='image/*')] | None = Field(
160 |         None, description='Upload multiple images'
161 |     )
162 |     dob: date = Field(title='Date of Birth', description='Your date of birth, this is required hence bold')
163 |     human: bool | None = Field(
164 |         None, title='Is human', description='Are you human?', json_schema_extra={'mode': 'switch'}
165 |     )
166 |     size: SizeModel
167 | 
168 |     position: tuple[
169 |         Annotated[int, Field(description='X Coordinate')],
170 |         Annotated[int, Field(description='Y Coordinate')],
171 |     ]
172 | 
173 |     @field_validator('name')
174 |     def name_validator(cls, v: str | None) -> str:
175 |         if v and v[0].islower():
176 |             raise PydanticCustomError('lower', 'Name must start with a capital letter')
177 |         return v
178 | 
179 | 
180 | @router.post('/big', response_model=FastUI, response_model_exclude_none=True)
181 | async def big_form_post(form: Annotated[BigModel, fastui_form(BigModel)]):
182 |     print(form)
183 |     return [c.FireEvent(event=GoToEvent(url='/'))]
184 | 


--------------------------------------------------------------------------------
/src/python-fastui/fastui/components/forms.py:
--------------------------------------------------------------------------------
  1 | import typing as _t
  2 | from abc import ABC
  3 | 
  4 | import pydantic
  5 | import typing_extensions as _te
  6 | 
  7 | from .. import class_name as _class_name
  8 | from .. import events, forms
  9 | from .. import types as _types
 10 | from ..base import BaseModel
 11 | 
 12 | if _t.TYPE_CHECKING:
 13 |     from . import AnyComponent
 14 | 
 15 | InputHtmlType = _t.Literal['text', 'date', 'datetime-local', 'time', 'email', 'url', 'number', 'password', 'hidden']
 16 | 
 17 | 
 18 | class BaseFormField(BaseModel, ABC, defer_build=True):
 19 |     """Base class for form fields."""
 20 | 
 21 |     name: str
 22 |     """Name of the field."""
 23 | 
 24 |     title: list[str] | str
 25 |     """Title of the field to display. Can be a list of strings for multi-line titles."""
 26 | 
 27 |     required: bool = False
 28 |     """Whether the field is required. Defaults to False."""
 29 | 
 30 |     error: str | None = None
 31 |     """Error message to display if the field is invalid."""
 32 | 
 33 |     locked: bool = False
 34 |     """Whether the field is locked. Defaults to False."""
 35 | 
 36 |     description: str | None = None
 37 |     """Description of the field."""
 38 | 
 39 |     display_mode: _t.Literal['default', 'inline'] | None = None
 40 |     """Display mode for the field."""
 41 | 
 42 |     class_name: _class_name.ClassNameField = None
 43 |     """Optional class name to apply to the field's HTML component."""
 44 | 
 45 | 
 46 | class FormFieldInput(BaseFormField):
 47 |     """Form field for basic input."""
 48 | 
 49 |     html_type: InputHtmlType = 'text'
 50 |     """HTML input type for the field."""
 51 | 
 52 |     initial: str | float | None = None
 53 |     """Initial value for the field."""
 54 | 
 55 |     placeholder: str | None = None
 56 |     """Placeholder text for the field."""
 57 | 
 58 |     autocomplete: str | None = None
 59 |     """Autocomplete value for the field."""
 60 | 
 61 |     type: _t.Literal['FormFieldInput'] = 'FormFieldInput'
 62 |     """The type of the component. Always 'FormFieldInput'."""
 63 | 
 64 | 
 65 | class FormFieldTextarea(BaseFormField):
 66 |     """Form field for text area input."""
 67 | 
 68 |     rows: int | None = None
 69 |     """Number of rows for the text area."""
 70 | 
 71 |     cols: int | None = None
 72 |     """Number of columns for the text area."""
 73 | 
 74 |     initial: str | None = None
 75 |     """Initial value for the text area."""
 76 | 
 77 |     placeholder: str | None = None
 78 |     """Placeholder text for the text area."""
 79 | 
 80 |     autocomplete: str | None = None
 81 |     """Autocomplete value for the text area."""
 82 | 
 83 |     type: _t.Literal['FormFieldTextarea'] = 'FormFieldTextarea'
 84 |     """The type of the component. Always 'FormFieldTextarea'."""
 85 | 
 86 | 
 87 | class FormFieldBoolean(BaseFormField):
 88 |     """Form field for boolean input."""
 89 | 
 90 |     initial: bool | None = None
 91 |     """Initial value for the field."""
 92 | 
 93 |     mode: _t.Literal['checkbox', 'switch'] = 'checkbox'
 94 |     """Mode for the boolean field."""
 95 | 
 96 |     type: _t.Literal['FormFieldBoolean'] = 'FormFieldBoolean'
 97 |     """The type of the component. Always 'FormFieldBoolean'."""
 98 | 
 99 | 
100 | class FormFieldFile(BaseFormField):
101 |     """Form field for file input."""
102 | 
103 |     multiple: bool | None = None
104 |     """Whether multiple files can be selected."""
105 | 
106 |     accept: str | None = None
107 |     """Accepted file types."""
108 | 
109 |     type: _t.Literal['FormFieldFile'] = 'FormFieldFile'
110 |     """The type of the component. Always 'FormFieldFile'."""
111 | 
112 | 
113 | class FormFieldSelect(BaseFormField):
114 |     """Form field for select input."""
115 | 
116 |     options: forms.SelectOptions
117 |     """Options for the select field."""
118 | 
119 |     multiple: bool | None = None
120 |     """Whether multiple options can be selected."""
121 | 
122 |     initial: list[str] | str | None = None
123 |     """Initial value for the field."""
124 | 
125 |     vanilla: bool | None = None
126 |     """Whether to use a vanilla (plain) select element."""
127 | 
128 |     placeholder: str | None = None
129 |     """Placeholder text for the field."""
130 | 
131 |     autocomplete: str | None = None
132 |     """Autocomplete value for the field."""
133 | 
134 |     type: _t.Literal['FormFieldSelect'] = 'FormFieldSelect'
135 |     """The type of the component. Always 'FormFieldSelect'."""
136 | 
137 | 
138 | class FormFieldSelectSearch(BaseFormField):
139 |     """Form field for searchable select input."""
140 | 
141 |     search_url: str
142 |     """URL to search for options."""
143 | 
144 |     multiple: bool | None = None
145 |     """Whether multiple options can be selected."""
146 | 
147 |     initial: forms.SelectOption | None = None
148 |     """Initial value for the field."""
149 | 
150 |     debounce: int | None = None
151 |     """Time in milliseconds to debounce requests by. Defaults to 300ms."""
152 | 
153 |     placeholder: str | None = None
154 |     """Placeholder text for the field."""
155 | 
156 |     type: _t.Literal['FormFieldSelectSearch'] = 'FormFieldSelectSearch'
157 |     """The type of the component. Always 'FormFieldSelectSearch'."""
158 | 
159 | 
160 | FormField = (
161 |     FormFieldInput | FormFieldTextarea | FormFieldBoolean | FormFieldFile | FormFieldSelect | FormFieldSelectSearch
162 | )
163 | 
164 | """Union of all form field types."""
165 | 
166 | 
167 | class BaseForm(BaseModel, ABC, defer_build=True, extra='forbid'):
168 |     """Base class for forms."""
169 | 
170 |     submit_url: str
171 |     """URL to submit the form data to."""
172 | 
173 |     initial: dict[str, _types.JsonData] | None = None
174 |     """Initial values for the form fields, mapping field names to values."""
175 | 
176 |     method: _t.Literal['POST', 'GOTO', 'GET'] = 'POST'
177 |     """HTTP method to use for the form submission."""
178 | 
179 |     display_mode: _t.Literal['default', 'page', 'inline'] | None = None
180 |     """Display mode for the form."""
181 | 
182 |     submit_on_change: bool | None = None
183 |     """Whether to submit the form on change."""
184 | 
185 |     submit_trigger: events.PageEvent | None = None
186 |     """Event to trigger form submission."""
187 | 
188 |     loading: 'list[AnyComponent] | None' = None
189 |     """Components to display while the form is submitting."""
190 | 
191 |     footer: 'list[AnyComponent] | None' = None
192 |     """Components to display in the form footer."""
193 | 
194 |     class_name: _class_name.ClassNameField = None
195 |     """Optional class name to apply to the form's HTML component."""
196 | 
197 |     @pydantic.model_validator(mode='after')
198 |     def default_footer(self) -> _te.Self:
199 |         if self.footer is None and self.display_mode == 'inline':
200 |             self.footer = []
201 |         return self
202 | 
203 | 
204 | class Form(BaseForm, defer_build=True):
205 |     """Form component."""
206 | 
207 |     form_fields: list[FormField]
208 |     """List of form fields."""
209 | 
210 |     type: _t.Literal['Form'] = 'Form'
211 |     """The type of the component. Always 'Form'."""
212 | 
213 | 
214 | FormFieldsModel = _t.TypeVar('FormFieldsModel', bound=pydantic.BaseModel)
215 | 
216 | # In Python 3.14, when evaluating the annotation of field `model`, `type` would refer
217 | # to the assigned value to the field `type` (of value `'ModelForm'`):
218 | type_ = type
219 | 
220 | 
221 | class ModelForm(BaseForm, defer_build=True):
222 |     """Form component generated from a Pydantic model."""
223 | 
224 |     model: type_[pydantic.BaseModel] = pydantic.Field(exclude=True)
225 |     """Pydantic model from which to generate the form."""
226 | 
227 |     type: _t.Literal['ModelForm'] = 'ModelForm'
228 |     """The type of the component. Always 'ModelForm'."""
229 | 
230 |     @pydantic.computed_field(alias='formFields')
231 |     def form_fields(self) -> list[FormField]:
232 |         from ..json_schema import model_json_schema_to_fields
233 | 
234 |         return model_json_schema_to_fields(self.model)
235 | 


--------------------------------------------------------------------------------