Xtyle (Toolkit)
Project description
Xtyle
Python (JSX-Toolkit) Documentation
Introduction
Welcome to the Xtyle! This tool allows you to work with JSX components, compile them, and save them as static files for use with other frameworks like Flask. It is powered by py-mini-racer, css-html-js-minify, and libsass.
Getting Started
To get started with the JSX Python Tool, follow these steps:
-
Initialization: Initialize the JSX engine using
JSX.init(BASE_DIR)whereBASE_DIRis the base directory for your project. -
Loading Components: Load a JSX component folder using
JSX.component(component_name). This will allow you to work with the specified component. -
Compilation and Saving: Compile the loaded component, and save the compiled JavaScript and CSS files using
JSX.save(). -
API: Use the API to create or delete components using
JSX.api(action, component_name). Available actions are "create" and "delete". -
Build Configuration: Use
JSX.build()to build your components. This can be useful for printing or further processing. -
Config File: To use the saved static files with other tools like Flask, you can load the configuration file using
JSX.get_config().
Examples
Here's an example of how to use the JSX Python Tool:
from pathlib import Path
from xtyle import JSX
# Root Path
BASE_DIR = Path(__file__).parent
# Initialize the JSX engine
JSX.init(BASE_DIR)
# Load and work with a component
JSX.component("hello-world")
# Create and delete components using the API
JSX.api("create", "button")
JSX.api("delete", "button")
# Save compiled files
JSX.save()
Flask Example
Python
from flask import Flask, render_template
from xtyle import JSX
# Initialize the JSX engine
BASE_DIR = Path(__file__).parent
JSX.init(BASE_DIR)
# Initialize Flask App
app = Flask(__name__)
gui = JSX.get_config() # JSX Configuration
def dev_component(*components):
for name in components:
JSX.component(name)
return ""
# Routes
@app.route("/")
def index():
return render_template(
"index.html",
jsx=dev_component,
jsx_code=JSX.dev,
static_url_js=gui.js,
static_url_css=gui.css,
)
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Flask App</title>
<!-- Xtyle (JS) -->
<script
src="https://unpkg.com/xtyle@latest"
type="text/javascript"
></script>
<!-- Components -->
{{ jsx("demo", "hello-world") }}
<!-- JSX Code -->
{{ jsx_code() | safe }}
</head>
<body>
<script type="text/javascript">
/* @Register */
xtyle.use({
elements: GUI,
});
/* @Router */
const router = {
history: false,
baseURL: null,
};
/* @Render */
xtyle.init(GUI.demo, document.body, router);
</script>
</body>
</html>
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.
