Breaking Down MSON Template Queries

Template Queries are dynamic templates constructed with MongoDB-style operators. They allow you to customize MSON components with less code and are very extensible. OK, but what the heck is MSON? is a low-code way to create apps from JSON. The ultimate goal of is to allow anyone to develop software visually. You can also use pieces of to turbo charge your existing apps. MSON MSON MSON A simple form component used to collect a name and email address could look like: { : , : , : [ { : , : , : }, { : , : , : } ] } name 'MyForm' component 'Form' fields name 'name' component 'TextField' label 'Name' name 'email' component 'EmailField' label 'Email' You can read more about MSON's language principles . here What are MongoDB operators? MongoDB uses an extensive query language that is written in JSON. Because this language is so powerful, a number of projects, that work independently from MongoDB, have adopted support for the query language: In-memory libraries for JS, like and . mingo siftjs Operators in . sequelize ORM Other databases, like CouchDB This query language also contains a construct for , which can be used to execute operations like , , , , etc... For example: pipeline aggregations $add $multiply $filter $map { : [ , ] } $add 1 2 A basic MSON Template Query Now that you have that background, let's take a look at an example where we extract the year from a user-provided date. Upon selecting a date with the date picker, you'll see that the field is populated: Year Let's step through this example. First, we construct a form with and fields: date year { : , : [ { : , : , : }, { : , : , : } ] } component "Form" fields name "date" component "DateField" label "Date" name "year" component "IntegerField" label "Year" Second, we listen for changes to the value, extract the year and then set the value of the field: date year { : , : ..., : [ { : , : [ { : , : , : { : { : } } } ] } ] } component "Form" fields listeners event "fields.date.value" actions component "Set" name "fields.year.value" value $year $toDate "{{fields.date.value}}" The operator is used to convert the date value, which is in milliseconds, to a date object. The operator is used to extract the year portion from the date. The action is native to MSON and is used to set the value of the field. $toDate $year Set year Pretty cool? Let's go a bit deeper... How can we make this reusable? You can create custom actions, which can then be reused. Let's assume that we want to create an action that retrieves the year from a DateField value: app.GetYear compiler.registerComponent( , { component: , schema: { : , : [ { : , : , : } ] }, value: { : { : } } }); "app.GetYear" // Extend Set, a core MSON component, that sets a // property on another component "Set" // Define the inputs to the custom action component "Form" fields name "date" component "DateField" required true // Omitting the "name" here allows the value // to be passed to the next action via // "{{arguments}}" // // name: "", // Use the template query to extract the year // from the date $year $toDate "{{date}}" We can then use this custom action in a chain of actions: form = compiler.newComponent({ : , : ..., : [ { : , : [ { : , : }, { : , : , value: } ] } ] }); const component "Form" fields listeners event "fields.date.value" actions // Extract the year and pass it to the next action component "app.GetYear" date "{{fields.date.value}}" // Use the extracted year to set the year field component "Set" name "fields.year.value" // {{arguments}} is the output of app.GetYear "{{arguments}}" Here is the completed example: Another example: a conditional survey question Let's assume that we have a survey question and we want the user to be able to enter a free response when they select : Other We define the form and hide the text field by default: covidOther { : , : [ { : , : , : , : , : [ { : , : }, { : , : }, { : , : } ] }, { : , : , : , : , : } ] } component "Form" fields name "covid" component "SelectField" label "My government's response to COVID-19 was..." fullWidth true options label "Good" value "good" label "Bad" value "bad" label "Other" value "other" name "covidOther" component "TextField" label "Please explain" multiline true hidden true If the user selects , we toggle the boolean property of the field. The operator is shorthand for . Other hidden covidOther $ne not equal listeners: [ { : , : [ { : , : , : { : [ , ] } } ] } ] event "fields.covid.value" actions component "Set" name "fields.covidOther.hidden" value $ne "{{fields.covid.value}}" "other" Why doesn't MSON support custom JS in templates? By now, you can probably see the power of Template Queries, but you may be wondering why MSON doesn't support custom JavaScript. To support custom JS in template parameters, it would require breaking two of MSON's core design principles: - Components are _compiled_ into JS objects by simply instantiating a JS object and setting the props dynamically. This method of _compilation_ allows us to avoid a transpilation step and makes it much easier to dynamically modify components. Compilation by instantiation - Components can be serialized using and stored practically anywhere. Moreover, components can be deserialized by dynamically compiling the result of . As a result, raw JS (in a string), including JS template literals, are not supported as deserializing such JS would require the use of or , which would expose a and add significant performance issues. Serialization & deserialization without eval() JSON.stringfy() JSON.parse() eval() new Function() XSS vulnerability You can read more about this reasoning . here Wrap It Up! Template Queries add a ton of capability to by providing another powerful way of customizing your components. And, they can be particularly useful in minimizing the code it takes to conditionally chain a series of actions. MSON MSON About the Author Geoff Cox is the creator of , a new declarative programming language that will allow anyone to develop software visually. He loves taking on ambitious, yet wife-maddening projects like and . MSON creating a database distributed data syncing system You can read more of his posts at or reach him or at . redgeoff.com @CoxGeoffrey Github Also published at https://medium.com/geekculture/what-are-mson-template-queries-f6a508adf8ae