Convert build to rollup

Author: tsov

.changeset/smart-cycles-raise.md

@@ -0,0 +1,5 @@
+---
+'@shopify/draggable': minor
+---
+
+Converted build from webpack to rollout. Import paths have changed

.github/ISSUE_TEMPLATE.md

@@ -16,7 +16,7 @@ _Please remember that with sample code it's easier to reproduce the bug and it's
 
 ### 4. Please tell us about your environment:
 
-* **Library version:** [1.0.0-beta.X | v1 stable | etc...]
-* **Browsers:** [all | Chrome vX | Firefox vX | Safari vX | Edge vX | iOS vX | Android vX | etc...]
-* **Tech stack:** [all | TypeScript vX | ES6/7 | ES5 | React | etc...]
-* **Other information:** [Detailed explanation | Stacktraces | Related issues | Suggestions how to fix | Links for us to have context | etc...]
+- **Library version:** [1.X.X | v1 stable | etc...]
+- **Browsers:** [all | Chrome vX | Firefox vX | Safari vX | Edge vX | iOS vX | Android vX | etc...]
+- **Tech stack:** [all | TypeScript vX | ES6/7 | ES5 | React | etc...]
+- **Other information:** [Detailed explanation | Stacktraces | Related issues | Suggestions how to fix | Links for us to have context | etc...]

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-<!-- Thank you for submitting a pull request! Please make sure you have read the [contribution guidelines](https://github.com/Shopify/draggable/blob/master/CONTRIBUTING.md) before proceeding. -->
+<!-- Thank you for submitting a pull request! Please make sure you have read the [contribution guidelines](https://github.com/Shopify/draggable/blob/main/CONTRIBUTING.md) before proceeding. -->
 
 ### This PR implements or fixes...
 

.github/workflows/ci.yml

@@ -28,8 +28,8 @@ jobs:
       - name: Library typecheck
         run: yarn type-check
 
-      - name: Scripts typecheck
-        run: yarn type-check:scripts
+      - name: Build
+        run: yarn build
 
       - name: Test
         run: yarn test

.gitignore

@@ -17,8 +17,8 @@ example.html
 
 coverage/
 docs/
-lib/
-coverage/
+build/
+.rollup.cache/
 
 # 'cause we are all yarny and stuff
 package-lock.json

.vscode/settings.json

@@ -2,12 +2,11 @@
   "files.exclude": {
     "**/.git": true,
     "**/.DS_Store": true,
-    "**/node_modules": true,
-    "lib": true
+    "**/node_modules": true
   },
   "search.exclude": {
     "**/node_modules": true,
-    "lib": true
+    "build": true
   },
   "[typescript]": {
     "editor.formatOnSave": false,

CONTRIBUTING.md

@@ -14,7 +14,7 @@ appreciated and encouraged.
 
 ## Code of Conduct
 
-This project and everyone participating in it is governed by the [Code of Conduct document](https://github.com/Shopify/draggable/blob/master/CODE_OF_CONDUCT.md).
+This project and everyone participating in it is governed by the [Code of Conduct document](https://github.com/Shopify/draggable/blob/main/CODE_OF_CONDUCT.md).
 By participating, you are expected to uphold this code. Please report unacceptable behaviour to [email protected] or [email protected].
 
 ## How to contribute
@@ -29,11 +29,11 @@ please open a new issue with labels: `bug`, `documentation`, `feature-request` o
 Pull requests are more than welcome! Just make sure that to include a description of the problem and how you are attempting to fix the issue, or
 simply follow the Pull Request description template.
 
-We also require Pull Requests to sync with master via rebase (not merge). So when you need to sync up your branch with master use: `git pull --rebase origin master`,
+We also require Pull Requests to sync with main via rebase (not merge). So when you need to sync up your branch with main use: `git pull --rebase origin main`,
 or if you need to sync up with another branch `git pull --rebase origin some-other-branch-name`. Doing so will remove of an extra merge commit in the git history.
 This will also require a force push to the branch, e.g. `git push -u origin +some-branch`. The `+` in the last command indicates that you are force pushing changes.
 
-Additionally we require commits to be atomic and squashed where needed. This will keep the git history clean on master. To squash commits use the `git rebase -i @~2`
+Additionally we require commits to be atomic and squashed where needed. This will keep the git history clean on main. To squash commits use the `git rebase -i @~2`
 command to do an interactive rebase. This will allow you to merge multiple commits into one. To read up more on this please visit: [Git Tools Rewriting History](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History)
 
 ### JS Docblocks

README.md

@@ -1,6 +1,4 @@
-[![npm version](https://badge.fury.io/js/%40shopify%2Fdraggable.svg)](https://badge.fury.io/js/%40shopify%2Fdraggable)
-[![codecov](https://codecov.io/gh/Shopify/draggable/branch/master/graph/badge.svg)](https://codecov.io/gh/Shopify/draggable)
-[![Greenkeeper badge](https://badges.greenkeeper.io/Shopify/draggable.svg)](https://greenkeeper.io/)
+[![npm version](https://img.shields.io/npm/v/@shopify/draggable.svg?label=@shopify/draggable)](https://www.npmjs.com/package/@shopify/draggable) [![CI](https://github.com/shopify/draggable/workflows/CI/badge.svg)](https://github.com/Shopify/draggable/actions?query=branch%3Amain) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Shopify/draggable/blob/main/CONTRIBUTING.md) ![Bundle size](https://img.shields.io/badge/Bundle%20size-16.2kB-red.svg)
 
 <a href="https://shopify.github.io/draggable" title="Visit Draggable website">
   <img src="https://user-images.githubusercontent.com/643944/35602291-99e2c56e-0605-11e8-847f-95f1f6be1610.jpg" alt="">
@@ -40,59 +38,64 @@ interface, for more information read the documentation below.
 
 ## Install
 
-**NOTE**: When installing with npm or yarn, `@shopify/[email protected]` will be installed by default. If you want to install the latest version, please install `@shopify/[email protected]` or `@shopify/draggable@next`.
-
 You can install the library via npm.
 
-```
+```bash
 npm install @shopify/draggable --save
 ```
 
 or via yarn:
 
-```
+```bash
 yarn add @shopify/draggable
 ```
 
 or via CDN
 
 ```html
 <!-- Entire bundle -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
-<!-- legacy bundle for older browsers (IE11) -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.legacy.js"></script>
+<script type="module">
+  import {
+    Draggable,
+    Sortable,
+    Droppable,
+    Swappable,
+  } from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/index.js';
+</script>
 <!-- Draggable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
+<script type="module">
+  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
+</script>
 <!-- Sortable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>
+<script type="module">
+  import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.js';
+</script>
 <!-- Droppable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/droppable.js"></script>
+<script type="module">
+  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.js';
+</script>
 <!-- Swappable only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/swappable.js"></script>
+<script type="module">
+  import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.js';
+</script>
 <!-- Plugins only -->
-<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
+<script type="module">
+  import * as Plugins from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/index.js';
+</script>
+<!-- UMD browser -->
+<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>
+<script>
+  console.log(window.Draggable);
+</script>
 ```
 
 ## Browser Compatibility
 
-| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |
-| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| Latest ✔                                                                                 | Latest ✔                                                                                    | 11+ ✔                                                                                                                        | Latest ✔                                                                              | Latest ✔                                                                                 | Latest ✔                                                                           |
-
-## Bundle sizes
-
-| Package name               | ES6 bundle sizes | ES5 bundle sizes |
-| -------------------------- | ---------------- | ---------------- |
-| draggable.bundle.js        | ~11kb            | ~19.2kb          |
-| draggable.bundle.legacy.js | ~19.2kb          | ~25.63kb         |
-| draggable.js               | ~8.06kb          | ~15.36kb         |
-| sortable.js                | ~8.93kb          | ~16.51kb         |
-| swappable.js               | ~8.56kb          | ~16.14kb         |
-| droppable.js               | ~8.8kb           | ~16.55kb         |
-| plugins.js                 | ~2.37kb          | ~8.76kb          |
-| plugins/collidable.js      | ~1.45kb          | ~7.81kb          |
-| plugins/snappable.js       | ~1.19kb          | ~6.94kb          |
-| plugins/swap-animation.js  | ~1kb             | ~6.65kb          |
+Check the "browserlist" property in [package.json](https://github.com/Shopify/draggable/blob/main/package.json#L88) for more info
+
+| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Last 3 versions ✔                                                                       | Last 3 versions ✔                                                                          | Last 3 versions ✔                                                                    | Last 3 versions ✔                                                                       | Last 3 versions ✔                                                                 |
 
 ## Documentation
 
@@ -121,15 +124,13 @@ You can find the documentation for each module within their respective directori
   - [ResizeMirror](src/Plugins/ResizeMirror)
   - [Snappable](src/Plugins/Snappable)
   - [SwapAnimation](src/Plugins/SwapAnimation)
-  - [SortAnimation](src/Plugins/SortAnimation) (Added in: v1.0.0-beta.10)
+  - [SortAnimation](src/Plugins/SortAnimation)
 - [Sortable](src/Sortable)
   - [SortableEvent](src/Sortable/SortableEvent)
 - [Swappable](src/Swappable)
   - [SwappableEvent](src/Swappable/SwappableEvent)
 
-## TypeScript
-
-(Added in: v1.0.0-beta.9)
+### TypeScript
 
 Draggable includes [TypeScript](http://typescriptlang.org) definitions.
 
@@ -139,7 +140,7 @@ Draggable includes [TypeScript](http://typescriptlang.org) definitions.
 
 To run the `examples` project locally, simply run the following from the `draggable` root:
 
-```
+```bash
 yarn && yarn start
 ```
 
@@ -150,11 +151,7 @@ changes from both `src/` and `examples/src` and reloads the browser.
 
 Contributions are more than welcome, the code base is still new and needs more love.
 
-For more information, please checkout the [contributing document](https://github.com/Shopify/draggable/blob/master/CONTRIBUTING.md).
-
-## Roadmap
-
-We are currently working on `v1.0.0-beta.12`. Check out the [project board](https://github.com/Shopify/draggable/projects/3) to see tasks and follow progress on the release. Any Pull Requests should be pointed against the feature branch `v1.0.0-beta.12`.
+For more information, please checkout the [contributing document](https://github.com/Shopify/draggable/blob/main/CONTRIBUTING.md).
 
 ## Related resources
 
@@ -163,4 +160,4 @@ We are currently working on `v1.0.0-beta.12`. Check out the [project board](http
 
 ## Copyright
 
-Copyright (c) 2018 Shopify. See LICENSE.md for further details.
+Copyright (c) 2018-present Shopify. See LICENSE.md for further details.

babel.config.js

@@ -0,0 +1,47 @@
+/**
+ * @type {import('@babel/core').TransformOptions}
+ */
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {useBuiltIns: 'entry', corejs: '3.0', bugfixes: true},
+      ],
+      ['@babel/preset-typescript'],
+    ],
+    assumptions: {
+      setPublicClassFields: true,
+      privateFieldsAsProperties: true,
+      // nothing accesses `document.all`:
+      noDocumentAll: true,
+      // nothing relies on class constructors invoked without `new` throwing:
+      noClassCalls: true,
+      // nothing should be relying on tagged template strings being frozen:
+      mutableTemplateObject: true,
+      // nothing is relying on Function.prototype.length:
+      ignoreFunctionLength: true,
+      // nothing is relying on mutable re-exported bindings:
+      constantReexports: true,
+      // don't bother marking Module records non-enumerable:
+      enumerableModuleMeta: true,
+      // nothing uses [[Symbol.toPrimitive]]:
+      // (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)
+      ignoreToPrimitiveHint: true,
+      // nothing relies on spread copying Symbol keys:  ({...{ [Symbol()]: 1 }})
+      objectRestNoSymbols: true,
+      // nothing relies on `new (() => {})` throwing:
+      noNewArrows: true,
+      // transpile object spread to assignment instead of defineProperty():
+      setSpreadProperties: true,
+      // nothing should be using custom iterator protocol:
+      skipForOfIteratorClosing: true,
+      // nothing inherits from a constructor function with explicit return value:
+      superIsCallableConstructor: true,
+      // nothing relies on CJS-transpiled namespace imports having all properties prior to module execution completing:
+      noIncompleteNsImportDetection: true,
+    },
+  };
+};

config/typescript/rollup-plugin-includepaths.d.ts

@@ -0,0 +1,9 @@
+declare module 'rollup-plugin-includepaths' {
+  interface Options {
+    include: {[key: string]: string};
+    paths: string[];
+    extensions: string[];
+  }
+  export = includePaths;
+  function includePaths(object: Options);
+}

examples/src/components/PageHeader/PageHeader.html

@@ -6,6 +6,6 @@
   <header class="PageHeader">
     <h1 class="Heading Heading--size1">{{ ViewAttr.parent }}</h1>
     <h2 class="Subheading">{{ ViewAttr.subheading }}</h2>
-    <a href="https://github.com/Shopify/draggable/tree/master/examples/src/content/{{ contentPath }}" class="Link Link--typeUnderlined" title="See this code example">View code on GitHub</a>
+    <a href="https://github.com/Shopify/draggable/tree/main/examples/src/content/{{ contentPath }}" class="Link Link--typeUnderlined" title="See this code example">View code on GitHub</a>
   </header>
 {% endmacro %}

examples/src/components/Sidebar/Sidebar.html

@@ -11,7 +11,7 @@
     <footer class="SidebarFooter">
       <p class="LegalText"><a href="https://shopify.github.io/draggable/" class="Link Link--typeDark" title="Visit Draggable JS">draggable.js</a> was developed by <a href="https://github.com/tsov" class="Link Link--noWrap" title="Github: tsov">Max Hoffmann</a> and <a href="https://github.com/beefchimi" class="Link Link--noWrap" title="Github: beefchimi">Curtis Dulmage</a>.</p>
 
-      <p class="LegalText">Draggable is released under the <a href="https://github.com/Shopify/shopify.github.com/blob/master/LICENSE.md" class="Link Link--noWrap" title="View MIT License" target="_blank" rel="noopener">MIT license</a>. You are free to use the code from this library for both personal and commercial use.</p>
+      <p class="LegalText">Draggable is released under the <a href="https://github.com/Shopify/shopify.github.com/blob/main/LICENSE.md" class="Link Link--noWrap" title="View MIT License" target="_blank" rel="noopener">MIT license</a>. You are free to use the code from this library for both personal and commercial use.</p>
 
       <p class="preload-cursors"><b>Special thanks</b> <u>to all of our</u> <a href="https://github.com/Shopify/draggable/graphs/contributors" title="We love our contributors!">amazing contributors</a>.</p>
     </footer>