👌 IMPROVE: Make tab ids deterministic (#93)

Use increasing indices, rather than UUIDs
executablebooks · Aug 22, 2022 · 9a78da6 · 9a78da6
1 parent 1ef7449
commit 9a78da6
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 29 deletions.
diff --git a/sphinx_design/tabs.py b/sphinx_design/tabs.py
@@ -1,5 +1,4 @@
 from typing import List
-from uuid import uuid4
 
 from docutils import nodes
 from docutils.parsers.rst import directives
@@ -208,15 +207,20 @@ class TabSetHtmlTransform(SphinxPostTransform):
     default_priority = 200
     formats = ("html",)
 
-    def get_unique_key(self):
-        return str(uuid4())
-
     def run(self) -> None:
         """Run the transform."""
+
+        # setup id generators
+        tab_set_id_base = "sd-tab-set-"
+        tab_set_id_num = 0
+        tab_item_id_base = "sd-tab-item-"
+        tab_item_id_num = 0
+
         for tab_set in self.document.traverse(
             lambda node: is_component(node, "tab-set")
         ):
-            tab_set_identity = self.get_unique_key()
+            tab_set_identity = tab_set_id_base + str(tab_set_id_num)
+            tab_set_id_num += 1
             children = []
             # get the first selected node
             selected_idx = None
@@ -239,7 +243,8 @@ def run(self) -> None:
                 except ValueError:
                     print(tab_item)
                     raise
-                tab_item_identity = self.get_unique_key()
+                tab_item_identity = tab_item_id_base + str(tab_item_id_num)
+                tab_item_id_num += 1
 
                 # create: <input checked="checked" id="id" type="radio">
                 input_node = sd_tab_input(

diff --git a/tests/conftest.py b/tests/conftest.py
@@ -8,7 +8,6 @@
 from sphinx.testing.util import SphinxTestApp
 
 from sphinx_design._compat import findall
-from sphinx_design.tabs import TabSetHtmlTransform
 
 pytest_plugins = "sphinx.testing.fixtures"
 
@@ -63,10 +62,6 @@ def get_doctree(
 
 @pytest.fixture()
 def sphinx_builder(tmp_path: Path, make_app, monkeypatch):
-
-    # make sure tabbed id keys are reproducible across test runs
-    monkeypatch.setattr(TabSetHtmlTransform, "get_unique_key", lambda self: "mock-uuid")
-
     def _create_project(
         buildername: str = "html", conf_kwargs: Optional[Dict[str, Any]] = None
     ):

diff --git a/tests/test_snippets/snippet_post_tab-basic.xml b/tests/test_snippets/snippet_post_tab-basic.xml
@@ -3,14 +3,14 @@
         <title>
             Heading
         <container classes="sd-tab-set" design_component="tab-set" is_div="True">
-            <sd_tab_input checked="True" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid">
+            <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-0">
                 Label1
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <paragraph>
                     Content 1
-            <sd_tab_input checked="False" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid">
+            <sd_tab_input checked="False" id="sd-tab-item-1" set_id="sd-tab-set-0" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-1">
                 Label2
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <paragraph>

diff --git a/tests/test_snippets/snippet_post_tab-code-set.xml b/tests/test_snippets/snippet_post_tab-code-set.xml
@@ -3,14 +3,14 @@
         <title>
             Heading
         <container classes="sd-tab-set" design_component="tab-set" is_div="True">
-            <sd_tab_input checked="True" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid" sync_id="tabcode-python">
+            <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-0" sync_id="tabcode-python">
                 PYTHON
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <literal_block force="False" highlight_args="{'linenostart': 1}" language="python" linenos="False" source="snippet.py" xml:space="preserve">
                     a = 1
-            <sd_tab_input checked="False" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid" sync_id="tabcode-javascript">
+            <sd_tab_input checked="False" id="sd-tab-item-1" set_id="sd-tab-set-0" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-1" sync_id="tabcode-javascript">
                 JAVASCRIPT
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <literal_block force="False" highlight_args="{}" language="javascript" linenos="False" xml:space="preserve">

diff --git a/tests/test_snippets/snippet_post_tab-options.xml b/tests/test_snippets/snippet_post_tab-options.xml
@@ -3,8 +3,8 @@
         <title>
             Heading
         <container classes="sd-tab-set class-set" design_component="tab-set" is_div="True">
-            <sd_tab_input checked="True" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label class-label" ids="target" input_id="mock-uuid">
+            <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio">
+            <sd_tab_label classes="sd-tab-label class-label" ids="target" input_id="sd-tab-item-0">
                 Label
             <container classes="sd-tab-content class-content" design_component="tab-content" is_div="True">
                 <paragraph>

diff --git a/tests/test_snippets/snippet_post_tab-sync.xml b/tests/test_snippets/snippet_post_tab-sync.xml
@@ -3,27 +3,27 @@
         <title>
             Heading
         <container classes="sd-tab-set" design_component="tab-set" is_div="True">
-            <sd_tab_input checked="True" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid" sync_id="key1">
+            <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-0" sync_id="key1">
                 Label1
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <paragraph>
                     Content 1
-            <sd_tab_input checked="False" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid" sync_id="key2">
+            <sd_tab_input checked="False" id="sd-tab-item-1" set_id="sd-tab-set-0" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-1" sync_id="key2">
                 Label2
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <paragraph>
                     Content 2
         <container classes="sd-tab-set" design_component="tab-set" is_div="True">
-            <sd_tab_input checked="True" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid" sync_id="key1">
+            <sd_tab_input checked="True" id="sd-tab-item-2" set_id="sd-tab-set-1" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-2" sync_id="key1">
                 Label1
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <paragraph>
                     Content 1
-            <sd_tab_input checked="False" id="mock-uuid" set_id="mock-uuid" type="radio">
-            <sd_tab_label classes="sd-tab-label" input_id="mock-uuid" sync_id="key2">
+            <sd_tab_input checked="False" id="sd-tab-item-3" set_id="sd-tab-set-1" type="radio">
+            <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-3" sync_id="key2">
                 Label2
             <container classes="sd-tab-content" design_component="tab-content" is_div="True">
                 <paragraph>