Can't bind plugin via setParserPlugins option with gatsby-transform-remark

[vadimshvetsov]

Summary

I want to have an opportunity to use an id or class attributes in my markdown pages with this syntax:

[Any text]{.class id=anyId}

That's when a remark-bracketed-spans markdown parser plugin comes in.
I'm stuck at making it works together with gatsby-transform-remark localy. What am I doing wrong?

Relevant information

Issue #3297 was closed with great a PR adding setParserPlugins option and I want leverage this with gatsby-remark-bracketed-spans plugin. May be it can't work with local plugin? But I can't see why when following the source.

gatsby/packages/gatsby-transformer-remark/src/extend-node-type.js

Lines 83 to 97 in 4386750

	for (let plugin of pluginOptions.plugins) {
	const requiredPlugin = require(plugin.resolve)
	if (_.isFunction(requiredPlugin.setParserPlugins)) {
	for (let parserPlugin of requiredPlugin.setParserPlugins(
	plugin.pluginOptions
	)) {
	if (_.isArray(parserPlugin)) {
	const [parser, options] = parserPlugin
	remark = remark.use(parser, options)
	} else {
	remark = remark.use(parserPlugin)
	}
	}
	}
	}

Another example is gatsby-remark-katex. At the bottom of the index.js array returns with one parser plugin within - remark-math:

gatsby/packages/gatsby-remark-katex/src/index.js

Line 21 in 445f5ff

module.exports.setParserPlugins = () => [remarkMath]

Environment

npmPackages:
...
gatsby: next => 2.0.0-rc.15
gatsby-transformer-remark: next => 2.1.1-rc.1
...

File contents

In main project:
gatsby-config.js:

module.exports = {
  ...
  plugins: [
    ...
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-bracketed-spans',
        ],
      },
    },
  ],
};

In folder /plugins/gatsby-remark-bracketed-spans/
package.json:

{
  "name": "gatsby-remark-bracketed-spans",
  "version": "0.0.1",
  "description": "Add an id, classes, and data attributes to <span> tags in markdown.",
  "main": "index.js",
  "author": "Vadim Shvetsov <[email protected]>",
  "license": "MIT",
  "dependencies": {
    "remark-bracketed-spans": "^3.0.0"
  },
  "peerDependencies": {
    "gatsby": ">=2"
  }
}

index.js:

const remarkBracketedSpans = require('remark-bracketed-spans')
module.exports.setParserPlugins = () => [remarkBracketedSpans]

[kakadiadarpan]

Hi @vadimshvetsov, we'll look into this.

[pieh]

@vadimshvetsov can you share repository where you try to implement it, so we could take a look at how you doing and reproduce it locally

[vadimshvetsov]

I've tried to implement everything in PR #8044 but I'm not fluent with gatsby. I'd like to get any advices about what I'm doing wrong.

[pieh]

What actually happens when You run it like that @vadimshvetsov?

Like - what's the console/terminal output? Does it show errors?

[vadimshvetsov]

@pieh I've moved package from local plugin to gatsby repo package and trying to make it works.

At this moment my workflow is following:

