npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@thaleslabs/chat-widget

v2.0.129

Published

Embed widget for Thales Lab chat

Downloads

16

Readme

Easy creation of embeddable widgets - https://seriousben.github.io/embeddable-react-widget

CircleCI codecov Renovate enabled

Features

  • Full ES6/ES2015 support (with Babel)
  • Package fonts, css, json, javascripts together into one single package (with Webpack)
  • No css styling conflicts between the host page and the widget (with https://github.com/premasagar/cleanslate)
  • Bookmarklet supported for fast testing and demonstration
  • User theming of widget
  • Obfuscating of the widget code
  • Unit Tested with code coverage enabled
  • Continuous Integration ready

Demo

Running the widget

Install dependencies

$ npm install

Start the development server

$ npm start
... server running at http://localhost:8080/

Run tests

$ npm test
... test output

Production build

$ npm run build
... create files in /dist

Roadmap

  • [x] Widget as react app - index.html works (webpack, babel, react)
  • [x] React widget (widget builder)
  • [x] Webpack changed to output a library
  • [x] Add tests
  • [x] Add circleci integration
  • [x] Add codecov integration for codecoverage
  • [x] Production Build
  • [x] Minified
  • [x] Add greenkeeper
  • [x] Bookmarklet
  • [x] Reset / Cleanslate / No-conflicts of styles
  • [x] Obfuscation
  • [ ] Theming support
  • [ ] Storyboard and docs
  • [ ] Integrate eslint with webpack

Background

What is an embeddable widget?

  • Usable using a simple <script> tag
  • Configurable with code
  • Themable

Why not in an iframe?

  • Interaction between the frame and the hosting page is tricky and not recommended
  • You can only display content within the iframe
  • iframe and content resizing is impossible
  • iframe sandboxing can result in missing functionalities

Read more

Read more about about widgets, react and scoping of css.

  • https://www.robinwieruch.de/minimal-react-webpack-babel-setup/#hot-module-replacement
  • https://codeburst.io/building-react-widget-libraries-using-webpack-e0a140c16ce4
  • https://github.com/timarney/react-app-rewired
  • https://github.com/premasagar/cleanslate
  • https://github.com/krasimir/third-party-react-widget
  • https://github.com/jenyayel/js-widget
  • https://github.com/anakinjay/react-widget-starter
  • https://webpack.js.org/guides/author-libraries/
  • https://github.com/webpack-contrib/webpack-serve
  • https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75
  • https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js
  • https://github.com/webpack-contrib/purifycss-webpack
  • https://medium.com/quick-code/from-zero-to-deploy-set-up-react-stack-with-webpack-3-20b57d6cb8d7
  • https://medium.com/dailyjs/building-a-react-component-with-webpack-publish-to-npm-deploy-to-github-guide-6927f60b3220
  • http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6
  • https://github.com/javascript-obfuscator/webpack-obfuscator
  • https://github.com/tsileo/embedded-js-widget
  • https://thomassileo.name/blog/2014/03/27/building-an-embeddable-javascript-widget-third-party-javascript/