profile
viewpoint
Rainer Wittmann RainerAtSpirit Spirit EDV-Beratung AG Germany http://rainerat.spirit.de

RainerAtSpirit/backbone-mobile-search 2

A Backbone project utilizing jQuery mobile, Micro-templating and the Flickr API

RainerAtSpirit/backbone.paginator 2

Backbone.Paginator

RainerAtSpirit/djODataAPIExplorer 2

JayData meets Durandal... or the other way around ;-)

RainerAtSpirit/backbone 1

Give your JS App some Backbone with Models, Views, Collections, and Events

RainerAtSpirit/backbone-jasmine-examples 1

Some examples of Jasmine specs for a forthcoming blog post

RainerAtSpirit/backbone.modelbinding 1

awesome model binding for Backbone.js

RainerAtSpirit/Backbone.SharePoint 1

Making SharePoint lists and items available as Backbone models and collections

issue commentmattpocock/xstate-codegen

Example in README fails to compile with: Type 'string' does not satisfy the constraint 'never'.ts(2344)

I was getting this error after using the example in the README (using IntelliJ IDEA rather than VSCode). For reasons I don't understand, exporting the machine is what fixed it for me 🤷‍♂️

export default machine;

universalhandle

comment created time in 21 hours

issue commentmattpocock/xstate-codegen

Doesn't work with Snowpack

Okey, I'll try to figure it out on a snowpack side. Thanks!

asistapl

comment created time in 4 days

issue commentmattpocock/xstate-codegen

Doesn't work with Snowpack

I think you will need to investigate the problem by yourself. There is not enough people capacity to do that for you. Snowpack is still considered more like a bleeding edge.

asistapl

comment created time in 4 days

issue openedmattpocock/xstate-codegen

Doesn't work with Snowpack

Hey! I love your work at this package!

It doesn't seem to work with Snowpack. I'm getting this error:

SyntaxError: The requested module '../../../../../_snowpack/pkg/@xstate/compiled/react.js' does not provide an export named 'useMachine'

created time in 4 days

issue closedmobxjs/mobx-state-tree

What type for an action that sets an types.array

<!-- Not following the template might result in your issue being closed without further notice --> Question

  • [x] I've checked documentation and searched for existing issues
  • [ ] I tried the spectrum channel

<!-- Write your question below --> I am trying to create a computed property that returns a types.array filtered based on a given value. On a normal javascript array I would use the filter function. The problem is that when I access the variable, which is of type IMSTArray, no filter function is available.

Example

const ExerciseTemplate = types.model({
  id: types.identifier,
  name: types.string,
  exerciseCategories: types.array(string),
});

const ExerciseList = types
  .model({
    id: types.identifier,
    exerciseList: types.array(ExerciseTemplate),
  })
  .views((self) => ({
    filterByCategory(category: string) {
      return self.exerciseList.filter // ???;
    },
  }));

How can I filter a variable of type types.array? Am I doing something wrong?

closed time in 7 days

SandroMaglione

issue commentmobxjs/mobx-state-tree

What type for an action that sets an types.array

After looking around on other issues and the types' definitions I found a solution using SnapshotIn:

import { types, cast, SnapshotIn } from "mobx-state-tree";

const ExerciseTemplate = types.model({
  id: types.identifier,
  name: types.string,
  // Array of strings
  exerciseCategories: types.array(types.string),
});

// Type from ExerciseTemplate to update ExerciseList
interface IExerciseTemplate extends SnapshotIn<typeof ExerciseTemplate> {}

const ExerciseList = types
  .model({
    id: types.identifier,
    // Array of ExerciseTemplate
    exerciseList: types.array(ExerciseTemplate),
  })
  .actions((self) => ({
    // Use IExerciseTemplate with cast
    setExerciseList(exerciseList: IExerciseTemplate[]) {
      self.exerciseList = cast(exerciseList);
    },
  }));

