Improve sub-lange support for template literals

💡 Ideas
26

To whom it might concern, I've given template literals tag a chance to represent the ESX tokenizer I've discussed and proposed in the other thread.

I am pretty pleased so far about its outcome, performance, and features, and I think I have found a very handy, yet portable, way to have scoped components within esx tag, and through the main factory function.

In a nutshell:

import {ESX, Token} from '@ungap/esx';

// the factory function accepts an object
// that will be used to tokenize components
const esx = ESX({MyComponent});

esx`
  <div data-any="value">
    <MyComponent a="1" b=${2} />
  </div>
`;

function MyComponent(props, ...children) {
  // note: props doesn't need ${...props} or ...${props}
  //       because any value can be passed as interpolation
  return esx`
    <div ${props}>
      ${children}
    </div>
  `;
}

If I had full highlight in my IDE I most likely wouldn't even notice I am using a template literal tag and no ESX through its Babel's transformer + there are benefits around cross-realm / client / server / IoT applications possible through the serialization helpers around this module.

Any feedback welcome, it's possible that "upsetting me" in the other thread made me create a wonderful new pattern and general purpose tokenizer for XML like structures or, at least, what I came up with is extremely close to what I wanted previously with the Babel ESX transformer, except here I haave the uniqueness provided by the template, and structs / tokens are always unique by default, being these outer tokens, or inner tokens, everything is created once and never again, but interpolation and/or dynamic attributes values are updated on repeated invokes of the same template.

3 Likes