compiler.py 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. """Compiler for the reflex apps."""
  2. from __future__ import annotations
  3. from functools import wraps
  4. from typing import Callable, List, Set, Tuple, Type
  5. from reflex import constants
  6. from reflex.compiler import templates, utils
  7. from reflex.components.component import Component, CustomComponent
  8. from reflex.state import State
  9. from reflex.style import Style
  10. from reflex.utils import imports
  11. from reflex.vars import ImportVar
  12. # Imports to be included in every Reflex app.
  13. DEFAULT_IMPORTS: imports.ImportDict = {
  14. "react": {
  15. ImportVar(tag="Fragment"),
  16. ImportVar(tag="useEffect"),
  17. ImportVar(tag="useRef"),
  18. ImportVar(tag="useState"),
  19. },
  20. "next/router": {ImportVar(tag="useRouter")},
  21. f"/{constants.STATE_PATH}": {
  22. ImportVar(tag="connect"),
  23. ImportVar(tag="processEvent"),
  24. ImportVar(tag="uploadFiles"),
  25. ImportVar(tag="E"),
  26. ImportVar(tag="isTrue"),
  27. ImportVar(tag="preventDefault"),
  28. ImportVar(tag="refs"),
  29. ImportVar(tag="getRefValue"),
  30. ImportVar(tag="getAllLocalStorageItems"),
  31. },
  32. "": {ImportVar(tag="focus-visible/dist/focus-visible")},
  33. "@chakra-ui/react": {
  34. ImportVar(tag=constants.USE_COLOR_MODE),
  35. ImportVar(tag="Box"),
  36. ImportVar(tag="Text"),
  37. },
  38. }
  39. def _compile_document_root(root: Component) -> str:
  40. """Compile the document root.
  41. Args:
  42. root: The document root to compile.
  43. Returns:
  44. The compiled document root.
  45. """
  46. return templates.DOCUMENT_ROOT.render(
  47. imports=utils.compile_imports(root.get_imports()),
  48. document=root.render(),
  49. )
  50. def _compile_theme(theme: dict) -> str:
  51. """Compile the theme.
  52. Args:
  53. theme: The theme to compile.
  54. Returns:
  55. The compiled theme.
  56. """
  57. return templates.THEME.render(theme=theme)
  58. def _compile_page(
  59. component: Component, state: Type[State], connect_error_component
  60. ) -> str:
  61. """Compile the component given the app state.
  62. Args:
  63. component: The component to compile.
  64. state: The app state.
  65. connect_error_component: The component to render on sever connection error.
  66. Returns:
  67. The compiled component.
  68. """
  69. # Merge the default imports with the app-specific imports.
  70. imports = utils.merge_imports(DEFAULT_IMPORTS, component.get_imports())
  71. imports = utils.compile_imports(imports)
  72. # Compile the code to render the component.
  73. return templates.PAGE.render(
  74. imports=imports,
  75. custom_codes=component.get_custom_code(),
  76. initial_state=utils.compile_state(state),
  77. state_name=state.get_name(),
  78. hooks=component.get_hooks(),
  79. render=component.render(),
  80. transports=constants.Transports.POLLING_WEBSOCKET.get_transports(),
  81. err_comp=connect_error_component.render() if connect_error_component else None,
  82. )
  83. def _compile_components(components: Set[CustomComponent]) -> str:
  84. """Compile the components.
  85. Args:
  86. components: The components to compile.
  87. Returns:
  88. The compiled components.
  89. """
  90. imports = {
  91. "react": {ImportVar(tag="memo")},
  92. f"/{constants.STATE_PATH}": {ImportVar(tag="E"), ImportVar(tag="isTrue")},
  93. }
  94. component_renders = []
  95. # Compile each component.
  96. for component in components:
  97. component_render, component_imports = utils.compile_custom_component(component)
  98. component_renders.append(component_render)
  99. imports = utils.merge_imports(imports, component_imports)
  100. # Compile the components page.
  101. return templates.COMPONENTS.render(
  102. imports=utils.compile_imports(imports),
  103. components=component_renders,
  104. )
  105. def _compile_tailwind(
  106. config: dict,
  107. ) -> str:
  108. """Compile the Tailwind config.
  109. Args:
  110. config: The Tailwind config.
  111. Returns:
  112. The compiled Tailwind config.
  113. """
  114. return templates.TAILWIND_CONFIG.render(
  115. **config,
  116. )
  117. def write_output(fn: Callable[..., Tuple[str, str]]):
  118. """Write the output of the function to a file.
  119. Args:
  120. fn: The function to decorate.
  121. Returns:
  122. The decorated function.
  123. """
  124. @wraps(fn)
  125. def wrapper(*args, write: bool = True) -> Tuple[str, str]:
  126. """Write the output of the function to a file.
  127. Args:
  128. *args: The arguments to pass to the function.
  129. write: Whether to write the output to a file.
  130. Returns:
  131. The path and code of the output.
  132. """
  133. path, code = fn(*args)
  134. if write:
  135. utils.write_page(path, code)
  136. return path, code
  137. return wrapper
  138. @write_output
  139. def compile_document_root(stylesheets: List[str]) -> Tuple[str, str]:
  140. """Compile the document root.
  141. Args:
  142. stylesheets: The stylesheets to include in the document root.
  143. Returns:
  144. The path and code of the compiled document root.
  145. """
  146. # Get the path for the output file.
  147. output_path = utils.get_page_path(constants.DOCUMENT_ROOT)
  148. # Create the document root.
  149. document_root = utils.create_document_root(stylesheets)
  150. # Compile the document root.
  151. code = _compile_document_root(document_root)
  152. return output_path, code
  153. @write_output
  154. def compile_theme(style: Style) -> Tuple[str, str]:
  155. """Compile the theme.
  156. Args:
  157. style: The style to compile.
  158. Returns:
  159. The path and code of the compiled theme.
  160. """
  161. output_path = utils.get_theme_path()
  162. # Create the theme.
  163. theme = utils.create_theme(style)
  164. # Compile the theme.
  165. code = _compile_theme(theme)
  166. return output_path, code
  167. @write_output
  168. def compile_page(
  169. path: str,
  170. component: Component,
  171. state: Type[State],
  172. connect_error_component: Component,
  173. ) -> Tuple[str, str]:
  174. """Compile a single page.
  175. Args:
  176. path: The path to compile the page to.
  177. component: The component to compile.
  178. state: The app state.
  179. connect_error_component: The component to render on sever connection error.
  180. Returns:
  181. The path and code of the compiled page.
  182. """
  183. # Get the path for the output file.
  184. output_path = utils.get_page_path(path)
  185. # Add the style to the component.
  186. code = _compile_page(component, state, connect_error_component)
  187. return output_path, code
  188. @write_output
  189. def compile_components(components: Set[CustomComponent]):
  190. """Compile the custom components.
  191. Args:
  192. components: The custom components to compile.
  193. Returns:
  194. The path and code of the compiled components.
  195. """
  196. # Get the path for the output file.
  197. output_path = utils.get_components_path()
  198. # Compile the components.
  199. code = _compile_components(components)
  200. return output_path, code
  201. @write_output
  202. def compile_tailwind(
  203. config: dict,
  204. ):
  205. """Compile the Tailwind config.
  206. Args:
  207. config: The Tailwind config.
  208. Returns:
  209. The compiled Tailwind config.
  210. """
  211. # Get the path for the output file.
  212. output_path = constants.TAILWIND_CONFIG
  213. # Compile the config.
  214. code = _compile_tailwind(config)
  215. return output_path, code
  216. def purge_web_pages_dir():
  217. """Empty out .web directory."""
  218. template_files = ["_app.js", "404.js"]
  219. utils.empty_dir(constants.WEB_PAGES_DIR, keep_files=template_files)