laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade to next js 15 and remove babel and enable turbo

Browse Source
This commit is contained in:
Khaleel Al-Adhami 2024-10-23 18:12:22 -07:00
parent 668e4022a4
commit 5c99656ca9
26 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
reflex/.templates/jinja/web/pages/_app.js.jinja2
View File

@ -1,11 +1,11 @@
{% extends "web/pages/base_page.js.jinja2" %} {% extends "web/pages/base_page.js.jinja2" %}
{% block early_imports %} {% block early_imports %}
import '/styles/styles.css' import '$/styles/styles.css'
{% endblock %} {% endblock %}
{% block declaration %} {% block declaration %}
import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js"; import { EventLoopProvider, StateProvider, defaultColorMode } from "$/utils/context.js";
import { ThemeProvider } from 'next-themes' import { ThemeProvider } from 'next-themes'
{% for library_alias, library_path in window_libraries %} {% for library_alias, library_path in window_libraries %}
import * as {{library_alias}} from "{{library_path}}"; import * as {{library_alias}} from "{{library_path}}";

2
reflex/.templates/jinja/web/utils/context.js.jinja2
View File

@ -1,5 +1,5 @@
import { createContext, useContext, useMemo, useReducer, useState } from "react" import { createContext, useContext, useMemo, useReducer, useState } from "react"
import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "/utils/state.js" import { applyDelta, Event, hydrateClientStorage, useEventLoop, refs } from "$/utils/state.js"
{% if initial_state %} {% if initial_state %}
export const initialState = {{ initial_state|json_dumps }} export const initialState = {{ initial_state|json_dumps }}

2
reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js
View File

@ -5,7 +5,7 @@ import {
defaultColorMode, defaultColorMode,
isDevMode, isDevMode,
lastCompiledTimeStamp lastCompiledTimeStamp
} from "/utils/context.js"; } from "$/utils/context.js";
export default function RadixThemesColorModeProvider({ children }) { export default function RadixThemesColorModeProvider({ children }) {
const { theme, resolvedTheme, setTheme } = useTheme(); const { theme, resolvedTheme, setTheme } = useTheme();

3
reflex/.templates/web/jsconfig.json
View File

@ -2,7 +2,8 @@
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"$/*": ["*"],
"@/*": ["public/*"] "@/*": ["public/*"]
} }
} }
} }

10
reflex/.templates/web/utils/state.js
View File

@ -2,7 +2,7 @@
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import JSON5 from "json5"; import JSON5 from "json5";
import env from "/env.json"; import env from "$/env.json";
import Cookies from "universal-cookie"; import Cookies from "universal-cookie";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import Router, { useRouter } from "next/router"; import Router, { useRouter } from "next/router";
@ -13,9 +13,8 @@ import {
state_name, state_name,
exception_state_name, exception_state_name,
} from "utils/context.js"; } from "utils/context.js";
import debounce from "/utils/helpers/debounce"; import debounce from "$/utils/helpers/debounce";
import throttle from "/utils/helpers/throttle"; import throttle from "$/utils/helpers/throttle";
import * as Babel from "@babel/standalone";
// Endpoint URLs. // Endpoint URLs.
const EVENTURL = env.EVENT; const EVENTURL = env.EVENT;
@ -139,8 +138,7 @@ export const evalReactComponent = async (component) => {
if (!window.React && window.__reflex) { if (!window.React && window.__reflex) {
window.React = window.__reflex.react; window.React = window.__reflex.react;
} }
const output = Babel.transform(component, { presets: ["react"] }).code; const encodedJs = encodeURIComponent(component);
const encodedJs = encodeURIComponent(output);
const dataUri = "data:text/javascript;charset=utf-8," + encodedJs; const dataUri = "data:text/javascript;charset=utf-8," + encodedJs;
const module = await eval(`import(dataUri)`); const module = await eval(`import(dataUri)`);
return module.default; return module.default;

2
reflex/app.py
View File

@ -679,7 +679,7 @@ class App(MiddlewareMixin, LifespanMixin, Base):
for i, tags in imports.items() for i, tags in imports.items()
if i not in constants.PackageJson.DEPENDENCIES if i not in constants.PackageJson.DEPENDENCIES
and i not in constants.PackageJson.DEV_DEPENDENCIES and i not in constants.PackageJson.DEV_DEPENDENCIES
and not any(i.startswith(prefix) for prefix in ["/", ".", "next/"]) and not any(i.startswith(prefix) for prefix in ["/", "$/", ".", "next/"])
and i != "" and i != ""
and any(tag.install for tag in tags) and any(tag.install for tag in tags)
} }

