Skip to content

Commit

Permalink
Convert build to rollup
Browse files Browse the repository at this point in the history
  • Loading branch information
tsov committed Sep 26, 2023
1 parent 16c3172 commit b81e8f6
Show file tree
Hide file tree
Showing 43 changed files with 706 additions and 1,365 deletions.
5 changes: 5 additions & 0 deletions .changeset/smart-cycles-raise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/draggable': minor
---

Converted build from webpack to rollout. Import paths have changed
8 changes: 4 additions & 4 deletions .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -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...]
2 changes: 1 addition & 1 deletion .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
@@ -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...

Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ example.html

coverage/
docs/
lib/
coverage/
build/
.rollup.cache/

# 'cause we are all yarny and stuff
package-lock.json
5 changes: 2 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 max.hoffmann@shopify.com or curtis.dulmage@shopify.com.

## How to contribute
Expand All @@ -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
Expand Down
85 changes: 41 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
@@ -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="">
Expand Down Expand Up @@ -40,59 +38,64 @@ interface, for more information read the documentation below.

## Install

**NOTE**: When installing with npm or yarn, `@shopify/draggable@1.0.0-beta.8` will be installed by default. If you want to install the latest version, please install `@shopify/draggable@1.0.0-beta.13` 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/draggable@1.0.0-beta.13/lib/draggable.bundle.js"></script>
<!-- legacy bundle for older browsers (IE11) -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.13/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/draggable@1.0.0-beta.13/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/draggable@1.0.0-beta.13/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/draggable@1.0.0-beta.13/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/draggable@1.0.0-beta.13/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/draggable@1.0.0-beta.13/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

Expand Down Expand Up @@ -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.

Expand All @@ -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
```

Expand All @@ -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

Expand All @@ -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.
47 changes: 47 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -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,
},
};
};
9 changes: 9 additions & 0 deletions config/typescript/rollup-plugin-includepaths.d.ts
Original file line number Diff line number Diff line change
@@ -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);
}
2 changes: 1 addition & 1 deletion examples/src/components/PageHeader/PageHeader.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
2 changes: 1 addition & 1 deletion examples/src/components/Sidebar/Sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit b81e8f6

Please sign in to comment.