Merge pull request #805 from beerose/feat/prism-ts

feat(@theme-ui/prism): convert to typescript

Author: hasparus

package.json

@@ -27,6 +27,7 @@
     "@babel/runtime": "^7.7.7",
     "@testing-library/react": "^9.1.3",
     "@types/jest": "^25.1.2",
+    "@types/react-test-renderer": "^16.9.2",
     "babel-jest": "^25.3.0",
     "husky": ">=4.0.7",
     "jest": "^24.8.0",

packages/prism/package.json

@@ -3,6 +3,8 @@
   "version": "0.4.0-alpha.0",
   "main": "dist/prism.js",
   "module": "dist/prism.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.tsx",
   "author": "John Otander",
   "license": "MIT",
   "scripts": {

packages/prism/presets/theme-ui.js

@@ -1,3 +1,4 @@
+// @ts-check
 export default {
   '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': {
     color: 'gray',

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

@@ -1,15 +1,29 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
-
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import { ComponentProps } from 'react'
+import Highlight, { defaultProps, Language } from 'prism-react-renderer'
 import { jsx, Styled } from 'theme-ui'
 
-const aliases = {
+const aliases: Record<string, Language | undefined> = {
   js: 'javascript',
   sh: 'bash',
 }
 
-export default ({ children, className: outerClassName, title, ...props }) => {
+type HighlightProps = ComponentProps<typeof Highlight>
+export interface ThemeUIPrismProps
+  extends Omit<
+    HighlightProps,
+    'children' | 'code' | 'language' | 'theme' | 'Prism'
+  > {
+  className: string
+  children: string
+  Prism?: HighlightProps['Prism']
+}
+export default ({
+  children,
+  className: outerClassName,
+  ...props
+}: ThemeUIPrismProps) => {
   const [language] = outerClassName.replace(/language-/, '').split(' ')
   const lang = aliases[language] || language
 
@@ -18,7 +32,7 @@ export default ({ children, className: outerClassName, title, ...props }) => {
       {...defaultProps}
       {...props}
       code={children.trim()}
-      language={lang}
+      language={lang as Language}
       theme={undefined}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <Styled.pre className={`${outerClassName} ${className}`} style={style}>

packages/prism/test/__snapshots__/index.js.snap renamed to packages/prism/test/__snapshots__/index.tsx.snap

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import renderer from 'react-test-renderer'
 import Prism from '../src'
 
 const CODE = `
   console.log('hello, world!')
 `
 
-const render = el => renderer.create(el).toJSON()
+const render = (el: ReactElement) => renderer.create(el).toJSON()
 
 test('renders a code block', () => {
   const result = render(<Prism className="language-js">{CODE}</Prism>)
@@ -16,10 +16,7 @@ test('renders a code block', () => {
 
 test('renders with other languages', () => {
   const json = render(
-    <Prism
-      className='language-php'
-      children='<h1>Hello</h1>'
-    />
+    <Prism className="language-php" children="<h1>Hello</h1>" />
   )
   expect(json).toMatchSnapshot()
 })

packages/prism/test/index.js renamed to packages/prism/test/index.tsx

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

packages/prism/tsconfig.json

@@ -4087,6 +4087,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@^16.9.2":
+  version "16.9.2"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz#e1c408831e8183e5ad748fdece02214a7c2ab6c5"
+  integrity sha512-4eJr1JFLIAlWhzDkBCkhrOIWOvOxcCAfQh+jiKg7l/nNZcCIL2MHl2dZhogIFKyHzedVWHaVP1Yydq/Ruu4agw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.19":
   version "16.9.25"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.25.tgz#6ae2159b40138c792058a23c3c04fd3db49e929e"