# als-build

> Als-build is a frontend framework for building ssr and html web pages with built in route system based on file paths.

Latest version **0.4.52** (published 2023-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install als-build
pnpm add als-build
yarn add als-build
bun add als-build
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.52 |
| Published | 2023-10-21 |
| First published | 2022-01-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 36.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Sorkin |
| Maintainers | alexsorkin |

## Links

- npm: https://www.npmjs.com/package/als-build
- npm.io page: https://npm.io/package/als-build

## Dependencies (4)

- [acorn](https://npm.io/package/acorn.md) ^8.8.2
- [astring](https://npm.io/package/astring.md) ^1.8.4
- [clean-css](https://npm.io/package/clean-css.md) ^5.3.2
- [als-layout](https://npm.io/package/als-layout.md) ^0.4.5

## Recent versions

- 0.4.52 (latest) — 2023-10-21
- 0.4.51 — 2023-03-18
- 0.4.5 — 2023-03-18
- 0.4.1 — 2023-03-17
- 0.4.0 — 2023-03-17
- 0.3.6 — 2023-03-12
- 0.3.51 — 2023-03-06
- 0.3.5 — 2023-03-06
- 0.3.3 — 2023-03-05
- 0.3.2 — 2023-03-04
- 0.3.1 — 2023-02-28
- 0.3.0 — 2023-02-28
- 0.2.1 — 2022-03-22
- 0.2.0 — 2022-03-21
- 0.1.0 — 2022-01-15

## README

# Als-Build

**Not for use - being tested** 

Als-build is a frontend framework for building ssr and html web pages with built in route system based on file paths.

- [Als-Build](#als-build)
  - [Basics](#basics)
    - [Parameters](#parameters)
  - [What build does](#what-build-does)
    - [Inside src folder](#inside-src-folder)
    - [Parameters](#parameters-1)
  - [nodemon ignore](#nodemon-ignore)
  - [ignore](#ignore)

## Basics

Install with ``npm i als-build`` and create:
1. ``src`` folder on root folder of your project
2. ``build.js`` with folowing example code


Syntax:
```javascript
let build = new Build(
  srcDirPath:string,
  options={
    url='':string,
    minify:false,
    ecmaVersion:2022:number,
    prefix:'imported':string,
    publicDirName='public':string,
    viewsDirName='views':string,
    layoutObj={}:Object
  }:Object,
): instanceof Build 
build.build(): instanceof Build 
build.watch(): instanceof Build 
```

### Parameters
* srcDirPath - directory path for source files
* url - base url for all routes (has to start with /)
* options
  * minify - if true minifying js and css files
  * ecmaVersion - 2022 for default
  * prefix - prefix added to functions
  * publicDirName='public' - folder name for public files
  * viewsDirName='views' - folder name for views files
  * layoutObj={} - default layout object
  * bundle=true - makes js and css bundle instead separated files
  * cjsScriptInFooter=true - is main script in footer or header

Example:
```javascript
let {join} = require('path')
let Build = require('als-build')
let srcDirPath = join(__dirname,'src')

new Build(srcDirPath,{url:'/public'})
.build() // for building once from src
.watch() // for building and watching for changes in src
```

## What build does
Running build, will create two folders:
1. public - for public files
   1. public/resources - for all resources by in folder by route
   2. public/routeName/index.html - for route
2. views - for server side rendering and building html files


### Inside src folder
Inside ``src`` folder, you can place any file you want and route files. 
``Route`` files are files which has ``.cjs`` or ``.html.cjs`` extension and return ``function(layoutObj,data)`` which has to return modified ``layoutObj``.

The layoutObj, is an instance of [als-layout](https://www.npmjs.com/package/als-layout) class which will create view file and then html file if needed. 

The defaults for ``layoutObj``, taken from ``options.layoutObj`` which you provided on constructor. 
Also, layoutObj will include ``rootUrl`` which is url, you have provided on constructor. 

Inside route files you can require files for frontend and for backend, by setting params (back=false,front=false).
Also you can require any files you want, and if it's not js or css files, it's just will be copied to ``public/resources`` folder.
Also you can set ``front=footer`` for puting resource file on footer and ``fn=false`` to use content as is and not inside function. 

If route file is ``.html.cjs``, inside public folder will be created ``index.html`` by repiting folder structure in src folder. 

Example for route file:

```javascript
require('./some.css')
require('./some.png')
let some = require('some-package?back=false')
let header = require('./layout/header?front=false')
let footer = require('./layout/footer?front=false')
let body = require('./layout/body?front=false')
module.exports = function(layoutObj,data) {
    let strData = JSON.stringify(data)
    layout.scripts[layout.scripts.length-1].footer=false // put last code on footer
    layoutObj.scripts.push({inner:`let data = ${strData}`,footer:true})
    layoutObj.header = header
    layoutObj.footer = footer
    layoutObj.body = body
    return layoutObj
}
```

Example for src folder and views and public folders which has created for src folder. 

* src
  * dashboard
    * .html.cjs
  * .html.cjs
  * route1.cjs
* views
  * route.js
  * route1.js
  * dashboard
    * .js
* public
  * resources
    * dashboard
  * index.html
  * dashboard
    * index.html


### Parameters

You can use those parameters as query parameters inside require statement, or in imported file it self inside comments at the top of the file:
* back=false - don't use on view files, but use in frontend
* front=false - don't use on frontend, but use in view files
* front=footer - use on frontend and put on footer
* fn=false - add this script as is, and not inside function

Example for usage as parameter
```js
/**
 * @front = footer
*/
```

## nodemon ignore
if nodemon installed, adding ignore for src, view and public folder

## ignore
You can add .ignore file to "view" and "public" folders with list of files to ignore. 
This file will allow you to add files to "public" and "view" folders which will not be cleaned up on build.

---
_Source: https://npm.io/package/als-build · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._