├── .gitignore
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── .vscode
└── settings.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs
├── _config.yml
├── index.md
└── modules
│ ├── Cmd.ts.md
│ ├── Debug
│ ├── Html.ts.md
│ ├── Navigation.ts.md
│ ├── commons.ts.md
│ ├── console.ts.md
│ ├── index.ts.md
│ └── redux-devtool.ts.md
│ ├── Decode.ts.md
│ ├── Html.ts.md
│ ├── Http.ts.md
│ ├── Navigation.ts.md
│ ├── Platform.ts.md
│ ├── React.ts.md
│ ├── Sub.ts.md
│ ├── Task.ts.md
│ ├── Time.ts.md
│ ├── index.md
│ └── index.ts.md
├── examples
├── Blessed.tsx
├── ComposeModules
│ ├── App.tsx
│ ├── Counter.tsx
│ ├── StringBuilder.tsx
│ ├── helpers.ts
│ └── index.tsx
├── Counter.tsx
├── DebuggerHtml.tsx
├── Http.tsx
├── LabeledCheckboxes.tsx
├── Navigation.tsx
├── Task.tsx
└── react-blessed.d.ts
├── package-lock.json
├── package.json
├── scripts
├── docs-index.ts
├── helpers
│ ├── fs.ts
│ ├── logger.ts
│ └── program.ts
└── rewrite-es6-paths.ts
├── src
├── Cmd.ts
├── Debug
│ ├── Html.ts
│ ├── Navigation.ts
│ ├── commons.ts
│ ├── console.ts
│ ├── index.ts
│ └── redux-devtool.ts
├── Decode.ts
├── Html.ts
├── Http.ts
├── Navigation.ts
├── Platform.ts
├── React.ts
├── Sub.ts
├── Task.ts
├── Time.ts
└── index.ts
├── test
├── Cmd.test.ts
├── Debug
│ ├── Html.test.ts
│ ├── Navigation.test.ts
│ ├── _helpers.ts
│ ├── commons.test.ts
│ ├── console.test.ts
│ └── redux-devtool.test.ts
├── Decode.test.ts
├── Html.test.ts
├── Http.test.ts
├── Navigation.test.ts
├── Platform.test.ts
├── React.test.tsx
├── Sub.test.ts
├── Task.test.ts
├── Time.test.ts
└── helpers
│ ├── app.ts
│ ├── mock-history.ts
│ └── utils.ts
├── tsconfig.build-es6.json
├── tsconfig.build.json
├── tsconfig.json
└── tslint.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | *.log
3 | node_modules
4 | lib
5 | es6
6 | dist
7 | dev
8 | coverage
9 | tmp
10 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | /docs
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 120,
3 | "semi": false,
4 | "singleQuote": true,
5 | "arrowParens": "avoid",
6 | "trailingComma": "none"
7 | }
8 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - '10'
4 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "./node_modules/typescript/lib",
3 | "prettier.printWidth": 120,
4 | "prettier.semi": false,
5 | "prettier.singleQuote": true,
6 | "tslint.enable": true
7 | }
8 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | > **Tags:**
4 | >
5 | > - [New Feature]
6 | > - [Bug Fix]
7 | > - [Breaking Change]
8 | > - [Documentation]
9 | > - [Internal]
10 | > - [Polish]
11 | > - [Experimental]
12 |
13 | **Note**: Gaps between patch versions are faulty/broken releases. **Note**: A feature tagged as Experimental is in a
14 | high state of flux, you're at risk of it changing without notice.
15 |
16 | ## 0.6.0
17 |
18 | - **Bug Fix**
19 |
20 | - `XMLHttpRequest`'s response headers in `Response` object (@StefanoMagrassi)
21 |
22 | - **New Feature**
23 | - new `sendBy` function in `Http` module which carries the full `Response` object (@StefanoMagrassi)
24 |
25 | ## 0.5.8
26 |
27 | - **Bug Fix**
28 | - fix issue with empty response bodies, now they are converted to `{}`, fix #46 (@bmazzarol)
29 |
30 | ## 0.5.7
31 |
32 | - **Bug Fix**
33 | - fix execution of initial commands when React view runs effect on mount (@StefanoMagrassi)
34 |
35 | ## 0.5.6
36 |
37 | - **Internal**
38 | - add a namespace to `Decoder`'s `URI` in order to avoid name collision (@StefanoMagrassi)
39 |
40 | ## 0.5.5
41 |
42 | - **Bug Fix**
43 | - fix `response` for `BadStatus` error in order to comply with `Response` type (@StefanoMagrassi)
44 |
45 | ## 0.5.4
46 |
47 | - **New Feature**
48 | - Stop/unsubscribe application (@StefanoMagrassi)
49 |
50 | ## 0.5.3
51 |
52 | - **New Feature**
53 | - `Debugger` specialization for `Navigation` programs (@StefanoMagrassi)
54 |
55 | ## 0.5.2
56 |
57 | - **Bug Fix:**
58 | - fix return type of `programWithDebugger` in order to comply to `Html`'s `program` (@StefanoMagrassi)
59 |
60 | ## 0.5.1
61 |
62 | - **Breaking Change**
63 | - upgrade to `fp-ts@2.x` (@gcanti)
64 | - upgrade to `rxjs@6.x` (@gcanti)
65 | - by default do not export `Navigation` from `index`, resolves #14 (@gcanti)
66 | - `Cmd`
67 | - make `map` data-last (@gcanti)
68 | - add `of` function - it lifts a `Msg` into a command (@StefanoMagrassi)
69 | - `Decode`
70 | - remove dependency on `io-ts` (@gcanti)
71 | - refactor `Decoder` definition (@gcanti)
72 | - `Html`
73 | - make `map` data-last (@gcanti)
74 | - `Http`
75 | - remove `Expect` type (@gcanti)
76 | - remove class encoding for `BadUrl`, `Timeout`, `NetworkError`, `BadStatus`, `BadPayload` (@gcanti)
77 | - make `send` data-last (@gcanti)
78 | - `React`
79 | - make `map` data-last (@gcanti)
80 | - `Sub`
81 | - make `map` data-last (@gcanti)
82 | - `Task`
83 | - make `perform` data-last (@gcanti)
84 | - make `attempt` data-last (@gcanti)
85 | - remove `sequence` (@gcanti)
86 | - **New Feature**
87 | - Debugger support, resolves #3 (@StefanoMagrassi, @minedeljkovic)
88 | - **Internal**
89 | - Remove `axios` as dependency, resolves #4 (@StefanoMagrassi)
90 | - Full tests coverage (@StefanoMagrassi)
91 | - switch from `Mocha` to `Jest` as test runner (@StefanoMagrassi)
92 |
93 | ## 0.4.3
94 |
95 | - **Bug Fix**
96 | - don't rely on `instanceof Error` while matching axios errors, closes #23 (@minedeljkovic)
97 |
98 | ## 0.4.1
99 |
100 | - **New Feature**
101 | - expose `http.requestToTask` as `toTask` (@minedeljkovic)
102 | - **Polish**
103 | - remove `react-dom` dependency (@gcanti)
104 |
105 | ## 0.4.0
106 |
107 | - **Breaking Change**
108 | - remove `Reader` from `Html` signature (@minedeljkovic)
109 | - swap `Cmd.map` arguments (@minedeljkovic)
110 | - swap `Decoder.map` arguments (@minedeljkovic)
111 | - swap `Http.send` arguments (@minedeljkovic)
112 | - swap `Task.perform` arguments (@minedeljkovic)
113 | - swap `Task.attempt` arguments (@minedeljkovic)
114 | - **New Feature**
115 | - add `Html.map` function (@minedeljkovic)
116 | - add `React.map` function (@minedeljkovic)
117 | - add `Sub.map` function (@minedeljkovic)
118 |
119 | ## 0.3.1
120 |
121 | - **Bug Fix**
122 | - call subscriptions with initial model, fix #10 (@minedeljkovic)
123 |
124 | ## 0.3.0
125 |
126 | - **Breaking Change**
127 | - upgrade to `fp-ts@1.x.x`, `io-ts@1.x.x` (@gcanti)
128 |
129 | ## 0.2.0
130 |
131 | Refactoring
132 |
133 | ## 0.1.0
134 |
135 | Initial release
136 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Giulio Canti
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # elm-ts
2 |
3 | A porting of [_The Elm Architecture_](https://guide.elm-lang.org/architecture/) to TypeScript featuring `fp-ts`, `RxJS` and `React`.
4 |
5 | ## Installation
6 |
7 | ```sh
8 | npm i elm-ts fp-ts rxjs react
9 | ```
10 |
11 | Note: `fp-ts`, `rxjs` and `react` are peer dependencies
12 |
13 | ## Differences from Elm
14 |
15 | - no ports
16 | - `React` instead of `virtual-dom` (pluggable)
17 | - `Navigation` is based on [history](https://github.com/ReactTraining/history)
18 |
19 | ## React
20 |
21 | ```ts
22 | import * as React from 'elm-ts/lib/React'
23 | import { render } from 'react-dom'
24 | import * as component from './examples/Counter'
25 |
26 | const main = React.program(component.init, component.update, component.view)
27 |
28 | React.run(main, dom => render(dom, document.getElementById('app')!))
29 | ```
30 |
31 | ## How to derive decoders from [io-ts](https://github.com/gcanti/io-ts) codecs
32 |
33 | ```ts
34 | import * as t from 'io-ts'
35 | import { failure } from 'io-ts/lib/PathReporter'
36 |
37 | function fromCodec(codec: t.Decoder): Decoder {
38 | return flow(
39 | codec.decode,
40 | E.mapLeft(errors => failure(errors).join('\n'))
41 | )
42 | }
43 | ```
44 |
45 | ## Enable debugger in development mode
46 |
47 | For `Html` (and its specializations) programs:
48 |
49 | ```ts
50 | import { programWithDebugger } from 'elm-ts/lib/Debug/Html'
51 | import * as React from 'elm-ts/lib/React'
52 | import { render } from 'react-dom'
53 | import * as component from './examples/Counter'
54 |
55 | const program = process.env.NODE_ENV === 'production' ? React.program : programWithDebugger
56 |
57 | const main = program(component.init, component.update, component.view)
58 |
59 | React.run(main, dom => render(dom, document.getElementById('app')!))
60 | ```
61 |
62 | For `Navigation` (and its specializations) programs:
63 |
64 | ```ts
65 | import { programWithDebuggerWithFlags } from 'elm-ts/lib/Debug/Navigation'
66 | import * as Navigation from 'elm-ts/lib/Navigation'
67 | import * as React from 'elm-ts/lib/React'
68 | import { render } from 'react-dom'
69 | import * as component from './examples/Navigation'
70 |
71 | const program = process.env.NODE_ENV === 'production' ? Navigation.programWithFlags : programWithDebuggerWithFlags
72 |
73 | const main = program(component.locationToMsg, component.init, component.update, component.view)
74 |
75 | React.run(main(component.flags), dom => render(dom, document.getElementById('app')!))
76 | ```
77 |
78 | ## Stop the application
79 |
80 | If you need to stop the application for any reason, you can use the `withStop` combinator:
81 |
82 | ```ts
83 | import { withStop } from 'elm-ts/lib/Html'
84 | import * as React from 'elm-ts/lib/React'
85 | import { render } from 'react-dom'
86 | import { fromEvent } from 'rxjs'
87 | import * as component from './examples/Counter'
88 |
89 | const stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')
90 |
91 | const program = React.program(component.init, component.update, component.view)
92 |
93 | const main = withStop(stopSignal$)(program)
94 |
95 | React.run(main, dom => render(dom, document.getElementById('app')!))
96 | ```
97 |
98 | The combinator takes a `Program` and stops consuming it when the provided `Observable` emits a value.
99 |
100 | In case you want to enable the debugger, you have to use some specific functions from the `Debug` sub-module:
101 |
102 | ```ts
103 | // instead of `programWithDebuggerWithFlags`
104 | import { programWithDebuggerWithFlagsWithStop } from 'elm-ts/lib/Debug/Navigation'
105 | import { withStop } from 'elm-ts/lib/Html'
106 | import * as Navigation from 'elm-ts/lib/Navigation'
107 | import * as React from 'elm-ts/lib/React'
108 | import { render } from 'react-dom'
109 | import * as component from './examples/Navigation'
110 |
111 | const stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')
112 |
113 | const program =
114 | process.env.NODE_ENV === 'production'
115 | ? Navigation.programWithFlags
116 | : programWithDebuggerWithFlagsWithStop(stopSignal$)
117 |
118 | const main = withStop(stopSignal$)(program(component.locationToMsg, component.init, component.update, component.view))
119 |
120 | React.run(main(component.flags), dom => render(dom, document.getElementById('app')!))
121 | ```
122 |
123 | ## Examples
124 |
125 | - [Counter](examples/Counter.tsx)
126 | - [Labeled Checkboxes (with a sprinkle of functional optics)](examples/LabeledCheckboxes.tsx)
127 | - [Task, Time and Option](examples/Task.tsx)
128 | - [Http and Either](examples/Http.tsx)
129 | - [Navigation](examples/Navigation.tsx)
130 | - [Compose Modules](examples/ComposeModules/index.tsx)
131 |
132 | ## Documentation
133 |
134 | - [API Reference](https://gcanti.github.io/elm-ts)
135 |
--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
1 | remote_theme: pmarsceill/just-the-docs
2 |
3 | # Enable or disable the site search
4 | search_enabled: true
5 |
6 | # Aux links for the upper right navigation
7 | aux_links:
8 | 'elm-ts on GitHub':
9 | - 'https://github.com/gcanti/elm-ts'
10 |
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Home
3 | nav_order: 1
4 | ---
5 |
6 | # elm-ts
7 |
8 | A porting of [_The Elm Architecture_](https://guide.elm-lang.org/architecture/) to TypeScript featuring `fp-ts`, `RxJS` and `React`.
9 |
10 | ## Installation
11 |
12 | ```sh
13 | npm i elm-ts fp-ts rxjs react
14 | ```
15 |
16 | Note: `fp-ts`, `rxjs` and `react` are peer dependencies
17 |
18 | ## Differences from Elm
19 |
20 | - no ports
21 | - `React` instead of `virtual-dom` (pluggable)
22 | - `Navigation` is based on [history](https://github.com/ReactTraining/history)
23 |
24 | ## React
25 |
26 | ```ts
27 | import * as React from 'elm-ts/lib/React'
28 | import { render } from 'react-dom'
29 | import * as component from './examples/Counter'
30 |
31 | const main = React.program(component.init, component.update, component.view)
32 |
33 | React.run(main, dom => render(dom, document.getElementById('app')!))
34 | ```
35 |
36 | ## How to derive decoders from [io-ts](https://github.com/gcanti/io-ts) codecs
37 |
38 | ```ts
39 | import * as t from 'io-ts'
40 | import { failure } from 'io-ts/lib/PathReporter'
41 |
42 | function fromCodec(codec: t.Decoder): Decoder {
43 | return flow(
44 | codec.decode,
45 | E.mapLeft(errors => failure(errors).join('\n'))
46 | )
47 | }
48 | ```
49 |
50 | ## Enable debugger in development mode
51 |
52 | For `Html` (and its specializations) programs:
53 |
54 | ```ts
55 | import { programWithDebugger } from 'elm-ts/lib/Debug/Html'
56 | import * as React from 'elm-ts/lib/React'
57 | import { render } from 'react-dom'
58 | import * as component from './examples/Counter'
59 |
60 | const program = process.env.NODE_ENV === 'production' ? React.program : programWithDebugger
61 |
62 | const main = program(component.init, component.update, component.view)
63 |
64 | React.run(main, dom => render(dom, document.getElementById('app')!))
65 | ```
66 |
67 | For `Navigation` (and its specializations) programs:
68 |
69 | ```ts
70 | import { programWithDebuggerWithFlags } from 'elm-ts/lib/Debug/Navigation'
71 | import * as Navigation from 'elm-ts/lib/Navigation'
72 | import * as React from 'elm-ts/lib/React'
73 | import { render } from 'react-dom'
74 | import * as component from './examples/Navigation'
75 |
76 | const program = process.env.NODE_ENV === 'production' ? Navigation.programWithFlags : programWithDebuggerWithFlags
77 |
78 | const main = program(component.locationToMsg, component.init, component.update, component.view)
79 |
80 | React.run(main(component.flags), dom => render(dom, document.getElementById('app')!))
81 | ```
82 |
83 | ## Stop the application
84 |
85 | If you need to stop the application for any reason, you can use the `withStop` combinator:
86 |
87 | ```ts
88 | import { withStop } from 'elm-ts/lib/Html'
89 | import * as React from 'elm-ts/lib/React'
90 | import { render } from 'react-dom'
91 | import { fromEvent } from 'rxjs'
92 | import * as component from './examples/Counter'
93 |
94 | const stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')
95 |
96 | const program = React.program(component.init, component.update, component.view)
97 |
98 | const main = withStop(stopSignal$)(program)
99 |
100 | React.run(main, dom => render(dom, document.getElementById('app')!))
101 | ```
102 |
103 | The combinator takes a `Program` and stops consuming it when the provided `Observable` emits a value.
104 |
105 | In case you want to enable the debugger, you have to use some specific functions from the `Debug` sub-module:
106 |
107 | ```ts
108 | // instead of `programWithDebuggerWithFlags`
109 | import { programWithDebuggerWithFlagsWithStop } from 'elm-ts/lib/Debug/Navigation'
110 | import { withStop } from 'elm-ts/lib/Html'
111 | import * as Navigation from 'elm-ts/lib/Navigation'
112 | import * as React from 'elm-ts/lib/React'
113 | import { render } from 'react-dom'
114 | import * as component from './examples/Navigation'
115 |
116 | const stopSignal$ = fromEvent(document.getElementById('stop-btn'), 'click')
117 |
118 | const program =
119 | process.env.NODE_ENV === 'production'
120 | ? Navigation.programWithFlags
121 | : programWithDebuggerWithFlagsWithStop(stopSignal$)
122 |
123 | const main = withStop(stopSignal$)(program(component.locationToMsg, component.init, component.update, component.view))
124 |
125 | React.run(main(component.flags), dom => render(dom, document.getElementById('app')!))
126 | ```
127 |
128 | ## Examples
129 |
130 | - [Counter](examples/Counter.tsx)
131 | - [Labeled Checkboxes (with a sprinkle of functional optics)](examples/LabeledCheckboxes.tsx)
132 | - [Task, Time and Option](examples/Task.tsx)
133 | - [Http and Either](examples/Http.tsx)
134 | - [Navigation](examples/Navigation.tsx)
135 | - [Compose Modules](examples/ComposeModules/index.tsx)
136 |
137 | ## Documentation
138 |
139 | - [API Reference](https://gcanti.github.io/elm-ts)
140 |
--------------------------------------------------------------------------------
/docs/modules/Cmd.ts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Cmd.ts
3 | nav_order: 1
4 | parent: Modules
5 | ---
6 |
7 | ## Cmd overview
8 |
9 | Defines `Cmd`s as streams of asynchronous operations which can not fail and that can optionally carry a message.
10 |
11 | See the [Platform.Cmd](https://package.elm-lang.org/packages/elm/core/latest/Platform-Cmd) Elm package.
12 |
13 | Added in v0.5.0
14 |
15 | ---
16 |
17 | Table of contents
18 |
19 | - [Applicative](#applicative)
20 | - [of](#of)
21 | - [Functor](#functor)
22 | - [map](#map)
23 | - [constructors](#constructors)
24 | - [none](#none)
25 | - [model](#model)
26 | - [Cmd (interface)](#cmd-interface)
27 | - [utils](#utils)
28 | - [batch](#batch)
29 |
30 | ---
31 |
32 | # Applicative
33 |
34 | ## of
35 |
36 | Creates a new `Cmd` that carries the provided `Msg`.
37 |
38 | **Signature**
39 |
40 | ```ts
41 | export declare function of(m: Msg): Cmd
42 | ```
43 |
44 | Added in v0.5.0
45 |
46 | # Functor
47 |
48 | ## map
49 |
50 | Maps the carried `Msg` of a `Cmd` into another `Msg`.
51 |
52 | **Signature**
53 |
54 | ```ts
55 | export declare function map(f: (a: A) => Msg): (cmd: Cmd) => Cmd
56 | ```
57 |
58 | Added in v0.5.0
59 |
60 | # constructors
61 |
62 | ## none
63 |
64 | A `none` command is an empty stream.
65 |
66 | **Signature**
67 |
68 | ```ts
69 | export declare const none: Cmd
70 | ```
71 |
72 | Added in v0.5.0
73 |
74 | # model
75 |
76 | ## Cmd (interface)
77 |
78 | **Signature**
79 |
80 | ```ts
81 | export interface Cmd extends Observable>> {}
82 | ```
83 |
84 | Added in v0.5.0
85 |
86 | # utils
87 |
88 | ## batch
89 |
90 | Batches the execution of a list of commands.
91 |
92 | **Signature**
93 |
94 | ```ts
95 | export declare function batch(arr: Array>): Cmd
96 | ```
97 |
98 | Added in v0.5.0
99 |
--------------------------------------------------------------------------------
/docs/modules/Debug/Html.ts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Debug/Html.ts
3 | nav_order: 4
4 | parent: Modules
5 | ---
6 |
7 | ## Html overview
8 |
9 | This module makes available a debugging utility for `elm-ts` applications running `Html` programs.
10 |
11 | `elm-ts` ships with a [Redux DevTool Extension](https://github.com/zalmoxisus/redux-devtools-extension) integration, falling back to a simple debugger via standard browser's [`console`](https://developer.mozilla.org/en-US/docs/Web/API/Console) in case the extension is not available.
12 |
13 | **Note:** debugging is to be considered unsafe by design so it should be used only in **development**.
14 |
15 | This is an example of usage:
16 |
17 | ```ts
18 | import { react, cmd } from 'elm-ts'
19 | import { programWithDebugger } from 'elm-ts/lib/Debug/Html'
20 | import { render } from 'react-dom'
21 |
22 | type Model = number
23 | type Msg = 'INCREMENT' | 'DECREMENT'
24 |
25 | declare const init: [Model, cmd.none]
26 | declare function update(msg: Msg, model: Model): [Model, cmd.Cmd]
27 | declare function view(model: Model): react.Html
28 |
29 | const program = process.NODE_ENV === 'production' ? react.program : programWithDebugger
30 |
31 | const main = program(init, update, view)
32 |
33 | react.run(main, (dom) => render(dom, document.getElementById('app')))
34 | ```
35 |
36 | Added in v0.5.3
37 |
38 | ---
39 |
40 | Table of contents
41 |
42 | - [constructors](#constructors)
43 | - [programWithDebugger](#programwithdebugger)
44 | - [programWithDebuggerWithFlags](#programwithdebuggerwithflags)
45 | - [programWithDebuggerWithFlagsWithStop](#programwithdebuggerwithflagswithstop)
46 | - [programWithDebuggerWithStop](#programwithdebuggerwithstop)
47 |
48 | ---
49 |
50 | # constructors
51 |
52 | ## programWithDebugger
53 |
54 | Adds a debugging capability to a generic `Html` `Program`.
55 |
56 | It tracks every `Message` dispatched and resulting `Model` update.
57 |
58 | It also lets directly updating the application's state with a special `Message` of type:
59 |
60 | ```ts
61 | {
62 | type: '__DebugUpdateModel__'
63 | payload: Model
64 | }
65 | ```
66 |
67 | or applying a message with:
68 |
69 | ```ts
70 | {
71 | type: '__DebugApplyMsg__'
72 | payload: Msg
73 | }
74 | ```
75 |
76 | **Signature**
77 |
78 | ```ts
79 | export declare function programWithDebugger(
80 | init: [Model, Cmd],
81 | update: (msg: Msg, model: Model) => [Model, Cmd],
82 | view: (model: Model) => Html,
83 | subscriptions?: (model: Model) => Sub
84 | ): Program
85 | ```
86 |
87 | Added in v0.5.3
88 |
89 | ## programWithDebuggerWithFlags
90 |
91 | Same as `programWithDebugger()` but with `Flags` that can be passed when the `Program` is created in order to manage initial values.
92 |
93 | **Signature**
94 |
95 | ```ts
96 | export declare function programWithDebuggerWithFlags(
97 | init: (flags: Flags) => [Model, Cmd],
98 | update: (msg: Msg, model: Model) => [Model, Cmd],
99 | view: (model: Model) => Html,
100 | subscriptions?: (model: Model) => Sub
101 | ): (flags: Flags) => Program
102 | ```
103 |
104 | Added in v0.5.3
105 |
106 | ## programWithDebuggerWithFlagsWithStop
107 |
108 | Same as `programWithDebuggerWithStop()` but with `Flags` that can be passed when the `Program` is created in order to manage initial values.
109 |
110 | **Signature**
111 |
112 | ```ts
113 | export declare function programWithDebuggerWithFlagsWithStop(
114 | stopDebuggerOn: Observable
115 | ): (
116 | init: (flags: Flags) => [S, Cmd],
117 | update: (msg: M, model: S) => [S, Cmd],
118 | view: (model: S) => Html,
119 | subscriptions?: (model: S) => Sub
120 | ) => (flags: Flags) => Program
121 | ```
122 |
123 | Added in v0.5.4
124 |
125 | ## programWithDebuggerWithStop
126 |
127 | A function that requires an `Observable` and returns a `programWithDebugger()` function: the underlying debugger will stop when the `Observable` emits a value.
128 |
129 | **Signature**
130 |
131 | ```ts
132 | export declare function programWithDebuggerWithStop(
133 | stopDebuggerOn: Observable
134 | ): (
135 | init: [S, Cmd],
136 | update: (msg: M, model: S) => [S, Cmd],
137 | view: (model: S) => Html,
138 | subscriptions?: (model: S) => Sub
139 | ) => Program
140 | ```
141 |
142 | Added in v0.5.4
143 |
--------------------------------------------------------------------------------
/docs/modules/Debug/Navigation.ts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Debug/Navigation.ts
3 | nav_order: 6
4 | parent: Modules
5 | ---
6 |
7 | ## Navigation overview
8 |
9 | This module makes available a debugging utility for `elm-ts` applications running `Navigation` programs.
10 |
11 | `elm-ts` ships with a [Redux DevTool Extension](https://github.com/zalmoxisus/redux-devtools-extension) integration, falling back to a simple debugger via standard browser's [`console`](https://developer.mozilla.org/en-US/docs/Web/API/Console) in case the extension is not available.
12 |
13 | **Note:** debugging is to be considered unsafe by design so it should be used only in **development**.
14 |
15 | This is an example of usage:
16 |
17 | ```ts
18 | import { react, cmd } from 'elm-ts'
19 | import { programWithDebugger } from 'elm-ts/lib/Debug/Navigation'
20 | import { Location, program } from 'elm-ts/lib/Navigation'
21 | import { render } from 'react-dom'
22 |
23 | type Model = number
24 | type Msg = 'INCREMENT' | 'DECREMENT'
25 |
26 | declare function locationToMsg(location: Location): Msg
27 | declare function init(location: Location): [Model, cmd.none]
28 | declare function update(msg: Msg, model: Model): [Model, cmd.Cmd]
29 | declare function view(model: Model): react.Html
30 |
31 | const program = process.NODE_ENV === 'production' ? program : programWithDebugger
32 |
33 | const main = program(locationToMsg, init, update, view)
34 |
35 | react.run(main, (dom) => render(dom, document.getElementById('app')))
36 | ```
37 |
38 | Added in v0.5.3
39 |
40 | ---
41 |
42 | Table of contents
43 |
44 | - [constructors](#constructors)
45 | - [programWithDebugger](#programwithdebugger)
46 | - [programWithDebuggerWithFlags](#programwithdebuggerwithflags)
47 | - [programWithDebuggerWithFlagsWithStop](#programwithdebuggerwithflagswithstop)
48 | - [programWithDebuggerWithStop](#programwithdebuggerwithstop)
49 |
50 | ---
51 |
52 | # constructors
53 |
54 | ## programWithDebugger
55 |
56 | Adds a debugging capability to a generic `Navigation` `Program`.
57 |
58 | It tracks every `Message` dispatched and resulting `Model` update.
59 |
60 | It also lets directly updating the application's state with a special `Message` of type:
61 |
62 | ```ts
63 | {
64 | type: '__DebugUpdateModel__'
65 | payload: Model
66 | }
67 | ```
68 |
69 | or applying a message with:
70 |
71 | ```ts
72 | {
73 | type: '__DebugApplyMsg__'
74 | payload: Msg
75 | }
76 | ```
77 |
78 | **Signature**
79 |
80 | ```ts
81 | export declare function programWithDebugger(
82 | locationToMessage: (location: Location) => Msg,
83 | init: (location: Location) => [Model, Cmd],
84 | update: (msg: Msg, model: Model) => [Model, Cmd],
85 | view: (model: Model) => Html,
86 | subscriptions?: (model: Model) => Sub
87 | ): Program
88 | ```
89 |
90 | Added in v0.5.3
91 |
92 | ## programWithDebuggerWithFlags
93 |
94 | Same as `programWithDebugger()` but with `Flags` that can be passed when the `Program` is created in order to manage initial values.
95 |
96 | **Signature**
97 |
98 | ```ts
99 | export declare function programWithDebuggerWithFlags(
100 | locationToMessage: (location: Location) => Msg,
101 | init: (flags: Flags) => (location: Location) => [Model, Cmd],
102 | update: (msg: Msg, model: Model) => [Model, Cmd],
103 | view: (model: Model) => Html,
104 | subscriptions?: (model: Model) => Sub
105 | ): (flags: Flags) => Program
106 | ```
107 |
108 | Added in v0.5.3
109 |
110 | ## programWithDebuggerWithFlagsWithStop
111 |
112 | Same as `programWithDebuggerWithStop()` but with `Flags` that can be passed when the `Program` is created in order to manage initial values.
113 |
114 | **Signature**
115 |
116 | ```ts
117 | export declare function programWithDebuggerWithFlagsWithStop(
118 | stopDebuggerOn: Observable
119 | ): (
120 | locationToMessage: (location: Location) => M,
121 | init: (flags: Flags) => (location: Location) => [S, Cmd],
122 | update: (msg: M, model: S) => [S, Cmd],
123 | view: (model: S) => Html,
124 | subscriptions?: (model: S) => Sub
125 | ) => (flags: Flags) => Program
126 | ```
127 |
128 | Added in v0.5.4
129 |
130 | ## programWithDebuggerWithStop
131 |
132 | A function that requires an `Observable` and returns a `programWithDebugger()` function: the underlying debugger will stop when the `Observable` emits a value.
133 |
134 | **Signature**
135 |
136 | ```ts
137 | export declare function programWithDebuggerWithStop(
138 | stopDebuggerOn: Observable
139 | ): (
140 | locationToMessage: (location: Location) => M,
141 | init: (location: Location) => [S, Cmd],
142 | update: (msg: M, model: S) => [S, Cmd],
143 | view: (model: S) => Html,
144 | subscriptions?: (model: S) => Sub
145 | ) => Program
146 | ```
147 |
148 | Added in v0.5.4
149 |
--------------------------------------------------------------------------------
/docs/modules/Debug/commons.ts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Debug/commons.ts
3 | nav_order: 2
4 | parent: Modules
5 | ---
6 |
7 | ## commons overview
8 |
9 | Common utilities and type definitions for the `Debug` module.
10 |
11 | Added in v0.5.0
12 |
13 | ---
14 |
15 | Table of contents
16 |
17 | - [constructors](#constructors)
18 | - [debugMsg](#debugmsg)
19 | - [constructos](#constructos)
20 | - [debugInit](#debuginit)
21 | - [model](#model)
22 | - [Debug (interface)](#debug-interface)
23 | - [DebugAction (type alias)](#debugaction-type-alias)
24 | - [DebugData (type alias)](#debugdata-type-alias)
25 | - [DebugInit (interface)](#debuginit-interface)
26 | - [DebugMsg (interface)](#debugmsg-interface)
27 | - [Debugger (interface)](#debugger-interface)
28 | - [DebuggerR (interface)](#debuggerr-interface)
29 | - [Global (type alias)](#global-type-alias)
30 | - [MsgWithDebug (type alias)](#msgwithdebug-type-alias)
31 | - [utils](#utils)
32 | - [runDebugger](#rundebugger)
33 | - [updateWithDebug](#updatewithdebug)
34 |
35 | ---
36 |
37 | # constructors
38 |
39 | ## debugMsg
40 |
41 | Creates a `DebugMsg`
42 |
43 | **Signature**
44 |
45 | ```ts
46 | export declare const debugMsg: (payload: Msg) => DebugMsg
47 | ```
48 |
49 | Added in v0.5.0
50 |
51 | # constructos
52 |
53 | ## debugInit
54 |
55 | Creates a `DebugInit`
56 |
57 | **Signature**
58 |
59 | ```ts
60 | export declare const debugInit: () => DebugInit
61 | ```
62 |
63 | Added in v0.5.0
64 |
65 | # model
66 |
67 | ## Debug (interface)
68 |
69 | Defines a generic debugging function
70 |
71 | **Signature**
72 |
73 | ```ts
74 | export interface Debug {
75 | (data: DebugData): void
76 | }
77 | ```
78 |
79 | Added in v0.5.0
80 |
81 | ## DebugAction (type alias)
82 |
83 | **Signature**
84 |
85 | ```ts
86 | export type DebugAction = DebugInit | DebugMsg
87 | ```
88 |
89 | Added in v0.5.0
90 |
91 | ## DebugData (type alias)
92 |
93 | **Signature**
94 |
95 | ```ts
96 | export type DebugData = [DebugAction, Model]
97 | ```
98 |
99 | Added in v0.5.0
100 |
101 | ## DebugInit (interface)
102 |
103 | **Signature**
104 |
105 | ```ts
106 | export interface DebugInit {
107 | type: 'INIT'
108 | }
109 | ```
110 |
111 | Added in v0.5.0
112 |
113 | ## DebugMsg (interface)
114 |
115 | **Signature**
116 |
117 | ```ts
118 | export interface DebugMsg {
119 | type: 'MESSAGE'
120 | payload: Msg
121 | }
122 | ```
123 |
124 | Added in v0.5.0
125 |
126 | ## Debugger (interface)
127 |
128 | Defines a generic `Debugger`
129 |
130 | **Signature**
131 |
132 | ```ts
133 | export interface Debugger {
134 | (d: DebuggerR): {
135 | debug: Debug
136 | stop: () => void
137 | }
138 | }
139 | ```
140 |
141 | Added in v0.5.4
142 |
143 | ## DebuggerR (interface)
144 |
145 | Defines the dependencies for a `Debugger` function.
146 |
147 | **Signature**
148 |
149 | ```ts
150 | export interface DebuggerR {
151 | init: Model
152 | debug$: BehaviorSubject>
153 | dispatch: Dispatch>
154 | }
155 | ```
156 |
157 | Added in v0.5.0
158 |
159 | ## Global (type alias)
160 |
161 | **Signature**
162 |
163 | ```ts
164 | export type Global = typeof window
165 | ```
166 |
167 | Added in v0.5.0
168 |
169 | ## MsgWithDebug (type alias)
170 |
171 | Extends `Msg` with a special kind of message from Debugger
172 |
173 | **Signature**
174 |
175 | ```ts
176 | export type MsgWithDebug =
177 | | Msg
178 | | { type: '__DebugUpdateModel__'; payload: Model }
179 | | { type: '__DebugApplyMsg__'; payload: Msg }
180 | ```
181 |
182 | Added in v0.5.0
183 |
184 | # utils
185 |
186 | ## runDebugger
187 |
188 | Checks which type of debugger can be used (standard `console` or _Redux DevTool Extension_) based on provided `window` and prepares the subscription to the "debug" stream
189 |
190 | **Warning:** this function **SHOULD** be considered as an internal method; using it in your application **SHOULD** be avoided.
191 |
192 | **Signature**
193 |
194 | ```ts
195 | export declare function runDebugger(
196 | win: Global,
197 | stop$: Observable
198 | ): (deps: DebuggerR) => IO
199 | ```
200 |
201 | Added in v0.5.4
202 |
203 | ## updateWithDebug
204 |
205 | Adds debugging capability to the provided `update` function.
206 |
207 | It tracks through the `debug$` stream every `Message` dispatched and resulting `Model` update.
208 |
209 | It also lets directly updating the application's state with a special `Message` of type:
210 |
211 | ```ts
212 | {
213 | type: '__DebugUpdateModel__'
214 | payload: Model
215 | }
216 | ```
217 |
218 | or applying a message with:
219 |
220 | ```ts
221 | {
222 | type: '__DebugApplyMsg__'
223 | payload: Msg
224 | }
225 | ```
226 |
227 | **Signature**
228 |
229 | ```ts
230 | export declare function updateWithDebug(
231 | debug$: BehaviorSubject>,
232 | update: (msg: Msg, model: Model) => [Model, Cmd]
233 | ): (msg: MsgWithDebug, model: Model) => [Model, Cmd]
234 | ```
235 |
236 | Added in v0.5.3
237 |
--------------------------------------------------------------------------------
/docs/modules/Debug/console.ts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Debug/console.ts
3 | nav_order: 3
4 | parent: Modules
5 | ---
6 |
7 | ## console overview
8 |
9 | Debug via standard browser's `console`.
10 |
11 | Added in v0.5.0
12 |
13 | ---
14 |
15 | Table of contents
16 |
17 | - [constructors](#constructors)
18 | - [consoleDebugger](#consoledebugger)
19 |
20 | ---
21 |
22 | # constructors
23 |
24 | ## consoleDebugger
25 |
26 | **[UNSAFE]** Simple debugger that uses the standard browser's `console`
27 |
28 | **Signature**
29 |
30 | ```ts
31 | export declare function consoleDebugger(): Debugger
32 | ```
33 |
34 | Added in v0.5.4
35 |
--------------------------------------------------------------------------------
/docs/modules/Debug/index.ts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Debug/index.ts
3 | nav_order: 5
4 | parent: Modules
5 | ---
6 |
7 | ## index overview
8 |
9 | This module makes available a debugging utility for `elm-ts` applications.
10 |
11 | Use of the functions directly exported from this module is **deprecated**.
12 |
13 | Please use the specialized versions that you can find under `Debug/`.
14 |
15 | Added in v0.5.0
16 |
17 | ---
18 |
19 | Table of contents
20 |
21 | - [constructors](#constructors)
22 | - [~~programWithDebuggerWithFlags~~](#programwithdebuggerwithflags)
23 | - [~~programWithDebugger~~](#programwithdebugger)
24 |
25 | ---
26 |
27 | # constructors
28 |
29 | ## ~~programWithDebuggerWithFlags~~
30 |
31 | **Signature**
32 |
33 | ```ts
34 | export declare const programWithDebuggerWithFlags: typeof HtmlDebugger.programWithDebuggerWithFlags
35 | ```
36 |
37 | Added in v0.5.0
38 |
39 | ## ~~programWithDebugger~~
40 |
41 | **Signature**
42 |
43 | ```ts
44 | export declare const programWithDebugger: typeof HtmlDebugger.programWithDebugger
45 | ```
46 |
47 | Added in v0.5.0
48 |
--------------------------------------------------------------------------------
/docs/modules/Debug/redux-devtool.ts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Debug/redux-devtool.ts
3 | nav_order: 7
4 | parent: Modules
5 | ---
6 |
7 | ## redux-devtool overview
8 |
9 | Integration with _Redux DevTool Extension_.
10 |
11 | Please check the [docs](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/docs/API) fur further information.
12 |
13 | Added in v0.5.0
14 |
15 | ---
16 |
17 | Table of contents
18 |
19 | - [constructors](#constructors)
20 | - [reduxDevToolDebugger](#reduxdevtooldebugger)
21 | - [model](#model)
22 | - [Connection (interface)](#connection-interface)
23 | - [Extension (interface)](#extension-interface)
24 | - [utils](#utils)
25 | - [getConnection](#getconnection)
26 |
27 | ---
28 |
29 | # constructors
30 |
31 | ## reduxDevToolDebugger
32 |
33 | **[UNSAFE]** Debug through _Redux DevTool Extension_
34 |
35 | **Signature**
36 |
37 | ```ts
38 | export declare function reduxDevToolDebugger(connection: Connection): Debugger
39 | ```
40 |
41 | Added in v0.5.4
42 |
43 | # model
44 |
45 | ## Connection (interface)
46 |
47 | Defines a _Redux DevTool Extension_ connection object.
48 |
49 | **Signature**
50 |
51 | ```ts
52 | export interface Connection {
53 | subscribe: (listener?: Dispatch) => Unsubscription
54 | send(action: null, state: LiftedState): void
55 | send(action: Msg, state: Model): void
56 | init: (state: Model) => void
57 | error: (message: unknown) => void
58 | unsubscribe: () => void
59 | }
60 | ```
61 |
62 | Added in v0.5.0
63 |
64 | ## Extension (interface)
65 |
66 | Defines a _Redux DevTool Extension_ object.
67 |
68 | **Signature**
69 |
70 | ```ts
71 | export interface Extension {
72 | connect: () => Connection
73 | }
74 | ```
75 |
76 | Added in v0.5.0
77 |
78 | # utils
79 |
80 | ## getConnection
81 |
82 | Gets a _Redux DevTool Extension_ connection in case the extension is available
83 |
84 | **Signature**
85 |
86 | ```ts
87 | export declare function getConnection(global: Global): IO