Help Wanted: TypeScript and Priorities

[jneurock]

This issue is an appeal for a little help from contributors

Many months back, I completed a TypeScript rewrite of Mirage GraphQL; however, I haven’t had any luck finding someone to test the alpha/beta releases. I’d prefer some real-world validation before publishing it since the changes are sweeping (to the code, not the functionality).

The lack of interest seemed to indicate to me that the library isn’t being used enough to tackle my TODO list.

TODO List

My current TODO list looks like this:

1. Release TypeScript version
2. Make auto-filtering optional and off-by-default (a breaking change but I think very welcome)
3. Publish the documentation and reduce the size of the README

Since I don't really want to do any of these things unless people find them useful, I’d like some feedback. If I can release the TypeScript version of the library, I’d be happy to move forward with the remaining priorities.

Beta Testing

@rgaiacs, @nomin-sasabuchi, since you both opened recent issues, would you be interested in trying the TypeScript version? It was published to npm at @miragejs/graphql@0.2.0-beta.2. No worries, if you don’t have time or energy for that.

[rgaiacs]

Dear @jneurock,

Thanks for the fabulous work. I'm using JavaScript for my work.

I will try @miragejs/graphql@0.2.0-beta.1 next week.

[jneurock]

Many thanks 🙌

[jneurock]

@rgaiacs, I pushed another version to try: @miragejs/graphql@0.2.0-beta.2. It should just be dependency updates from the previous beta version.

[rgaiacs]

@jneurock after update to @miragejs/graphql@0.2.0-beta.2, my Ember application stop working with the following error

description: "Mirage: undefined"
​
fileName: "http://localhost:4200/assets/chunk.vendors-node_modules_faker-js_faker_dist_cjs_locale_en_js-node_modules_popperjs_core_lib_inde-4aebe8.a91cefcbef4d7dfe85e2.js line 5719 > eval"
​
lineNumber: 73
​
message: "Mirage: You're trying to create a contributor model and you passed in a model:person(1) under the person key, but you haven't defined that key as an association on your model."
​
name: "Error"
​
number: undefined
​
stack: "Mirage: Ks@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:73:1008\n_e@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:73:930\nvalue@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:80:6981\ne/<@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:80:1235\ne@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:80:1202\nGr/<@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:68:5467\ns@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:80:718\nGr/<@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:68:5467\ns@webpack://__ember_auto_import__/./node_modules/@miragejs/graphql/dist/mirage-graphql.cjs?:80:718\n_instantiateModel@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2522:173\n_new@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2358:65\ncreate@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2370:70\ncreate@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2341:177\ncreate@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2963:768\ncreateList@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2992:870\nafterCreate@http://localhost:4200/assets/methodshub-frontend-ember.js:17651:36\ncreate/<@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2963:1343\ncreate@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2963:1302\ncreateList@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2992:870\nseeds@http://localhost:4200/assets/methodshub-frontend-ember.js:17731:16\nconfig@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2858:174\nServer@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2787:163\ncreateServer@webpack://__ember_auto_import__/./node_modules/miragejs/dist/mirage-esm.js?:2760:42\nmakeServer@http://localhost:4200/assets/methodshub-frontend-ember.js:17529:39\nstartMirage@http://localhost:4200/assets/vendor.js:91138:28\nstartMirage@http://localhost:4200/assets/methodshub-frontend-ember.js:17405:37\ninitialize@http://localhost:4200/assets/methodshub-frontend-ember.js:17400:20\nrunInitializers/<@http://localhost:4200/assets/vendor.js:16378:21\nVertices.prototype.each@http://localhost:4200/assets/vendor.js:41186:11\nVertices.prototype.walk@http://localhost:4200/assets/vendor.js:41115:12\nDAG.prototype.each@http://localhost:4200/assets/vendor.js:41060:22\nDAG.prototype.topsort@http://localhost:4200/assets/vendor.js:41066:12\n_runInitializer@http://localhost:4200/assets/vendor.js:16402:13\nrunInitializers@http://localhost:4200/assets/vendor.js:16376:12\n_bootSync@http://localhost:4200/assets/vendor.js:12755:14\ndomReady@http://localhost:4200/assets/vendor.js:12656:12\n_run@http://localhost:4200/assets/vendor.js:40858:25\nrun@http://localhost:4200/assets/vendor.js:40642:19\nrun@http://localhost:4200/assets/vendor.js:26115:24\ncallback@http://localhost:4200/assets/vendor.js:12618:28\nEventListener.handleEvent*waitForDOMReady@http://localhost:4200/assets/vendor.js:12620:18\ninit@http://localhost:4200/assets/vendor.js:12516:14\ninitialize@http://localhost:4200/assets/vendor.js:18043:9\ncreate@http://localhost:4200/assets/vendor.js:18367:19\n@http://localhost:4200/assets/methodshub-frontend-ember.js:19268:65\n"

The package-lock.json for reference.

[jneurock]

Thanks for testing! Seems like it could be an issue with the bundle. I’ll do some further testing on my end.

[jneurock]

