Skip to content

feat: implement event handling for cookie clicker extension - #354

Open
lebalz wants to merge 30 commits into
feat/pyodide-extension-apifrom
feat/two-way-pyodide-bindings
Open

lebalz wants to merge 30 commits into
feat/pyodide-extension-apifrom
feat/two-way-pyodide-bindings

Conversation

@lebalz

@lebalz lebalz commented Oct 28, 2026 •

Copy link
Copy Markdown
Contributor

Python scripts can now receive browser events from extension handles and update interactive components while the script remains active. The cookie clicker demonstrates the full flow: clicking either cookie updates its rotation, and the focused second cookie turns 5° left or right with the arrow keys.

Changes

  • Add generic webio.on_event, @on_click(target), and @on_key(target, key=None) APIs. Keyboard handlers can filter by a key such as ArrowLeft; None and '*' receive all keys.
  • Process synchronous and asynchronous handlers sequentially through await webio.run(). Async handlers can use await asyncio.sleep(...); webio.stop() ends event processing.
  • Bind subscriptions to the current execution, allow one controller per event source, and release subscriptions on completion or cancellation. Bound event queues and reject stale deliveries so events cannot leak into a later execution.
  • Add a cookie extension, a MobX CookieStore with multiple models keyed by ID, and an accessible cookie button with focus-scoped keyboard input. Keep cookie behavior outside the generic Python event module.
  • Document the event API and cookie example. The local follow-up moves package documentation into docs/ and gives the cookie example its own linked subpage, following brython-code.
  • Declare the injected Python bridge with a protocol so Pylance can understand its methods without replacing the runtime value.

- Add event handling infrastructure in the pyodide-code package.
- Create EventSource and ExecutionEventSource interfaces for event management.
- Implement ExtensionEventStore to manage event subscriptions and deliveries.
- Develop WorkerEventSession to handle event sessions in web workers.
- Introduce webio.py for Python event handling, allowing event registration and processing.
- Create cookie-klicker extension with event handling for cookie clicks.
- Add CookieComponent to the website for user interaction with cookies.
- Update SiteStore to include CookieStore for managing cookie states.
- Enhance tests for event handling and worker extensions to ensure reliability.
@lebalz
lebalz added this pull request to stack #355 October 28, 2026 18:53
@bolt-new-by-stackblitz

Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@netlify

netlify Bot commented Oct 28, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for teaching-dev ready!

Name Link
🔨 Latest commit b1eaa23
🔍 Latest deploy log https://app.netlify.com/projects/teaching-dev/deploys/6ae3d59eaef685698bdebf63
😎 Deploy Preview https://deploy-preview-354--teaching-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@lebalz
lebalz requested a review from a team October 28, 2026 21:00
lebalz added 24 commits October 29, 2026 07:06
… cookie-klicker extensions

- Implemented a new ClientExtensions class to manage extension instances and their stores.
- Updated the extension message handling to utilize the new ClientExtensions class.
- Enhanced the extension configuration to support both string and object descriptors.
- Created a new hook `useExtensionStore` for easier access to extension stores.
- Introduced a clock extension with a complete implementation including a Clock class, ClockStore, and UI components.
- Added a cookie-klicker extension with a Cookie class, CookieStore, and interactive UI components.
- Updated the SiteStore to remove direct references to ClockStore and CookieStore, simplifying the structure.
- Added README files for both clock and cookie-klicker extensions to guide usage.
- Implemented the snowfall game using a game loop to manage snowflake rendering and user interactions.
- Added new components and styles for the snowfall game, including scene management and event handling.
- Updated webio documentation to include details about the new game loop functionality.
- Enhanced event handling in the WorkerEventSession to support frame-based updates.
- Registered the snowfall game extension in the site configuration for easy integration.
…capabilities

- Implemented a new grid extension for the Teaching Dev website, allowing users to create and manipulate grids using Python.
- Added JavaScript and Python modules for grid rendering, including support for cell colors, text, and event handling.
- Introduced a WorkerGrid class to manage grid state and rendering in a web worker context.
- Created a Grid class in Python to interface with the JavaScript grid functionality, enabling seamless integration.
- Developed a client extension to handle grid messages and updates from the worker.
- Added tests for Python module registration and grid functionality to ensure reliability.
- Updated site configuration to include the new grid extension.
- Added CookieStore to manage cookies in the Cookie Clicker game.
- Introduced GridStore to handle grid-related data in the grid component.
- Created Grid component with rendering logic and event handling.
- Developed WorkerGrid for offloading grid operations to a web worker.
- Added Scene and SceneStore for managing the Snowfall game state.
- Implemented WorkerScene for handling scene operations in a web worker.
- Updated README files to reflect new import paths for components.
- Added styles for Grid and SnowfallGame components.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant