pyreact-web 0.1.0

The Python-Powered Fullstack Language

PyReact 🚀

The Python-Powered Fullstack Language — v1.2.0

Build beautiful AI-powered fullstack applications using a single language, a single file, and a single workflow.

PyReact = Python Simplicity + React Power + AI Native Development

---

Quick Start

# Install
pip install -e .

# Create new project
pyreact new myapp

# Start dev servers
cd myapp
pyreact dev

---

One File. Full Stack.

server {
    def forecast(data):
        return {"result": [1, 4, 9, 16]}
}

pages {
    Home      = "/"
    Dashboard = "/dashboard" [guard]
    Login     = "/login"
}

component Dashboard():
    result, setResult = use_state(None)

    def runForecast():
        data = server.forecast([])
        setResult(data)

    return (
        <UI.Page>
            <UI.Navbar title="PyReact App" />
            <UI.Button onClick={runForecast}>Run Forecast</UI.Button>
            <UI.Chart type="line" data={result} />
        </UI.Page>
    )

style {
    primary = "#6366f1"
    radius  = "16px"
}

Dikompilasi menjadi:

• ✅ Flask backend dengan auto-generated REST endpoints
• ✅ React frontend + Tailwind CSS + react-router-dom v6
• ✅ PyBridge™ RPC — zero fetch() / axios boilerplate
• ✅ File-System Routing — pages block & folder pages/
• ✅ Vite production build

---

CLI Commands

Command	Description
pyreact new <name>	Create a new project
pyreact dev	Start Flask + Vite dev servers
pyreact dev --heal	Dev mode + AI self-healing
pyreact build	Build for production
pyreact compile [file]	Compile → Flask + React source
pyreact compile [file] --heal	Compile + AI auto-heal error
pyreact compile [file] --heal --model codellama	Pilih model Ollama
pyreact serve	Serve production via Gunicorn/Waitress
pyreact generate component <Name>	Scaffold a component
pyreact ai "<prompt>"	Generate kode dengan AI lokal (gratis)
pyreact install <package>	Install dari PPR Registry
pyreact hub	Lihat Hub Marketplace templates
pyreact test	Run backend + frontend tests

---

Fase 15: Self-Healing Compiler 🩺

Ketika terjadi syntax error, PyReact bisa memperbaikinya secara otomatis via Ollama:

pyreact compile app.pyreact --heal

+==================================================+
|    PyReact Self-Healing Compiler  [Fase 15]     |
+==================================================+

[ERROR] Kompilasi gagal: Expected IDENTIFIER, got LBRACE '{'
[HEAL]  Model terpilih: gemma4:31b-cloud
[HEAL]  Mengirim ke Ollama (Percobaan 1/3)...
[HEAL]  Self-Healing BERHASIL pada percobaan ke-1!

[HEAL]  Perubahan:
  - component {
  + component MyComponent():

Fitur:

• Auto-detect model Ollama terbaik (codellama → qwen2.5-coder → gemma4 → llama3)
• Iterative retry hingga 3x
• Diff viewer + backup otomatis
• Rule-based fallback jika Ollama offline

---

Fase 16: File-System Routing 🗺️

Pages Block (Explicit)

pages {
    Home      = "/"
    About     = "/about"
    Blog      = "/blog"
    Dashboard = "/dashboard" [guard]           # Protected route
    Settings  = "/settings"  [guard, layout=App] # Guard + Layout
    Login     = "/login"
}

File-System Routing (Next.js Style)

pages/
  index.pyreact          → /
  about.pyreact          → /about
  blog/index.pyreact     → /blog
  blog/[slug].pyreact    → /blog/:slug  (dynamic)
  user/[id].pyreact      → /user/:id    (dynamic)
  404.pyreact            → * (Not Found)

Output App.jsx:

<BrowserRouter>
  <Routes>
    <Route path="/"          element={<Home />} />
    <Route path="/dashboard" element={<RequireAuth><Dashboard /></RequireAuth>} />
    <Route path="/blog/:slug" element={<BlogSlug />} />
    <Route path="*"          element={<NotFound />} />
  </Routes>
</BrowserRouter>

---

Built-in UI Components (30+)

UI.Page      UI.Navbar    UI.Sidebar    UI.Card
UI.Button    UI.Input     UI.TextArea   UI.Select
UI.Table     UI.DataGrid  UI.Chart      UI.MetricCard
UI.Alert     UI.Toast     UI.Modal      UI.Spinner
UI.Badge     UI.Tabs      UI.Dropdown   UI.Accordion
UI.Calendar  UI.Upload    UI.Chatbot    UI.Heading
UI.Text      UI.Divider   UI.Link       UI.NavLink
UI.useAuth()

---

Compiler Architecture

app.pyreact
    │
    ▼
 Lexer → Parser → AST → CodeGenerator
                          │
              ┌───────────┼───────────────┐
           Flask        React          Router
          backend      frontend     (react-router-dom v6)

Fase 15 — Self-Healing: compiler/healer.py Fase 16 — Routing Engine: compiler/router.py

---

Output Structure

dist/
├── backend/
│   ├── app.py           ← Flask application
│   ├── routes.py        ← Auto-generated endpoints
│   ├── generated_api.py ← server {} Python code
│   └── requirements.txt
└── frontend/
    ├── package.json     ← Includes react-router-dom
    └── src/
        ├── App.jsx      ← BrowserRouter + Routes
        ├── pybridge.js  ← PyBridge™ RPC client
        ├── _routes.txt  ← Router manifest
        └── ui/
            └── components.jsx

---

Demo

# Demo routing lengkap (Fase 16)
pyreact compile demo_routing.pyreact --out dist_routing

# Test self-healing (Fase 15) — butuh Ollama berjalan
pyreact compile broken_demo.pyreact --heal

---

Roadmap

Fase	Fitur	Status
1–14	Compiler, PyBridge, UI, Database, AI Agents, PPR	✅ Done
15	Self-Healing Compiler (Ollama)	✅ Done
16	File-System Routing & Pages Block	✅ Done
17	Type System & Validasi	🔲 Planned
18	Real-Time & WebSocket	🔲 Planned
19	Testing Framework	🔲 Planned
20	VSCode Extension	🔲 Planned
21	PyReact Cloud	🔲 Planned

---

License

MIT © Yuda Hasibuan