67606561d3
* partly add some radix-ui/themes based components * add @radix-ui/themes integration to top-level app * WiP: compile _app_wrap based on which component library is used TODO: working color mode * WiP get color mode working with agnostic provider still not perfect, as the RadixColorModeProvider seems to trip hydration errors when using color_mode_cond component, but for now, this provides a nice balance between the two libraries and allows them to interoperate. * WiP template _app.js instead of making a separate wrap file * WiP: use next-themes for consistent darkmode switching * strict pin chakra deps * Move ChakraColorModeProvider to separate js file * move nasty radix themes js code into js files * remove chakra from default imports * chakra fixup import to use .js extension * Add radix theme typography and layout components * do NOT special case the radix theme... avoid templating json and applying it, avoid non-customizable logic just add the radix Theme component as an app wrap if the user specifies it to rx.App, and any other app-wrap theme-like component could _also_ be used without having to change the code. this also allows different themes for different sections of the app by simply placing elements inside a different rdxt.theme wrapper. * Theme uses "radius" not "borderRadius" * move next-themes to main packages.json this is always used, regardless of the component library * test_app: test cases for app_wrap interface * Finish wrapping Button, Switch, and TextField components * docstring, comments, static fixups * debounce: use alias or tag when passing child Element Fix REF-830 * test_app: ruin my beautiful indentation * py38 compatibility * Add event triggers for switch and TextField * Add type hints for radix theme components * radix themes fixups from writing the tests * Add integration test for radix themes components * test_app: mock out package installation we only need the compile result, we're not actually trying to install packages * avoid incompatible version of @emotion/react * test_radix_themes: include theme_panel component * next-themes default scheme: "light" until all of our components look good in dark mode, need to keep the default as light mode regardless of the system setting.
92 lines
3.0 KiB
Python
92 lines
3.0 KiB
Python
"""Templates to use in the reflex compiler."""
|
|
|
|
from jinja2 import Environment, FileSystemLoader, Template
|
|
|
|
from reflex import constants
|
|
from reflex.utils.format import json_dumps
|
|
|
|
|
|
class ReflexJinjaEnvironment(Environment):
|
|
"""The template class for jinja environment."""
|
|
|
|
def __init__(self) -> None:
|
|
"""Set default environment."""
|
|
extensions = ["jinja2.ext.debug"]
|
|
super().__init__(
|
|
extensions=extensions,
|
|
trim_blocks=True,
|
|
lstrip_blocks=True,
|
|
)
|
|
self.filters["json_dumps"] = json_dumps
|
|
self.filters["react_setter"] = lambda state: f"set{state.capitalize()}"
|
|
self.loader = FileSystemLoader(constants.Templates.Dirs.JINJA_TEMPLATE)
|
|
self.globals["const"] = {
|
|
"socket": constants.CompileVars.SOCKET,
|
|
"result": constants.CompileVars.RESULT,
|
|
"router": constants.CompileVars.ROUTER,
|
|
"event_endpoint": constants.Endpoint.EVENT.name,
|
|
"events": constants.CompileVars.EVENTS,
|
|
"state": constants.CompileVars.STATE,
|
|
"final": constants.CompileVars.FINAL,
|
|
"processing": constants.CompileVars.PROCESSING,
|
|
"initial_result": {
|
|
constants.CompileVars.STATE: None,
|
|
constants.CompileVars.EVENTS: [],
|
|
constants.CompileVars.FINAL: True,
|
|
constants.CompileVars.PROCESSING: False,
|
|
},
|
|
"color_mode": constants.ColorMode.NAME,
|
|
"toggle_color_mode": constants.ColorMode.TOGGLE,
|
|
"use_color_mode": constants.ColorMode.USE,
|
|
"hydrate": constants.CompileVars.HYDRATE,
|
|
}
|
|
|
|
|
|
def get_template(name: str) -> Template:
|
|
"""Get render function that work with a template.
|
|
|
|
Args:
|
|
name: The template name. "/" is used as the path separator.
|
|
|
|
Returns:
|
|
A render function.
|
|
"""
|
|
return ReflexJinjaEnvironment().get_template(name=name)
|
|
|
|
|
|
# Template for the Reflex config file.
|
|
RXCONFIG = get_template("app/rxconfig.py.jinja2")
|
|
|
|
# Code to render a NextJS Document root.
|
|
DOCUMENT_ROOT = get_template("web/pages/_document.js.jinja2")
|
|
|
|
# Code to render NextJS App root.
|
|
APP_ROOT = get_template("web/pages/_app.js.jinja2")
|
|
|
|
# Template for the theme file.
|
|
THEME = get_template("web/utils/theme.js.jinja2")
|
|
|
|
# Template for the context file.
|
|
CONTEXT = get_template("web/utils/context.js.jinja2")
|
|
|
|
# Template for Tailwind config.
|
|
TAILWIND_CONFIG = get_template("web/tailwind.config.js.jinja2")
|
|
|
|
# Template to render a component tag.
|
|
COMPONENT = get_template("web/pages/component.js.jinja2")
|
|
|
|
# Code to render a single NextJS page.
|
|
PAGE = get_template("web/pages/index.js.jinja2")
|
|
|
|
# Code to render the custom components page.
|
|
COMPONENTS = get_template("web/pages/custom_component.js.jinja2")
|
|
|
|
# Sitemap config file.
|
|
SITEMAP_CONFIG = "module.exports = {config}".format
|
|
|
|
# Code to render the root stylesheet.
|
|
STYLE = get_template("web/styles/styles.css.jinja2")
|
|
|
|
# Code that generate the package json file
|
|
PACKAGE_JSON = get_template("web/package.json.jinja2")
|