Bumped react-script, seems to fix install and run issues

.github/workflows/ci.yaml

@@ -0,0 +1,98 @@
+name: CI
+
+on:
+  push:
+    branches: 
+      - "master"
+  pull_request:
+    branches: 
+      - "master"
+
+jobs:
+  build-templates:
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: 
+          # For details, see: https://nodejs.dev/en/about/releases/
+          # Maintance LTS. End Of Life: 2023-04-30
+          - 14.x
+          # Maintance LTS. End Of Life: 2023-09-11
+          - 16.x
+          # The following versions are not supported as 
+          # they require react-script 5 which requires changes in 
+          # streamlit-component-lib package.
+          # For details, see: 
+          # https://github.com/streamlit/streamlit/pull/6584
+          # # Active LTS. End Of Life: 2025-04-30
+          # - 18.x
+          # # Current version
+          # - 19.x
+        cwd:
+          - ./template
+          - ./template-reactless
+
+    name: Templates / node-version=${{ matrix.node-version }} / cwd=${{ matrix.cwd }}
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        persist-credentials: false
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install node dependencies
+      working-directory: ${{ matrix.cwd }}/my_component/frontend
+      run: npm install
+
+    - name: Build frontend code
+      working-directory: ${{ matrix.cwd }}//my_component/frontend
+      run: npm run build
+
+  build-examples:
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: 
+          # For details, see: https://nodejs.dev/en/about/releases/
+          # Maintance LTS. End Of Life: 2023-04-30
+          - 14.x
+          # Maintance LTS. End Of Life: 2023-09-11
+          - 16.x
+          # The following versions are not supported as 
+          # they require react-script 5 which requires changes in 
+          # streamlit-component-lib package.
+          # For details, see: 
+          # https://github.com/streamlit/streamlit/pull/6584
+          # # Active LTS. End Of Life: 2025-04-30
+          # - 18.x
+          # # Current version
+          # - 19.x
+
+    name: Examples / node-version=${{ matrix.node-version }}
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        persist-credentials: false
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Check dependencies
+      run: ./dev.py examples-check-deps
+
+    - name: Install node dependencies
+      run: ./dev.py examples-npm-install
+
+    - name: Build frontend code
+      run: ./dev.py examples-npm-build

.gitignore

@@ -54,8 +54,10 @@ node_modules/
 coverage/
 
 # Lockfiles
-yarn.lock
-package-lock.json
+template/**/yarn.lock
+template/**/package-lock.json
+template-reactless/**/yarn.lock
+template-reactless/**/package-lock.json
 
 ########################################################################
 # JetBrains

README.md

@@ -75,6 +75,10 @@ These templates are provided by the community. If you run into any issues, pleas
 - [streamlit-component-template-vue](https://github.com/andfanilo/streamlit-component-template-vue) - [@andfanilo](https://github.com/andfanilo)
 - [streamlit-component-template-react-hooks](https://github.com/whitphx/streamlit-component-template-react-hooks) - [@whitphx](https://github.com/whitphx)
 
+## Contributing
+
+If you want to contribute to this project, `./dev.py` script will be helpful for you. For details, run `./dev.py --help`.
+
 ## More Information
 
 * [Streamlit Components documentation](https://docs.streamlit.io/library/components)

dev.py

@@ -0,0 +1,103 @@
+#!/usr/bin/env python3
+"""
+A tool to support the maintenance of templates and examples in this repository.
+Something like a Makefile but written in Python for easier maintenance.
+
+To list the available commands, run ./dev.py --help.
+"""
+import argparse
+from glob import glob
+import shlex
+import subprocess
+from pathlib import Path
+import json
+import sys
+
+THIS_DIRECTORY = Path(__file__).parent.absolute()
+EXAMPLE_DIRECTORIES = (d for d in (THIS_DIRECTORY / 'examples').iterdir() if d.is_dir())
+
+# Utilities function
+def run_verbose(cmd_args, *args, **kwargs):
+    kwargs.setdefault("check", True)
+    cwd = kwargs.get('cwd')
+    message_suffix = f" [CWD: {Path(cwd).relative_to(THIS_DIRECTORY)}]" if cwd else ''
+
+    print(f"$ {shlex.join(cmd_args)}{message_suffix}", flush=True)
+    subprocess.run(cmd_args, *args, **kwargs)
+
+
+# Commands
+def cmd_example_npm_install(args):
+    """"Install all node dependencies for all examples"""
+    for example_dir in EXAMPLE_DIRECTORIES:
+        run_verbose(["npm", "install"], cwd=str(example_dir / "frontend"))
+
+
+def cmd_example_npm_build(args):
+    """"Build javascript code for all examples"""
+    for example_dir in EXAMPLE_DIRECTORIES:
+        run_verbose(["npm", "run", "build"], cwd=str(example_dir / "frontend"))
+
+def check_deps(template_package_json, current_package_json):
+    return (
+        check_deps_section(template_package_json, current_package_json, 'dependencies') + 
+        check_deps_section(template_package_json, current_package_json, 'devDependencies')
+    )
+
+def check_deps_section(template_package_json, current_package_json, section_name):
+    current_package_deps = current_package_json.get(section_name, dict())
+    template_package_deps = template_package_json.get(section_name, dict())
+    errors = []
+
+    for k, v in template_package_deps.items():
+        if k not in current_package_deps:
+            errors.append(f'Missing [{k}:{v}] in {section_name!r} section')
+            continue
+        current_version = current_package_deps[k]
+        if current_version != v:
+            errors.append(f'Invalid version of {k!r}. Expected: {v!r}. Current: {current_version!r}')
+    return errors
+
+
+def cmd_example_check_deps(args):
+    """Checks that dependencies of examples match the template"""
+    tempalte_deps = json.loads((THIS_DIRECTORY / "template" / "my_component" / "frontend" / "package.json").read_text())
+    examples_package_jsons = sorted(d / "frontend"/ "package.json" for d in EXAMPLE_DIRECTORIES)
+    exit_code = 0
+    for examples_package_json in examples_package_jsons:
+        example_deps = json.loads(examples_package_json.read_text())
+        errors = check_deps(tempalte_deps, example_deps)
+        if errors:
+            print(f"Found erorr in {examples_package_json.relative_to(THIS_DIRECTORY)!s}")
+            print("\n".join(errors))
+            print()
+            exit_code = 1
+    if exit_code == 0:
+        print("No errors")
+
+    sys.exit(exit_code)
+
+COMMMANDS = {
+    "examples-npm-install": cmd_example_npm_install,
+    "examples-npm-build": cmd_example_npm_build,
+    "examples-check-deps": cmd_example_check_deps,
+}
+
+# Parser    
+def get_parser():
+    parser = argparse.ArgumentParser(prog=__file__, description=__doc__)
+    subparsers = parser.add_subparsers(dest="subcommand", metavar="COMMAND")
+    subparsers.required = True
+    for commmand_name, command_fn in COMMMANDS.items():
+        subparsers.add_parser(commmand_name, help=command_fn.__doc__).set_defaults(func=command_fn)
+    return parser
+
+
+# Main function
+def main():
+    parser = get_parser()
+    args = parser.parse_args()
+    args.func(args)
+
+if __name__ == "__main__":
+    main()