javiercf / react-markdown-loader Goto Github PK

This loader parses markdown files and converts them to a React Stateless Component. It will also parse FrontMatter to import dependencies and render components along with it’s source code. We developed this loader in order to make the process of creating styleguides for React components easier

JavaScript 100.00%

react-markdown-loader's People

Contributors

Stargazers

Watchers

react-markdown-loader's Issues

Moving from remarkable to markdown-it ?

Just a thought, since (see here):

markdown-it is the result of the decision of the authors who contributed to 99% of the Remarkable code to move to a project with the same authorship but new leadership (Vitaly and Alex). It's not a fork.

It seems like markdown-it is better option. API should be pretty similar, as projects are almost clones.

markdown code blocks do not work

The following md file results in an error

```
This is a code block
```

ERROR in ./src/Brander/README.md
Module build failed: TypeError: Cannot read property 'rest' of undefined
    at Object._self.Prism.tokenize (/my-project/node_modules/prismjs/prism.js:265:21)
    at Object._self.Prism.highlight (/my-project/node_modules/prismjs/prism.js:256:18)
    at Function.highlight (/my-project/node_modules/react-markdown-loader/src/parser.js:86:22)
    at Object.rules.fence (/my-project/node_modules/remarkable/lib/rules.js:73:37)
    at Renderer.render (/my-project/node_modules/remarkable/lib/renderer.js:71:39)
    at Remarkable.render (/my-project/node_modules/remarkable/lib/index.js:152:24)

    at err (/my-project/node_modules/react-markdown-loader/src/parser.js:105:17)
    at parseMarkdown (/my-project/node_modules/react-markdown-loader/src/parser.js:81:10)
    at Object.parse (/my-project/node_modules/react-markdown-loader/src/parser.js:132:10)
    at Object.module.exports (/my-project/node_modules/react-markdown-loader/src/index.js:16:6)

It seems as though I can't render any code blocks.

Options to change the code template

Thanks for creating this. It's almost exactly what I was looking for.

How do you pass your own custom template to wrap the rendered tag and the html source?

Support for other import syntax in markdown

Right now we only support this kind of import:

import Component from './component.js'

It would be cool to support also the not default exports

import { Component1, Component2 } from './component.js'

compile errors

hello~
When I use something like this in MarkDown, it will compile errors.
Because the code block includes '{' and '}'.

function a () {
    return 1
}

webpack.config.js in webpack 5

I am trying to use this package. However, it doesn't work.

Could you please teach me how to write webpack.config.js in webpack 5?

This is my webpack.config.js:

module: {
    strictExportPresence: true,
    rules: [
        // Handle node_modules packages that contain sourcemaps
        shouldUseSourceMap && {
            enforce: 'pre',
            exclude: /@babel(?:\/|\\{1,2})runtime/,
            test: /\.(js|mjs|jsx|ts|tsx|css)$/,
            loader: require.resolve('source-map-loader'),
        },
        {
            // "oneOf" will traverse all following loaders until one will
            // match the requirements. When no loader matches it will fall
            // back to the "file" loader at the end of the loader list.
            oneOf: [
                // Markdown
                {
                    test: /\.md$/,
                    use: [
                        {
                            loader: 'babel!react-markdown',
                        },
                    ],
                },
            ]
        },
    ],
}

version of webpack: 5.64.4

`React` is `undefined` using babel `react-require` plugin

I'm not sure if this is a Babel issue. But what's generated with Webpack 2 and Babel with the react-require plugin is:

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(/*! react */ 7);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __WEBPACK_IMPORTED_MODULE_0_react__ && __WEBPACK_IMPORTED_MODULE_0_react__.__esModule ? function() { return __WEBPACK_IMPORTED_MODULE_0_react__['default'] } : function() { return __WEBPACK_IMPORTED_MODULE_0_react__; }
/* harmony import */ Object.defineProperty(__WEBPACK_IMPORTED_MODULE_0_react___default, 'a', { get: __WEBPACK_IMPORTED_MODULE_0_react___default });
module.exports = function (context) {
  return function () {
    if (!/* harmony import */__WEBPACK_IMPORTED_MODULE_0_react___default.a) {
      var React = __webpack_require__(/*! react */ 7);
    }

    return React.createElement(...);
  }.apply(context);
};

