Skip to content

Instantly share code, notes, and snippets.

@pomber
Last active Nov 26, 2018
Embed
What would you like to do?
deck-run
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
{
"templateName": "mdx-deck",
"templateColor": "#222",
"sandpack": {
"defaultExtensions": ["js", "jsx", "ts", "tsx", "json"],
"aliases": {},
"preInstalledDependencies": [],
"transpilers": {
"\\.mdx$": ["./transpilers/mdx-deck-transpiler", "codesandbox:babel"],
"\\.jsx?$": ["codesandbox:babel"],
"\\.json$": ["codesandbox:json"],
".*": ["codesandbox:raw"]
}
}
}
import normalizeNewline from "normalize-newline";
import mdx from "@mdx-js/mdx";
import matter from "gray-matter";
import stringifyObject from "stringify-object";
const SLIDEREG = /\n---\n/;
export async function transpile(code, loaderContext) {
const { data, content } = matter(code);
const modules = [];
const slides = normalizeNewline(content)
.split(SLIDEREG)
.map(str => {
const code = mdx.sync(str, { skipExport: true });
const lines = code.split("\n");
const tagIndex = lines.findIndex(str => /^</.test(str));
modules.push(...lines.slice(0, tagIndex).filter(Boolean));
const jsx = lines.slice(tagIndex).join("\n");
return `({ components, ...props }) => ${jsx}`;
})
.map(str => str.trim());
return {
transpiledCode: `
import React from 'react'
import { MDXTag } from '@mdx-js/tag'
${modules.join("\n")}
export const meta = ${stringifyObject(data)}
export default [
${slides.join(",\n\n")}
]`
};
}
import React from "react";
import { render } from "react-dom";
import { SlideDeck } from "mdx-deck";
import { injectGlobal } from "styled-components";
injectGlobal`
*{box-sizing:border-box}
body{font-family:system-ui,sans-serif;margin:0}
html,body{overflow:hidden}
/* TODO use showOpenInCodeSandbox: false */
iframe {display: none}
`;
const mod = require("./deck.mdx");
const slides = mod.default;
const { theme, components, Provider } = mod;
export default class App extends React.Component {
render() {
return (
<SlideDeck
{...this.props}
slides={slides}
theme={theme}
components={components}
Provider={Provider}
/>
);
}
}
if (typeof document !== "undefined") {
render(<App />, document.getElementById("root"));
}
if (module.hot) module.hot.accept();
import styled from "styled-components";
const H2 = styled.h2`
transform: rotate(-90deg);
`;
export default H2;

export { dark as theme } from "mdx-deck/themes"; import { Image, Appear } from "mdx-deck"; import { CodeSurfer } from "mdx-deck-code-surfer"; export { components } from "mdx-deck-code-surfer" import nightOwl from "prism-react-renderer/themes/nightOwl"; import MyComponent from "./components/my-component";

Lazy loading (and preloading) components in React 16.6


This demo


public String fizzBuzz(int n){
  String s = "";
  if (n == 0)
    return s;
  if((n % 5) == 0)
    s = "Buzz" + s;
  if((n % 3) == 0)
    s = "Fizz" + s;
  if (s.equals(""))
    s = n + "";
  return fizzBuzz(n-1) +  s;
}
----
* > Copy pasted from rosettacode.org
1, 3 > Some lines
1:4, 6, 8:10 > Also ranges
2, 4[1:6], 5[2, 4, 6:9] > Some tokens

Something


Appear:

  • One
  • Two
  • Three


Foo


Bar

{
"name": "run",
"main": "/.entry.js",
"dependencies": {
"@mdx-js/mdx": "latest",
"@mdx-js/tag": "latest",
"mdx-deck": "latest",
"mdx-deck-code-surfer": "latest",
"normalize-newline": "latest",
"gray-matter": "latest",
"react": "latest",
"react-dom": "latest",
"stringify-object": "latest"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment