Custom languages

Custom languages are supported and can be defined in your build process by passing arguments to this plugin via your babel config.

Note This is a first pass at adding custom languages and for now is over simplified. Expect breaking changes.

Defining a custom lanaguage

A custom language doesn't have be a different language to the ones we provide, but also allows you add your own modifications, such as escaping functions, and variable names that are output.

This is an example of a custom language which includes the WordPress escaping function esc_html() in the PHP output, otherwise, it is an exact copy of the php language supplied with this plugin:

All language files are supplied in JSON format.

{
	"variables": {
		"context": "$[%_context_]",
		"subcontext": "$[%_subcontext_]",
		"variable": "$[%_context_]['[%_variable_]']",
		"subvariable": "$[%_subcontext_]['[%_variable_]']"
	},
	"replace": {
		"format": "<?php echo esc_html( [%variable], ENT_QUOTES ); ?>"
	},
	"list": {
		"open": "<?php foreach ( [%variable] as [%subcontext] ) { ?>",
		"close": "<?php } ?>",
		"objectProperty": "<?php echo esc_html( [%subvariable], ENT_QUOTES ); ?>",
		"primitive": "<?php echo esc_html( [%subcontext], ENT_QUOTES ); ?>"
	},
	"control": {
		"ifTruthy": {
			"open": "<?php if ( [%variable] ) { ?>",
			"close": "<?php } ?>"
		},
		"ifFalsy": {
			"open": "<?php if ( ! [%variable] ) { ?>",
			"close": "<?php } ?>"
		},
		"ifEqual": {
			"open": "<?php if ( [%variable] === [%variable] ) { ?>",
			"close": "<?php } ?>"
		},
		"ifNotEqual": {
			"open": "<?php if ( [%variable] !== [%variable] ) { ?>",
			"close": "<?php } ?>"
		},
		"else": {
			"open": "<?php else { ?>",
			"close": "<?php } ?>"
		}
	}
}

Variables

Variables are a way to create your own custom tags. Define a variable in the variables section:

"variables": {
	"aformattedvar": "$[%_subcontext_]['[%_variable_]']",
},

Then you can use it in the rest of your language definition - [%aformattedvar]:

"replace": {
	"format": "<?php echo esc_html( [%aformattedvar], ENT_QUOTES ); ?>"
},

Reserved variable names

There are 3 variables you can use:

• _variable_
• _context_
• _subcontext_

You should be able to use these and custom variables to compose a language.

---

To register and use this language, there are two ways to do this.

For both methods, the above language definition must be added to a custom file.

1. Create a .tvlang file in the root of your project

./.tvlang With the above json - and do not supply a language argument to the plugins initialisation, eg:

plugins: [ 
	'babel-plugin-jsx-template-vars',
],

The file will be detected and used automatically.

2. Use a custom name and location for your language definition

We could use ./includes/mylang.json

To instruct this plugin to use the definittion, we just need to supply a path to the file:

plugins: [ 
	[ 'babel-plugin-jsx-template-vars', { customLanguage: './includes/mylang.json' } ],
],