__WEBPACK_IMPORTED_MODULE_0_react___default.a is truly but React is not.

This issue doesn't apply if I disable the plugin.

Markdown is applied as `string`

The markdown markup is returned as string with Webpack 2.

module.exports = function (context) {
  return function () {
    if (!React) {
      var React = __webpack_require__(/*! react */ 85);
    }

    return React.createElement(
      "div",
      null,
      React.createElement(
        "p",
        null,
        "module.exports = \"<h1 id=\\\"testing-en\\\">Testing EN</h1>\\n<p>Weeeeii! It's working!</p>\\n\";"
      )
    );
  }.apply(context);
};

What's rendered to my DOM is:

<p>module.exports = "&lt;hr&gt;\n&lt;h2 id=\"componentname-svtest\"&gt;componentName: SvTest&lt;/h2&gt;\n&lt;h1 id=\"testar-sv\"&gt;Testar SV&lt;/h1&gt;\n&lt;p&gt;Weeeeii! Det fungerar!&lt;/p&gt;\n";</p>

My markdown-file is imported using import-statement and is just containing:

# Testing EN
Weeeeii! It's working!

What am I doing wrong?

Example Project

Is there an example project for this?

support more complicated code example ?

suppose we want to show how to interact with a component

like following code in markdown

const Test = React.createClass({
  getInitialState() {
    return {
      loading: false,
      visible: false,
    };
  },
  showModal() {
    this.setState({
      visible: true,
    });
  },
  handleOk() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  },
  handleCancel() {
    this.setState({ visible: false });
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open modal dialog
        </Button>
        <Modal
          visible={this.state.visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  },
});

ReactDOM.render(<Test />, mountNode);

Let inline components render without code block

I have a slightly different usecase for this package than the 'styleguide'. I'd like to define some Markdown content, and mix in other React components, but without rendering those components as html.

The change for that seems pretty trivial, though I'm not sure what unintended effects this might have: https://github.com/jzaefferer/react-markdown-loader/commit/24a57c1e372f7aeba16573cd8c926aa83f26e36c#diff-6947033678b93d106e25614dd972e66fR39

If the usecase is valid and that approach okay, I can create a pull request with that change, without the package.json changes (I needed that since yarn won't install from git).

invalid jsx generated when using tables with left/right/center alignments

Hi we have run into an error when using tables in markdown with alignments controlled using the colon syntax e.g.

|     Dropdown Selections    |                          Expanded versions                          |
|:--------------------------:|:-------------------------------------------------------------------:|
|   Automated Variable Rate  |     Automated Variable Rate Irrigation Management Control System    |

In this case the markup generated for the table within the output JSX is like so:

<table>
    <thead>
        <tr>
            <th style="text-align:center">Dropdown Selections</th>
            <th style="text-align:center">Expanded versions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center">Automated Variable Rate</td>
            <td style="text-align:center">Automated Variable Rate Irrigation Management Control System</td>
        </tr>
    </tbody>
</table>

And though this would be fine if it were truly html JSX has the requirement that "style" take a bracketed javascript object for the style settings not a simple string. Because of that we're getting this error:

Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by StatelessComponent.
at invariant (bundle.js:14373)
at assertValidProps (bundle.js:158995)
at ReactDOMComponent.mountComponent (bundle.js:159290)
at Object.mountComponent (bundle.js:27293)
at ReactDOMComponent.mountChildren (bundle.js:162536)
at ReactDOMComponent._createInitialChildren (bundle.js:159541)
at ReactDOMComponent.mountComponent (bundle.js:159360)
at Object.mountComponent (bundle.js:27293)
at ReactDOMComponent.mountChildren (bundle.js:162536)
at ReactDOMComponent._createInitialChildren (bundle.js:159541)

Do you think I'm seeing this right? Am I right it seems like a bug with react-markdown-loader?

Add support for erDiagram

https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram

Markdown parses img as <img> (not self-closed), causing problems w/ babel

Thanks for putting this out there. This library is incredibly useful.

I tried pasting an md doc with images and had problems:

// ![](...) gets converted to:
<img src="..." alt="">

As you can see, the <img> tag is not self-closed (i.e. <img />), which is invalid JSX.

I'm hoping the simple solution is that the upstream markdown-parser dependency has a way to make sure all tags are self-closed... I can do some research.

Error: Cannot find module 'markdown-parse'

Hi, I get the following error when I try it out.

Module build failed: Error: Cannot find module 'markdown-parse'

I guess you need to put markdown-parse in dependencies and not devDependencies?

Error of building of the app (processing trailing commas by babel)

After the last update (1.1.12) I receive the error:

ERROR in ./main.md
Module build failed: /Users/aleksandr/WebProjects/app/node_modules/react-markdown-loader/src/parser.js:99
      );
      ^
