Including Angular >v17 signal syntax examples

[jicruz96]

Angular has introduced new signal-based primitives for state management that are likely to become the golden path moving forward, similar to how Svelte is changing their primitives between v4 and v5.

Would project maintainers consider a PR that adds Angular signal syntax examples a welcome contribution? If so, I'd be open to giving it a go.

[LcsGa]

Hi! I just discovered this awesome project and I think the same as you!
I was wondering if, like for svelte, we could add another more modern version of how we do things in angular!
I was thinking about something like angular-renaissance like they call it.
The reason why I propose another folder instead of simply modifying the current one is that, for what I know, a lot of people still use the "older" practices.

[LcsGa]

Also, the reason why I propose a name like "Angular renaissance" (or similar) is because many changes came from v14 (like inject or standalone components), v15 (host directives, the new config file, etc), v16 (signal, computed, effect), and so on!

[matschik]

From a non-Angular developer, Angular Renaissance is confusing.
If I understand well, it's Angular using signals feature so I would call it Angular with signals.
Component Party could help Angular developers to have a preview how it would be to switch from non-signals to signals.

If you want to contribute, you can maybe check this PR #234 or submit a new PR.

[LcsGa]

The thing is that it won't only be arround signals but also arround the new control flow, signals, the standalone, the new inject function, new querries, etc like:

@Component({
  standalone: true,
  imports: [Button],
  selector: 'app-root',
  styles: `
    :host {
      display: block;
      padding: 1rem;
    }
  `,
  template: `
    @for (color of colors(); track color) {
      <app-button [color]="color">{{ color }} button</app-button>
    }
  `
})
export class AppComponent {
  readonly colors = signals(['red', 'green']);

  constructor() {
    this.colors.update(colors => [...colors, 'blue']);
  }

  // and so on
}

instead of:

@Component({
  selector: 'app-root',
  styles: [
    `
      :host {
        display: block;
        padding: 1rem;
      }
    `
  ],
  template: `
      <app-button *ngFor="let color of colors; trackBy: trackByColor" [color]="color">{{ color }} button</app-button>
  `
})
export class AppComponent {
  readonly colors = ['red', 'green'];

  constructor() {
    this.colors.push('blue'); // looks simpler but considering the fact that angular is becoming zoneless, it is not + like this the perfs can be badly impacted
  }

  // I add this simply because it is now obligated with the new control flow, that also simplified it
  trackByColor(color: string) {
    return color;
  }

  // and so on
}

@NgModule({
  declarations: [AppComponent],
  imports: [Button, NgFor],
  export: [AppComponent]
})
export class AppModule {}

