[pull] main from enyo:main

.changeset/README.md

@@ -16,6 +16,23 @@ along with your work.
 Changes that a user would never see -- refactors, tests, CI, docs -- do not
 need one.
 
+## Crediting people
+
+Each entry gets a link to its pull request and commit automatically. It does
+not get a "Thanks @someone!", because that name is only ever the author of the
+commit -- which on this repository is almost always the maintainer, and says
+nothing about who found the problem.
+
+When somebody deserves the credit, write it into the changeset yourself, and
+say what they actually did:
+
+```md
+Send a single chunk for zero byte files instead of hanging. Reported and fixed
+by [@Forceu](https://github.com/Forceu).
+```
+
+That way the credit means something when it appears.
+
 The release itself is automated: once changesets land on `main`, a bot opens a
 "Version Packages" pull request that bumps the version and writes CHANGELOG.md.
 Merging that pull request publishes to npm.

.changeset/config.json

@@ -3,7 +3,8 @@
   "changelog": [
     "@changesets/changelog-github",
     {
-      "repo": "enyo/dropzone"
+      "repo": "enyo/dropzone",
+      "disableThanks": true
     }
   ],
   "commit": false,

.github/workflows/ci.yml

@@ -38,6 +38,11 @@ jobs:
 
       - run: pnpm format:check
       - run: pnpm lint
+      # Ahead of the build, which also runs tsc but only to emit declarations:
+      # this reports a type problem as a type problem rather than as a failed
+      # build. tsconfig turns on the checks beyond type errors too -- unused
+      # locals and parameters, branches that forget to return, fallthrough.
+      - run: pnpm --filter dropzone run typecheck
       - run: pnpm build:lib
       - run: pnpm test:coverage
       - run: pnpm test:e2e
@@ -92,6 +97,17 @@ jobs:
           cache: pnpm
 
       - run: pnpm install --frozen-lockfile
+
+      # svelte-check covers what tsc cannot see on its own: the TypeScript
+      # inside .svelte files, including the markup. --threshold warning means
+      # a warning fails the job rather than scrolling past in the log.
+      #
+      # No build has to have run first: in the workspace the library resolves
+      # to its TypeScript source, so this checks the website against the real
+      # thing rather than against declarations that may not exist yet.
+      - name: Check the website's types
+        run: pnpm --filter @dropzone/website run check
+
       - name: Build the website
         run: ./scripts/build-site.sh website
 

.github/workflows/release.yml

@@ -64,13 +64,19 @@ jobs:
 
       # The releases have always carried a dist.zip, and the changelog links to
       # it directly, so keep publishing one.
+      #
+      # The tag is <name>@<version>, not v<version>. Changesets only uses the
+      # v prefix for a single-package repository -- see buildGitTag in
+      # @changesets/cli, which switches on the workspace tool -- so the move to
+      # a monorepo changed the scheme, and v6.2.1 was looked up against a
+      # release that had never been created.
       - name: Attach dist.zip to the release
         if: steps.changesets.outputs.published == 'true'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # Bracket notation: a hyphenated output name would otherwise parse as
           # a subtraction in an Actions expression.
-          TAG: v${{ fromJSON(steps.changesets.outputs['published-packages'])[0].version }}
+          TAG: ${{ fromJSON(steps.changesets.outputs['published-packages'])[0].name }}@${{ fromJSON(steps.changesets.outputs['published-packages'])[0].version }}
         run: |
           cd packages/dropzone
           zip -r dist.zip dist

.gitignore

@@ -2,7 +2,6 @@ build
 components
 node_modules
 .DS_Store
-.sass-cache
 _site
 _config.yaml
 .idea

README.md

@@ -8,7 +8,8 @@ display file previews and upload progress, and handle the upload for you via
 XHR.
 
 It's fully configurable, can be styled according to your needs and is trusted by
-thousands.
+thousands. It's written in TypeScript and ships its own types, so there's
+nothing extra to install.
 
 <div align="center">
   <img width="674" alt="Dropzone Screenshot" src="https://user-images.githubusercontent.com/133277/138495095-b026cc5c-9458-4e0b-8066-d8a9d0f7e72a.png">
