parcel-preact-typescript icon indicating copy to clipboard operation
parcel-preact-typescript copied to clipboard

Simple setup using Parcel, Preact, and TypeScript

parcel-preact-typescript

Minimal template using Parcel, Preact, and TypeScript.

This template provides the simplest possible set-up that combines Parcel, Preact, TypeScript, and Jest.

Getting Started

Install the project dependencies.

yarn install

Available Scripts

yarn start

Runs the app in development mode. Visit http://localhost:1234.

yarn build

Builds the project for production. The build directory is dist; types will be written to dist/index.d.ts. Customize the build directory in the outDir configuration option in the tsconfig.json.

yarn test

Runs tests using Jest.

Configure Jest options in package.json.

{
  "jest": {
    "preset": "ts-jest",
    "testEnvironment": "jsdom"
  }
}

Customizing tsconfig.json

The default tsconfig.json contains the following:

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react",
    "jsxFactory": "h",
    "lib": ["dom", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "target": "es5"
  },
  "include": ["src"]
}

Note that jsxFactory must be "h" in order for preact to work with parcel.

Decorators

Enable decorators (stage 2) by setting compilerOptions.experimentalDecorators to true:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

License

MIT