• In local gatsby repo launch yarn run bootstrap && yarn watch --scope=gatsby-remark=bracketed-spans (Works)
• In test site repo launch gatsby-dev --packages gatsby-remark-bracketed-spans (Works)
  (Gatsby local repo path with --set-path-to-repo already set)
  (gatsby-dev-cli does not copy package dependencies that's why I install npm i --no-save remark-bracketed-spans manually)
• In another test site repo terminal window launch gatsby develop (Works)

But [Test]{.class id="whatever"} is not parsed with remark-bracketed-spans while everything else parsed perfectly into HTML.

[vadimshvetsov]

I've tried to spread some console logs inside gatsby-transformer-remark plugins parsing for loop:

for (let plugin of pluginOptions.plugins) {
  console.log(`-------------------------`)
  console.log(`PLUGIN`, JSON.stringify(plugin, null, 4))
  console.log(`-------------------------`)
  const requiredPlugin = require(plugin.resolve)
  console.log(`-------------------------`)
  console.log(`REQUIRED PLUGIN`, JSON.stringify(requiredPlugin, null, 4))
  console.log(`-------------------------`)
  if (_.isFunction(requiredPlugin.setParserPlugins)) {
    console.log(`-------------------------`)
    console.log(`HAS SET_PARSER_PLUGINS`, JSON.stringify(requiredPlugin, null, 4))
    console.log(`-------------------------`)
    for (let parserPlugin of requiredPlugin.setParserPlugins(
      plugin.pluginOptions
    )) {
      console.log(`-------------------------`)
      console.log(`PARSER PLUGIN`, JSON.stringify(parserPlugin, null, 4))
      console.log(`-------------------------`)

      if (_.isArray(parserPlugin)) {
        const [parser, options] = parserPlugin
        remark = remark.use(parser, options)
      } else {
        remark = remark.use(parserPlugin)
      }
    }
  }
}

And I have the following logs when processing with my gatsby-remark-bracketed-spans plugin and installed with npm gatsby-remark-images when launch gatsby develop:

$ gatsby develop
success open and validate gatsby-config — 0.006 s
success load plugins — 0.152 s
success onPreInit — 0.451 s
success delete html and css files from previous builds — 0.011 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache — 0.016 s
success copy gatsby files — 0.024 s
success onPreBootstrap — 0.004 s
success source and transform nodes — 0.067 s
⠁ -------------------------
PLUGIN {
    "resolve": "/Users/Username/TestSite/node_modules/gatsby-remark-images",
    "id": "Plugin gatsby-remark-images",
    "name": "gatsby-remark-images",
    "version": "2.0.1-rc.5",
    "pluginOptions": {
        "plugins": [],
        "maxWidth": 1100
    },
    "nodeAPIs": [],
    "browserAPIs": [],
    "ssrAPIs": [],
    "pluginFilepath": "/Users/Username/TestSite/node_modules/gatsby-remark-images"
}
-------------------------
-------------------------
REQUIRED PLUGIN undefined
-------------------------
-------------------------
PLUGIN {
    "resolve": "/Users/Username/TestSite/node_modules/gatsby-remark-bracketed-spans",
    "id": "Plugin gatsby-remark-bracketed-spans",
    "name": "gatsby-remark-bracketed-spans",
    "version": "2.0.0-rc.1",
    "pluginOptions": {
        "plugins": []
    },
    "nodeAPIs": [],
    "browserAPIs": [],
    "ssrAPIs": [],
    "pluginFilepath": "/Users/Username/TestSite/node_modules/gatsby-remark-bracketed-spans"
}
-------------------------
-------------------------
REQUIRED PLUGIN {}
-------------------------
-------------------------
HAS SET_PARSER_PLUGINS {}
-------------------------
-------------------------
PARSER PLUGIN undefined
-------------------------
success building schema — 0.238 s
success createPages — 0.038 s
success createPagesStatefully — 0.019 s
success onPreExtractQueries — 0.004 s
⠁ -------------------------
PLUGIN {
    "resolve": "/Users/Username/TestSite/node_modules/gatsby-remark-images",
    "id": "Plugin gatsby-remark-images",
    "name": "gatsby-remark-images",
    "version": "2.0.1-rc.5",
    "pluginOptions": {
        "plugins": [],
        "maxWidth": 1100
    },
    "nodeAPIs": [],
    "browserAPIs": [],
    "ssrAPIs": [],
    "pluginFilepath": "/Users/Username/TestSite/node_modules/gatsby-remark-images"
}
-------------------------
-------------------------
REQUIRED PLUGIN undefined
-------------------------
-------------------------
PLUGIN {
    "resolve": "/Users/Username/TestSite/node_modules/gatsby-remark-bracketed-spans",
    "id": "Plugin gatsby-remark-bracketed-spans",
    "name": "gatsby-remark-bracketed-spans",
    "version": "2.0.0-rc.1",
    "pluginOptions": {
        "plugins": []
    },
    "nodeAPIs": [],
    "browserAPIs": [],
    "ssrAPIs": [],
    "pluginFilepath": "/Users/Username/TestSite/node_modules/gatsby-remark-bracketed-spans"
}
-------------------------
-------------------------
REQUIRED PLUGIN {}
-------------------------
-------------------------
HAS SET_PARSER_PLUGINS {}
-------------------------
-------------------------
PARSER PLUGIN undefined
-------------------------
success update schema — 0.122 s
success extract queries from components — 0.100 s
success run graphql queries — 0.087 s — 7/7 81.46 queries/second
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 3.169 s

 DONE  Compiled successfully in 1277ms                                                    09:19:25


You can now view TestSite in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.

[vadimshvetsov]

At this moment it looks like this for loop works wrong in plugin.resolve processing may be.

parserPlugin is null or undefined frequently when it doesn't intend.

gatsby/packages/gatsby-transformer-remark/src/extend-node-type.js

Lines 83 to 97 in 4386750

	for (let plugin of pluginOptions.plugins) {
	const requiredPlugin = require(plugin.resolve)
	if (_.isFunction(requiredPlugin.setParserPlugins)) {
	for (let parserPlugin of requiredPlugin.setParserPlugins(
	plugin.pluginOptions
	)) {
	if (_.isArray(parserPlugin)) {
	const [parser, options] = parserPlugin
	remark = remark.use(parser, options)
	} else {
	remark = remark.use(parserPlugin)
	}
	}
	}
	}

I've tried to use already published gatsby-remark-custom-blocks with gatsby-transformer-remark and it works wrong too in dev mode.

[vadimshvetsov]

I can't find out why the tests are passing locally but in Travis there is an obsolete snapshot. I've ran several times yarn test:update and yarn run jest -u, but nothing changes.

https://travis-ci.org/gatsbyjs/gatsby/jobs/428920529#L2242

[vadimshvetsov]

I will close this one until I'll bind remark-bracketed-spans with gatsby-tranform-remark. It can't work with only setParserPlugin, I will try to find out why