Add Codesandbox Integration

[developit]

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.