rodydavis
a4d8a8c309
Build and Deploy / build-and-deploy (push) Successful in 1m45s
- Created BUILD.bazel files for all subprojects to enable recursive build verification. - Updated root BUILD.bazel to track all project source files. - Cleared .bazelignore of project directories to allow Bazel to scan them. - Excluded files with colons from Bazel globs as they are invalid labels.
Lit Examples
A comprehensive collection of modular Lit web components, prototypes, and full-stack integration examples.
⚡ Lit Showcase
Explore all components natively in the interactive Lit Showcase Hub.
📦 Project Structure
Modular Components (/lit-components)
- lit-3d-piano: 3D interactive musical instrument.
- lit-calculator: Fully functional mathematical engine.
- lit-code-editor: Monaco Editor integration.
- lit-draggable-dom: Canvas-based layout manager with panning and infinite grid.
- lit-file-based-routing: Dynamic application router.
- lit-force-graph: 2D/3D/AR/VR force-directed graph engine.
- lit-html-editor: Native rich-text and markdown editor.
- lit-html-table: Modern spreadsheet grid view with editable cells.
- lit-modules: Harness for testing NPM modules.
- lit-node-editor: Visual shader and node-based logic graph.
- lit-sheet-music: OSMD-powered sheet music renderer.
- lit-starter-ts: Minimal TypeScript starter template.
- lit-vscode-extension: Webview-based VS Code extension bridge.
- lit-wmr: Bundled prototype using WMR.
- vite-rxdb-lit: Offline-first database integration with RxDB.
Full Applications & Integrations
- figma-to-lit: Tools for converting Figma designs to Lit components.
- lit-native: Native mobile app shells for Android and iOS.
- vite-lit-capacitor: Hybrid mobile/desktop apps using Capacitor.
- vite-lit-element-starter: standard Vite + Lit boilerplate.
🛠️ Getting Started
Prerequisites
Installation
npm install
Development
Start the interactive showcase:
npm run dev
Testing
Run the comprehensive test suite (Vitest + Happy DOM):
npm test
Building
Build all examples as a unified Multi-Page Application (MPA):
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-tablewith modern accessibility-focused styling and improvedlit-draggable-domcoordinate mapping for perfect panning. - Consistency: Unified all subprojects into a single Vite-powered monorepo structure with shared testing and build configurations.