TanStack · kadoshms · May 2, 2024 · May 3, 2024 · May 3, 2024 · May 3, 2024
diff --git a/.gitignore b/.gitignore
@@ -23,6 +23,7 @@ coverage
 .env.test.local
 .env.production.local
 .next
+.nx/cache
 
 npm-debug.log*
 yarn-debug.log*
@@ -33,6 +34,7 @@ stats-hydration.json
 stats-react.json
 stats.html
 .vscode/settings.json
+.idea
 
 *.log
 .DS_Store

diff --git a/babel.config.js b/babel.config.js
diff --git a/examples/lit/basic/.gitignore b/examples/lit/basic/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/basic/README.md b/examples/lit/basic/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/lit/basic/index.html b/examples/lit/basic/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <ranger-example></ranger-example>
+  </body>
+</html>
diff --git a/examples/lit/basic/package.json b/examples/lit/basic/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "basic-lit",
+  "private": true,
+  "scripts": {
+    "dev": "vite --port=3000",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@tanstack/ranger": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^2.2.0",
+    "lit": "^3.1.3",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/examples/lit/basic/src/main.ts b/examples/lit/basic/src/main.ts
@@ -0,0 +1,94 @@
+import {
+  html,
+  LitElement,
+} from 'lit'
+
+import { customElement, state } from 'lit/decorators.js'
+import { Ranger, RangerConfig, RangerOptions } from '@tanstack/ranger'
+import { createRef, ref } from 'lit/directives/ref.js'
+
+
+@customElement('ranger-example')
+class RangerExample extends LitElement {
+  private rangerRef = createRef<HTMLDivElement>()
+
+  @state()
+  private _values: number[] = [0, 15, 50]
+
+  private rangerController = new RangerController(this)
+
+  protected render() {
+    const rangerInstance = this.rangerController.getRanger({
+      getRangerElement: () => {
+        return this.rangerRef.value
+      },
+      values: this._values,
+      min: 0,
+      max: 100,
+      stepSize: 5,
+      onChange: (instance: Ranger) => {
+        this._values = [...instance.sortedValues]
+      },
+    })
+    return html`
+      <div class="App" style="padding: 10px">
+        <h1>Basic Range</h1>
+        <span>Active Index: ${rangerInstance.activeHandleIndex}</span>
+        <div ${ref(this.rangerRef)} class="ranger-element">
+          ${rangerInstance
+            .handles()
+            .map(
+              ({
+                value,
+                onTouchStart,
+                onMouseDownHandler,
+                onKeyDownHandler,
+                isActive,
+              }) => html` <button
+                @keydown="${onKeyDownHandler}"
+                @mousedown=${onMouseDownHandler}
+                @touchstart="${onTouchStart}"
+                role="slider"
+                class="ranger-button"
+                aria-valuemin="${rangerInstance.options.min}"
+                aria-valuemax="${rangerInstance.options.max}"
+                aria-valuenow="${value}"
+                style="left: ${rangerInstance.getPercentageForValue(
+                  value,
+                )}%;z-index: ${isActive ? '1' : '0'}"
+              ></button>`,
+            )}
+        </div>
+        <br />
+        <br />
+        <br />
+        <pre style="display: inline-block; text-align: left">
+        <code>
+          _values: ${JSON.stringify(this._values)}
+        </code>
+        </pre>
+      </div>
+      <style>
+        .ranger-element {
+          position: relative;
+          user-select: none;
+          height: 4px;
+          background: #ddd;
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
+        }
+
+        .ranger-button {
+          position: absolute;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 14px;
+          height: 14px;
+          outline: none;
+          border-radius: 100%;
+          background: linear-gradient(to bottom, #eee 45%, #ddd 55%);
+          border: solid 1px #888;
+        }
+      </style>
+    `
+  }
+}
diff --git a/examples/lit/basic/tsconfig.json b/examples/lit/basic/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false
+  }
+}
diff --git a/examples/lit/basic/vite.config.js b/examples/lit/basic/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: []
+})
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
@@ -8,7 +8,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-ranger": "0.0.4",
+    "@tanstack/react-ranger": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/react/custom-steps/package.json b/examples/react/custom-steps/package.json
@@ -8,7 +8,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-ranger": "0.0.4",
+    "@tanstack/react-ranger": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/react/custom-styles/package.json b/examples/react/custom-styles/package.json
@@ -8,7 +8,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-ranger": "0.0.4",
+    "@tanstack/react-ranger": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.6"

diff --git a/examples/react/logarithmic-interpolator/package.json b/examples/react/logarithmic-interpolator/package.json
@@ -8,7 +8,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-ranger": "0.0.4",
+    "@tanstack/react-ranger": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/react/update-on-drag/package.json b/examples/react/update-on-drag/package.json
@@ -8,7 +8,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@tanstack/react-ranger": "0.0.4",
+    "@tanstack/react-ranger": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/jest.config.ts b/jest.config.ts
diff --git a/lerna.json b/lerna.json
diff --git a/nx.json b/nx.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "affected": {
+    "defaultBase": "main"
+  },
+  "defaultBase": "main",
+  "parallel": 5,
+  "namedInputs": {
+    "sharedGlobals": [
+      "{workspaceRoot}/.nvmrc",
+      "{workspaceRoot}/package.json",
+      "{workspaceRoot}/tsconfig.json"
+    ],
+    "default": [
+      "sharedGlobals",
+      "{projectRoot}/**/*",
+      "!{projectRoot}/**/*.md"
+    ],
+    "public": [
+      "default",
+      "{projectRoot}/build",
+      "{projectRoot}/dist"
+    ]
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["default", "^public"],
+      "outputs": ["{projectRoot}/build", "{projectRoot}/dist"],
+      "cache": true
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -7,10 +7,8 @@
     "test": "(is-ci && pnpm test:ci) || pnpm test:dev",
     "test:ci": "vitest run",
     "test:dev": "vitest watch",
-    "build": "rollup --config rollup.config.js",
+    "build": "nx affected --target=build --exclude=examples/**",
     "watch": "concurrently --kill-others \"rollup --config rollup.config.js -w\" \"tsc -b --watch\"",
-    "linkAll": "lerna exec 'pnpm link' --parallel",
-    "unlinkAll": "lerna exec 'pnpm unlink' --parallel",
     "dev": "pnpm watch",
     "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json}\" --write",
     "visualize": "pnpm -rc --parallel exec open build/stats-html.html",
@@ -40,6 +38,7 @@
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-replace": "^4.0.0",
+    "@tanstack/config": "^0.7.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@tsconfig/svelte": "^3.0.0",
@@ -53,8 +52,8 @@
     "concurrently": "^7.1.0",
     "current-git-branch": "^1.1.0",
     "git-log-parser": "^1.2.0",
-    "lerna": "^4.0.0",
     "luxon": "^2.3.2",
+    "nx": "^18.3.4",
     "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -68,7 +67,9 @@
     "stream-to-array": "^2.3.0",
     "svelte": "^3.55.0",
     "ts-node": "^10.7.0",
-    "typescript": "^4.9.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.5.3",
     "vue": "^3.2.33"
   },
   "dependencies": {
@@ -77,7 +78,6 @@
     "@types/fs-extra": "^9.0.13",
     "fs-extra": "^10.1.0",
     "is-ci-cli": "^2.2.0",
-    "vitest": "^0.26.2",
     "zod": "^3.20.2"
   }
 }