update(typing): complete

src/createComponents.ts

@@ -36,7 +36,7 @@ const componentCreators: { [key: string]: (comp: ComponentConfig, lib: Lib) => S
   },
 }
 
-const createScope = (imports: GenImporter[], lib: object) =>
+const createScope = (imports: GenImporter[], lib: Lib) =>
   imports
     .map((key: string) => ({
       key,
@@ -50,7 +50,7 @@ const createScope = (imports: GenImporter[], lib: object) =>
       {},
     )
 
-export const createComposite = (comp: ComponentConfig, lib: object): ScopedComponent => {
+export const createComposite = (comp: ComponentConfig, lib: Lib): ScopedComponent => {
   // todo npm/local modules scope
   const scope = createScope(comp.imports!, lib)
   const Comp = toComponent(comp.jsx!, scope)

src/createHTML.ts

@@ -1,4 +1,4 @@
-import { CreateHtmlOption } from './types'
+import { CreateHtmlData, CreateHtmlOption } from './types'
 
 export default ({ data = {}, css = '', fontLinks = '', body = '' }: CreateHtmlOption) => {
   const meta = getMeta(data)
@@ -26,21 +26,23 @@ export default ({ data = {}, css = '', fontLinks = '', body = '' }: CreateHtmlOp
     .join('')
 }
 
-const getMeta = (data: object) => (key: string, name?: string) => (data[key] ? `<meta name='${name || key}' content='${data[key]}'>` : '')
+const getMeta = (data: CreateHtmlData) => (key: string, name?: string) =>
+  data[key] ? `<meta name='${name || key}' content='${data[key]}'>` : ''
 
-const getStylesheets = (stylesheets?: string[]) =>
+const getStylesheets = (stylesheets?: CreateHtmlData['stylesheets']) =>
   Array.isArray(stylesheets) ? stylesheets.map(href => `<link rel='stylesheet' href='${href}'>`) : ''
 
-const getOG = (og = {}) =>
+const getOG = (og: CreateHtmlData['og'] = {}) =>
   Object.keys(og || {})
     .map(key => getMeta(og)(key, 'og:' + key))
     .join('')
 
-const getTwitterCard = (twitter = {}) =>
+const getTwitterCard = (twitter: CreateHtmlData['twitter'] = {}) =>
   Object.keys(twitter || {})
     .map(key => getMeta(twitter)(key, 'twitter:' + key))
     .join('')
 
-const getScripts = (scripts?: string[]) => (Array.isArray(scripts) ? scripts.map(script => `<script>${script}</script>`) : '')
+const getScripts = (scripts?: CreateHtmlData['scripts']) =>
+  Array.isArray(scripts) ? scripts.map(script => `<script>${script}</script>`) : ''
 
 const baseCSS = `*{box-sizing:border-box}body{margin:0}`

src/getData.ts

@@ -4,15 +4,15 @@ import loadJsonFile from 'load-json-file'
 import * as path from 'path'
 import { promisify } from 'util'
 
-import { Content, FirstPage, Lab, Options } from './types'
+import { Content, FirstPage, Lab, Options, Theme } from './types'
 
 const readdir = promisify(fs.readdir)
 
 export const getContent = async (dirname: string, opts: Options): Promise<Content> => {
-  let theme: object | unknown = {}
+  let theme: Theme | unknown = {}
   let lab: Lab = {}
   try {
-    theme = await loadJsonFile(path.join(dirname, 'theme.json'))
+    theme = await loadJsonFile<Theme>(path.join(dirname, 'theme.json'))
   } catch (err) {
     console.log('no theme.json found')
   }

src/jsx.ts

@@ -4,15 +4,16 @@ import * as transformJSX from '@babel/plugin-transform-react-jsx'
 import * as babel from '@babel/standalone'
 import * as React from 'react'
 
+import { ScopedComponents } from './types'
+
 const parse = (raw: string) =>
   babel.transform(raw, {
     plugins: [transformJSX],
   }).code
 
 const wrap = (jsx: string) => `<React.Fragment>${jsx}</React.Fragment>`
 
-// scopeに方が当てられるはず
-const toComponent = (jsx: string, scope = {}) => {
+const toComponent = (jsx: string, scope: ScopedComponents = {}) => {
   const el = parse(wrap(jsx))
   const scopeKeys = Object.keys(scope)
   const scopeValues = scopeKeys.map(key => scope[key])

src/render.ts

@@ -21,14 +21,16 @@ const themeProviders = {
   glamorous: glamorous.ThemeProvider,
 }
 
-const cssCreators = {
-  'styled-components': (Component: React.ComponentClass, props: BasicComponentProps) => {
+type CssCreator = (Component: React.ComponentClass, props: BasicComponentProps) => string
+
+const cssCreators: { [key: string]: CssCreator } = {
+  'styled-components': (Component, props) => {
     const sheet = new SC.ServerStyleSheet()
     renderToStaticMarkup(sheet.collectStyles(h(Component, props)))
     const tags = sheet.getStyleTags()
     return tags
   },
-  glamorous: (Component: React.ComponentClass, props: BasicComponentProps) => {
+  glamorous: (Component, props) => {
     const { css } = glamor.renderStatic(() => renderToString(h(Component, props)))
     const tag = `<style>${css}</style>`
     return tag
@@ -60,7 +62,7 @@ const getLayout = (pages: FirstPage[] = [], data: CreateHtmlData, scope: ScopedC
 const renderPage = (scope: ScopedComponents, opts: Options2) => (page: FirstPage): RenderPage => {
   const library = opts.library
   const Provider = (library && themeProviders[library]) || themeProviders['styled-components']
-  const getCSS = (library && cssCreators[library]) || cssCreators['styled-components']
+  const getCSS: CssCreator = (library && cssCreators[library]) || cssCreators['styled-components']
 
   const Layout = page.ext === '.md' ? getLayout(opts.pages, page.data, scope) : React.Fragment
   const pageScope = {

src/types.ts

@@ -13,20 +13,21 @@ export type Library = string
 export type Lib = ComponentConfig | {}
 
 export interface MarkdownProps {
-  h1: { [keys: string]: number }
-  h2: { [keys: string]: number }
-  h3: { [keys: string]: number }
-  p: { [keys: string]: number }
-  options?: { [keys: string]: object }
+  h1: { [key: string]: number }
+  h2: { [key: string]: number }
+  h3: { [key: string]: number }
+  p: { [key: string]: number }
+  options?: { [key: string]: object }
   text?: string
   scope?: ScopedComponents
   library?: Library
 }
 
 export interface CreateHtmlData {
+  description?: string
   title?: string
-  og?: string
-  twitter?: string
+  og?: { [key: string]: string }
+  twitter?: { [key: string]: string }
   scripts?: string[]
   stylesheets?: string[]
   layout?: string
@@ -89,9 +90,10 @@ export interface AnchorProps {
   children?: React.ReactNode[]
 }
 
-// tslint:disable
-export type BasicComponentProps = {}
-export type Style = { [key: string]: string | number | Style }
+export type BasicComponentProps = CreateHtmlData & React.Attributes
+export interface Style {
+  [key: string]: string | number | Style
+}
 export type GenerateStyle = (props: any) => Style
 
 export interface ComponentConfig {