A forkable demo repo for xcomponent to help you get started.
xcomponent is a cross-domain component library which helps you render iframes and popups, pass down props, accept callbacks, and much more. This repo sets you up with the best possible starting point for building an xcomponent, including:
- Predefined webpack, babel, karma etc. configs for working with xcomponent
- Predefined test-setup, including a mock component frame
- Predefined demo pages for both iframe and popup components
Useful starting points
- Fork the module
- Start editing code in
./srcand writing tests in
npm run build
npm run build
Running Demo Server
npm run demo
- Host your bundled xcomponent script somewhere, e.g.
- Set up a public url for your component, e.g.
- Make sure the
login.xcomponent.jsis included in the login page, and using
Now other sites can include
https://mysite.com/login.xcomponent.js on their pages, and render your component!
Edit tests in
Run the tests:npm run test
Testing with different/multiple browsers
npm run karma -- --browser=PhantomJSnpm run karma -- --browser=Chromenpm run karma -- --browser=Safarinpm run karma -- --browser=Firefoxnpm run karma -- --browser=PhantomJS,Chrome,Safari,Firefox
Keeping the browser open after tests
npm run karma -- --keep-open
Before you publish for the first time:
- Remove the example code in
- Edit the module name in
- Publish your code:
npm run releaseto build and publish a patch version
npm run release:patch,
npm run release:minor,
npm run release:major
webpack.config.jsis set up to build both
popupversions of your component. Normally this will be overkill and you'll just want to pick one. The reason there's an example of both is, the popup rendering code adds more to the bundle size, so cutting this out can streamline your bundle if you only need iframe support.
The karma tests use a mock for the component window (i.e. everything displayed in the popup window or iframe window). This can be seen here. When writing tests which need to consume
window.xpropsand call callbacks like
window.xprops.onLogin(), you'll need to do that here.
This module imports from
xcomponent/dist, allowing your build to take advantage of tree-shaking, flow-types, etc. from
xcomponentand all of its dependencies. That means that various babel plugins etc. that are required by
xcomponentand its dependencies are included in this module. If this isn't to your liking, you're free to switch to
xcomponent/dist, but be warned that you will lose out on some benefits this way. It will reduce the build time though.