Repository files navigation

A collection of sample apps demonstrating Preact's compatibility with various 3rd party libraries

This repo contains a collection of simple Preact apps that demonstrate how to use preact with various 3rd party libraries includingreact-redux,mobx-react,react-router, and more!

The apps are divided into 2 categories: direct and full-compat. Libraries in the "src/direct" directory can be used withpreact directly and don't requirepreact/compat. Libraries in the "full-compat" directory require aliasingreact topreact/compat.

We are looking for contributors to add more libraries to this repository! If that's you, read on to find out how to get started!

There are many ways to help our project. Some include:

• Request a library to add
• Adding libraries
• Adding tests for libraries
• File issues for bugs in sample apps
• Fixing bugs in sample apps

Check out ourCONTRIBUTING guide for details on how to contribute.

Follow these steps to setup and run this project locally.

1. Install NPM dependencies:

   npm install

2. Run ourdev script to build the project and start the development server:

   npm run dev

Our package.json comes with same basic scripts to help you get started working in our repo. When usingnpm to run our commands, be sure to add-- before passing in any options to make sure they reach our script and aren't consumed bynpm.

Thedev script will watch the files insrc and re-build our scripts when one of them changes. If you know what library you are working on and just want to watch those files, pass the name of the library to the dev script like so:npm run dev preact-router. This command will start the dev server and only watch the files necessary to re-build the script bundle that includespreact-router.

$ npm run dev -- --help  Description    Watch src files of the passedin libraries (defaults to all), build them on change, and run a web server to serve them  Usage    $ scripts dev [libraries] [options]  Options    -m, --mode'production' or'development'  (default development)    --debug       Print out debugging info  (default false)    --preact      Path to a preact repo or package to bundle instead of the node_modules version.              Must be a path to the directory containing the root package.jsonin the Preact repo or package.    -h, --help    Displays this message

$ npm run build -- --help  Description    Build the bundles that include the libraries passedin (defaults to building all)  Usage    $ scripts build [libraries] [options]  Options    -m, --mode'production' or'development'  (default production)    -w, --watch    Watchsource files and rebuild on change  (default false)    --debug        Print out debugging info  (default false)    --preact       Path to a preact repo or package to bundle instead of the node_modules version.               Must be a path to the directory containing the root package.jsonin the Preact repo or package.    -h, --help     Displays this message

The test command just runsjest so allJest CLI options are supported. The most useful one is passing in a pattern to filter which tests are run. For example, if you only want to run thepreact-router tests, just pass in the stringpreact-router to only run tests that match that pattern:

npm runtest preact-router

Launchjest andpuppeteer with options to enable debugging the tests in Chromium. This will launch Chromium with headless turned off and devtools turned on. These options enable you to calljestPuppeteer.debug() in your test to pause jest and pause the browser. See thejest-puppeteer docs for more info.

Also see the"Debugging tests" section in the CONTRIBUTING guide.

$ npm run serve -- --help  Description    Run a development web server  Usage    $ scripts serve [options]  Options    --debug       Print out debugging info  (default false)    --preact      Path to a preact repo or package to bundle instead of the node_modules version.              Must be a path to the directory containing the root package.jsonin the Preact repo or package.    -h, --help    Displays this message

All submissions, including submissions by project members, require review. It's a great way to learn. We use GitHub pull requests for this purpose. ConsultGitHub Help for more information on using pull requests.

If you are a contributor tothe main Preact repo, you can point this repo to your local Preact repo to validate changes you make there. For any of the commands above, specify a--preact option to build the integrations website with your local repo. Point the--preact option to the top folder of the Preact repo that contains the rootpackage.json.

MIT