README

als-Mount"> als-Mount

!als-Mount als-Mount

About

Mount is templeting engine for node. It mounts code and variables inside html (or any other) code on server side. You can use it as frontend only, by building html files.

install

Run in console npm i als-mount

Define Mount

Create new Mount object Syntax:
```
let m = new Mount(viewPath,extension)
```
- viewPath - is the path for all view files
  - By defult - path.join(__dirname,'..','..','views') - relative to node_modules/als-mount folder
- extension - you can use any file extension you want
  - By default extension is mount
Use mount method
```
m.mount(route,variables)
```
- route - is the path to view file without extensions and . instead / inside viewPath
  - For example the route of someFolder\someFile.mount is someFolder.someFile
  - The route to index.mount - index
- variables - is the object with variables {varName:varValue,varName:varValue,..}
  - The variables are variables to mount inside view file with @varName - will be explainde next
  - You can access those variables (for change,read, add, delete) inside object.variables. In our case m.variables
Example:
```
// Js code
let someVar = 'hello world'
m.mount('someFolder.someFile',{
    someVar,
    anotherVar:'some value',
})
```
```

<div prop="@anotherVar">@someVar some text</div>
```
output: <div prop="some value">hello world some text</div>

Mount Variables @varName

You can mount variables with @varName

Example:

//Js code
global.some='test'
m.mount('index',{name:'Alex'})

<!-- html/mount code -->
<div>Hello @name </div>
<div>@some </div>

Otput:
Hello Alex

If the value inside array or object use dot. it refers to arrays or object.

For example: use @users.0.name, for users[0].name

If variable is an object or array, it will be printed as JSON.stringify inside PRE with spaces and linebreaks

JavaScript code to mount @{{ js code }}@

You can mount JavaScript code inside your html code and use object variables inside. To mount code, use @{{ js code }}@.

You have to return any value inside the code. If you don't return any value, you'll get undefined

Example: the folowing code return time to div element

<div> 
The time is:
@{{
    var d = new Date();
    var h = d.getHours();
    var min = d.getMinutes();
    if(min <10) min = '0'+min
    return h+':'+min 
}}@
</div>

Layout @extends, @mount, @section

Build layouts with sections. On layout file, define sections with @mount(sectionName)

Inside file you want to mount in layout, use:

@extends(fileName)
@section(sectionName) content @endsection

Example:

<!-- Layout file - index.mount -->
<header>@mount(header)</header>
<body>
    @mount(content)
</body>

<!-- File to mount in layout -->
@extends(index)
@section(title)content to mount @endsection

@section(content)
<div>Content to mount </div>
@endsection

Partials @include

You can include every file in enother just by define @include(folder.file)

For example, you have some.mount inside partials folder and you want to use it as content inside index.mount. Here is the code inside index.mount:

Example: the file will include viewsFolder/partials/some.mount

@include(partials.some)

That`s all!

Conditions @if .. @else

You can use @if,@elseif and @else to define the condition for appearing the text below of condition.

You can use only variables you defined in a mount object, or new created variables with @for and @foreach ( will be explained further).

The if statement must be finished with @endif

Here is the example of using.

// js
let name = 'Alex'
const Mount = require('./Mount')
let m = new Mount('./views')
let output = m.mount('test',{name})

<!-- html/mount -->
@if(name == 'Alex')
    <div>Hello @name, how are you</div>
@elseif (name == 'Robert')
    <div>Hello @name how are you?</div>
@elseif (name == 'Mary')
    <div>Hello @name you are 25</div>
@else
    <div>I dont know who you are!</div>
@endif

forEach cycles @foreach

You can use foreach for iterating arrays. Arrays may contain objects.

You can use the @if statement inside @foreach

The foreach statement must be finished with @endforeach

The syntax:

@foreach(varName,index in arrayName)

  <div>@index - @varName</div>
  @object.varName.someValue

@endforeach

Example:

// js
let colors = ['blue','orange','green','red']
const Mount = require('./Mount')
let m = new Mount('./views')
let output = m.mount('test',{colors})

<!-- html/mount -->
@foreach (color in colors)
    <div>@color</div>
@endforeach

Example with arrays with objects inside

// js
let users = [
    {name:'Alex',yob:1980},
    {name:'Abraham',yob:1982},
    {name:'Robert',yob:2011},
    {name:'Mary',yob:2011},
]

const Mount = require('./Mount')
let m = new Mount('./views')
let output = m.mount('test',{users})

<!-- html/mount -->
@foreach (user in users)
    @if(user.name == 'Alex')
        <div>Hello @user.name, how are you</div>
    @elseif (user.name == 'Robert')
        <div>Hello @user.name how are you?</div>
    @elseif (user.name == 'Mary')
        <div>Hello @user.name you are 25</div>
    @else
        <div>I dont know who you are!</div>
    @endif
@endforeach

for cycles @for

You can use for statement with @for(condition) code.. @endfor The way of using @for is similar to way of using @foreach.

Here is the example:

@for(let i=0; i<4; i++)
    <div>This is @users.i.name and @i</div>
    @if(users[i].name == 'Alex')
    <div>Hello Alex @i welcome</div>
    @endif
@endfor

Output and watch mount files

You can build all your mount views as html files and place them in output folder. Also you can watch the changes in files and replace them automaticly on every change.

Build and watch methods, looking for all mount files in origin path and then convert the files to html files inside output folder.

The code below, shows example for build and watch methods.

// build.js
const {join} = require('path');
const originPath = join(__dirname, 'views');
let outputPath = join(__dirname,'public')

let Mount = require('als-mount/mount')
let m = new Mount(originPath)
let variables = {navs,path:'/public'}

m.build(outputPath,variables)

if(process.argv[2] == 'watch') m.watch(outputPath,variables)

Build files in console:

node build

Build and watch changes in mount files in console:

node build watch

Bind variables and manage them on frontend

This feature is beta. What is bind function? Is the way to manage mounted variables on client side. Bind, allows you to change values of mounted variables inside dom elements.

By default, bind function is disabled. To anable it, you need to set route to bind.js file on client side, by adding it as third parameter on mount,build or watch method.

let {join} = require('path')
let Mount = require('als-mount')

let bindPath = '/node_modules/als-bind/bind.js'
let mountPath = join(__dirname,'mounts')

let m = new Mount(mountPath)
m.mount('some',{name:'Alex'},bindPath)

Now you can create mount file with @variable and manage it's value with binded.$variable = newValue or get existing value with binded.variable

The mount file has to be with <body> tag

Here is the example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
</head>
<body>
    <div>@name@some</div>
    <input type="text" oninput="binded.$name = this.value" value="@name">
    <button onclick="alert(binded.name)">name</button>
</body>
<script>
some = name => 'Hello '+name
</script>
</html>

The example above bind @name inside div via some function and as input value. Then value on input changes, it updates name value. And click on button will alert the curent name value.

For more information how Bind works, check Bind

HighLight the @tags

There is now plugin for highlight Mount syntax. If you are working with VS code, you can:

install 'Edge template support'.
Open mount file, and click on Plain Text on the bottom line
Choose configure file association for ".mount" and choose "Edge template"

Usage no npm install needed!