docs: update README with new project structure and recent improvements
Build and Deploy / build-and-deploy (push) Successful in 1m49s
Build and Deploy / build-and-deploy (push) Successful in 1m49s
This commit is contained in:
@@ -1,25 +1,66 @@
|
||||
# Lit Examples
|
||||
|
||||
Consolidation of all Lit repositories directly into folders.
|
||||
A comprehensive collection of modular [Lit](https://lit.dev/) web components, prototypes, and full-stack integration examples.
|
||||
|
||||
## Consolidated Repositories
|
||||
- [figma-to-lit](./figma-to-lit)
|
||||
- [figma_lit_example](./figma_lit_example)
|
||||
- [lit-3d-piano](./lit-3d-piano)
|
||||
- [lit-calculator](./lit-calculator)
|
||||
- [lit-code-editor](./lit-code-editor)
|
||||
- [lit-draggable-dom](./lit-draggable-dom)
|
||||
- [lit-file-based-routing](./lit-file-based-routing)
|
||||
- [lit-force-graph](./lit-force-graph)
|
||||
- [lit-html-editor](./lit-html-editor)
|
||||
- [lit-html-table](./lit-html-table)
|
||||
- [lit-modules](./lit-modules)
|
||||
- [lit-native](./lit-native)
|
||||
- [lit-node-editor](./lit-node-editor)
|
||||
- [lit-sheet-music](./lit-sheet-music)
|
||||
- [lit-starter-ts](./lit-starter-ts)
|
||||
- [lit-vscode-extension](./lit-vscode-extension)
|
||||
- [lit-wmr](./lit-wmr)
|
||||
- [vite-lit-capacitor](./vite-lit-capacitor)
|
||||
- [vite-lit-element-starter](./vite-lit-element-starter)
|
||||
- [vite-rxdb-lit](./vite-rxdb-lit)
|
||||
## ⚡ Lit Showcase
|
||||
Explore all components natively in the interactive **[Lit Showcase Hub](./lit-showcase/index.html)**.
|
||||
|
||||
## 📦 Project Structure
|
||||
|
||||
### Modular Components (`/lit-components`)
|
||||
- **[lit-3d-piano](./lit-components/lit-3d-piano)**: 3D interactive musical instrument.
|
||||
- **[lit-calculator](./lit-components/lit-calculator)**: Fully functional mathematical engine.
|
||||
- **[lit-code-editor](./lit-components/lit-code-editor)**: Monaco Editor integration.
|
||||
- **[lit-draggable-dom](./lit-components/lit-draggable-dom)**: Canvas-based layout manager with panning and infinite grid.
|
||||
- **[lit-file-based-routing](./lit-components/lit-file-based-routing)**: Dynamic application router.
|
||||
- **[lit-force-graph](./lit-components/lit-force-graph)**: 2D/3D/AR/VR force-directed graph engine.
|
||||
- **[lit-html-editor](./lit-components/lit-html-editor)**: Native rich-text and markdown editor.
|
||||
- **[lit-html-table](./lit-components/lit-html-table)**: Modern spreadsheet grid view with editable cells.
|
||||
- **[lit-modules](./lit-components/lit-modules)**: Harness for testing NPM modules.
|
||||
- **[lit-node-editor](./lit-components/lit-node-editor)**: Visual shader and node-based logic graph.
|
||||
- **[lit-sheet-music](./lit-components/lit-sheet-music)**: OSMD-powered sheet music renderer.
|
||||
- **[lit-starter-ts](./lit-components/lit-starter-ts)**: Minimal TypeScript starter template.
|
||||
- **[lit-vscode-extension](./lit-components/lit-vscode-extension)**: Webview-based VS Code extension bridge.
|
||||
- **[lit-wmr](./lit-components/lit-wmr)**: Bundled prototype using WMR.
|
||||
- **[vite-rxdb-lit](./lit-components/vite-rxdb-lit)**: Offline-first database integration with RxDB.
|
||||
|
||||
### Full Applications & Integrations
|
||||
- **[figma-to-lit](./figma-to-lit)**: Tools for converting Figma designs to Lit components.
|
||||
- **[lit-native](./lit-native)**: Native mobile app shells for Android and iOS.
|
||||
- **[vite-lit-capacitor](./vite-lit-capacitor)**: Hybrid mobile/desktop apps using Capacitor.
|
||||
- **[vite-lit-element-starter](./vite-lit-element-starter)**: standard Vite + Lit boilerplate.
|
||||
|
||||
## 🛠️ Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- [Node.js](https://nodejs.org/) (v18+)
|
||||
- [pnpm](https://pnpm.io/) (recommended)
|
||||
|
||||
### Installation
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Development
|
||||
Start the interactive showcase:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Testing
|
||||
Run the comprehensive test suite (Vitest + Happy DOM):
|
||||
```bash
|
||||
npm test
|
||||
```
|
||||
|
||||
### Building
|
||||
Build all examples as a unified Multi-Page Application (MPA):
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## ✨ Recent Improvements
|
||||
- **Performance:** Implemented dynamic imports for heavy dependencies (A-Frame, Three.js) to optimize load times and test execution.
|
||||
- **Instance Reuse:** Refactored complex components (Force Graph, Draggable DOM) to reuse instances and prevent memory leaks.
|
||||
- **UI/UX:** Overhauled `lit-html-table` with modern accessibility-focused styling and improved `lit-draggable-dom` coordinate mapping for perfect panning.
|
||||
- **Consistency:** Unified all subprojects into a single Vite-powered monorepo structure with shared testing and build configurations.
|
||||
|
||||
Reference in New Issue
Block a user