Then you can set the array like this:

exerciseListStore.setExerciseList([
  {
    id: "id1",
    name: "My workout 1",
    exerciseCategories: ["c1"],
  },
  {
    id: "id2",
    name: "My workout 2",
    exerciseCategories: ["c1"],
  },
])
SandroMaglione

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

How to filter a variable of types.array

Sorry, it seems that for some reason the typescript compiler did not recognize the correct type. I reloaded the IDE and now it works. Untitled

I have another issue now. I am trying to set the value of the list. I have the following code:

.actions((self) => ({
    setExerciseList(exerciseList: /* ??? */) {
      self.exerciseList = exerciseList;
    },
  }));

What type should the exerciseList have?

SandroMaglione

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

.toJS()

Thanks! When i checked out that version of MST i couldn't see a .toJS function. I do see .toJSON() which might do the same thing. It does mention that if you need a deep clone to use mobx's toJS() (same as the codesandbox). For reference this is the code at that point:

https://github.com/mobxjs/mobx-state-tree/tree/05248f72a86c77cd8dce6bc9383e82747db88770

paxarpp

comment created time in 7 days

issue openedmobxjs/mobx-state-tree

How to filter a variable of types.array

<!-- Not following the template might result in your issue being closed without further notice --> Question

  • [x] I've checked documentation and searched for existing issues
  • [ ] I tried the spectrum channel

<!-- Write your question below --> I am trying to create a computed property that returns a types.array filtered based on a given value. On a normal javascript array I would use the filter function. The problem is that when I access the variable, which is of type IMSTArray, no filter function is available.

Example

const ExerciseTemplate = types.model({
  id: types.identifier,
  name: types.string,
  exerciseCategories: types.array(string),
});

const ExerciseList = types
  .model({
    id: types.identifier,
    exerciseList: types.array(ExerciseTemplate),
  })
  .views((self) => ({
    filterByCategory(category: string) {
      return self.exerciseList.filter // ???;
    },
  }));

How can I filter a variable of type types.array? Am I doing something wrong?

created time in 7 days

issue commentmobxjs/mobx-state-tree

.toJS()

mst ver.3.15.0 get an unobserved value. example:

const UserList = types
  .compose(
    ListCommon,
    types.model({
      items: types.array(UserListItem),
      url: types.optional(types.string, '/auth-api/user/all'),
      selectedUsers: types.array(types.string),
    })
  )

