preactjs / preact-integrations

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

Preact Integrations

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

---

✨ Description

This repo contains a collection of simple Preact apps that demonstrate how to use preact with various 3rd party libraries including react-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 with preact directly and don't require preact/compat. Libraries in the "full-compat" directory require aliasing react to preact/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!

---

🤝 Contributing

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 our CONTRIBUTING guide for details on how to contribute.

---

🛠 Setup and building

Follow these steps to setup and run this project locally.

1. Install NPM dependencies:

   npm install

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

   npm run dev

---

🏎 Development scripts

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

dev

The dev script will watch the files in src 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 includes preact-router.

$ npm run dev -- --help

  Description
    Watch src files of the passed in 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.json in the Preact repo	 or package.
    -h, --help    Displays this message

build

$ npm run build -- --help

  Description
    Build the bundles that include the libraries passed in (defaults to building all)

  Usage
    $ scripts build [libraries] [options]

  Options
    -m, --mode     'production' or 'development'  (default production)
    -w, --watch    Watch source 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.json in the Preact repo or package.
    -h, --help     Displays this message

test

The test command just runs jest so all Jest 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 the preact-router tests, just pass in the string preact-router to only run tests that match that pattern:

npm run test preact-router

test:debug

Launch jest and puppeteer 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 call jestPuppeteer.debug() in your test to pause jest and pause the browser. See the jest-puppeteer docs for more info.

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

serve

$ 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.json in the Preact repo or package.
    -h, --help    Displays this message

---

👀 Code Reviews

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

---

Using with Preact repo

If you are a contributor to the 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 root package.json.

---

🥂 License

MIT

preact-integrations's Issues

Add Codesandbox Integration

We'd like to have an "Open in Sandbox" button for each sample. This would help folks use the examples to get started, and provide additional value for this repository as the number of sample applications grows.

There are two likely solutions for this:

Option 1: Links

It looks like Codesandbox allows passing Github repo URLs, including the branch and path, and it will construct a sandbox accordingly. For example:

https://codesandbox.io/s/github/preactjs/preact-integrations/tree/master/src/direct

Note that the above fails to import, likely due to the directory containing no package.json or other metadata files. Codesandbox expects the directory to contain a standalone runnable application.

The trick here is that we'd probably need to change how the Webpack configuration is shared between samples, since currently it lives outside of the directory for each sample and would not be imported into Codesandbox. Ideally, the generated sandbox should contain a fully independent webpack configuration, or one that is derived from an npm module. We could consider using a git-based npm dependency to load webpack configuration, or publishing the shared configuration to npm directly.

Option 2: Integration

It should be possible to load samples using the Codesandbox Define API. To make this work, we would need a way to download the source files for each sample and compile them into a POST request to Codesandbox.

Open Questions:

• Should it display source like the preactjs.com REPL?
• Would each library integration need its own package.json for this to work?
  • Currently the Preact-CLI template on CodeSandbox is 1.x and ships with Preact 8. In order to specify preact@latest and preact-render-to-string@latest as dependencies, we may need a package.json.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Add Slate integration

Add integration demonstrating how to use slate and/or slate-react with Preact.

Related: preactjs/preact#1422

Add motion-one

https://motion.dev/

Add framer-motion

Add Radix UI

Add Material-UI

Add a page that integrates material-ui. May be useful to catch regressions to things like preactjs/preact#2403

Add Formik

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.