Use the new oc-template-react template on vite-templates
=================
react-templates & utilities for the OpenComponents template system
Module for handling React templates in OC
Node8 | Node9 | Node10 |
---|---|---|
Name | Version |
---|---|
oc-template-react |
|
oc-template-react-compiler |
|
oc-react-component-wrapper |
Initialize a component with the oc-template-react and follow the CLI instructions
$ oc init <your-component-name> oc-template-react
template.src
- the react App entry point - should export a react component as default
template.type
- oc-template-react
devDependencies
- oc-template-react-compiler
template.externals
- override unpkg.com externals
"externals": [
{
"name": "Object.assign",
"global": [
"Object",
"assign"
],
"url": "https://mydomain.com/es6-object-assign@1.1.0/dist/object-assign-auto.min.js"
},
{
"name": "prop-types",
"global": "PropTypes",
"url": "https://mydomain.com/prop-types@15.7.2/prop-types.min.js"
},
{
"name": "react",
"global": "React",
"url": "https://mydomain.com/react@16.9.0/umd/react.production.min.js"
},
{
"name": "react-dom",
"global": "ReactDOM",
"url": "https://mydomain.com/react-dom@16.9.0/umd/react-dom.production.min.js"
}
]
props = server()
- the viewModel generated by the server is automatically passed to the react application as propsoc.reactComponents[bundleHash]
oc:componentDidMount
event. The event will be fired immediately after the react app is mounted.oc:cssDidMount
event. The event will be fired immediately after the style tag will be added to the active DOM tree.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.
Server Side Rendering
= server side rendering should work as for any other OpenComponentcss-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']
}
}
}
The compiler exposes some utilities that could be used by your React application:
An Higher order component that will make a getData
function available via props.
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
An Higher order component that will make a getSetting
function available via props.
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 componentgetSetting('version')
: return the version of the OC componentgetSetting('baseUrl')
: return the baseUrl of the oc-registrygetSetting('staticPath')
: return the path to the static assets of the OC component