export const Users = types
  .model({
    list: types.optional(UserList, {}),
  })
  .actions((self) => ({
    async deleteFromSystem(content: ReactNode): Promise<void> {
      try {
        const resp = await self.deletion.deletedIdsValidation(
          '/auth-api/user/delete/validation',
          self.list.selectedUsers.toJS(),
          {
            spinnerKey: 'deleteValidation',
          }
        );
      }
   },
})
paxarpp

comment created time in 7 days

issue closedmobxjs/mobx-state-tree

MST actions don't work with Typescript

<!-- Not following the template might result in your issue being closed without further notice -->

Bug report

  • [x] I've checked documentation and searched for existing issues
  • [ ] I've made sure my project is based on the latest MST version

Sandbox link or minimal reproduction code <!-- link to your sandbox or alternatively minimal reproduction code-->

import { types, applySnapshot } from 'mobx-state-tree'

export const CurrentUser = types
  .model('CurrentUser', {
    id: types.number,
    account_id: types.number,
    email: '',
  })
  .views(self => ({
  }))
  .actions(self => ({
    update: data => {
      applySnapshot(self, data)
    },
    fetch: () => {
      self.update({})
    },
  }))

https://github.com/pustovalov/ts-mst-demo/blob/main/src/stores/current_user.ts#L20

Describe the expected behavior <!-- What should happen? --> TS should work with MST actions

Describe the observed behavior <!-- What happens instead? -->

Property 'update' does not exist on type '{ id: number; account_id: number; email: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ id: ISimpleType<number>; account_id: ISimpleType<number>; email: IType<...>; }, {}, _NotCustomized, _NotCustomized>>'

Dependencies MST: 3.17.3, same behavior with 5.0.0 TS: 4.1.3

TS config https://mobx-state-tree.js.org/tips/typescript as the documentation says, contain these options:

{
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
}

https://github.com/pustovalov/ts-mst-demo/blob/main/tsconfig.json#L9

closed time in 7 days

pustovalov

issue commentmobxjs/mobx-state-tree

MST actions don't work with Typescript

@KislyakovDS thx

pustovalov

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

How to store map of references?

Why do you want a map of references and not an array? Also, for what it's worth, when you're building your input snapshot to pass to a .create call, references should be specified as the string identifiers for the things you want to reference, not the actual instances of the nodes you want to reference. tags[id] = id would be closer to what mobx-state-tree wants.

ji-1

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

MST actions don't work with Typescript

Have you read through the docs here https://mobx-state-tree.js.org/tips/typescript ? Specifically, the part about declaring multiple blocks so that subsequent blocks can depend on the prior ones? That solves this issue, I think this can be closed.

pustovalov

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

`in` operator regression for actions

I think this is an issue for views too, not just actions. I can confirm it only happens for me when proxies are used. Is this maybe a plain mobx bug?

getkey

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

Get Error: [mobx-state-tree] Cannot modify 'AnonymousModel@..., the object is protected and can only be modified by using an action.

What was the error you were getting on the twitter example? I rebuilt it here and it seemed to be ok:

https://codesandbox.io/s/confident-shape-eph07?file=/src/App.js

geohuz

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

Get Error: [mobx-state-tree] Cannot modify 'AnonymousModel@..., the object is protected and can only be modified by using an action.

Interesting. Lots to fix up on this page! Quick fixes, ill open a pr

geohuz

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

My model returns fields as null, if I created model fields with types.maybeNull and use model in types.union

I'd say we need to write a failing test for this behaviour then try to figure out what exactly is causing it.

KislyakovDS

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

.toJS()

I see. Do you know which version of MST you were on exactly? I went back through a few versions, and I can't find the point where it may have been removed.

In terms of what you're trying to do to though, are you looking to get an unobserved value or an unobserved node?

paxarpp

comment created time in 7 days

issue commentmobxjs/mobx-state-tree

.toJS()

I was able to use toJS like this (see line 24 of index.js): https://codesandbox.io/s/mst-1641-mikmc?file=/src/index.js

Is it how you'd previously been using it?

no you using toJS from mobx i using
return someMSTtreeNode.someField.toJS()

paxarpp

comment created time in 8 days

fork FaustoO/react-beautiful-dnd-typescript-example

A typescript example app that uses react-beautiful-dnd with @types/react-beautiful-dnd

fork in 8 days

issue commentmobxjs/mobx-state-tree

MST actions don't work with Typescript

How about this?

import { types, applySnapshot } from "mobx-state-tree";

export const CurrentUser = types
  .model("CurrentUser", {
    id: types.number,
    account_id: types.number,
    email: ""
  })
  .actions((self) => {
    const update = (data: any) => {
      applySnapshot(self, data);
    };

    const fetch = () => {
      update({});
    };

    return { update, fetch };
  });
pustovalov

comment created time in 8 days

issue commentmobxjs/mobx-state-tree

Get Error: [mobx-state-tree] Cannot modify 'AnonymousModel@..., the object is protected and can only be modified by using an action.

@willrax I agreed with you for putting the applySnapshot into action would make sense for the protection purpose. BTW, I would like to remind you that the following code in the front page also fails for the same reason:

const twitterStore = TwitterStore.create({ tweets: [ { body: "Anyone tried MST?" } ] })

in this case I have to const twitterStore = TwitterStore.create() first then unprotect(twitterStore), I don't know if there is elegant way to do it.

geohuz

comment created time in 8 days

issue commentmobxjs/mobx-state-tree

MST actions don't work with Typescript

Found one workaround:

export const CurrentUser = types
  .model('CurrentUser', {
    id: types.number,
    account_id: types.number,
    email: '',
  })
  .views(self => ({
  }))
  .actions(self => ({
    update(data: string) {
      applySnapshot(self, data)
    },
    fetch() {
      this.update({})
    },
  }))

But this one will not work with flow, to make it work together with flow need to do something like this:

import { types, applySnapshot, flow } from 'mobx-state-tree'

export const CurrentUser = types
  .model('CurrentUser', {
    id: types.number,
    account_id: types.number,
    email: '',
  })
  .views(self => ({
  }))
  .actions(self => ({
    update(data: string) {
      applySnapshot(self, data)
    },
    fetch() {
      this.update({})
    },
  }))
  .actions(self => ({
    fetchWithFlow: flow(function* fetchWithFlow() {
      self.update({})
    }),
  }))

it looks worse with these two .actions(, is there another way?

pustovalov

comment created time in 8 days

issue commentmobxjs/mobx-state-tree

Get Error: [mobx-state-tree] Cannot modify 'AnonymousModel@..., the object is protected and can only be modified by using an action.

@geohuz We'll update the docs. I was just thinking about it though and I think if you were to apply a snapshot, doing this through an action would mean you don't have to mark the tree as unprotected. I've updated the codesandbox. I think this approach fits a little more with "MST way". Thoughts?

https://codesandbox.io/s/mst-1647-c9g0z?file=/src/index.js

geohuz

comment created time in 8 days

PR opened mobxjs/mobx-state-tree

docs(snapshot): update log examples

Updates to use info over dir. console.dir will take the object as the first argument rather than allow for strings and objects to be pulled together. The output of dir is also similar to the output of an object in info. At least in Chrome.

+4 -4

0 comment

1 changed file

pr created time in 8 days

push eventmobxjs/mobx-state-tree

willrax

commit sha 001920f418193aabc988c809853779082060354e

docs(snapshot): update log examples Updates to use info over dir. console.dir will take the object as the first argument rather than allow for strings and objects to be pulled together. The output of dir is also similar to the output of an object in info. At least in Chrome.

view details

push time in 8 days

create barnchmobxjs/mobx-state-tree

branch : update-snapshot-examples

created branch time in 8 days

issue commentmobxjs/mobx-state-tree

MST actions don't work with Typescript

Looks like there was such a problem in the past: https://github.com/mobxjs/mobx-state-tree/issues/1307

pustovalov

comment created time in 9 days

issue openedmobxjs/mobx-state-tree

MST actions don't work with Typescript

<!-- Not following the template might result in your issue being closed without further notice -->

Bug report

  • [x] I've checked documentation and searched for existing issues
  • [ ] I've made sure my project is based on the latest MST version

Sandbox link or minimal reproduction code <!-- link to your sandbox or alternatively minimal reproduction code--> https://github.com/pustovalov/ts-mst-demo/blob/main/src/stores/current_user.ts#L20

Describe the expected behavior <!-- What should happen? -->

Property 'update' does not exist on type '{ id: number; account_id: number; email: string; } & NonEmptyObject & IStateTreeNode<IModelType<{ id: ISimpleType<number>; account_id: ISimpleType<number>; email: IType<...>; }, {}, _NotCustomized, _NotCustomized>>'

Describe the observed behavior <!-- What happens instead? --> TS should work with MST actions

Dependencies MST: 3.17.3, same behavior with 5.0.0 TS: 4.1.3

TS config as the documentation says contain these keys https://mobx-state-tree.js.org/tips/typescript

{
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
}

https://github.com/pustovalov/ts-mst-demo/blob/main/tsconfig.json#L9

created time in 9 days

more