diff --git a/.changeset/README.md b/.changeset/README.md index d5d6faa47..78753a55c 100644 --- a/.changeset/README.md +++ b/.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. diff --git a/.changeset/config.json b/.changeset/config.json index cf7e688d0..d641cc80d 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -3,7 +3,8 @@ "changelog": [ "@changesets/changelog-github", { - "repo": "enyo/dropzone" + "repo": "enyo/dropzone", + "disableThanks": true } ], "commit": false, diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f098945b5..38ee7de9c 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 00d9d2f6f..4e414c5b7 100644 --- a/.github/workflows/release.yml +++ b/.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 @, not v. 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 diff --git a/.gitignore b/.gitignore index 6ac110cda..dfd40d806 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,6 @@ build components node_modules .DS_Store -.sass-cache _site _config.yaml .idea diff --git a/README.md b/README.md index 0cd04606f..555c6a1c3 100644 --- a/README.md +++ b/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.
Dropzone Screenshot @@ -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 --- diff --git a/apps/docs/docs/configuration/basics/configuration-options.md b/apps/docs/docs/configuration/basics/configuration-options.md index 9a653f30f..bcd964a9d 100644 --- a/apps/docs/docs/configuration/basics/configuration-options.md +++ b/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 | | ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/apps/docs/docs/configuration/basics/index.md b/apps/docs/docs/configuration/basics/index.md index 0a51a5f36..fbe718a5e 100644 --- a/apps/docs/docs/configuration/basics/index.md +++ b/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. ::: diff --git a/apps/docs/docs/configuration/events.md b/apps/docs/docs/configuration/events.md index 7c70b0fb6..c2d19b019 100644 --- a/apps/docs/docs/configuration/events.md +++ b/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 diff --git a/apps/docs/docs/getting-started/installation/package-manager.md b/apps/docs/docs/getting-started/installation/package-manager.md index cc67b09a3..2a480a757 100644 --- a/apps/docs/docs/getting-started/installation/package-manager.md +++ b/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. diff --git a/apps/website/package.json b/apps/website/package.json index 335f0c3c5..282a67468 100644 --- a/apps/website/package.json +++ b/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" }, diff --git a/apps/website/src/lib/Dropzone.svelte b/apps/website/src/lib/Dropzone.svelte index 0219f10b1..2cc39ae5a 100644 --- a/apps/website/src/lib/Dropzone.svelte +++ b/apps/website/src/lib/Dropzone.svelte @@ -1,5 +1,5 @@
diff --git a/apps/website/src/lib/Footer.svelte b/apps/website/src/lib/Footer.svelte index 1ac9f119c..3c015dedb 100644 --- a/apps/website/src/lib/Footer.svelte +++ b/apps/website/src/lib/Footer.svelte @@ -1,4 +1,4 @@ - diff --git a/apps/website/src/lib/attachments/dropzone.ts b/apps/website/src/lib/attachments/dropzone.ts index 58a78a4e6..ff85550e1 100644 --- a/apps/website/src/lib/attachments/dropzone.ts +++ b/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"; diff --git a/apps/website/src/routes/+page.svelte b/apps/website/src/routes/+page.svelte index f03980742..eef88066a 100644 --- a/apps/website/src/routes/+page.svelte +++ b/apps/website/src/routes/+page.svelte @@ -1,4 +1,4 @@ -