Add SSR support (#294)

- Add support to server-side render without causing errors (Using nextjs)
- Use `translate3d` instead of `translate`
- Add auto cleanup function to remove listeners
- Fix binding reference
- Add a different kind of initializing in the registry (need a special key)
- Add scroll values to elements offset

.gitignore

@@ -5,14 +5,12 @@ node_modules
 .changelog
 .docusaurus
 .DS_Store
-build
 dist
-lib
-draft
-samples
 tsconfig.tsbuildinfo
 tsconfig.build.tsbuildinfo
 cypress/screenshots
 cypress/videos
 
-packages/draggable/playgrounds/dflex-vue-draggable/node_modules
+# next.js
+.next/
+out/

package.json

@@ -23,7 +23,6 @@
     "babel-jest": "^27.0.5",
     "jest": "^27.0.5",
     "lerna": "^4.0.0",
-    "lerna-changelog": "^1.0.1",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
     "typescript": "^4.1.3"

packages/core-instance/src/CoreInstance.ts

@@ -37,7 +37,10 @@ class CoreInstance
 
   isVisible: boolean;
 
-  constructor(elementWithPointer: ElmWIthPointer, isPause = false) {
+  constructor(
+    elementWithPointer: ElmWIthPointer,
+    { isPause = false, scrollX = 0, scrollY = 0 } = {}
+  ) {
     const { order, keys, ...element } = elementWithPointer;
 
     super(element);
@@ -58,7 +61,7 @@ class CoreInstance
     this.isVisible = !isPause;
 
     if (this.ref && this.isVisible) {
-      this.initIndicators();
+      this.initIndicators(scrollX, scrollY);
       this.ref.dataset.index = `${this.order.self}`;
     }
   }
@@ -70,7 +73,7 @@ class CoreInstance
    *
    * So, basically any working element in DnD should be initiated first.
    */
-  initIndicators() {
+  initIndicators(scrollX: number, scrollY: number) {
     const { height, width, left, top } = this.ref.getBoundingClientRect();
 
     /**
@@ -82,8 +85,8 @@ class CoreInstance
       height,
       width,
 
-      left: Math.abs(left),
-      top: Math.abs(top),
+      left: left + scrollX,
+      top: top + scrollY,
     };
 
     this.currentTop = this.offset.top;
@@ -115,7 +118,7 @@ class CoreInstance
   }
 
   transformElm() {
-    this.ref.style.transform = `translate(${this.translateX}px,${this.translateY}px)`;
+    this.ref.style.transform = `translate3d(${this.translateX}px,${this.translateY}px, 0)`;
   }
 
   /**

packages/core-instance/src/types.ts

@@ -88,6 +88,6 @@ export interface CoreInstanceInterface extends AbstractCoreInterface {
     oldIndex?: number,
     siblingsHasEmptyElm?: number
   ): number;
-  initIndicators(): void;
+  initIndicators(scrollX: number, scrollY: number): void;
   visibilityHasChanged(isVisible: boolean): void;
 }

packages/dnd/playgrounds/dflex-react-dnd/next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

packages/dnd/playgrounds/dflex-react-dnd/next.config.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Jalal Maskoun.
+ *
+ * This source code is licensed under the AGPL3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+module.exports = {
+  reactStrictMode: true,
+};

packages/dnd/playgrounds/dflex-react-dnd/package.json

@@ -8,12 +8,16 @@
     "@types/react": "^17.0.13",
     "@types/react-dom": "^17.0.8",
     "@types/react-router-dom": "^5.1.7",
+    "next": "11.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
+    "dev:next": "next dev",
+    "build:next": "next build",
+    "start:next": "next start",
     "start": "cross-env PORT=3001 react-scripts start",
     "start:instrument": "react-scripts -r @cypress/instrument-cra start",
     "build": "react-scripts build",
@@ -34,6 +38,7 @@
   },
   "devDependencies": {
     "@cypress/instrument-cra": "^1.3.1",
-    "cross-env": "^7.0.3"
+    "cross-env": "^7.0.3",
+    "eslint-config-next": "^11.0.1"
   }
 }

packages/dnd/playgrounds/dflex-react-dnd/pages/_app.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Jalal Maskoun.
+ *
+ * This source code is licensed under the AGPL3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import "../styles/globals.css";
+import React from "react";
+
+import type { AppProps } from "next/app";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

packages/dnd/playgrounds/dflex-react-dnd/pages/extended.tsx

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Jalal Maskoun.
+ *
+ * This source code is licensed under the AGPL3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+import ExtendedList from "../src/components/extended";
+
+export default ExtendedList;

packages/dnd/playgrounds/dflex-react-dnd/pages/index.tsx

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Jalal Maskoun.
+ *
+ * This source code is licensed under the AGPL3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* eslint-disable import/no-extraneous-dependencies */
+import React from "react";
+
+import Head from "next/head";
+
+import Image from "next/image";
+
+import styles from "../styles/Home.module.css";
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+
+        <meta name="description" content="Generated by create next app" />
+
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by editing{" "}
+          <code className={styles.code}>pages/index.js</code>
+        </p>
+
+        <div className={styles.grid}>
+          <a href="https://nextjs.org/docs" className={styles.card}>
+            <h2>Documentation &rarr;</h2>
+
+            <p>Find in-depth information about Next.js features and API.</p>
+          </a>
+
+          <a href="https://nextjs.org/learn" className={styles.card}>
+            <h2>Learn &rarr;</h2>
+
+            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          </a>
+
+          <a
+            href="https://github.com/vercel/next.js/tree/master/examples"
+            className={styles.card}
+          >
+            <h2>Examples &rarr;</h2>
+
+            <p>Discover and deploy boilerplate example Next.js projects.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+          >
+            <h2>Deploy &rarr;</h2>
+
+            <p>
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{" "}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  );
+}

packages/dnd/playgrounds/dflex-react-dnd/src/App.tsx

@@ -5,14 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable import/no-extraneous-dependencies */
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
-import { ComponentBasedEvent, ContainerBasedEvent } from "./lists";
-import Restricted from "./restrictions";
-import TodoList from "./todo";
-import ExtendedList from "./extended";
-import Depth1 from "./depth-1";
+import {
+  Restricted,
+  TodoList,
+  ExtendedList,
+  Depth1,
+  ComponentBasedEvent,
+  ContainerBasedEvent,
+} from "./components";
 
 function App() {
   return (

packages/dnd/playgrounds/dflex-react-dnd/src/components/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Jalal Maskoun.
+ *
+ * This source code is licensed under the AGPL3.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as Depth1 } from "./depth-1";
+export { default as ExtendedList } from "./extended";
+export { default as Restricted } from "./restrictions";
+export { default as TodoList } from "./todo";
+export { ComponentBasedEvent, ContainerBasedEvent } from "./lists";