added support for hyphenated component filenames

django_cotton/templatetags/_component.py

@@ -100,7 +100,13 @@ class CottonComponentNode(Node):
                 )
             component_name = is_
 
-        component_tpl_path = component_name.replace(".", "/").replace("-", "_")
+        component_tpl_path = component_name.replace(".", "/")
+
+        # Cotton by default will look for snake_case version of comp names. This can be configured to allow hyphenated names.
+        snaked_cased_named = getattr(settings, "COTTON_SNAKE_CASED_NAMES", True)
+        if snaked_cased_named:
+            component_tpl_path = component_tpl_path.replace("-", "_")
+
         cotton_dir = getattr(settings, "COTTON_DIR", "cotton")
         return f"{cotton_dir}/{component_tpl_path}.html"
 

django_cotton/tests/test_basic.py

@@ -1,4 +1,6 @@
-from django_cotton.tests.utils import CottonTestCase
+from django.test import override_settings
+
+from django_cotton.tests.utils import CottonTestCase, get_rendered
 
 
 class BasicComponentTests(CottonTestCase):
@@ -186,3 +188,18 @@ class BasicComponentTests(CottonTestCase):
             self.assertContains(response, "From parent comp scope: ''")
             self.assertContains(response, "From view context scope: ''")
             self.assertContains(response, "Direct attribute: 'yes'")
+
+    @override_settings(COTTON_SNAKE_CASED_NAMES=False)
+    def test_hyphen_naming_convention(self):
+        self.create_template(
+            "cotton/some-subfolder/hyphen-naming-convention.html",
+            "I have a hyphenated component name",
+        )
+
+        html = """
+            <c-some-subfolder.hyphen-naming-convention />
+        """
+
+        rendered = get_rendered(html)
+
+        self.assertTrue("I have a hyphenated component name" in rendered)

django_cotton/tests/test_compiler.py

@@ -1,3 +1,4 @@
+
 from django_cotton.tests.utils import CottonTestCase, get_compiled
 
 

django_cotton/tests/utils.py

@@ -58,6 +58,12 @@ class CottonTestCase(TestCase):
 
     def create_template(self, name, content, url=None, context={}):
         """Create a template file in the temporary directory and return the path"""
+
+        # To test the non-default of allowing non-snake-cased names
+        snake_cased_names = getattr(settings, "COTTON_SNAKE_CASED_NAMES", True)
+        if not snake_cased_names:
+            name = name.replace("_", "-")
+
         path = os.path.join(self.temp_dir, name)
 
         if os.path.exists(path):

docs/docs_project/docs_project/templates/configuration.html

@@ -3,9 +3,43 @@
 
     <p>The following configuration can be provided in your `settings.py`:</p>
 
-    <h4>COTTON_DIR</h4>
-    <p>str (default: 'cotton')</p>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div>
+            <code>COTTON_DIR</code>
+            <div>str (default: 'cotton')</div>
+        </div>
+        <div>
+            Change the default path in your templates directory where cotton components can be placed, for example "components".
+        </div>
+    </div>
+
+    <c-hr />
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div>
+            <code>COTTON_SNAKE_CASED_NAMES</code>
+            <div>bool (default: True)</div>
+        </div>
+        <div>
+            By default cotton will look for snake case versions of your component names. To turn this behaviour off (useful if you want to permit hyphenated filenames).
+
+            <div class="mb-4 mt-4">
+                <h6 class="mb-1">Example:</h6>
+                <code>{{ '<c-my-button />'|force_escape }}</code>
+            </div>
+
+            <div class="mb-4">
+                <h6>As <code>True</code> (default)</h6>
+                Filepath: `cotton/my_button.html`
+            </div>
+
+            <div>
+                <h6>As <code>False</code></h6>
+                Filepath: `cotton/my-button.html`
+            </div>
+
+        </div>
+    </div>
 
-    <p>Change the default path in your templates directory where cotton components can be placed, for example "components".</p>
 
 </c-layouts.with-sidebar>

docs/docs_project/docs_project/templates/cotton/hr.html

@@ -1 +1 @@
-<div {{ attrs }} class="h-[2px] bg-yellow-900 bg-opacity-10 my-8 w-full dark:bg-gray-700"></div>
+<div {{ attrs }} class="h-[1px] bg-yellow-900 bg-opacity-10 my-8 w-full dark:bg-gray-700"></div>

docs/docs_project/docs_project/templates/cotton/sidebar_block.html

@@ -1,4 +1,4 @@
-<div class="py-4 {{ class }} border-b border-yellow-900 border-opacity-15 dark:border-gray-700 dark:border-opacity-100 last:border-0 first:pt-0 leading-7">
+<div class="py-4 {{ class }} first:pt-0 leading-7">
     {% if title %}
         <c-sidebar-heading>{{ title }}</c-sidebar-heading>
     {% endif %}

docs/docs_project/docs_project/templates/cotton/sidebar_heading.html

@@ -1 +1 @@
-<div class="dark:text-white text-[#1a384a] dark:opacity-35 text-yellow-800 brightness-65 text-opacity-50 font-semibold uppercase text-[14px] mb-2 tracking-wider">{{ slot }}</div>
+<div class="dark:text-white dark:opacity-35 text-yellow-900/40 font-semibold uppercase text-[14px] mb-2 tracking-wider">{{ slot }}</div>