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 hashes)

Uploaded Source

Built Distribution

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

Uploaded Python 3

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