Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Structure is not well defined, how proper use it with schema-dts #1

Open
HectorLS opened this issue Apr 17, 2019 · 4 comments
Open

Comments

@HectorLS
Copy link

Hello, im using "react": "^16.6.0"

The sample repo code is this one (which have a syntax error):

import { Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";

export function GraceHopper() {
  return <JsonLd<Person>
    item={{
      "@context": "https://schema.org",
      "@type": "Person",
      name: "Grace Hopper",
      alternateName: "Grace Brewster Murray Hopper",
      alumniOf: {
        "@type": "CollegeOrUniversity",
        name: ["Yale University", "Vassar College"]
      },
      knowsAbout: ["Compilers", "Computer Science"]
    }}/>;
}

If i use code like this all works fine

import { JsonLd } from "react-schemaorg";

export function personJsonLd() {
  const sampleData = {
    "@context": "https://schema.org",
    "@type": "Person",
    name: "Grace Hopper",
    alternateName: "Grace Brewster Murray Hopper",
    alumniOf: {
      "@type": "CollegeOrUniversity",
      name: ["Yale University", "Vassar College"]
    },
    knowsAbout: ["Compilers", "Computer Science"]
  };

  
  return <JsonLd item={sampleData}/>;
}

But as you can see in the previous code i haven't used the DTS, how can i use the schema-dts library, i didn't figure it out 😞
i have try the return like:

  return (
    <JsonLd item={sampleData}>
      <Person />
    </JsonLd>
  );

But got a bunch of console error, some light/improved example would be much appreciated 🙏🏽
Thanks in advance

@Eyas
Copy link
Collaborator

Eyas commented Apr 18, 2019

Thanks for the feedback! What TypeScript version are you running?

  1. I can't repro a syntax error in the first example you gave. <JsonLD<Person> item={{...}}/> work just fine for me.

  2. One issue here might be that schema-dts is a peer dependency of react-schemaorg, so you should manually npm install schema-dts as well.

    In other words, your package.json should look something like:

      "devDependencies": {
        "react-schemaorg": "^0.1.0",
        "schema-dts": "^0.3.1",
    
  3. In general, you should expect both imports described in the README to work:

    import { Person } from "schema-dts";
    import { JsonLd } from "react-schemaorg";
    

    If the imports themselves fail, you know you might have an issue with how your dependencies are set up, and we can try working on that.

    In general, <JsonLd> is a generic-typed React element. All it requires is a type you specify that has @context on it and extends Thing (as described in schema-dts).

    To get proper Schema.org type checking, you'll want help from schema-dts which provides those types. You can do that in one of three ways:

    a) As written in the example; explicitly provide a schema-dts type (or really any type) to the template. The proper syntax for that in TSX is <JsonLd<T> .../>. In the example, T is Person.

    b) You can let TypeScript's type inference do some work, for example, if you:

    import { WithContext, Person } from "schema-dts";
    import { JsonLd } from "react-schemaorg";
    
    export function personJsonLd() {
      const sampleData: WithContext<Person> = {
        "@context": "https://schema.org",
        "@type": "Person",
        name: "Grace Hopper",
      };
      return <JsonLd item={sampleData}/>;
    }
    

    then JsonLd will double check that sampleData fits the contract: (i) has a @context, and (ii) extends Thing.

Hope that helps!

@mmartinnn
Copy link

mmartinnn commented May 9, 2019

I have exactly the same issue. The provided syntax - return <JsonLd<whatever> produces a fatal unexpected token error for me, even with all dependencies installed and the proper imports, as you describe above.

Edit: I found a working fix for this like 10 minutes later. The issue was extremely basic - I was trying to do this in a .js file rather than a .tsx file. Possible that the OP has the same issue.

@Eyas
Copy link
Collaborator

Eyas commented May 10, 2019

I see @mmartinnn , so it seems the gaps here are:

  1. It is not clear that the example is based on TSX and wouldn't work with .js or even .jsx
  2. It is not clear that this type-checking is only available with TypeScript (either directly or through tsc type-checking a js project)

And so some improvement in the documentation might help?

@mmartinnn
Copy link

I think that's precisely accurate!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants