Rettangoli
Development
Folder Structure
src/
├── primitives/ # Basic web components built from scratch, no dependencies
└── components/ # Pre-built components using @rettangoli/fe
vt/ # Uses @rettangoli/vt visual testing library
├── reference/ # Golden screenshots for visual testing
└── specs/ # HTML test specifications
Install dependencies
Use npx to install rtgl
cli globally. You run into issues if try to use bunx
.
npx i -g rtgl
Install dependencies
bun install
Generate specification screens
Bundles the code to be used for rettangoli-vt
bun run build:dev
Uses rettangoli-vt
to generates test screens
bun run vt:generate
Test for any change using rettangoli-vt
bun run vt:report
Accept the changes by updating the reference screenshots
bun run vt:accept
You can then access the generates screens
bun run serve
Open http://localhost:3000/view to see the specification screens
Usage
Install via CDN
Use via CDN iife (Immediately Invoked Function Expression) us JSDeliver
Primitives only. This might be useful if you want a light weight version and use only the primitives.
<script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@latest/dist/rettangoli-layout.iife.min.js"></script>
All primitives and components
<script src="https://cdn.jsdelivr.net/npm/@rettangoli/ui@latest/dist/rettangoli-ui.iife.min.js"></script>
Install via NPM
Install package
npm install @rettangoli/ui
Import the package. This allows you to configure more flexible options and to treeshake only the code that you need.
import { RettangoliView } '@rettangoli/ui';
customElements.define("rtgl-view", RettangoliView({}));
Stylesheet file
Make sure you import a stylesheet file from your html file. Example