build: prepare v2 stable version

Author: fengyuanchen

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -9,7 +9,7 @@ body:
         This form is only for submitting bug reports. If you have a usage question
         or are unsure if this is really a bug, make sure to:
 
-        - Read the [docs](https://fengyuanchen.github.io/cropperjs/v2/)
+        - Read the [docs](https://fengyuanchen.github.io/cropperjs)
         - Ask on [GitHub Discussions](https://github.com/fengyuanchen/cropperjs/discussions)
         - Look for / ask questions on [Stack Overflow](https://stackoverflow.com/questions/ask?tags=cropperjs)
 
@@ -27,7 +27,7 @@ body:
     attributes:
       label: Link to minimal reproduction
       description: |
-        The easiest way to provide a reproduction is by showing the bug in the [Playground](https://fengyuanchen.github.io/cropperjs/v2/playground.html).
+        The easiest way to provide a reproduction is by showing the bug in the [Playground](https://fengyuanchen.github.io/cropperjs/playground.html).
         If it cannot be reproduced in the playground and requires a proper build setup, try [StackBlitz](https://stackblitz.com/?starters=frontend).
         If neither of these are suitable, you can always provide a GitHub repository.
 

.github/workflows/ci.yml

@@ -3,20 +3,20 @@ name: CI
 on:
   push:
     branches:
-      - v2
+      - main
   pull_request:
     branches:
-      - v2
+      - main
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
       - run: npm install
       - run: npm run lint
       - run: npm run build

.github/workflows/deploy.yml

@@ -15,20 +15,17 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
       - run: npm install
       - run: npm run build
       - run: cp -r docs/.vitepress/dist .temp
       - uses: actions/checkout@v4
         with:
           ref: gh-pages
           clean: false
-      - run: rm -rf v2
-      - run: mkdir -p v2
-      - run: cp -rf .temp/* v2
-      - run: rm -r .temp
+      - run: cp -rf ./temp .
       - run: git config user.name "${{ github.actor }}"
       - run: git config user.email "${{ github.actor }}@users.noreply.github.com"
-      - run: git add v2
+      - run: git add .
       - run: git commit --message "${{ github.ref_name }}"
       - run: git push

README.md

@@ -1,10 +1,10 @@
 # Cropper.js
 
-[![Coverage Status](https://img.shields.io/codecov/c/github/fengyuanchen/cropperjs/v2.svg)](https://codecov.io/gh/fengyuanchen/cropperjs) [![Downloads](https://img.shields.io/npm/dm/cropperjs.svg)](https://www.npmjs.com/package/cropperjs) [![Version](https://img.shields.io/npm/v/cropperjs/next.svg)](https://www.npmjs.com/package/cropperjs)
+[![Coverage Status](https://img.shields.io/codecov/c/github/fengyuanchen/cropperjs.svg)](https://codecov.io/gh/fengyuanchen/cropperjs) [![Downloads](https://img.shields.io/npm/dm/cropperjs.svg)](https://www.npmjs.com/package/cropperjs) [![Version](https://img.shields.io/npm/v/cropperjs.svg)](https://www.npmjs.com/package/cropperjs)
 
-> JavaScript image cropper. This is the branch for v2.x, for v1.x, check out the [`main`](https://github.com/fengyuanchen/cropperjs/tree/main) branch.
+> JavaScript image cropper. This is the branch for v2.x, for v1.x, check out the [`v1`](https://github.com/fengyuanchen/cropperjs/tree/v1) branch.
 
-- [Website](https://fengyuanchen.github.io/cropperjs/v2/)
+- [Website](https://fengyuanchen.github.io/cropperjs/)
 
 ## Versioning
 

docs/.vitepress/config.mts

@@ -7,21 +7,21 @@ import lerna from '../../lerna.json';
 const packages = resolve(__dirname, '../../packages');
 
 export default defineConfig({
-  base: '/cropperjs/v2/',
+  base: '/cropperjs/',
   head: [
     [
       'link',
       {
         rel: 'apple-touch-icon',
         sizes: '180x180',
-        href: '/cropperjs/v2/apple-touch-icon.png',
+        href: '/cropperjs/apple-touch-icon.png',
       },
     ],
     [
       'link',
       {
         rel: 'icon',
-        href: '/cropperjs/v2/favicon.ico',
+        href: '/cropperjs/favicon.ico',
       },
     ],
     [
@@ -30,7 +30,7 @@ export default defineConfig({
         rel: 'icon',
         type: 'image/png',
         size: '16x16',
-        href: '/cropperjs/v2/favicon-16x16.png',
+        href: '/cropperjs/favicon-16x16.png',
       },
     ],
     [
@@ -39,7 +39,7 @@ export default defineConfig({
         rel: 'icon',
         type: 'image/png',
         size: '32x32',
-        href: '/cropperjs/v2/favicon-32x32.png',
+        href: '/cropperjs/favicon-32x32.png',
       },
     ],
     [
@@ -67,7 +67,7 @@ export default defineConfig({
     socialLinks: [
       {
         icon: 'github',
-        link: 'https://github.com/fengyuanchen/cropperjs/tree/v2',
+        link: 'https://github.com/fengyuanchen/cropperjs',
       },
     ],
     footer: {
@@ -90,7 +90,7 @@ export default defineConfig({
       description: 'JavaScript image cropper.',
       themeConfig: {
         editLink: {
-          pattern: 'https://github.com/fengyuanchen/cropperjs/edit/v2/docs/:path',
+          pattern: 'https://github.com/fengyuanchen/cropperjs/edit/main/docs/:path',
           text: 'Edit this page on GitHub',
         },
         nav: [
@@ -113,13 +113,13 @@ export default defineConfig({
           {
             text: lerna.version,
             items: [
-              { text: 'Changelog', link: 'https://github.com/fengyuanchen/cropperjs/blob/v2/CHANGELOG.md' },
-              { text: 'Contributing', link: 'https://github.com/fengyuanchen/cropperjs/blob/v2/.github/CONTRIBUTING.md' },
+              { text: 'Changelog', link: 'https://github.com/fengyuanchen/cropperjs/blob/main/CHANGELOG.md' },
+              { text: 'Contributing', link: 'https://github.com/fengyuanchen/cropperjs/blob/main/.github/CONTRIBUTING.md' },
             ],
           },
           {
             text: '1.x',
-            link: 'https://fengyuanchen.github.io/cropperjs',
+            link: 'https://fengyuanchen.github.io/cropperjs/v1/',
           },
         ],
         sidebar: {
@@ -194,7 +194,7 @@ export default defineConfig({
           label: '在当前页面上',
         },
         editLink: {
-          pattern: 'https://github.com/fengyuanchen/cropperjs/edit/v2/docs/:path',
+          pattern: 'https://github.com/fengyuanchen/cropperjs/edit/main/docs/:path',
           text: '在 GitHub 上编辑此页',
         },
         docFooter: {
@@ -220,7 +220,7 @@ export default defineConfig({
           },
           {
             text: '1.x',
-            link: 'https://fengyuanchen.github.io/cropperjs',
+            link: 'https://fengyuanchen.github.io/cropperjs/v1',
           },
         ],
         sidebar: {

docs/api/cropper-canvas.md

@@ -34,7 +34,7 @@ The default minimum width and minimum height of this element are `200px` and `10
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-handle action="move" plain></cropper-handle>
 </cropper-canvas>
 ```
@@ -49,7 +49,7 @@ All pointer events are disabled.
 
 ```html
 <cropper-canvas background disabled>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-handle action="move" plain></cropper-handle>
 </cropper-canvas>
 ```

docs/api/cropper-handle.md

@@ -24,7 +24,7 @@ The default width and height of this element is `0`.
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-handle action="move"></cropper-handle>
 </cropper-canvas>
 ```
@@ -37,7 +37,7 @@ The default width and height of this element is `0`.
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-selection width="100" height="100" movable>
     <cropper-handle action="move"></cropper-handle>
   </cropper-selection>

docs/api/cropper-image.md

@@ -23,7 +23,7 @@ The default width and height of this element is `0`.
 :::live-demo
 
 ```html
-<cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" style="width: 100%;" rotatable scalable skewable translatable></cropper-image>
+<cropper-image src="/cropperjs/picture.jpg" alt="Picture" style="width: 100%;" rotatable scalable skewable translatable></cropper-image>
 ```
 
 :::
@@ -85,7 +85,7 @@ The built-in `<img>` element will inherit the following attributes by default:
   cropperImage.$ready((image) => {
     console.log(image.naturalWidth, image.naturalHeight);
   });
-  cropperImage.src = '/cropperjs/v2/picture.jpg';
+  cropperImage.src = '/cropperjs/picture.jpg';
   ```
 
 Defers the callback to execute after successfully loading the image.

docs/api/cropper-selection.md

@@ -72,7 +72,7 @@ Set the `dynamic` property to `true` to change as the image changes.
 
 ```html
 <cropper-canvas style="height: 360px;" background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-shade hidden></cropper-shade>
   <cropper-handle action="move" plain></cropper-handle>
   <cropper-selection initial-coverage="0.5" dynamic movable resizable zoomable>
@@ -101,7 +101,7 @@ Set the `multiple` property to `true` to support multiple selections on the same
 
 ```html
 <cropper-canvas style="height: 360px;" background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-shade hidden></cropper-shade>
   <cropper-handle action="select" plain></cropper-handle>
   <cropper-selection id="cropperSelection" x="20" y="20" width="40" height="40" movable resizable multiple keyboard>

docs/api/cropper-shade.md

@@ -48,7 +48,7 @@ The default width and height of this element is `0`.
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-shade hidden></cropper-shade>
   <cropper-handle action="select" plain></cropper-handle>
   <cropper-selection movable resizable hidden>

docs/api/cropper-viewer.md

@@ -24,7 +24,7 @@ The default height of this element is `0`.
 
 ```html
 <cropper-canvas style="height: 240px;" background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-shade hidden></cropper-shade>
   <cropper-handle action="select" plain></cropper-handle>
   <cropper-selection id="cropperSelection" initial-aspect-ratio="1.5" initial-coverage="0.5" movable resizable>

docs/guide.md

@@ -41,7 +41,7 @@ Cropper.js 2.0 is a series of web components for image cropping.
 npm is the recommended installation method when building large-scale applications with Cropper.js.
 
 ```sh
-npm install cropperjs@next
+npm install cropperjs
 ```
 
 For a specific package:
@@ -55,7 +55,7 @@ npm install @cropper/element-canvas
 For prototyping or learning purposes, you can use the latest version with:
 
 ```html
-<script src="https://unpkg.com/cropperjs@next"></script>
+<script src="https://unpkg.com/cropperjs"></script>
 ```
 
 For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions.
@@ -73,7 +73,7 @@ const cropper = new Cropper('#image');
 ```
 
 ```html
-<img id="image" src="/cropperjs/v2/picture.jpg" alt="Picture">
+<img id="image" src="/cropperjs/picture.jpg" alt="Picture">
 ```
 
 #### Use in DOM
@@ -88,7 +88,7 @@ import 'cropperjs';
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-shade hidden></cropper-shade>
   <cropper-handle action="select" plain></cropper-handle>
   <cropper-selection initial-coverage="0.5" movable resizable>
@@ -127,7 +127,7 @@ CropperHandle.$define();
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-handle action="move" plain></cropper-handle>
 </cropper-canvas>
 ```
@@ -140,18 +140,18 @@ Cropper.js contains a series of [npm](https://www.npmjs.com/) packages:
 
 | Package | Version | Description |
 | --- | --- | --- |
-| `cropperjs` | [![Version](https://img.shields.io/npm/v/cropperjs/next)](https://www.npmjs.com/package/cropperjs/v/next) | The all-in-one package. |
-| `@cropper/element` | [![Version](https://img.shields.io/npm/v/@cropper/element/next)](https://www.npmjs.com/package/@cropper/element) | An abstract class for constructing Cropper elements. |
-| `@cropper/element-canvas` | [![Version](https://img.shields.io/npm/v/@cropper/element-canvas/next)](https://www.npmjs.com/package/@cropper/element-canvas) | A custom canvas element for the Cropper. |
-| `@cropper/element-image` | [![Version](https://img.shields.io/npm/v/@cropper/element-image/next)](https://www.npmjs.com/package/@cropper/element-image) | A custom image element for the Cropper. |
-| `@cropper/element-shade` | [![Version](https://img.shields.io/npm/v/@cropper/element-shade/next)](https://www.npmjs.com/package/@cropper/element-shade) | A custom shade element for the Cropper. |
-| `@cropper/element-handle` | [![Version](https://img.shields.io/npm/v/@cropper/element-handle/next)](https://www.npmjs.com/package/@cropper/element-handle) | A custom handle element for the Cropper. |
-| `@cropper/element-selection` | [![Version](https://img.shields.io/npm/v/@cropper/element-selection/next)](https://www.npmjs.com/package/@cropper/element-selection) | A custom selection element for the Cropper. |
-| `@cropper/element-grid` | [![Version](https://img.shields.io/npm/v/@cropper/element-grid/next)](https://www.npmjs.com/package/@cropper/element-grid) | A custom grid element for the Cropper. |
-| `@cropper/element-crosshair` | [![Version](https://img.shields.io/npm/v/@cropper/element-crosshair/next)](https://www.npmjs.com/package/@cropper/element-crosshair) | A custom crosshair element for the Cropper. |
-| `@cropper/element-viewer` | [![Version](https://img.shields.io/npm/v/@cropper/element-viewer/next)](https://www.npmjs.com/package/@cropper/element-viewer) | A custom viewer element for the Cropper. |
-| `@cropper/elements` | [![Version](https://img.shields.io/npm/v/@cropper/elements/next)](https://www.npmjs.com/package/@cropper/elements) | A series of custom elements for the Cropper. |
-| `@cropper/utils` | [![Version](https://img.shields.io/npm/v/@cropper/utils/next)](https://www.npmjs.com/package/@cropper/utils) | A series of common constants and utility functions for Cropper. |
+| `cropperjs` | [![Version](https://img.shields.io/npm/v/cropperjs)](https://www.npmjs.com/package/cropperjs/v) | The all-in-one package. |
+| `@cropper/element` | [![Version](https://img.shields.io/npm/v/@cropper/element)](https://www.npmjs.com/package/@cropper/element) | An abstract class for constructing Cropper elements. |
+| `@cropper/element-canvas` | [![Version](https://img.shields.io/npm/v/@cropper/element-canvas)](https://www.npmjs.com/package/@cropper/element-canvas) | A custom canvas element for the Cropper. |
+| `@cropper/element-image` | [![Version](https://img.shields.io/npm/v/@cropper/element-image)](https://www.npmjs.com/package/@cropper/element-image) | A custom image element for the Cropper. |
+| `@cropper/element-shade` | [![Version](https://img.shields.io/npm/v/@cropper/element-shade)](https://www.npmjs.com/package/@cropper/element-shade) | A custom shade element for the Cropper. |
+| `@cropper/element-handle` | [![Version](https://img.shields.io/npm/v/@cropper/element-handle)](https://www.npmjs.com/package/@cropper/element-handle) | A custom handle element for the Cropper. |
+| `@cropper/element-selection` | [![Version](https://img.shields.io/npm/v/@cropper/element-selection)](https://www.npmjs.com/package/@cropper/element-selection) | A custom selection element for the Cropper. |
+| `@cropper/element-grid` | [![Version](https://img.shields.io/npm/v/@cropper/element-grid)](https://www.npmjs.com/package/@cropper/element-grid) | A custom grid element for the Cropper. |
+| `@cropper/element-crosshair` | [![Version](https://img.shields.io/npm/v/@cropper/element-crosshair)](https://www.npmjs.com/package/@cropper/element-crosshair) | A custom crosshair element for the Cropper. |
+| `@cropper/element-viewer` | [![Version](https://img.shields.io/npm/v/@cropper/element-viewer)](https://www.npmjs.com/package/@cropper/element-viewer) | A custom viewer element for the Cropper. |
+| `@cropper/elements` | [![Version](https://img.shields.io/npm/v/@cropper/elements)](https://www.npmjs.com/package/@cropper/elements) | A series of custom elements for the Cropper. |
+| `@cropper/utils` | [![Version](https://img.shields.io/npm/v/@cropper/utils)](https://www.npmjs.com/package/@cropper/utils) | A series of common constants and utility functions for Cropper. |
 
 ## Interfaces
 

docs/public/manifest.webmanifest

@@ -2,7 +2,7 @@
   "name": "Cropper.js",
   "short_name": "Cropper.js",
   "description": "JavaScript image cropper.",
-  "start_url": "/cropperjs/v2/index.html",
+  "start_url": "/cropperjs/index.html",
   "display": "standalone",
   "background_color": "#fff",
   "theme_color": "#39f"

docs/zh/api/cropper-canvas.md

@@ -34,7 +34,7 @@
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-handle action="move" plain></cropper-handle>
 </cropper-canvas>
 ```
@@ -49,7 +49,7 @@
 
 ```html
 <cropper-canvas background disabled>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-handle action="move" plain></cropper-handle>
 </cropper-canvas>
 ```

docs/zh/api/cropper-handle.md

@@ -24,7 +24,7 @@
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-handle action="move"></cropper-handle>
 </cropper-canvas>
 ```
@@ -37,7 +37,7 @@
 
 ```html
 <cropper-canvas background>
-  <cropper-image src="/cropperjs/v2/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
+  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
   <cropper-selection width="100" height="100" movable>
     <cropper-handle action="move"></cropper-handle>
   </cropper-selection>