It’s working for me in a basic test. I will try scaffolding a tiny Ember app to see what happens.

[rgaiacs]

The contributor model in my Ember app is

"""
Represents a content contributed by a person.
"""
type Contributor {
    """
    Primary Key
    """
    id: ID!

    """
    The actor who contributed the content.
    """
    person: Person!

    """
    The content that was contributed.
    """
    content: Content!

    """
    Returns whether or not person is who submitted the contribution.
    """
    isSubmitter: Boolean!

    """
    Returns whether or not person is the maintainer of the contribution.
    """
    isMaintainer: Boolean!
}

and the Person model is

"""
Represents the author of some content.
"""
type Person {
    id: ID!

    """
    Given name. In the U.S., the first name of a Person.

    For example, Jane.

    Further information at https://schema.org/givenName.
    """
    name: String!
    
    """
    Family name. In the U.S., the last name of a Person.

    For example, Doe.

    Further information at https://schema.org/familyName.
    """
    surname: String!
    
    """
    Email address.

    For example, jane.doe@mail.com.

    Further information at https://schema.org/email.
    """
    email: String
    
    """
    Open Researcher and Contributor ID

    For example, 0000-0002-1825-0097.
    """
    orcid: String
    
    """
    ID in single sign-on Keycloak service.

    For example, b33f4780-ffdc-4cba-9026-15be2ea3a05f.
    """
    keycloakId: String

    """
    Contents contributed by the person.
    """
    contents: [Content]
}

The Mirage fabric that is creating this is

softwareSourceCode: Factory.extend({
  name(i) {
    return faker.word.noun();
  },
  description(i) {
    return faker.lorem.sentences();
  },
  alternativeName(i) {
    return faker.word.noun();
  },
  dateCreated(i) {
    return faker.date.anytime().toISOString();
  },
  dateModified(i) {
    return faker.date.anytime().toISOString();
  },
  datePublished(i) {
    return faker.date.anytime().toISOString();
  },
  keywords(i) {
    return [
      faker.lorem.word(),
      faker.lorem.word(),
      faker.lorem.word()
    ];
  },
  version(i) {
    return faker.system.semver();
  },
  codeRepository(i) {
    return `${faker.internet.url()}/${faker.word.noun()}/${faker.word.noun()}`;
  },
  downloadUrl(i) {
    return this.codeRepository;
  },
  programmingLanguage(i) {
    return "Python";
  },
  runtimePlatform(i) {
    return "GNU/Linux";
  },
  category(i) {
    return fakeCategory();
  },
  // Additional fields specific to SoftwareSourceCode
  documentationLink(i) {
    return `${faker.internet.url()}/${faker.word.noun()}/${faker.word.noun()}`;
  },
  format(i) {
    return faker.helpers.arrayElement([
      "SCRIPTS",
      "NOTEBOOK",
      "EXECUTABLE"
    ]);
  },
  afterCreate(resource, server) {
    resource.update({
      files: [
        server.create("file", 1, "html"),
        server.create("file", 1, "jpg")
      ],
      submissionStatus: server.create("submissionStatus"),
      contributors: server.createList("contributor", 3, {
        person: server.create("person")
      })
      // Additional fields specific to SoftwareSourceCode
    })
  }
})

[jneurock]

@rgaiacs, can you give me some additional details about your Ember app? I created an Ember app with ember-cli-mirage, ember-apollo-client, and @miragejs/graphql. This beta version seems to work fine for me. The Ember version I used is 3.28.0. Thanks!

[jneurock]

There’s now a new beta version, 0.2.0-beta.4, that should fix some TypeScript issues. IDK if it will help with Ember, specifically, but it could be worth trying again.

[Jeremy-Boyle]

@jneurock

This is needed within the package json. Otherwise you will get a import issue complaining the module is not allowing the type folder.

  "exports": {
    ".": {
      "import": "./dist/mirage-graphql.js",
      "require": "./dist/mirage-graphql.cjs",
      "types": "./dist/types/index.d.ts"
    },
    "./*": "./dist/types/*"
  },

I've been testing this out and had to make that manual change.

[jneurock]

@jneurock

This is needed within the package json. Otherwise you will get a import issue complaining the module is not allowing the type folder.

"exports": {
".": {
"import": "./dist/mirage-graphql.js",
"require": "./dist/mirage-graphql.cjs",
"types": "./dist/types/index.d.ts"
},
"./": "./dist/types/"
},
I've been testing this out and had to make that manual change.

Good to know. Thank you! Would you like to make a PR? Otherwise, I will get to it when I can.

[Jeremy-Boyle]

@jneurock
This is needed within the package json. Otherwise you will get a import issue complaining the module is not allowing the type folder.
"exports": {
".": {
"import": "./dist/mirage-graphql.js",
"require": "./dist/mirage-graphql.cjs",
"types": "./dist/types/index.d.ts"
},
"./": "./dist/types/"
},
I've been testing this out and had to make that manual change.

Good to know. Thank you! Would you like to make a PR? Otherwise, I will get to it when I can.

I can make a MR :)