Source-template NPM

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' } } />
    )
}
...

2) 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 options0.value, options1.value, , options2.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}  />
    )
}
...

3) 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

template