Storybook Angular tagged template function sketch

index.ts

function ngTemplate(strings: TemplateStringsArray, ...propExpressions: any[]) {
  return strings.reduce((acc, strValue, index) => {
    acc.template += strValue;

    if (index < propExpressions.length) {
      const propKey = '__storybook_prop_' + index;
      acc.template += propKey;
      acc.props[propKey] = propExpressions[index];
    }
    return acc;
  }, {
    template: '',
    props: {}
  })
}

const doSomething = () => {};
const action = fn => fn;

const someString = 'Test';

console.dir(
  ngTemplate`<my-button>{{ ${someString} }}</my-button>`
);

/*
  {
      template: '<my-button>{{ __storybook_prop_0 }}</my-button>',
      props: {
        __storybook_prop_0: 'Test'
      }
    }
*/

console.log('\n');

console.dir(
  ngTemplate`
    <my-component (click)="${ action(() => doSomething()) }">
      {{ ${someString} }}
    </my-component>
  `
);

/*
{ 
  template: '\n  <my-component (click)="__storybook_prop_0>\n    {{ __storybook_prop_1 }}\n  </my-component>',
  props: { 
    __storybook_prop_0: [Function],
    __storybook_prop_1: 'Test' 
  }
}
*/