initial commit

Author: kt-weyert

README.md

@@ -0,0 +1,136 @@
+# `mdx.macro`
+
+[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-plugin-macros)
+
+[![npm version](https://img.shields.io/badge/npm-0.2.5-brightgreen.svg)](https://github.com/weyert/mdx.macro)
+
+A babel-macro for converting mdx into an inline component.
+
+```markdown
+## This is some MDX source
+
+<SomeComponent />
+
+~~strikethrough~~
+```
+
+```js
+import { mdx, imports } from 'mdx.macro'
+import { MDXTag } from '@mdx-js/tag'
+imports() // copies import statements from markdown file to here
+
+const SomeMDXComponent = mdx('./markdown.md')
+
+generates...
+
+```js
+const SomeMDXComponent = ({ components, ...props }) => (
+  <MDXTag name="wrapper" components={components}>
+    <MDXTag name="h2" components={components}>{`This is some MDX source`}</MDXTag>{' '}
+    <SomeComponent />{' '}
+    <MDXTag name="p" components={components}>
+      <MDXTag
+        name="del"
+        components={components}
+        parentName="p"
+      >
+        {`strikethrough`}
+      </MDXTag>
+    </MDXTag>
+  </MDXTag>
+)
+```
+
+### Getting started
+
+#### Set up an application
+
+  Recommended setup - set up an application from scratch
+
+  [yarn](https://yarnpkg.com/en/docs/cli/) or [npm](https://docs.npmjs.com/cli/install) can be used
+
+  create a package.json file
+  ```
+    npm init
+
+    yarn init
+  ```
+
+  install webpack and webpack-cli as dev dependencies
+  ```
+    npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
+
+    yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin -D
+  ```
+
+  add to package.json
+  ```
+    "scripts": {
+      "start": "webpack-dev-server --mode development --open",
+      "build": "webpack --mode production"
+    },
+  ```
+
+  install and save react and react-dom
+  ```
+    npm i react react-dom
+
+    yarn add react react-dom
+  ```
+
+  install and save the following dev dependencies
+  ```
+    npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D
+
+    yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D
+  ```
+
+  create a [webpack](https://webpack.js.org/guides/getting-started/#using-a-configuration) config. Example of a basic webpack config file:
+  ```
+    const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+    const htmlPlugin = new HtmlWebPackPlugin({
+      template: "./src/index.html",
+      filename: "./index.html"
+    });
+
+    module.exports = {
+      module: {
+        rules: [
+          {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            use: {
+              loader: "babel-loader"
+            }
+          }
+        ]
+      },
+      plugins: [htmlPlugin]
+    };
+  ```
+
+  create a .babelrc file and add the following presets
+  ```
+    {
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    }
+  ```
+
+#### Install and save the following dev dependencies
+  ```
+    npm i @innerfuse/mdx.macro babel-plugin-macros @mdx-js/tag -D
+
+    yarn add @innerfuse/mdx-macro babel-plugin-macros @mdx-js/tag -D
+  ```
+
+#### Add [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md) to your babel config file
+  ```
+    "plugins": [
+      "babel-plugin-macros"
+    ]
+  ```
+
+### Known Problems
+
+If you use a React component which is not defined in the Javascript file and is not imported the application will stop working and you will get an error similar to `__jsxFilename not defined`. If this is the case ensure you have the component referred in the Markdown file is defined.

__tests__/__fixtures__/basic-example/code.js

@@ -0,0 +1,3 @@
+import { mdx } from '@innerfuse/mdx.macro'
+
+const SomeMDXComponent = mdx('./markdown.mdx')

__tests__/__fixtures__/basic-example/markdown.mdx

@@ -0,0 +1,3 @@
+## This is some MDX source
+<SomeComponent />
+~~strikethrough~~

__tests__/__fixtures__/basic-example/output.js

@@ -0,0 +1,6 @@
+const SomeMDXComponent = ({
+    components,
+    ...props
+  }) => <MDXTag name="wrapper" components={components}><MDXTag name="h2" components={components}>{`This is some MDX source`}</MDXTag>
+    <SomeComponent />
+    <MDXTag name="p" components={components}><MDXTag name="del" components={components} parentName="p">{`strikethrough`}</MDXTag></MDXTag></MDXTag>;

__tests__/mdx.macro.js

@@ -0,0 +1,9 @@
+const path = require('path')
+const pluginTester = require('babel-plugin-tester')
+const plugin = require('babel-plugin-macros')
+
+pluginTester({
+  plugin,
+  snapshot: true,
+  fixtures: path.join(__dirname, '__fixtures__'),
+})

mdx.macro.js

@@ -0,0 +1,118 @@
+const { createMacro } = require("babel-plugin-macros");
+const mdx = require("@mdx-js/mdx");
+const restSpreadSyntax = require("babel-plugin-syntax-object-rest-spread");
+const jsxSyntax = require("babel-plugin-syntax-jsx");
+const path = require("path");
+const fs = require("fs");
+
+module.exports = createMacro(MDX);
+
+function MDX({ references, babel, state }) {
+  const { mdx, imports } = references;
+  const { types: t } = babel;
+
+  let mdxImports = [];
+  mdx.forEach(referencePath => {
+    if (referencePath.parentPath.type === "CallExpression") {
+      const importStatements = requireRaw({ referencePath, state, babel });
+      mdxImports = [...mdxImports, ...importStatements];
+    } else {
+      throw new Error(
+        `This is not supported: \`${referencePath
+          .findParent(babel.types.isExpression)
+          .getSource()}\`. Please see the raw.macro documentation`
+      );
+    }
+  });
+
+  // Process any imports and add them where `imports` was called from
+  imports.forEach(reference => {
+    let { ast, code } = babel.transform(
+      [`import {MDXTag} from '@mdx-js/tag'`].concat(mdxImports).join("\n"),
+      {
+        ast: true
+      }
+    );
+    reference.parentPath.replaceWithMultiple(
+      ast.program.body.map(impNode => {
+        return t.importDeclaration(impNode.specifiers, impNode.source);
+      })
+    );
+  });
+}
+
+function requireRaw({ referencePath, state, babel }) {
+  const filename = state.file.opts.filename;
+  const { types: t } = babel;
+  const callExpressionPath = referencePath.parentPath;
+  const dirname = path.dirname(filename);
+  let rawPath;
+
+  try {
+    rawPath = callExpressionPath.get("arguments")[0].evaluate().value;
+  } catch (err) {
+    // swallow error, print better error below
+  }
+
+  if (rawPath === undefined) {
+    throw new Error(
+      `There was a problem evaluating the value of the argument for the code: ${callExpressionPath.getSource()}. ` +
+        `If the value is dynamic, please make sure that its value is statically deterministic.`
+    );
+  }
+
+  const fullPath = path.resolve(dirname, rawPath);
+  const fileContent = fs.readFileSync(fullPath, { encoding: "utf-8" });
+
+  let transformedFunction = mdx.sync(fileContent).replace("export default", "");
+  const funcName = callExpressionPath.parent.id.name;
+
+  let mdxImports = [];
+  transformedFunction = transformedFunction
+    .split("\n")
+    .map(line => {
+      if (line.includes("import")) {
+        mdxImports.push(line);
+        return null;
+      } else {
+        return line;
+      }
+    })
+    .filter(Boolean)
+    .join("\n");
+
+  let { ast, code } = babel.transform(
+    `const ${funcName} = ${transformedFunction}`,
+    {
+      plugins: [jsxSyntax, restSpreadSyntax],
+      ast: true
+    }
+  );
+
+  callExpressionPath.replaceWith(
+    t.arrowFunctionExpression(
+      [
+        // build out a function argument that looks like
+        // ({ components, ...props })
+        t.objectPattern([
+          t.objectProperty(
+            t.identifier("components"),
+            t.identifier("components"),
+            false,
+            // set shorthand to true, otherwise it generates
+            // ({ components: components })
+            true
+          ),
+          // spread in props
+          t.restElement(t.identifier("props"))
+        ])
+      ],
+      // :this_is_fine_dog:
+      // ensure we grab the last function, in case babel
+      // transforms the above code into more than one function
+      ast.program.body[ast.program.body.length - 1].declarations[0].init.body
+    )
+  );
+
+  return mdxImports;
+}