@@ -38,6 +39,23 @@ const { Dropzone } = require("dropzone");
 const dropzone = new Dropzone("div#myId", { url: "/file/post" });
 ```
 
+## TypeScript
+
+The types come with the package — there's no `@types/dropzone` to install, and
+you should remove it if you have it: it stopped at `5.7.9` and describes the
+v5 API.
+
+```ts
+import { Dropzone } from "dropzone";
+import type { DropzoneFile, DropzoneOptions } from "dropzone";
+
+const options: DropzoneOptions = { url: "/file/post", maxFilesize: 10 };
+const dropzone = new Dropzone("div#myId", options);
+
+// listener arguments are inferred from the event name
+dropzone.on("addedfile", (file) => console.log(file.name, file.upload.uuid));
+```
+
 [👉 Checkout our example implementations for different
 bundlers](https://github.com/dropzone/dropzone-examples)
 
@@ -60,7 +78,7 @@ Use the standalone files like this:
 ---
 
 - [📚 Full documentation](https://www.dropzone.dev/docs/)
-- [⚙️ `src/options.js`](https://github.com/enyo/dropzone/blob/main/src/options.js)
+- [⚙️ `src/options.ts`](https://github.com/enyo/dropzone/blob/main/packages/dropzone/src/options.ts)
   for all available options
 
 ---

apps/docs/docs/configuration/basics/configuration-options.md

@@ -1,6 +1,6 @@
 # Configuration Options
 
-Here is a list of all available options for Dropzone. In case any of this information is outdated (please inform us, if that's the case) or you need more insight, you can always look at the [options.js](https://github.com/enyo/dropzone/blob/main/src/options.js) that is used in the actual library.
+Here is a list of all available options for Dropzone. In case any of this information is outdated (please inform us, if that's the case) or you need more insight, you can always look at the [options.ts](https://github.com/enyo/dropzone/blob/main/packages/dropzone/src/options.ts) that is used in the actual library.
 
 | Name                    | Default     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/docs/configuration/basics/index.md

@@ -53,7 +53,7 @@ let myDropzone = Dropzone({
 
 :::tip
 
-For a list of all possible options, refer to the [`src/options.js`](https://github.com/enyo/dropzone/blob/main/src/options.js) file.
+For a list of all possible options, refer to the [`src/options.ts`](https://github.com/enyo/dropzone/blob/main/packages/dropzone/src/options.ts) file.
 
 :::
 

apps/docs/docs/configuration/events.md

@@ -39,7 +39,7 @@ Dropzone itself relies heavily on events. Everything that’s visual is created
 
 ### List of all events
 
-We will be listing all possible events here soon, but until we do that, you can find all of them, well documented in the [source code](https://github.com/enyo/dropzone/blob/main/src/options.js#L574). These are the implementations for the default event handles so you can see which arguments they receive. You can ignore the content of them if you aren't interested, or override the default behaviour (explained in the next section).
+We will be listing all possible events here soon, but until we do that, you can find all of them, well documented in the [source code](https://github.com/enyo/dropzone/blob/main/packages/dropzone/src/options.ts). These are the implementations for the default event handles so you can see which arguments they receive. You can ignore the content of them if you aren't interested, or override the default behaviour (explained in the next section).
 
 ### Overriding default event handlers
 

apps/docs/docs/getting-started/installation/package-manager.md

@@ -63,6 +63,33 @@ In order for Dropzone to find the `#my-form` the element must already exist. Eit
 
 :::
 