And there, I missed a lot of other new features that makes Angular easier that it used to be...
So Angular signals won't be "enough".
If Angular renaissance is confusing (which I understand), maybe could we call it Angular 14+. or other people liked to call it Angular 3, a little bit like when Angular v2 replaced Angular JS, since Angular 3 has never been released (but Google didn't adopt this name).
There could be other names like Angular nowadays or similar (but it seems even more confusing 😅)

[LcsGa]

About the PR #234 it is a very good basis but can be improved with other new features (like the viewChild signal based query instead of the @ViewChild decorator for example).
And the Angular17 name isn't relevant imo.
In v18.1 we now have an @let to declare template variable, which is a great addition but if people see this there, in an Angular17 folder, they will be confused as they won't be able to use it in their v17 apps.
In v18, we also finaly have default templates for content projection, which is displayed in this project too.

[LcsGa]

And what about Angular renaissance (v14+) ?
It's a little verbose but it shows the user that the Renaissance, as the Angular team themselves call it, started with angular 14 and that it is still evolving. Plus it gives a more memorable name (like angular 2 used to be).

[matschik]

Ok let's be clear, what would be responsabilities of these on Component Party:

• Angular
• Angular Renaissance

I think:

• Angular must have the syntax currently used on most Angular projects
• Angular Renaissance is the official new recommended way to write Angular Components by Angular team

What do you think ?

[LcsGa]

I think that's great!

[LcsGa]

I made all the changes (even in the "Angular" files to better show the diff with "Angular Renaissance" but:

• I can't run the dev server

pnpm run dev

> component-party.dev@2.0.0 dev /home/lucas/dev/component-party.dev
> vite

[generateFrameworkContent] Generating framework content files...
TypeError: Cannot read properties of undefined (reading 'push')
    at file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2843:40
    at async Promise.all (index 4)
    at async generateContent (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2831:7)
    at async build (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2981:7)
    at async PluginContext.buildStart (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2997:9)
    at async Promise.all (index 6)
    at async PluginContainer.hookParallel (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49481:5)
    at async PluginContainer.buildStart (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49484:5)
    at async file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63425:7
    at async httpServer.listen (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63440:9)
error when starting dev server:
TypeError: Cannot read properties of undefined (reading 'push')
    at file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2843:40
    at async Promise.all (index 4)
    at async generateContent (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2831:7)
    at async build (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2981:7)
    at async PluginContext.buildStart (file:///home/lucas/dev/component-party.dev/vite.config.js.timestamp-1721509708644-d2f6b8691061.mjs:2997:9)
    at async Promise.all (index 6)
    at async PluginContainer.hookParallel (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49481:5)
    at async PluginContainer.buildStart (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49484:5)
    at async file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63425:7
    at async httpServer.listen (file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.11_terser@5.31.3/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:63440:9)
 ELIFECYCLE  Command failed with exit code 1.

• I can't commit

git commit -m "feat(angular): update the existing files + add the new angular (renaissance) practices"
✔ Preparing lint-staged...
⚠ Running tasks for staged files...
  ❯ package.json — 66 files
    ❯ *.{js,jsx,ts,tsx,vue,gjs} — 62 files
      ✖ eslint --cache --fix [FAILED]
    ↓ **/svelte4/*.svelte — no files
    ❯ *.{js,jsx,ts,tsx,svelte,vue,html,md,css,hbs} — 64 files
      ✖ prettier --cache --write [KILLED]
↓ Skipped because of errors from tasks.
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...

✖ eslint --cache --fix:

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read config file: /home/lucas/dev/component-party.dev/.eslintrc.cjs
Error: Function.prototype.apply was called on undefined, which is a undefined and not a function
    at $o (/home/lucas/dev/component-party.dev/node_modules/.pnpm/esm@3.2.25/node_modules/esm/esm.js:1:224377)
    at wu (/home/lucas/dev/component-party.dev/node_modules/.pnpm/esm@3.2.25/node_modules/esm/esm.js:1:227324)
    at Eu (/home/lucas/dev/component-party.dev/node_modules/.pnpm/esm@3.2.25/node_modules/esm/esm.js:1:227999)
    at Module.<anonymous> (/home/lucas/dev/component-party.dev/node_modules/.pnpm/esm@3.2.25/node_modules/esm/esm.js:1:295976)
    at require (/home/lucas/dev/component-party.dev/node_modules/.pnpm/esm@3.2.25/node_modules/esm/esm.js:1:279589)
    at Object.<anonymous> (/home/lucas/dev/component-party.dev/.eslintrc.cjs:2:18)
    at Module._compile (node:internal/modules/cjs/loader:1460:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1544:10)
    at Module.load (node:internal/modules/cjs/loader:1275:32)
    at Module._load (node:internal/modules/cjs/loader:1091:12)
(node:28584) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

✖ prettier --cache --write failed without output (KILLED).
husky - pre-commit script failed (code 1)

I actually have no idea what I did wrong 😅

[LcsGa]

If you can and if you want, you can reach me on discord to find what's the issue. My username is lcsga.

[matschik]

I think there is an error on your modifications to frameworks.mjs file. Submit a PR and make it a draft.
You can commit using git push --no-verify

[LcsGa]

Okay thanks, I'll do that!

[LcsGa]

Hi @matschik, could you take a look at my draft ?

[LcsGa]

This issue can be closed now