# @ibm-wch/cli-create-layout-react-vue > Command line interface for the generation of WCH layout.jsons, layout-mapping.jsons, and template .jsx files in React or template .vue files in Vue. Latest version **1.0.15** (published 2018-09-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @ibm-wch/cli-create-layout-react-vue pnpm add @ibm-wch/cli-create-layout-react-vue yarn add @ibm-wch/cli-create-layout-react-vue bun add @ibm-wch/cli-create-layout-react-vue ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.15 | | Published | 2018-09-17 | | First published | 2018-08-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >= 6.0 | | Dependencies | 33 | | Unpacked size | 2.2 MB | | Known vulnerabilities | 0 (+4 in 3 direct dependencies) | | Install scripts | no | | Author | Eric Zhang | | Maintainers | carstenleue, crcovar, daherbst, ericzhang98-ibm, erik.bi, jbooth1, kevintap, mburati, nipuweer, rave-ibm, rywilson, tdinger-ibm, thurek, tianchen.zhang, willizard | ## Links - npm: https://www.npmjs.com/package/@ibm-wch/cli-create-layout-react-vue - Issues: https://developer.ibm.com/answers/smartspace/wch/index.html - npm.io page: https://npm.io/package/@ibm-wch/cli-create-layout-react-vue ## Dependencies (33) - [tmp](https://npm.io/package/tmp.md) ^0.0.33 - [mime](https://npm.io/package/mime.md) ^2.3.1 - [rxjs](https://npm.io/package/rxjs.md) ^6.2.1 - [uuid](https://npm.io/package/uuid.md) ^3.3.2 - [unzip](https://npm.io/package/unzip.md) ^0.1.11 - [brotli](https://npm.io/package/brotli.md) ^1.3.2 - [byline](https://npm.io/package/byline.md) ^5.0.0 - [global](https://npm.io/package/global.md) ^4.3.2 - [lodash](https://npm.io/package/lodash.md) ^4.17.10 - [rimraf](https://npm.io/package/rimraf.md) ^2.6.2 - [semver](https://npm.io/package/semver.md) ^5.5.0 - [verror](https://npm.io/package/verror.md) ^1.10.0 - [request](https://npm.io/package/request.md) ^2.87.0 - [bluebird](https://npm.io/package/bluebird.md) ^3.5.1 - [fs-extra](https://npm.io/package/fs-extra.md) ^5.0.0 - [minimist](https://npm.io/package/minimist.md) ^1.2.0 - [toposort](https://npm.io/package/toposort.md) ^1.0.7 - [random-ua](https://npm.io/package/random-ua.md) ^0.0.6 - [relateurl](https://npm.io/package/relateurl.md) ^0.2.7 - [valid-url](https://npm.io/package/valid-url.md) ^1.0.9 - [handlebars](https://npm.io/package/handlebars.md) ^4.0.11 - [tidy-html5](https://npm.io/package/tidy-html5.md) ^0.1.1 - [typescript](https://npm.io/package/typescript.md) ~2.7.2 - [graceful-fs](https://npm.io/package/graceful-fs.md) ^4.1.11 - [@angular/cli](https://npm.io/package/@angular/cli.md) ^6.0.8 - [wchtools-cli](https://npm.io/package/wchtools-cli.md) ^2.6.2 - [email-validator](https://npm.io/package/email-validator.md) ^1.1.1 - [npm-package-arg](https://npm.io/package/npm-package-arg.md) ^6.1.0 - [number-to-words](https://npm.io/package/number-to-words.md) ^1.2.3 - [transliteration](https://npm.io/package/transliteration.md) ^1.6.2 - [js-string-escape](https://npm.io/package/js-string-escape.md) ^1.0.1 - [handlebars-helpers](https://npm.io/package/handlebars-helpers.md) ^0.10.0 - [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^1.0.5 ## Recent versions - 1.0.15 (latest) — 2018-09-17 - 1.0.14 — 2018-09-13 - 1.0.3 — 2018-08-16 - 1.0.2 — 2018-08-15 - 1.0.1 — 2018-08-15 - 1.0.0 — 2018-08-15 ## README # 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. ### Usage ```bash ibm-wch-sdk-cli create layout --data --type [--scss] [--react] [--vue] --src ``` Note: This program is not meant to be used independently. It is implemented into the imb-wch-sdk-cli tool. With * `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. ## Layout Generation * 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 ### Naming Scheme 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 `Type` remove that suffix * DOES NOT add a `Layout` suffix (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 `layout` at 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 `layout` * e.g. `coolImage` -> `cool-image-layout`, `coolList` -> `cool-list` The layout mapping name (.json file name) is derived from the layout name as follows: * add `-mapping` to the layout selector ## Important Notes Currently does not support the "multiple" option for elements. Need to double check if null checking works on categories and option element types --- _Source: https://npm.io/package/@ibm-wch/cli-create-layout-react-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._