thorn0 / babel-plugin-transform-ng1-jsx

Type-checked templates for Angular 1
MIT License
1 stars 4 forks source link

Support expression that works like in template string #3

Open kindy opened 7 years ago

kindy commented 7 years ago

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.

thorn0 commented 7 years ago

May I ask, what's your interest in these changes? Are you going to use this code somehow? It's just a proof of concept of an approach that might have worked out, but see the "Issues / TBD" section of the readme:

Type-checking component attributes. This one currently is a big show stopper. TypeScript almost (but not quite) allows this. See the comments in ng1-jsx.d.ts.

If component attributes aren't type-checked, this approach is pretty useless.