Merge f963ebc into 1e24513

src/event-emitter/oneshot.ts

@@ -23,7 +23,7 @@ export interface CustomPayload {
   reset: undefined;
 }
 
-export interface CustomListener {
+export interface CustomListener{
   hoge: (payload: CustomPayload['hoge']) => void;
   foo: (payload: CustomPayload['foo']) => void;
   add: (payload: CustomPayload['add']) => void;
@@ -46,11 +46,11 @@ export class CustomEventEmitter extends EventEmitter {
   }
 
   public on<K extends keyof CustomListener>(event: K, listener : CustomListener[K]): this {
-    return super.on(event as string, listener);
+    return super.on(event, listener);
   }
 
   public addListener<K extends keyof CustomListener>(event: K, listener : CustomListener[K]): this {
-    return super.addListener(event as string, listener);
+    return super.addListener(event, listener);
   }
 
   public emit<K extends keyof CustomListener>(event: K, payload: CustomPayload[K]): boolean {

src/react-markdown/heading1.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export interface Heading1Props {
+  title: string
+}
+
+export class Heading1 extends React.Component<Heading1Props, {}> {
+  public render() {
+    return <h1>{this.props.title}</h1>
+  }
+}

src/react-markdown/markdown.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+// @ts-ignore
+import * as remark from 'remark'
+// @ts-ignore
+import * as remarkReact from 'remark-react'
+// @ts-ignore
+import * as remarkSlug from 'remark-slug'
+
+import { Heading1, Heading1Props } from './heading1';
+
+export interface ScopedComponents {
+  Title: () => React.Node
+}
+
+
+export interface MarkdownProps {
+  h1: { [key: string]: number }
+  scope: ScopedComponents
+}
+
+export interface MappedScope {
+  h1: React.ReactNode | undefined;
+}
+
+export interface HeadingProps {
+  id: string
+  children?: React.ReactNode[]
+}
+
+const defaultProps: MarkdownProps = {
+  h1: {
+    mb: 3,
+    mt: 4,
+  },
+  scope: {
+    Title: (props: Heading1Props) => <Heading1 {...props} />
+  }
+}
+
+const heading = (Comp: any) => (props: HeadingProps): React.ReactNode => {
+  return React.createElement(
+    Comp,
+    props,
+    React.createElement(
+      'a',
+      {
+        href: '#' + props.id,
+        style: {
+          color: 'inherit',
+          textDecoration: 'none',
+        },
+      },
+      props.children,
+    ),
+  )
+}
+
+export class Markdown extends React.Component<MarkdownProps, {}> {
+  public render() {
+    const scope = this.props.scope;
+
+    const mappedScope = this.mapScope({ ...scope })
+    const remarkReactComponents = this.applyProps(mappedScope)
+
+    const opts = {
+      // pass Lab components to remark-react for rendering
+      remarkReactComponents,
+    }
+    // @ts-ignore
+    const element = remark()
+      .use(remarkSlug)
+      .use(remarkReact, opts)
+      .processSync(text).contents
+
+    return element
+  }
+
+  private mapScope = (scope: ScopedComponents): MappedScope => {
+    const h1 = scope.Title
+    return {
+      h1: h1 ? heading(h1) : undefined,
+    }
+  }
+
+  private applyProps = (scope: MappedScope) => {
+    const props = { ...defaultProps, ...options.markdownProps }
+    Object.keys(props).forEach(key => {
+      if (!scope[key]) {
+        return
+      }
+      scope[key].defaultProps = { ...scope[key].defaultProps, ...props[key] }
+    })
+    return scope
+  }
+}