@xstate/angular?

[keithernet]

Kicking off a discussion about what an @xstate/angular package would look like. My initial questions revolve around the patterns that a "blessed" library should encourage or discourage? Is it possible to build a class or a helper that makes it as simple as @xstate/React's useMachine function to integrate a machine with a component?

[keithernet]

Here's a sample repository I found to give an overview of what using XState in Angular can look like.

[Avisa-GA]

How we can generate these files?

[keithernet]

I'm not sure what you mean. Which files are you hoping to generate?

[Avisa-GA]

I got my answer from David, Thank You.

[SerkanSipahi]

I think with generate it means to generate files automated (schematics) by the angular-cli, right?

[Andarist]

I don't think that any of us have enough experience with Angular to know that ecosystem's conventions. We would be open to publishing a package like this - but it would be best if the community member could create it in this repo.

[keithernet]

My company will be embarking on a project to convert our NgRx code to XState and will likely be building a library of some sort. I can't commit my company to supporting the effort indefinitely, but we would be open to contributing the initial code and fixing issues we encounter along the way for sure. What would the process for starting up a new package look like in that regard?

[davidkpiano]

We'll write contributing guidelines for this 👍

[adevil5]

I've got some code that I never quite got working how I wanted. But basically I made useMachine, useInterpret, useSelector, and useActor functions that return RxJS observables.

I also have a StateMachineServiceBase class that wraps the useMachine function, making it easily extendable by an Angular service.

But I think it's missing something, something to make it that last bit easy to get either a global or scoped Angular service that automatically stops the XState interpretor in the OnDestroy lifecycle hook.

I'll upload it to GitHub and link it in case you want to peek at it.

[keithernet]

I am definitely not a typescript magician either so I'd need to play with it to see if it's possible.

I mostly missed the ability to define a method for a network call or something in an invoke, but I can see your point.

Thanks for following up and again for sharing the code. It at not be battle ready but it's a great way to start discussion.

[adevil5]

the ability to define a method for a network call or something in an invoke
I’m trying to understand what you mean by this. The sample TenantService angular service I have above has a fetchService method that defines a network call, and it’s passed to the machine to be invoked. I think I’m missing something.

And no problemo, anything to help out our Angular comrades.

[keithernet]

Maybe I making some silly mistake, but I didn't think it was legal to pass a class field into super because they're not accessible yet. Should this work?

[adevil5]

As far as I'm aware, you're right about not being able to call this in the super call. But you can reference this in a callback function.
Your example with one tweak

services: {
  fetchTenant: (context) => this.fetchTenant(context.hostName),
},

This code snippet taken from the larger TenantService example above shows the tenantMachine's service, fetchTenant, being set with XState's usual "(context, event) => <code>" callback pattern.

[keithernet]

Ah, that's what I missed! Thanks!

[adevil5]

I'd also like to posit a small Angular-ism in naming machine files/folders (just for @xstate/angular users). Angular folks are used to certain file/folder naming/structure conventions.

The point I feel most strongly about is a file naming convention like this: <name>.machine.ts

Additionally, because the VS Code typegen gives us an extra file, the machine file should be in a folder named after the machine, optionally nested in a machines folder if there are multiple machines where you're placing them.

Example:

• /machines
  • /image-processing
    • image-processing.machine.ts
    • image-processing.machine.typegen.ts

[keithernet]

We are currently using a separate file for the machine definition using createMachine (<name>.machine-def.ts) and the Angular service that hosts it (<name>.machine.ts) and provides implementations. This started, in part, because the VSCode plugin wasn't reliably finding the machines and offering the inspector button when it was living alongside a class however I haven't tested this recently. If that's still an issue we may just be able to ask the XState team to take a look and see if they can resolve that particular issue.

[adevil5]

Oh, to be clear I'm just talking about the machine definition file above. If I want to wrap the machine in a global angular service, I'd put it in a separate file in the same folder.

• /machines
  • /image-processing
    • image-processing.machine.ts
    • image-processing.machine.typegen.ts
    • image-processing.service.ts

I didn't want to have a standard that combined the machine and Angular service in one file, in case we wanted to host a machine in a component or directive, to live and die with their lifecycle.

[keithernet]

Yep, makes sense!

[tzkmx]

In our company xstate is replacing not a structured state management beyond Angular using Rx itself.

The easiest way so far has been vanilla services, in many cases exposing Observables and methods to change that state.

Therefore we are testing approaches like injecting the machine interpreted as the service itself (without Injectable class wrapper), and putting the responsibility of navigation on some global app state machine.

About this approach, the child machine actor sometimes is spawned by the parent machine, but we have a lot of machines scoped to a single component, sending messages to another machines injected in the component and not handled the communication between them by xstate internally.

[dj-fiorex]

Hello guys, another Angular developer here, 4 years of working with Angular and loving it! But i'm new XState and want to use it with Angular. what i want to know is: is there someone who are working to a solution and want some help? is there a repo or something? i fall in love with XState and want to try it right now 😄

[davidkpiano]

Yes, we've had an initial discussion with @keithernet on how to do this, so we're getting somewhere! Will keep everyone updated as we make progress.

