diff --git a/reflex/__init__.py b/reflex/__init__.py index 36c94a1de..3314b752d 100644 --- a/reflex/__init__.py +++ b/reflex/__init__.py @@ -12,6 +12,7 @@ from .app import UploadFile as UploadFile from .base import Base as Base from .compiler.utils import get_asset_path from .components import * +from .components.base.script import client_side from .components.component import custom_component as memo from .components.graphing.victory import data as data from .config import Config as Config diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py index 63c75fb97..26bda03fc 100644 --- a/reflex/compiler/utils.py +++ b/reflex/compiler/utils.py @@ -14,8 +14,8 @@ from reflex.components.base import ( Image, Main, Meta, + NextScript, RawLink, - Script, Title, ) from reflex.components.component import Component, ComponentStyle, CustomComponent @@ -186,7 +186,7 @@ def create_document_root(stylesheets: List[str]) -> Component: Body.create( ColorModeScript.create(), Main.create(), - Script.create(), + NextScript.create(), ), ) diff --git a/reflex/components/__init__.py b/reflex/components/__init__.py index d0a86907e..bdb3097f5 100644 --- a/reflex/components/__init__.py +++ b/reflex/components/__init__.py @@ -1,7 +1,7 @@ """Import all the components.""" from __future__ import annotations -from .base import ScriptTag +from .base import Script from .component import Component from .datadisplay import * from .disclosure import * @@ -238,7 +238,7 @@ highlight = Highlight.create markdown = Markdown.create span = Span.create text = Text.create -script = ScriptTag.create +script = Script.create aspect_ratio = AspectRatio.create kbd = KeyboardKey.create color_mode_button = ColorModeButton.create diff --git a/reflex/components/base/__init__.py b/reflex/components/base/__init__.py index 61b6545ec..b21f59115 100644 --- a/reflex/components/base/__init__.py +++ b/reflex/components/base/__init__.py @@ -1,7 +1,8 @@ """Base components.""" from .body import Body -from .document import ColorModeScript, DocumentHead, Html, Main, Script +from .document import ColorModeScript, DocumentHead, Html, Main, NextScript from .head import Head from .link import RawLink, ScriptTag from .meta import Description, Image, Meta, Title +from .script import Script diff --git a/reflex/components/base/document.py b/reflex/components/base/document.py index 5b3dcc2c1..5cdba585d 100644 --- a/reflex/components/base/document.py +++ b/reflex/components/base/document.py @@ -28,7 +28,7 @@ class Main(NextDocumentLib): tag = "Main" -class Script(NextDocumentLib): +class NextScript(NextDocumentLib): """The document main scripts.""" tag = "NextScript" diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py new file mode 100644 index 000000000..3d9d6497b --- /dev/null +++ b/reflex/components/base/script.py @@ -0,0 +1,83 @@ +"""Next.js script wrappers and inline script functionality. + +https://nextjs.org/docs/app/api-reference/components/script +""" +from typing import Set + +from reflex.components.component import Component +from reflex.event import EventChain +from reflex.vars import BaseVar, Var + + +class Script(Component): + """Next.js script component. + + Note that this component differs from reflex.components.base.document.NextScript + in that it is intended for use with custom and user-defined scripts. + + It also differs from reflex.components.base.link.ScriptTag, which is the plain + HTML