Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomasr8/pyjsx
Write JSX directly in Python
https://github.com/tomasr8/pyjsx
jsx python template-engine transpiler
Last synced: 2 days ago
JSON representation
Write JSX directly in Python
- Host: GitHub
- URL: https://github.com/tomasr8/pyjsx
- Owner: tomasr8
- License: apache-2.0
- Created: 2024-08-12T22:07:39.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-01-29T21:25:26.000Z (22 days ago)
- Last Synced: 2025-02-10T02:06:22.525Z (10 days ago)
- Topics: jsx, python, template-engine, transpiler
- Language: Python
- Homepage:
- Size: 156 KB
- Stars: 42
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# PyJSX - Write JSX directly in Python
```python
from pyjsx import jsx, JSX
def Header(style, children) -> JSX:
return
{children}
def Main(children) -> JSX:
return {children}
def App() -> JSX:
return (
Hello, world!
This was rendered with PyJSX!
)
```
## Installation
Get it via pip:
```sh
pip install python-jsx
```
## Minimal example (using the `coding` directive)
> [!TIP]
> There are more examples available in the [examples folder](examples).
There are two supported ways to seamlessly integrate JSX into your codebase.
One is by registering a custom codec shown here and the other by using a custom import hook shown [below](#minimal-example-using-an-import-hook).
```python
# hello.py
# coding: jsx
from pyjsx import jsx
def hello():
print(
Hello, world!
)
```
```python
# main.py
from pyjsx import auto_setup
from hello import hello
hello()
```
```sh
$ python main.py
Hello, word!
```
Each file containing JSX must contain two things:
- `# coding: jsx` directive - This tells Python to let our library parse the
file first.
- `from pyjsx import jsx` import. PyJSX transpiles JSX into `jsx(...)` calls so
it must be in scope.
To run a file containing JSX, the `jsx` codec must be registered first which can
be done with `from pyjsx import auto_setup`. This must occur before importing
any other file containing JSX.
## Minimal example (using an import hook)
> [!TIP]
> There are more examples available in the [examples folder](examples).
```python
# hello.px
from pyjsx import jsx
def hello():
print(
Hello, world!
)
```
```python
# main.py
from pyjsx import auto_setup
from hello import hello
hello()
```
```sh
$ python main.py
Hello, word!
```
Each file containing JSX must contain two things:
- The file extension must be `.px`
- `from pyjsx import jsx` import. PyJSX transpiles JSX into `jsx(...)` calls so
it must be in scope.
To be able to import `.px`, the import hook must be registered first which can
be done with `from pyjsx import auto_setup` (same as for the codec version). This must occur before importing any other file containing JSX.
## Supported grammar
The full [JSX grammar](https://facebook.github.io/jsx/) is supported.
Here are a few examples:
### Normal and self-closing tags
```python
x =
y = ![]()
```
### Props
```python
Click me!
This is red
Spread operator
```
### Nested expressions
```python
{[Row: {i}
for i in range(10)]}
```
### Fragments
```python
fragment = (
<>
1st paragraph
2nd paragraph
>
)
```
### Custom components
A custom component can be any function that takes `**kwargs` and
returns JSX or a plain string. The special prop `children` is a list
containing the element's children.
```python
def Header(children, **rest):
return
{children}
header = Title
print(header)
```
## Prior art
Inspired by [packed](https://github.com/michaeljones/packed) and
[pyxl4](https://github.com/pyxl4/pyxl4).