Re-usable UI Components for and from Helga

Develop

Intro

• This is a monorepo that uses npm workspaces to publish the components as individual packages

Init

Run npm i in the root directory. It will install all dependencies for all workspaces.

Release

1. Run npm run test -ws in the root directory to run all tests in all packages
2. Run npm run build -ws --if-present to run build scripts in all packages where one exits; it might be missing for packages that directly export ESM modules.
3. Commit and push the generated files
4. Checkout main and merge feature branch
5. Run npm version <patch|major|minor> -w <packageName> to create a new version for a specific package or -ws for all packages.
6. Commit package.json files with new version.
7. Create tag for packages that will change their version: @helga-agency/<packageName>@<version>
8. Push the Git tag: git push origin <tag>
9. Run npm publish -w <packageName> to publish a specific package or -ws for all packages.

Run npm commands across workspaces

Configuration flags for npm commands in relation to workspaces:

• --workspace=<packageName> or -w <packageName> to run a command in a specific workspace. Valid values for <packageName> are either:
  • Workspace names (e.g. @helga-agency/async-loader)
  • Path to a workspace directory (e.g. packages/AsyncLoader)
  • Path to a parent workspace directory (will result in selecting all workspaces within that folder)
• --workspaces or -ws to run a command across all workspaces.
  • By running the command with the --if-present flag, npm will ignore workspaces missing the target script; e.g. npm run build --workspaces --if-present.

Scripts

• Run tests: npm test
• Lint JS files: npm run lint
• Run build script: npm run build

Use

• All components are custom elements.
• Make sure to use the appropriate polyfill for old browsers. If not noted otherwise, only the custom element polyfill is needed.
• Embed the JavaScript file that ends with Element; it defines the custom element on window.
• If you are using Babel, install regenerator-runtime and import it before the elements via import 'regenerator-runtime/runtime.js';

TypeScript type declarations

There are type declarations for all components that expose something. This is not the case for components that already register custom elements themselves. (You import them with e.g. import '@helga-agency/overlay/OverlayElement.)

The type declarations are tested using a *.d-test.ts file. With npm run ts-test, the test files are compiled by the TypeScript compiler and if the types are not correct, the compiler displays an error.

Components

• YouTube Player
• YouTube Preview Image
• Overlay and Buttons
• Audio Player
• Table of Contents
• Slider
• Form Sync
• Vimeo Player
• Vimeo Preview Image
• Dynamic Content Loader
• Async Loader
• Dynamic Page Loader
• Relative Time

Tools

• readAttribute
• splitText
• once
• slide, import as import { slide } from '@helga-agency/ui-components'
• createDebounce

Changesets

Changesets helps to manage package versioning and publishing. Acctually it is not in use. This is just a reminder in case we want to use it sometime.