illright · aabounegm · Nov 1, 2020 · Oct 27, 2020 · Oct 27, 2020 · Oct 27, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/) and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+### Added
+- All components are now registered as `customElements` as well, meaning that they can be used with Svelte (or any framework). This does not affect any existing usage. More information in [the docs](https://illright.github.io/attractions/docs/customElements).
+
+### Changed
+- The [`<Button>`](https://github.com/illright/attractions/blob/master/attractions/button/button.svelte)'s `click` event was being forwarded directly instead of the payload being wrapped as with other events. This is changed (in commit 0b549d5cbd4a2c5328d5019886b8a4a25f7b903d) for consistency.
+
 ## [2.1.1] - 2020-09-02
 
 Minor documentation and bug fixes.

diff --git a/README.md b/README.md
@@ -38,6 +38,21 @@ autoPreprocess({
 })
 ```
 
+---
+
+Alteratively, the library can be used from a CDN, such as unpkg, and then the components will be registered as custom elements. This is especially useful for quick prototypes that do not need all the features provided.
+
+Example usage:
+```html
+<head>
+  <script src="https://unpkg.com/attractions"></script>
+</head>
+<body>
+  <a-button filled="filled">My button</a-button>
+</body>
+```
+For more details, check out [the docs](https://illright.github.io/attractions/docs/customElements).
+
 ## Theming
 
 You may configure style parameters such as colors, fonts and shadows by overriding respective variables in your `_attractions-theme.scss` file:

diff --git a/attractions/_attractions-theme.scss b/attractions/_attractions-theme.scss
diff --git a/attractions/accordion/accordion-section.svelte b/attractions/accordion/accordion-section.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-accordion-section" />
+
 <script>
   import Button from '../button/button.svelte';
   import { createEventDispatcher } from 'svelte';

diff --git a/attractions/accordion/accordion.svelte b/attractions/accordion/accordion.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-accordion" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/autocomplete/autocomplete-field.svelte b/attractions/autocomplete/autocomplete-field.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-autocomplete-field" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import DropdownShell from '../dropdown/dropdown-shell.svelte';

diff --git a/attractions/autocomplete/autocomplete-option.svelte b/attractions/autocomplete/autocomplete-option.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-autocomplete-option" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
 

diff --git a/attractions/autocomplete/autocomplete.svelte b/attractions/autocomplete/autocomplete.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-autocomplete" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import Button from '../button/button.svelte';

diff --git a/attractions/autocomplete/more-horizontal.svelte b/attractions/autocomplete/more-horizontal.svelte
@@ -1,4 +1,6 @@
 <!-- More-horizontal icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="24"

diff --git a/attractions/badge/badge.svelte b/attractions/badge/badge.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-badge" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/button/button.svelte b/attractions/button/button.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-button" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import ripple from '../utils/ripple.js';
@@ -71,7 +73,7 @@
     class:rectangle
     class:small
     class:selected
-    on:click
+    on:click={(e) => dispatch('click', { nativeEvent: e })}
     use:ripple={{ disabled: noRipple || disabled }}
     use:eventsAction={events}
     {...$$restProps}

diff --git a/attractions/button/index.js b/attractions/button/index.js
diff --git a/attractions/card/card.svelte b/attractions/card/card.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-card" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/checkbox/checkbox-group.svelte b/attractions/checkbox/checkbox-group.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-checkbox-group" />
+
 <script>
   import classes from '../utils/classes.js';
   import getColorPickerStyles from '../utils/color-picker-styles.js';

diff --git a/attractions/checkbox/checkbox.svelte b/attractions/checkbox/checkbox.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-checkbox" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/chip/checkbox-chip-group.svelte b/attractions/chip/checkbox-chip-group.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-checkbox-chip-group" />
+
 <script>
   import s from '../utils/plural-s.js';
   import classes from '../utils/classes.js';

diff --git a/attractions/chip/checkbox-chip.svelte b/attractions/chip/checkbox-chip.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-checkbox-chip" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/chip/chip.svelte b/attractions/chip/chip.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-chip" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/chip/radio-chip-group.svelte b/attractions/chip/radio-chip-group.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-radio-chip-group" />
+
 <script>
   import classes from '../utils/classes.js';
   import RadioChip from './radio-chip.svelte';

diff --git a/attractions/chip/radio-chip.svelte b/attractions/chip/radio-chip.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-radio-chip" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/date-picker/calendar.svelte b/attractions/date-picker/calendar.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-calendar" />
+
 <script>
   import Button from '../button/button.svelte';
   import { createEventDispatcher } from 'svelte';

diff --git a/attractions/date-picker/chevron-left.svelte b/attractions/date-picker/chevron-left.svelte
@@ -1,4 +1,6 @@
 <!-- Chevron-left icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="24"

diff --git a/attractions/date-picker/chevron-right.svelte b/attractions/date-picker/chevron-right.svelte
@@ -1,4 +1,6 @@
 <!-- Chevron-right icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="24"

diff --git a/attractions/date-picker/date-picker.svelte b/attractions/date-picker/date-picker.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-date-picker" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/dialog/dialog.svelte b/attractions/dialog/dialog.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-dialog" />
+
 <script>
   import Button from '../button/button.svelte';
   import X from './x.svelte';

diff --git a/attractions/dialog/x.svelte b/attractions/dialog/x.svelte
@@ -1,4 +1,6 @@
 <!-- X icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="24"

diff --git a/attractions/divider/divider.svelte b/attractions/divider/divider.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-divider" />
+
 <script>
   export let text = null;
 </script>

diff --git a/attractions/dot/dot.svelte b/attractions/dot/dot.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-dot" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/dropdown/dropdown-shell.svelte b/attractions/dropdown/dropdown-shell.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-dropdown-shell" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/dropdown/dropdown.svelte b/attractions/dropdown/dropdown.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-dropdown" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/file-input/file-dropzone.svelte b/attractions/file-input/file-dropzone.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-file-dropzone" />
+
 <script>
   import Paperclip from './paperclip.svelte';
   import Plus from './plus.svelte';

diff --git a/attractions/file-input/file-input.svelte b/attractions/file-input/file-input.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-file-input" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import Button from '../button/button.svelte';

diff --git a/attractions/file-input/file-tile.svelte b/attractions/file-input/file-tile.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-file-tile" />
+
 <script>
   import Trash2 from './trash-2.svelte';
   import Button from '../button/button.svelte';

diff --git a/attractions/file-input/paperclip.svelte b/attractions/file-input/paperclip.svelte
@@ -1,4 +1,6 @@
 <!-- Paperclip icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/file-input/plus.svelte b/attractions/file-input/plus.svelte
@@ -1,4 +1,6 @@
 <!-- Plus icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/file-input/trash-2.svelte b/attractions/file-input/trash-2.svelte
@@ -1,4 +1,6 @@
 <!-- Trash-2 icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="24"

diff --git a/attractions/form-field/form-field.svelte b/attractions/form-field/form-field.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-form-field" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/index.js b/attractions/index.js
@@ -70,3 +70,5 @@ export { default as AutocompleteField } from './autocomplete/autocomplete-field.
 export { default as Badge } from './badge/badge.svelte';
 
 export { default as Pagination } from './pagination/pagination.svelte';
+
+export * as utils from './utils';
diff --git a/attractions/loading/loading.svelte b/attractions/loading/loading.svelte
@@ -1,4 +1,6 @@
 <!-- Adapted from SpinKit by @tobiasahlin: https://tobiasahlin.com/spinkit/ -->
+<svelte:options tag="a-loading" />
+
 <script>
   import classes from '../utils/classes.js';
 

diff --git a/attractions/modal/modal.svelte b/attractions/modal/modal.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-modal" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/package.json b/attractions/package.json
@@ -20,10 +20,12 @@
   ],
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^9.0.0",
+    "node-sass": "^4.14.1",
     "pkg-versions": "^2.1.0",
     "rollup": "^2.18.2",
     "rollup-plugin-svelte": "^5.2.3",
-    "svelte": "^3.23.2"
+    "svelte": "^3.23.2",
+    "svelte-preprocess": "^4.5.2"
   },
   "peerDependencies": {
     "node-sass": "^4.14.1",

diff --git a/attractions/pagination/pagination.svelte b/attractions/pagination/pagination.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-pagination" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import Button from '../button/button.svelte';

diff --git a/attractions/popover/popover-button.svelte b/attractions/popover/popover-button.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-popover-button" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/popover/popover.svelte b/attractions/popover/popover.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-popover" />
+
 <script>
   import classes from '../utils/classes.js';
   import PopoverPositions from './popover-positions.js';

diff --git a/attractions/radio-button/radio-button.svelte b/attractions/radio-button/radio-button.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-radio-button" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import classes from '../utils/classes.js';

diff --git a/attractions/radio-button/radio-group.svelte b/attractions/radio-button/radio-group.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-radio-group" />
+
 <script>
   import classes from '../utils/classes.js';
   import getColorPickerStyles from '../utils/color-picker-styles.js';

diff --git a/attractions/rollup.config.js b/attractions/rollup.config.js
@@ -1,20 +1,41 @@
 import svelte from 'rollup-plugin-svelte';
 import resolve from '@rollup/plugin-node-resolve';
+import autoPreprocess from 'svelte-preprocess';
 import pkg from './package.json';
 
 const name = pkg.name
   .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
   .replace(/^\w/, m => m.toUpperCase())
   .replace(/-\w/g, m => m[1].toUpperCase());
 
-export default {
-  input: 'index.js',
-  output: [
-    { file: pkg.module, 'format': 'es' },
-    { file: pkg.main, 'format': 'umd', name },
-  ],
-  plugins: [
-    svelte(),
-    resolve(),
-  ],
-};
+export default [
+  {
+    input: 'index.js',
+    output: [
+      { file: pkg.module, 'format': 'es' },
+      { file: pkg.main, 'format': 'umd', name },
+    ],
+    plugins: [
+      svelte(),
+      resolve(),
+    ],
+  },
+  {
+    // This will likely replace the other configuration above
+    input: 'index.js',
+    output: {
+      file: 'dist/bundle.js',
+      format: 'iife',
+      name: 'attractions',
+    },
+    plugins: [
+      svelte({
+        customElement: true,
+        preprocess: autoPreprocess({
+          scss: { includePaths: ['./'] },
+        }),
+      }),
+      resolve(),
+    ],
+  },
+];
diff --git a/attractions/snackbar/snackbar-container.svelte b/attractions/snackbar/snackbar-container.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-snackbar-container" />
+
 <script>
   import { setContext } from 'svelte';
   import Snackbar from './snackbar.svelte';

diff --git a/attractions/snackbar/snackbar.svelte b/attractions/snackbar/snackbar.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-snackbar" />
+
 <script>
   import Button from '../button/button.svelte';
   import { fly } from 'svelte/transition';

diff --git a/attractions/star-rating/star-rating.svelte b/attractions/star-rating/star-rating.svelte
@@ -1,3 +1,5 @@
+<svelte:options tag="a-star-rating" />
+
 <script>
   import { createEventDispatcher } from 'svelte';
   import Star from './star.svelte';

diff --git a/attractions/star-rating/star.svelte b/attractions/star-rating/star.svelte
@@ -1,4 +1,6 @@
 <!-- Star icon from the Feather Icons pack: https://feathericons.com/ -->
+<svelte:options tag={null} />
+
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="24"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -70,3 +70,5 @@ export { default as AutocompleteField } from './autocomplete/autocomplete-field.
		export { default as Badge } from './badge/badge.svelte';

		export { default as Pagination } from './pagination/pagination.svelte';

		export * as utils from './utils';