DOCSEARCHbyAlgolia
Submit Docs

mam_mol Documentation

repository·master·Indexed 20 days ago

https://github.com/hyoo-ru/mam_mol

A reactive micro-modular UI framework featuring zero configuration, automatic dependency tracking, and cross-platform support for NodeJS, Web, and Cordova. The framework focuses on lazy rendering and full reactivity, providing utilities for ambient context management ($mol_ambient), array operations ($mol_array), structural assertions ($mol_assert), file uploads ($mol_attach), and a modular audio system ($mol_audio) including rooms, melodies, and samples.

Tokens
75.7K
Snippets
330
Records
424
Agent score
73%

What's inside mam_mol

  1. Overview of $mol_state_shared

    master
    $mol_state_shared is a shared, local-first, and offline-ready state store. It is designed to handle synchronization across multiple tabs automatically and uses the CROWD algorithm for conflict resolution. It is suitable for applications requiring long-term offline capabilities and persistent storage via IndexedDB.

  3. Overview of $mol_check variants

    master

    $mol_check is a checkbox UI component. Depending on your use case, you can use one of the following specialized variants:

    • $mol_check_box: A simple checkbox.
    • $mol_check_group: A group of checkboxes.
    • $mol_check_expand: An expander for trees, lists, or other hierarchical structures.
    • $mol_check_icon: A checkbox represented by an icon.
    • $mol_check_list: A list of checkboxes.

  4. Overview of $mol_wire API categories

    master

    The $mol_wire ecosystem is divided into several functional layers:

    High level API

    • Decorators: @$mol_wire_solo, @$mol_wire_plex, @$mol_wire_field, @$mol_wire_method.
    • Proxies: $mol_wire_sync (async to sync) and $mol_wire_async (sync to async).
    • Functions: $mol_wire_easing (transition atom values), $mol_wire_probe (run code without state changes), $mol_wire_solid (make current fiber immortal).
    • Structures: $mol_wire_set (reactive Set), $mol_wire_dict (reactive Dictionary), $mol_wire_dom (reactive DOM).

    Low level API

    • Debug: $mol_wire_log (state changes logger).
    • Pub/Sub: $mol_wire_pub (publisher), $mol_wire_sub (subscriber), $mol_wire_pub_sub (subscriber with retranslation), $mol_wire_auto (current tracking subscriber).
    • Reactivity: $mol_wire_fiber (pausable task), $mol_wire_task (one-shot fiber), $mol_wire_atom (repeatable fiber), $mol_wire_cursor (subscription statuses).

  5. Use $mol_array for common array operations

    master
    $mol_array provides a set of helper functions for common array manipulations, including chunking, random selection, and trimming. Note that some operations like chunks and trim mutate the original array.

  6. Use $mol_book for responsive page management

    master

    $mol_book is a component designed for lazy adding or removing pages based on the container's size. It supports a 'pop left' behavior for the front page, which can be configured to hide when it is blurred. This is useful for creating responsive layouts where sidebars or main content areas appear or disappear based on available width.

    $my_app $mol_book
	pages /
		<= Nav_bar $side_menu
			minimal_width 100
		<= Main $main_page
			minimal_width 400

  7. Use $mol_wire_fiber for pausable synchronous execution

    master

    $mol_wire_fiber provides a tiny SuspenseAPI implementation for pausable synchronous execution.

    Important: Idempotency Requirement Code inside fibers that calls other fibers must be idempotent. Because fibers may be restarted to continue execution, any non-idempotent code (code with side effects that shouldn't run twice) must be wrapped to ensure it only executes when the fiber is in a valid state.

    Instead of using $mol_wire_fiber directly, it is preferred to use higher-level abstractions:

    • Decorators: $mol_wire_method, $mol_wire_solo, $mol_wire_plex
    • Proxies: $mol_wire_sync, $mol_wire_async
    // Prefer these abstractions over direct $mol_wire_fiber usage:
// Decorators: $mol_wire_method, $mol_wire_solo, $mol_wire_plex
// Proxies: $mol_wire_sync, $mol_wire_async

  11. Use $mol_text for Markdown visualization

    master

    $mol_text is a Markdown visualizer component within the $mol ecosystem. It is designed to render and visualize Markdown content within a tree-based structure.

    <= Description $mol_text
	highlight <= search \mam
	text <= description \
		\# Quick start
		\
		\## Start dev server
		\n		\git clone https://github.com/nin-jin/mam.git
		\cd mam
		\npm install
		\npm start

  12. Access and manipulate argument state with $mol_state_arg

    master

    The $mol_state_arg module provides a way to interact with argument states across different environments.

    In NodeJS, it parses command line arguments in the format key=value (e.g., foo=bar xxx).

    In the Web environment, it parses arguments from the document location, supporting both hash fragments (#foo=bar/xxx) and query parameters (?foo=bar&xxx).

    // NodeJS example: command line 'foo=bar xxx'
$mol_state_arg.value( 'foo' ) // 'bar'
$mol_state_arg.value( 'xxx' ) // ''
$mol_state_arg.value( 'help' ) // null

// Web example: location '#foo=bar/xxx'
$mol_state_arg.value( 'foo' ) // 'bar'
$mol_state_arg.value( 'xxx' ) // ''
$mol_state_arg.value( 'help' ) // null