spectacles-ts 👓

Practical Optics • Unfancy monocle-ts 🧐

A facade on top of monocle-ts

Blog post

Try it out!

!prop video

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

Installation

``shell
yarn add fp-ts spectacles-ts
`

Examples

$3

monocle-ts equivalent

`ts
import { pipe } from 'fp-ts/function'
import * as O from 'fp-ts/Option'
import { get } from 'spectacles-ts'

const gotten = pipe(
{ a: { b: ['abc', 'def'] } },
get('a.b.[number]', 0)
)
// gotten: O.Option
`

$3

monocle-ts equivalent

immutability-helper equivalent

`ts
import { pipe } from 'fp-ts/function'
import { set } from 'spectacles-ts'

const beenSet = pipe(
{ a: ['abc', 'def'] },
set('a.[number]', 1, 'xyz')
)
// beenSet: { a: string[] }
`

$3

monocle-ts equivalent

`ts
import { pipe } from 'fp-ts/function'
import { setOption } from 'spectacles-ts'

const setOptioned = pipe(
{ a: ['abc', 'def'] },
setOption('a.[number]', 1, 'xyz')
)
// setOptioned: O.Option<{ a: string[] }>
`

$3

immutability-helper equivalents

`ts
import { pipe } from 'fp-ts/function'
import { upsert } from 'spectacles-ts'

const upserted = pipe(
{ a: { b: 123 } },
upsert('a', 'c', 'abc')
)
// upserted: { a: { b: number; readonly c: string } }
`

$3

`ts
import { pipe } from 'fp-ts/function'
import { remove } from 'spectacles-ts'

const removed = pipe(
{ a: { b: 123, c: false } },
remove('a.c')
)
// removed: { a: { b: number } }
`

$3

`ts
import { pipe } from 'fp-ts/function'
import type { NonEmptyArray } from 'fp-ts/NonEmptyArray'
import type { Option } from 'fp-ts/Option'
import { rename } from 'spectacles-ts'

const renamed = pipe(
{ a: { b: 123, c: 'abc' } },
rename('a.c', 'd')
)
// renamed: { a: { b: number; readonly d: string } }
`

$3

monocle-ts equivalent

immutability-helper equivalent

`ts
import { pipe } from 'fp-ts/function'
import { modify } from 'spectacles-ts'

const modified = pipe(
{ a: [{ b: 123 }] },
modify('a.[number].b', 0, (j) => j + 4)
)
// modified: { a: { b: number }[] }
`

$3

monocle-ts equivalent

`ts
import { pipe } from 'fp-ts/function'
import * as O from 'fp-ts/Option'
import { modifyOption } from 'spectacles-ts'

const modifyOptioned = pipe(
{ a: [{ b: 123 }] },
modifyOption('a.[number].b', 0, (j) => j + 4)
)
// modifyOptioned: O.Option<{ a: { b: number }[] }>
`

$3

`ts
import { pipe } from 'fp-ts/function'
import { modifyW } from 'spectacles-ts'

const modifyWidened = pipe(
{ a: 123 } as { a: number | undefined },
modifyW('a?', (j) => ${j + 2})
)
// modifyWidened: { a: string | undefined }
`

$3

`ts
import { pipe } from 'fp-ts/function'
import * as O from 'fp-ts/Option'
import { modifyOptionW } from 'spectacles-ts'

const modifyOptionWidened = pipe(
{ a: 123 } as { a: number | undefined },
modifyOptionW('a?', (j) => ${j + 2})
)
// modifyOptionWidened: O.Option<{ a: string | undefined }>
`

$3

monocle-ts equivalent

`ts
import { pipe } from 'fp-ts/function'
import * as E from 'fp-ts/Either'
import { modifyF } from 'spectacles-ts'

const modifieFunctored = pipe(
{ a: { b: 123 } },
modifyF(E.Applicative)(
'a.b',
(j) => j > 10 ? E.left('fail') : E.right(j - 10)
)
)
// modifieFunctored: E.Either
`

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

`ts
import * as O from 'fp-ts/Option'
import * as E from 'fp-ts/Either'
interface Data {
a: number
b: number
c: [number, string]
d: { e: number }[]
f: Record
g?: number
h: O.Option
i: E.Either
j: { shape: "circle"; radius: number } | { shape: "rectangle"; width: number; height: number }
}
const x: Data = {
a: 1,
b: 2,
c: [123, 'abc'],
d: [{ e: 123 }, { e: 456 }],
f: { b: { e: 456 }, a: { e: 123 } },
g: 2,
h: O.some(2),
i: E.right(2),
j: { shape: "circle", radius: 100 }
}
``

Social Media

Follow me on twitter! @typesafeFE