An unofficial Cookbook for PureScript (Quick link to recipes table)
The recipes folder contains all the recipes in this repo in no particular order.
If you want to contribute a new recipe, see the CONTRIBUTING.md file.
Install GNU Make (version 4.0 or above), and verify installation with:
make --version
Install all dependencies locally:
make installDeps
Install for Nix users:
# Remove purescript and spago and removing trailing , from package.json
sed --in-place '/purescript\|spago/d' ./package.json && sed --in-place '$!N;s/,\n }/\n }/;P;D' package.json
nix-shellSee a list of available recipe launch commands by running make list:
> make list
Use "make RecipeName-target" to run a recipe
=== Node Recipes ===
make ReadPrintFileContents-node
make HelloLog-node
...
=== Web Recipes ===
make WindowProperties-web
make HelloLog-web
...
Then simply copy and paste one of the listed commands. For example:
Running a node-compatible recipe:
> make HelloLog-node
=== Running HelloLog on the Node.js backend ===
[info] Installation complete.
[info] Build succeeded.
Hello world!
Running a web-compatible recipe:
> make HelloLog-web
=== Building HelloLog ===
[info] Installation complete.
[info] Build succeeded.
=== Launching HelloLog in the web browser ===
...
| Recipes ending with ... | ... mean the following approach/library is used |
|---|---|
HalogenClassic |
Component-style Halogen |
HalogenHooks |
Hooks-style Halogen |
ReactClassic |
Component-style React via react-basic |
ReactHooks |
Hooks-style React via react-basic |
Concur |
Concur |
Js |
Run plain PureScript only on the web (no node.js) without a web framework |
Log |
Log content to both the browser's dev console and the terminal |
Node |
Run PureScript only on Node.js where no user interaction occurs |
CLI |
Run PureScript only on Node.js with user interaction |
Note: for the try links in the "Web Browser" column, any content logged to the console will appear in the web browser's console, not in the page rendered by Try PureScript.
| Node | Web Browser | Recipe | Description |
|---|---|---|---|
| ✔️ (try - fixme) | AceEditorHalogenHooks | A Halogen Hooks port of the "Ace Editor" Halogen Example. | |
| ✔️ (try - fixme) | AddRemoveEventListenerJs | This recipe shows how to add and remove an event listener to an HTML element. | |
| ✔️ | AffjaxPostNode | Performs a simple HTTP Post request using the Affjax library. | |
| ✔️ (try) | BasicHalogenHooks | Displays a button that toggles the label to "On" and "Off". | |
| ✔️ | ✔️ (try) | BigIntJs | This recipe shows how to print, create, and use values of the BigIntJs type in either the node.js or web browser console. |
| ✔️ (try) | BookHalogenHooks | A Halogen port of the "HTTP - Book" Elm Example. | |
| ✔️ (try) | BookReactHooks | A React port of the "HTTP - Book" Elm Example. | |
| ✔️ (try) | ButtonsHalogenHooks | A Halogen port of the "User Input - Buttons" Elm Example. | |
| ✔️ (try) | ButtonsReactHooks | A React port of the "User Input - Buttons" Elm Example. | |
| ✔️ | CapabilityPatternNode | A skeletal version of an application structuring pattern | |
| ✔️ (try) | CardsHalogenHooks | A Halogen port of the "Random - Cards" Elm Example. | |
| ✔️ (try) | CardsReactHooks | A React port of the "Random - Cards" Elm Example. | |
| ✔️ (try) | ClockReactHooks | A React port of the "User Interface - Clock" Elm Example. | |
| ✔️ (try) | ComponentsHalogenHooks | Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two. | |
| ✔️ (try) | ComponentsInputHalogenHooks | Each time a parent re-renders, it will pass a new input value into the child, and the child will update accordingly. | |
| ✔️ (try) | ComponentsInputReactHooks | Each time the parent's state updates, it will pass a new prop value into the child, and the child will update accordingly. | |
| ✔️ (try) | ComponentsMultiTypeHalogenHooks | Demonstrates a component that can communicate with its children that have differing types. | |
| ✔️ (try) | ComponentsMultiTypeReactHooks | Demonstrates a parent component with several children components, each with different prop types. | |
| ✔️ (try) | ComponentsReactHooks | Demonstrates how to nest one React Hooks-based component inside another and send props from the parent to the child component. | |
| ✔️ | ✔️ (try) | DateTimeBasicsLog | This recipe shows how to use purescript-datetime library to create Time, Date, and DateTime values and adjust/diff them. |
| ✔️ | ✔️ (try) | DebuggingLog | This recipe shows how to do print-debugging using the Debug module's spy and traceM functions. The compiler will emit warnings to remind you to remove these debug functions before you ship production code. |
| ✔️ | DiceCLI | This recipe shows how to create an interactive command line prompt that repeatedly generates a random number between 1 and 6. | |
| ✔️ | ✔️ (try) | DiceLog | This recipe shows how to log a random integer between 1 and 6 (representing a roll of a die) in either the node.js or web browser console. |
| ✔️ (try) | DogImagesHalogenHooks | Fetches random dog images from the Dog API. | |
| ✔️ (try) | DogImagesReactHooks | Fetches random dog images from the Dog API. | |
| ✔️ (try) | DragAndDropHalogenHooks | A Halogen port of the "Files - Drag-and-Drop" Elm Example. | |
| ✔️ (try) | DragAndDropReactHooks | A React port of the "Files - Drag-and-Drop" Elm Example. | |
| ✔️ (try) | DriverIoHalogenHooks | Demonstrates how to communicate with a Halogen application by sending messages to and receiving messages from the root-level component via the driver. | |
| ✔️ | DriverRoutingHalogenHooks | Demonstrates using hashchange events to drive the root component in a Halogen application via the driver. |
|
| ✔️ (try) | DriverWebSocketsHalogenHooks | Demonstrates using a WebSocket to drive the main component in a Halogen application. | |
| ✔️ (try) | FileUploadHalogenHooks | A Halogen port of the "Files - Upload" Elm Example. | |
| ✔️ (try) | FileUploadReactHooks | A React port of the "Files - Upload" Elm Example. | |
| ✔️ | FindDomElementJs | This recipe shows how to find elements in the DOM by using query selectors. | |
| ✔️ (try) | FormsReactHooks | A React port of the "User Interface - Forms" Elm Example. | |
| ✔️ (try) | GroceriesHalogenHooks | A Halogen port of the "HTML - Groceries" Elm Example. | |
| ✔️ (try) | GroceriesJs | A framework-free port of the "HTML - Groceries" Elm Example. | |
| ✔️ (try) | GroceriesReactHooks | A React port of the "HTML - Groceries" Elm Example. | |
| ✔️ (try) | HelloHalogenHooks | A Halogen port of the "HTML - Hello" Elm Example. | |
| ✔️ (try) | HelloJs | A framework-free port of the "HTML - Hello" Elm Example. | |
| ✔️ | ✔️ (try) | HelloLog | This recipe shows how to run a simple "Hello world!" program in either the node.js or web browser console. |
| ✔️ (try) | HelloReactHooks | A React port of the "HTML - Hello" Elm Example. | |
| ✔️ | ✔️ (try) | HeterogeneousLog | This recipe demonstrates how to use purescript-heterogeneous to manipulate records generically. |
| ✔️ | ✔️ (try) | HeterogenousArrayLog | This recipe demonstrates how to create a heterogenous array and process its elements. |
| ✔️ (try - fixme) | ImagePreviewsHalogenHooks | A Halogen port of the "Files - Drag-and-Drop" Elm Example with an additional feature to display image thumbnails. | |
| ✔️ (try) | ImagePreviewsReactHooks | A React port of the "Files - Image-Previews" Elm Example. | |
| ✔️ (try) | InterpretHalogenHooks | Demonstrates how to use a custom monad (in this case, using ReaderT with Aff as the effect type) for a component, and then interpreting that custom monad back down to Aff, so it can be run as a normal component. |
|
| ✔️ (try) | KeyboardInputHalogenHooks | This example demonstrates how to selectively capture keyboard events and, more generally, how to use EventSources in Halogen. |
|
| ✔️ (try) | LifecycleHalogenHooks | Demonstrates component lifecycle. | |
| ✔️ (try) | NumbersHalogenHooks | A Halogen port of the "Random - Numbers" Elm Example. | |
| ✔️ (try) | NumbersReactHooks | A React port of the "Random - Numbers" Elm Example. | |
| ✔️ | ✔️ (try) | ParallelAppMExampleLog | Demonstrates how to use parSequence/parTraverse and how to define a Parallel instance for a ReaderT r Aff-based AppM monad. |
| ✔️ (try) | PositionsHalogenHooks | A Halogen port of the "Random - Positions" Elm Example. | |
| ✔️ (try) | PositionsReactHooks | A React port of the "Random - Positions" Elm Example. | |
| ✔️ | RandomNumberGameNode | This recipe shows how to build a "guess the random number" game using a custom AppM monad via the ReaderT design pattern and Aff, storing the game state in a mutable variable via a Ref. |
|
| ✔️ | ReadPrintFileContentsNode | Reads a file's contents and prints it to the console. | |
| ✔️ | RoutingHashHalogenClassic | This recipe shows how to use purescript-routing to do client-side hash-based routing in a Halogen-based single-page application (SPA). |
|
| ✔️ | RoutingHashLog | This recipe demonstrates hash-based routing with purescript-routing. No web framework is used. |
|
| ✔️ | RoutingHashReactHooks | This recipe shows how to use purescript-routing to do client-side hash-based routing in a React-based single-page application (SPA). |
|
| ✔️ | RoutingPushHalogenClassic | This recipe shows how to use purescript-routing to do client-side push-state routing in a Halogen-based single-page application (SPA). |
|
| ✔️ | RoutingPushReactHooks | This recipe shows how to use purescript-routing to do client-side push-state routing in a React-based single-page application (SPA). |
|
| ✔️ | RunCapabilityPatternNode | A skeletal version of an application structuring pattern using purescript-run and free dsls. | |
| ✔️ (try) | ShapesHalogenHooks | Demonstrates rendering of SVG shapes. | |
| ✔️ (try) | ShapesReactHooks | Demonstrates rendering of SVG shapes. | |
| ✔️ (try) | SignalRenderJs | Signal demo that responds to user input and elapsed time. | |
| ✔️ (try) | SignalSnakeJs | A snake game built using Signal. | |
| ✔️ (try) | SignalTrisJs | A tetromino game built using Signal. | |
| ✔️ | ✔️ (try) | SimpleASTParserLog | This recipe shows how to parse and evaluate a math expression using parsers and a "precedence climbing" approach. |
| ✔️ (try) | TextFieldsHalogenHooks | A Halogen port of the "User Interface - Text Fields" Elm Example. | |
| ✔️ (try) | TextFieldsReactHooks | A React port of the "User Interface - Text Fields" Elm Example. | |
| ✔️ (try - fixme) | TicTacToeReactHooks | A PureScript port of the official reactjs.org documentation's Tutorial: Intro to React example. | |
| ✔️ (try) | TimeHalogenHooks | A Halogen port of the "Time - Time" Elm Example. | |
| ✔️ (try) | TimeReactHooks | A React port of the "User Interface - Time" Elm Example. | |
| ✔️ | ✔️ (try) | ValueBasedJsonCodecLog | This recipe shows how to use codec and codec-argonaut to write value-based bidirectional JSON codecs to encode and decode examples written in "meta-language." |
| ✔️ (try) | WindowPropertiesJs | This recipe shows how to get and print various properties in the browser's window object. |
|
| ✔️ | WriteFileNode | Writes a String to a text file using UTF-8 encoding. |