XML2Code
is a Create XML Abstract Syntax Tree from Javascript Source Code
The following table of contents is generated with node doctoc README.md
.
- Installation
XML2Code
- Quick Start for Library-Users
- XML2Code
- XML2Code is Not a XML Programming Language!
- XML2Code and JSON
- WebApps and Software
- Package
- Class
- Create an Object
- Control Statements
- Templates for Handlebars4Code
- vDataJSON as Template Storage
- Templates and JSON into vDataJSON
- Script Tag for handlebars4code.js
- Additional Handlebars Helpers for Code generation
- Build Process of
npm run build
- Acknowledgement
- Libraries required for
XML2Code
- Libraries for Building and Developement
- NPM Library Information
If you want to install XML2Code
in Node NPM use the following require-call:
const XML2Code = require('xml2code');
let vxml2code = new XML2Code();
If you want to use the library xml2code.js
in a browser, please copy the file dist/xml2code.js
into your library folder (e.g. docs/js
) and
import the library with script
-tag with:
<script src="js/xml2code.js"></script>
Now it is possible to use the constructor of XML2Code
var vxml2code = new XML2Code();
Just copy the docs/
-folder and adapt the JSON-schema docs/schema
and the JSON data in the folder docs/db/
to the schema for your requirements. If you want to create your own JSON schema use the JSON2Schema tool.
XML2Code is a project that defines an XML syntax that is meant to be as data sink for different programming languages. The starting point is UML and XML as the language for representation of programming code.
XML-Parser can read the XML-Code and cross compile to an programming language of choice. Even a browser with a integrated XML-parser could be used to cross compile XML2Code Sources into another programming language.
XML2Code
is not meant to be a language to develop software or libraries, classes, packages, ... inXML
syntax.XML2Code
is an iterims format from one programming language into another programming language or as a contribution to executable XML.XML2Code
can be used to represent an Abstract Syntax Tree for cross-compilation from one programming language intp another (e.g. cross-compile a valuable library inPHP
intoJavaScript
, to have these libraries available in a new software project for which these functions are currently missing).
UglifyJS can be used to create an Abstract Syntax Tree (AST) from Javascript source code (see UglifyJS Parser). The provided AST from UglifyJS can be used to create an XML representation.
The underlying data structure for code generation is an Abstract Syntax Tree (AST) for the code. Starting from the programming language Javascript
the well-know library UglifyJS
A package is wrapped in PACKAGE-Tag
<PACKAGE name="MyPackage">
</PACKAGE>
A Class is wrapped in CLASS-Tag
<CLASS name="MyClass">
</CLASS>
Inherit from a Super Class with the name "MySuperClass"
<CLASS name="MyClass" inherit="MySuperClass">
</CLASS>
A class with one attribute
<CLASS name="MyClass">
<ATTRIBUTE name="aAge" class="Integer">
</ATTRIBUTE>
</CLASS>
A class with one attribute "aAge" init with 0
<CLASS name="myclass">
<ATTRIBUTE name="aAge" class="Integer">
0
</ATTRIBUTE>
</CLASS>
A class with one method "mIncrementAge()" without parameter:
<CLASS name="MyClass">
<DEFATTRIBUTE name="aAge" class="Integer">
0
</DEFATTRIBUTE>
<DEFMETHOD name="mIncrementAge">
<SETATTRIBUTE name="aAge">
<ATTRIBUTE name="aAge">
</ATTRIBUTE>
<OPERATOR value="+" />
1
</SETATTRIBUTE>
</DEFMETHOD>
</CLASS>
A class with one method "mIncrementAge(pAddAge:Integer)" with one parameter. Set attribute is represented in programming languages with "self" or "this".
<CLASS name="MyClass">
<DEFATTRIBUTE name="aAge" class="Integer">
0
</DEFATTRIBUTE>
<DEFMETHOD name="mIncrementAge">
<PARAMETER name="pAddAge" class="Integer"/>
<SETATTRIBUTE name="aAge">
<ATTRIBUTE name="aAge" />
<OPERATOR value="+" />
<VARIABLE name="pAddAge" />
</SETATTRIBUTE>
</DEFMETHOD>
</CLASS>
The following XML-Statement creates an instance of certain class MyClass
.
E.g.
var vMyVar = new MyClass();
<SETVARIABLE name="vMyVar">
<NEW name="MyClass">
</NEW>
</SETVARIABLE>
The following code shows an IF-Statement without ELSE-Block
<IF>
<CONDITION>
</CONDITION>
<THEN>
</THEN>
</IF>
The following code shows an IF-Statement with ELSE-Block
<IF>
<CONDITION>
.....
</CONDITION>
<THEN>
.....
</THEN>
<ELSE>
....
</ELSE>
</IF>
Init a variable with i=0, i<max, i=i+1
<FOR>
<DEFVARIABLE name="i" class="Integer">
<CONSTANT class="Integer" value="0" />
</DEFVARIABLE>
<CONDITION>
<LESS>
<BLOCK>
<VARIABLE name="i" />
</BLOCK>
<BLOCK>
<VARIABLE name="max" />
</BLOCK>
</LESS>
</CONDITION>
<ITERATION>
<SETVARIABLE name="i">
<VARIABLE name="i" />
<OPERATOR value="+" />
<CONSTANT class="Integer" value="1" />
</SETVARIABLE>
</ITERATION>
<DO>
.....
</DO>
</FOR>
Init a variable with i=0 before the while statement and perform the iteration until i<max, increment for all loops with i=i+1.
<DEFVARIABLE name="i" class="Integer">0</FORVARIABLE>
<WHILE>
<CONDITION>
<LESS>
<BLOCK>
<VARIABLE name="i" />
</BLOCK>
<BLOCK>
<VARIABLE name="max" />
</BLOCK>
</LESS>
</CONDITION>
<DO>
.....
<SETVARIABLE name="i">
<VARIABLE name="i" />
<OPERATOR value="+" />
1
</SETVARIABLE>
</DO>
</WHILE>
In the Handlebars4Code
demo the JSON data is stored in vDataJSON
, which is the main JSON data storage defined in index.html
. Data (docs/db/
) and templates (docs/tpl/
) are loaded into the JSON. All templates reside in vDataJSON.tpl
, which is provided as parameter to Handlebars4Code.create_compiler(vDataJSON.tpl)
. The method create_compiler(vDataJSON.tpl)
creates Handlebars compilers for all templates in vDataJSON.tpl
.
create_compiler(vTplHash)
expects a hash, for which the template ID is the key for accessing template (e.g.vDataJSON.tpl["docu4github"])
orvDataJSON.tpl["javascript"])
(see directorydocs/tpl/
).- The compilers need to be generated only once. Then the compiler for all templates are ready to process JSON data and generate output according to the template definition.
var my_compilers = Handlebars4Code.get_compiler()
stores the generated Handlebars compilers in an individual compiler hash.var my_output = my_compilers.javascript(vJSON)
provides JSON to the compiler function for the templatejavascript
.var my_output = my_compilers.docu4github(vJSON)
provides JSON to the compiler function for the templatedocu4github
.
Create a template storage in your main HTML file.
<script language="javascript">
var vDataJSON = {};
vDataJSON.tpl = {};
vDataJSON.out = {};
</script>
vDataJSON.out
contain the compilers, that are generated by Handelbars4Code
. Each compiler in vDataJSON.out
have are corresponding template in vDataJSON.tpl
. vDataJSON.tpl
is hash of strings for each ID and vDataJSON.out
is hash of functions with the corresponding ID. The following code generates the compiler with HandleBars4Code
.
Handlebars4Code.create_compiler(vDataJSON.tpl);
vDataJSON.out = Handlebars4Code.get_compiler();
Assume you have a template with the ID mytpl
you will get a compiler function in vDataJSON.out.mytpl()
that you can populate with JSON data. The call of vDataJSON.out.mytpl(pMyData)
will replace the JSON data pMyData
in the template mytpl
.
The javascript files in docs/tpl/
and docs/db/
are designed in way that allows the population of vDataJSON
just by including a script tag in the underlying HTML file (see example docs/index.html
).
The following script tag loads the JSON data into vDataJSON
.
<script src="db/umljs.js"></script>
The data is stored in the following way in the JavaScript file:
vDataJSON["umljs"]= {
"author": "Bert Niehaus",
"description": "My description for repository."
}
It is recommended to use the same ID in vDataJSON
as the basename of the corresponding JavaScript file db/umljs.js
without path db/
and extension .js
.
Every script tag loads a single template from the subdirectory docs/js/
:
<script src="tpl/javascript_tpl.js"></script>
<script src="tpl/docu4github_tpl.js"></script>
Use the script tag to embed the Handlebars4Code library in your HTML file::
<script src="js/handlebars4code.js"></script>
The following Handlebars helpers are added to the basic Handlebars features, to support better code generation. Generated code can be in any programming language (of course including markup or markdown languages):
filename
create lower case filenames from camel-case class names (e.g.MyClass
intomyclass
).ifcond
creates id-conditions in the Handlebars template to create JSON context dependent compiler output.require_class_list
insertsrequire
commands according the used classes in the attributes and return values of the methods. It requires only modules that are not base classes that are provided by the programming language itself.requirelibs
The helper is designed to generate local and remote require commands in a class/module.foreach
is slighty different from the standardeach
helper in Handlebars. It allows to assign parentdata
hash toforeach
context of the template
The helper function filename
generates from any input string a usable filename in lowercase that contains no blanks an no special characters.
Assume we have the following templates stored vDataJSON.tpl["mytpl1"]
with
// The filename of the class {{data.classname}} is {{filename data.classname}}.js
The template ID mytpl1
is
The following JSON
var my_json = {
"data":{
"classname" : "MyClass"
}
}
The compiler call Handlebars4Code.compile.mytpl1(my_json)
for the JSON data my_json
and the template generates the following code
// The filename of the class MyClass is myclass.js
The following JSON
var my_json = {
"data":{
"classname" : "MyClass",
"superclassname" : "MySuperClass"
}
}
Assume we have templates vDataJSON.tpl["mytpl2"]
with:
const {{data.superclassname}} = require('{{filename data.superclassname}}');
The compiler call Handlebars4Code.compile.mytpl2(my_json)
for the JSON data my_json
and the template generates the following code:
const MySuperClass = require('mysuperclass');
If the input string contains blanks then these blanks are replaced by an underscore.
If
condition and application of JSON path to specific attribute to JSON. The following template generates a header as comment for the javascript output. Dependent on the value of data.superclassname
(string not empty) an additional name for the superclass is inserted in the header of generated output of code (see Blog in StackOverflow)
Assume we have the following templates is stored vDataJSON.tpl["mytpl"]
with
//#################################################################
//# Javascript Class: {{data.classname}}()
{{#ifcond data.superclassname "!=" ""}}
//# SuperClass: {{data.superclassname}}
{{/ifcond}}
//#
//# Author of Class: {{data.reposinfo.author}}
//# email: {{data.reposinfo.email}}
//#################################################################
The ifcond
is an if-condition, that inserts a line with name of the super class if the superclassname
is not empty.
The following JSON is used the helper call:
var my_json = {
"data": {
"classname": "NewClass",
"superclassname": "MySuperClass",
"comment": "Description of the class",
"reposinfo": {
"repository": "https://www.github.com/author/NewClass",
"author": "My Name",
"email": "name@example.com",
},
}
};
The superclassname
is not empty and has the value "MySuperClass"
. The ifcond
used in the template will insert a line by the use of an if-condition.
The compiler call for the JSON data and the template generates the following code:
//#################################################################
//# Javascript Class: NewClass()
//# SuperClass: MySuperClass
//#
//# Author of Class: My Name
//# email: name@example.com
//#################################################################
The compiled result contains a comment about the super class, due to the fact that the attribute superclassname
is not empty and contains the value "MySuperClass"
.
The helper function creates a list of liberaries that must be required/imported (e.g. Javascript) so that the defined libary for the new class can used the required resources in other modules. Some classes/instances are already defined by the programming language (e.g. Math
, JSON
in Javascript). Those libraries do not need a require command. The code generator should know about
- base classes (
baseclasslist
) - no need to create require - local classes (
localclasslist
) - store in local directory, a path is necessary to these locally defined libraries (seedata.reposinfo.require_path
). - remote classes (
remoteclasslist
) - retrieved from a remote server via a package manager.
Assume we have the following templates stored vDataJSON.tpl["mytpl"]
with
{{{require_class_list data settings}}}
The helper needs the data
and the settings
attribute of the JSON input as parameter:
data
contains all the defined elements of the class.settings
contain basic definitions for the classes that are available in the software development project.data.superclassname
because a superclass will be handled with a separaterequire
command.settings.baseclasses
because those classes are provided by the programming language by default and they do not need a require command.settings.localclasses
because those classes are created within the software developement of the repository and these modules need a special require command with a local pathname, where to to find the libraries, e.g.require('./libs/mylocallib')
.data.reposinfor.require_path
contain the local path to the libraries/modules oflocalclasses
./libs/
.settings.remoteclasses
remote classes are download with a package manager and these modules are required just by the module name, e.g.require('mylocallib')
.
The following JSON
var my_json = {
"data": {
"classname": "NewClass",
"superclassname": "MySuperClass"
},
"settings": {
"extension4code":".js",
"localclasslist": [
"App",
"AppAbstract"
],
"remoteclasslist": [
"LinkParam",
"JSONEditor"
],
"baseclasslist": [
"",
"Array",
"Boolean",
"Float",
"Function",
"Hash",
"Integer",
"Object",
"RegularExp",
"String"
]
}
};
Assume that App
, LinkParam
and JSONEditor
are used in the class as attributes or returned instances of method. App
is a locally defined class while LinkParam
and JSONEditor
are remote classes downloaded from the package manager (e.g. NPM).
The compiler call for the JSON data and the template generates the following code.
require('./libs/app');
require('linkparam');
require('jsoneditor');
The helper is designed to generate local and remote require commands in a class/module.
Assume we have the following templates is stored vDataJSON.tpl["requiretpl"]
with:
// NodeJS: Require additional Modules
{{#requirelibs data.reposinfo.requirelist}}
const {{variable}} = require('{{module}}');
{{/requirelibs}}
The following JSON is used the helper call:
var my_json = {
"data": {
"classname": "NewClass",
"reposinfo": {
"requirelist": [
{
"module":"handlebars",
"variable":"Handlebars"
},
{
"module":"filesaver",
"variable":"FileSaver"
},
{
"module":"jquery",
"variable":"$"
}
]
},
}
};
The compiler call Handlebars4Code.compile.requiretpl(my_json)
for the JSON data my_json
and the template generates the following code. The variable for the repository uses the module name in the requirelist
and creates a variable name with an uppercase first character of the module name.
const Handlebars = require('handlebars');
const Filesaver = require('filesaver');
const $ = require('jquery');
The example for the foreach
helper will generate HTML code e.g. for the document explaining the available methods in the class. The example for the paramcall
helper provides an application of foreach
for code generation.
Assume we have the following templates stored in vDataJSON.tpl["htmltpl"]
with:
<ul>
{{#foreach data.methods data}}
<li>
The {{visibility}} method {{name}} is defined in class {{data.classname}}
</li>
{{/foreach}}
</ul>
The output format is HTML and the template uses
- the array
data.methods
to iterate over all methods and - the hash
data
as second parameter of the helper, so that parent attribute of the JSON likedata.classname
are available in the content of theforeach
definition as well. - The second parameter
data
is added asdata
attribute to method items the arraydata.methods
. You can assign a different hash e.g.mydata
to the second parameter. For the template above the hashmydata
needs the attributemydata.classname
. The second parameter is still mapped to{{data}}
in the helper context. So ifmydata.classname="MyNewClass2"
the Handlebars{{data.classname}}
will be set toMyNewClass2
. With the new second parameter the template context will look this:
<ul>
{{#foreach data.methods mydata}}
<li>
The {{visibility}} method {{name}}(params) is defined in class {{data.classname}}
</li>
{{/foreach}}
</ul>
For a Handlebars4Code helper foreach
helper is called for arrays myarray
with:
{{#foreach myarray data}}
context for each array element
{{/foreach}}
The following JSON is used the helper call:
var my_json = {
"data": {
"classname": "NewClass",
"methods": [
{
"visibility": "public",
"name": "init",
},
{
"visibility": "private",
"name": "create",
},
{
"visibility": "public",
"name": "display",
}
}
};
The template was stored in vDataJSON.tpl["htmltpl"]
, so the compiler call will be Handlebars4Code.compile.htmltpl(my_json)
for the JSON data my_json
. The defined template generates the following code:
<ul>
<li>
The public method init(params) is defined in class NewClass
</li>
<li>
The private method create(params) is defined in class NewClass
</li>
<li>
The public method display(params) is defined in class NewClass
</li>
</ul>
The helper paramcall
creates a list of parameter names of the method, that is comma separated.
Assume we have the following templates stored in vDataJSON.tpl["methodtpl"]
with:
{{#foreach data.methods data}}
{{#ifcond visibility "==" "public"}}
{{data.classname}}.{{name}} = function ({{#paramcall parameter}}{{/paramcall}})
{{/ifcond}}
{{#ifcond visibility "==" "private"}}
// private function of class {{data.classname}}
function {{name}}({{#paramcall parameter}}{{/paramcall}})
{{/ifcond}}
{{/foreach}}
The foreach
helper iterates of all method (here only one method is defined in the class). The ifcond
helper distinguishes between different outputs for public
and private
methods in the class.
The following JSON is used for the helper call. The JSON contains one method with
var my_json = {
"data": {
"classname": "NewClass",
"superclassname": "MySuperClass",
"methods": [
{
"visibility": "public",
"name": "init",
"parameter": [
{
"name": "pJSON",
"class": "Hash",
"comment": "the parameter stores JSON definition for the class"
},
{
"name": "pOptions",
"class": "Hash",
"comment": "the parameter stores the options for the JSON editor (developed by Jeremy Dorn)"
},
{
"name": "pSchema",
"class": "Hash",
"comment": "the parameter contains the JSON Schema for JSON Editor"
}
]
}
}
};
The compiler call Handlebars4Code.compile.methodtpl(my_json)
for the JSON data my_json
and the template generates the following code:
NewClass.init = function (pJSON,pOptions,pSchmea)
The ifcond
condition creates a different output if the visibility
attribute is set to private
. The generated code will be:
// private function of class NewClass
function init(pJSON,pOptions,pSchmea);
The helper function parameterlist
is mainly used to insert a comments for all parameter of a function in the header of a function.
Assume we have the following templates stored vDataJSON.tpl["mytpl"]
with:
//#################################################################
//# {{visibility}} Method: {{name}}() Class: {{data.classname}}
//# Parameter:
//# {{parameterlist parameter " //# "}}
//#################################################################
The following JSON is used the helper call:
var my_json = {
var my_json = {
"data": {
"classname": "NewClass",
"superclassname": "MySuperClass",
"methods": [
{
"visibility": "public",
"name": "init",
"parameter": [
{
"name": "pJSON",
"class": "Hash",
"comment": "the parameter stores JSON definition for the class"
},
{
"name": "pOptions",
"class": "Hash",
"comment": "the parameter stores the options for the JSON editor (developed by Jeremy Dorn)"
},
{
"name": "pEditorID",
"class": "String",
"comment": "the parameter provide DOM ID in which the JSON editor will be injected."
}
]
}
}
};
The compiler call Handlebars4Code.compile.mytpl2(my_json)
for the JSON data my_json
and the template generates the following code:
//#################################################################
//# public Method: init() Class: NewClass
//# Parameter:
//# pJSON:Hash
//# the parameter stores JSON definition for the class
//# pOptions:Hash
//# the parameter stores the options for the JSON editor (developed by Jeremy Dorn)
//# pEditorID:String
//# the parameter provide DOM ID in which the JSON editor will be injected.
//#
//#################################################################
The helper function indent
takes two parameters.
- the text (e.g. comment or code)
- the indent which is injected for all newlines in the text parameter.
The
indent
helper shifts the text or code to the right.
Assume we have the following templates is stored vDataJSON.tpl["mytpl"]
with:
//#################################################################
//# Comment:
{{indent comment " //# "}}
//# Line after Comment
//#################################################################
The following JSON is used the helper call:
var my_json = {
"data": {
"classname": "NewClass",
"superclassname": "MySuperClass",
"methods": [
{
"visibility": "private",
"name": "create",
"comment":"one line \nsecond line\nthird line"
}
},
"settings": {
}
};
The compiler call Handlebars4Code.compile.mytpl(my_json)
for the JSON data my_json
and the template generates the following code:
//#################################################################
//# Comment:
//# one line
//# second line
//# third line
//# Line after Comment
//#################################################################
The build process is called by npm run build
which in turn call build.js
. If you want to call the build process of build.js
separately just call build.js
with node build.js
from the shell/console.
The templates for building the output are stored in the folder src/
.
After the build process the README.md
is generated and if you want to have the table of contents in the file for the concatenation of files in src/readme/
listed in files4build.js
then you must run the DocToc generator for README.md
by doctoc README.md
from the shell to update the table of contents in README.md
.
The NodeJS modules can use require()
-command. Browsers cannot execute the require()
-command and other node specific programming features.
Browserify
loads the filesrc/main.js
as input file and resolves e.g. therequire()
-command and creates an output file indist/xml2code.brows.js
Watchify
observes any changes in the source files insrc/
and starts on the event of changes the build process of the filesrc/main.js
as input file and creates an output file indist/xml2code.brows.js
.UglifyJS
compresses the code indist
and takes the filedist/xml2code.js
and generates the compressed library indist/xml2code.min.js
. The same is applied fordocs/js/xml2code.js
and the output isdocs/js/xml2code.min.js
. The compression of the source code can be perform without a total build bynpm run compress
.
Browserify and Watchify are used in this repository to control the WebApp-javascript development with the required Javascript libraries installed with NPM Node.js and similar framework world that greatly improve your javascript workflow: Using them, you no longer need to micro-manage your script tags but instead you just declare the libraries each of your client-side modules is using - or you can even create your own reusable modules! Also, installing (or updating) javascript libraries is as easy as running a single command!
- Additional Information about Browserify and Watchify on GitHub
- Youtube Video about Browserify and Watchify by Kyle Robinson Young 2015/04/16 In this repository Browserify and Watchify are used for javascript code development with NPM Node.js.
Requirement: NPM is intalled. Now call for global installation of Browserfy, Watchify, UglifyJS and DocToc by:
npm install -g browserify watchify uglify-js doctoc
This is recommended because your will not install Browserfy, Watchify and UglifyJS for all your repositories separately.
- Browserfy converts
node_modules
in a single library, that can be imported in WebApp. Browserify resolves dependencies and included the required libraries into the bundled javascript code. - Watchify watches changes in the source code and runs the build process whenever it detects changes in the your source code.
- UglifyJS compresses the source code of
dist/class_editor_uml.js
intoclass_editor_uml.min.js
to reduce download time and WebApp performance during load. - DocToc is used to create a helpful table of contents in the README (see [DocToc-Installation]https://github.com/thlorenz/doctoc#installation) for further details on NPM DocToc ). Run
doctoc README.md
for updating the table of contents. - jsLint is used to check the Javascript code, quality of code can be improved by application of jsLint
If your prefer that browserify and watchify is installed with your npm install
command, save these to modules to your dev-dependecies in your package.json
by calling
- (Install Browsersify)
npm install browserify --save-dev
- (Install Watchify)
npm install watchify --save-dev
- (Install UglifyJS)
npm install uglify-js --save-dev
- (Install DocToc)
npm install doctoc -g
- (Install jshint)
npm install jslint -g
The difference between --save
and --save-dev
is, that development dependencies are installed with npm install
because they are required for the development process of the code but they are not added to the generated Javascript-bundle that are used in the WebApp ClassEditorUML. The --save-dev
commands for browserify
and watchify
will install the two modules with all the the dependencies in node_modules
and add the dev-dependencies to your package.json
.
"devDependencies": {
"browserify": "^14.5.0",
"watchify": "^3.9.0",
"uglify-js": "^2.6.2",
"doctoc":"^1.3.0",
"lint": "^1.1.2"
}
In the current repository Browserfy
and Watchify
are expected to be installed globally, because the package.json
does not contain the dev-dependencies mentioned above.
Watchify will trigger the npm run build
process if files were change due to alteration of code. To start watching the files, run the npm-watch script by npm run watch
, which is defined in package.json
The main JS source file for the build process is src/main.js
. The output library (resp. output file of build process) is stored in distrubtion library for browser based web-development in dist/xml2code.js
. Compressed code is generated with UglifyJS
. It takes the dist/xml2code.js
as input file and creates the compressed file dist/xml2code.min.js
.
The compression of dist/xml2code.js
into dist/xml2code.min.js
uses uglify-js
module and can be started by
npm run compress
Special thanks to the following individual developers and teams of OpenSource JavaScript projects:
- HandleBars the code generation in Javascript was implemented
- JSON-Editor by Jeremy Dorn. The JSON Editor takes a JSON Schema and uses it to generate an HTML form. The JSON-Editor is partially used to edit JSON file of the JavascriptClassCreator Project
JSCC
. The JSON-Editor of Jeremy Dorn has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, foundation, and jQueryUI). This would lead to major code reduction ofJSCC
. Refactoring ofJSCC
would make more use of the JSON-Editor features. Check out an interactive demo (demo.html): http://jeremydorn.com/json-editor/ - Developer Mihai Bazon create UglifyJS, a great tool to handle and parse Javascript Code and minify the Javascript code (see Source Code of UglifyJS).
- The wrapper for UglifyJS is written Dan Wolff. His UglifyJS-Online example is used to minify/compress the exported Javascript code of generated JS Classes (For Online Example of the UglifyJS-Wrapper see source code on https://github.com/Skalman/UglifyJS-online for the Online-Version of the Wrapper.
- Developers of ACE Code Editor https://ace.c9.io (Javascript Editing uses the Editor in iFrames)
- FileSaver.js Developer Eli Grey provided the
FileSaver.js
that is used to store createdJSCC
files to the local filesystem.JSCC
uses the same mechanism of browsers, that allows aSave as...
in the context menu of a web pages or image. So not uncontrolled write access to your file system is implemented, because users have to select the locations in which the user whats to store the file (e.g. JSON, Javascript or HTML). - JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams. JointJS is used in this project to create UML-diagrams, that are interactive diagramming in conjunction and application builder in Javascript.
- Inheritage for JavaScript with protoypes by Gavin Kistner
- 3 ways to define a JavaScript class by Stoyan Stefanov
- JQuery is used for the theme and standard operations in the Document Object Model (DOM) of HTML-pages. The JQuery-Themeroller was used to create a JQuery theme for JSCC.
The following libraries are necessary for xml2code.js
:
- Lib:
uglify-js
Version:^2.6.2
The following libraries are necessary for building the xml2code
.
These libraries are not included in xml2code.js
, but e.g. are required in build.js
.
- Lib:
browserify
Version:^14.5.0
- Lib:
concat-files
Version:^0.1.1
- Lib:
doctoc
Version:^1.3.0
- Lib:
watchify
Version:^3.9.0
- Lib:
jsdom
Version:^13.1.0
- Exported Module Variable:
XML2Code
- Package:
xml2code
- Version:
0.0.1
(last build 2018/12/26 6:26:44) - Homepage:
https://github.com/niebert/XML2Code#readme
- License: MIT
- Date: 2018/12/26 6:26:44
- Require Module with:
const vXML2Code = require('xml2code');
- JSHint: installation can be performed with
npm install jshint -g