Extract jsx to iframe

[sergeysova]

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

[sergeysova]

Or, it can be implemented like this https://stackoverflow.com/questions/59098769/how-to-render-a-react-component-styled-with-emotion-in-an-iframe-in-gatsby-site

[sergeysova]

https://bilianavaleva.com/generate-navigation-with-gatsby/

[sergeysova]

https://georgenance.com/dont-use-frontmatter-markdown-files-gatsby

[sergeysova]

For example: https://codesandbox.io/s/b7e7c

[sergeysova]

How to transform: https://youtu.be/ALspNtrOqDk