add typescript support

Author: mustaphaturhan

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.0.0] - 2021-05-18
+
+### Added
+
+- Typescript support.
+
+### 🔥💥 Breaking Changes
+
+- There is no need to import `defaults` to extend/change default theme anymore. `chakra-ui-markdown-renderer` will merge default and your theme together automatically. If you have `...defaults` in your theme, you may delete it safely.
+
+```jsx
+import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
+
+const newTheme = {
+  p: props => {
+    const { children } = props;
+    return <Text mb={2} fontSize={'12px'}>{children}</Text>;
+  },
+}
+
+<ReactMarkdown
+  components={ChakraUIRenderer(newTheme)}
+  children={markdown}
+  escapeHtml={false}
+/>;
+```
+
 ## [2.0.0] - 2021-05-14
 
 ### 🔥💥 Breaking Changes

README.md

@@ -4,7 +4,7 @@
   <img src="https://img.shields.io/npm/v/chakra-ui-markdown-renderer?color=green&style=flat-square" />
 </a>
 
-This package is created for people who using [Chakra-UI's](https://chakra-ui.com/) and [react-markdown](https://github.com/rexxars/react-markdown) together.
+This package is created for people who using [Chakra-UI's](https://chakra-ui.com/) and [react-markdown](https://github.com/remarkjs/react-markdown) together.
 
 ### The Problem
 
@@ -38,11 +38,12 @@ import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 
 ### Extending Defaults
 
+`chakra-ui-markdown-renderer` is merging standart theme with your theme by default.
+
 ```jsx
-import ChakraUIRenderer, { defaults } from 'chakra-ui-markdown-renderer';
+import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 
 const newTheme = {
-  ...defaults,
   p: props => {
     const { children } = props;
     return <Text mb={2} fontSize={'12px'}>{children}</Text>;

package.json

@@ -2,9 +2,10 @@
   "name": "chakra-ui-markdown-renderer",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
-  "source": "src/index.js",
-  "version": "2.0.0",
+  "source": "src/index.tsx",
+  "version": "3.0.0",
   "private": false,
+  "types": "./dist/index.d.ts",
   "license": "MIT",
   "files": [
     "dist",
@@ -22,19 +23,26 @@
     "emotion-theming": "^10.0.27",
     "framer-motion": "^2.9.5",
     "react": ">= 16.8",
-    "react-dom": ">= 16.8"
+    "react-dom": ">= 16.8",
+    "react-markdown": "^6.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@rollup/plugin-babel": "^5.3.0",
+    "@types/deepmerge": "^2.2.0",
+    "@types/react": "^17.0.5",
     "cross-env": "^7.0.0",
+    "install-peers-cli": "^2.2.0",
     "rollup": "^2.47.0",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "typescript": "^4.2.4"
   },
   "scripts": {
     "build": "rollup -c",

rollup.config.js

@@ -3,20 +3,27 @@ import external from 'rollup-plugin-peer-deps-external';
 import del from 'rollup-plugin-delete';
 import { terser } from 'rollup-plugin-terser';
 import pkg from './package.json';
+import typescript from 'rollup-plugin-typescript2';
 
-export default {
-  input: pkg.source,
-  output: [
-    { file: pkg.main, format: 'cjs' },
-    { file: pkg.module, format: 'esm' },
-  ],
-  plugins: [
-    external(),
-    terser(),
-    babel({
-      exclude: 'node_modules/**',
-    }),
-    del({ targets: ['dist/*'] }),
-  ],
-  external: Object.keys(pkg.peerDependencies || {}),
-};
+export default [
+  {
+    input: pkg.source,
+    output: [
+      { file: pkg.main, format: 'cjs', exports: 'named' },
+      { file: pkg.module, format: 'esm', exports: 'named' },
+    ],
+    plugins: [
+      del({ targets: ['dist/*'] }),
+      terser(),
+      external(),
+      babel({
+        exclude: 'node_modules/**',
+      }),
+      typescript({
+        rollupCommonJSResolveHack: false,
+        clean: true,
+      }),
+    ],
+    external: Object.keys(pkg.peerDependencies || {}),
+  },
+];

src/index.js renamed to src/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   Text,
   Code,
@@ -17,14 +17,25 @@ import {
   Th,
   Td,
 } from '@chakra-ui/react';
+import deepmerge from 'deepmerge';
+import { Components } from 'react-markdown/src/ast-to-react';
 
-function getCoreProps(props) {
+type GetCoreProps = {
+  children?: React.ReactNode;
+  'data-sourcepos'?: any;
+};
+
+function getCoreProps(props: GetCoreProps): any {
   return props['data-sourcepos']
     ? { 'data-sourcepos': props['data-sourcepos'] }
     : {};
 }
 
-export const defaults = {
+interface Defaults extends Components {
+  heading?: Components['h1'];
+}
+
+export const defaults: Defaults = {
   p: props => {
     const { children } = props;
     return <Text mb={2}>{children}</Text>;
@@ -48,7 +59,16 @@ export const defaults = {
       return <Code p={2} children={children} />;
     }
 
-    return <Code className={className} whiteSpace="break-spaces" d="block" w="full" p={2} children={children} />;
+    return (
+      <Code
+        className={className}
+        whiteSpace="break-spaces"
+        d="block"
+        w="full"
+        p={2}
+        children={children}
+      />
+    );
   },
   del: props => {
     const { children } = props;
@@ -59,18 +79,13 @@ export const defaults = {
   },
   a: Link,
   img: Image,
-  linkReference: Link,
-  imageReference: Image,
   text: props => {
     const { children } = props;
     return <Text as="span">{children}</Text>;
   },
   ul: props => {
-    const { start, ordered, children, depth } = props;
+    const { ordered, children, depth } = props;
     const attrs = getCoreProps(props);
-    if (start !== null && start !== 1 && start !== undefined) {
-      attrs.start = start.toString();
-    }
     let Element = UnorderedList;
     let styleType = 'disc';
     if (ordered) {
@@ -91,11 +106,8 @@ export const defaults = {
     );
   },
   ol: props => {
-    const { start, ordered, children, depth } = props;
+    const { ordered, children, depth } = props;
     const attrs = getCoreProps(props);
-    if (start !== null && start !== 1 && start !== undefined) {
-      attrs.start = start.toString();
-    }
     let Element = UnorderedList;
     let styleType = 'disc';
     if (ordered) {
@@ -160,34 +172,40 @@ export const defaults = {
   th: Th,
 };
 
-function ChakraUIRenderer(theme = defaults) {
-  return {
-    p: theme.p,
-    em: theme.em,
-    blockquote: theme.blockquote,
-    code: theme.code,
-    del: theme.del,
-    hr: theme.hr,
-    a: theme.a,
-    img: theme.img,
-    text: theme.text,
-    ul: theme.ul,
-    ol: theme.ol,
-    li: theme.li,
-    h1: theme.heading,
-    h2: theme.heading,
-    h3: theme.heading,
-    h4: theme.heading,
-    h5: theme.heading,
-    h6: theme.heading,
-    pre: theme.pre,
-    table: theme.table,
-    thead: theme.thead,
-    tbody: theme.tbody,
-    tr: theme.tr,
-    td: theme.td,
-    th: theme.th,
+function ChakraUIRenderer(theme?: Defaults, merge = true): Components {
+  const elements = {
+    p: defaults.p,
+    em: defaults.em,
+    blockquote: defaults.blockquote,
+    code: defaults.code,
+    del: defaults.del,
+    hr: defaults.hr,
+    a: defaults.a,
+    img: defaults.img,
+    text: defaults.text,
+    ul: defaults.ul,
+    ol: defaults.ol,
+    li: defaults.li,
+    h1: defaults.heading,
+    h2: defaults.heading,
+    h3: defaults.heading,
+    h4: defaults.heading,
+    h5: defaults.heading,
+    h6: defaults.heading,
+    pre: defaults.pre,
+    table: defaults.table,
+    thead: defaults.thead,
+    tbody: defaults.tbody,
+    tr: defaults.tr,
+    td: defaults.td,
+    th: defaults.th,
   };
+
+  if (theme && merge) {
+    return deepmerge(elements, theme);
+  }
+
+  return elements;
 }
 
 export default ChakraUIRenderer;

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "exclude": ["node_modules", "./**/*.js"],
+  "include": ["src"]
+}