deprecate legacyTranslate and gpuAcceleration (#176)

* Push

* Add changeset

.changeset/seven-schools-relax.md

@@ -0,0 +1,10 @@
+---
+"@neodrag/core": minor
+"@neodrag/react": minor
+"@neodrag/solid": minor
+"@neodrag/svelte": minor
+"@neodrag/vanilla": minor
+"@neodrag/vue": minor
+---
+
+deprecate: legacyTranslate and gpuAcceleration

docs/src/components/options/Options.astro

@@ -70,7 +70,10 @@ const orderedOptionsMD = ORDER.map(
 <section class='options-examples container'>
 	{
 		orderedOptionsMD.map(
-			({ Content, frontmatter: { defaultValue, title, type } }) => (
+			({
+				Content,
+				frontmatter: { defaultValue, title, type, deprecated, deprecatedText },
+			}) => (
 				<>
 					<h3 id={slugify(title)}>
 						{title}
@@ -82,15 +85,15 @@ const orderedOptionsMD = ORDER.map(
 							href={`#${slugify(title)}`}
 						>
 							<PhLinkThin
-								{
-								/* @ts-ignore */ }
 								style='color: var(--app-color-dark)'
 								width='1em'
 								height='1em'
 							/>
 						</a>
 					</h3>
 					<p>
+						{deprecated === true ? `⚠️ Deprecated: ${deprecatedText}` : ''}
+						<br />
 						Type:
 						<span class='code-like' style='font-family: var(--app-font-mono)'>
 							{type}

docs/src/data/sizes.json

@@ -1,22 +1,22 @@
 {
-  "react": {
-    "size": "2.20",
-    "version": "2.0.4"
-  },
   "svelte": {
     "size": "1.97",
-    "version": "2.0.6"
+    "version": "2.1.0"
   },
-  "solid": {
-    "size": "1.99",
-    "version": "2.0.4"
+  "react": {
+    "size": "2.21",
+    "version": "2.1.0"
+  },
+  "vanilla": {
+    "size": "2.00",
+    "version": "2.1.0"
   },
   "vue": {
-    "size": "1.99",
-    "version": "2.0.4"
+    "size": "2.00",
+    "version": "2.1.0"
   },
-  "vanilla": {
-    "size": "2.01",
-    "version": "2.0.5"
+  "solid": {
+    "size": "2.00",
+    "version": "2.1.0"
   }
 }

docs/src/documentation/options/gpuAcceleration/+option.mdx

@@ -2,6 +2,8 @@
 title: 'gpuAcceleration'
 type: 'boolean'
 defaultValue: 'true'
+deprecated: true
+deprecatedText: 'Will be removed in v3'
 ---
 
 import Code from '$components/options/OptionsCode.astro';

docs/src/documentation/options/legacyTranslate/+option.mdx

@@ -2,6 +2,8 @@
 title: legacyTranslate
 type: 'boolean'
 defaultValue: 'true'
+deprecated: true
+deprecatedText: 'Will be removed in v3'
 ---
 
 import Code from '$components/options/OptionsCode.astro';

docs/src/layouts/DocsLayout.astro

@@ -21,13 +21,13 @@ const { title: frontmatterTitle } = frontmatter || {};
 
 <Layout title={title ?? frontmatterTitle}>
 	<ToC client:only />
-	<div class="mobile-nav">
-		<MobileNav client:media="(max-width: 968px)" />
+	<div class='mobile-nav'>
+		<MobileNav client:media='(max-width: 968px)' />
 	</div>
 
-	<section class="docs-container" id="docs-container">
+	<section class='docs-container' id='docs-container'>
 		<aside>
-			<Nav client:media="(min-width: 969px)" client:load />
+			<Nav client:media='(min-width: 969px)' client:load />
 		</aside>
 
 		<main>
@@ -38,7 +38,7 @@ const { title: frontmatterTitle } = frontmatter || {};
 	</section>
 </Layout>
 
-<style lang="scss">
+<style lang='scss'>
 	@import '../css/breakpoints';
 
 	.mobile-nav {
@@ -146,7 +146,7 @@ const { title: frontmatterTitle } = frontmatter || {};
 	}
 </style>
 
-<style lang="scss" is:global>
+<style lang='scss' is:global>
 	@import '../css/breakpoints';
 
 	:root {

docs/src/layouts/MainDocsLayout.astro

@@ -25,12 +25,12 @@ const { size, version } = SIZES[framework];
 		>
 	</h1>
 
-	<div class="tags">
-		<span class="tag">
+	<div class='tags'>
+		<span class='tag'>
 			{version}
 		</span>
 
-		<span class="tag">
+		<span class='tag'>
 			{size}KB
 		</span>
 	</div>
@@ -42,14 +42,14 @@ const { size, version } = SIZES[framework];
 	<h2>Credits</h2>
 	<p>
 		Inspired from the amazing
-		<a href="https://github.com/react-grid-layout/react-draggable">
+		<a href='https://github.com/react-grid-layout/react-draggable'>
 			react-draggable
 		</a>
-		 library, and implements the same API.
+		library, and implements the same API.
 	</p>
 </DocsLayout>
 
-<style lang="scss">
+<style lang='scss'>
 	.tags {
 		display: flex;
 		flex-wrap: wrap;

packages/core/src/index.ts

@@ -82,7 +82,8 @@ export type DragOptions = {
 	 *
 	 * At present this is true by default, but will be changed to false in a future major version.
 	 *
-	 * @default true
+	 * @default false
+	 * @deprecated Use `transform` option instead for transform: translate() or any other custom transform. Will be removed in v3.
 	 */
 	legacyTranslate?: boolean;
 
@@ -92,6 +93,7 @@ export type DragOptions = {
 	 * `true` by default, but can be set to `false` if [blurry text issue](https://developpaper.com/question/why-does-the-use-of-css3-translate3d-result-in-blurred-display/) occur
 	 *
 	 * @default true
+	 * @deprecated Use `transform` option instead with translate(x, y, 1px). 1px forces some browsers to use GPU acceleration. Will be removed in v3
 	 */
 	gpuAcceleration?: boolean;
 
@@ -272,7 +274,7 @@ export function draggable(node: HTMLElement, options: DragOptions = {}) {
 		bounds,
 		axis = 'both',
 		gpuAcceleration = true,
-		legacyTranslate = true,
+		legacyTranslate = false,
 		transform,
 		applyUserSelectHack = true,
 		disabled = false,
@@ -335,7 +337,6 @@ export function draggable(node: HTMLElement, options: DragOptions = {}) {
 	// Set proper defaults for recomputeBounds
 	recomputeBounds = { ...DEFAULT_RECOMPUTE_BOUNDS, ...recomputeBounds };
 
-	console.log(threshold);
 	// Proper defaults for threshold
 	threshold = { ...DEFAULT_DRAG_THRESHOLD, ...(threshold ?? {}) };
 
@@ -382,11 +383,7 @@ export function draggable(node: HTMLElement, options: DragOptions = {}) {
 				);
 			}
 
-			return set_style(
-				node,
-				'translate',
-				`${+x_pos}px ${+y_pos}px ${gpuAcceleration ? '1px' : ''}`,
-			);
+			return set_style(node, 'translate', `${+x_pos}px ${+y_pos}px`);
 		}
 
 		// Call transform function if provided