@g2crowd/review-widget
v1.7.0
Published
Webcomponent review-widget following open-wc recommendations
Downloads
2,268
Keywords
Readme
Review Widget
- See npm package here
- This webcomponent follows the open-wc recommendation.
Installation
yarn install
Linting and formatting
To scan the project for linting and formatting errors, run
yarn run lint
To automatically fix linting and formatting errors, run
yarn run format
Testing with Web Test Runner
To execute a single test run:
yarn run test
To run the tests in interactive watch mode run:
yarn run test:watch
Tooling configs
For most of the tools, the configuration is in the package.json
to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
Development Notes
Publishing
Make sure you have access to the G2 NPM account.
To publish a new version of the widget, update the version number in package.json
and commit the changes.
npm login
then
yarn start
yarn build
yarn publish
Staging
This only works with chubbywombat in it's current state.
- Build and publish using instructions above
- Update review-widget version in UE package.json and run
yarn install
- Deploy to chubbywombat with updates
- When using tags outside of the my g2 preview, use the 'env' attribute to point to the correct environment, The preview on my g2 does this automatically.
5.
<review-widget widget-id="<WIDGET_UUID>" env="staging"></review-widget>
Local
yarn start
yarn build
<script src="http://localhost:8000/build-modern/components/review-widget.js"></script>
<review-widget widget-id="<WIDGET_UUID>" env="development"></review-widget>
The env attribute is necessary to ensure api calls are made to your local UE server (development).
You'll need to run yarn build
after every change
Testing in UE
UE includes this widget in package.json
. To update UE to use this local version, you can use yarn link
:
From the UE directory, create a link to this directory with:
> yarn link --relative ../review-widget
Update any HTML tags to point to the local widget.
<script src="https://www.g2.test/assets/review_widget.js"></script>
<review-widget widget-id="<WIDGET_UUID>" env="development"></review-widget>
Enable Shadow dom in Chrome inspect
- Open Dev tool by pressing F12
- Click on the cog icon in the right top
- Enable option "Show Shadow DOM" under Elements category
- Go to Elements panel and you will see the component DOM with all styles