streamlit-editjson 1.0.0__tar.gz

streamlit_editjson-1.0.0/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024, Thomas Beer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

streamlit_editjson-1.0.0/MANIFEST.in

@@ -0,0 +1,3 @@
+recursive-include src/streamlit_editjson/frontend *
+include README.md
+include LICENSE

streamlit_editjson-1.0.0/PKG-INFO

@@ -0,0 +1,73 @@
+Metadata-Version: 2.4
+Name: streamlit-editjson
+Version: 1.0.0
+Summary: edit and view json
+Author: Thomas Beer
+Author-email: thomas.beer04@outlook.com
+Requires-Python: >=3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: streamlit>=1.2
+Requires-Dist: jinja2
+Dynamic: author
+Dynamic: author-email
+Dynamic: description
+Dynamic: description-content-type
+Dynamic: license-file
+Dynamic: requires-dist
+Dynamic: requires-python
+Dynamic: summary
+
+# streamlit-editjson
+
+A Streamlit component to view and edit JSON with a user-friendly UI.
+
+## Installation
+
+```sh
+pip install streamlit-editjson
+```
+
+## Usage
+
+```python
+import streamlit as st
+from streamlit_editjson import editjson
+
+value = editjson(
+    filepath="test.json",
+    key_editable=False,   # default
+    value_editable=True,  # default
+)
+
+st.write(value)  # Python dict
+```
+
+## API
+
+`editjson(filepath, key_editable=False, value_editable=True, key=None) -> dict`
+
+- `filepath`: path to a JSON file.
+- `key_editable`: allow editing JSON keys.
+- `value_editable`: allow editing JSON values.
+- `key`: optional Streamlit component key.
+
+The component returns the edited JSON object as a Python `dict`.
+
+## Testing
+
+### Python unit tests
+
+Run:
+
+```sh
+python -m unittest discover -s tests -p "test_*.py"
+```
+
+### Running locally
+
+Run:
+
+```sh
+python -m streamlit run src/streamlit_editjson/__init__.py --server.port 8501
+```

streamlit_editjson-1.0.0/README.md

@@ -0,0 +1,53 @@
+# streamlit-editjson
+
+A Streamlit component to view and edit JSON with a user-friendly UI.
+
+## Installation
+
+```sh
+pip install streamlit-editjson
+```
+
+## Usage
+
+```python
+import streamlit as st
+from streamlit_editjson import editjson
+
+value = editjson(
+    filepath="test.json",
+    key_editable=False,   # default
+    value_editable=True,  # default
+)
+
+st.write(value)  # Python dict
+```
+
+## API
+
+`editjson(filepath, key_editable=False, value_editable=True, key=None) -> dict`
+
+- `filepath`: path to a JSON file.
+- `key_editable`: allow editing JSON keys.
+- `value_editable`: allow editing JSON values.
+- `key`: optional Streamlit component key.
+
+The component returns the edited JSON object as a Python `dict`.
+
+## Testing
+
+### Python unit tests
+
+Run:
+
+```sh
+python -m unittest discover -s tests -p "test_*.py"
+```
+
+### Running locally
+
+Run:
+
+```sh
+python -m streamlit run src/streamlit_editjson/__init__.py --server.port 8501
+```

streamlit_editjson-1.0.0/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+

streamlit_editjson-1.0.0/setup.py

@@ -0,0 +1,22 @@
+from pathlib import Path
+
+import setuptools
+
+this_directory = Path(__file__).parent
+long_description = (this_directory / "README.md").read_text()
+
+setuptools.setup(
+    name="streamlit-editjson",
+    version="1.0.0",
+    author="Thomas Beer",
+    author_email="thomas.beer04@outlook.com",
+    description="edit and view json",
+    long_description=long_description,
+    long_description_content_type="text/markdown",
+    packages=setuptools.find_packages(where="src"),
+    package_dir={"": "src"},
+    include_package_data=True,
+    classifiers=[],
+    python_requires=">=3.7",
+    install_requires=["streamlit>=1.2", "jinja2"],
+)

streamlit_editjson-1.0.0/src/streamlit_editjson/__init__.py

