Feature/2 (#13)

Author: michael-yin

.pre-commit-config.yaml

@@ -1,23 +1,13 @@
 repos:
-  - repo: https://github.com/pycqa/isort
-    rev: 5.12.0
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.6.4
     hooks:
-      - id: isort
+      - id: ruff
+        args: [ --fix ]
   - repo: https://github.com/psf/black
     rev: 23.10.1
     hooks:
       - id: black
-  - repo: https://github.com/PyCQA/flake8
-    rev: 6.0.0
-    hooks:
-      - id: flake8
-        additional_dependencies:
-          - flake8-bugbear
-          - flake8-comprehensions
-          - flake8-no-pep420
-          - flake8-print
-          - flake8-tidy-imports
-          - flake8-typing-imports
   - repo: https://github.com/pre-commit/mirrors-mypy
     rev: v1.6.1
     hooks:

docs/source/conf.py

@@ -17,7 +17,7 @@
 
 # -- Project information -----------------------------------------------------
 project = "django-viewcomponent"
-copyright = f"{datetime.datetime.now().year}, Michael Yin"
+copyright = f"{datetime.datetime.now().year}, Michael Yin"  # noqa
 author = "Michael Yin"
 
 

docs/source/images/blog-components.png

@@ -118,9 +118,9 @@ Notes:
 <a href="/">Post 2</a>
 ```
 
-## Linking slots with other component
+## Connect other component in the slot
 
-This is a very powerful feature, please read it carefully.
+This is the **killer feature**, so please read it carefully.
 
 Let's update the `BlogComponent` again
 
@@ -160,7 +160,7 @@ class BlogComponent(component.Component):
 Notes:
 
 1. We added a `HeaderComponent`, which accept a `classes` argument
-2. `header = RendersOneField(required=True, component='header')` means when `{{ self.header.value }}` is rendered, it would use the `HeaderComponent` to render the content.
+2. `header = RendersOneField(required=True, component='header')` means when `{{ self.header.value }}` is rendered, it would use the `HeaderComponent` component to render the content.
 
 ```django
 {% component "blog" as blog_component %}
@@ -236,3 +236,109 @@ class PostComponent(component.Component):
     <h1>{{ self.post.title }}</h1>
     """
 ```
+
+## Separation of concerns
+
+The slot field and the `component` argument can help us build components with separation of concerns.
+
+With `component` argument, we can **connect** components together, in clean way.
+
+![](./images/blog-components.png)
+
+## Component argument in slot field
+
+`component` in `RendersOneField` or `RendersManyField` supports many variable types.
+
+### Component registered name
+
+```python
+header = RendersOneField(required=True, component="header")
+```
+
+### Component class
+
+```python
+class BlogComponent(component.Component):
+    class HeaderComponent(component.Component):
+        def __init__(self, classes, **kwargs):
+            self.classes = classes
+
+        template = """
+            <h1 class="{{ self.classes }}">
+              {{ self.content }}
+            </h1>
+        """
+
+    class PostComponent(component.Component):
+        def __init__(self, post, **kwargs):
+            self.post = post
+
+        template = """
+        {% load viewcomponent_tags %}
+
+        <h1>{{ self.post.title }}</h1>
+        <div>{{ self.post.description }}</div>
+        """
+
+    header = RendersOneField(required=True, component=HeaderComponent)
+    posts = RendersManyField(required=True, component=PostComponent)
+
+    template = """
+    {% load viewcomponent_tags %}
+    {{ self.header.value }}
+    {% for post in self.posts.value %}
+      {{ post }}
+    {% endfor %}
+    """
+```
+
+### Function which return string
+
+If one component is very simple, we can use a function or lambda to return string.
+
+```python
+class BlogComponent(component.Component):
+    header = RendersOneField(required=True, component="header")
+    posts = RendersManyField(
+        required=True,
+        component=lambda post, **kwargs: mark_safe(
+            f"""
+            <h1>{post.title}</h1>
+            <div>{post.description}</div>
+        """,
+        ),
+    )
+
+    template = """
+    {% load viewcomponent_tags %}
+    {{ self.header.value }}
+    {% for post in self.posts.value %}
+      {{ post }}
+    {% endfor %}
+    """
+```
+
+Notes:
+
+1. Here we use lambda function to return string from the `post` variable, so we do not need to create a Component.
+
+### Function which return component instance
+
+We can use function to return instance of a component.
+
+```python
+class BlogComponent(component.Component):
+    header = RendersOneField(required=True, component="header")
+    posts = RendersManyField(
+        required=True,
+        component=lambda post: PostComponent(post=post),
+    )
+
+    template = """
+        {% load viewcomponent_tags %}
+        {{ self.header.value }}
+        {% for post in self.posts.value %}
+          {{ post }}
+        {% endfor %}
+        """
+```

docs/source/slot.md

@@ -20,3 +20,53 @@ django = ">=3.0"
 [build-system]
 requires = ["setuptools", "poetry_core>=1.0"]
 build-backend = "poetry.core.masonry.api"
+
+[tool.ruff]
+lint.ignore = [
+    # https://docs.astral.sh/ruff/rules/
+    "ANN",
+    "D",
+    "ARG",
+    "RUF",
+    "TRY",
+    "PTH",
+    "PGH",
+    "N",
+    "S",
+    "EM",
+    "ERA",
+    "RET",
+    "PERF",
+    "G",
+    "PERF",
+    "TCH",
+    "TD",
+    "FIX",
+    "FBT",
+
+    "E501",
+    "PLR2004",
+    "PT004",
+    "PLR5501",
+    "A002",
+    "BLE001",
+    "B904",
+    "SLF001",
+    "DJ001",
+    "DJ008",
+    "INP001",
+    "I001",
+    "FA100",
+    "FA102",
+    "SIM118",
+    "UP031",
+    "PT011",
+]
+lint.select = ["ALL"]
+exclude = ["migrations"]
+
+[tool.ruff.lint.isort]
+combine-as-imports = true
+
+[tool.black]
+target_version = ['py310']

pyproject.toml

@@ -25,9 +25,6 @@ class Component:
     # and you can get it using self.content
     content = ""
 
-    # the name of the component
-    component_name = None
-
     # the variable name of the component in the context
     component_target_var = None
 
@@ -63,7 +60,7 @@ def get_template(self) -> Template:
 
         raise ImproperlyConfigured(
             f"Either 'template_name' or 'template' must be set for Component {type(self).__name__}."
-            f"Note: this attribute is not required if you are overriding the class's `get_template*()` methods."
+            f"Note: this attribute is not required if you are overriding the class's `get_template*()` methods.",
         )
 
     def prepare_context(

setup.cfg

@@ -6,15 +6,15 @@ class NotRegistered(Exception):
     pass
 
 
-class ComponentRegistry(object):
+class ComponentRegistry:
     def __init__(self):
         self._registry = {}  # component name -> component_class mapping
 
     def register(self, name=None, component=None):
         existing_component = self._registry.get(name)
         if existing_component and existing_component.class_hash != component.class_hash:
             raise AlreadyRegistered(
-                'The component "%s" has already been registered' % name
+                'The component "%s" has already been registered' % name,
             )
         self._registry[name] = component
 

src/django_viewcomponent/component.py

@@ -1,18 +1,16 @@
-from typing import Optional
-
 from django_viewcomponent.component_registry import registry as component_registry
 
 
 class FieldValue:
     def __init__(
         self,
+        content: str,
         dict_data: dict,
-        component: Optional[str] = None,
+        component: None,
         parent_component=None,
-        **kwargs
     ):
+        self._content = content or ""
         self._dict_data = dict_data
-        self._content = self._dict_data.pop("content", "")
         self._component = component
         self._parent_component = parent_component
 
@@ -24,11 +22,43 @@ def __str__(self):
             return self.render()
 
     def render(self):
-        component_cls = component_registry.get(self._component)
+        from django_viewcomponent.component import Component
+
+        if isinstance(self._component, str):
+            return self._render_for_component_cls(
+                component_registry.get(self._component),
+            )
+        elif not isinstance(self._component, type) and callable(self._component):
+            # self._component is function
+            callable_component = self._component
+            result = callable_component(**self._dict_data)
+
+            if isinstance(result, str):
+                return result
+            elif isinstance(result, Component):
+                # render component instance
+                return self._render_for_component_instance(result)
+            else:
+                raise ValueError(
+                    f"Callable slot component must return str or Component instance. Got {result}",
+                )
+        elif isinstance(self._component, type) and issubclass(
+            self._component,
+            Component,
+        ):
+            # self._component is Component class
+            return self._render_for_component_cls(self._component)
+        else:
+            raise ValueError(f"Invalid component variable {self._component}")
+
+    def _render_for_component_cls(self, component_cls):
         component = component_cls(
             **self._dict_data,
         )
-        component.component_name = self._component
+
+        return self._render_for_component_instance(component)
+
+    def _render_for_component_instance(self, component):
         component.component_context = self._parent_component.component_context
 
         with component.component_context.push():
@@ -77,13 +107,9 @@ def handle_call(self, content, **kwargs):
 
 class RendersOneField(BaseSlotField):
     def handle_call(self, content, **kwargs):
-        value_dict = {
-            "content": content,
-            "parent_component": self.parent_component,
-            **kwargs,
-        }
         value_instance = FieldValue(
-            dict_data=value_dict,
+            content=content,
+            dict_data={**kwargs},
             component=self._component,
             parent_component=self.parent_component,
         )
@@ -94,13 +120,9 @@ def handle_call(self, content, **kwargs):
 
 class RendersManyField(BaseSlotField):
     def handle_call(self, content, **kwargs):
-        value_dict = {
-            "content": content,
-            "parent_component": self.parent_component,
-            **kwargs,
-        }
         value_instance = FieldValue(
-            dict_data=value_dict,
+            content=content,
+            dict_data={**kwargs},
             component=self._component,
             parent_component=self.parent_component,
         )

src/django_viewcomponent/component_registry.py

@@ -42,7 +42,8 @@ def __init_subclass__(cls, **kwargs):
             cls.preview_name = new_name
             cls.preview_view_component_path = os.path.abspath(inspect.getfile(cls))
             cls.url = urljoin(
-                reverse("django_viewcomponent:preview-index"), cls.preview_name + "/"
+                reverse("django_viewcomponent:preview-index"),
+                cls.preview_name + "/",
             )
 
     @classmethod