Awesome

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
	:heavy_check_mark: (try - fixme)	AceEditorHalogenHooks	A Halogen Hooks port of the "Ace Editor" Halogen Example.
	:heavy_check_mark: (try - fixme)	AddRemoveEventListenerJs	This recipe shows how to add and remove an event listener to an HTML element.
:heavy_check_mark:		AffjaxPostNode	Performs a simple HTTP Post request using the Affjax library.
	:heavy_check_mark: (try)	BasicHalogenHooks	Displays a button that toggles the label to "On" and "Off".
:heavy_check_mark:	:heavy_check_mark: (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.
	:heavy_check_mark: (try)	BookHalogenHooks	A Halogen port of the "HTTP - Book" Elm Example.
	:heavy_check_mark: (try)	BookReactHooks	A React port of the "HTTP - Book" Elm Example.
	:heavy_check_mark: (try)	ButtonsHalogenHooks	A Halogen port of the "User Input - Buttons" Elm Example.
	:heavy_check_mark: (try)	ButtonsReactHooks	A React port of the "User Input - Buttons" Elm Example.
:heavy_check_mark:		CapabilityPatternNode	A skeletal version of an application structuring pattern
	:heavy_check_mark: (try)	CardsHalogenHooks	A Halogen port of the "Random - Cards" Elm Example.
	:heavy_check_mark: (try)	CardsReactHooks	A React port of the "Random - Cards" Elm Example.
	:heavy_check_mark: (try)	ClockReactHooks	A React port of the "User Interface - Clock" Elm Example.
	:heavy_check_mark: (try)	ComponentsHalogenHooks	Demonstrates how to nest one Halogen-Hooks-based component inside another and send/receive queries between the two.
	:heavy_check_mark: (try)	ComponentsInputHalogenHooks	Each time a parent re-renders, it will pass a new input value into the child, and the child will update accordingly.
	:heavy_check_mark: (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.
	:heavy_check_mark: (try)	ComponentsMultiTypeHalogenHooks	Demonstrates a component that can communicate with its children that have differing types.
	:heavy_check_mark: (try)	ComponentsMultiTypeReactHooks	Demonstrates a parent component with several children components, each with different prop types.
	:heavy_check_mark: (try)	ComponentsReactHooks	Demonstrates how to nest one React Hooks-based component inside another and send props from the parent to the child component.
:heavy_check_mark:	:heavy_check_mark: (try)	DateTimeBasicsLog	This recipe shows how to use `purescript-datetime` library to create `Time`, `Date`, and `DateTime` values and adjust/diff them.
:heavy_check_mark:	:heavy_check_mark: (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.
:heavy_check_mark:		DiceCLI	This recipe shows how to create an interactive command line prompt that repeatedly generates a random number between 1 and 6.
:heavy_check_mark:	:heavy_check_mark: (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.
	:heavy_check_mark: (try)	DogImagesHalogenHooks	Fetches random dog images from the Dog API.
	:heavy_check_mark: (try)	DogImagesReactHooks	Fetches random dog images from the Dog API.
	:heavy_check_mark: (try)	DragAndDropHalogenHooks	A Halogen port of the "Files - Drag-and-Drop" Elm Example.
	:heavy_check_mark: (try)	DragAndDropReactHooks	A React port of the "Files - Drag-and-Drop" Elm Example.
	:heavy_check_mark: (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.
	:heavy_check_mark:	DriverRoutingHalogenHooks	Demonstrates using `hashchange` events to drive the root component in a Halogen application via the driver.
	:heavy_check_mark: (try)	DriverWebSocketsHalogenHooks	Demonstrates using a WebSocket to drive the main component in a Halogen application.
	:heavy_check_mark: (try)	FileUploadHalogenHooks	A Halogen port of the "Files - Upload" Elm Example.
	:heavy_check_mark: (try)	FileUploadReactHooks	A React port of the "Files - Upload" Elm Example.
	:heavy_check_mark:	FindDomElementJs	This recipe shows how to find elements in the DOM by using query selectors.
	:heavy_check_mark: (try)	FormsReactHooks	A React port of the "User Interface - Forms" Elm Example.
	:heavy_check_mark: (try)	GroceriesHalogenHooks	A Halogen port of the "HTML - Groceries" Elm Example.
	:heavy_check_mark: (try)	GroceriesJs	A framework-free port of the "HTML - Groceries" Elm Example.
	:heavy_check_mark: (try)	GroceriesReactHooks	A React port of the "HTML - Groceries" Elm Example.
	:heavy_check_mark: (try)	HelloHalogenHooks	A Halogen port of the "HTML - Hello" Elm Example.
	:heavy_check_mark: (try)	HelloJs	A framework-free port of the "HTML - Hello" Elm Example.
:heavy_check_mark:	:heavy_check_mark: (try)	HelloLog	This recipe shows how to run a simple "Hello world!" program in either the node.js or web browser console.
	:heavy_check_mark: (try)	HelloReactHooks	A React port of the "HTML - Hello" Elm Example.
:heavy_check_mark:	:heavy_check_mark: (try)	HeterogeneousLog	This recipe demonstrates how to use `purescript-heterogeneous` to manipulate records generically.
:heavy_check_mark:	:heavy_check_mark: (try)	HeterogenousArrayLog	This recipe demonstrates how to create a heterogenous array and process its elements.
	:heavy_check_mark: (try - fixme)	ImagePreviewsHalogenHooks	A Halogen port of the "Files - Drag-and-Drop" Elm Example with an additional feature to display image thumbnails.
	:heavy_check_mark: (try)	ImagePreviewsReactHooks	A React port of the "Files - Image-Previews" Elm Example.
	:heavy_check_mark: (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.
	:heavy_check_mark: (try)	KeyboardInputHalogenHooks	This example demonstrates how to selectively capture keyboard events and, more generally, how to use `EventSource`s in Halogen.
	:heavy_check_mark: (try)	LifecycleHalogenHooks	Demonstrates component lifecycle.
	:heavy_check_mark: (try)	NumbersHalogenHooks	A Halogen port of the "Random - Numbers" Elm Example.
	:heavy_check_mark: (try)	NumbersReactHooks	A React port of the "Random - Numbers" Elm Example.
:heavy_check_mark:	:heavy_check_mark: (try)	ParallelAppMExampleLog	Demonstrates how to use `parSequence`/`parTraverse` and how to define a `Parallel` instance for a `ReaderT r Aff`-based `AppM` monad.
	:heavy_check_mark: (try)	PositionsHalogenHooks	A Halogen port of the "Random - Positions" Elm Example.
	:heavy_check_mark: (try)	PositionsReactHooks	A React port of the "Random - Positions" Elm Example.
:heavy_check_mark:		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`.
:heavy_check_mark:		ReadPrintFileContentsNode	Reads a file's contents and prints it to the console.
	:heavy_check_mark:	RoutingHashHalogenClassic	This recipe shows how to use `purescript-routing` to do client-side hash-based routing in a Halogen-based single-page application (SPA).
	:heavy_check_mark:	RoutingHashLog	This recipe demonstrates hash-based routing with `purescript-routing`. No web framework is used.
	:heavy_check_mark:	RoutingHashReactHooks	This recipe shows how to use `purescript-routing` to do client-side hash-based routing in a React-based single-page application (SPA).
	:heavy_check_mark:	RoutingPushHalogenClassic	This recipe shows how to use `purescript-routing` to do client-side push-state routing in a Halogen-based single-page application (SPA).
	:heavy_check_mark:	RoutingPushReactHooks	This recipe shows how to use `purescript-routing` to do client-side push-state routing in a React-based single-page application (SPA).
:heavy_check_mark:		RunCapabilityPatternNode	A skeletal version of an application structuring pattern using purescript-run and free dsls.
	:heavy_check_mark: (try)	ShapesHalogenHooks	Demonstrates rendering of SVG shapes.
	:heavy_check_mark: (try)	ShapesReactHooks	Demonstrates rendering of SVG shapes.
	:heavy_check_mark: (try)	SignalRenderJs	Signal demo that responds to user input and elapsed time.
	:heavy_check_mark: (try)	SignalSnakeJs	A snake game built using Signal.
	:heavy_check_mark: (try)	SignalTrisJs	A tetromino game built using Signal.
:heavy_check_mark:	:heavy_check_mark: (try)	SimpleASTParserLog	This recipe shows how to parse and evaluate a math expression using parsers and a "precedence climbing" approach.
	:heavy_check_mark: (try)	TextFieldsHalogenHooks	A Halogen port of the "User Interface - Text Fields" Elm Example.
	:heavy_check_mark: (try)	TextFieldsReactHooks	A React port of the "User Interface - Text Fields" Elm Example.
	:heavy_check_mark: (try - fixme)	TicTacToeReactHooks	A PureScript port of the official reactjs.org documentation's Tutorial: Intro to React example.
	:heavy_check_mark: (try)	TimeHalogenHooks	A Halogen port of the "Time - Time" Elm Example.
	:heavy_check_mark: (try)	TimeReactHooks	A React port of the "User Interface - Time" Elm Example.
:heavy_check_mark:	:heavy_check_mark: (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."
	:heavy_check_mark: (try)	WindowPropertiesJs	This recipe shows how to get and print various properties in the browser's `window` object.
:heavy_check_mark:		WriteFileNode	Writes a `String` to a text file using UTF-8 encoding.