hyoo_artist

v0.0.2

Published

3 years ago

**M**am owns language-**A**gnostic **M**odules. This is base **MAM** project.

0High
0Medium
0Low

$hyoo_artist $hyoo $mol_style_attach $mol_style $mol $mol_after_tick $mol_after $mol_object2 $mol_ambient $mol_owning $mol_delegate $mol_fail_hidden $mol_fail $mol_type_writable $mol_type $mol_dom_context $mol_dom $node $node_modules $mol_exec $mol_log3 $mol_tree $mol_term_color $mol_term $mol_env $mol_stack $mol_view_view $mol_view $mol_theme $mol_style_func $mol_style_unit $mol_decor $mol_gap $mol_window $mol_object $mol_mem $mol_wire_solo $mol_wire $mol_wire_sub $mol_wire_pub $mol_wire_cursor $mol_wire_atom $mol_wire_fiber $mol_wire_pub_sub $mol_dev_format $mol_dev $mol_after_frame $mol_after_timeout $mol_func_name $mol_func $mol_key $mol_guid $mol_wire_method $mol_wire_task $mol_compare_deep $mol_compare $mol_type_foot $mol_type_tail $mol_fail_log $mol_fail_catch $mol_wire_plex $mol_view_selection $mol_memo $mol_wrapper $mol_dom_qname $mol_wire_probe $mol_wire_watch $mol_wire_solid $mol_const $mol_dom_render_attributes $mol_dom_render $mol_wire_async $mol_dom_render_events $mol_plugin $mol_dom_render_styles $mol_dom_render_children $mol_dom_render_fields $mol_type_pick $mol_type_keys_extract $mol_type_keys $mol_frame $mol_style_define $mol_style_guard $mol_style_properties $mol_type_override $mol_style_pseudo $mol_type_error $mol_style_sheet $mol_embed_native $mol_embed $mol_scroll $mol_print $mol_dom_listener $mol_link $mol_state_arg $mol_state $mol_action $mol_wire_sync $mol_wait_timeout $mol_wait $mol_promise

MAM

Mam owns language-Agnostic Modules. This is base MAM project.

Articles

Features

Agnostic modules. Module is directory with mixed source files (JS, TS, CSS, JSON, HTML, Tree, images etc).
Automatic dependency tracking. You don't need import/export - simply use namespaced names in accordance to directory structure, like $mol_button_major / $jin.time.moment in *.JAM.JS/*.TS or --mol_theme_back / [mol_page_title] / .my-header-avatar in *.CSS.
Development server with automatic bundling on request. Only if you use it then it will have bundled.
Build any module as standalone bundle. You can develope thousand of modules in one project.
Cordova project generation. Simply add config.xml to module and -cordova dir with cordova project will have generated.

Cloud usage

Installation

Checkout this repo (~2s):

git clone https://github.com/hyoo-ru/mam.git ./mam && cd mam

Linux limits

$mol_build and typescript uses inotify by default on Linux to monitor directories for changes. It's not uncommon to encounter a system limit on the number of files you can monitor.

/etc/sysctl.d/20-watch.conf

fs.inotify.max_user_watches=524288
fs.file-max=500000

Development server

Install node modules and build dev server from actual sources

npm install

Start dev server:

npm start

Open simple $mol based ToDoMVC application:

start http://localhost:9080/hyoo/todomvc/-/test.html

Manual build

Execute npm start hyoo/todomvc to build standalone ToDoMVC application at hyoo/todomvc/-.
Execute npm start mol/regexp to build standalone $mol_regexp library at mol/regexp/-.

NPM Integration

Publish to NPM

npm start mol/regexp
npm publish mol/regexp/-

Usage from NPM

Import to CJS

const { $mol_regexp: RE } = require( 'mol_regexp' )

Import to ESM

import { $mol_regexp as RE } from 'mol_regexp'

NodeJS dependencies

Using $node namespace you can auto-install and dynamically lazy load any NPM packages:

const isOdd = $node['is-odd']( '123' )

Bundling NPM dependencies

It's better to use implementations from MAM ecosystem. But you can bundle NPM packages too through adapter like:

// lib/ramda/ramda.ts
namespace $ {
	export let $lib_ramda = require('ramda/src/index.js') as typeof import('ramda')
}

Custom package

Video tutorial

Create dir for your namespace. my in example.
Create dir for your module. my/alert in example.
Create module source file. my/alert/alert.ts with content function $my_alert( msg : string ) { alert( msg ) } in example.
Create dir for your application module. my/app in example.
Create application source file. my/app/app.ts with content $my_alert( 'Hello, World!' ) in example.
Create application web entry point. my/app/index.html with content <script src="-/web.js"></script> in example.
Start development server: npm start
Open your application. http://localhost:9080/my/app/-/test.html in example.

MAM based projects

https://github.com/hyoo-ru?q=hyoo.ru