woly-ui / gatsby-theme Goto Github PK

It is required to create an encapsulated page to test component media-queries.

Steps how it can be implemented:

./gatsby-theme-woly/plugins/gatsby-plugin.js

1. Collect import nodes of page
2. Create a new page for each jsx node
3. Add all collected import nodes to a new page with jsx node (maybe it can be created with createNode and createPage API in actions, look at gatsby-source-filesystem)
4. Replace jsx node to an iframe with a link to a created page (node type html)

Hint: you need to clean cache to reload gatsby plugins after code change
Use yarn clean && yarn example develop after each change

Source src/components/button/usage.mdx file:

import { Button } from './button'
import { Wrapper } from '../lib/wrap'

## Example button

<Button text="hi" />

<Wrapper><Button text="another" /></Wrapper>

Expected output:

## Example button

<iframe src="/package/woly/components/button/example/1" />

```jsx
<Button text="hi" />
```

<iframe src="/package/woly/components/button/example/2" />

```jsx
<Wrapper><Button text="another" /></Wrapper>
```

Expected output for example 1:

import { Button } from './button'
import { Wrapper } from '../lib/wrap'

<Button text="hi" />

Expected output for example 2:

import { Button } from './button'
import { Wrapper } from '../lib/wrap'

<Wrapper><Button text="another" /></Wrapper>

How to visit import nodes and collect it:

const visit = require('unist-util-visit');

module.exports = ({ markdownAST, actions }, options) => {
  const imports = [];
  visit(markdownAST, 'import', (node, index, parent) => {
    imports.push(node);
  });
  console.log('IMPORTS', imports);
};

What is collected in imports:

[
  {
    type: 'import',
    value: "import * as button from './index';\n" +
      "import { New } from './new';\n" +
      "import { Example } from './example';",
    position: Position { start: [Object], end: [Object], indent: [Array] }
  }
]

Be careful! Do not modify AST inside visit callback. Before modifying collect all required nodes.

gatsby-theme-woly/plugins/remark-plugin.js

This plugin creates a copy of the jsx node as code node, to show the source of the markdown.

For example source .mdx file:

import { Button } from './button'

### Button

<Button type="submit" text="demo" />

Gatsby creates live button from that mdx node. Remark plugin adds code block to show source below:

import { Button } from './button'

### Button

<Button type="submit" text="demo" />

```jsx
<Button type="submit" text="demo" />
```

Rehype plugin is a transformer for converting markdown AST to HTML AST