[tzkmx]

is there a repo or something? i fall in love with XState and want to try it right now 😄

It's not official or anything but a sandbox of experiments around finding patterns to share of using xstate with Angular.

I'm testing right now how to inject directly an interpreted machine onto a component directly as a service using a custom injection token:

https://github.com/tzkmx/levo-ang-sandbox/commit/9d820de10f92309e753c2c051b394e2fc0155ea9#diff-2f28ffa8ceb914787ba21afb9afb09b4897784a5fdb8eea32b27231de8dab346R22

[stefumies]

Link is broken, any alternative url?

[Avisa-GA]

Same I can’t wait to try xstate with Angular  Sent from Yahoo Mail for iPhone On Sunday, June 19, 2022, 2:42 PM, David Khourshid ***@***.***> wrote: Yes, we've had an initial discussion with @keithernet on how to do this, so we're getting somewhere! Will keep everyone updated as we make progress. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[keithernet]

I had a discussion with David and then went on vacation for a week so it may take me a little to get back up to speed, but using XState in angular is totally possible right now and, in fact, works well without any additional adapter library. There's a channel in the Stately Discord where I, and other members of the community, are happy to help.

[adevil5]

If you're reading this, it can't hurt to upvote this. https://statelyai.canny.io/xstate/p/xstate-angular

[lateshift]

Are there any updates on the Angular support?

Thanks! 🙏

[keithernet]

Sorry, not on my end. I shifted away from doing Typescript work at my day job and haven't had a chance to pick up on this. Up the thread adevil5 posted a link to his repository which is think is a really great place to look for inspiration. I'm hoping that I'll have more time to devote to this maybe in March or so, but until then I think that repo is a really great starting point.

[stefumies]

We have been waiting for some kind soul to address the blatant lack of any comprehensive Angular Examples integrating XState, especially using Angular's excellent Service architecture and Observables. Its 2023 and there seems to be still no movement on this apart from a scattered collection of custom implementations, most of which throw errors, or don't appear to follow XState conventions at all.

Personally. I'm struggling to produce more than a hack to include a state machine into Angular, nothing of note and certainly not production ready. Now there is a huge project on the horizon and we are tied into Angular, but can offload a huge task requirements with XState. Unfortunately the past initial days have been trying to come up with a secure and prod-ready implementation for XState into the NG ecosystem.

XState is fantastic, its such a shame that Angular developers are still left hanging

[Andarist]

Perhaps you'd like to schedule a call with me to brainstorm how this could be implemented?

[stefumies]

Perhaps you'd like to schedule a call with me to brainstorm how this could be implemented?

Kind offer indeed, but Im afraid don't know enough about XState internals to be productive.

Im approaching this merely as a Developer / User. I would like to see a very simple example (such as the Traffic light example) in Angular. Not with custom hacks and such but showing how to get and read the state in an Angular Service, via Rxjs or not, there need be no async calls, or anything.

React has useMachine hook to offload this as well as matches etc, it's just strange to me that none of this appears to be approached in Angular despite its widespread usage. As I mentioned before all found examples are usually far too involved overly complex or merely far to abstract to understand fully.

Eventually any support would have to be fully documented with TS types, as there is also very little on this as well.

In brief:

How to get my State Machine into an Angular service, that's the crux.

[davidkpiano]

Im approaching this merely as a Developer / User. I would like to see a very simple example (such as the Traffic light example) in Angular. Not with custom hacks and such but showing how to get and read the state in an Angular Service, via Rxjs or not, there need be no async calls, or anything.

Can you start by showing how you would do this without XState, and we can take that code and translate it to an XState example?

[stefumies]

I don't quite follow. How would I do what? The Traffic light example is a widely used example of state control. In fact there are numerous XState examples on it. It's not a problem on doing the Traffic light problem it's a matter of no examples on how to implement the same pattern in Angular,

Without any state control it's a rudimentary switch or similar, it would be nonsensical to create such an app now., as a mere elucidation of my core point. The core point being that , there is no comprehensive guide on any practices (best or not) on how to integrate XState into Angular. There is are reims of info on React, and even Svelte (which has barely left the starting post), but non on Angular which is well past entrenched now.

Our current project is huge and will involve a substantial state management system, but as I mentioned we are tied to Angular. So for now, it looks like we are going to have to build a custom integration for XState, I wasn't intending to get sidetracked into filling those missing areas in in XState, no matter how interesting that may be (and it would)

The Traffic light example I pulled from memory as it is clear and simple and commands no bloated approach to state management, though it could be anything even a simple Toggle button via Observers / Subjects in Angular. The fundamental issue being how to correctly read from the state machine, and fire events to update via Angular's Rxjs implementation or similar. No need to understand the creation of the machine itself, that is particularly easy as your Documentation is excellent.

[with-heart]

I'll make this easy for you:

No one at Stately knows Angular.

No one from the Angular community has taken the time to contribute to the docs.

No one is going to learn Angular just to write docs for you.

If you aren't going to write them yourself and you're not willing to participate directly, you're being extremely unreasonable.

My suggestion? Stop typing replies and schedule a call with Andarist.

[with-heart]

