Purescript React / Halo / Basic Hooks / MUI examples translated from .

See:

• Halogen
• React Halo
• React Basic Hooks
• React Basic
• Material-UI / MUI

Each of the React Halo examples are taken from Halogen and self-contained in a directory containing the source code and an index.html file that you can open in your browser once the source is compiled with spago and bundled (with parceljs or other, to fix JS FFI references to require() in particular in React Basic and MUI modules).

Make sure dependencies are installed:

npm install

Now you can build any of the examples from the root of the repository using the command npm run example-<name>:

npm run example-ace npm run example-basic # ... 

This will compile the example source code into a file named example.js in the dist directory for the example. You can now open the corresponding index.html file from the same directory.

The Halogen Examples folder contains a variety of examples demonstrating different Halogen features. You can compile the halogen examples with spago from the root of the project (because they contain no JS FFI referencing require()).

Bundling & tree-shaking purescript with spago bundle-app and bundling/tree-shaking JS with parcel build resulted in ~280K JS file:

spago --config examples/basic/spago.dhall bundle-app --main Example.Basic.Main --to examples/basic/dist/example.js ; parcel build --no-source-maps examples/basic/dist/index.html

Building purescript with spago build and bundling/tree-shaking JS with parcel build resulted in ~770K JS file:

spago --config examples/basic/spago.dhall build ; parcel build --no-source-maps examples/basic/dist/index-dev.html

Note:

The first option seems best for production builds, while the second option is good for dev mode (using a combination of spago build --watch and parcel serve for hot module reloading).

To use assets locally (no CDN) they need to be included in the bundler, with possibly different strategies depending on option 1 or 2 above (see the index.html & index-dev.html files).