inviton-powerduck

Inviton Powerduck framework

Framework containing main TSX components and frontend utility functions for use in projects.

Built using Vue3 + vue-facing-decorator package.

Vite plugins

Two plugins for an app's vite.config.ts, from common/vite/. They make each page's first download smaller.

• bootstrapLite({ components }) (bootstrap-lite.mjs): Bootstrap with only the components the app runs, and common/popper-lite.ts instead of Popper. In the gopass shop, 21.4 → 12.6 KB at brotli 11 on every page.
  • List every class the app imports from bootstrap and every component whose data attributes its markup renders. For example, data-bs-toggle="offcanvas" needs Offcanvas.
  • A class left out stops the build. A data-attribute component left out is a button that does nothing.
  • powerduck itself needs Modal, Dropdown and Tooltip, plus Collapse and Tab where it renders an accordion, a collapse or tabs.
  • The build stops when anything but Bootstrap imports @popperjs/core (pass popperLite: false to keep Popper), or when anything imports a pre-built Bootstrap file.
• fontAwesomeSubset({ roots }) (fontawesome-subset.mjs): FontAwesome's stylesheet with only the glyphs the app names. In the gopass shop, 18 → 3 KB at brotli 11.
  • roots are the folders and files where the app names its icons. powerduck's own folder is always read.
  • The build stops when a chunk names an icon whose glyph was dropped.

import { bootstrapLite } from 'inviton-powerduck/common/vite/bootstrap-lite.mjs';
import { fontAwesomeSubset } from 'inviton-powerduck/common/vite/fontawesome-subset.mjs';

export default defineConfig({
	plugins: [
		bootstrapLite({ components: [
			'Collapse',
			'Dropdown',
			'Modal',
			'Tab',
			'Tooltip'
		] }),
		fontAwesomeSubset({ roots: [
			path.resolve(__dirname, 'src'),
			path.resolve(__dirname, 'index.html')
		] }),
		// …
	],
});

Checked by dev/validate-bootstrap-lite.mjs, dev/validate-fontawesome-subset.mjs and, against vite serve dev --port 9445, dev/validate-popper-lite.mjs.