Teloce-Py

A Python compiler for Teloce .vel Single File Components.

Overview

Teloce-Py is a 100% Python compiler that transforms .vel Single File Components into self-contained vanilla JavaScript. It works with any Python web framework (Flask, Flaxon, Django, FastAPI) without requiring Node.js, npm, or a CDN.

Philosophy

"Write components in Python, run them in the browser — no npm required."

• 100% Python — The compiler is written entirely in Python
• Self-contained JavaScript — The output includes everything needed to run in the browser
• No npm/Node.js — Python developers don't need JavaScript tooling
• Framework Agnostic — Works with Flask, Flaxon, Django, FastAPI, and more

Quick Start

Installation

pip install teloce-py
Create a .vel Component
html
<!-- static/js/App.vel -->
<template>
    <div class="app">
        <h1>{{ title }}</h1>
        <button @click="increment">{{ count }}</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: "Hello Teloce",
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
};
</script>

<style scoped>
.app { padding: 20px; }
button { background: #6366f1; color: white; border: none; padding: 8px 16px; }
</style>
Run Your Python App
python
# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()
The compiler automatically discovers .vel files and generates JavaScript.

What Happens
text
static/js/App.vel
        ↓
Teloce-Py Compiler
        ↓
static/js/App.js (self-contained)
        ↓
Browser executes App.js
No npm. No Node.js. No CDN. Just Python and vanilla JavaScript.

### npm/CDN-style standalone usage

For existing Flask, Django, FastAPI, Jinja, or static HTML pages that do not
use `.vel` files, serve `src/teloce/runtime/standalone.js` (also available as
`teloce.runtime.STANDALONE_RUNTIME`) and initialize the existing markup:

```html
<div id="app"><h1>{{ name }}</h1><button @click="count++">{{ count }}</button></div>
<script src="/static/teloce.js"></script>
<script>teloce.createApp('#app', { name: 'Python', count: 0 });</script>

This provides the npm-compatible teloce.createApp()/mount() entry point, interpolation, events, bindings, loops, conditions, filters, and plugins without requiring Node.js or a CDN.

CSS and template coordination

Scoped component styles and generated markup use the same deterministic data-v-* scope attribute. Compiled components also install their CSS once when mounted, so a page that loads App.js does not need a separate CSS tag. The build still emits App.css; pass inline_css=False to compile() or the compiler options when you want to serve the stylesheet separately for caching.

Features Single File Components — Template, script, and style in one .vel file

Scoped CSS — Styles are automatically scoped to the component

Reactive Signals — Fine-grained reactivity without a Virtual DOM

Keyed Loops — Fast list rendering with DOM node reuse

Human-Friendly Errors — Clear error messages with suggestions

Framework Agnostic — Works with any Python web server

Development Server — Auto-compile on file changes

Production Build — Optimized output for deployment

Documentation Architecture

Compiler Design

.vel Syntax

Template Syntax

Directives

Reactivity

License MIT

Contributing Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

Support GitHub Issues

Discord