Skip to content

Commit

Permalink
Deploying to gh-pages from @ 79f6ae4 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
nin-jin committed Apr 21, 2024
1 parent 76b6a37 commit e56233a
Show file tree
Hide file tree
Showing 36 changed files with 103,117 additions and 0 deletions.
Empty file added .nojekyll
Empty file.
1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
survey.hyoo.ru
126 changes: 126 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
# MAM

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

# Articles

- [MAM: сборка фронтенда без боли](https://habhub.hyoo.ru/#!author=nin-jin/repo=HabHub/article=18) (in Russian, see [automatic English translation](https://translate.google.com/translate?hl=ru&sl=ru&tl=en&u=https://habhub.hyoo.ru/#!author=nin-jin/repo=HabHub/article=18))
- [Step-by-step tutorial](https://github.com/hyoo-ru/HabHub/issues/4) (in Russian, see [automatic English translation](https://translate.google.com/translate?hl=ru&sl=ru&tl=en&u=https://github.com/hyoo-ru/HabHub/issues/4))

# 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

[![Gitpod Online Dev Workspace](https://img.shields.io/badge/Gitpod-Online--Dev--Workspace-blue?logo=gitpod)](https://gitpod.io/#https://github.com/hyoo-ru/mam)


# Installation

**Checkout this repo (~2s):**

```sh
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**

```sh
npm install
```

**Start dev server:**

```sh
npm start
```

**Open simple $mol based ToDoMVC application:**

```sh
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

```sh
npm start mol/regexp
npm publish mol/regexp/-
```

## Usage from NPM

### Import to CJS

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

### Import to ESM

```js
import { $mol_regexp as RE } from 'mol_regexp'
```

### NodeJS dependencies

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

```js
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:

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

# Custom package

[Video tutorial](https://www.youtube.com/watch?v=PyK3if5sgN0)

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

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

14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html mol_view_root>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <link href="hyoo/.../logo/logo.svg" rel="icon" /> --> <!--FIXME change to actual logo path -->
</head>
<body mol_view_root>
<div mol_view_root="$hyoo_survey_app"></div>
<script src="web.js" charset="utf-8"></script>
</body>
</html>
1 change: 1 addition & 0 deletions node.audit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.info( '%c ▫ $mol_build ▫ Audit passed', 'color:forestgreen; font-weight:bolder' )
Loading

0 comments on commit e56233a

Please sign in to comment.