gcanti / Elm Ts
Licence: mit
A porting to TypeScript featuring fp-ts, rxjs6 and React
Stars: β 230
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Elm Ts
Swift Gen
π± Composable, transformable, controllable randomness.
Stars: β 208 (-9.57%)
Mutual labels: functional-programming
Domainmodelingmadefunctional
Extended code samples related to the book "Domain Modeling Made Functional". Buy the book here: https://pragprog.com/book/swdddf/domain-modeling-made-functional or here https://fsharpforfunandprofit.com/books/
Stars: β 223 (-3.04%)
Mutual labels: functional-programming
Functional Programming Jargon
Jargon from the functional programming world in simple terms!
Stars: β 14,351 (+6139.57%)
Mutual labels: functional-programming
Aioreactive
Async/await reactive tools for Python 3.9+
Stars: β 215 (-6.52%)
Mutual labels: functional-programming
Bitcoin Chart Cli
Bitcoin chart for the terminal as command line util
Stars: β 221 (-3.91%)
Mutual labels: functional-programming
Bitcoin S
Bitcoin Implementation in Scala
Stars: β 206 (-10.43%)
Mutual labels: functional-programming
Arturo
Simple, expressive & portable programming language for efficient scripting
Stars: β 225 (-2.17%)
Mutual labels: functional-programming
Eta
The Eta Programming Language, a dialect of Haskell on the JVM
Stars: β 2,507 (+990%)
Mutual labels: functional-programming
Functional Light Js
Pragmatic, balanced FP in JavaScript. @FLJSBook on twitter.
Stars: β 14,764 (+6319.13%)
Mutual labels: functional-programming
Silt
An in-progress fast, dependently typed, functional programming language implemented in Swift.
Stars: β 217 (-5.65%)
Mutual labels: functional-programming
React Organism
Dead simple React state management to bring pure components alive
Stars: β 219 (-4.78%)
Mutual labels: functional-programming
Wonder.js
πFunctional, High performance 3D Webgl Engine
Stars: β 225 (-2.17%)
Mutual labels: functional-programming
Hamt
Immutable and Memory-Efficient Maps and Sets in Go
Stars: β 213 (-7.39%)
Mutual labels: functional-programming
Functional intro to python
[tutorial]A functional, Data Science focused introduction to Python
Stars: β 228 (-0.87%)
Mutual labels: functional-programming
Curryhoward
Automatic code generation for Scala functions and expressions via the Curry-Howard isomorphism
Stars: β 229 (-0.43%)
Mutual labels: functional-programming
Program Blog
Practice, thinking and reading
Stars: β 228 (-0.87%)
Mutual labels: functional-programming
Funcy
A fancy and practical functional tools
Stars: β 2,690 (+1069.57%)
Mutual labels: functional-programming
elm-ts
A porting of The Elm Architecture to TypeScript featuring fp-ts
, RxJS
and React
.
Installation
npm i elm-ts fp-ts rxjs react
Note: fp-ts
, rxjs
and react
are peer dependencies
Differences from Elm
- no ports
-
React
instead ofvirtual-dom
(pluggable) -
Navigation
is based on history
React
import * as React from 'elm-ts/lib/React'
import { render } from 'react-dom'
import * as component from './examples/Counter'
const main = React.program(component.init, component.update, component.view)
React.run(main, dom => render(dom, document.getElementById('app')!))
io-ts codecs
How to derive decoders fromimport * as t from 'io-ts'
import { failure } from 'io-ts/lib/PathReporter'
function fromCodec<A>(codec: t.Decoder<unknown, A>): Decoder<A> {
return flow(
codec.decode,
E.mapLeft(errors => failure(errors).join('\n'))
)
}
Enable debugger in development mode
For Html
(and its specializations) programs:
import { programWithDebugger } from 'elm-ts/lib/Debug/Html'
import * as React from 'elm-ts/lib/React'
import { render } from 'react-dom'
import * as component from './examples/Counter'
const program = process.env.NODE_ENV === 'production' ? React.program : programWithDebugger
const main = program(component.init, component.update, component.view)
React.run(main, dom => render(dom, document.getElementById('app')!))
For Navigation
(and its specializations) programs:
import { programWithDebuggerWithFlags } from 'elm-ts/lib/Debug/Navigation'
import * as Navigation from 'elm-ts/lib/Navigation'
import * as React from 'elm-ts/lib/React'
import { render } from 'react-dom'
import * as component from './examples/Navigation'
const program = process.env.NODE_ENV === 'production' ? Navigation.programWithFlags : programWithDebuggerWithFlags
const main = program(component.locationToMsg, component.init, component.update, component.view)
React.run(main(component.flags), dom => render(dom, document.getElementById('app')!))
Stop the application
If you need to stop the application for any reason, you can use the withStop
combinator:
import { withStop } from 'elm-ts/lib/Html'
import * as React from 'elm-ts/lib/React'
import { render } from 'react-dom'
import { fromEvent } from 'rxjs'
import * as component from './examples/Counter'
const stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')
const program = React.program(component.init, component.update, component.view)
const main = withStop(stopSignal$)(program)
React.run(main, dom => render(dom, document.getElementById('app')!))
The combinator takes a Program
and stops consuming it when the provided Observable
emits a value.
In case you want to enable the debugger, you have to use some specific functions from the Debug
sub-module:
// instead of `programWithDebuggerWithFlags`
import { programWithDebuggerWithFlagsWithStop } from 'elm-ts/lib/Debug/Navigation'
import { withStop } from 'elm-ts/lib/Html'
import * as Navigation from 'elm-ts/lib/Navigation'
import * as React from 'elm-ts/lib/React'
import { render } from 'react-dom'
import * as component from './examples/Navigation'
const stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')
const program =
process.env.NODE_ENV === 'production'
? Navigation.programWithFlags
: programWithDebuggerWithFlagsWithStop(stopSignal$)
const main = withStop(stopSignal$)(program(component.locationToMsg, component.init, component.update, component.view))
React.run(main(component.flags), dom => render(dom, document.getElementById('app')!))
Examples
- Counter
- Labeled Checkboxes (with a sprinkle of functional optics)
- Task, Time and Option
- Http and Either
- Navigation
- Compose Modules
Documentation
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].