jsparkes/purescript-cookbook

An unofficial Cookbook for PureScript

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

Node	Web Browser	Recipe	Description
	✔️ (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)	CatGifsHalogenHooks	A Halogen port of the "HTTP - Cat GIFs" Elm Example.
	✔️ (try)	CatGifsReactHooks	A React port of the "HTTP - Cat GIFs" 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)	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)	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 - fixme)	HelloConcur	A Concur port of the "HTML - Hello" 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)	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)	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.
✔️		PayloadHttpApiNode	Implements a simple 'quote' API using the payload HTTP backend.
	✔️ (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.
	✔️ (try - fixme)	ReadPrintFileContentsConcur	A Concur recipe to open a local file and display its content in a web page.
✔️		ReadPrintFileContentsNode	Reads a file's contents and prints it to the console.
	✔️	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).
	✔️	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)	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.