Merge pull request #582 from Shopify/rollup-cleanup

Rollup cleanup

Author: tsov

.changeset/late-nails-matter.md

@@ -0,0 +1,7 @@
+---
+'@shopify/draggable': patch
+---
+
+- Cleans up code comments from build folder
+- Also resolves absolute paths for ts build declarations
+- Renames build files with .cjs and .mjs

README.md

@@ -60,27 +60,27 @@ or via CDN
     Sortable,
     Droppable,
     Swappable,
-  } from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/index.js';
+  } from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/index.mjs';
 </script>
 <!-- Draggable only -->
 <script type="module">
-  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
+  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
 </script>
 <!-- Sortable only -->
 <script type="module">
-  import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.js';
+  import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.mjs';
 </script>
 <!-- Droppable only -->
 <script type="module">
-  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.js';
+  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.mjs';
 </script>
 <!-- Swappable only -->
 <script type="module">
-  import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.js';
+  import Swappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Swappable/Swappable.mjs';
 </script>
 <!-- Plugins only -->
 <script type="module">
-  import * as Plugins from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/index.js';
+  import * as Plugins from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/index.mjs';
 </script>
 <!-- UMD browser -->
 <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable/build/umd/index.min.js"></script>

package.json

@@ -22,9 +22,9 @@
     "drag-and-drop",
     "es6"
   ],
-  "main": "build/cjs/index.js",
-  "module": "build/esm/index.js",
-  "esnext": "build/esnext/index.esnext",
+  "main": "build/cjs/index.cjs",
+  "module": "build/esm/index.mjs",
+  "esnext": "build/esnext/index.mjs",
   "umd": "build/umd/index.js",
   "types": "./index.d.ts",
   "scripts": {
@@ -37,11 +37,14 @@
     "esdoc": "esdoc -c esdoc.json",
     "test": "jest",
     "build:development": "yarn rollup --config rollup.development.config.ts --configPlugin @rollup/plugin-typescript",
-    "build:production": "tsc && yarn rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript && yarn uglifyjs --compress --mangle -- build/umd/index.js -o build/umd/index.min.js",
+    "build:production": "tsc && tsc-alias && yarn rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript && yarn uglifyjs --compress --mangle -- build/umd/index.js -o build/umd/index.min.js",
     "verify": "yarn lint && yarn type-check && yarn build && yarn test"
   },
   "files": [
     "build/**/*",
+    "!build/ts/**/*.tsbuildinfo",
+    "!build/ts/**/tests/",
+    "!build/ts/**/test/",
     "index.d.ts"
   ],
   "devDependencies": {
@@ -68,9 +71,11 @@
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.0.3",
     "rollup": "^3.29.3",
+    "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-includepaths": "^0.2.4",
     "rollup-plugin-node-externals": "^6.1.1",
     "timers": "^0.1.1",
+    "tsc-alias": "^1.8.8",
     "typescript": "^5.2.2",
     "uglify-js": "^3.17.4"
   },

rollup.config.ts

@@ -6,6 +6,7 @@ import {babel, RollupBabelInputPluginOptions} from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import {nodeResolve} from '@rollup/plugin-node-resolve';
 import includePaths from 'rollup-plugin-includepaths';
+import cleanupPlugin from 'rollup-plugin-cleanup';
 
 const packageJSON = readFileSync(
   new URL('./package.json', import.meta.url).pathname,
@@ -29,9 +30,9 @@ export function generateConfig({
           shared: 'src/shared',
         },
         paths: ['src/'],
-        extensions: ['.js', '.ts'],
+        extensions: [...extensions],
       }),
-      nodeResolve({extensions}),
+      nodeResolve({extensions: [...extensions]}),
       commonjs(),
       babel({
         extensions,
@@ -40,6 +41,10 @@ export function generateConfig({
         envName: 'production',
         targets,
       }),
+      cleanupPlugin({
+        extensions: [...extensions],
+        maxEmptyLines: 1,
+      }),
     ],
     output,
   };
@@ -53,14 +58,14 @@ const config = [
         format: 'cjs',
         dir: path.dirname(pkg.main),
         preserveModules: true,
-        entryFileNames: '[name].js',
+        entryFileNames: '[name].cjs',
         exports: 'named',
       },
       {
         format: 'esm',
         dir: path.dirname(pkg.module),
         preserveModules: true,
-        entryFileNames: '[name].js',
+        entryFileNames: '[name].mjs',
       },
       {
         format: 'umd',
@@ -76,7 +81,7 @@ const config = [
         format: 'esm',
         dir: path.dirname(pkg.esnext),
         preserveModules: true,
-        entryFileNames: '[name].esnext',
+        entryFileNames: '[name].mjs',
       },
     ],
   }),

src/Draggable/README.md

@@ -18,7 +18,7 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
 
 ```html
 <script type="module">
-  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
+  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
 
   const draggable = new Draggable(document.querySelectorAll('ul'), {
     draggable: 'li',

src/Droppable/README.md

@@ -24,7 +24,7 @@ const droppable = new Droppable(document.querySelectorAll('.container'), {
 
 ```html
 <script type="module">
-  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.js';
+  import Droppable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Droppable/Droppable.mjs';
 
   const droppable = new Droppable(document.querySelectorAll('.container'), {
     draggable: '.item',

src/Plugins/Collidable/README.md

@@ -26,8 +26,8 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
 
 ```html
 <script type="module">
-  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
-  import Collidable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Collidable.js';
+  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
+  import Collidable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Collidable.mjs';
 
   const draggable = new Draggable(document.querySelectorAll('ul'), {
     draggable: 'li',

src/Plugins/ResizeMirror/README.md

@@ -31,8 +31,8 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
 
 ```html
 <script type="module">
-  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
-  import ResizeMirror from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/ResizeMirror.js';
+  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
+  import ResizeMirror from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/ResizeMirror.mjs';
 
   const draggable = new Draggable(document.querySelectorAll('ul'), {
     draggable: 'li',

src/Plugins/Snappable/README.md

@@ -25,8 +25,8 @@ const draggable = new Draggable(document.querySelectorAll('ul'), {
 
 ```html
 <script type="module">
-  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.js';
-  import Snappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Snappable.js';
+  import Draggable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Draggable/Draggable.mjs';
+  import Snappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Snappable.mjs';
 
   const draggable = new Draggable(document.querySelectorAll('ul'), {
     draggable: 'li',

src/Plugins/SortAnimation/README.md

@@ -34,8 +34,8 @@ const sortable = new Sortable(document.querySelectorAll('ul'), {
 
 ```html
 <script type="module">
-  import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.js';
-  import Snappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Snappable.js';
+  import Sortable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Sortable/Sortable.mjs';
+  import Snappable from 'https://cdn.jsdelivr.net/npm/@shopify/draggable/build/esm/Plugins/Snappable.mjs';
 
   const sortable = new Sortable(document.querySelectorAll('ul'), {
     draggable: 'li',