Skip to content

JordanMartinez/purescript-cookbook

Repository files navigation

PureScript-Cookbook

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.

Usage

Install Dependencies

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-shell

Running Recipes

See 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 ===
...

Current Recipe Suffixes

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

Recipes

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.