@@ -0,0 +1,59 @@
+import json
+from pathlib import Path
+from typing import Any, Dict, Optional
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+# Tell streamlit that there is a component called streamlit_editjson,
+# and that the code to display that component is in the "frontend" folder
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+    "streamlit_editjson", path=str(frontend_dir)
+)
+
+
+# Create the python function that will be called
+def editjson(
+    filepath: str,
+    key_editable: Optional[bool] = False,
+    value_editable: Optional[bool] = True,
+    key: Optional[str] = None,
+) -> Dict[str, Any]:
+    """
+    Render a JSON editor component and return the edited JSON as a Python dict.
+
+    Args:
+        filepath: Path to a JSON file.
+        key_editable: Whether JSON keys can be edited. Default is False.
+        value_editable: Whether JSON values can be edited. Default is True.
+        key: Optional Streamlit component key.
+
+    Returns:
+        The edited JSON object as a Python dict.
+    """
+    with open(filepath, "r", encoding="utf-8") as f:
+        json_obj = json.load(f)
+
+    component_value = _component_func(
+        json_str=json.dumps(json_obj),
+        key_editable=key_editable,
+        value_editable=value_editable,
+        key=key,
+        default=json_obj,
+    )
+
+    if component_value is None:
+        return json_obj
+
+    return component_value
+
+
+def main():
+    st.write("## Example")
+    value = editjson("test.json", key_editable=False, value_editable=True)
+    st.write(value)
+
+
+if __name__ == "__main__":
+    main()

streamlit_editjson-1.0.0/src/streamlit_editjson/frontend/__init__.py

@@ -0,0 +1 @@
+# Frontend package marker for setuptools package discovery.

streamlit_editjson-1.0.0/src/streamlit_editjson/frontend/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>streamlit-editjson</title>
+  <script src="./streamlit-component-lib.js"></script>
+  <script src="./main.js"></script>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <div id="root">
+    <div id="json-container">
+      <!-- 
+      <span data-color-code="key">key</span>: "<span data-color-code="value" contenteditable
+        spellcheck="false">myname</span>"
+      -->
+    </div>
+  </div>
+</body>
+
+</html>

streamlit_editjson-1.0.0/src/streamlit_editjson/frontend/main.js

@@ -0,0 +1,272 @@
+// The `Streamlit` object exists because our html file includes
+// `streamlit-component-lib.js`.
+
+const INDENT_PX = 18;
+
+const editorState = {
+  initialized: false,
+  sourceJson: null,
+  data: null,
+  keyEditable: false,
+  valueEditable: true,
+};
+
+function createLabel(text, className) {
+  const node = document.createElement("span");
+  node.className = className;
+  node.textContent = text;
+  return node;
+}
+
+function createTextInput(value, className, editable) {
+  const input = document.createElement("input");
+  input.className = className;
+  input.type = "text";
+  input.value = value;
+  input.disabled = !editable;
+  return input;
+}
+
+function createNumberInput(value, editable) {
+  const input = document.createElement("input");
+  input.className = "json-value json-value-number";
+  input.type = "number";
+  input.step = "any";
+  input.value = Number.isFinite(value) ? String(value) : "0";
+  input.disabled = !editable;
+  return input;
+}
+
+function createBooleanSelect(value, editable) {
+  const select = document.createElement("select");
+  select.className = "json-value json-value-boolean";
+  select.disabled = !editable;
+
+  const trueOption = document.createElement("option");
+  trueOption.value = "true";
+  trueOption.textContent = "true";
+
+  const falseOption = document.createElement("option");
+  falseOption.value = "false";
+  falseOption.textContent = "false";
+
+  select.appendChild(trueOption);
+  select.appendChild(falseOption);
+  select.value = value ? "true" : "false";
+  return select;
+}
+
+function parseLoosePrimitive(text) {
+  const trimmed = text.trim();
+
+  if (trimmed === "null") {
+    return null;
+  }
+  if (trimmed === "true") {
+    return true;
+  }
+  if (trimmed === "false") {
+    return false;
+  }
+
+  const asNumber = Number(trimmed);
+  if (trimmed !== "" && !Number.isNaN(asNumber)) {
+    return asNumber;
+  }
+
+  return text;
+}
+
+function emitChange() {
+  Streamlit.setComponentValue(editorState.data);
+  Streamlit.setFrameHeight(document.body.scrollHeight + 20);
+}
+
+function renderPrimitiveControl(parentRow, value, onChange) {
+  const editable = editorState.valueEditable;
+  const valueType = value === null ? "null" : typeof value;
+
+  if (valueType === "number") {
+    const input = createNumberInput(value, editable);
+    input.addEventListener("change", () => {
+      onChange(Number(input.value));
+      emitChange();
+    });
+    parentRow.appendChild(input);
+    return;
+  }
+
+  if (valueType === "boolean") {
+    const select = createBooleanSelect(value, editable);
+    select.addEventListener("change", () => {
+      onChange(select.value === "true");
+      emitChange();
+    });
+    parentRow.appendChild(select);
+    return;
+  }
+
+  const text = value === null ? "null" : String(value);
+  const input = createTextInput(text, "json-value json-value-text", editable);
+  input.addEventListener("change", () => {
+    if (value === null) {
+      onChange(parseLoosePrimitive(input.value));
+    } else if (typeof value === "string") {
+      onChange(input.value);
+    } else {
+      onChange(parseLoosePrimitive(input.value));
+    }
+    emitChange();
+  });
+  parentRow.appendChild(input);
+}
+
+function renderNode(container, value, indentLevel) {
+  if (Array.isArray(value)) {
+    renderArray(container, value, indentLevel);
+    return;
+  }
+
+  if (value !== null && typeof value === "object") {
+    renderObject(container, value, indentLevel);
+    return;
+  }
+
+  const row = document.createElement("div");
+  row.className = "json-row";
+  row.style.marginLeft = `${indentLevel * INDENT_PX}px`;
+  renderPrimitiveControl(row, value, (nextValue) => {
+    editorState.data = nextValue;
+    Streamlit.setComponentValue(editorState.data);
+  });
+  container.appendChild(row);
+}
+
+function renderObject(container, obj, indentLevel) {
+  const open = createLabel("{", "json-punct");
+  open.style.marginLeft = `${indentLevel * INDENT_PX}px`;
+  container.appendChild(open);
+
+  const entries = Object.entries(obj);
+
+  entries.forEach(([entryKey, entryValue]) => {
+    const row = document.createElement("div");
+    row.className = "json-row";
+    row.style.marginLeft = `${(indentLevel + 1) * INDENT_PX}px`;
+
+    let currentKey = entryKey;
+    const keyInput = createTextInput(
+      currentKey,
+      "json-key",
+      editorState.keyEditable,
+    );
+
+    keyInput.addEventListener("change", () => {
+      const nextKey = keyInput.value.trim();
+
+      if (!editorState.keyEditable) {
+        keyInput.value = currentKey;
+        return;
+      }
+      if (nextKey.length === 0 || nextKey === currentKey) {
+        keyInput.value = currentKey;
+        return;
+      }
+      if (Object.prototype.hasOwnProperty.call(obj, nextKey)) {
+        keyInput.value = currentKey;
+        return;
+      }
+
+      obj[nextKey] = obj[currentKey];
+      delete obj[currentKey];
+      currentKey = nextKey;
+
+      renderEditor();
+      emitChange();
+    });
+
+    row.appendChild(keyInput);
+    row.appendChild(createLabel(": ", "json-punct"));
+
+    if (entryValue !== null && typeof entryValue === "object") {
+      container.appendChild(row);
+      renderNode(container, entryValue, indentLevel + 1);
+    } else {
+      renderPrimitiveControl(row, entryValue, (nextValue) => {
+        obj[currentKey] = nextValue;
+      });
+      container.appendChild(row);
+    }
+  });
+
+  const close = createLabel("}", "json-punct");
+  close.style.marginLeft = `${indentLevel * INDENT_PX}px`;
+  container.appendChild(close);
+}
+
+function renderArray(container, arr, indentLevel) {
+  const open = createLabel("[", "json-punct");
+  open.style.marginLeft = `${indentLevel * INDENT_PX}px`;
+  container.appendChild(open);
+
+  arr.forEach((item, index) => {
+    const row = document.createElement("div");
+    row.className = "json-row";
+    row.style.marginLeft = `${(indentLevel + 1) * INDENT_PX}px`;
+    row.appendChild(createLabel(`${index}: `, "json-index"));
+
+    if (item !== null && typeof item === "object") {
+      container.appendChild(row);
+      renderNode(container, item, indentLevel + 1);
+    } else {
+      renderPrimitiveControl(row, item, (nextValue) => {
+        arr[index] = nextValue;
+      });
+      container.appendChild(row);
+    }
+  });
+
+  const close = createLabel("]", "json-punct");
+  close.style.marginLeft = `${indentLevel * INDENT_PX}px`;
+  container.appendChild(close);
+}
+
+function renderEditor() {
+  const jsonContainer = document.getElementById("json-container");
+  jsonContainer.innerHTML = "";
+  renderNode(jsonContainer, editorState.data, 0);
+  Streamlit.setFrameHeight(document.body.scrollHeight + 20);
+}
+
+/**
+ * Called whenever the component receives data from Streamlit.
+ */
+function onRender(event) {
+  const {
+    json_str,
+    key_editable = false,
+    value_editable = true,
+  } = event.detail.args;
+
+  const shouldReset =
+    !editorState.initialized || editorState.sourceJson !== json_str;
+
+  if (shouldReset) {
+    editorState.data = JSON.parse(json_str);
+    editorState.sourceJson = json_str;
+    editorState.initialized = true;
+  }
+
+  editorState.keyEditable = Boolean(key_editable);
+  editorState.valueEditable = Boolean(value_editable);
+
+  renderEditor();
+
+  if (shouldReset) {
+    Streamlit.setComponentValue(editorState.data);
+  }
+}
+
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender);
+Streamlit.setComponentReady();
+Streamlit.setFrameHeight(120);