6
reflex/compiler/compiler.py
View File

@ -67,8 +67,8 @@ def _compile_app(app_root: Component) -> str:
window_libraries = [ window_libraries = [
(_normalize_library_name(name), name) for name in bundled_libraries (_normalize_library_name(name), name) for name in bundled_libraries
] + [ ] + [
("utils_context", f"/{constants.Dirs.UTILS}/context"), ("utils_context", f"$/{constants.Dirs.UTILS}/context"),
("utils_state", f"/{constants.Dirs.UTILS}/state"), ("utils_state", f"$/{constants.Dirs.UTILS}/state"),
] ]
return templates.APP_ROOT.render( return templates.APP_ROOT.render(
@ -228,7 +228,7 @@ def _compile_components(
""" """
imports = { imports = {
"react": [ImportVar(tag="memo")], "react": [ImportVar(tag="memo")],
f"/{constants.Dirs.STATE_PATH}": [ImportVar(tag="E"), ImportVar(tag="isTrue")], f"$/{constants.Dirs.STATE_PATH}": [ImportVar(tag="E"), ImportVar(tag="isTrue")],
} }
component_renders = [] component_renders = []

4
reflex/components/base/bare.py
View File

@ -62,7 +62,9 @@ class Bare(Component):
""" """
imports = super()._get_all_imports() imports = super()._get_all_imports()
if isinstance(self.contents, LiteralComponentVar): if isinstance(self.contents, LiteralComponentVar):
imports |= self.contents._var_value._get_all_imports() var_data = self.contents._get_all_var_data()
if var_data:
imports |= {k: list(v) for k, v in var_data.imports}
return imports return imports
def _get_all_dynamic_imports(self) -> set[str]: def _get_all_dynamic_imports(self) -> set[str]:

24
reflex/components/component.py
View File

@ -1314,7 +1314,9 @@ class Component(BaseComponent, ABC):
if self._get_ref_hook(): if self._get_ref_hook():
# Handle hooks needed for attaching react refs to DOM nodes. # Handle hooks needed for attaching react refs to DOM nodes.
_imports.setdefault("react", set()).add(ImportVar(tag="useRef")) _imports.setdefault("react", set()).add(ImportVar(tag="useRef"))
_imports.setdefault(f"/{Dirs.STATE_PATH}", set()).add(ImportVar(tag="refs")) _imports.setdefault(f"$/{Dirs.STATE_PATH}", set()).add(
ImportVar(tag="refs")
)
if self._get_mount_lifecycle_hook(): if self._get_mount_lifecycle_hook():
# Handle hooks for `on_mount` / `on_unmount`. # Handle hooks for `on_mount` / `on_unmount`.
@ -1671,7 +1673,7 @@ class CustomComponent(Component):
"""A custom user-defined component.""" """A custom user-defined component."""
# Use the components library. # Use the components library.
library = f"/{Dirs.COMPONENTS_PATH}" library = f"$/{Dirs.COMPONENTS_PATH}"
# The function that creates the component. # The function that creates the component.
component_fn: Callable[..., Component] = Component.create component_fn: Callable[..., Component] = Component.create
@ -2511,18 +2513,12 @@ class LiteralComponentVar(CachedVarOperation, LiteralVar, ComponentVar):
VarData( VarData(
imports=self._var_value._get_all_imports(), imports=self._var_value._get_all_imports(),
), ),
*( VarData(
[ imports={
VarData( "react": [
imports={ ImportVar(tag="Fragment"),
"react": [ ],
ImportVar(tag="Fragment"), }
],
}
)
]
if not self._var_value.tag
else []
), ),
) )

4
reflex/components/core/banner.py
View File

@ -66,8 +66,8 @@ class WebsocketTargetURL(Var):
_js_expr="getBackendURL(env.EVENT).href", _js_expr="getBackendURL(env.EVENT).href",
_var_data=VarData( _var_data=VarData(
imports={ imports={
"/env.json": [ImportVar(tag="env", is_default=True)], "$/env.json": [ImportVar(tag="env", is_default=True)],
f"/{Dirs.STATE_PATH}": [ImportVar(tag="getBackendURL")], f"$/{Dirs.STATE_PATH}": [ImportVar(tag="getBackendURL")],
}, },
), ),
_var_type=WebsocketTargetURL, _var_type=WebsocketTargetURL,

2
reflex/components/core/client_side_routing.py
View File

@ -21,7 +21,7 @@ route_not_found: Var = Var(_js_expr=constants.ROUTE_NOT_FOUND)
class ClientSideRouting(Component): class ClientSideRouting(Component):
"""The client-side routing component.""" """The client-side routing component."""
library = "/utils/client_side_routing" library = "$/utils/client_side_routing"
tag = "useClientSideRouting" tag = "useClientSideRouting"
def add_hooks(self) -> list[str]: def add_hooks(self) -> list[str]:

2
reflex/components/core/clipboard.py
View File

@ -67,7 +67,7 @@ class Clipboard(Fragment):
The import dict for the component. The import dict for the component.
""" """
return { return {
"/utils/helpers/paste.js": ImportVar( "$/utils/helpers/paste.js": ImportVar(
tag="usePasteHandler", is_default=True tag="usePasteHandler", is_default=True
), ),
} }

2
reflex/components/core/cond.py
View File

@ -15,7 +15,7 @@ from reflex.vars.base import LiteralVar, Var
from reflex.vars.number import ternary_operation from reflex.vars.number import ternary_operation
_IS_TRUE_IMPORT: ImportDict = { _IS_TRUE_IMPORT: ImportDict = {
f"/{Dirs.STATE_PATH}": [ImportVar(tag="isTrue")], f"$/{Dirs.STATE_PATH}": [ImportVar(tag="isTrue")],
} }

8
reflex/components/core/upload.py
View File

@ -36,7 +36,7 @@ DEFAULT_UPLOAD_ID: str = "default"
upload_files_context_var_data: VarData = VarData( upload_files_context_var_data: VarData = VarData(
imports={ imports={
"react": "useContext", "react": "useContext",
f"/{Dirs.CONTEXTS_PATH}": "UploadFilesContext", f"$/{Dirs.CONTEXTS_PATH}": "UploadFilesContext",
}, },
hooks={ hooks={
"const [filesById, setFilesById] = useContext(UploadFilesContext);": None, "const [filesById, setFilesById] = useContext(UploadFilesContext);": None,
@ -141,8 +141,8 @@ uploaded_files_url_prefix = Var(
_js_expr="getBackendURL(env.UPLOAD)", _js_expr="getBackendURL(env.UPLOAD)",
_var_data=VarData( _var_data=VarData(
imports={ imports={
f"/{Dirs.STATE_PATH}": "getBackendURL", f"$/{Dirs.STATE_PATH}": "getBackendURL",
"/env.json": ImportVar(tag="env", is_default=True), "$/env.json": ImportVar(tag="env", is_default=True),
} }
), ),
).to(str) ).to(str)
@ -177,7 +177,7 @@ def _on_drop_spec(files: Var) -> Tuple[Var[Any]]:
class UploadFilesProvider(Component): class UploadFilesProvider(Component):
"""AppWrap component that provides a dict of selected files by ID via useContext.""" """AppWrap component that provides a dict of selected files by ID via useContext."""
library = f"/{Dirs.CONTEXTS_PATH}" library = f"$/{Dirs.CONTEXTS_PATH}"
tag = "UploadFilesProvider" tag = "UploadFilesProvider"

2
reflex/components/datadisplay/dataeditor.py
View File

@ -344,7 +344,7 @@ class DataEditor(NoSSRComponent):
return { return {
"": f"{format.format_library_name(self.library)}/dist/index.css", "": f"{format.format_library_name(self.library)}/dist/index.css",
self.library: "GridCellKind", self.library: "GridCellKind",
"/utils/helpers/dataeditor.js": ImportVar( "$/utils/helpers/dataeditor.js": ImportVar(
tag="formatDataEditorCells", is_default=False, install=False tag="formatDataEditorCells", is_default=False, install=False
), ),
} }

10
reflex/components/dynamic.py
View File

@ -63,6 +63,9 @@ def load_dynamic_serializer():
""" """
# Causes a circular import, so we import here. # Causes a circular import, so we import here.
from reflex.compiler import templates, utils from reflex.compiler import templates, utils
from reflex.components.base.bare import Bare
component = Bare.create(Var.create(component))
rendered_components = {} rendered_components = {}
# Include dynamic imports in the shared component. # Include dynamic imports in the shared component.
@ -127,14 +130,15 @@ def load_dynamic_serializer():
module_code_lines[ix] = line.replace( module_code_lines[ix] = line.replace(
"export function", "export default function", 1 "export function", "export default function", 1
) )
line_stripped = line.strip()
if line_stripped.startswith("{") and line_stripped.endswith("}"):
module_code_lines[ix] = line_stripped[1:-1]
module_code_lines.insert(0, "const React = window.__reflex.react;") module_code_lines.insert(0, "const React = window.__reflex.react;")
return "\n".join( return "\n".join(
[ [
"//__reflex_evaluate", "//__reflex_evaluate",
"/** @jsx jsx */",
"const { jsx } = window.__reflex['@emotion/react']",
*module_code_lines, *module_code_lines,
] ]
) )
@ -157,7 +161,7 @@ def load_dynamic_serializer():
merge_var_data=VarData.merge( merge_var_data=VarData.merge(
VarData( VarData(
imports={ imports={
f"/{constants.Dirs.STATE_PATH}": [ f"$/{constants.Dirs.STATE_PATH}": [
imports.ImportVar(tag="evalReactComponent"), imports.ImportVar(tag="evalReactComponent"),
], ],
"react": [ "react": [

2
reflex/components/el/elements/forms.py
View File

@ -187,7 +187,7 @@ class Form(BaseHTML):
""" """
return { return {
"react": "useCallback", "react": "useCallback",
f"/{Dirs.STATE_PATH}": ["getRefValue", "getRefValues"], f"$/{Dirs.STATE_PATH}": ["getRefValue", "getRefValues"],
} }
def add_hooks(self) -> list[str]: def add_hooks(self) -> list[str]:

4
reflex/components/radix/themes/base.py
View File

@ -221,7 +221,7 @@ class Theme(RadixThemesComponent):
The import dict. The import dict.
""" """
_imports: ImportDict = { _imports: ImportDict = {
"/utils/theme.js": [ImportVar(tag="theme", is_default=True)], "$/utils/theme.js": [ImportVar(tag="theme", is_default=True)],
} }
if get_config().tailwind is None: if get_config().tailwind is None:
# When tailwind is disabled, import the radix-ui styles directly because they will # When tailwind is disabled, import the radix-ui styles directly because they will
@ -265,7 +265,7 @@ class ThemePanel(RadixThemesComponent):
class RadixThemesColorModeProvider(Component): class RadixThemesColorModeProvider(Component):
"""Next-themes integration for radix themes components.""" """Next-themes integration for radix themes components."""
library = "/components/reflex/radix_themes_color_mode_provider.js" library = "$/components/reflex/radix_themes_color_mode_provider.js"
tag = "RadixThemesColorModeProvider" tag = "RadixThemesColorModeProvider"
is_default = True is_default = True

2
reflex/components/sonner/toast.py
View File

@ -251,7 +251,7 @@ class Toaster(Component):
_js_expr=f"{toast_ref} = toast", _js_expr=f"{toast_ref} = toast",
_var_data=VarData( _var_data=VarData(
imports={ imports={
"/utils/state": [ImportVar(tag="refs")], "$/utils/state": [ImportVar(tag="refs")],
self.library: [ImportVar(tag="toast", install=False)], self.library: [ImportVar(tag="toast", install=False)],
} }
), ),

4
reflex/constants/compiler.py
View File

@ -114,8 +114,8 @@ class Imports(SimpleNamespace):
EVENTS = { EVENTS = {
"react": [ImportVar(tag="useContext")], "react": [ImportVar(tag="useContext")],
f"/{Dirs.CONTEXTS_PATH}": [ImportVar(tag="EventLoopContext")], f"$/{Dirs.CONTEXTS_PATH}": [ImportVar(tag="EventLoopContext")],
f"/{Dirs.STATE_PATH}": [ImportVar(tag=CompileVars.TO_EVENT)], f"$/{Dirs.STATE_PATH}": [ImportVar(tag=CompileVars.TO_EVENT)],
} }

5
reflex/constants/installer.py
View File

@ -165,7 +165,7 @@ class PackageJson(SimpleNamespace):
class Commands(SimpleNamespace): class Commands(SimpleNamespace):
"""The commands to define in package.json.""" """The commands to define in package.json."""
DEV = "next dev" DEV = "next dev --turbo"
EXPORT = "next build" EXPORT = "next build"
EXPORT_SITEMAP = "next build && next-sitemap" EXPORT_SITEMAP = "next build && next-sitemap"
PROD = "next start" PROD = "next start"
@ -173,11 +173,10 @@ class PackageJson(SimpleNamespace):
PATH = "package.json" PATH = "package.json"
DEPENDENCIES = { DEPENDENCIES = {
"@babel/standalone": "7.25.8",
"@emotion/react": "11.13.3", "@emotion/react": "11.13.3",
"axios": "1.7.7", "axios": "1.7.7",
"json5": "2.2.3", "json5": "2.2.3",
"next": "14.2.15", "next": "15.0.1",
"next-sitemap": "4.2.3", "next-sitemap": "4.2.3",
"next-themes": "0.3.0", "next-themes": "0.3.0",
"react": "18.3.1", "react": "18.3.1",

2
reflex/experimental/client_state.py
View File

@ -21,7 +21,7 @@ NoValue = object()
_refs_import = { _refs_import = {
f"/{constants.Dirs.STATE_PATH}": [ImportVar(tag="refs")], f"$/{constants.Dirs.STATE_PATH}": [ImportVar(tag="refs")],
} }

2
reflex/style.py
View File

@ -23,7 +23,7 @@ LiteralColorMode = Literal["system", "light", "dark"]
# Reference the global ColorModeContext # Reference the global ColorModeContext
color_mode_imports = { color_mode_imports = {
f"/{constants.Dirs.CONTEXTS_PATH}": [ImportVar(tag="ColorModeContext")], f"$/{constants.Dirs.CONTEXTS_PATH}": [ImportVar(tag="ColorModeContext")],
"react": [ImportVar(tag="useContext")], "react": [ImportVar(tag="useContext")],
} }

6
reflex/vars/base.py
View File

@ -217,7 +217,7 @@ class VarData:
): None ): None
}, },
imports={ imports={
f"/{constants.Dirs.CONTEXTS_PATH}": [ImportVar(tag="StateContexts")], f"$/{constants.Dirs.CONTEXTS_PATH}": [ImportVar(tag="StateContexts")],
"react": [ImportVar(tag="useContext")], "react": [ImportVar(tag="useContext")],
}, },
) )
@ -956,7 +956,7 @@ class Var(Generic[VAR_TYPE]):
_js_expr="refs", _js_expr="refs",
_var_data=VarData( _var_data=VarData(
imports={ imports={
f"/{constants.Dirs.STATE_PATH}": [imports.ImportVar(tag="refs")] f"$/{constants.Dirs.STATE_PATH}": [imports.ImportVar(tag="refs")]
} }
), ),
).to(ObjectVar, Dict[str, str]) ).to(ObjectVar, Dict[str, str])
@ -2530,7 +2530,7 @@ def get_uuid_string_var() -> Var:
unique_uuid_var = get_unique_variable_name() unique_uuid_var = get_unique_variable_name()
unique_uuid_var_data = VarData( unique_uuid_var_data = VarData(
imports={ imports={
f"/{constants.Dirs.STATE_PATH}": {ImportVar(tag="generateUUID")}, # type: ignore f"$/{constants.Dirs.STATE_PATH}": {ImportVar(tag="generateUUID")}, # type: ignore
"react": "useMemo", "react": "useMemo",
}, },
hooks={f"const {unique_uuid_var} = useMemo(generateUUID, [])": None}, hooks={f"const {unique_uuid_var} = useMemo(generateUUID, [])": None},

2
reflex/vars/number.py
View File

@ -1090,7 +1090,7 @@ boolean_types = Union[BooleanVar, bool]
_IS_TRUE_IMPORT: ImportDict = { _IS_TRUE_IMPORT: ImportDict = {
f"/{Dirs.STATE_PATH}": [ImportVar(tag="isTrue")], f"$/{Dirs.STATE_PATH}": [ImportVar(tag="isTrue")],
} }

14
tests/units/components/core/test_banner.py
View File

@ -12,7 +12,7 @@ def test_websocket_target_url():
var_data = url._get_all_var_data() var_data = url._get_all_var_data()
assert var_data is not None assert var_data is not None
assert sorted(tuple((key for key, _ in var_data.imports))) == sorted( assert sorted(tuple((key for key, _ in var_data.imports))) == sorted(
("/utils/state", "/env.json") ("$/utils/state", "$/env.json")
) )
@ -22,10 +22,10 @@ def test_connection_banner():
assert sorted(tuple(_imports)) == sorted( assert sorted(tuple(_imports)) == sorted(
( (
"react", "react",
"/utils/context", "$/utils/context",
"/utils/state", "$/utils/state",
"@radix-ui/themes@^3.0.0", "@radix-ui/themes@^3.0.0",
"/env.json", "$/env.json",
) )
) )
@ -40,10 +40,10 @@ def test_connection_modal():
assert sorted(tuple(_imports)) == sorted( assert sorted(tuple(_imports)) == sorted(
( (
"react", "react",
"/utils/context", "$/utils/context",
"/utils/state", "$/utils/state",
"@radix-ui/themes@^3.0.0", "@radix-ui/themes@^3.0.0",
"/env.json", "$/env.json",
) )
) )