{"id":27061173,"url":"https://github.com/shtse8/dust","last_synced_at":"2026-05-07T13:09:03.481Z","repository":{"id":286102881,"uuid":"960327516","full_name":"shtse8/Dust","owner":"shtse8","description":"Dust: A modern, component-based Dart web framework inspired by React/Vue. Built with WebAssembly (WASM) for high performance and a seamless developer experience. Create robust, type-safe web applications with the power of Dart.","archived":false,"fork":false,"pushed_at":"2025-04-04T17:11:07.000Z","size":1254,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T17:28:27.588Z","etag":null,"topics":["component-based","dart","dartlang","declarative-ui","frontend","react-inspired","spa","ui","vue-inspired","wasm","web-framework","webassembly","webdev"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shtse8.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-04T08:42:39.000Z","updated_at":"2025-04-04T17:11:10.000Z","dependencies_parsed_at":"2025-04-04T17:39:07.727Z","dependency_job_id":null,"html_url":"https://github.com/shtse8/Dust","commit_stats":null,"previous_names":["shtse8/dartscript","shtse8/dust"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shtse8%2FDust","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shtse8%2FDust/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shtse8%2FDust/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shtse8%2FDust/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shtse8","download_url":"https://codeload.github.com/shtse8/Dust/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248098519,"owners_count":21047455,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-based","dart","dartlang","declarative-ui","frontend","react-inspired","spa","ui","vue-inspired","wasm","web-framework","webassembly","webdev"],"created_at":"2025-04-05T14:19:44.957Z","updated_at":"2026-05-07T13:09:03.427Z","avatar_url":"https://github.com/shtse8.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Optional: Add your project logo here --\u003e\n\u003c!-- e.g., \u003cp align=\"center\"\u003e\u003cimg src=\"path/to/your/logo.png\" alt=\"Dust Logo\" width=\"200\"\u003e\u003c/p\u003e --\u003e\n\n# Dust ✨: A Modern Dart Web Framework\n\n\u003c!-- Add relevant badges here --\u003e\n\u003c!-- Examples:\n[![Build Status](https://github.com/your_username/your_repo/actions/workflows/ci.yml/badge.svg)](https://github.com/your_username/your_repo/actions/workflows/ci.yml)\n[![Pub Version](https://img.shields.io/pub/v/your_package_name)](https://pub.dev/packages/your_package_name)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![Code Coverage](https://img.shields.io/codecov/c/github/your_username/your_repo)](https://codecov.io/gh/your_username/your_repo)\n[![Discord](https://img.shields.io/discord/your_discord_invite_code?logo=discord)](https://discord.gg/your_discord_invite_code)\n--\u003e\n\nDust is a high-performance, component-based web framework for Dart, built with\nWebAssembly (WASM). Inspired by React and Vue, Dust aims to provide an\nexceptional developer experience for building modern, type-safe web\napplications.\n\n**Note:** This project is currently under active development (Work in Progress).\n\n## Why Dust?\n\n- 🚀 **Build Fast Web UIs:** Create interactive user interfaces entirely in\n  Dart.\n- ⚙️ **WASM Performance:** Leverage WebAssembly for near-native execution speed\n  in the browser.\n- 🛡️ **Type Safety:** Utilize Dart's strong typing and sound null safety to\n  build robust applications.\n- 🧩 **Familiar Component Model:** Enjoy a component-based architecture inspired\n  by React and Vue.\n- 💡 **Developer Experience:** Designed with developer productivity and\n  happiness in mind.\n\n## Features\n\nDust aims to provide a comprehensive feature set for modern web development:\n\n- ✨ **Declarative UI:** Define your UI based on state, and let Dust handle the\n  DOM updates efficiently.\n- 🧩 **Component-Based:** Build reusable UI pieces using Stateless and Stateful\n  components.\n- ⚙️ **Efficient Diffing:** Smart Virtual DOM reconciliation ensures minimal DOM\n  manipulation.\n- 🚀 **WASM Powered:** Runs your Dart code directly in the browser via\n  WebAssembly.\n- 🛡️ **Type Safe:** Leverage Dart's strong type system throughout the framework.\n- 🔄 **State Management:** Built-in component state (`setState`) with basic\n  Riverpod integration via `BuildContext`.\n- 🎁 **Props:** Pass data down the component tree using standard Dart\n  constructors and a `props` map.\n- 🔗 **JS Interop:** Seamlessly interact with JavaScript libraries and browser\n  APIs when needed.\n- 🎨 **Atomic CSS (Build-Time):** Includes a powerful, build-time Atomic CSS\n  generator (`dust_atomic_styles` package) inspired by Tailwind CSS.\n  - **Utility-First:** Define styles directly in your Dart component code using\n    utility classes (e.g., `m-4`, `p-2`, `text-blue-500`, `flex`,\n    `items-center`).\n  - **Automatic Generation:** The build system scans your Dart code, identifies\n    used atomic classes, and generates only the necessary CSS rules into\n    `web/atomic_styles.css`.\n  - **Extensive Rule Set:** Covers a wide range of CSS properties (Spacing,\n    Layout, Flexbox, Grid, Sizing, Typography, Backgrounds, Borders, Effects,\n    Filters, Interactivity, Transforms, Transitions, Animations, SVG,\n    Accessibility).\n  - **Maintainable \u0026 Organized:** Rules are now split into logical files within\n    the `packages/atomic_styles/lib/src/rules/` directory.\n  - **(Resolved):** Aggregation logic now correctly processes classes from all\n    source files using a standard `Builder`.\n- **Routing:** Basic client-side routing using the History API (parameter\n  parsing and basic nesting supported).\n- _Upcoming:_ Advanced State Management, Build Tools, Hot Reload, and more!\n\n## Framework Comparison\n\nThis table provides a high-level comparison between Dust and other popular\nweb/UI frameworks.\n\n| Feature          | Flutter                     | Vue                         | React                         | Angular                         | Dust (Current)                           |\n| :--------------- | :-------------------------- | :-------------------------- | :---------------------------- | :------------------------------ | :--------------------------------------- |\n| **Language**     | Dart                        | JS/TS                       | JS/TS                         | TS                              | Dart                                     |\n| **Paradigm**     | Component-based             | Component-based (MVVM-like) | Component-based               | Component-based (Opinionated)   | Component-based                          |\n| **Rendering**    | Skia Canvas / HTML Renderer | Virtual DOM                 | Virtual DOM                   | Incremental DOM (?)             | Virtual DOM (Keyed Diffing)              |\n| **Build Target** | Mobile, Web, Desktop        | Web                         | Web (Native via RN)           | Web                             | Web (WASM)                               |\n| **State Mgmt**   | Built-in + Libraries        | Built-in (Pinia) + Libs     | Libraries (Context API)       | Built-in (Services/RxJS) + Libs | Built-in (`setState`) + Riverpod (Basic) |\n| **Routing**      | Built-in                    | Built-in                    | Libraries (React Router)      | Built-in                        | Basic History API (Built-in)             |\n| **Styling**      | Widget Styling              | Scoped CSS, Modules, Util   | CSS, CSS-in-JS, Modules, Util | Scoped CSS, Modules             | CSS + Atomic CSS (Build)                 |\n| **JS Interop**   | Good (Web)                  | Excellent                   | Excellent                     | Excellent                       | Good (`dart:js_interop`)                 |\n| **Tooling**      | Excellent (Hot Reload)      | Excellent (Hot Reload)      | Excellent (Hot Reload)        | Excellent (Hot Reload)          | Basic (`build_runner`, Hot Restart)      |\n| **Ecosystem**    | Mature                      | Mature                      | Very Mature                   | Mature                          | Nascent                                  |\n\n### Current Gaps (Compared to Mature Frameworks)\n\nWhile Dust is progressing rapidly, it currently lacks several features common in\nmature frameworks:\n\n- **Advanced Routing:** Route guards, lazy loading, complex nested layouts,\n  advanced programmatic navigation APIs.\n- **Mature State Management:** Deeper framework integration, dedicated DevTools\n  support.\n- **Forms Handling:** Robust libraries/utilities for validation, complex data\n  binding, and submission management.\n- **Animation System:** Dedicated tools or libraries for creating complex UI\n  animations and transitions.\n- **Server-Side Rendering (SSR) / Static Site Generation (SSG):** Capabilities\n  for improved initial load performance and SEO.\n- **Testing Utilities:** Comprehensive framework-specific libraries for unit,\n  integration, and end-to-end testing.\n- **Internationalization (i18n):** Standardized libraries or patterns for\n  supporting multiple languages.\n- **Accessibility (a11y):** Built-in helpers, components, or strong patterns to\n  ensure accessible applications.\n- **True Hot Reload:** Currently offers Hot Restart via `build_runner`.\n- **Dedicated DevTools:** Browser extensions for inspecting the component tree,\n  state, and performance profiling specific to the framework.\n- **Ecosystem \u0026 Community:** Extensive third-party libraries, established best\n  practices, tutorials, and a large community for support.\n- **Comprehensive Documentation:** Needs significant expansion covering all\n  features, APIs, and best practices with more examples.\n\n## Getting Started\n\n\u003c!-- Optional: Add a GIF or screenshot of the demo app here --\u003e\n\u003c!-- e.g., ![Dust Todo List Demo](path/to/demo.gif) --\u003e\n\nTry the current Props Tester demo (demonstrates props and conditional event\nlisteners):\n\n1. **Ensure Dart SDK is installed.**\n2. **Get dependencies:**\n   ```bash\n   dart pub get\n   ```\n3. **Run the development server:** Navigate to the project root directory and\n   run:\n   ```bash\n   dart run build_runner serve web:8081 --live-reload\n   ```\n   _(This will compile the app, start a server on `localhost:8081`, and enable\n   Hot Restart.)_\n4. **Open in browser:** Open `http://localhost:8081`.\n\nYou should see a button and a \"Hello...\" message. Clicking the button cycles\nthrough different names, demonstrating props updates. When the name is longer\nthan 5 characters, hovering over the \"Hello...\" message will log to the console,\ndemonstrating conditional event listener addition/removal.\n\n## Basic Example\n\nHere's a simple \"Hello World\" example demonstrating passing props:\n\n**1. Create your component (`lib/hello_world.dart`):**\n\n```dart\nimport 'package:dust_component/stateful_component.dart';\nimport 'package:dust_component/state.dart';\nimport 'package:dust_component/context.dart';\nimport 'package:dust_component/vnode.dart';\nimport 'package:dust_component/html.dart' as html;\nimport 'package:dust_renderer/dom_event.dart';\nimport 'package:dust_component/key.dart';\n\nclass HelloWorld extends StatefulWidget {\n  // Constructor accepts key and props\n  const HelloWorld({super.key, super.props});\n\n  @override\n  State\u003cHelloWorld\u003e createState() =\u003e _HelloWorldState();\n}\n\nclass _HelloWorldState extends State\u003cHelloWorld\u003e {\n  // Helper to get the name prop safely\n  String get _displayName =\u003e widget.props['name'] as String? ?? 'World';\n\n  @override\n  VNode build() {\n    final currentDisplayName = _displayName;\n    print('Building HelloWorld component (name: $currentDisplayName)...');\n\n    return html.h1(\n      key: widget.key,\n      text: 'Hello $currentDisplayName!',\n      attributes: {'class': 'hello-world-heading'},\n    );\n  }\n}\n```\n\n**2. Create the entry point (`web/main.dart`):**\n\n```dart\nimport 'package:dust_app/hello_world.dart'; // Import the component\nimport 'package:dust_renderer/renderer.dart';\n\nvoid main() {\n  // Create the component instance, passing name via props map\n  final app = HelloWorld(props: {'name': 'Developer'});\n\n  // Mount the component\n  runApp(app, 'app');\n}\n```\n\n**3. Ensure your `web/index.html` has a target element:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eDust App\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"atomic_styles.css\"\u003e\n    \u003c!-- Link generated CSS --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003c!-- Target element --\u003e\n    \u003cscript type=\"module\" src=\"main.dart.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**4. Run the development server:**\n\n```bash\ndart run build_runner serve web:8081\n```\n\nThen open `http://localhost:8081` in your browser.\n\n## Roadmap \u0026 Status\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view the detailed development roadmap and current status\u003c/summary\u003e\n\nThis section outlines the major functional goals and their current\nimplementation status.\n\n**Core:**\n\n- [x] Dart -\u003e WASM Compilation (`dart compile wasm`)\n- [x] WASM Module Loading (`js/app_bootstrap.js`)\n- [x] Basic JS/WASM Interop (`dart:js_interop`)\n\n**Component Model:**\n\n- [x] Base Component Classes (`Component`, `StatefulWidget`, `StatelessWidget`,\n      `State`)\n- [x] Virtual DOM Node (`VNode` Definition)\n  - [x] Element Nodes (tag, attributes, children)\n  - [x] Text Nodes\n  - [x] Keys for Diffing (`key` property)\n  - [x] Event Listeners (`listeners` property using `DomEvent`)\n  - [x] Internal Listener Reference Storage (`jsFunctionRefs`)\n- [x] Props Handling (Basic Map-based)\n- [x] Basic Context API (`BuildContext` carrying `ProviderContainer`)\n\n**Renderer:**\n\n- [x] Initial Rendering (`runApp` function calling internal `render`,\n      `_createDomElement`)\n- [x] Basic DOM Manipulation via JS Interop (`JSAnyExtension`)\n- [x] Patching / Diffing (`_patch` function)\n  - [x] Node Addition/Removal/Replacement\n  - [x] Text Content Update\n  - [x] Attribute Update/Removal\n  - [x] Event Listener Update/Removal (Improved logic, wraps callbacks for\n        `DomEvent`, **recursive cleanup on node removal**)\n- [x] Keyed Child Reconciliation (`_patchChildren` function)\n- [ ] Component Lifecycle Method Integration (`initState`, `dispose`, etc.)\n- [ ] DOM Abstraction Layer (Type-safe Dart API over DOM)\n- [ ] Performance Optimizations\n\n**State Management:**\n\n- [x] Basic Component State (`State`, `setState`)\n- [x] Basic Riverpod Integration (`ProviderContainer` via `BuildContext`,\n      `Consumer` widget)\n- [ ] Improved Framework-Level Integration (e.g., `ProviderScope`, Flutter-like\n      `ConsumerWidget`)\n\n**Routing:**\n\n- [ ] SPA Router Implementation\n\n**Styling:**\n\n- [x] Basic Atomic CSS Generation (Build-Time via `dust_atomic_styles` package)\n\n**Tooling:**\n\n- [ ] Build System Optimizations\n- [x] Hot Restart (via `build_runner serve`)\n- [ ] Hot Reload\n\n**Demo Application (`TodoListComponent`):**\n\n- [x] Demonstrates `StatefulWidget` usage\n- [x] Demonstrates Keyed Diffing for lists\n- [x] Demonstrates Event Handling (button clicks using `DomEvent`)\n\n\u003c/details\u003e\n\n## Design Philosophy \u0026 Technical Choices\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to learn more about Dust's technical direction\u003c/summary\u003e\n\nThis section addresses some common questions regarding Dust's technical\ndirection, based on the project's goals outlined in the Memory Bank.\n\n### Why Dart + WASM for the Frontend? (vs. Dart for SSR)\n\nDust aims to be a modern frontend framework for building interactive Single Page\nApplications (SPAs), similar in scope to React or Vue. The choice of Dart\ncompiled to WebAssembly (WASM) for the frontend, instead of using Dart for\nServer-Side Rendering (SSR), supports this goal in several ways:\n\n- **Rich Client-Side Interactivity:** WASM allows complex application logic and\n  UI updates to run directly in the browser, enabling smooth, app-like\n  experiences without constant server roundtrips.\n- **Potential Performance:** WASM offers near-native execution speed, which can\n  be beneficial for computationally intensive frontend tasks.\n- **Unified Language \u0026 Tooling:** Enables full-stack Dart development, allowing\n  code sharing (models, validation logic) and a consistent developer experience\n  across frontend and backend.\n- **Leveraging Dart's Strengths:** WASM allows running a Dart runtime that fully\n  supports the language's features (like true integers and strong typing)\n  directly in the browser.\n\nWhile SSR excels at fast initial loads and SEO, Dust prioritizes the rich\ninteractivity and potential performance benefits of a client-side WASM approach\nfor building complex web applications.\n\n### Why WASM? (vs. Dart compile js / Dart2JS)\n\nDart can be compiled to either JavaScript (Dart2JS) or WASM. Dust specifically\ntargets WASM based on these considerations:\n\n- **Runtime Performance:** WASM generally offers better and more predictable\n  runtime performance for intensive tasks compared to JavaScript.\n- **Full Dart Language Experience:** WASM allows running a more complete Dart\n  runtime, providing better fidelity with Dart's features compared to compiling\n  to JavaScript (which has limitations, e.g., only one number type).\n- **Future-Oriented:** WASM is a key part of the modern web platform's\n  evolution.\n\nHowever, there are trade-offs:\n\n- **Dart2JS:** Mature, excellent tree-shaking (potentially smaller bundles),\n  potentially faster initial load for smaller apps, potentially simpler JS\n  interop.\n- **WASM:** Potentially larger initial bundle (includes Dart runtime),\n  potentially slower startup (WASM compilation/instantiation), JS interop has\n  overhead.\n\nDust's choice of WASM reflects a focus on maximizing runtime performance and\nleveraging the full capabilities of the Dart language in the browser, accepting\nthe trade-off of potentially larger initial bundles.\n\n### How is Dust Different from Flutter Web?\n\nBoth use Dart, but they differ significantly in their rendering approach and\nrelationship with the web platform:\n\n- **Flutter Web:** Primarily uses its own rendering engine (Skia via\n  CanvasKit/WASM) to paint pixels directly onto an HTML canvas, largely\n  bypassing the standard DOM. It aims for pixel-perfect UI consistency across\n  all platforms. An alternative HTML renderer exists but mainly simulates\n  Flutter's layout.\n- **Dust (Goal):** Aims to be a **native web framework** that works _with_ the\n  standard HTML DOM. It intends to translate Dart components into standard HTML\n  elements (`div`, `span`, etc.) and manipulate them directly, similar to\n  React/Vue. This allows for potentially better integration with existing CSS,\n  JS libraries, and standard web platform features.\n\nIn essence, Flutter Web brings the Flutter rendering model _to_ the web, while\nDust aims to provide a Dart-based way to build _native_ web experiences using\nthe DOM.\n\n\u003c/details\u003e\n\n## Contributing\n\nContributions are welcome! If you'd like to help improve Dust, please check out\nthe [Contribution Guidelines](CONTRIBUTING.md) (You'll need to create this file)\nand the open issues.\n\n## Community\n\n\u003c!-- Add links to your community channels --\u003e\n\u003c!-- e.g., Join the discussion on [Discord](https://discord.gg/your_invite_code) or [GitHub Discussions](https://github.com/your_username/your_repo/discussions). --\u003e\n\nWe are just getting started! Stay tuned for community channels.\n\n## License\n\nDust is released under the [MIT License](LICENSE). (Ensure you have a LICENSE\nfile).\n\n---\n\n_Project context, goals, technical details, and progress are documented in the\n`memory-bank/` directory._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshtse8%2Fdust","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshtse8%2Fdust","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshtse8%2Fdust/lists"}