75f7629b52
Merge all tmpl |
||
---|---|---|
.. | ||
scripts | ||
src | ||
test | ||
.eslintrc | ||
.gitignore | ||
README.md | ||
jest.config.js | ||
manifest.json | ||
package.json | ||
rollup.config.js | ||
tsconfig.json | ||
yarn.lock |
README.md
String templating
This package provides a common system for string templating across the Budibase Builder, client and server. The templating is provided through the use of Handlebars an extension of Mustache which is capable of carrying out logic. We have also extended the base Handlebars functionality through the use of a set of helpers provided through the handlebars-helpers package.
We have not implemented all the helpers provided by the helpers package as some of them provide functionality we felt would not be beneficial. The following collections of helpers have been implemented:
- Math - a set of useful helpers for
carrying out logic pertaining to numbers e.g.
avg
,add
,abs
and so on. - Array - some very specific helpers
for use with arrays, useful for example in automations. Helpers like
first
,last
,after
andjoin
can be useful for getting particular portions of arrays or turning them into strings. - Number - unlike the math helpers these
are useful for converting numbers into useful formats for display, e.g.
bytes
,addCommas
andtoPrecision
. - URL - very specific helpers for dealing with URLs,
such as
encodeURI
,escape
,stripQueryString
andstripProtocol
. These are primarily useful for building up particular URLs to hit as say part of an automation. - String - these helpers are useful for building
strings and preparing them for display, e.g.
append
,camelcase
,capitalize
andellipsis
. - Comparison - these helpers are mainly for
building strings when particular conditions are met, for example
and
,or
,gt
,lt
,not
and so on. This is a very extensive set of helpers but is mostly as would be expected from a set of logical operators. - Object - useful operator for parsing objects, as well as converting them to JSON strings.
- Regex - allows performing regex tests on strings that can be used in conditional statements.
- Date - last but certainly not least is a moment based date helper, which can
format ISO/timestamp based dates into something human-readable. An example of this would be
{{date dateProperty "DD-MM-YYYY"}}
.
Date formatting
This package uses the standard method for formatting date times, using the following syntax:
Input | Example | Description |
---|---|---|
YYYY | 2014 | 4 or 2 digit year. Note: Only 4 digit can be parsed on strict mode |
YY | 14 | 2 digit year |
Y | -25 | Year with any number of digits and sign |
Q | 1..4 | Quarter of year. Sets month to first month in quarter. |
M MM | 1..12 | Month number |
MMM MMMM | Jan..December | Month name in locale set by moment.locale() |
D DD | 1..31 | Day of month |
Do | 1st..31st | Day of month with ordinal |
DDD DDDD | 1..365 | Day of year |
X | 1410715640.579 | Unix timestamp |
x | 1410715640579 | Unix ms timestamp |
Template format
There are two main ways that the templating system can be used, the first is very similar to that which would be produced by Mustache - a single statement:
Hello I'm building a {{uppercase adjective}} string with Handlebars!
In the statement above provided a context of {adjective: "cool"}
will produce a string of Hello I'm building a COOL string with Handlebars!
.
Here we can see an example of how string helpers can be used to make a string exactly as we need it. These statements are relatively
simple; we can also stack helpers as such: {{ uppercase (remove string "bad") }}
with the use of parenthesis.
The other type of statement that can be made with the templating system is conditional ones, that appear as such:
Hello I'm building a {{ #gte score "50" }}Great{{ else }}Bad{{ /gte }} string with Handlebars!
In this string we can see that the string Great
or Bad
will be inserted depending on the state of the
score
context variable. The comparison, string and array helpers all provide some conditional operators which can be used
in this way. There will also be some operators which will be built with a very similar syntax but will produce an
iterative operation, like a for each - an example of this would be the forEach
array helper.
Usage
Usage of this templating package is through one of the primary functions provided by the package - these functions are as follows:
processString
-async (string, object)
- given a template string and a context object this will build a string using our pre-processors, post-processors and handlebars.processObject
-async (object, object)
- carries out the functionality provided byprocessString
for any string inside the given object. This will recurse deeply into the provided object so for very large objects this could be slow.processStringSync
-(string, object)
- a reduced functionality processing of strings which is synchronous, like functions provided by Node (e.g.readdirSync
)processObjectSync
-(object, object)
- as with the sync'd string, recurses an object to process it synchronously.makePropSafe
-(string)
- some properties cannot be handled by Handlebars, for exampleTable 1
is not valid due to spaces found in the property name. This will update the property name to[Table 1]
wrapping it in literal specifiers so that it is safe for use in Handlebars. Ideally this function should be called for every level of an object being accessed, for example[Table 1].[property name]
is the syntax that is required for Handlebars.isValid
-(string)
- checks the given string for any templates and provides a boolean stating whether it is a valid template.getManifest
- returns the manifest JSON which has been generated for the helpers, describing them and their params.
Development
This library is built with Rollup as many of the packages built by Budibase are. We have built the string templating package as a UMD so that it can be used by Node and Browser based applications. This package also builds Typescript stubs which when making use of the library will be used by your IDE to provide code completion. The following commands are provided for development purposes:
yarn build
- will build the Typescript stubs and the bundle into thedist
directory.yarn test
- runs the test suite which will check various helpers are still functioning as expected and a few expected use cases.yarn dev:builder
- an internal command which is used by lerna to watch and build any changes to the package as part of the mainyarn dev
of the repo.
It is also important to note this package is managed in the same manner as all other in the mono-repo, through lerna.