Build4Code

Build4Code supports the build process for HTML, CSS, Javascript, README and UML models. According to UML the repository supports the NPM build process based on UML models created and managed with the JSONEditor4Code. A JSON file defines the attributes and methods of a class and a JSON editor running in a browser allows the generation of Javascript code.

Installation

If you want to use build4code install the package with npm:

Install build4code

Install build4code with the follwing npm commands

   npm install build4code --save-dev`

Alteration of package.json

Insert the following script call in package.json:

The script section may look like this:

"scripts": {
  "watch": "watchify src/main.js -o dist/my_package.js -v",
  "browserify": "browserify src/main.js  > dist/my_package.js",
  "build2dist": "node ./build.js; browserify src/main.js > docs/js/my_package.js",
  "buildmin": "uglifyjs dist/my_package.js --compress -o dist/jsoneditor4menu.min.js",
  "test": "jshint dist/my_package.js",
  "build": "node ./build.js; browserify src/main.js > docs/js/my_package.js.js",
  "compress": "node ./build.js;browserify docs/js/my_package.js  | uglifyjs -mc warnings=false > dist/my_package.min.js"
},

Create build.js script

Create a file build.js in the folder of your npm module. If your package is stored in .../my_package create the file .../my_package/build.js with the following structure.

const pkg = require('./package');
const b4c = require('build4code');

// ------ Build Settings -----------------
var vExportVar = pkg.exportvar; // defined in package.json as "exportvar"
var vSrcPath = "./src/"; // Path to Source Libraries
var vDistPath = "./src/"; // Path to distribution
var vLibPath = vSrcPath + 'libs/';
var vLibDist = './dist/'+pkg.name+'.js';
var vLibOut = './docs/js/'+pkg.name+'.js';
var vLibArray = [
  './src/npm_header.js',
  vLibPath+'arrayhash.js',
  vLibPath+'blob.js',
  vLibPath+'bootstrap.js',
  vLibPath+'classeditor.js',
  vLibPath+'date.js',
  vLibPath+'savefile.js',
  vLibPath+'filesaver.js',
  vLibPath+'handlebars4code.js',
  //vLibPath+'handlebars.js',
  //vLibPath+'handlebars_helper.js',
  vLibPath+'jsoneditor.js',
  vLibPath+'linkparam.js',
  //vLibPath+'localstorage.js',
  vLibPath+'exportmod.js'
];
// ----------------------------------------
// Process Chaining
// (1) create "npm_header.js" and "npm_tail.js" in src/libs
// (2) concat files export library to docs/js with prepend npm_header.js
// (3) create src/main.js for browserify and append "npm_tail.js"

var codegen =  b4c.codegen;

pkg.exportvar = vExportVar;

codegen.create_header(pkg);
//codegen.create_inherit_static(pkg);
codegen.create_tail(pkg);
codegen.concat_main(pkg.main,vLibArray,pkg);
codegen.concat_libs(vLibOut,vLibArray,pkg);
codegen.concat_libs(vLibDist,vLibArray,pkg);

Build

JavaScript to UML Converter

The JavaScript to UML converter is part of the build2code repository. It is used to create UML model of a Javascript constructor. See ClassEditorUML how the generated JSON file can be used in an UML Editor for Javascript sources.

Input Parameters of js2uml

js2uml uses the prototype definition of methods, i.e. for a Javascript class LoadFile4DOM for extracting the code and parameters of the call for a function and stores the extract information in JSON file to represent the UML structure of the JavaScript class. The prototype-methods are defined in the following way.

function LoadFile4DOM () {
  // Constructor called with new LoadFile4DOM()
  // ...
}

LoadFile4DOM.prototype.my_method = function (pPar1,pPar2) {
  // code for the method "mymethod"
}

The function js2uml() needs the following input parameters.

• (pUML) a JSON for a the Javascript class that represents the previous representation of UML (e.g. loadfile4dom_uml.json). The JSON pUML is usually generated with ClassEditorUML. The previous UML definition of the class will be updated by js2uml() (e.g. code bodies and parameters of methods are updated from the source Javascript file e.g. loadfile4dom.js). Bugfixing of the code is usually performed in an editor like Atom and the general structure of a Javascript class during software design is done in an UML editor. js2uml() will use from the input UML file to take previously defined comments for
  • attributes,
  • methods and
  • parameters of methods (functions) maps those comments to the parsed UML structure.
• (pConstructor) as a reference to the defined attributes of constructor (e.g. pConstructor=LoadFile4DOM).
• (pOptions) defines thei options for parsing
• (pkg) the required JSON package.json. You can call the js2uml() within a build script for code generation with the following commands.

const pkg = require('./package.json')
const b4c = require('build4code');
let js2uml = b4c.js2uml;

let vConstructor = require('loadfile4dom');
let vOptions = {
  "constructor":true,
  "scan_prototype":true
};

var vUML = b4c.js2uml(pUML,vConstructor,pOptions,pkg);

vOption.scan_prototype = true uses the reference to LoadFile4DOM.prototype for scanning all as prototypes defined methods of LoadFile4DOM constructor. Methods might be also defined within the constructor e.g. with:

function LoadFile4DOM () {
  this.my_attribute1 = 0.0;
  this.my_method1 = function (pPar1,pPar2) {
    // code of my_method1 ...
  }
}
LoadFile4DOM.prototype.my_method2 = function (pPar1,pPar2) {
  // code of my_method2 ...  
}

my_method2() is defined as prototype, while my_method1() will consume memory for the methods any create instances of LoadFile4DOM created with new LoadFile4DOM(). If no methods are defined as prototype set the options to false even if you use a constructor, i.e.

let vOptions = {
 "constructor":true,
 "scan_prototype":false
}

The constructor could also be also just a hash of functions.

const pkg = require('./package.json')
const b4c = require('build4code');
let js2uml = b4c.js2uml;
let vOptions = {
  "constructor":false,
  "scan_prototype":false,
  "include_overwrite": [
    "my_method1",
    "my_method2"
  ]
};

let vHash = {
  "my_attribute1": 0.0,
  "my_method1": function (pPar1,pPar2) {
    // code of my_method1 ...
  }
};

 var vUML = b4c.js2uml(vUML,vHash,vOptions,pkg);

An example for such as static class is Handlebars. You can use the template engine Handlebars just with require command an without creating a new instance with new Handlebars(). Nevertheless the document can be parsed and converted in the UML model as "static class" in Javascript.

If we extend the Handelbars module to Handlebars4Code, it is necessary to scan the static super class Handelbars and the Handlebars4Code static class so that only the new defined methods and attributes are displayed in the UML export for hash2uml().

Currently the include_overwrite array lists all functions in Handelbars that will be overwritten in Handlebars4Code. The listed methods will be stored in the include_overwrite array and the list of methods will be included in the UML export. The options is currently necessary because there is no solution yet to identify, if a function is overwritten without modifying the source code of the static classes. ClassEditorUML has a setting in the JSON schema of the repository to declare a JavaScript class as static. The option will be set by js2uml() automatically.

Currently the include_overwrite array lists all functions in Handelbars that will be overwritten in Handlebars4Code. The listed methods will be stored in the include_overwrite array and the list of methods will be included in the UML export. The options is currently necessary because there is no solution yet to identify, if a function is overwritten without modifying the source code of the static classes. ClassEditorUML has a setting in the JSON schema of the repository to declare a JavaScript class as static. The option will be set by js2uml() automatically.

Folder and Files in Repository

In the repository package.json an attribute exportvar is defined (resp. must be added to the package.json for the buildprocess. Several files are generated automatically during the build process and especially the constructor uses the value of exportvar for the automated generation of the documentation. Furthermore files4build.js defines the list of files parts that are required and used to run the build process with npm run build. The

Folder dist/

The folder dist/ contains all generated libraries by npm run build which calls build.js. The function getLibs4Build() (defined in files4build.js) return and array of files that are concatenated for generating the libraries dist/my_package.js and dist/my_package.min.js

File build.js

Assume the package name in npm is my_package. The following documentation refers to this package name. Depending on the package name the files are created. The file build.js creates the files for the repository in JS, HTML, CSS, README:

• README.md of the reporsitory with file parts in src/readme
• JS: dist/my_package.js as main library for distribution with file parts in src/libs.
• JS: dist/my_package.min.js as compressed main library for distribution with file parts in src/libs - compressed with UglifyJS.
• HTML: docs/index.html for the repository with file parts in src/html.
• JS: docs/js/my_package.js as main library for web demo in docs/ with file parts in src/html/.
• CSS: docs/css/main.js as main library for web demo in docs/ with file parts in src/css/.

Remark: DO NOT EDIT the following generated files of the build process with build.js directly

• my_package.js,
• my_package.min.js,
• docs/index.html,
• css/main.css because your work will be lost after running npm run build again. Edit the source files for the build process in the folder src/ instead.

Folder docs/

The folder docs/ contains all files for the web demo of this repository e.g. on GitHub, that can be accessed to the https://myusername.github.io/my_package with a the username myusername on GitHub.

Folder src/

The folder src/ contains all source files for the build process defined by build.js in this repository. files4build.js defines the list of files parts that are required and used to the build process with npm run build.

Folder src/css

The folder src/css contains all CSS source files for the build process defined by build.js in this repository. files4build.js defines the list of files parts that are required and used to the build process with npm run build.