Skip to content

Commit

Permalink
feat: expose CLI package for creating web component wrappers (#6212)
Browse files Browse the repository at this point in the history
This PR adds the documentation for the `@ui5/webcomponents-react-cli` package and describes how to create web components wrappers on the fly.

Closes #5046

---------

Co-authored-by: Lukas Harbarth <lukas.harbarth@sap.com>
  • Loading branch information
MarcusNotheis and Lukas742 authored Aug 19, 2024
1 parent 7981491 commit 28b14d9
Showing 1 changed file with 71 additions and 0 deletions.
71 changes: 71 additions & 0 deletions docs/knowledge-base/BringYourOwnWebComponents.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { Footer, TableOfContent } from '@sb/components';
import { Meta } from '@storybook/blocks';
import { Link, MessageStrip } from '@ui5/webcomponents-react';

<Meta title="Bring Your Own Web Components" />

# Bring Your Own Web Components

<TableOfContent />

If you have created a custom UI5 Web Components package, you will be able to create React component wrappers in your project by leveraging our [@ui5/webcomponents-react-cli](http://npmjs.com/package/@ui5/webcomponents-react-cli).

<MessageStrip
hideCloseButton
design="Critical"
children={
<>
The UI5 Web Components for React CLI package is tailor-made for custom UI5 Web Components packages following{' '}
<Link href="https://sap.github.io/ui5-webcomponents/docs/development/">this documentation</Link>. <br />
You can not use it for creating React wrapper for arbitrary custom element libraries.
</>
}
/>

<br />
<br />

## Create React Wrappers

> This guide uses the name `my-custom-webcomponents-package` for the custom UI5 Web Components package. <br />
> Please replace all occurrences with your real package name when following this guide.
First of all, install the `@ui5/webcomponents-react-cli` package in your project:

```shell
npm install @ui5/webcomponents-react-cli --save-dev

# if your package is based on UI5 Web Components V1, please install the V1 version of the CLI
npm install @ui5/webcomponents-react-cli@V1 --save-dev
```

Then, install your custom UI5 Web Components package:

```shell
npm install my-custom-webcomponents-package --save
```

Now, you can add a npm script to create your wrapper components.<br />
_We recommend ensuring that the target directory (specified by the `--out` parameter) is empty._

<MessageStrip
hideCloseButton
children={
<>
The UI5 Web Component for React CLI is not aware of any code style conventions you may be using in your project, so we recommend that you run tools such as <Link href="https://prettier.io/">prettier</Link> and{' '}
<Link href="https://eslint.org/">eslint</Link> after creating the wrapper components if you are using them in your project.
</>
}
/>

```json
{
"//": "rest of your applications package.json",
"scripts": {
"//": "your other scripts",
"create-webcomponent-wrappers": "ui5-wcr create-wrappers --packageName my-custom-webcomponents-package --out ./any/directory/in/your/project"
}
}
```

<Footer />

0 comments on commit 28b14d9

Please sign in to comment.