ng files

[lennerd]

Wouldn't it be cool to have something similar to Vues vue files?

Something like this:

<!-- count.component.ng -->
<script>
     import { use } from "@mmuscat/angular-composition-api";

     function setup() {
          const count = use(0)
          const countChange = use(count)
  
          function increment() {
               countChange(count() + 1)
          }
  
          return {
             increment,
             count,
             countChange,
          }
     }

     export {
          selector: 'app-counter',
          setup,
          inputs: ["count"],
          outputs: ["countChange"],
     }
</script>

{{ count }}

<button (click)="increment()">Increment</button>

I know that this would mean a lot of problems to solve first: like custom Webpack loaders, IDE or code editor support, etc.

Just wanted to share this idea to see what you think.

[antischematic]

Definitely outside the scope of this project. Though you can already do something similar with Angular.

@Component({
  template: `
    <div>{{text}}<div>
  `,
  styles: [`
    :host {
      color: red
    }
  `]
})
export class MyComponent extends ViewDef(() => {
  const hello = use("Hello")
  return {
    text
  }
}) {}