Generate HTML code using powerful TypeScript code generation templates! This extension contains a code writer and other utilities that make is easier to generate HTML code from a Yellicode template.
License: MIT
Yellicode lets you build your own code generation templates with TypeScript. It consists of a Node.js CLI and extensible APIs, making it easy for developers to create, share and re-use code generators for their favorite programming languages and frameworks.
Check out our website for more.
In order to run a code generation template, you must have the CLI installed (@yellicode/cli) globally and have a valid codegenconfig.json file in your working directory. Please refer to the installation instructions and the quick start for more.
Open a terminal/command prompt in your working directory and install this package as a dev dependency:
npm install @yellicode/html --save-dev
This basic example generates a HTML file containing a Bootstrap form for each class in the model. For a more advanced example with Angular support, check out the Yellicode bookstore tutorial. In order to run this example, you should also have the @yellicode/elements package installed in your working directory:
npm install @yellicode/elements --save-dev
import * as elements from '@yellicode/elements';
import { Generator } from '@yellicode/templating';
import { TextWriter, NameUtility } from '@yellicode/core';
import { HtmlWriter } from '@yellicode/html';
/**
* Generates the contents of a Bootstrap form-group for the provided property.
*/
const formGroupTemplate = (writer: HtmlWriter, att: elements.Property) => {
const htmlInputId = NameUtility.camelToKebabCase(att.name);
const isRequired = att.isRequiredAndSinglevalued();
// Common attributes
const htmlAttributes = {
id: htmlInputId,
name: att.name,
required: isRequired
};
// Label
writer.writeElement('label', { attributes: { for: htmlInputId } }, att.name);
// Input
let htmlInputType: string;
if (elements.isPrimitiveBoolean(att.type)) {
htmlInputType = 'checkbox';
}
else if (elements.isPrimitiveInteger(att.type)) {
htmlInputType = 'number';
}
else htmlInputType = 'text';
htmlAttributes['type'] = htmlInputType;
writer.writeElement('input', {classNames: 'form-control', attributes: htmlAttributes});
}
/**
* Generates a Bootstrap form for the provided model Class.
*/
const formTemplate = (writer: HtmlWriter, c: elements.Class) => {
const allAttributes = c.ownedAttributes;
writer.writeElement('form', {}, () => {
allAttributes.forEach((att) => {
writer.writeElement('div', { classNames: 'form-group' }, () => {
formGroupTemplate(writer, att);
});
});
// Action buttons
writer.writeElement('button', {
classNames: 'btn btn-primary float-right',
attributes: {
type: 'submit'
}
}, 'Save');
writer.writeElement('button', {
classNames: 'btn btn-danger',
attributes: {
type: 'submit'
}
}, 'Delete');
});
}
Generator.getModel().then((model: elements.Model) => {
model.getAllClasses().forEach((eachClass) => {
Generator.generate({ outputFile: `${eachClass.name}.html` }, (textWriter: TextWriter) => {
const htmlWriter = new HtmlWriter(textWriter);
formTemplate(htmlWriter, eachClass);
});
});
})For all HtmlWriter functions and options, check out the API documentation.