Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add webpack devServer config and useAnonymousSlot docs #15

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/docs/additional/additional.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,30 @@ DireflowComponent.create({
});
```

## Anonymous Slot
The Web Component Standard supports slot.
In order to enable the anonymous slot, set the useAnonymousSlot property to `true` in the configuration.
So you can distribute your content(text or embed component) to a <slot></slot> tag.


```javascript
// src/cool-component/index.js
DireflowComponent.create({
component: App,
configuration: {
tagname: 'cool-component',
useShadow: true,
useAnonymousSlot: true,
},
});
```
```html
<cool-component>
<div>I will be distributed to cool-component's inner slot tag.</div>
</cool-component>
```


## IE 11 Support

In order to support IE 11, you will need to import the necessary polyfills.
Expand Down
18 changes: 14 additions & 4 deletions src/docs/get-started/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,20 @@ A Direflow Setup is using the same configuration as in [create-react-app](https:
However, this file offers the ability to further override any of the Webpack config that ships with Direflow.
Simply add an override after the first line:
```javascript
module.exports = (config, env) => ({
...webpackConfig(config, env),
// Add your own webpack config here (optional)
});
module.exports = {
webpack: (config, env) => ({
...webpackConfig(config, env),
// Add your own webpack config here (optional)
}),
devServer: (configFunction) => {
return function (proxy, allowedHost) {
// Add your own devServer proxy config here
// Such as proxy = {target: "/direflow", secure: false, changeOrigin: true }
const config = configFunction(proxy, allowedHost);
return config;
};
},
};
```

## Access the DOM element
Expand Down