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

Fix Nextjs Dynamic Import (#1480)

Browse Source 
* Fix dunamic imoprt for react player and plotly

* Fix format

* Fix pr comments

* Update react player

---------

Co-authored-by: Alek Petuskey <alekpetuskey@aleks-mbp.lan>
This commit is contained in:
Alek Petuskey 2023-07-31 16:02:14 -07:00 committed by GitHub
parent c11d9e657f
commit b9536bcf40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
reflex/components/component.py
View File

@ -777,3 +777,13 @@ def custom_component(
return CustomComponent(component_fn=component_fn, children=children, **props) return CustomComponent(component_fn=component_fn, children=children, **props)
return wrapper return wrapper
class NoSSRComponent(Component):
"""A dynamic component that is not rendered on the server."""
def _get_imports(self):
return {"next/dynamic": {ImportVar(tag="dynamic", is_default=True)}}
def _get_custom_code(self) -> str:
return f"const {self.tag} = dynamic(() => import('{self.library}'), {{ ssr: false }});"

12
reflex/components/graphing/plotly.py
View File

@ -4,12 +4,12 @@ from typing import Dict
from plotly.graph_objects import Figure from plotly.graph_objects import Figure
from reflex.components.component import Component from reflex.components.component import NoSSRComponent
from reflex.components.tags import Tag from reflex.components.tags import Tag
from reflex.vars import Var from reflex.vars import Var
class PlotlyLib(Component): class PlotlyLib(NoSSRComponent):
"""A component that wraps a plotly lib.""" """A component that wraps a plotly lib."""
library = "react-plotly.js" library = "react-plotly.js"
@ -35,14 +35,6 @@ class Plotly(PlotlyLib):
# If true, the graph will resize when the window is resized. # If true, the graph will resize when the window is resized.
use_resize_handler: Var[bool] use_resize_handler: Var[bool]
def _get_imports(self):
return {}
def _get_custom_code(self) -> str:
return """import dynamic from 'next/dynamic'
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
"""
def _render(self) -> Tag: def _render(self) -> Tag:
if ( if (
isinstance(self.data, Figure) isinstance(self.data, Figure)

18
reflex/components/libs/react_player.py
View File

@ -2,19 +2,16 @@
from __future__ import annotations from __future__ import annotations
from typing import Optional from reflex.components.component import NoSSRComponent
from reflex.components.component import Component
from reflex.utils import imports
from reflex.vars import Var from reflex.vars import Var
class ReactPlayerComponent(Component): class ReactPlayerComponent(NoSSRComponent):
"""Using react-player and not implement all props and callback yet. """Using react-player and not implement all props and callback yet.
reference: https://github.com/cookpete/react-player. reference: https://github.com/cookpete/react-player.
""" """
library = "react-player" library = "react-player/lazy"
tag = "ReactPlayer" tag = "ReactPlayer"
@ -44,12 +41,3 @@ class ReactPlayerComponent(Component):
# Set the height of the player: ex:640px # Set the height of the player: ex:640px
height: Var[str] height: Var[str]
def _get_imports(self) -> Optional[imports.ImportDict]:
return {}
def _get_custom_code(self) -> Optional[str]:
return """
import dynamic from "next/dynamic";
const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
"""