Sorry, that might come across as more harsh than I meant it to be. It's just like you're the one with the Angular knowledge here, if you really want this addressed you're gonna have to help them help you ya know?

[Andarist]

It's worth noting that we only implemented React integration ourselves because that's what we know. I know the ins and outs of that ecosystem and I can confidently develop a reusable library for it. All other "integrations" (Vue, Svelte, and now Solid) were contributed by the community members - users of those frameworks.

I can craft some implementation for Angular based on the docs but it probably wouldn't match its community standards. I feel like that would be a waste of time on my part because the Angular community wouldn't like to use such @xstate/angular that wouldn't match their patterns etc.

It's fairly easy to use XState in Angular. I just spent 10 minutes with the docs and got this: https://stackblitz.com/edit/angular-msmcak?file=src%2Fmain.ts . However, I still don't know how to wrap this in a reusable library that Angular devs would like to use. I need an actual Angular dev to tell me more about that ecosystem, its patterns etc

[stefumies]

@with-heart

With that sort of reply it isn't particularly inviting to start to contribute if and when I have the time .

That was particular misconstrued opinion of my discussions. I myself am not an Angular developer as such either, and I only had the XState documentation to go off , there there are links to implementations, I am / was not aware of the context as to the examples, and why they may have been implemented.

Seems right now , there is little impetus (for whatever reason to move forward. I would love to be able to contribute at some stage, but right now I have neither the time nor the depth of knowledge required) not (as incorrectly assumed) because I'm unwilling.

@Andarist
Indeed, docs and deconstructed examples are how we have managed so far, this is why I came looking for a more integrated approach as it's currently time consuming. However, thank you very kindly for the example link, it looks initially like the simple example I'm seeking!

[with-heart]

Definitely not my best self in this thread. Sorry @stevematdavies!

[Avisa-GA]

Can you start by showing how you would do this without XState, and we can take that code and translate it to an XState example? After this David, Would you please add the solution to xState Doc, So We can practice, also on YouTube channel will be fine too. Thank you. Sent from Yahoo Mail for iPhone On Tuesday, January 24, 2023, 5:39 AM, David Khourshid ***@***.***> wrote: Im approaching this merely as a Developer / User. I would like to see a very simple example (such as the Traffic light example) in Angular. Not with custom hacks and such but showing how to get and read the state in an Angular Service, via Rxjs or not, there need be no async calls, or anything. Can you start by showing how you would do this without XState, and we can take that code and translate it to an XState example? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[niklas-wortmann]

Just jumping in this conversation. I was thinking of giving an angular implementation for xstate a try. I think this would be a valuable enhancement to the angular ecosystem. If there is any documentation around conventions for third party libraries, that would be very helpful

[Andarist]

If there is any documentation around conventions for third party libraries, that would be very helpful

From the Angular's PoV or XState's? Most packages that integrate XState with UI frameworks have similar API - but we don't mind diverging from that. The primary focus of @xstate/angular should be to follow Angular conventions and not the conventions set for other UI frameworks by @xstate/react, @xstate/vue, etc.

[niklas-wortmann]

I was more thinking from an xstate perspective. But I think we are good I will give it a try and report back here.

[jeremymwells]

Hi all. I was an early adopter of AngularJS, and have used Angular since. I want to see this exist and would like to help.

Angular uses decorators to add symbols to prototypes, which are interacted with at runtime. Compositionally, changing xstate dx to declare xstate/machine behaviors on TS classes would seem like the right approach to me.

Here's a sketch of how something like this could take shape:

// machine composition -->

@Machine({
  initial: states.HomeState, // ctor
  states: [
    states.State1State, // ctor
    states.State2State, // ctor
    states.State3State, // ctor
    states.DoneState, // ctor
  ]
})
export class SampleMachine {
   /* machine level behaviors/etc here */
}

/***********************************************************/

// state composition -->
@State({
  initial: true,
  states: [
    states.State1aState, // ctor
    states.State1bState, // ctor
  ],
})
export class State1State {

  @Action({
    target: states.State1aState, // ctor
  })
  goTo1a(): void {
    /* transition logic here (etc) */
  }

}

/***********************************************************/

// angular provider in standalone component -->
@Component({
  selector: 'app-sample-machine',
  standalone: true,
  imports: [
    CommonModule
  ],
  providers: [
    MachineService.for([
      SampleMachine
    ])
  ],
  templateUrl: './sample-machine.component.html',
  styleUrls: ['./sample-machine.component.scss'],
})
export class SampleMachineComponent {
  machine = this._machineSvc.use(SampleMachine);

  constructor(
    private _machineSvc: MachineService // provided by @xstate/angular
  ) {  } 
  
  someUserAction() {
     this.machine.transition({ type: states.State1State });
  }
  
}

This is class-based, but I'd think the core logic in the decorators could be re-used for functional implementations.

Thoughts?

[jeremymwells]

The goal/idea is - at runtime, the SampleMachine prototype seen here would have a Symbol('ɵmachine') property on it that contains the same xstate machine definition we all know and love, and it would either be 1) accessible via the MachineService provider, or 2) handily abstracted by the MachineService