Including Angular >v17 signal syntax examples #241

jicruz96 · 2024-06-11T17:29:39Z

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 · 2024-07-20T13:24:42Z

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 · 2024-07-20T13:28:28Z

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 · 2024-07-20T14:13:21Z

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 · 2024-07-20T17:27:46Z

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 · 2024-07-20T17:34:39Z

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 · 2024-07-20T17:39:33Z

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 · 2024-07-20T17:43:57Z

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 · 2024-07-20T18:45:22Z

I think that's great!

LcsGa · 2024-07-20T21:19:26Z

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

> [email protected] 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/[email protected]_@[email protected][email protected]/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/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49484:5)
    at async file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/[email protected]_@[email protected][email protected]/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/[email protected]_@[email protected][email protected]/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/[email protected]_@[email protected][email protected]/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/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49484:5)
    at async file:///home/lucas/dev/component-party.dev/node_modules/.pnpm/[email protected]_@[email protected][email protected]/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/[email protected]_@[email protected][email protected]/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/[email protected]/node_modules/esm/esm.js:1:224377)
    at wu (/home/lucas/dev/component-party.dev/node_modules/.pnpm/[email protected]/node_modules/esm/esm.js:1:227324)
    at Eu (/home/lucas/dev/component-party.dev/node_modules/.pnpm/[email protected]/node_modules/esm/esm.js:1:227999)
    at Module.<anonymous> (/home/lucas/dev/component-party.dev/node_modules/.pnpm/[email protected]/node_modules/esm/esm.js:1:295976)
    at require (/home/lucas/dev/component-party.dev/node_modules/.pnpm/[email protected]/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 · 2024-07-20T21:30:11Z

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

matschik · 2024-07-20T21:41:04Z

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 · 2024-07-20T21:50:12Z

Okay thanks, I'll do that!

LcsGa · 2024-07-24T09:52:07Z

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

LcsGa · 2024-11-21T07:00:47Z

This issue can be closed now

LcsGa mentioned this issue Jul 20, 2024

feat(angular): add Angular Renaissance & update Angular snippets #245

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Including Angular >v17 signal syntax examples #241

Including Angular >v17 signal syntax examples #241

jicruz96 commented Jun 11, 2024

LcsGa commented Jul 20, 2024 •

edited

Loading

LcsGa commented Jul 20, 2024

matschik commented Jul 20, 2024 •

edited

Loading

LcsGa commented Jul 20, 2024

LcsGa commented Jul 20, 2024

LcsGa commented Jul 20, 2024

matschik commented Jul 20, 2024 •

edited

Loading

LcsGa commented Jul 20, 2024 •

edited

Loading

LcsGa commented Jul 20, 2024

LcsGa commented Jul 20, 2024

matschik commented Jul 20, 2024 •

edited

Loading

LcsGa commented Jul 20, 2024

LcsGa commented Jul 24, 2024

LcsGa commented Nov 21, 2024

Including Angular >v17 signal syntax examples #241

Including Angular >v17 signal syntax examples #241

Comments

jicruz96 commented Jun 11, 2024

LcsGa commented Jul 20, 2024 • edited Loading

LcsGa commented Jul 20, 2024

matschik commented Jul 20, 2024 • edited Loading

LcsGa commented Jul 20, 2024

LcsGa commented Jul 20, 2024

LcsGa commented Jul 20, 2024

matschik commented Jul 20, 2024 • edited Loading

LcsGa commented Jul 20, 2024 • edited Loading

LcsGa commented Jul 20, 2024

LcsGa commented Jul 20, 2024

matschik commented Jul 20, 2024 • edited Loading

LcsGa commented Jul 20, 2024

LcsGa commented Jul 24, 2024

LcsGa commented Nov 21, 2024

LcsGa commented Jul 20, 2024 •

edited

Loading

matschik commented Jul 20, 2024 •

edited

Loading

matschik commented Jul 20, 2024 •

edited

Loading

LcsGa commented Jul 20, 2024 •

edited

Loading

matschik commented Jul 20, 2024 •

edited

Loading