+## TypeScript
+
+Dropzone is written in TypeScript and the types ship with the package, so
+there is nothing to install alongside it.
+
+If you have `@types/dropzone`, remove it. It stopped at `5.7.9` and describes
+the v5 API, so it will disagree with the library you are using:
+
+```bash
+npm uninstall @types/dropzone
+```
+
+Everything is typed from the source:
+
+```typescript
+import { Dropzone } from "dropzone";
+import type { DropzoneOptions } from "dropzone";
+
+const options: DropzoneOptions = { url: "/file/post", maxFilesize: 10 };
+const dropzone = new Dropzone("div#myId", options);
+
+// The listener's arguments are inferred from the event name.
+dropzone.on("addedfile", (file) => {
+  console.log(file.name, file.upload.progress);
+});
+```
+
 ## CSS
 
 Dropzone ships with two files: a `basic.css` and a `dropzone.css`. The `dropzone.css` contains all the styling you can see in the examples and is a ready-to-go solution. If you want to have total control over the styling, you can use the `basic.css` as a base, and build on top of that, or not use any of the provided CSS files at all.

apps/website/package.json

@@ -12,7 +12,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "prepare": "svelte-kit sync",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --threshold warning",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "playwright test"
   },

apps/website/src/lib/Dropzone.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { dropzone } from "./attachments/dropzone";
+  import { dropzone } from "#lib/attachments/dropzone";
 </script>
 
 <div class="dropzone-container">

apps/website/src/lib/Footer.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import WhiteLogoSvg from "./WhiteLogoSvg.svelte";
 </script>
 

apps/website/src/lib/attachments/dropzone.ts

@@ -1,5 +1,5 @@
 import type { DropzoneFile } from "dropzone";
-import Dropzone from "dropzone";
+import { Dropzone } from "dropzone";
 // From the workspace too, so the stylesheet cannot drift from the code.
 import "dropzone/dist/dropzone.css";
 

apps/website/src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Actions from "#lib/Actions.svelte";
   import CheckList from "#lib/CheckList.svelte";
   import ContentSection from "#lib/ContentSection.svelte";

package.json

@@ -22,6 +22,7 @@
     "format": "oxfmt --ignore-path .gitignore --ignore-path .oxfmtignore .",
     "format:check": "oxfmt --check --ignore-path .gitignore --ignore-path .oxfmtignore .",
     "lint": "oxlint",
+    "typecheck": "pnpm --filter dropzone run typecheck && pnpm --filter @dropzone/website run check",
     "lint:fix": "oxlint --fix",
     "changeset": "changeset",
     "changeset:version": "changeset version",

