@abtasty/widget-example-alpaca

Test widget with Alpaca form

Usage no npm install needed!

<script type="module">
  import abtastyWidgetExampleAlpaca from 'https://cdn.skypack.dev/@abtasty/widget-example-alpaca';
</script>

README

widget-example-alpaca

This widget was generated using AB Tasty Widget CLI, you can find documentation and help at https://.

Preview your widget

Launch your widget in a new window and watch for changes.

npm start

Main files

  • main.js Main source code of your widget
  • form.html Configuration form for your widget
  • icon.png Icon for your widget (recommended size: 200x200px)

You can specify each file location in the package.json like this:

  "main": "dist/main.js",
  "form": "form.html",
  "icon": "icon.png",

Included

  • Rollup.js module bundler (like Webpack but smaller and faster).
  • ES6/2015 support using BublĂ© preprocessor (like Babel but much faster).
  • JavaScript Linting with ESLint and Google config.
  • JavaScript minified with UglifyJS.
  • .editorconfig for consistent coding styles within text editors.

We heard your widget have an UI, so we allowed ourselves to include some extra:

  • Pug (aka Jade) to transforms html files into JS template.
  • PostCSS to automatically append your CSS to head just using import 'yourstyle.css' and also use CSS modules including:

Add your widget to AB Tasty

  1. First, you'll need to have your widget on NPM:
    • Create a minified bundle with npm run build
    • Bump the version of your widget (using semver) with npm version [patch|minor|major]
    • Publish it to NPM: npm publish
  2. Once your widget is on NPM, you can now add it on AB Tasty at https://marketplace.abtasty.com/publish.