MAM

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

Articles

MAM: сборка фронтенда без боли (in Russian, see automatic English translation)
Step-by-step tutorial (in Russian, see automatic English translation)

Features

Agnostic modules. Module is a directory with the mixed source files (JS, TS, CSS, JSON, HTML, Tree, images, etc).
Automatic dependency tracking. You don't need import/export - simply use the namespaced names according to the 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. Will be bundled only if you use it.
Build any module as standalone bundle. You can develop thousand of modules in one project.
Cordova project generation. Simply add config.xml to the module, and -cordova dir with the cordova project will be 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

If possible, try to use the existing MAM ecosystem implementations. You can bundle the NPM packages as well via an 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

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

PavelZubkov/mam

MAM