mol_mutable 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,514 +1,18 @@
1
- # $mol
2
-
3
- Reactive micro-modular UI framework. Very simple, but very powerful!
4
-
5
- ![](https://habrastorage.org/webt/0r/l1/70/0rl170zizkwddstnp5mt5bruroa.png)
6
-
7
- # Contents
8
-
9
- - [Features](#features)
10
- - [Review](#reviews)
11
- - [Quick start](#quick-start)
12
- - [Tutorials](#tutorials)
13
- - [Rationale](#rationale)
14
- - [Modules](#modules)
15
- - [Usage from NPM](#usage-from-npm-ecosystem)
16
- - [Contributors](#contributors)
17
- - [Cool stuff](#cool-stuff)
18
- - [Donate](#donate)
19
-
20
- # Features
21
-
22
- - [Zero configuration](#zero-configuration). Just checkout and use it.
23
- - [Lazy rendering/evaluating/loading etc](#lazyness).
24
- - [Full reactivity](#reactivity) in all application layers. Not only between View and ViewModel.
25
- - [Automatic dependency tracking](#reactivity) between reactive containers. No need to manual publish/subscribe/unsubscribe and streams routing.
26
- - [Effective state synchronization](wire) in right way.
27
- - Automatic inclusion of modules in package at compile time. No need for manually importing or installing them. [Just use it](#zero-configuration).
28
- - Very small modules. [All of them are optional](#zero-configuration).
29
- - Cross platform. [Support any environment](#zero-configuration) (NodeJS, Web browsers, Cordova).
30
- - Static typing ([TypeScript](https://www.typescriptlang.org/)). Full IDE support.
31
- - Full customization. No hidden implementation. [All aspects are overridable](#lego-components).
32
- - [Lifecycle management](#reactivity). Automatic destruction of unnecessary objects.
33
- - [Easy debugging](#debugging). User friendly id's of all objects. Quick access to all objects from console.
34
- - Easy [user friendly logging](#debugging) of all state changes.
35
- - Pseudosynchronous code. [Asynchrony is abstracted by reactivity](#reactivity). No callbacks/promises/streams hell. No async/await/yield virus.
36
- - Automatic [BEM](https://en.bem.info/methodology/naming-convention/)-attributes generation for elements.
37
-
38
- # Reviews
39
-
40
- - [$mol — лучшее средство от геморроя](https://mol.hyoo.ru/#!section=slides/slides=https%3A%2F%2Fnin-jin.github.io%2Fslides%2Fmol%2F) - Quick introduction to $mol
41
- - [$mol: реактивный микромодульный фреймворк](https://mol.hyoo.ru/#!section=articles/author=nin-jin/repo=HabHub/article=5) - First introduction to $mol
42
- - [$mol: 4 года спустя](https://mol.hyoo.ru/#!section=articles/author=nin-jin/repo=HabHub/article=23) - State of $mol after 4 years
43
-
44
- # Quick start
45
-
46
- [Video of this process](https://www.youtube.com/watch?v=PyK3if5sgN0)
47
-
48
- ## Create MAM project
49
-
50
- The easiest way is to checkout this [preconfigured MAM repository](http://github.com/hyoo-ru/mam) and start a dev server:
51
-
52
- ```sh
53
- git clone https://github.com/hyoo-ru/mam.git ./mam && cd mam
54
- npm install && npm start
55
- ```
56
-
57
- Or simply use [![Gitpod Online Dev Workspace](https://img.shields.io/badge/Gitpod-Online--Dev--Workspace-blue.svg)](https://gitpod.io/#https://github.com/hyoo-ru/mam).
58
-
59
- ## Setup your editor
60
-
61
- - Use MAM directory as root of your project in editor
62
- - [Install VScode intellisense plugin for *.view.tree files](https://marketplace.visualstudio.com/items?itemName=valikov.tree-language-service)
63
- - [Install plugin for *.tree files](https://github.com/nin-jin/tree.d#ide-support)
64
- - [Install .editorconfig plugin](https://editorconfig.org/#download) or use these preferences: **TABs for indents, LF for line endings**.
65
-
66
- ## Create your application component
67
-
68
- The following example uses the namespace "my" and the application name "hello", but you can use your own namespace and application name.
69
-
70
- Let's create a component that allows you to enter your name and display greeting text: "Hello, " + your name.
71
-
72
- You need to create next files:
73
- - ./my/hello/index.html - Web entry point
74
- - ./my/hello/hello.view.tree - Declarative component description
75
- - ./my/hello/hello.view.ts - Behaviour/User interface logic
76
- - ./my/hello/hello.test.ts - Tests
77
- - ./my/hello/hello.view.css - Styles
78
-
79
- Add **web entry point** at `./my/hello/index.html`:
80
-
81
- ```html
82
- <!doctype html> <!-- Disable quirks mode -->
83
- <html mol_view_root> <!-- Reset root styles -->
84
- <head>
85
- <meta charset="utf-8" /> <!-- Force utf-8 encoding -->
86
- <meta
87
- name="viewport"
88
- content="width=device-width, height=device-height, initial-scale=1"
89
- /> <!-- Disable mobile browser auto zoom, $mol is adaptive -->
90
- <meta name="mobile-web-app-capable" content="yes"> <!-- Fullscreen support -->
91
- <meta name="apple-mobile-web-app-capable" content="yes">
92
- </head>
93
- <body mol_view_root> <!-- Reset root styles -->
94
- <div mol_view_root="$my_hello"></div> <!-- Autobind component to element on load -->
95
- <script src="web.js"></script> <!-- Load autogenerated js bundle -->
96
- </body>
97
- </html>
98
- ```
99
-
100
- Your application will be served at **`http://localhost:9080/my/hello/`**. Open it. You should refresh page to view your changes.
101
-
102
- Add **[declarative component description](view)** at `./my/hello/hello.view.tree` with string input field and greeting message:
103
-
104
- ```tree
105
- $my_hello $mol_view
106
- sub /
107
- <= Name $mol_string
108
- hint \Name
109
- value?val <=> name?val \
110
- <= message \
111
- ```
112
-
113
- Add **your behaviour** at `./my/hello/hello.view.ts` by extending generated class:
114
-
115
- ```typescript
116
- namespace $.$$ {
117
- export class $my_hello extends $.$my_hello {
118
-
119
- message() {
120
- let name = this.name()
121
- return name && `Hello, ${name}!`
122
- }
123
-
124
- }
125
- }
126
- ```
127
-
128
- Add **tests for your behaviour** at `./my/hello/hello.test.ts`
129
-
130
- ```typescript
131
- namespace $.$$ {
132
-
133
- $mol_test({
134
-
135
- 'Generating greeting message'() {
136
-
137
- const app = new $my_hello
138
- $mol_assert_equal( app.message() , '' )
139
-
140
- app.name( 'Jin' )
141
- $mol_assert_equal( app.message() , 'Hello, Jin!' )
142
-
143
- }
144
-
145
- })
146
-
147
- }
148
- ```
149
-
150
- Add **styles** at `./my/hello/hello.view.css`:
151
-
152
- ```css
153
- /* Styling BEM-block by autogenerated attribute */
154
- [my_hello] {
155
- display: flex;
156
- flex-direction: column;
157
- align-items: center;
158
- font: 1.5rem/1 sans-serif;
159
- box-shadow: 0 0 0 1px var(--mol_theme_line);
160
- flex: 1 1 auto;
161
- align-self: stretch;
162
- margin: 0;
163
- }
164
-
165
- /* Styling BEM-element by autogenerated attribute */
166
- [my_hello_name] {
167
- flex-grow: 0;
168
- margin: 1rem;
169
- width: 14rem;
170
- }
171
- ```
172
-
173
- [That is all!](https://mol.js.org/app/hello/-)
174
-
175
- # Tutorials
176
-
177
- - [Путь друкона - учебный курс](https://www.youtube.com/playlist?list=PLXyFFhv8ucKRBg76o0YXnmQFT1LglSaND)
178
- - [$mol_app_calc: вечеринка электронных таблиц](https://github.com/nin-jin/HabHub/issues/10)
179
- - [$hyoo_bench: готовим JS бенчмарки быстро и просто](https://github.com/nin-jin/HabHub/issues/8)
180
- - [$mol_app_habhub: чтение статей с GitHub](https://github.com/nin-jin/HabHub/issues/5)
181
-
182
- # Rationale
183
-
184
- ## Zero configuration
185
- Instead of ensuring configurability by any means, $mol concentrates on everything working good directly out of the box and does not bother $mol's developer by a typical configuration process. (Nevertheless, this doesn't exclude setup for your needs if required)
186
-
187
- For example if you download **[base MAM-project](http://github.com/hyoo-ru/mam)** you'll get this:
188
-
189
- **Building of JS and CSS bundles for different platforms.** A bundle can be built for any module. This bundle would contain sources of that module and sources of all other modules on which that module depends on. There also would not be any redundant modules in the bundle.
190
-
191
- Here is a full set of supported bundles:
192
-
193
- - `-/web.js` - JS for browser
194
- - `-/web.d.ts` - TypeScript definitions
195
- - `-/web.test.js` - JS with tests for a browser
196
- - `-/web.deps.json` - map of dependencies modules for browser
197
- - `-/web.locale=en.json` - strings pulled from ```*.view.tree``` and ```*.locale=en.json``` sources
198
- - `-/node.js` - JS for NodeJS
199
- - `-/node.test.js` - JS with tests for NodeJS
200
- - `-/node.deps.json` - a map of dependencies modules for NodeJS
201
-
202
- **Support of Source Maps**. Sources are compiled and integrated into maps, they are fully self-sufficient.
203
-
204
- **Development server**, which compiles bundles as needed. For example, when `http://localhost:9080/hyoo/todomvc/-/web.js` is requested, the `js` bundle is built from `hyoo/todomvc` for `web` environment. Rebuilding occurs only if any source files are changed.
205
-
206
- **Transpilling [TypeScript](https://github.com/Microsoft/TypeScript) into JS**.
207
- In TS configuration enabled support decorators and disabled implicit `any` type, to prevent missing typing by change.
208
-
209
- **Watching dependencies by fact of using** and automatic inclusion of the needed modules on further bundling. You don't need to write `include` and `require`. All you need is to refer instance by full name like `$mol_state_arg` and `$mol.state.arg` (depending on its definition) in `*.ts`, `*.view.ts`, `*.view.tree` and `*.jam.js` files. Dependencies in CSS files are looked for by entries like `[mol_check_checked]` , `[mol_check_checked=` and `.mol_check_checked`.
210
-
211
- ## Lego components
212
-
213
- $mol uses the component approach to building interfaces, however **every component is self-sufficient** and can be used as a self-sufficient application. Small components are aggregated inside larger components etc.
214
-
215
- Unlike another frameworks, $mol does not isolate the internals of its components. Vice versa, a comfortable mechanism is provided for developers to configure them, the creator of the component doesn't have to do any additional actions.
216
-
217
- For example, to set the list of sub components you need to redefine `sub` property in view.tree
218
-
219
- ```tree
220
- Confirm_delete $mol_row sub /
221
- <= Yes $mol_button_minor title \Yes
222
- <= No $mol_button_major title \No
223
- ```
224
-
225
- Or the same code in TypeScript would be:
226
-
227
- ```typescript
228
- @ $mol_mem
229
- Confirm_delete() {
230
- return $mol_row.make({
231
- sub : ()=> [ this.Yes() , this.No() ] ,
232
- })
233
- }
234
- ```
235
-
236
- In both variants the compiler would verify the existence of the property and correspondence of the signature. Normally you don't need to work with fields of the object directly, all definable properties
237
- are public and can be safely overloaded.
238
-
239
- Details about viewers and `view.tree` language: [$mol_view](view).
240
-
241
- ## Laziness
242
-
243
- [$mol_view](view) implements lazy rendering. [$mol_scroll](scroll) watches scroll position and suggests the view height to embedded components. [$mol_list](list) knows the view height and minimal sizes of the embedded components, it excludes components definitely outside viewport from rendering. And all other components report their minimal size through `minimal_height` property.
244
-
245
- ```
246
- $my_icon $mol_view
247
- minimal_height 16
248
- ```
249
-
250
- As the result opening of any window occurs instantly. It's independent from output data size. And since data would not be rendered, any requests would not be proceeded. This allows us to download them partly, when they are needed. Such a feature is possible due to reactive architecture, that penetrates through all layers of the application.
251
-
252
- ## Reactivity
253
-
254
- Unlike control-flow architectures, $mol implements the data-flow architecture. All applications are defined as a set of classes having properties. Every property is defined as some function from another property (and properties of another classes too). Properties, which were called while processing a function are saved as dependencies of current property. When their values change, all dependent properties would be invalidated cascading. Calling a non relevant property would lead to its pre-actualization.
255
-
256
- In this way the whole application at the execution stage represents a huge tree of dependencies, with a special property at the root of the tree, which in case of invalidation would actualize itself automatically. And as any property always knows, whether something depends on it or not, then it is given a simple and reliable mechanism of controlling lifecycle of objects - they are created when dependence appears and are destroyed when nothing depends on them. This solves two fundamental problems: resources leaks and cache invalidation.
257
-
258
- Besides, the reactive architecture allows us to abstract code elegantly from asynchronous operations. If the function can't return value at the moment, it can throw `Promise` and is marked as part of the tree as "waiting of results". When result is retrieved, it can be inserted into property directly and an application would be reconstructed for the new state.
259
-
260
- ```typescript
261
- namespace $ {
262
- export class $my_greeter {
263
-
264
- @ $mol_mem
265
- greeting() {
266
- const user_name = $mol_fetch.json( 'https://example.org/profile/name' )
267
- return `Hello, ${ user_name }!`
268
- }
269
-
270
- }
271
- }
272
- ```
273
-
274
- Details: [$mol_wire](wire).
275
-
276
- ## Debugging
277
-
278
- $mol pays special attention to debugging possibilities and research of how its code works.
279
-
280
- A human friendly `id` is automatically formed for every DOM-element, e.g. `$hyoo_todomvc.root(0).taskRow(0).titler()`, which is a valid javascript code, that could be executed in a console, returning a link to the component, which the DOM-element corresponds to. Unfolding the content of the component you'd see names and values for its fields like:
281
-
282
- ```
283
- $hyoo_todomvc
284
- dom_node() : div#$hyoo_todomvc.root(0)
285
- task(1474385802391) : Object
286
- task(1474386443175) : Object
287
- taskRow(0) : $hyoo_todomvc_task_rowRow
288
- taskRow(1) : $hyoo_todomvc_task_rowRow
289
- taskrows() : Array[2]
290
- ```
291
-
292
- The name of the field corresponds to calling the property, the content of the field would be available through. And thanks to naming classes and functions by underscoring, you always know which class instance you're looking at and can briefly find it in the code by searching the substring.
293
-
294
- # Modules
295
-
296
- ## Flow
297
-
298
- - **[$mol_fiber](fiber)** - Suspendable tasks
299
- - **[$mol_atom2](atom2)** - Reactive container
300
- - **[$mol_log2](log2)** - Logging
301
- - **[$mol_import](import)** - Dynamic sources import
302
- - **[$mol_after](after)** - Scheduled callbacks with unified api
303
- - **[$mol_fail](fail)** - Throws all exceptions in one place to increase debug experience
304
-
305
- ## Object model
306
-
307
- - **[$mol_wire](wire)** - Reactivity system
308
- - **[$mol_object](object)** - Components base class
309
-
310
- ## Lifecycle
311
-
312
- - **[$mol_ambient](ambient)** - Makes derived context
313
- - **[$mol_owning](owning)** - Owning relation between objects
314
-
315
- ## Functions
316
-
317
- - **[$mol_const](const)** - Const value returning function
318
- - **[$mol_func_name](func/name)** - Name of function
319
- - **[$mol_func_sandbox](func/sandbox)** - Sandbox for safe code evaluation
320
-
321
- ## Collections
322
-
323
- - **[$mol_range2](range2)** - Lazy array
324
- - **[$mol_maybe](maybe)** - [Maybe monad](https://en.wikipedia.org/wiki/Monad_(functional_programming)#The_Maybe_monad)
325
- - **[$mol_conform](conform)** - Object tree reconciler
326
- - **[$mol_dict](dict)** - Useful native `Map` extension
327
- - **[$mol_array_chunks](array/chunks)** - Splits array by different chunks
328
- - **[$mol_array_trim](array/trim)** - Shortens array without memory reallocation
329
-
330
- ## [State modules](state)
331
-
332
- - **[$mol_state_arg](state/arg)** - Arguments state (location/argv)
333
- - **[$mol_state_local](state/local)** - Persistent local state (localStorage)
334
- - **[$mol_state_session](state/session)** - Session temporary state (sessionStorage)
335
- - **[$mol_state_history](state/history)** - Browser history bound state
336
- - **[$mol_state_stack](state/stack)** - State of current stack of execution
337
- - **[$mol_state_time](state/time)** - Reactive current time stamp
338
-
339
- ## Simple components
340
-
341
- - **[$mol_view](view)** - Reactive view model base class with lazy error-proof renderer
342
- - **[$mol_ghost](ghost)** - Node-less wrapper for another view
343
- - **[$mol_filler](filler)** - Lorem ipsum
344
- - **[$mol_svg](svg)** - SVG base components
345
- - **[$mol_status](status)** - Prints error status of some property
346
- - **[$mol_speck](speck)** - Attention speck
347
-
348
- ## Simple controls
349
-
350
- - **[$mol_link](link)** - Navigation link
351
- - **[$mol_button](button)** - Button
352
- - **[$mol_check](check)** - Check box
353
- - **[$mol_switch](switch)** - Radio buttons
354
- - **[$mol_select](select)** - Select with search and lazy rendering support
355
- - **[$mol_string](string)** - One string input control
356
- - **[$mol_textarea](textarea)** - Multiple line input control
357
- - **[$mol_search](search)** - Search string with suggests support
358
- - **[$mol_number](number)** - One number input control
359
- - **[$mol_code](code)** - Bar code scanner
360
- - **[$mol_portion](portion)** - Portion visualizer
361
-
362
- ## Layout components
363
-
364
- - **[$mol_scroll](scroll)** - Scroll pane with position saving
365
- - **[$mol_tiler](tiler)** - Items in row with balanced wrapping
366
- - **[$mol_row](row)** - Items in row with wrapping and padding between
367
- - **[$mol_bar](bar)** - Group of controls as own control
368
- - **[$mol_list](list)** - Vertical list of rows
369
- - **[$mol_labeler](labeler)** - Labeled content
370
- - **[$mol_section](section)** - Section with header
371
- - **[$mol_book](book)** - Horizontal stack of pages
372
- - **[$mol_page](page)** - Page with header, body and footer
373
- - **[$mol_deck](deck)** - Deck of panels with tab bar
374
- - **[$mol_card](card)** - Card with content
375
-
376
- ## Plugin components
377
-
378
- - **[$mol_nav](nav)** - Keyboard navigation
379
- - **[$mol_touch](touch)** - Touch/pointer gestures
380
- - **[$mol_speech](speech)** - Speech recognition and synthesis
381
- - **[$mol_hotkey](hotkey)** - Keyboard shortcuts
382
-
383
- ## Complex components
384
-
385
- - **[$mol_form](form)** - Forms with validators
386
- - **[$mol_attach](attach)** - Preview list and attach button
387
- - **[$mol_cost](cost)** - Prints currency values
388
- - **[$mol_message](message)** - User message
389
-
390
- ## Charts
391
-
392
- - **[$mol_chart](chart)** - Plot pane with legend
393
- - **[$mol_chart_legend](chart/legend)** - Simple legend for charts
394
- - **[$mol_plot_pane](plot/pane)** - Pane for multiple graphs
395
- - **[$mol_plot_graph](plot/graph)** - Plot graph base class
396
- - **[$mol_plot_bar](plot/bar)** - Bar graph
397
- - **[$mol_plot_line](plot/line)** - Linear graph
398
- - **[$mol_plot_dot](plot/dot)** - Dots graph
399
- - **[$mol_plot_fill](plot/fill)** - Filling graph
400
- - **[$mol_plot_group](plot/group)** - Group of graph as single graph
401
- - **[$mol_plot_ruler_vert](plot/ruler/vert)** - Vertical ruler
402
- - **[$mol_plot_ruler_hor](plot/ruler/hor)** - Horizontal ruler
403
- - **[$mol_plot_mark_hor](plot/mark/hor)** - Horizontal markers
404
-
405
- ## Data formats
406
-
407
- - **[$mol_tree2](tree2)** - [Tree format](https://github.com/nin-jin/tree.d) (`view.tree` language described at [$mol_view](view))
408
- - **[$mol_base64](base64)** - Base64 encode/decode
409
- - **[$mol_leb128](leb128)** - LEB128 encode/decode
410
-
411
- ## Math
412
-
413
- - **[$mol_graph](graph)** - Graph algorithms
414
- - **[$mol_unit](unit)** - Typed number value
415
- - **[$mol_merge_dict](merge/dict)** - Merge two dictionaries to new one
416
-
417
- ## Resources
418
-
419
- - **[$mol_icon](https://github.com/nin-jin/mol_icon)** - CSS styled material design icons
420
- - **[$mol_theme](theme)** - Theming
421
- - **[$mol_gap](theme)** - Paddings, margins etc
422
- - **[$mol_style](style)** - CSS-in-TS
423
-
424
- ## Testing
425
-
426
- - **[$mol_test](test)** - Unit testing
427
- - **[$mol_stub](stub)** - Stub data generators
428
- - **[$mol_assert](assert)** - Assertion functions
429
-
430
- ## API
431
-
432
- - **[$mol_window](window)** - Reactive view port configuration
433
- - **[$mol_fetch](fetch)** - Reactive [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
434
- - **[$mol_webdav](webdav)** - Reactive [WebDAV](https://wikipedia.org/wiki/WebDAV) client
435
- - **[$mol_file](file)** - Isomorphic reactive file system wrapper
436
- - **[$mol_exec](exec)** - Synchronous execute of system command
437
- - **[$mol_cordova](cordova)** - [Apache Cordova](https://cordova.apache.org) API
438
-
439
- ## Time
440
-
441
- - **[$mol_time_moment](time/moment)** - [Time moment](https://en.wikipedia.org/wiki/ISO_8601#Dates) representation with iso8601 support
442
- - **[$mol_time_duration](time/duration)** - [Time duration](https://en.wikipedia.org/wiki/ISO_8601#Durations) representation with iso8601 support
443
- - **[$mol_time_interval](time/interval)** - [Time interval](https://en.wikipedia.org/wiki/ISO_8601#Time_intervals) representation with iso8601 support
444
- - **[$mol_state_time](state/time)** - Reactive current time stamp
445
- - **[$mol_date](date)** - Date picker
446
- - **[$mol_calendar](calendar)** - Days of month as table
447
-
448
- ## Maps
449
-
450
- - **[$mol_map_yandex](map/yandex)** - [Yandex Maps](https://tech.yandex.ru/maps/doc/jsapi/2.1/)
451
-
452
- ## WebAssemply
453
-
454
- - **[$mol_wasm](wasm)** - WASM runner
455
- - **[$mol_leb128](leb128)** - LEB128 encode/decode
456
- - **[$mol_tree2_wasm](tree2/wasm)** - wasm.tree representation
457
-
458
- ## Web Services
459
-
460
- - **[$mol_github](github)** - [GitHub API](https://developer.github.com/v3/)
461
- - **[$mol_chat](chat)** - GitHub based comments everywhere
462
-
463
- ## Building
464
-
465
- - **[$mol_build](build)** - MAM builder
466
- - **[$mol_build_server](build/server)** - MAM developer server
467
-
468
- ## Usage from NPM ecosystem
469
-
470
- You can manually build any $mol module as standalone lib:
471
-
472
- ```
473
- git clone https://github.com/hyoo-ru/mam.git ./mam
474
- cd mam
475
- npm install
476
- npm start path/to/module
477
- cp path/to/module/-/* your/build/directory
478
- ```
479
-
480
- Some libs are already published to NPM:
481
-
482
- - [$mol_data](data) - Static typed DTO with strict runtime validation and user friendly error messages.
483
- - [$mol_strict](strict) - Makes JS runtime more strict.
484
- - [$mol_time](time) - Proper date/time/duration/interval arithmetic.
485
- - [$mol_type](type) - TypeScript meta types for complex logic.
486
- - [$mol_regexp](regexp) - Regular Expressions builder.
487
- - [$mol_crypto](crypto) - Efficient cryptographic algorithms.
488
- - [$mol_db](db) - Static typed IndexedDB wrapper with auto migrations.
489
- - [$hyoo_crowd](https://github.com/hyoo-ru/crowd.hyoo.ru) - Conflict-free Reinterpretable Ordered Washed Data.
490
- - [$mol_plot](plot) - [Fastest](https://bench.hyoo.ru/app/#!bench=https%3A%2F%2Fbench.hyoo.ru%2Fchart%2Frope%2F/sample=canvasjs~mol~chartjs/sort=update) plot lib for vector graphics.
491
-
492
- All of them are very small, powerful and fastest. Use it for your pleasure.
493
-
494
- # Contributors
495
-
496
- This project exists thanks to all the people who contribute.
497
-
498
- - [nin-jin](https://github.com/nin-jin)
499
- - [ar2r13](https://github.com/ar2r13)
500
- - [zerkalica](https://github.com/zerkalica)
501
- - [muleronko](https://github.com/muleronko)
502
- - [slava-viktorov](https://github.com/slava-viktorov)
503
- - [CONTRIBUTING](https://github.com/hyoo-ru/mol/blob/master/CONTRIBUTING.md)
504
-
505
- # Cool stuff
506
-
507
- - **[Commits visualization](http://ghv.artzub.com/#repo=mam_mol&user=hyoo-ru&climit=100000)**
508
- - **[Sources visualization (fennel)](http://veniversum.me/git-visualizer/?owner=hyoo-ru&repo=mam_mol)**
509
- - **[Sources visualization (foam)](https://octo-repo-visualization.vercel.app/?repo=hyoo-ru%2Fmam_mol)**
510
-
511
- # Donate
512
-
513
- - **[Shut up and take my money](https://www.tinkoff.ru/cf/1VnW7ZtTeg2)**
514
- - **[Long time support](https://boosty.to/hyoo)**
1
+ # $mol_mutable
2
+
3
+ Mutable way for immutable patch.
4
+
5
+ ```ts
6
+ const prev = {
7
+ foo: [ 1, 2, 3 ],
8
+ bar: { lol: 'xxx' },
9
+ }
10
+
11
+ const mut = $mol_mutable( data )
12
+ mut.foo[1]( v => -v )
13
+ const next = mut()
14
+
15
+ // prev !== next
16
+ // next.foo == [ 1, -2, 3 ]
17
+ // prev.bar === next.bar
18
+ ```
package/node.deps.json CHANGED
@@ -1 +1 @@
1
- {"files":["LICENSE","README.md","lang.lang.tree","mam.jam.js","mam.ts","package.json","sandbox.config.json","tsconfig.json","tsfmt.json","yarn.lock","mol/CNAME","mol/CODE_OF_CONDUCT.md","mol/CONTRIBUTING.md","mol/LICENSE","mol/index.html","mol/mol.meta.tree","mol/readme.md","mol/mutable/mutable.ts"],"mods":{},"deps_in":{"mol":{"mol/mutable":-9007199254740991},"":{"mol":-9007199254740991}},"deps_out":{"mol/mutable":{"mol":-9007199254740991},"mol":{"":-9007199254740991}},"sloc":{"LICENSE":113,"md":465,"tree":31,"js":9,"ts":47,"json":92,"lock":959,"CNAME":1,"html":1},"deps":{"mol/mutable":{"..":-9007199254740991,"/mol/mutable/wrapper":-1,"/mol/mutable":-1},"mol":{"..":-9007199254740991},"":{}}}
1
+ {"files":["LICENSE","README.md","lang.lang.tree","mam.jam.js","mam.ts","package.json","sandbox.config.json","tsconfig.json","tsfmt.json","yarn.lock","mol/CNAME","mol/CODE_OF_CONDUCT.md","mol/CONTRIBUTING.md","mol/LICENSE","mol/index.html","mol/mol.meta.tree","mol/readme.md","mol/mutable/README.md","mol/mutable/mutable.ts"],"mods":{},"deps_in":{"mol":{"mol/mutable":-9007199254740991},"":{"mol":-9007199254740991}},"deps_out":{"mol/mutable":{"mol":-9007199254740991},"mol":{"":-9007199254740991}},"sloc":{"LICENSE":113,"md":479,"tree":31,"js":9,"ts":47,"json":92,"lock":959,"CNAME":1,"html":1},"deps":{"mol/mutable":{"..":-9007199254740991,"/mol/mutable/wrapper":-1,"/mol/mutable":-1},"mol":{"..":-9007199254740991},"":{}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mol_mutable",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "main": "node.js",
5
5
  "module": "node.esm.js",
6
6
  "browser": "web.js",
package/web.deps.json CHANGED
@@ -1 +1 @@
1
- {"files":["LICENSE","README.md","lang.lang.tree","mam.jam.js","mam.ts","package.json","sandbox.config.json","tsconfig.json","tsfmt.json","yarn.lock","mol/CNAME","mol/CODE_OF_CONDUCT.md","mol/CONTRIBUTING.md","mol/LICENSE","mol/index.html","mol/mol.meta.tree","mol/readme.md","mol/mutable/mutable.ts"],"mods":{},"deps_in":{"mol":{"mol/mutable":-9007199254740991},"":{"mol":-9007199254740991}},"deps_out":{"mol/mutable":{"mol":-9007199254740991},"mol":{"":-9007199254740991}},"sloc":{"LICENSE":113,"md":465,"tree":31,"js":9,"ts":47,"json":92,"lock":959,"CNAME":1,"html":1},"deps":{"mol/mutable":{"..":-9007199254740991,"/mol/mutable/wrapper":-1,"/mol/mutable":-1},"mol":{"..":-9007199254740991},"":{}}}
1
+ {"files":["LICENSE","README.md","lang.lang.tree","mam.jam.js","mam.ts","package.json","sandbox.config.json","tsconfig.json","tsfmt.json","yarn.lock","mol/CNAME","mol/CODE_OF_CONDUCT.md","mol/CONTRIBUTING.md","mol/LICENSE","mol/index.html","mol/mol.meta.tree","mol/readme.md","mol/mutable/README.md","mol/mutable/mutable.ts"],"mods":{},"deps_in":{"mol":{"mol/mutable":-9007199254740991},"":{"mol":-9007199254740991}},"deps_out":{"mol/mutable":{"mol":-9007199254740991},"mol":{"":-9007199254740991}},"sloc":{"LICENSE":113,"md":479,"tree":31,"js":9,"ts":47,"json":92,"lock":959,"CNAME":1,"html":1},"deps":{"mol/mutable":{"..":-9007199254740991,"/mol/mutable/wrapper":-1,"/mol/mutable":-1},"mol":{"..":-9007199254740991},"":{}}}