Next: ReCast, ReStory, ReDocs, Reface Framework, new website

[DragorWW]

Reface Ecosystem Refactoring

Overview

Major refactoring to transform Reface into a modular ecosystem:

• Split monolithic Reface into separate modules (recast, framework)
• Add new ecosystem modules (reface-ui, restory, redocs)
• Implement async rendering support
• Improve development experience

Key Changes

• Core rendering engine extracted to @recast
• Framework features moved to @framework
• New UI kit module created (@reface-ui)
• New documentation system (@redocs)
• New component development tools (@restory)
• Website rebuilt with new architecture

Critical Path

1. Merge core changes to master
2. Move UI and docs to alpha
3. Continue development in separate PRs

Tasks by Module

general

• Split Reface into modular ecosystem
• Remove unused code and comments
• Update CLI
• Review and cleanup codebase
• Fix type system issues
• Prepare for master merge

@recast

• Extract core rendering engine
• Implement async rendering
• Add AsyncExpression
• Update rendering API
• Pass template engine tests
• Fix Template implementation
• Add Promise tests
• Implement context system
• Clean up Recast class
• Document render process

@framework

• Extract framework features
• Fix livereload plugin
• Verify island functionality
• Verify partial functionality
• Test async features
• Add integration tests
• Add example implementations

website

• Launch new version
• Add dark theme
• Basic examples
• Build using only UI Kit
• Remove external dependencies
• Add interactive demos
• Improve documentation

@reface-ui

• Initial setup
• Remove old implementation
• Add dark theme support
• Move to alpha status
• Complete component set
• Add tests and stories
• Add theming system
• Document components

@redocs

• Initial setup
• Integrate Deno Docs
• Add API documentation
• Support markdown files
• Add search
• Improve UI using reface-ui
• Study Deno docs implementation

@restory

• Initial setup
• Integrate with redocs
• Improve story system
• Add visual testing
• Add documentation

examples

• Add basic examples
• Add component patterns
• Add island examples
• Add partial examples
• Add async examples
• Add template examples

Reface Ecosystem

recast

Core rendering engine that provides base functionality for component rendering.

Features:

• Expression system for different content types (Component, Element, Fragment, etc.)
• JSX runtime support
• HTML template literals and processing
• CSS-in-JS functionality
• Slot system for layouts
• Plugin architecture
• Style management

framework

High-level framework features for building web applications.

Features:

• Island architecture for partial hydration
• Partial rendering for dynamic updates
• HTMX integration for server-driven UI
• Live reload for development
• Error handling and display system
• Development tools

reface-ui

Comprehensive UI component library.

Components:

• Layout: Grid, Stack, Panel, Tabs, Splitter, Card, Collapse
• Forms: Input, Select, Checkbox, Radio, ColorPicker, NumberInput
• Data: Table, TreeView, Code, Content, Quote, Link
• Controls: Button

Features:

• Theming system
• Component stories
• Visual testing

redocs

Documentation system for the framework.

Features:

• Markdown parsing and processor
• TypeScript documentation generation
• Component documentation
• API reference generation
• Documentation components
• Type definition display
• CLI tools

restory

Storybook implementation for component development.

Features:

• Story system and viewer
• Component story creation
• Visual testing environment
• Story slots
• CLI tools

common

Shared utilities and types used across the framework.

Features:

• Utility types
• Template literal utilities
• Port management
• CLI tools