Fix package exports and bundles (#293)

This PR attempts to be more logical about how Vrembem bundles and exports it's modules. It now correctly points the `browser` field in `package.json` to the bundled CommonJS (cjs) files and removes the `main` and `module` fields. Module consumption now treats the exports as follows: | Module | Export type | |---|---| |`@vrembem/checkbox` | default | |`@vrembem/dismissible` | default | |`@vrembem/drawer` | default | |`@vrembem/modal` | default | |`@vrembem/core` | named | |`vrembem` | named |
sebnitu · Aug 9, 2020 · b55cc70 · b55cc70
1 parent efffa9e
commit b55cc70
Show file tree

Hide file tree

Showing 69 changed files with 451 additions and 490 deletions.
diff --git a/docs/_includes/usage.md b/docs/_includes/usage.md
@@ -14,7 +14,7 @@ npm install {{ page.package }}
 
 {% if page.usage.js %}
 ```js
-import { {{ page.title }} } from '{{ page.package }}';
+import {{ page.title }} from '{{ page.package }}';
 ```
 {% endif %}
 

diff --git a/docs/_packages/checkbox.md b/docs/_packages/checkbox.md
@@ -34,8 +34,8 @@ For indeterminate checkboxes, apply the `aria-checked="mixed"` attribute and ini
 </div>
 
 ```js
-import { Checkbox } from "@vrembem/checkbox"
-new Checkbox({ autoInit: true })
+import Checkbox from "@vrembem/checkbox";
+const checkbox = Checkbox({ autoInit: true });
 ```
 
 ## checkbox + label

diff --git a/docs/_packages/drawer.md b/docs/_packages/drawer.md
@@ -133,7 +133,7 @@ In cases where you'd like a drawer to switch to a drawer modal on a specific bre
 A custom breakpoints object can be passed in using the `breakpoints` option. Otherwise, default values are set via the core variables module.
 
 ```js
-new Drawer({
+const drawer = Drawer({
   breakpoints: {
     xs: '480px',
     sm: '620px',
@@ -222,7 +222,7 @@ To take full advantage of drawer modal's accessibility features, it's recommened
 Here's an example where we want the `[role="main"]` content area to be inaccessible while drawer modals are open. We also want to disable other scrollable elements using the `selectorOverflow` option.
 
 ```js
-new Drawer({
+Drawer({
   autoInit: true,
   selectorInert: '[role="main"]',
   selectorOverflow: 'body, [role="main"]'
@@ -589,7 +589,7 @@ Initializes the drawer instance. During initialization, the following processes
 - Adds the `keyup` event listener for closing modal drawers with the `esc` key.
 
 ```js
-const drawer = new Drawer();
+const drawer = Drawer();
 drawer.init();
 ```
 
@@ -605,7 +605,7 @@ Destroys and cleans up the drawer instantiation. During cleanup, the following p
 - Removes the `keyup` event listener from the document.
 
 ```js
-const drawer = new Drawer();
+const drawer = Drawer();
 drawer.init();
 // ...
 drawer.destroy();

diff --git a/docs/_packages/modal.md b/docs/_packages/modal.md
@@ -196,7 +196,7 @@ To take full advantage of modal's accessibility features, it's recommened to tha
 Here's an example where we want the `[role="main"]` content area to be inaccessible while modals are open. We also want for all modals to be moved outside the main content element in the DOM.
 
 ```js
-new Modal({
+const modal = Modal({
   autoInit: true,
   selectorInert: '[role="main"]',
   moveModals: {
@@ -624,7 +624,7 @@ Initializes the modal instance. During initialization, the following processes a
 - Adds the `keyup` event listener for closing modals with the `esc` key.
 
 ```js
-const modal = new Modal();
+const modal = Modal();
 modal.init();
 ```
 
@@ -637,7 +637,7 @@ Destroys and cleans up the modal instantiation. During cleanup, the following pr
 - Removes the `keyup` event listener from the document.
 
 ```js
-const modal = new Modal();
+const modal = Modal();
 modal.init();
 // ...
 modal.destroy();

diff --git a/docs/_packages/vrembem.md b/docs/_packages/vrembem.md
@@ -8,7 +8,7 @@ usage:
   npm: true
 ---
 
-## Sass
+## Styles
 
 To include all Vrembem components into your styles, just import the vrembem package in your Sass manifest file.
 
@@ -40,25 +40,18 @@ Import and initialize the components you'll need:
 ```js
 // Import all under the vb namespace
 import * as vb from "vrembem";
-const drawer = new vb.Drawer({ autoInit: true });
+const drawer = vb.Drawer({ autoInit: true });
 
 // Or import individual components
 import { Drawer } from "vrembem";
-const drawer = new Drawer({ autoInit: true });
+const drawer = Drawer({ autoInit: true });
 ```
 
-Components also make available the `init` function for initializing or re-initializing.
-
-```js
-const modal = new Checkbox()
-modal.init()
-```
-
-> Note that `utility` component does not need to be initialized since it's just a set of helpful utility functions.
+> Note that `core` helpers does not need to be initialized since they're just a set of helpful utility functions.
 
 ## Markup
 
-Include the component's markup into your project. Use the [online documentation](https://vrembem.com) for more information, code examples and available modifiers.
+Include the component's markup into your project. Use the [online documentation](https://vrembem.com) for more information, customization options, code examples and available modifiers.
 
 ```html
 <div class="drawer__wrapper">

diff --git a/docs/dist/scripts.cjs.js b/docs/dist/scripts.cjs.js
@@ -76,7 +76,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var Checkbox = function Checkbox(options) {
+var index = (function (options) {
   var api = {};
   var defaults = {
     autoInit: false,
@@ -133,12 +133,12 @@ var Checkbox = function Checkbox(options) {
 
   if (api.settings.autoInit) api.init();
   return api;
-};
+});
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var Dismissible = function Dismissible(options) {
+var index$1 = (function (options) {
   var api = {};
   var defaults = {
     autoInit: false,
@@ -178,7 +178,7 @@ var Dismissible = function Dismissible(options) {
 
   if (api.settings.autoInit) api.init();
   return api;
-};
+});
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -832,7 +832,7 @@ var asyncToGenerator = _asyncToGenerator;
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var Drawer = function Drawer(options) {
+var index$2 = (function (options) {
   var api = {};
   var defaults = {
     autoInit: false,
@@ -1392,12 +1392,12 @@ var Drawer = function Drawer(options) {
 
   if (api.settings.autoInit) api.init();
   return api;
-};
+});
 
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var Modal = function Modal(options) {
+var index$3 = (function (options) {
   var api = {};
   var defaults = {
     autoInit: false,
@@ -1825,7 +1825,7 @@ var Modal = function Modal(options) {
 
   if (api.settings.autoInit) api.init();
   return api;
-};
+});
 
 var FUNC_ERROR_TEXT = 'Expected a function';
 var NAN = 0 / 0;
@@ -4756,37 +4756,37 @@ var src = function src(id, options, values) {
       }],
       listClass: 'menu'
     });
-    var notice_empty = document.querySelector('.notice_empty');
-    var notice_empty_text = notice_empty.querySelector('.search_text');
+    var noticeEmpty = document.querySelector('.notice_empty');
+    var noticeEmptyText = noticeEmpty.querySelector('.search_text');
     var filter = document.querySelector('.filter');
     var search = document.querySelector('.filter .search');
-    var search_clear = document.querySelector('.filter .search_clear');
+    var searchClear = document.querySelector('.filter .search_clear');
 
     var isMenuLinkActive = function isMenuLinkActive() {
       var menuLinks = document.querySelectorAll('#listjs .menu__link');
-      var isActive = hasClass(menuLinks, 'is-active');
+      var isActive = menuLinks.classList.contains('is-active');
       return isActive;
     };
 
     list.on('searchComplete', function () {
       var value = search.value;
-      notice_empty_text.innerHTML = value;
+      noticeEmptyText.innerHTML = value;
       localStorage.setItem('SearchValue', value);
 
       if (value) {
-        addClass(filter, 'is-active');
-        addClass(search, 'is-active');
-        removeClass(search_clear, 'display-none');
+        filter.classList.add('is-active');
+        search.classList.add('is-active');
+        searchClear.classList.remove('display-none');
       } else {
-        removeClass(filter, 'is-active');
-        removeClass(search, 'is-active');
-        addClass(search_clear, 'display-none');
+        filter.classList.remove('is-active');
+        search.classList.remove('is-active');
+        searchClear.classList.add('display-none');
       }
 
       if (list.visibleItems.length > 0) {
-        addClass(notice_empty, 'display-none');
+        noticeEmpty.classList.add('display-none');
       } else {
-        removeClass(notice_empty, 'display-none');
+        noticeEmpty.classList.remove('display-none');
       }
     });
     document.addEventListener('click', function () {
@@ -4844,18 +4844,18 @@ var src = function src(id, options, values) {
   }
 })();
 
-new Checkbox({
+index({
   autoInit: true
 });
-new Dismissible({
+index$1({
   autoInit: true
 });
-new Drawer({
+index$2({
   autoInit: true,
   selectorInert: '[role="main"]',
   selectorOverflow: 'body, [role="main"]'
 });
-new Modal({
+index$3({
   autoInit: true,
   selectorInert: '.page',
   moveModals: {
@@ -4864,7 +4864,7 @@ new Modal({
   },
   toggleOverflow: 'body, .page__article'
 });
-var scrollStash = new ScrollStash({
+var scrollStash = ScrollStash({
   autoInit: true,
   selectorAnchor: '.is-active',
   selectorTopElem: '.dialog__header'