Preact Widget-Typescript Template

Overview

• This is a TypeScript-based template for creating a Preact widget or a component library
• Preact-CLI: Used for running a local development environment to use your widget in
• Microbundle: Used for bundling your widget/library for use in other Preact web apps
• Preact: General information about how to work with Preact, not specific to this template

Usage

$ npx preact-cli create widget-typescript my-widget
$ cd my-widget
$ npm install
$ npm run dev

Development server runs on port 8080. If the default port is already in use on your machine, it will start the development server on a random port.

Commands

• npm install: Installs dependencies

• npm run dev: Run a development server with Preact-CLI to test your widget

• npm run build:widget: NPM-ready build with Microbundle, to distribute your widget to be consumed by other Preact web applications

• npm run build:lib: NPM-ready build with Microbundle, to distribute your component as a Preact component library

• npm run lint: Lint files use ESLint

• npm run test: Run Jest and Enzyme with enzyme-adapter-preact-pure for your tests

How to Test

The widget-typescript template provides a basic test setup with Jest, Enzyme and enzyme-adapter-preact-pure. You are free to change Enzyme with any other testing library (eg. Preact Testing Library).

You can run all additional Jest CLI commands with the npm run test command as described in the Jest docs. For example, running jest in watch mode would be :

• npm run test -- --watch instead of jest --watch