Package: turbosnake
turbosnake - a react.js-like framework for ui in pythonMotivationThere are lots of nice graphical applications written in python. But code that creates UI (at least in simple examples I
could find and in few projects I tried to contribute to) looks like some sort of imperative mess. And it gets even
uglier when UI should be changed dynamically. So, I decided to try to reproduce the declarative approach which I am used
to as a professional web-developer.Installing$pipinstallturbosnakeSyntaxUnlike JavaScript frameworks with JSX, we cannot just modify Python's syntax for our purposes. Instead, turbosnake uses
unmodified Python's syntax to represent its concepts.Instantiating componentsInstead of JSX's<Component ... />turbosnake uses a plain function call:component(...)In most cases, return value of such calls is useless. The main effect of such call is a component being appended to a
list in specific runtime context. Calls of components outside of proper runtime context are prohibited and will cause
error.Nesting componentsChildren are added to a component usingwithoperator:withcomponent1(...):component11(...)component12(...)this fragment of code is kinda equivalent to the following JSX:<Component1 ...>
    <Component11 .../>
    <Component12 .../>
</Component1>but unlike it, any loops and conditions are allowed within body ofwithoperator. Components that support nesting
implement context provider interface. When used inwithoperator they substitute previously mentioned runtime context
with the one that adds all created components to list of their children.Functional componentsThe easiest way to compose few components is to create a functional component. In some simple cases (component doesn't
use hooks or is always rendered constant number of times within it's parent) a plain function can serve as a functional
component:deffoo(**props):withcomponent1():component2(**props)...foo(...)But a function can be converted into a full-fledged component with its own state usingfunctional_componentdecorator:fromturbosnakeimportfunctional_component...@functional_componentdeffoo(**props):withcomponent1():component2(**props)...foo(...)Depending on function signature and settings passed to the decorator, it may add (or don't add) support for nesting and
hooks.HooksHooks are supported in functional components (if not disabled explicitly) and in components
inheritingComponentWithHooks. Some of implemented hooks are:use_toggle,use_state,use_memo,use_effect,use_callback,use_previous,use_ref,use_callback_proxy,use_self.Hooks that accept a function can be used as decorators on a local function:fromturbosnakeimportfunctional_component,use_callback...@functional_componentdeffoo():...@use_callback([...])defcallback():......UICore of turbosnake isn't bound to any UI library or framework. With some effort applied, it can be used with any UI
library or even for purposes different from user interface rendering.Packageturbosnake.ttkprovides adapters for tkinter (mostly ttk) UI components. For examples
seeTODO-list application example.Live previewComposite turbosnake UI components are not meant to be edited using any sort of visual editor. But, in order to make it
easier to create, modify and debug complex layouts turbosnake provides live preview tool. It is inspired by React's
Storybook. The tool tracks changes in component file and renders the most recent version in a window.Current version of preview tool tracks changes only in the preview file itself. Tracking of changes in dependencies may
be added later.Seepreview_example.pyfor example
of preview tool use.