streamlit_editjson-1.0.0/src/streamlit_editjson/frontend/streamlit-component-lib.js

@@ -0,0 +1,34 @@
+
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+  console.log(type, data)
+  const outData = Object.assign({
+      isStreamlitMessage: true,
+      type: type,
+  }, data);
+  window.parent.postMessage(outData, "*");
+}
+
+const Streamlit = {
+  setComponentReady: function() {
+      sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+  },
+  setFrameHeight: function(height) {
+      sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+  },
+  setComponentValue: function(value) {
+      sendMessageToStreamlitClient("streamlit:setComponentValue", {value: value});
+  },
+  RENDER_EVENT: "streamlit:render",
+  events: {
+      addEventListener: function(type, callback) {
+          window.addEventListener("message", function(event) {
+              if (event.data.type === type) {
+                  event.detail = event.data
+                  callback(event);
+              }
+          });
+      }
+  }
+}

streamlit_editjson-1.0.0/src/streamlit_editjson/frontend/style.css

@@ -0,0 +1,72 @@
+#root {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#json-container {
+  color: #d9e2ef;
+  background: #0f1724;
+  border: 1px solid #253247;
+  border-radius: 8px;
+  padding: 10px 12px;
+  line-height: 1.5;
+}
+
+.json-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 3px 0;
+}
+
+.json-punct {
+  color: #8aa2c1;
+  font-family: Consolas, "Courier New", monospace;
+}
+
+.json-index {
+  color: #8fbcff;
+  min-width: 28px;
+  font-family: Consolas, "Courier New", monospace;
+}
+
+.json-key {
+  min-width: 110px;
+  max-width: 280px;
+  background: #132034;
+  color: #6de89a;
+  border: 1px solid #314663;
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+.json-value {
+  min-width: 100px;
+  background: #132034;
+  color: #ffd27d;
+  border: 1px solid #314663;
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+.json-key:disabled,
+.json-value:disabled,
+.json-value-boolean:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.json-key:focus,
+.json-value:focus,
+.json-value-boolean:focus {
+  outline: 1px solid #7db3ff;
+  border-color: #7db3ff;
+}
+
+.json-value-boolean {
+  min-width: 95px;
+  background: #132034;
+  color: #ffd27d;
+  border: 1px solid #314663;
+  border-radius: 4px;
+  padding: 2px 6px;
+}

streamlit_editjson-1.0.0/src/streamlit_editjson.egg-info/PKG-INFO

@@ -0,0 +1,73 @@
+Metadata-Version: 2.4
+Name: streamlit-editjson
+Version: 1.0.0
+Summary: edit and view json
+Author: Thomas Beer
+Author-email: thomas.beer04@outlook.com
+Requires-Python: >=3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: streamlit>=1.2
+Requires-Dist: jinja2
+Dynamic: author
+Dynamic: author-email
+Dynamic: description
+Dynamic: description-content-type
+Dynamic: license-file
+Dynamic: requires-dist
+Dynamic: requires-python
+Dynamic: summary
+
+# streamlit-editjson
+
+A Streamlit component to view and edit JSON with a user-friendly UI.
+
+## Installation
+
+```sh
+pip install streamlit-editjson
+```
+
+## Usage
+
+```python
+import streamlit as st
+from streamlit_editjson import editjson
+
+value = editjson(
+    filepath="test.json",
+    key_editable=False,   # default
+    value_editable=True,  # default
+)
+
+st.write(value)  # Python dict
+```
+
+## API
+
+`editjson(filepath, key_editable=False, value_editable=True, key=None) -> dict`
+
+- `filepath`: path to a JSON file.
+- `key_editable`: allow editing JSON keys.
+- `value_editable`: allow editing JSON values.
+- `key`: optional Streamlit component key.
+
+The component returns the edited JSON object as a Python `dict`.
+
+## Testing
+
+### Python unit tests
+
+Run:
+
+```sh
+python -m unittest discover -s tests -p "test_*.py"
+```
+
+### Running locally
+
+Run:
+
+```sh
+python -m streamlit run src/streamlit_editjson/__init__.py --server.port 8501
+```

streamlit_editjson-1.0.0/src/streamlit_editjson.egg-info/SOURCES.txt

@@ -0,0 +1,17 @@
+LICENSE
+MANIFEST.in
+README.md
+setup.py
+src/streamlit_editjson/__init__.py
+src/streamlit_editjson.egg-info/PKG-INFO
+src/streamlit_editjson.egg-info/SOURCES.txt
+src/streamlit_editjson.egg-info/dependency_links.txt
+src/streamlit_editjson.egg-info/requires.txt
+src/streamlit_editjson.egg-info/top_level.txt
+src/streamlit_editjson/frontend/__init__.py
+src/streamlit_editjson/frontend/index.html
+src/streamlit_editjson/frontend/main.js
+src/streamlit_editjson/frontend/streamlit-component-lib.js
+src/streamlit_editjson/frontend/style.css
+tests/test_editjson.py
+tests/test_frontend_js.py

streamlit_editjson-1.0.0/src/streamlit_editjson.egg-info/dependency_links.txt

@@ -0,0 +1 @@
+

streamlit_editjson-1.0.0/src/streamlit_editjson.egg-info/requires.txt

@@ -0,0 +1,2 @@
+streamlit>=1.2
+jinja2

streamlit_editjson-1.0.0/src/streamlit_editjson.egg-info/top_level.txt

@@ -0,0 +1 @@
+streamlit_editjson

streamlit_editjson-1.0.0/tests/test_editjson.py

@@ -0,0 +1,79 @@
+import importlib
+import json
+import sys
+import tempfile
+import unittest
+from pathlib import Path
+from unittest.mock import Mock, patch
+
+# Ensure local package import from src/
+PROJECT_ROOT = Path(__file__).resolve().parents[1]
+SRC_PATH = PROJECT_ROOT / "src"
+if str(SRC_PATH) not in sys.path:
+    sys.path.insert(0, str(SRC_PATH))
+
+
+class TestEditJson(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        cls.streamlit_editjson = importlib.import_module("streamlit_editjson")
+
+    def _create_temp_json_file(self, data):
+        tmp_dir = tempfile.TemporaryDirectory()
+        self.addCleanup(tmp_dir.cleanup)
+
+        filepath = Path(tmp_dir.name) / "input.json"
+        filepath.write_text(json.dumps(data), encoding="utf-8")
+        return str(filepath)
+
+    def test_returns_original_json_when_component_returns_none(self):
+        original = {"name": "Alice", "age": 31}
+        filepath = self._create_temp_json_file(original)
+
+        mocked_component = Mock(return_value=None)
+
+        with patch.object(
+            self.streamlit_editjson, "_component_func", mocked_component
+        ):
+            result = self.streamlit_editjson.editjson(filepath)
+
+        self.assertEqual(result, original)
+
+    def test_returns_component_json_when_component_returns_value(self):
+        original = {"name": "Alice", "age": 31}
+        edited = {"name": "Bob", "age": 42}
+        filepath = self._create_temp_json_file(original)
+
+        mocked_component = Mock(return_value=edited)
+
+        with patch.object(
+            self.streamlit_editjson, "_component_func", mocked_component
+        ):
+            result = self.streamlit_editjson.editjson(
+                filepath, key_editable=True, value_editable=False, key="editor_1"
+            )
+
+        self.assertEqual(result, edited)
+
+    def test_passes_expected_arguments_to_component(self):
+        original = {"enabled": True, "count": 3}
+        filepath = self._create_temp_json_file(original)
+
+        mocked_component = Mock(return_value=None)
+
+        with patch.object(
+            self.streamlit_editjson, "_component_func", mocked_component
+        ):
+            self.streamlit_editjson.editjson(filepath)
+
+        _, kwargs = mocked_component.call_args
+
+        self.assertEqual(kwargs["json_str"], json.dumps(original))
+        self.assertEqual(kwargs["key_editable"], False)
+        self.assertEqual(kwargs["value_editable"], True)
+        self.assertIsNone(kwargs["key"])
+        self.assertEqual(kwargs["default"], original)
+
+
+if __name__ == "__main__":
+    unittest.main()

streamlit_editjson-1.0.0/tests/test_frontend_js.py

@@ -0,0 +1,231 @@
+import json
+import unittest
+from pathlib import Path
+
+from py_mini_racer import py_mini_racer
+
+
+PROJECT_ROOT = Path(__file__).resolve().parents[1]
+MAIN_JS_PATH = PROJECT_ROOT / "src" / "streamlit_editjson" / "frontend" / "main.js"
+
+
+class TestFrontendJS(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        cls.main_js = MAIN_JS_PATH.read_text(encoding="utf-8")
+
+    def _ctx(self):
+        ctx = py_mini_racer.MiniRacer()
+        ctx.eval(
+            """
+            var window = {};
+            var document = {
+              body: { scrollHeight: 120 },
+              getElementById: function () {
+                return {
+                  innerHTML: "",
+                  appendChild: function () {}
+                };
+              },
+              createElement: function (tag) {
+                return {
+                  tagName: tag,
+                  className: "",
+                  type: "",
+                  step: "",
+                  value: "",
+                  disabled: false,
+                  textContent: "",
+                  style: {},
+                  children: [],
+                  appendChild: function (child) { this.children.push(child); },
+                  addEventListener: function (_name, cb) { this._listener = cb; }
+                };
+              }
+            };
+
+            var Streamlit = {
+              setComponentValue: function (_value) {},
+              setFrameHeight: function (_height) {},
+              setComponentReady: function () {},
+              RENDER_EVENT: "render",
+              events: {
+                addEventListener: function (_event, _cb) {}
+              }
+            };
+            """
+        )
+        ctx.eval(self.main_js)
+        return ctx
+
+    def test_parse_loose_primitive_all_primitives(self):
+        ctx = self._ctx()
+
+        self.assertIsNone(ctx.eval('parseLoosePrimitive(" null ")'))
+        self.assertTrue(ctx.eval('parseLoosePrimitive("true")'))
+        self.assertFalse(ctx.eval('parseLoosePrimitive("false")'))
+        self.assertEqual(ctx.eval('parseLoosePrimitive("42")'), 42)
+        self.assertEqual(ctx.eval('parseLoosePrimitive("3.5")'), 3.5)
+        self.assertEqual(ctx.eval('parseLoosePrimitive("hello")'), "hello")
+        self.assertEqual(ctx.eval('parseLoosePrimitive("   ")'), "   ")
+
+    def test_create_boolean_select_shape(self):
+        ctx = self._ctx()
+
+        payload_true = json.loads(
+            ctx.eval(
+                """
+                JSON.stringify((function () {
+                  var s = createBooleanSelect(true, false);
+                  return {
+                    className: s.className,
+                    disabled: s.disabled,
+                    value: s.value,
+                    childCount: s.children.length,
+                    optionValues: s.children.map(function (x) { return x.value; })
+                  };
+                })())
+                """
+            )
+        )
+
+        self.assertEqual(payload_true["className"], "json-value json-value-boolean")
+        self.assertTrue(payload_true["disabled"])
+        self.assertEqual(payload_true["value"], "true")
+        self.assertEqual(payload_true["childCount"], 2)
+        self.assertEqual(payload_true["optionValues"], ["true", "false"])
+
+        payload_false = json.loads(
+            ctx.eval(
+                """
+                JSON.stringify((function () {
+                  var s = createBooleanSelect(false, true);
+                  return {
+                    disabled: s.disabled,
+                    value: s.value
+                  };
+                })())
+                """
+            )
+        )
+        self.assertFalse(payload_false["disabled"])
+        self.assertEqual(payload_false["value"], "false")
+
+    def test_render_primitive_control_dispatches_correct_creator(self):
+        ctx = self._ctx()
+
+        ctx.eval(
+            """
+            var __calls = [];
+            createNumberInput = function (value, editable) {
+              __calls.push(["number", value, editable]);
+              return { addEventListener: function () {} };
+            };
+            createBooleanSelect = function (value, editable) {
+              __calls.push(["boolean", value, editable]);
+              return { addEventListener: function () {} };
+            };
+            createTextInput = function (value, className, editable) {
+              __calls.push(["text", value, className, editable]);
+              return { addEventListener: function () {} };
+            };
+
+            editorState.valueEditable = true;
+            var __parent = { children: [], appendChild: function (x) { this.children.push(x); } };
+
+            renderPrimitiveControl(__parent, 7, function () {});
+            renderPrimitiveControl(__parent, true, function () {});
+            renderPrimitiveControl(__parent, "abc", function () {});
+            renderPrimitiveControl(__parent, null, function () {});
+            """
+        )
+
+        calls = json.loads(ctx.eval("JSON.stringify(__calls)"))
+
+        self.assertEqual(calls[0], ["number", 7, True])
+        self.assertEqual(calls[1], ["boolean", True, True])
+        self.assertEqual(calls[2], ["text", "abc", "json-value json-value-text", True])
+        self.assertEqual(calls[3], ["text", "null", "json-value json-value-text", True])
+
+    def test_render_object_key_rename_updates_underlying_object(self):
+        ctx = self._ctx()
+
+        result = json.loads(
+            ctx.eval(
+                """
+                JSON.stringify((function () {
+                  editorState.keyEditable = true;
+                  var obj = { old_key: 123 };
+                  editorState.data = obj;
+                  var container = {
+                    children: [],
+                    appendChild: function (x) { this.children.push(x); }
+                  };
+
+                  renderObject(container, obj, 0);
+
+                  var keyInput = container.children[1].children[0];
+                  keyInput.value = "new_key";
+                  keyInput._listener();
+
+                  return {
+                    hasOldKey: Object.prototype.hasOwnProperty.call(obj, "old_key"),
+                    hasNewKey: Object.prototype.hasOwnProperty.call(obj, "new_key"),
+                    newValue: obj.new_key
+                  };
+                })())
+                """
+            )
+        )
+
+        self.assertFalse(result["hasOldKey"])
+        self.assertTrue(result["hasNewKey"])
+        self.assertEqual(result["newValue"], 123)
+
+    def test_render_object_key_rename_rejects_empty_and_collision(self):
+        ctx = self._ctx()
+
+        result = json.loads(
+            ctx.eval(
+                """
+                JSON.stringify((function () {
+                  editorState.keyEditable = true;
+                  var obj = { first: 1, second: 2 };
+                  editorState.data = obj;
+                  var container = {
+                    children: [],
+                    appendChild: function (x) { this.children.push(x); }
+                  };
+
+                  renderObject(container, obj, 0);
+                  var firstKeyInput = container.children[1].children[0];
+
+                  firstKeyInput.value = "   ";
+                  firstKeyInput._listener();
+
+                  var keysAfterEmpty = Object.keys(obj).sort();
+
+                  firstKeyInput.value = "second";
+                  firstKeyInput._listener();
+
+                  var keysAfterCollision = Object.keys(obj).sort();
+
+                  return {
+                    keysAfterEmpty: keysAfterEmpty,
+                    keysAfterCollision: keysAfterCollision,
+                    firstValue: obj.first,
+                    secondValue: obj.second
+                  };
+                })())
+                """
+            )
+        )
+
+        self.assertEqual(result["keysAfterEmpty"], ["first", "second"])
+        self.assertEqual(result["keysAfterCollision"], ["first", "second"])
+        self.assertEqual(result["firstValue"], 1)
+        self.assertEqual(result["secondValue"], 2)
+
+
+if __name__ == "__main__":
+    unittest.main()