Source Template

Is a source code generator based in simple templates system.

The Main Idea is have a template for your common taks and generate your code faster.

And provide a better and comfortable way to share the configuration files for your open source projects.

e.g.

I used have a txt file with the next information:

sudo mkdir -p /var/www/<my.domain.com>/httpdocs
sudo chown -R $USER:$USER /var/www/<my.domain.com>/*
sudo chmod -R 755 /var/www/<my.domain.com>

sudo nano /etc/apache2/sites-available/<my.domain.com>.conf

<VirtualHost *:80>
    ServerAdmin info@<my.domain.com>
    ServerName <my.domain.com>
    ServerAlias www.<my.domain.com>
    DocumentRoot /var/www/<my.domain.com>/httpdocs
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
<Directory "/var/www/<my.domain.com>/httpdocs ">
    AllowOverride All
</Directory>

sudo a2ensite <my.domain.com>
sudo service apache2 restart

and any time I need to create a new domain, and I replace <my.domain.com> and then I used the code.

Looks no so hard, but what happen when the templates are much complex and longer

Source Template solve this problem creating a way to detect all replaceable data and asking you one by one and give a usable result, in clipboard or in downloadable files

Install

#if it has not been installed
npm install --save react 
npm install --save react-dom 
npm install --save simpl-schema 

#install 
npm install --save source-template

Templates

Source Template use https://handlebarsjs.com/ and use the same principle. For now only 3 blocks are implemented, (is very easy to implement more, and I will, when these are necessary)

1. Simple replace Just wrap the value inside '{{' '}}'

e.g.

...
render(){

    return (
        <MyComponent prop1={ {{prop1}} }  prop2={ '{{prop2}}' } />
    )
}
...

Here the component will ask you for pro1 && prop2 value and will return:

...
//you enter prop1='5' and prop2='19'
render(){

    return (
        <MyComponent prop1={ 5 }  prop2={ '19' } } />
    )
}
...

1. Loops Create a block {{#each options}}values of options {{value}}{{/each}} where optioms is a array like [{value:'value1'},{value:'value2'}]

e.g.

...
render(){
    const options=[
        {{#each options}}
            '{{value}}',
        {{/each}}
    ]
    return (
        <MyComponent options={options}  />
    )
}
...

Here the component will ask you for options[0].value, options[1].value, , options[2].value... and will give you

...
//you enter options[0].value='1', options[1].value='2', , options[2].value='3'
render(){
    const options=[
       '1',
       '2',
       '3',
    ]
    return (
        <MyComponent options={options}  />
    )
}
...

1. If Create a block {{#if condition}}If line only will be printer if cond is a true value{{/each}} where condition is any value of other var

e.g.

{{#if useComponent1}}
import MyComponent1 from './MyComponent1'
{{else}}
import MyComponent2 from './MyComponent2'
{{/if}}
...
render(){
   
    return (
        {{#if useCompoent1}}
            <MyComponent1 options={[0,1,2]}  />
        {{else}}
            <MyComponent2  options={[0,1,2]}   />
        {{/if}}
    )
}
...

Here the component will ask you for useComponent1... and will give you

...
//you enter useComponent1 'no' or false or  any false value
import MyComponent2 from './MyComponent2'
...
render(){
   
    return (
            <MyComponent2  options={[0,1,2]}   />
    )
}
...

The example above can be simplify:

import {{YourComponent}} from './{{YourComponent}}'
...
render(){
   
    return (
            <{{YourComponent}} options={[0,1,2]}  />
    )
}
...

Advance template

You can set advanced features to teplate fields with comments. Source Template use https://www.npmjs.com/package/doctrine a http://usejsdoc.org/ parser

Use @param tag for set your advanced features anywhere in the code, together or separated

e.g.

/**
 * @param {string=} value - there the description of value
 */

• Where 'value' is the name of the field bettwen {{ }}
• Where 'string' is the field type in the form, can be 'val1'|'val2'|'val3' for enum (select)
• Where '=' determine if is optional or not, omit for required

React Component

import React from 'react'
import SourceTemplate from 'source-template'
import buildQuery from './buildQuery'
import saveTemplate from './saveUserData'
import saveData from './saveData'
 
const MyComponent=()=>{
    const data={
        Collection: 'Meteor.users',
        publicationName: 'users'
        }
    const publicationsTemplate=`
    Meteor.publish('{{publicationName}}',function(filters,limit){
        const query=buildQuery(filters)
        return {{Collection}}.find(query,{limit})
    }
    `
    const onTemplateChange=(data)=>saveTemplate(data)
    const onDataChange=(data)=>saveData(data)
    return (
        <SourceTemplate data={data} allowEdit={true} template={publicationsTemplate} onDataChange={onDataChange} onTemplateChange={onTemplateChange}/>
    )
}

SourceTemplate accept 4 properties

• template Required String. String with source code handlebar style template

• data* Dummy data for showing propouse

• onTemplateChange Called when the user change the template, probably you don't need to use this if your are sharing your template,

• onDataChange Called when the user fill the form and submit, the idea is save this data in a parent component for example and shared among the other templates with the same fields

Contribute

Every help or suggest is welcome

And please help me with the english