oc-template-react

react-templates & utilties for the OpenComponents template system

Module for handling React templates in OC

Node8	Node9	Node10

Packages included in this repo

Name	Version
`oc-template-react`
`oc-template-react-compiler`
`oc-react-component-wrapper`

Usage:

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

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

Extra info:

package.json requirements

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

package.json optional

template.externals - override unpkg.com externals

  "externals": [
    {
      "name": "Object.assign",
      "global": [
        "Object",
        "assign"
      ],
      "url": "https://mydomain.com/[email protected]/dist/object-assign-auto.min.js"
    },
    {
      "name": "prop-types",
      "global": "PropTypes",
      "url": "https://mydomain.com/[email protected]/prop-types.min.js"
    },
    {
      "name": "react",
      "global": "React",
      "url": "https://mydomain.com/[email protected]/umd/react.production.min.js"
    },
    {
      "name": "react-dom",
      "global": "ReactDOM",
      "url": "https://mydomain.com/[email protected]/umd/react-dom.production.min.js"
    }
  ]

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]
You can register an event handler within the oc.events system for the the oc:componentDidMount event. The event will be fired immediately after the react app is mounted.
You can register an event handler within the oc.events system for the the oc:cssDidMount event. The event will be fired immediately after the style tag will be added to the active DOM tree.

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
css-modules are supported.
post-css is supported with the following plugins:
White list 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: ['react-components-to-build']
      }
    }
  }
```

Utils

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

HOCs

withDataProvider

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

Usage:

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

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

yourEnhancedApp = withDataProvider(yourApp);

getData accept two arguments: (params, callback) => callback(err, result). It will perform a post back request to the component endpoint with the specified query perams invoking the callback with the results.

For more details, check the example app

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

fakel / oc-template-react Goto Github PK