ot-oc-template-react-email

templates & utilties for handling emails at OpenTable with the OpenComponents template system

---

Packages included in this repo

Name	Version
ot-oc-template-react-email
ot-oc-template-react-email-compiler

Usage:

Initialize a component with the ot-oc-template-react-email and follow the CLI instructions

$ oc init <your-component-name> ot-oc-template-react-email

Extra info:

package.json requirements

• template.src - the react Component entry point - should export a react component as default
• template.type - ot-oc-template-react-email
• required in devDependencies - ot-oc-template-react-email-compiler

conventions

• props = server() - the viewModel generated by the server is automatically passed to the react application as props
• The oc-client-browser is extended and will now expose all the available react-component at oc.reactComponents[bundleHash]. Although email are server-side-rendered, the client-side-rendering support is intended for dev purpose.

externals

Externals are not bundled when packaging and publishing the component, for better size taking advantage of externals caching. OC will make sure to provide them at Server-Side & Client-Side rendering time for you.

• React
• ReactDOM
• PropTypes

features

• Server Side Rendering = server side rendering should work as for any other OpenComponent. Differently from the 'oc-template-react' template this template rely on renderToStaticMarkup() for SSR as no hidration is needed.
• css is supported by converting any css imported into Style Objects. This object is compatible with React Inline Styles.
• Whitelist dependencies to be inlcuded in the build process done by the compiler. To whitelist dependencies installed in the node_modules folder, add in the package.json of the component a buildIncludes list:

    ...
    oc : {
      files: {
        template: {
          ...
          buildIncludes: ['npm-dependency-to-build']
        }
      }
    }

Utils

The compiler exposes some utilities that could be used by your React application:

HOCs

withSettingProvider

An Higher order component that will make a getSetting function available via props.

Usage:

import { withSettingProvider } from 'oc-template-react-compiler/utils';

const yourApp = props => {
  // you can use props.getSetting here
};

yourEnhancedApp = withSettingProvider(yourApp);

getSetting accept one argument: settingName => settingValue. It will return the value for the requested setting.

Settings available at the moment:

• getSetting('name') : return the name of the OC component
• getSetting('version') : return the version of the OC component
• getSetting('baseUrl') : return the baseUrl of the oc-registry
• getSetting('staticPath') : return the path to the static assets of the OC component