spectacles-ts 👓

Practical Optics • Unfancy monocle-ts 🧐

A facade on top of monocle-ts

Blog post

Try it out!

• Installation
• Examples
  • get
  • set
  • setOption
  • upsert
  • remove
  • rename
  • modify
  • modifyOption
  • modifyW
  • modifyOptionW
  • modifyF
• Operations
• Social Media

Installation

1yarn add fp-ts spectacles-ts

Examples

get

monocle-ts equivalent

1import { pipe } from 'fp-ts/function'
2import * as O from 'fp-ts/Option'
3import { get } from 'spectacles-ts'
4
5const gotten = pipe(
6  { a: { b: ['abc', 'def'] } },
7  get('a.b.[number]', 0)
8)
9// gotten: O.Option<string>

set

monocle-ts equivalent

immutability-helper equivalent

1import { pipe } from 'fp-ts/function'
2import { set } from 'spectacles-ts'
3
4const beenSet = pipe(
5  { a: ['abc', 'def'] },
6  set('a.[number]', 1, 'xyz')
7)
8// beenSet: { a: string[] }

setOption

monocle-ts equivalent

1import { pipe } from 'fp-ts/function'
2import { setOption } from 'spectacles-ts'
3
4const setOptioned = pipe(
5  { a: ['abc', 'def'] },
6  setOption('a.[number]', 1, 'xyz')
7)
8// setOptioned: O.Option<{ a: string[] }>

upsert

immutability-helper equivalents

1import { pipe } from 'fp-ts/function'
2import { upsert } from 'spectacles-ts'
3
4const upserted = pipe(
5  { a: { b: 123 } },
6  upsert('a', 'c', 'abc')
7)
8// upserted: { a: { b: number; readonly c: string } }

remove

1import { pipe } from 'fp-ts/function'
2import { remove } from 'spectacles-ts'
3
4const removed = pipe(
5  { a: { b: 123, c: false } },
6  remove('a.c')
7)
8// removed: { a: { b: number } }

rename

1import { pipe } from 'fp-ts/function'
2import type { NonEmptyArray } from 'fp-ts/NonEmptyArray'
3import type { Option } from 'fp-ts/Option'
4import { rename } from 'spectacles-ts'
5
6const renamed = pipe(
7  { a: { b: 123, c: 'abc' } },
8  rename('a.c', 'd')
9)
10// renamed: { a: { b: number; readonly d: string } }

modify

monocle-ts equivalent

immutability-helper equivalent

1import { pipe } from 'fp-ts/function'
2import { modify } from 'spectacles-ts'
3
4const modified = pipe(
5  { a: [{ b: 123 }] },
6  modify('a.[number].b', 0, (j) => j + 4)
7)
8// modified: { a: { b: number }[] }

modifyOption

monocle-ts equivalent

1import { pipe } from 'fp-ts/function'
2import * as O from 'fp-ts/Option'
3import { modifyOption } from 'spectacles-ts'
4
5const modifyOptioned = pipe(
6  { a: [{ b: 123 }] },
7  modifyOption('a.[number].b', 0, (j) => j + 4)
8)
9// modifyOptioned: O.Option<{ a: { b: number }[] }>

modifyW

1import { pipe } from 'fp-ts/function'
2import { modifyW } from 'spectacles-ts'
3
4const modifyWidened = pipe(
5  { a: 123 } as { a: number | undefined },
6  modifyW('a?', (j) => `${j + 2}`)
7)
8// modifyWidened: { a: string | undefined }

modifyOptionW

1import { pipe } from 'fp-ts/function'
2import * as O from 'fp-ts/Option'
3import { modifyOptionW } from 'spectacles-ts'
4
5const modifyOptionWidened = pipe(
6  { a: 123 } as { a: number | undefined },
7  modifyOptionW('a?', (j) => `${j + 2}`)
8)
9// modifyOptionWidened: O.Option<{ a: string | undefined }>

modifyF

monocle-ts equivalent

1import { pipe } from 'fp-ts/function'
2import * as E from 'fp-ts/Either'
3import { modifyF } from 'spectacles-ts'
4
5const modifieFunctored = pipe(
6  { a: { b: 123 } },
7  modifyF(E.Applicative)(
8    'a.b',
9    (j) => j > 10 ? E.left<string, never>('fail') : E.right(j - 10)
10  )
11)
12// modifieFunctored: E.Either<string, { a: { b: number } }>

Operations

usage	equals	Optional	monocle
get('a')(x)	1	no	prop
get('c.[0]')(x)	123	no	component
get('d.[number]', 0)(x)	O.some({ e: 123 })	yes	index
get('f.[string]', 'a')(x)	O.some([123])	yes	key
get('g?')(x)	O.some(2)	yes	fromNullable
get('h.?some')(x)	O.some(2)	yes	some
get('i.?left')(x)	O.none	yes	left
get('i.?right')(x)	O.some(2)	yes	right
get('j.shape:circle.radius')(x)	O.some(100)	yes	filter
get('d.[]>.e')(x)	[123, 456]	never	traverse Array
get('f.{}>.e')(x)	[123, 456]	never	traverse Record (keys sorted alpha- betically)

1import * as O from 'fp-ts/Option'
2import * as E from 'fp-ts/Either'
3interface Data {
4  a: number
5  b: number
6  c: [number, string]
7  d: { e: number }[]
8  f: Record<string, number[]>
9  g?: number
10  h: O.Option<number>
11  i: E.Either<string, number>
12  j: { shape: "circle"; radius: number } | { shape: "rectangle"; width: number; height: number }
13}
14const x: Data = {
15  a: 1,
16  b: 2,
17  c: [123, 'abc'],
18  d: [{ e: 123 }, { e: 456 }],
19  f: { b: { e: 456 }, a: { e: 123 } },
20  g: 2,
21  h: O.some(2),
22  i: E.right(2),
23  j: { shape: "circle", radius: 100 }
24}

Social Media

Follow me on twitter! @typesafeFE