https://github.com/salernoelia/propa

A lightweight TypeScript framework for Vite with WebAssembly and P5.js support and minimal DOM abstractions.
https://github.com/salernoelia/propa

framework typescript wasm

Last synced: 2 months ago
JSON representation

A lightweight TypeScript framework for Vite with WebAssembly and P5.js support and minimal DOM abstractions.

• Host: GitHub
• URL: https://github.com/salernoelia/propa
• Owner: salernoelia
• License: mit
• Created: 2025-06-07T23:31:58.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-09-04T17:57:24.000Z (10 months ago)
• Last Synced: 2025-09-04T19:35:02.883Z (10 months ago)
• Topics: framework, typescript, wasm
• Language: TypeScript
• Homepage: https://salernoelia.github.io/propa/
• Size: 814 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Propa Framework

![Propa Logo](./docs/public/logo.png)

A lean and performant TypeScript framework for building reactive web applications with first-class WebAssembly and P5.js integration.

## Features

* **Zero Dependencies**: Pure TypeScript implementation for a minimal runtime footprint.

* **Smart Reactivity**: Efficient, batched DOM updates with automatic dependency tracking and subscription management.

* **WebAssembly Integration**: Seamless, type-safe loading and execution of WASM modules (e.g., Rust compiled to WASM).

* **P5.js Canvas**: A dedicated wrapper for embedding and managing p5.js sketches, perfect for creative coding and interactive visualizations.

* **Minimal Routing**: Hash-based routing with robust component lifecycle management for single-page applications.

* **JSX Support**: Compile-time JSX transformation into native DOM operations, offering a familiar declarative syntax without a virtual DOM.

## Installation

```bash

npm install @salernoelia/propa

```

## Quick Setup

To use `Propa` with JSX, configure your `vite.config.ts` and `tsconfig.json` files:

### `vite.config.ts`

```typescript

// vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({

  esbuild: {

    jsx: 'transform',

    jsxFactory: 'h',

    jsxFragment: 'Fragment',

  },

  // Other Vite configurations...

});

```

### `tsconfig.json`

```json

// tsconfig.json

{

  "compilerOptions": {

    "jsx": "react", // Or "react-jsx" if using new JSX transform

    "jsxFactory": "h",

    "jsxFragmentFactory": "Fragment",

    "lib": ["DOM", "ES2020"], // Ensure DOM library is included

    // ... other compiler options

  }

}

```