fix link issue with href (#1173)

pynecone/compiler/utils.py

@@ -12,9 +12,9 @@ from pynecone.components.base import (
     Head,
     Html,
     Image,
-    Link,
     Main,
     Meta,
+    RawLink,
     Script,
     Title,
 )
@@ -155,7 +155,7 @@ def create_document_root(stylesheets: List[str]) -> Component:
     Returns:
         The document root.
     """
-    sheets = [Link.create(rel="stylesheet", href=href) for href in stylesheets]
+    sheets = [RawLink.create(rel="stylesheet", href=href) for href in stylesheets]
     return Html.create(
         DocumentHead.create(*sheets),
         Body.create(

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, ScriptTag
+from .link import RawLink, ScriptTag
 from .meta import Description, Image, Meta, Title

pynecone/components/base/link.py

@@ -5,7 +5,7 @@ from pynecone.components.component import Component
 from pynecone.vars import Var
 
 
-class Link(Component):
+class RawLink(Component):
     """A component that displays the title of the current page."""
 
     tag = "link"

pynecone/components/navigation/link.py

@@ -1,5 +1,8 @@
 """A link component."""
 
+from typing import Optional
+
+from pynecone.components.component import Component
 from pynecone.components.libs.chakra import ChakraComponent
 from pynecone.components.navigation.nextlink import NextLink
 from pynecone.utils import imports
@@ -28,3 +31,32 @@ class Link(ChakraComponent):
 
     def _get_imports(self) -> imports.ImportDict:
         return {**super()._get_imports(), **NextLink.create()._get_imports()}
+
+    @classmethod
+    def create(
+        cls, *children, href: Optional[Var] = None, rel: Optional[Var] = None, **props
+    ) -> Component:
+        """Create a Link component.
+
+        Args:
+            *children: The children of the component.
+            href (Var): The href attribute of the link. Defaults to None.
+            rel (Var): The rel attribute of the link. Defaults to None.
+            **props: The props of the component.
+
+        Raises:
+            ValueError: in case of missing children
+            ValueError: in case of missing href
+
+        Returns:
+            Component: The link component
+        """
+        if href and not len(children):
+            raise ValueError("Link without a child will not display")
+        elif href is None and len(children):
+            raise ValueError("Link without 'href' props will not work.")
+        else:
+            props.update({"href": href})
+        if rel:
+            props.update({"rel": rel})
+        return super().create(*children, **props)