From 416a813be83adf161efa26414a3f89a97f5dffd7 Mon Sep 17 00:00:00 2001 From: wassaf shahzad Date: Sat, 11 Mar 2023 11:40:14 -0800 Subject: [PATCH] Added script Component (#653) --- pynecone/app.py | 6 +++ pynecone/components/__init__.py | 2 + pynecone/components/base/__init__.py | 2 +- pynecone/components/base/link.py | 55 ++++++++++++++++++++++++++++ 4 files changed, 64 insertions(+), 1 deletion(-) diff --git a/pynecone/app.py b/pynecone/app.py index 68a90a43f..72bbe98a6 100644 --- a/pynecone/app.py +++ b/pynecone/app.py @@ -206,6 +206,7 @@ class App(Base): on_load: Optional[Union[EventHandler, List[EventHandler]]] = None, path: Optional[str] = None, meta: List[Dict] = constants.DEFAULT_META_LIST, + script_tags: Optional[List[Component]] = None, ): """Add a page to the app. @@ -221,6 +222,7 @@ class App(Base): image: The image to display on the page. on_load: The event handler(s) that will be called each time the page load. meta: The metadata of the page. + script_tags: List of script tags to be added to component """ if path is not None: utils.deprecate( @@ -249,6 +251,10 @@ class App(Base): component, title=title, image=image, description=description, meta=meta ) + # Add script tags if given + if script_tags: + component.children.extend(script_tags) + # Format the route. route = utils.format_route(route) diff --git a/pynecone/components/__init__.py b/pynecone/components/__init__.py index 48965191b..5a7421762 100644 --- a/pynecone/components/__init__.py +++ b/pynecone/components/__init__.py @@ -1,6 +1,7 @@ """Import all the components.""" from __future__ import annotations +from .base import ScriptTag from .component import Component from .datadisplay import * from .disclosure import * @@ -201,3 +202,4 @@ heading = Heading.create markdown = Markdown.create span = Span.create text = Text.create +script = ScriptTag.create diff --git a/pynecone/components/base/__init__.py b/pynecone/components/base/__init__.py index 4095e1932..2f2e0ac99 100644 --- a/pynecone/components/base/__init__.py +++ b/pynecone/components/base/__init__.py @@ -3,5 +3,5 @@ from .body import Body from .document import ColorModeScript, DocumentHead, Html, Main, Script from .head import Head -from .link import Link +from .link import Link, ScriptTag from .meta import Description, Image, Meta, Title diff --git a/pynecone/components/base/link.py b/pynecone/components/base/link.py index 159af1946..2cb039f30 100644 --- a/pynecone/components/base/link.py +++ b/pynecone/components/base/link.py @@ -1,5 +1,7 @@ """Display the title of the current page.""" +from typing import Optional + from pynecone.components.component import Component from pynecone.components.tags import Tag from pynecone.var import Var @@ -19,3 +21,56 @@ class Link(Component): href=self.href, rel=self.rel, ) + + +class ScriptTag(Component): + """A component that creates a script tag with the speacified type and source. + + + Args: + type: This attribute indicates the type of script represented. + The value of this attribute will be one of the following: + + - module: This value causes the code to be treated as a JavaScript module. + - importmap: This value indicates that the body of the element + contains an import map. + - Any value: The embedded content is treated as a data block, and won't be + processed by the browser. + - blocking: This attribute explicitly indicates that certain operations + should be blocked on the fetching of the script. + + source: This attribute specifies the URI of an external script; this can be + used as an alternative to embedding a script directly within a document. + + integrity: This attribute contains inline metadata that a user agent can use + to verify that a fetched resource has been delivered free of unexpected manipulation + + crossorigin: To allow error logging for sites which use a separate domain for static media, + use this attribute. + + referrer_policy: Indicates which referrer to send when fetching the script, or resources fetched by the script + refrence: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#:~:text=Indicates%20which%20referrer%20to%20send%20when%20fetching%20the%20script%2C%20or%20resources%20fetched%20by%20the%20script%3A + + is_async: This attribute allows the elimination of parser-blocking JavaScript where the browser would have to + load and evaluate scripts before continuing to parse. defer has a similar effect in this case. + + defer: This Boolean attribute is set to indicate to a browser that the script is + meant to be executed after the document has been parsed, but before firing DOMContentLoaded. + + """ + + tag = "script" + + type: Var[str] + + source: Var[str] + + integrity: Optional[Var[str]] + + crossorigin: Optional[Var[str]] + + referrer_policy: Optional[Var[str]] + + is_async: Optional[Var[bool]] + + defer: Optional[Var[bool]]