jonschlinkert / gray-matter

Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author: https://github.com/jonschlinkert
https://github.com/jonschlinkert
MIT License
3.97k stars 138 forks source link

Typescript Import #105

Open fireflysemantics opened 4 years ago

fireflysemantics commented 4 years ago

I don't think this line in the README makes sense ...

import matter = require('gray-matter');

At least VS Code red lines it with the error:

Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.ts(1202)

This works:

import * as matter from 'gray-matter';

Actually nix that. VSCode does not complain but it does not work. This works:

import matter from 'gray-matter'

Here's a stackblitz

https://stackblitz.com/edit/gray-matter

Outside of Stackblitz we also need to set this compiler options in tsconfig.lib:

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,

Last thing - for Angular 9 this needs to be added to polyfills.js:

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
(window as any).process = {
  version: ''
};

Related SO: https://stackoverflow.com/questions/60772266/getting-buffer-is-not-defined-when-using-gray-matter-in-angular/60772329#60772329

CanRau commented 2 years ago
import * as matter from 'gray-matter';

only works if you then call it like

matter.default('---\ntitle: Front Matter\n---\nThis is content.');

Or import like you suggested import matter from 'gray-matter'

imShara commented 2 years ago

When

matter.default('---\ntitle: Front Matter\n---\nThis is content.');

it says

Property 'default' does not exist on type 'typeof matter'.ts(2339)
dontic commented 1 year ago

For being abandoned the package works well enough. I just had this issue when importing it as there are no types declarations for it.

I created gray-matter.d.ts in the root of my React project with the following content.

Please take into account that I created it based on the documentation and my use case (React + TS), this might not suffice in all cases.

declare module "gray-matter" {
  namespace grayMatter {
    interface GrayMatterFile<T = any> {
      content: string;
      data: {
        [key: string]: any;
      };
      excerpt: string;
      isEmpty: boolean;
      orig: Uint8Array;
    }
  }

  function grayMatter<T = any>(
    str: string,
    options?: {
      excerpt?: boolean | function;
      excerpt_separator?: string;
      engines?: any;
      language?: string;
      delimiters?: string | string[];
    }
  ): grayMatter.GrayMatterFile<T>;

  export = grayMatter;
}

Then I just import matter from "gray-matter"; and all the declared options and types should be available.