Skip to main content

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, and libsass
  • JavaScript: babel, and prettier

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


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)

Uploaded Source

Built Distribution

xtyle-0.1.10-py3-none-any.whl (1.3 MB view details)

Uploaded Python 3

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

Hashes for xtyle-0.1.10.tar.gz
Algorithm Hash digest
SHA256 703390c67cb336b4aaae4d7f2d913bd0f73f66c2ae7adee83ae224c783446a29
MD5 0f2819357d7e9fd63ecd604fe5d2a503
BLAKE2b-256 2f4c7794bb3c7be63eb22ccab85a66c441a45b211db68693a88982cfc59bd251

See more details on using hashes here.

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

Hashes for xtyle-0.1.10-py3-none-any.whl
Algorithm Hash digest
SHA256 ec4bfdd500488f394862d110e1068c85d94ae348f8e74a4ee943535791004b20
MD5 1c6f56491bee73e164d6ce2d44378115
BLAKE2b-256 1a9ec435111278b2277692b09ddf049318e5ec4b8ee0c619952fee5d4bf6f8f9

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page