packages/dropzone/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 6.3.1
+
+### Patch Changes
+
+- [#2362](https://github.com/enyo/dropzone/pull/2362) [`07d3876`](https://github.com/enyo/dropzone/commit/07d38763655592be3ca5e11c1239bc5a402743c7) - Drop the `sass` dependency. The stylesheets are plain CSS now, and `dist/dropzone.css` and `dist/basic.css` are unchanged in what they do: the output was compared declaration by declaration, and every difference is a value-level equivalence the minifier applies, such as `padding: 20px 20px` collapsing to `padding: 20px`.
+
+  This only affects you if you were importing `dropzone/src/dropzone.scss` directly rather than the built CSS. Import `dropzone/src/dropzone.css` instead, or the compiled `dropzone/dist/dropzone.css`.
+
+## 6.3.0
+
+### Minor Changes
+
+- [#2361](https://github.com/enyo/dropzone/pull/2361) [`4724f39`](https://github.com/enyo/dropzone/commit/4724f3907036904eefa8c3e82240ac47813f288f) - Ship TypeScript types. The library is now written in TypeScript and the package carries its own declarations, so `dropzone` is typed from its own source.
+
+  If you installed `@types/dropzone`, uninstall it: it is stuck at `5.7.9` and describes the v5 API, so it will now conflict with — and is less accurate than — the types shipped here.
+
+  `Dropzone.prototype.Emitter` is now `Dropzone.Emitter`. It was undocumented and described in the source as being exposed for tests, so this is unlikely to affect you; if you reached for it, the class is in the same place under the shorter name.
+
+### Patch Changes
+
+- [#2361](https://github.com/enyo/dropzone/pull/2361) [`4724f39`](https://github.com/enyo/dropzone/commit/4724f3907036904eefa8c3e82240ac47813f288f) - Give each dropzone its own thumbnail queue. It lived on the prototype, so every dropzone on a page shared one: queuing a thumbnail on one was visible from the others, and they rendered from a single queue guarded by a single lock. Only pages with more than one dropzone were affected.
+
 ## 6.2.1
 
 ### Patch Changes

packages/dropzone/README.md

@@ -17,8 +17,16 @@ import { Dropzone } from "dropzone";
 const dropzone = new Dropzone("div#myId", { url: "/file/post" });
 ```
 
+Written in TypeScript, and the types ship with the package. There is no
+`@types/dropzone` to install — remove it if you have it, since it stopped at
+`5.7.9` and describes the v5 API.
+
+```ts
+import type { DropzoneFile, DropzoneOptions } from "dropzone";
+```
+
 - [Documentation](https://www.dropzone.dev/docs)
-- [`src/options.js`](./src/options.js) for every available option
+- [`src/options.ts`](./src/options.ts) for every available option
 - [Changelog](./CHANGELOG.md)
 
 Development happens in the [dropzone monorepo](https://github.com/enyo/dropzone);

packages/dropzone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dropzone",
-  "version": "6.2.1",
+  "version": "6.3.1",
   "description": "Handles drag and drop of files for you.",
   "keywords": [
     "drag and drop",
@@ -39,13 +39,20 @@
     "composer.json",
     "CHANGELOG.md"
   ],
-  "main": "dist/dropzone.js",
-  "module": "dist/dropzone.mjs",
+  "main": "src/dropzone.ts",
+  "module": "src/dropzone.ts",
+  "types": "src/dropzone.ts",
+  "publishConfig": {
+    "main": "dist/dropzone.js",
+    "module": "dist/dropzone.mjs",
+    "types": "dist/dropzone.d.ts"
+  },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "vite build && vite build --config vite.config.global.mjs && pnpm run css",
-    "css": "sass src/:dist/ --style compressed",
-    "watch-css": "sass src/:dist/ --watch --style compressed",
+    "build": "vite build && vite build --config vite.config.global.mjs && pnpm run css && pnpm run build:types",
+    "css": "lightningcss --minify --sourcemap --browserslist src/dropzone.css -o dist/dropzone.css && lightningcss --minify --sourcemap --browserslist src/basic.css -o dist/basic.css",
+    "build:types": "tsc",
+    "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
@@ -55,10 +62,17 @@
   "devDependencies": {
     "@vitest/browser-playwright": "^4.1.11",
     "@vitest/coverage-v8": "^4.1.11",
-    "sass": "^1.33.0",
+    "lightningcss-cli": "^1.33.0",
+    "typescript": "^6.0.3",
     "vite": "^8.2.2",
     "vitest": "^4.1.11"
   },
+  "browserslist": [
+    "chrome >= 58",
+    "firefox >= 54",
+    "safari >= 11",
+    "edge >= 16"
+  ],
   "engines": {
     "node": ">=20.19.0"
   },

packages/dropzone/src/basic.css

@@ -0,0 +1,49 @@
+/* The minimal stylesheet: layout only, no theming. */
+
+.dropzone,
+.dropzone * {
+  box-sizing: border-box;
+}
+
+.dropzone {
+  position: relative;
+}
+.dropzone .dz-preview {
+  position: relative;
+  display: inline-block;
+  width: 120px;
+  margin: 0.5em;
+}
+.dropzone .dz-preview .dz-progress {
+  display: block;
+  height: 15px;
+  border: 1px solid #aaa;
+}
+.dropzone .dz-preview .dz-progress .dz-upload {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: green;
+}
+.dropzone .dz-preview .dz-error-message {
+  color: red;
+  display: none;
+}
+.dropzone .dz-preview.dz-error .dz-error-message,
+.dropzone .dz-preview.dz-error .dz-error-mark {
+  display: block;
+}
+.dropzone .dz-preview.dz-success .dz-success-mark {
+  display: block;
+}
+.dropzone .dz-preview .dz-error-mark,
+.dropzone .dz-preview .dz-success-mark {
+  position: absolute;
+  display: none;
+  left: 30px;
+  top: 30px;
+  width: 54px;
+  height: 58px;
+  left: 50%;
+  margin-left: -27px;
+}