Uce Template
A Vue 3 inspired Custom Elements toolless alternative.
Overview
µce-template is a tiny toolless library that allows developers to define components in a Vue fashion. It provides a custom built-in <template> element and can bootstrap all defined components. The library is compatible with server-side rendering (SSR) and includes a simple CLI for converting HTML pages or components into a minified version with optional Babel transpilation. It is based on Custom Elements and supports lazy loading of components, shadow DOM, and pre-defined modules. The library is lightweight, with a size that fits within a 10K gzipped budget. Its goal is to demonstrate that tools and tooling can be optional in web development.
Features
- Server-side rendering (SSR) compatibility
- Custom Elements-based components
- Lazy loading of components
- Shadow DOM support
- Pre-defined modules for importing
- Runtime ESM to CommonJS module system
- Lightweight - fits within a 10K gzipped budget
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.
- Web Components
Web components provide a way to create reusable, encapsulated UI components using standard web technologies such as HTML, CSS, and JavaScript. They allow developers to create complex UI components that can be easily shared across multiple projects and frameworks. Web components are built using four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules.
