Merge pull request #6 from blackary/vanilla2

Simplify to vanilla js
blackary · Sep 2, 2022 · 3c8ba48 · 3c8ba48
2 parents c96b9cf + cb36c02
commit 3c8ba48
Show file tree

Hide file tree

Showing 16 changed files with 291 additions and 338 deletions.
diff --git a/.github/workflows/publish_PYPI_each_tag.yml b/.github/workflows/publish_PYPI_each_tag.yml
@@ -17,15 +17,6 @@ jobs:
         uses: actions/setup-python@v2
         with:
           python-version: "3.x"
-      - name: install node
-        run: |
-          sudo apt install nodejs npm
-          npm --version
-      - name: build streamlit-keyup JS
-        run: |
-          cd src/st_keyup/frontend/
-          npm install
-          npm run build
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip

diff --git a/MANIFEST.in b/MANIFEST.in
@@ -1,3 +1,3 @@
-recursive-include src/st_keyup/frontend/build *
+recursive-include src/st_keyup/frontend *
 include README.md
 include LICENSE
diff --git a/README.md b/README.md
@@ -1,5 +1,10 @@
 # streamlit-keyup
 
+[![PyPI version](https://img.shields.io/pypi/v/streamlit-keyup.svg?logo=pypi&logoColor=FFE873)](https://pypi.org/project/streamlit-keyup/)
+[![PyPI downloads](https://img.shields.io/pypi/dm/streamlit-keyup.svg)](https://pypistats.org/packages/streamlit-keyup)
+[![GitHub](https://img.shields.io/github/license/blackary/streamlit-keyup.svg)](LICENSE)
+[![Code style: Black](https://img.shields.io/badge/code%20style-Black-000000.svg)](https://github.com/psf/black)
+
 If you're collecting text input from your users in your streamlit app, `st.text_input` works well -- as long as you're happy with
 waiting to get the response when they're finished typing.
 
@@ -11,7 +16,6 @@ But, what if you want to get the input out, and do something with it every time
 
 ## Installation
 
-
 `pip install streamlit-keyup`
 
 ## Usage

diff --git a/setup.py b/setup.py
@@ -7,14 +7,13 @@
 
 setuptools.setup(
     name="streamlit-keyup",
-    version="0.1.6",
+    version="0.1.7",
     author="Zachary Blackwood",
     author_email="[email protected]",
     description="Text input that renders on keyup",
     long_description=long_description,
     long_description_content_type="text/markdown",
     url="https://github.com/blackary/streamlit-keyup",
-    # packages=setuptools.find_packages(),
     packages=setuptools.find_packages(where="src"),
     package_dir={"": "src"},
     include_package_data=True,

diff --git a/src/st_keyup/__init__.py b/src/st_keyup/__init__.py
@@ -1,21 +1,11 @@
-import os
+from pathlib import Path
 from typing import Optional
 
 import streamlit as st
 import streamlit.components.v1 as components
 
-# Create a _RELEASE constant. We'll set this to False while we're developing
-# the component, and True when we're ready to package and distribute it.
-_RELEASE = True
-
-if not _RELEASE:
-    _component_func = components.declare_component(
-        "st_keyup", url="http://localhost:3001"
-    )
-else:
-    parent_dir = os.path.dirname(os.path.abspath(__file__))
-    build_dir = os.path.join(parent_dir, "frontend/build")
-    _component_func = components.declare_component("st_keyup", path=build_dir)
+build_dir = Path(__file__).parent.absolute() / "frontend"
+_component_func = components.declare_component("st_keyup", path=str(build_dir))
 
 
 def st_keyup(
@@ -68,5 +58,4 @@ def main():
 
 
 if __name__ == "__main__":
-    if not _RELEASE:
-        main()
+    main()
diff --git a/src/st_keyup/frontend/.env b/src/st_keyup/frontend/.env
diff --git a/src/st_keyup/frontend/.prettierrc b/src/st_keyup/frontend/.prettierrc
diff --git a/src/st_keyup/frontend/index.html b/src/st_keyup/frontend/index.html
@@ -0,0 +1,20 @@
+<!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 Keyup</title>
+    <script src="./streamlit-component-lib.js"></script>
+    <script src="./main.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="root">
+      <label id="label" for="text_input">This is a label</label>
+      <div class="input">
+        <input type="text" name="text_input" id="input_box" />
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/st_keyup/frontend/main.js b/src/st_keyup/frontend/main.js
@@ -0,0 +1,49 @@
+function onKeyUp(event) {
+  Streamlit.setComponentValue(event.target.value)
+}
+
+const debounce = (callback, wait) => {
+  let timeoutId = null;
+  return (...args) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback.apply(null, args);
+    }, wait);
+  };
+}
+
+/**
+ * The component's render function. This will be called immediately after
+ * the component is initially loaded, and then again every time the
+ * component gets new data from Python.
+ */
+function onRender(event) {
+  // Get the RenderData from the event
+  if (!window.rendered) {
+    const {label, value, debounce: debounce_time } = event.detail.args;
+    const input = document.getElementById("input_box");
+    const label_el = document.getElementById("label")
+
+    if (label_el) {
+      label_el.innerText = label
+    }
+
+    if (value && !input.value) {
+      input.value = value
+    }
+
+    if (debounce_time > 0) {
+      input.onkeyup = debounce(onKeyUp, debounce_time)
+    }
+    else {
+      input.onkeyup = onKeyUp
+    }
+
+    window.rendered = true
+  }
+}
+
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
+Streamlit.setComponentReady()
+// Render with the correct height
+Streamlit.setFrameHeight(85)
diff --git a/src/st_keyup/frontend/package.json b/src/st_keyup/frontend/package.json
diff --git a/src/st_keyup/frontend/public/index.html b/src/st_keyup/frontend/public/index.html