Skip to content

Development

This guide covers building, testing and developing TSkeleton locally.

Table of Contents

Prerequisites

  • Node.js >= 18 (see engines in package.json).
  • npm (bundled with Node.js).

Clone and install

git clone https://github.com/rkriad585/TSkeleton.git
cd TSkeleton
npm install

Scripts

All scripts are defined in package.json:

Command Description
npm run dev Starts the Vite dev server for the demo playground
npm run typecheck Runs tsc --noEmit
npm run build Runs build:main, build:umd, build:sub and build:css
npm run build:main Builds the ES + CommonJS bundles and .d.ts files
npm run build:umd Builds the UMD bundle
npm run build:sub Builds the 24 subpath bundles and .d.ts files
npm run build:css Generates dist/tskeleton.css
npm run build:demo Builds the demo playground into dist-demo/
npm run smoke Runs the jsdom render test
npm test Runs typecheck, build and smoke in order
npm run preview Previews the built demo
python scripts/generate-screenshots.py Regenerates the screenshots, favicon and docs logo copy
python -m mkdocs build Builds the docs site into site/

Demo playground

npm run dev

The playground loads index.html at http://localhost:5173 and runs src/demo.ts, which registers all components and wires the theme controls (variant, colors, radius, duration, randomize and reset).

Build pipeline

The build script runs four steps in order:

  1. build:main — vite build from src/index.ts.
  2. build:umd — vite build --config vite.umd.config.ts from src/umd.ts.
  3. build:sub — vite build --config vite.sub.config.ts from src/entries/*.ts.
  4. build:css — node scripts/gen-css.mjs writes dist/tskeleton.css.

All output goes into dist/ (gitignored). See Architecture for details.

Smoke test

npm run smoke runs scripts/smoke.mjs, which uses jsdom to:

  • register all 24 components,
  • append each to the DOM and verify it renders skeleton blocks and ::part() hooks,
  • verify theme attributes and configure().

It fails (exit code 1) if any component does not render.

Documentation site

The documentation is plain Markdown in docs/, rendered to a static site with MkDocs:

python -m pip install -r requirements-docs.txt
python -m mkdocs build --strict   # output in site/

The Docs workflow builds the site and deploys it to GitHub Pages automatically whenever the documentation changes.

Screenshots

Preview images in Screenshots/ are generated with Pillow. The script also mirrors them into docs/assets/screenshots/ (used by the docs site), generates the site favicon (docs/assets/favicon.ico) and copies the logo (logo/logo.svg → docs/assets/logo.svg):

pip install Pillow
python scripts/generate-screenshots.py

See Screenshots.

Before you open a pull request

npm run typecheck
npm run build
npm run smoke

Or simply:

npm test

Back to README