1. Overview
The Hyperpiler is a reinvention of no-code tools. Current no-code tools require customers to enter certain settings, and then execute those settings through a complicated series of if/thens. This has two major limitations. The first limitation is that programming the ifs/thens becomes exponentially complex as features increase, which stalls development. The second limitation is that executing the settings through ifs/thens is noticably slow, which reduces usability. The Hyperpiler solves these two problems with a novel approach: customers enter settings similar to current no-code programs, but instead of ifs/thens, the Hyperpiler returns an actual executable program that is indistinguishable from manually written code. Generated code can be in any language, any style, any framework, or no framework at all. The generated code and function is entirely up to the provider who writes small "segments" of code that are assembled to form sophisticated programs from simple rules according to customer inputs. The hyperpiler is protected by U.S. patents 10,853,062 and 10,942,709 with additional U.S. and international patents pending. For more information, contact us at info@hyperpiler.com.
2. Visualizer
The best way to understand the Hyperpiler method is with our visualizer. The visualizer displays each component of a Hyperpiler preconfigured to generate a PHP/JavaScript/HTML email form. You can use the visualizer to alter this configuration to generate any type of program in any programming language. In practice, most of the components of the visualizer would be hidden from your customers, but we display them here for learning purposes.
spec Elements are an array of objects, typically submited by your customer, that contains the customized information to generate a custom program.
Rules are applied to the spec Elements to generate Processed Elements.
Processed Elements are generated from the application of the Rules to the spec Elements after you click Build. You cannot manually edit these. You must modify the appropriate rule or spec element and click Build again in order to change these.
Segments are snippets of code that will be arranged to generate the program.
Build is a button located above the Processed Elements and Program boxes that runs the Hyperpiler and generates a program.
Filter box is located at the top of the page. You can quickly find an element/segment by entering a string here. This will hide all elements/segments that do not contain that string.
Filter icon will appear as 🝖 next to elements after you click Build. Click the filter icon to show only other elements which effect the given element. For example, clicking the filter icon next to a rule will show only spec elements that match that rule and only processed elements that were modified or generated by that rule. This helps in tracing how the different pieces of the configuration interact.
3. spec
The hyperpiler method starts with a customer's spec. The spec is an array of elements, each element comprising simple key-values. An element represents an idea to be included in the generated program. A key-value is a customizable setting for that element. Key names and values are mostly arbitrary to your configuration. However, there are two key names that have significance. Each spec element must have a unique id key-value. And each spec must have a type key-value - which groups elements with similar keys and purposes.
In the visualizer, you manipulate the elements and values of your spec freely. In practice, you would build a more user-friendly graphical interface for your customers. You can store specs in any format that suits your system, including a JSON document or rows in a relational database. Example spec in JSON:
[
{
id: 1,
type: cell,
width: 200,
height: 20,
tableid: 2
},
{
id: 2,
type: table,
color: red
}
]
4. Rules
The hyperpiler requires a list of rules, each rule is applied to each spec element. Should the spec element satisfy the rule's conditions, then the rule performs some action. Each rule is composed of a series of lines. Rules may have as many lines as needed. Each line has three parts: an operator, a key, and a value:
operator key value
if type cell
ifless width 100
ifnotword title hello
do mod self
set goodbye true
There are three types of lines in a rule, each is discussed in a subsection below.
Conditional Lines
First there are conditional lines. The hyperpiler checks which spec elements satisfy the rule's conditions. If the spec element satisfies all conditions, then the rule's action is performed. Conditional lines start with if type operators. For example, a conditional line might be if type cell which is interpreted as "if the element's type attribute equals cell." The "equals" is implied by the if operator. For other comparisions, variations of if* may be used. The line ifnot type cell is interpreted as "if the element's type attribute does NOT equal cell." Conditional operators include:
| Conditional Operator | JavaScript equivilent | Description |
|---|---|---|
| if | if (elem.key===value) {} | If key equals value |
| ifnot | if (elem.key!==value) {} | If key equals value |
| ifless | if (elem.key<value) {} | If key is less than value |
| ifgreat | if (elem.key>value) {} | If key is greater than value |
| ifstart | if (elem.key.indexOf(value)===0) {} | If key starts with value |
| ifnotstart | if (elem.key.indexOf(value)!==0) {} | If key does NOT start with value |
| ifin | if (elem.key.indexOf(value)!==-1) {} | If key contains value |
| ifnotin | if (elem.key.indexOf(value)===-1) {} | If key does NOT contains value |
| ifmatch | if (elem.key.match(/value/)) {} | If key matches the regular expression of value |
| ifnotmatch | if (!elem.key.match(/value/)) {} | If key does NOT match the regular expression of value |
| ifend | If key ends with value | |
| ifnotend | If key does NOT ends with value | |
| ifword | If key contains the word value | |
| ifnotword | If key does NOT contain the word value |
if type cell
ifless width 100
...
Do Lines
If an element satisfies all conditions of a rule, then the rule will perform some action. This action will be specified by one line in the form of do action type. There are three actions you a rule may specify.
The simplest action is do mod self. This rule will modify the satisfying entity in some way. For example:
if type cell
ifless width 100
do mod self
set height 50
This rule will set height=50 for every element already having type=cell and width<100.
The next action is do add type. This creates a new spec element at the bottom of the list and set the element's type=type (where type is the value in the line). For example:
if type cell
ifless width 100
do add segity
set color blue
set size WIDTHxHEIGHT
For every element already having type=cell and width<100, this will create a new element in the list. The new element will have type=segity (from the do add segity line) and color=blue (from the set color blue line).
The set size WIDTHxHEIGHT line has special significance as the value contains all-capitalized strings. Strings of all caps in rule values are treated as variables and will be replaced with the corresponding values from the spec element. So, for example, a spec element with width=200 and height=50 would generate a new element with size=200x50.
The next action is do mod type. This action has two steps. The rule first finds a matching element as above. The rule then uses values from this element to find subsequent matching elements to modify. Subsequent elements are found using conditions starting with modif, e.g. modifnot or modifin. The modif* operators work exactly like the conditional operators described above, except applied subsequently. For example:
if type table
do mod cell
modif celltable TABLEID
set tcolor COLOR
This rule will search for type=table. Upon finding a matching table element, it then starts looking for elements with type=cell and where celltable=TABLEID (TABLEID being the tableid value of the currently matched table element). It then sets any matching cell elements to have tcolor=COLOR (COLOR being the color value of the currently matched table element).
Command Lines
The command lines describe how the key-values of the new or modified elements should be set. The simplest command line is set key value which sets key=value, overriding any existing value for key. More command lines include:
| Command | Javascript Equivilant | Description |
|---|---|---|
| set key value | elem.key = value; | Set key to value |
| eset key value | if (typeof elem.key === undefined) elem.key = value; | "Empty set," set key to value if no value exists |
| add key value | elem.key += value; | Arithmatically add value to key |
| sub key value | elem.key -= value; | Arithmatically subtract value from key |
| append key value | elem.key += value; | Append value string to key |
| prepend key value | elem.key = value + elem.key; | Prepend value string to key |
| unset key value | delete elem.key; | Unset key |
| form key lowercase | elem.key = elem.key.toLowerCase(); | Format key as lowercase |
| form key uppercase | elem.key = elem.key.toUpperCase(); | Format key as uppercase |
| form key int | elem.key = parseInt(elem.key); | Format key as an integer |
| form key bit | elem.key = elem.key ? 1 : 0; | Format key as one or zero |
| del this elem | elem = {}; | Delete the entire element |
5. Processed Elements
The most significant type of processed element is the segity. Segities are paired with a chunk of text called a segment. Most rules rules which generate segities use the line do add segity. A segity has four special keys: id, segment, where, and order. The id key should uniquely identify the element. The segment key should correspond to the name of a segment - the element will be paired with this chunk of text and values from the element will be populated into the text. The where key should contain the id of another segity element - the element's segment text will be nested within the text of the corresponding parent where segment. Should a parent segment contain multiple children segments, the children are ordered by the order key. An example rule creating a segity:
if type cell
do add segity
set id IDsegity
set segment htmlcell
set where CELLTABLEsegity
set order CELLORD
set var_color blue
The above rule creates a new element with type=segity. The all-caps strings (ID, CELLTABLE, CELLORD) are treated as variables that will be filled by the cell element's corresponding values.
5. Segments
Segments are blocks of text that will be arranged to form your output program. Segments can contain any programming language or text you wish. Segments can be as long or as short as you wish.
htmlcell
<td style="background-color:VAR_COLOR">VAR_CHILD</td>
In the example above, the VAR_COLOR will be replaced with the specity's var_color value. The VAR_CHILD string will be where child segment text is inserted.
6. Generated Program
The generated computer program should read and execute exactly as a manually written program. The Hyperpiler is agnostic to language or functionality. The output program will be in whatever language your segments are written in and function however your rules arrange those segments together.