diff --git a/.gitignore b/.gitignore index 0bda02ce..11a10266 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ coverage node_modules +*.tgz +stats.json # `lib` is not included in git repo lib diff --git a/.npmignore b/.npmignore index c03f9f39..e56f1255 100644 --- a/.npmignore +++ b/.npmignore @@ -1,7 +1,15 @@ +coverage +__fixtures__ +__mocks__ __snapshots__ *.spec.js app docs +yarn.lock +stats.json +*.tgz +*.log +/webpack.config.js # `lib` is included in npm dist !lib diff --git a/README.md b/README.md index ba58ae0f..5fb7b014 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ This is a _Markdown Component_ file. Here you can include JSX-style assignment e Props passed to this component are available as `props`, so you can embed those too! Hello there, {{ props.who || 'world' }}! -Another cool thing you can do is use JSX **directly** - here’s an SVG element, used inline: {{ }}. +Another cool thing you can do is use JSX **directly** - here’s an SVG element, used inline: . ``` @@ -69,7 +69,6 @@ _**Note**: destructuring imports must be quoted, but others need not be._ The above `mdx` file will produce the following module within Webpack; ```javascript -// Module generated from Markdown by markdown-component-loader v0.8.0 import React from 'react'; import PropTypes from 'prop-types'; import { name, version } from './package.json'; @@ -88,7 +87,7 @@ function MarkdownComponent(props) {

This is a Markdown Component file. Here you can include JSX-style assignment expressions; this component was generated using version { version } of { name }!

Props passed to this component are available as props, so you can embed those too! Hello there, { props.who || 'world' }!

-

Another cool thing you can do is use JSX directly - here’s an SVG element, used inline: { }.

+

Another cool thing you can do is use JSX directly - here’s an SVG element, used inline: .

); }; @@ -112,7 +111,7 @@ ReactDOM.render( ### Extra Configuration -Markdown Component Loader accepts configuration of options via either the webpack configuration file, or query string parameters. +Markdown Component Loader accepts configuration of options via the Webpack configuration file. ```javascript module.exports = { @@ -163,14 +162,13 @@ The container will have supplied `className` and `style` props passed through to #### Inner Element Styling -If `passElementProps` is set to `true`, elements within the Markdown Component can be styled on a per-element-name basis. You can set this either in the `webpack.config.js` (see the "Extra Configuration" section) or the loader's query string. +If `passElementProps` is set to `true`, elements within the Markdown Component can be styled on a per-element-name basis. You can set this in the `webpack.config.js` (see the "Extra Configuration" section). All generated standard elements (read: elements which are known to `React.DOM`) will then have `elementProps['name']` spread onto them (where `name` is the tag name of the element). This option is intended to be used with [Basscss](http://www.basscss.com/) modular CSS. Here's the above example markdown document converted with this option; ```javascript -// Module generated from Markdown by markdown-component-loader v0.8.0 import React from 'react'; import PropTypes from 'prop-types'; import { name, version } from './package.json'; @@ -194,7 +192,7 @@ function MarkdownComponent(props) {

This is a Markdown Component file. Here you can include JSX-style assignment expressions; this component was generated using version { version } of { name }!

Props passed to this component are available as props, so you can embed those too! Hello there, { props.who || 'world' }!

-

Another cool thing you can do is use JSX directly - here’s an SVG element, used inline: { }.

+

Another cool thing you can do is use JSX directly - here’s an SVG element, used inline: .

); }; diff --git a/app/Homepage.mdx b/app/Homepage.mdx index eb23471e..1687f73e 100644 --- a/app/Homepage.mdx +++ b/app/Homepage.mdx @@ -38,24 +38,24 @@ Use JSX within Markdown. Plus import objects such as shared snippets, fancy libr ```markdown --- {{{'imports:'}}} -{{{' window: global/window'}}} +{{{' numberFormat: number-format'}}} {{{' Button: ui/button'}}} --- -Hello, your user agent is {{{'{{ window.navigator.userAgent }}'}}}. +You are visitor number {{{'{{ numberFormat(1000000) }}'}}}! -{{{'{\{ }\}'}}} +{{{''}}} ``` Destructured imports, with some added single quotes: ```markdown --- -{{{'imports:'}}} -{{{' \'{ Button, Panel }\': ui'}}} +imports: +{{{' \'{ window, document }\': global'}}} --- -Hello {{{'{\{