https://github.com/btmpl/react-bricks
Bundle your components as standalone widgets!
https://github.com/btmpl/react-bricks
Last synced: 11 months ago
JSON representation
Bundle your components as standalone widgets!
- Host: GitHub
- URL: https://github.com/btmpl/react-bricks
- Owner: BTMPL
- Created: 2018-07-16T17:29:19.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-18T16:55:23.000Z (almost 8 years ago)
- Last Synced: 2025-04-01T21:48:09.235Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://react-brick.surge.sh/
- Size: 129 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-brick
Bundle your components as standalone widgets!
## Demo
http://react-brick.surge.sh/
If all goes well, you should see 2 (clickable) buttons and an image that loads after 1 second.
## Status
This is a proof of concept and as such is not meant for serious usage!
## How to use
1. Create your component like a normal React component and save it as
```
examples/bricks/YourComponentName/index.js
```
2. Build the dll bundle
```
yarn run build:dll
```
3. Build your brick
```
set BRICK=YourComponentName && yarn run build:brick
```
> Temp solution because `yarn run build:brick YourComponentName` passes the last word as another `webpack` entry point :( Might need to alter this command on UNIX platforms. I'm a Windows guy ;)
4. Done!
Your brick is now built in the `dist` folder.
To test it, run the folder via a http server and make sure to add the JavaScript bundle and target element to your HTML.
### Developing locally
When developing it's useful to run webpack in watch mode and serve the app. Start one terminal window with:
```bash
set BRICK=MyButton && yarn run watch
```
and server the app in another:
```bash
yarn start
```
### Why ...
#### `my-button` and not `Button` or `MyButton`?
Using custom components, according to the spec:
> The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.
> Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (<app-drawer></app-drawer>).
#### `on-click` not `onClick`, `class-name` not `class`?
The component attributes are passed to React component. React uses [specific names for HTML attributes](https://reactjs.org/docs/dom-elements.html).
#### `data-for` on style?
The `data-for` is currently used to make sure the style is pulled into the shadow DOM and applied to the component.
#### My function passed as prop does not work.
Right now only `on-` attributes are evaluated as functions. Also, make sure to actually pass a function, like you would do with React components:
```html
// GOOD:
// BAD
```
#### Do I have to declare `propTypes`?
Only if you want your components to react to attribute changes.
#### What's the browser support?
I've added a polyfill for WebComponents support in Edge. There's also a small adapter that makes the babel-transpiled classes work as components registration.
#### I've tried to pass the function but it breaks my component in Internet Explorer (IE 11)
This is because IE lacks the support for arrow function. You can get around that by passing a normal function. Please note the extra set of parenthesis.
```html
// GOOD:
```