jreinhold/mdx-deck-live-code

A component for mdx-deck to live code in your slides. 🤯

mdx-deck-live-code's Issues

Does this currently support Typescript

Does this currently support Typescript. I at least cannot get it to work with typescript

CI doesn't test that the example works with the source package - only the published package

The problem

Ideally when running CI, we want to test that the example builds with the package from the current commit.

Currently it just downloads the latest published version of the package from the npm registry (using yarn install). The most straightforward fix is to link the sources using yarn link in the /examplefolder, however this leads to problems with peerDependencies such as react and styled-components.

The solutions

It might be possible to mitigate this by linking the sources' dependencies as well, to those that are installed in the /example directory. This was originally proposed by Dan on StackOverflow

I don't think yarn support relative links, so we might have to use npm for this.
Something like:

# in project dir
yarn install
cd example
yarn install
npm link ../
cd ..
npm link ./example/node_modules/mdx-deck
npm link ./example/node_modules/styled-components
npm link ./example/node_modules/react

1. What is the least amount of work/commands required to do this (eg. can we make do with only linking mdx-deck?
2. Can we somehow cache these links on CI, they take quite a long time to execute.

---

An alternative solution is to just copy the /dist folder into the example's node_modules.

Something like (untested)

rm -r ./example/node_modules/mdx-deck-live-code/*
cp -r {dist,package.json} ./example/node_modules/mdx-deck-live-code

FEATURE REQUEST: Support newer syntax such as class properties using Babel

Currently react-live uses Bublé under the hood to transpile the code. Bublé doesn't support everything mdx-deck does, which creates an unexpected experience for the developer, such as class properties not being supported.

We could try to use @babel/standalone to transpile the code before it enters the <LiveProvider />, but it would still go through Bublé, and had some difficulties making Babel and Bublé play nice together, so this needs further investigation. This method is discussed here: FormidableLabs/react-live#67

Code snippets for further usage:

import { transform } from '@babel/standalone';

...

<LiveProvider
  code={code}
  transformCode={transpileWithBabel}
  {...providerProps}
>

...

const transpileWithBabel = (input: string) =>
	transform(input, {
		presets: ['es2017', 'react'],
		plugins:['proposal-class-properties']
	}).code;

For presets and plugins supported by @babel/standalone see https://github.com/babel/babel/blob/master/packages/babel-standalone/src/index.js

Doesn't work with mdx-deck v2

The current iteration of mdx-deck-live-code was made for [email protected], and doesn't seem to work with [email protected]. Another unfortunate consequence of this, is that it doesn't work with the CodeSandbox mdx-deck template.

The main reason it doesn't work, is the fact that mdx-deck switched from styled-components to emotion in version 2. There may be other reasons it doesn't work, but at the moment that is the only one I know of.

To fix this, a (non exhaustive) todo list could look like:

• Migrate from styled-components to emotion
• Bump mdx-deck-live-code to v2, as this is probably a breaking change
• Note in the README.md which versions support which versions of mdx-deck
• Migrate to [email protected] as well, unless it is so big a change that it needs it's own PR.

Everyone is welcomed to give this a go.

is it possible to hide live preview?