thorn0 / babel-plugin-transform-ng1-jsx Goto Github PK

let's say we have a normal Angular template like this:

{
  template: `<div>
    <h1
       class="${ classes.title }"
       ng-click="$ctrl.doAction($event)"
       >{{ $ctrl.title }}</h1>
  </div>`
}

we can write it in JSX like this, but the class name is hard to support:

{
  template: (<div>
    <h1
       class="????"
       ngClick={
         ({$event})=> $ctrl.doAction($event)
       }>{ $ctrl.title }</h1>
  </div>)
}

I think there are 2 solutions for this:

1. inject/save classes into controller(or $scope), then use it in runtime (need to change controller);
2. output JSX to template string instead of normal string, and inject our classes expression to ${} in template string (but we need to handle more edge case for special characters);

we can use solution 1 without change our transformer, but will make component code dirty.

and seems solution 2 is not too easy to implement. even we can use string concat instead of template string.