GitHub - ClassicOldSong/refui-hackernews-demo: Reactive HackerNews reader built with rEFui

rEFui Hacker News Demo

This is a demonstration project showcasing the capabilities of the rEFui JavaScript library for building reactive user interfaces. It's a simple, yet functional, Hacker News client built with rEFui and Vite.

Live Demo

Features

• Reactive UI: Built with rEFui, showcasing its signal-based reactivity model.
• Multiple Sections: Browse Top, New, Best, Ask, Show, and Job stories.
• Resizable Panels: The story list and comment view are in resizable panels for a flexible layout.
• Dark Mode: Toggle between light and dark themes.
• Infinite Scroll: "Load More" functionality for both the story list and nested comments.
• Asynchronous Components: Demonstrates loading data within components and handling loading/error states gracefully.
• Component-Based Architecture: The application is structured into reusable components for stories and comments.
• Direct DOM Rendering: Utilizes refui/dom for efficient, direct manipulation of the DOM.
• Vite + HMR: Fast development experience with Vite and the refurbish plugin for Hot Module Replacement.

Tech Stack

• Framework: rEFui
• Build Tool: Vite
• Reactivity Plugin: refurbish (for HMR)
• API: Hacker News Firebase API

Getting Started

Prerequisites

• Node.js (version 18 or higher recommended)
• pnpm (as specified by packageManager in package.json)

Installation & Running

1. Clone the repository:

   git clone https://github.com/ClassicOldSong/refui-hackernews-demo.git
   cd refui-hackernews-demo

2. Install dependencies:

3. Run the development server:

   The application will be available at http://localhost:5173 (or another port if 5173 is in use).

Building for Production

To create a production build, run:

The optimized files will be located in the dist/ directory. You can preview the production build with pnpm preview.

rEFui Concepts Illustrated

This project serves as a practical example for several core rEFui concepts:

• signal and watch: Used extensively for managing state like the current story section, loading status, and dark mode.
• Computed Signals ($): Used to derive state, such as the list of stories to display from the full list.
• Asynchronous Components: StoryItem.jsx and CommentItem.jsx are async components that fetch their own data and manage their lifecycle. The <Async> component (used implicitly by async components) handles pending (fallback) and rejected (catch) states.
• <For> Component: Used to efficiently render the list of stories and comments.
• <If> Component: Used for conditional rendering of UI elements like loading indicators, "Load More" buttons, and the comment view.
• DOM Renderer: The project is initialized with createDOMRenderer to render the UI directly to the DOM.
• Event Handling: Uses on:event syntax for handling user interactions like clicks and mouse-down for the resizer.

License

This project is licensed under the MIT License. See the LICENSE file for details.