Xtyle (Toolkit)
Project description
Xtyle
Python (JSX-Toolkit) Documentation
Introduction
Welcome to the Xtyle! This tool allows you to work with JSX components.
It is powered by.
- Python:
py-mini-racer
,css-html-js-minify
, andlibsass
- JavaScript:
babel
, andprettier
Install
pip install "xtyle"
Install for Development
pip install "xtyle[debug]"
Example (JSX)
import xtyle
code_js = xtyle.jsx("const App = () => <div>Hello World</div>")
print(code_js)
Example (SCSS)
import xtyle
code_css = xtyle.scss("$color: red; body { color: $color; }")
print(code_css)
Get Server and Learn More...
Example (Client)
import xtyle
engine = xtyle.client("http://localhost:3000")
engine.component(
name="kebab-case-name",
code="TypeScript Code",
props="TypeScript Code",
style="SASS/SCSS Code",
docs="TypeScript Code",
)
engine.plugin(
name="myPlugin",
components=[
dict(
name="kebab-case-name",
code="TypeScript Code",
props="TypeScript Code",
style="SASS/SCSS Code",
docs="TypeScript Code",
)
],
install=dict(
init="export default list",
store="export default dict",
globals="export default dict",
directives="export default dict",
),
)
Example (Client-Extended)
import xtyle
engine = xtyle.client("http://localhost:3000")
def create_component(name):
return {
"name": name,
"code": "\nexport default function Component(props: Props = {}) {\n return (\n <div x-html {...props} class={[$NAME, props.class]}>\n {props.children}\n </div>\n );\n}\n",
"style": "\n$color: red;\n.#{$NAME} { color: $color; }\n",
"props": "\ntype Props = {\n class?: string | string[] | object;\n style?: string | string[] | object;\n children?: any;\n};\n\nexport default Props;\n",
"docs": "\n/**\n * Component - This is a my component.\n */\n",
}
one_component = create_component("alert")
example_components = [
create_component("alert"),
create_component("custom-button"),
]
plugin_name = "myPlugin"
install_code = {"init": """export default [() => console.log("Plugin INIT")]"""}
# Component
demo_component = engine.component(**one_component)
# Plugin
demo_plugin = engine.plugin(plugin_name, example_components, install_code)
print(demo_component)
print("\n\n")
print(demo_plugin)
Browser Usage
<!-- Babel & Prettier -->
<script src="https://cdn.jsdelivr.net/gh/hlop3z/xtyle-python@main/src/xtyle/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hlop3z/xtyle-python@main/src/xtyle/prettier-full.min.js"></script>
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
xtyle-0.1.10.tar.gz
(1.3 MB
view details)
Built Distribution
File details
Details for the file xtyle-0.1.10.tar.gz
.
File metadata
- Download URL: xtyle-0.1.10.tar.gz
- Upload date:
- Size: 1.3 MB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: pdm/2.9.3 CPython/3.12.0
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 703390c67cb336b4aaae4d7f2d913bd0f73f66c2ae7adee83ae224c783446a29 |
|
MD5 | 0f2819357d7e9fd63ecd604fe5d2a503 |
|
BLAKE2b-256 | 2f4c7794bb3c7be63eb22ccab85a66c441a45b211db68693a88982cfc59bd251 |
File details
Details for the file xtyle-0.1.10-py3-none-any.whl
.
File metadata
- Download URL: xtyle-0.1.10-py3-none-any.whl
- Upload date:
- Size: 1.3 MB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: pdm/2.9.3 CPython/3.12.0
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | ec4bfdd500488f394862d110e1068c85d94ae348f8e74a4ee943535791004b20 |
|
MD5 | 1c6f56491bee73e164d6ce2d44378115 |
|
BLAKE2b-256 | 1a9ec435111278b2277692b09ddf049318e5ec4b8ee0c619952fee5d4bf6f8f9 |