SyntaxError: Unexpected token )
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/aleksandr/WebProjects/app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/aleksandr/WebProjects/app/node_modules/react-markdown-loader/src/index.js:4:16)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/aleksandr/WebProjects/app/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
 @ ./src/editor/init/cookieDisabled.js 5:0-72
 @ ./src/editor/index.js
 @ multi event-source-polyfill webpack-hot-middleware/client whatwg-fetch ./src/editor/index.js

When I build app I don't use babel for transpiling for node_modules and I think most of developers also don't use. Maybe in your package should be only ES5 compatible code?

Resolving Images

Ok so first off, awesome project. I think I'll be able to use this to do some pretty cool stuff however, after migrating from markdown-loader, I'm seeing some issues with image resolving. I saw some discussion about images in #5 but I think my issue is different.

With the combination of the markdown-loader and html-loader any local image references within the markdown were resolved, loaded, and emitted to the output directory. So for...

![some image](./images/some-image.png)

That image was processed through the configured .png loader and the url replaced. I'm not seeing that happen by default in this loader and I'm not sure where I might configure it to do so as the markdown-to-html parsing happens internally. Maybe local image references should be turned into import statements as well which would return the url to inject? Similar to the behavior of the imports frontmatter directive.

Any advice would be much appreciated. I'm happy to try to help add this functionality.

```js
function Sample () {
  return 'hi'
}
```

Here is the full error:

ERROR in ./src/elements/Hello/readme.md
Module build failed: SyntaxError: Unexpected token (46:227)

  44 |     </code></pre>
  45 |   </div>
> 46 | </div><pre><code className="language-js"><span className="token keyword" >function</span> Sample <span className="token punctuation" >(</span><span className="token punctuation" >)</span> <span className="token punctuation" >{</span>
     |                                                                                                                                                                                                                                    ^
  47 |   <span className="token keyword" >return</span> <span className="token string" >'hi'</span>
  48 | <span className="token punctuation" >}</span>
  49 | </code></pre>

BabelLoaderError: SyntaxError: Unexpected token (46:227)

  44 |     </code></pre>
  45 |   </div>
> 46 | </div><pre><code className="language-js"><span className="token keyword" >function</span> Sample <span className="token punctuation" >(</span><span className="token punctuation" >)</span> <span className="token punctuation" >{</span>
     |                                                                                                                                                                                                                                    ^
  47 |   <span className="token keyword" >return</span> <span className="token string" >'hi'</span>
  48 | <span className="token punctuation" >}</span>
  49 | </code></pre>

    at transpile (/Users/tauren/repos/component-lab/node_modules/babel-loader/lib/index.js:61:13)
    at Object.module.exports (/Users/tauren/repos/component-lab/node_modules/babel-loader/lib/index.js:155:20)
 @ ./src/elements/index.js 14:0-44
 @ ./src/app/Main/index.js
 @ ./src/app/App/index.js
 @ ./src/app/Root/index.js
 @ ./src/index.js
 @ multi ./~/react-hot-loader/patch.js ./~/babel-polyfill/lib/index.js ./src/index.js webpack-dev-server/client?http://localhost:5000/ webpack/hot/dev-server

javiercf / react-markdown-loader Goto Github PK

react-markdown-loader's People

Contributors

Stargazers

Watchers

Forkers

react-markdown-loader's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs