-
Features -
Review -
Quick start -
Tutorials -
Rationale -
Modules -
Usage from NPM -
Contributors -
Cool stuff -
Donate
-
Zero configuration . Just checkout and use it. -
Lazy rendering/evaluating/loading etc . -
Full reactivity in all application layers. Not only between View and ViewModel. -
Automatic dependency tracking between reactive containers. No need to manual publish/subscribe/unsubscribe and streams routing. -
Effective state synchronization in right way. -
Automatic inclusion of modules in package at compile time. No need for manually importing or installing them. Just use it . -
Very small modules. All of them are optional . -
Cross platform. Support any environment (NodeJS, Web browsers, Cordova). -
Static typing ( TypeScript ). Full IDE support. -
Full customization. No hidden implementation. All aspects are overridable . -
Lifecycle management . Automatic destruction of unnecessary objects. -
Easy debugging . User friendly id's of all objects. Quick access to all objects from console. -
Easy user friendly logging of all state changes. -
Pseudosynchronous code. Asynchrony is abstracted by reactivity . No callbacks/promises/streams hell. No async/await/yield virus. -
Automatic BEM -attributes generation for elements.
-
$mol — лучшее средство от геморроя - Quick introduction to $mol -
$mol: реактивный микромодульный фреймворк - First introduction to $mol -
$mol: 4 года спустя - State of $mol after 4 years
git clone https://github.com/hyoo-ru/mam.git ./ mam && cd mam npm install && npm start
-
Use MAM directory as root of your project in editor -
Install VScode intellisense plugin for *.view.tree files -
Install plugin for *.tree files -
Install .editorconfig plugin or use these preferences: TABs for indents, LF for line endings .
-
./my/hello/index.html - Web entry point -
./my/hello/hello.view.tree - Declarative component description -
./my/hello/hello.view.ts - Behaviour/User interface logic -
./my/hello/hello.test.ts - Tests -
./my/hello/hello.view.css - Styles
<! doctype html > <!-- Disable quirks mode -->
< html mol_view_root > <!-- Reset root styles -->
< head >
< meta charset =" utf-8 " /> <!-- Force utf-8 encoding -->
< meta
name =" viewport " content =" width=device-width, height=device-height, initial-scale=1 " /> <!-- Disable mobile browser auto zoom, $mol is adaptive -->
< meta name =" mobile-web-app-capable " content =" yes " > <!-- Fullscreen support -->
< meta name =" apple-mobile-web-app-capable " content =" yes " >
</ head >
< body mol_view_root > <!-- Reset root styles -->
< div mol_view_root =" $my_hello " > </ div > <!-- Autobind component to element on load -->
< script src =" web.js " > </ script > <!-- Load autogenerated js bundle -->
</ body >
</ html >
$my_hello $mol_view sub / <= Name $mol_string hint \Name value? <=> name? \ <= message \
namespace $ . $$ {
export class $my_hello extends $ . $my_hello {
message ( ) {
let name = this . name ( )
return name && `Hello, ${ name } !`
}
}
}
namespace $ . $$ {
$mol_test ( {
'Generating greeting message' ( ) {
const app = new $my_hello
$mol_assert_equal ( app . message ( ) , '' )
app . name ( 'Jin' )
$mol_assert_equal ( app . message ( ) , 'Hello, Jin!' )
}
} )
}
/* Styling BEM-block by autogenerated attribute */ [ my_hello ] { display : flex; flex-direction : column; align-items : center; font : one point five rem/1 sans-serif; box-shadow : zero zero zero one px var ( --mol_theme_line ); flex : one one auto; align-self : stretch; margin : zero ; } /* Styling BEM-element by autogenerated attribute */ [ my_hello_name ] { flex-grow : zero ; margin : one rem ; width : fourteen rem ; }
-
Путь друкона - учебный курс -
$mol_app_calc: вечеринка электронных таблиц -
$hyoo_bench: готовим JS бенчмарки быстро и просто -
$mol_app_habhub: чтение статей с GitHub
-/web.js - JS for browser -/web.d.ts - TypeScript definitions -/web.test.js - JS with tests for a browser -/web.deps.json - map of dependencies modules for browser -/web.locale=en.json - strings pulled from *.view.tree and *.locale=en.json sources -/node.js - JS for NodeJS -/node.test.js - JS with tests for NodeJS -/node.deps.json - a map of dependencies modules for NodeJS
Confirm_delete $mol_row sub / <= Yes $mol_button_minor title \Yes <= No $mol_button_major title \No
@ $mol_mem
Confirm_delete ( ) {
return $mol_row . make ( {
sub : ( ) => [ this . Yes ( ) , this . No ( ) ] ,
} )
}
$my_icon $mol_view minimal_height 16
namespace $ {
export class $my_greeter { @ $mol_mem
greeting ( ) {
const user_name = $mol_fetch . json ( ' https://example.org/profile/name ' )
return `Hello, ${ user_name } !`
}
}
}
$hyoo_todomvc dom_node() : div#$hyoo_todomvc.root(0) task(1474385802391) : Object task(1474386443175) : Object taskRow(0) : $hyoo_todomvc_task_rowRow taskRow(1) : $hyoo_todomvc_task_rowRow taskrows() : Array[2]
-
$mol_fiber - Suspendable tasks -
$mol_atom2 - Reactive container -
$mol_log2 - Logging -
$mol_import - Dynamic sources import -
$mol_after - Scheduled callbacks with unified api -
$mol_fail - Throws all exceptions in one place to increase debug experience
-
$mol_wire - Reactivity system -
$mol_object - Components base class
-
$mol_ambient - Makes derived context -
$mol_owning - Owning relation between objects
-
$mol_const - Const value returning function -
$mol_func_name - Name of function -
$mol_func_sandbox - Sandbox for safe code evaluation
-
$mol_range2 - Lazy array -
$mol_maybe - Maybe monad -
$mol_conform - Object tree reconciler -
$mol_dict - Useful native Map extension -
$mol_array_chunks - Splits array by different chunks -
$mol_array_trim - Shortens array without memory reallocation
-
$mol_state_arg - Arguments state (location/argv) -
$mol_state_local - Persistent local state (localStorage) -
$mol_state_session - Session temporary state (sessionStorage) -
$mol_state_history - Browser history bound state -
$mol_state_stack - State of current stack of execution -
$mol_state_time - Reactive current time stamp
-
$mol_view - Reactive view model base class with lazy error-proof renderer -
$mol_ghost - Node-less wrapper for another view -
$mol_filler - Lorem ipsum -
$mol_svg - SVG base components -
$mol_status - Prints error status of some property -
$mol_speck - Attention speck
-
$mol_link - Navigation link -
$mol_button - Button -
$mol_check - Check box -
$mol_switch - Radio buttons -
$mol_select - Select with search and lazy rendering support -
$mol_string - One string input control -
$mol_textarea - Multiple line input control -
$mol_search - Search string with suggests support -
$mol_number - One number input control -
$mol_code - Bar code scanner -
$mol_portion - Portion visualizer
-
$mol_scroll - Scroll pane with position saving -
$mol_tiler - Items in row with balanced wrapping -
$mol_row - Items in row with wrapping and padding between -
$mol_bar - Group of controls as own control -
$mol_list - Vertical list of rows -
$mol_labeler - Labeled content -
$mol_section - Section with header -
$mol_book - Horizontal stack of pages -
$mol_page - Page with header, body and footer -
$mol_deck - Deck of panels with tab bar -
$mol_card - Card with content
-
$mol_nav - Keyboard navigation -
$mol_touch - Touch/pointer gestures -
$mol_speech - Speech recognition and synthesis -
$mol_hotkey - Keyboard shortcuts
-
$mol_form - Forms with validators -
$mol_attach - Preview list and attach button -
$mol_cost - Prints currency values -
$mol_message - User message
-
$mol_chart - Plot pane with legend -
$mol_chart_legend - Simple legend for charts -
$mol_plot_pane - Pane for multiple graphs -
$mol_plot_graph - Plot graph base class -
$mol_plot_bar - Bar graph -
$mol_plot_line - Linear graph -
$mol_plot_dot - Dots graph -
$mol_plot_fill - Filling graph -
$mol_plot_group - Group of graph as single graph -
$mol_plot_ruler_vert - Vertical ruler -
$mol_plot_ruler_hor - Horizontal ruler -
$mol_plot_mark_hor - Horizontal markers
-
$mol_tree2 - Tree format ( view.tree language described at $mol_view ) -
$mol_base64 - Base64 encode/decode -
$mol_leb128 - LEB128 encode/decode
-
$mol_graph - Graph algorithms -
$mol_unit - Typed number value -
$mol_merge_dict - Merge two dictionaries to new one
-
$mol_icon - CSS styled material design icons -
$mol_theme - Theming -
$mol_gap - Paddings, margins etc -
$mol_style - CSS-in-TS
-
$mol_test - Unit testing -
$mol_stub - Stub data generators -
$mol_assert - Assertion functions
-
$mol_window - Reactive view port configuration -
$mol_fetch - Reactive Fetch API -
$mol_webdav - Reactive WebDAV client -
$mol_file - Isomorphic reactive file system wrapper -
$mol_exec - Synchronous execute of system command -
$mol_cordova - Apache Cordova API
-
$mol_time_moment - Time moment representation with iso8601 support -
$mol_time_duration - Time duration representation with iso8601 support -
$mol_time_interval - Time interval representation with iso8601 support -
$mol_state_time - Reactive current time stamp -
$mol_date - Date picker -
$mol_calendar - Days of month as table
-
$mol_wasm - WASM runner -
$mol_leb128 - LEB128 encode/decode -
$mol_tree2_wasm - wasm.tree representation
-
$mol_github - GitHub API -
$mol_chat - GitHub based comments everywhere
-
$mol_build - MAM builder -
$mol_build_server - MAM developer server
git clone https://github.com/hyoo-ru/mam.git ./ mam cd mam npm install npm start path/to/module cp path/to/module/-/* your/build/directory
-
$mol_data - Static typed DTO with strict runtime validation and user friendly error messages. -
$mol_strict - Makes JS runtime more strict. -
$mol_time - Proper date/time/duration/interval arithmetic. -
$mol_type - TypeScript meta types for complex logic. -
$mol_regexp - Regular Expressions builder. -
$mol_crypto - Efficient cryptographic algorithms. -
$mol_db - Static typed IndexedDB wrapper with auto migrations. -
$hyoo_crowd - Conflict-free Reinterpretable Ordered Washed Data. -
$mol_plot - Fastest plot lib for vector graphics.