Web Component Comparison

This repository tests web components built with different web frameworks.

What's inside?

This turborepo uses pnpm as a package manager. It includes the following packages/apps:

Apps and Packages

• astro: an Astro app
• react: a React.js app
• vue: a Vue.js app
• eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• lit-ui: a Lit library containing test components
• solid-ui: a Solid.js library containing test components
• svelte-ui: a Svelte.js library containing test components
• tsconfig: used throughout the monorepo

TODO: Add Stencil.js and Element.js - https://github.com/webtides/element-js/blob/main/docs/README.md

Each package/app is 100% TypeScript. Packages were created Vite. Runs and build use Vite as the development environment.

Utilities

This repository has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• UnoCSS for CSS. UnoCSS is an on-demand Atomic CSS engine. It supports all Tailwind styling but 10x faster, smaller and more powerful.

Getting started

Installation

Install dependencies

pnpm install

Build

To build all apps and packages, run the following command:

pnpm build

Develop

To develop all apps and packages, run the following command:

pnpm dev

Things discovered

https://www.npmjs.com/package/svelte-tag