Awesome
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 withenzyme-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 ofjest --watch