Friendlier configuration API

[andywer]

It's not quite intuitive how to reference custom stylesheets, customize the layout, etc. right now.

Let's come up with something better.

[andywer]

Idea:

import createReactShutter from '@shutter/react'
import { addToBody, addToHead, reactProvider, setViewport, useLayout } from '@shutter/react/config'

const shutter = createReactShutter(__dirname, [
  useLayout(myLayout),
  addToHead('<link rel="stylesheet" href="..." />'),
  addToBody('<script></script>'),
  setViewport('1920x1080'),
  reactProvider((element: React.ReactElement<any>) => (
    <SomeContextProvider>
      {element}
    </SomeContextProvider>
  ))
])

Also change the signature of layout functions from

type Layout = (content: HTMLString) => HTMLString

to

type Layout = (bodyContent: HTMLString, headContent?: HTMLString) => HTMLString

Under the hood (implementation details):

typeof addToHead = <Config extends CoreConfig>(html: string) => <Config>ConfigExtender
type ConfigExtender = <Config extends CoreConfig>(config: Config) => Config

// the <Config extends CoreConfig> generic allows it to be used with ReactConfig (extends CoreConfig) as well

interface CoreConfig {
  layout: Layout,
  bodyContent: HTMLString,
  headContent: HTMLString,
  viewport?: [number, number]
}

interface ReactConfig extends CoreConfig {
  wrapElement: (element: ReactElement<any>) => ReactElement<any>
}

[andywer]

@ulrich-merkel Thoughts? :)

[andywer]

Side note: reactProvider might be called decorate or similar.

It should be clear that it's React-specific when looking at the import. Thought of "decorate" when seeing that react-storybook calls it decorators.