Watson Content Hub CLI create layout command for react and vue
Simplified Layout Generation
For React, generates a single layout, layout mapping and React.Component (.jsx) template for a given type.
For Vue, generates a single layout, layout mapping and Vue.Component (.vue) template for a given type. Also updates the registration.js file to include
registerComponent() calls for react and
Vue.component() calls for vue as well as the src/index.js file (in react) to include exporting the newly created components.
ibm-wch-sdk-cli create layout --data <DATA> --type <TYPE> [--scss] [--react] [--vue] --src <SRC>
Note: This program is not meant to be used independently. It is implemented into the imb-wch-sdk-cli tool.
DATA: wchtools data folder
TYPE: name of the type to construct the layout for. This needs to be the full type name, not a regular expression. The name is case sensitive.
SRC: root dir of where to generate the layout (.jsx) and style (.scss) files. The layout files will be generated in SRC/src/layouts and the style files will be generated in SRC/styles/layouts.
- Generates layouts and layout-mapping json files (currently same as angular) based on type information.
- The layout json file goes into a subfolder layouts/ from the dir supplied into --data
- The layout-mapping json file goes into a subfolder layout-mappings/ from the dir supplied into --data
- If in React: The React.Component template goes into a subfolder src/layouts/ from where the command is called
- If in Vue: The Vue.Component templates goes into a subfolder src/layouts/ from where the command is called
- An updated registration.js will go into src/ from where the command is called
- An updated index.js will go into src/layouts from where the command is called
The react and vue template file name is derived from the type name as follows:
- convert the type name to camel case
- if the result ends with
Typeremove that suffix
- DOES NOT add a
Layoutsuffix (unlike angular, which does)
- the React.Component class name inside the template file will be the same name but upper camel case
- the Vue.Component class name inside registration.js will be the same as the React layout selectors minus the
layoutat the end
The layout selector (.json file name and parameter passed into
registerComponent()) is derived from the react component file name as follows:
- convert the component/class name to kebab case
- if the result DOES NOT end with
list, then add
The layout mapping name (.json file name) is derived from the layout name as follows:
-mappingto the layout selector
Currently does not support the "multiple" option for elements. Need to double check if null checking works on categories and option element types