hyoo_artist
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

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

Gitpod Online Dev Workspace

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

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

MAM based projects

Package Sidebar

Install

npm i hyoo_artist

Weekly Downloads

0

Version

0.0.2

License

none

Unpacked Size

2.6 MB

Total Files

32

Last publish

Collaborators

  • jin