federalies / templast

a unist compliant syntax tree for template languages
MIT License
4 stars 0 forks source link

templast logo

Template Abstract Syntax Tree (aka: templast )

a unist compliant syntax tree spec for templating languages

Why

Because there are plenty of "components" and views that are really nice but only available in some other template engine. It would be nice to make a bridge to common ground such that the template langauge could be ported to templast which would unlock a world of templates, view, components such that I am not limited to my epression types based on some historical choice of template language I learned.

Install

npm i @federa/templast @federa/templast-cli -D

Usage

pipe it in

$> cat someTemplate.hbs | npx templastCLI -c config.js > someTemplate.apacheVTL

use the command line args

$> npx templastCLI -c config.js -i someTemplate.hbs -o someTemplate.apacheVTL

redirect a file in

$> npx templastCLI -c config.js < someTemplate.hbs > someTemplate.apacheVTL

use the lib/module in with es modules

import templast from '@federa/templast'
import hbsParse from '@federa/handlebars-parse'
import vtlStringify from '@federa/vtl-stringify'
import vfile from 'to-vfile'

templast()
  .use(hbsParse)
  .use(vtlStringify)
  .process(vfile('./myexmaple.hbs')) // or change it to a real handlebars example

use the lib/module in within node

const vfile = require('to-vfile')  
const templast = require('@federa/templast') 
const hbsParse = require('@federa/handlebars-parse') 
const vtlStringify = require('@federa/vtl-stringify')

templast()
  .use(hbsParse)
  .use(vtlStringify)
  .process(vfile('./myexmaple.hbs')) // or change it to a real handlebars example

Wait What?

If you deal with enough template languages it would be nice to be able to move back and forth as much as is possible.

For exmaple Mustache template for example would not easily/beautifully support all the features from a handlebars template but for many other types it would be very nice.

the AST would need to support

AST Proposal

To give some assurances that this AST works well, it should be demonstrated that many template languages fit into the paradigm.

Handlebars Support

mustache Support

doT Support

apacheVTL Support

js Tempalte Literals Support

js template literals are stringified as a function that receives input data and pumps them into a string that mixes in the data. SUPER NICE because it is a least common demoninator, for just looking at the markup, for any server side rendering environment,

const t = (data)=>`some text ${data.attr} with more static content`

virtual DOM support

/** @jsx Preact.h */
import attrs from 'myCSSinJSfile.js'
const t = (data) => h('div',attrs.div, [
                        h('div', attrs.div, [
                            h('h3', attrs.h3, data.title )
                        ]), 
                        h('form', attrs.form, 
                        h('input','button',data.buttonText)
                    ])

EJS Support

JADE Support

Roadmap

Usage

npm start will download a ton of other git repos into the packages folder. Where each of the packages have their own repo and lifecycle.

Then use the npx meta command to manage all those sub-repos in some type of lerna-overlord-style

PIPEDREAMS

means that an .mdx file is really a fancy JS file a certain type of JS file that has some convention allowing it to be rendered when invoked with proper context

Handlebar Exmaple

What's the difference in a partial and a helper? other than the partial is often requiring a template fetch.

SCRATCH PAD

parserconfig for every *-parse expandPartials = true partialsProvided = {} partialsResolverFunction = ()=>{} configDelimiters =null = auto/default

    handlebars.parse( string ): AST
    hbs.AST.MustacheStatement 
    hbs.AST.BlockStatement 
    hbs.AST.PartialStatement 
    hbs.AST.PartialBlockStatement 
    hbs.AST.ContentStatement 
    hbs.AST.CommentStatement 
    hbs.AST.SubExpression 
    hbs.AST.PathExpression 
    hbs.AST.StringLiteral 
    hbs.AST.BooleanLiteral 
    hbs.AST.NumberLiteral 
    hbs.AST.UndefinedLiteral 
    hbs.AST.NullLiteral 
    hbs.AST.Hash 
    hbs.AST.HashPair

Engines Considered:

Can you view MDX as a fancy system of tons of partials?

If so what if templates that rendered HTML <div> etc... </div> could also render a virtual dom via h functions?

What if you could easily make interop on things that usually render a virtualDOM? - and coerece them to render strings?

Handlebars Support

hbs-parse // HBS source --> TASTY verify-hbs // TASTY --> HBS dialect hbs-stringify --> HBS Dialect --> string

mustache Support

mustache-parse verify-mustache // assigns warnings or failures to the template if the source file was from some other template system and is now going to be rendered as a mustache file. mustache-stringify

apacheVTL Support

apacheVTL-parse verify-apacheVTL apacheVTL-stringify

doT Support

doT-parse verify-doT doT-stringify

jsTempalteLiterals Support

jsTemplateLiterals-parse verify-jsTemplateLiterals jsTemplateLiterals-stringify