Update with router (#57)

* Update images urls

* Update with router

* Add newline

* export types

* Test token swap

.browserslistrc

@@ -0,0 +1,7 @@
+# Browsers we support
+Chrome >= 84
+Firefox >= 90
+Edge >= 84
+Safari >= 15
+iOS >= 15
+opera >= 70

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.github/FUNDING.yml

@@ -1,2 +1 @@
 github: tannerlinsley
-custom: https://youtube.com/tannerlinsley

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,27 +1,21 @@
 name: '🐛 Bug report'
-description: Report a reproducible bug or regression
+description: Create a report to help us improve
 body:
   - type: markdown
     attributes:
       value: |
         Thank you for reporting an issue :pray:.
 
-        This issue tracker is for reporting reproducible bugs or regression's found in [tanstack-ranger](https://github.com/tanstack/ranger)
-        If you have a question about how to achieve or implement something and are struggling, please post a question
-        inside of tanstack-ranger's [Discussions tab](https://github.com/tanstack/ranger/discussions) instead of filing an issue.
+        This issue tracker is for reporting bugs found in `react-ranger` (https://github.com/tanstack/ranger).
+        If you have a question about how to achieve something and are struggling, please post a question
+        inside of `react-ranger` Discussions tab: https://github.com/tanstack/ranger/discussions
 
         Before submitting a new bug/issue, please check the links below to see if there is a solution or question posted there already:
-        - tanstack-ranger's [Discussions tab](https://github.com/tanstack/ranger/discussions)
-        - tanstack-ranger's [Open Issues](https://github.com/tanstack/ranger/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
-        - tanstack-ranger's [Closed Issues](https://github.com/tanstack/ranger/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed)
+         - `react-ranger` Issues tab: https://github.com/tanstack/ranger/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
+         - `react-ranger` closed issues tab: https://github.com/tanstack/ranger/issues?q=is%3Aissue+sort%3Aupdated-desc+is%3Aclosed
+         - `react-ranger` Discussions tab: https://github.com/tanstack/ranger/discussions
 
         The more information you fill in, the better the community can help you.
-
-        > ⚠️⚠️⚠️ TanStack Ranger v3 is on the horizon with beta builds and v2 is entering
-        > an LTS phase and will only be receiving patch-level fixes. If you are experiencing
-        > issues in v2 that require minor/feature or major/breaking changes, your issue will
-        > be redirected to v8 or possibly even closed if the issue has already been fixed in v3.
-
   - type: textarea
     id: description
     attributes:
@@ -32,28 +26,27 @@ body:
   - type: input
     id: link
     attributes:
-      label: Your minimal, reproducible example
+      label: Your Example Website or App
       description: |
-        Please add a link to a minimal reproduction.
+        Which website or app were you using when the bug happened?
         Note:
-          - Your bug may get fixed much faster if we can run your code and it doesn't have dependencies other than React.
-          - To create a shareable code example for web, you can use CodeSandbox (https://codesandbox.io/s/new) or Stackblitz (https://stackblitz.com/).
-          - Please make sure the example is complete and runnable without prior dependencies and free of unnecessary abstractions
-          - Feel free to fork any of the official CodeSandbox examples to reproduce your issue: https://github.com/tanstack/ranger/tree/main/examples/
-          - For React Native, you can use: https://snack.expo.dev/
-          - For TypeScript related issues only, a TypeScript Playground link might be sufficient: https://www.typescriptlang.org/play
-          - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
-      placeholder: |
-        e.g. Code Sandbox, Stackblitz, Expo Snack or TypeScript playground
+        - Please provide a link via our pre-configured [Stackblitz project](https://stackblitz.com/github/tanstack/ranger/tree/beta/examples/react/quickstart?file=src%2Fmain.tsx) or a link to a repo that can reproduce the issue.
+        - Your bug will may get fixed much faster if we can run your code and it doesn't have dependencies other than the `react-ranger` npm package / dependency.
+        - To create a shareable code example you can use Stackblitz. Please no localhost URLs.
+        - Please read these tips for providing a minimal example: https://stackoverflow.com/help/mcve.
+      placeholder: reproduction URL
     validations:
       required: true
   - type: textarea
     id: steps
     attributes:
-      label: Steps to reproduce
+      label: Steps to Reproduce the Bug or Issue
       description: Describe the steps we have to take to reproduce the behavior.
       placeholder: |
-        1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
     validations:
       required: true
   - type: textarea
@@ -62,20 +55,9 @@ body:
       label: Expected behavior
       description: Provide a clear and concise description of what you expected to happen.
       placeholder: |
-        As a user, I expected **_ behavior but i am seeing _**
+        As a user, I expected ___ behavior but i am seeing ___
     validations:
       required: true
-  - type: dropdown
-    attributes:
-      options:
-        - Every time
-        - Often
-        - Sometimes
-        - Only once
-      label: How often does this bug happen?
-      description: |
-        Following the repro steps above, how easily are you able to reproduce this bug?
-        options: - Every time - Often - Sometimes - Only once
   - type: textarea
     id: screenshots_or_videos
     attributes:
@@ -90,42 +72,14 @@ body:
     id: platform
     attributes:
       label: Platform
-      description: |
-        Please let us know which Operting System, Browser and Browser version you were using when the issue occurred.
-      placeholder: |
-        - OS: [e.g. macOS, Windows, Linux, iOS, Android] - Browser: [e.g. Chrome, Safari, Firefox, React Native] - Version: [e.g. 91.1]
-    validations:
-      required: true
-  - type: input
-    id: library-version
-    attributes:
-      label: tanstack-ranger version
-      description: |
-        Please let us know the exact version of tanstack-ranger you were using when the issue occurred. Please don't just put in "latest", as this is subject to change.
-      placeholder: |
-        e.g. v3.30.1
+      value: |
+        - OS: [e.g. macOS, Windows, Linux]
+        - Browser: [e.g. Chrome, Safari, Firefox]
+        - Version: [e.g. 91.1]
     validations:
       required: true
-  - type: input
-    id: ts-version
-    attributes:
-      label: TypeScript version
-      description: |
-        If you are using TypeScript, please let us know the exact version of TypeScript you were using when the issue occurred.
-      placeholder: |
-        e.g. v4.5.4
   - type: textarea
     id: additional
     attributes:
       label: Additional context
       description: Add any other context about the problem here.
-  - type: checkboxes
-    id: agrees-to-terms
-    attributes:
-      label: Terms & Code of Conduct
-      description: By submitting this issue, you agree to follow our Code of Conduct and can verify that you have followed the requirements outlined above to the best of your ability.
-      options:
-        - label: I agree to follow this project's Code of Conduct
-          required: true
-        - label: I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
-          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,11 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Feature Requests & Questions
-    url: https://github.com/tanstack/ranger/discussions
+  - name: 🤔 Feature Requests & Questions
+    url: https://github.com/tanstack/router/discussions
     about: Please ask and answer questions here.
-  - name: Community Chat
+  - name: 💬 Community Chat
     url: https://discord.gg/mQd7egN
-    about: A dedicated discord server hosted by TanStack
+    about: A dedicated discord server hosted by Tanner Linsley
+  - name: 💬 Tanstack Twitter
+    url: https://twitter.com/tan_stack
+    about: Stay up to date with new releases of our libraries

.npmrc

@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=$NPM_TOKEN

.nvmrc

@@ -1 +1 @@
-v12.13.1
+v14.17.6

CONTRIBUTING.md

@@ -0,0 +1,22 @@
+# Contributing
+
+- Clone the repo
+  - `gh repo clone TanStack/ranger`
+- Ensure `node` is installed
+  - https://nodejs.org/en/
+- Ensure `pnpm` is installed
+  - https://pnpm.io/installation
+  - Why? We use `pnpm` to manage workspace dependencies. It's easily the best monorepo/workspace experience available as of when this was written.
+- Install dependencies
+  - `pnpm install`
+  - This installs dependencies for all of the packages in the monorepo, even examples!
+  - Dependencies inside of the packages and examples are automatically linked together as local/dynamic dependencies.
+- Run the build or dev watcher
+  - `pnpm build` or
+  - `pnpm dev`
+- Navigate to an example
+  - `cd examples/react/basic`
+- Run the example
+  - `pnpm dev`
+- Make changes to the code
+  - If you ran `pnpm dev` the dev watcher will automatically rebuild the code that has changed

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-present Tanner Linsley
+Copyright (c) 2021 Tanner Linsley
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

babel.config.js

@@ -3,24 +3,31 @@ const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
 const loose = true
 
 module.exports = {
-  targets: 'defaults, not ie 11, not ie_mob 11',
   presets: [
     [
-      '@babel/preset-env',
+      '@babel/env',
       {
         loose,
         modules: false,
+        bugfixes: true,
+        // useBuiltIns: false,
+        // exclude: ['@babel/plugin-transform-regenerator'],
       },
     ],
+    '@babel/react',
     '@babel/preset-typescript',
   ],
-  plugins: [cjs && ['@babel/transform-modules-commonjs', { loose }]].filter(
-    Boolean,
-  ),
-  overrides: [
-    {
-      include: ['./packages/react-ranger/**'],
-      presets: ['@babel/preset-react'],
-    },
-  ],
+  plugins: [
+    // 'babel-plugin-transform-async-to-promises',
+    cjs && ['@babel/transform-modules-commonjs', { loose }],
+    // [
+    //   '@babel/transform-runtime',
+    //   {
+    //     useESModules: !cjs,
+    //     version: require('./package.json').devDependencies[
+    //       '@babel/runtime'
+    //     ].replace(/^[^0-9]*/, ''),
+    //   },
+    // ],
+  ].filter(Boolean),
 }

lerna.json

@@ -0,0 +1,6 @@
+{
+  "packages": ["packages/*"],
+  "version": "0.0.0",
+  "npmClient": "yarn",
+  "useWorkspaces": true
+}

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "repository": "https://github.com/TanStack/ranger.git",
+  "repository": "https://github.com/tanstack/ranger.git",
   "scripts": {
     "clean-dist": "pnpm -rc --parallel exec 'rm -rf build dist'",
     "clean-all": "pnpm -rc --parallel exec 'rm -rf build dist node_modules'",

packages/ranger/src/index.ts

@@ -1,10 +1,10 @@
 import { linearInterpolator, getBoundingClientRect, sortNumList } from './utils'
 
-type RangerChangeEvent<TTrackElement> = (
+export type RangerChangeEvent<TTrackElement> = (
   instance: Ranger<TTrackElement>,
 ) => void
 
-type RangerInterpolator = {
+export type RangerInterpolator = {
   getPercentageForValue: (val: number, min: number, max: number) => number
   getValueForClientX: (
     clientX: number,
@@ -14,7 +14,7 @@ type RangerInterpolator = {
   ) => number
 }
 
-type RangerClassConfig<TTrackElement = unknown> = {
+export type RangerClassConfig<TTrackElement = unknown> = {
   getRangerElement: () => TTrackElement | null
   values: ReadonlyArray<number>
 

packages/react-ranger/src/index.tsx

@@ -31,5 +31,3 @@ export function useRanger<TTrackElement>(
 
   return instance
 }
-
-export type { Ranger }

rollup.config.ts

@@ -1,6 +1,7 @@
 import { RollupOptions } from 'rollup'
 import babel from '@rollup/plugin-babel'
 import { terser } from 'rollup-plugin-terser'
+// @ts-ignore
 import size from 'rollup-plugin-size'
 import visualizer from 'rollup-plugin-visualizer'
 import replace from '@rollup/plugin-replace'
@@ -186,7 +187,7 @@ function umdProd({
       sourcemap: true,
       file: `${packageDir}/build/umd/index.production.js`,
       name: jsName,
-      // globals,
+      globals,
       banner,
     },
     plugins: [

scripts/config.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import { BranchConfig, Package } from './types'
 
-// TODO: List your npm packages here. The first package will be used as the versioner.
+// TODO: List your npm packages here.
 export const packages: Package[] = [
   {
     name: '@tanstack/ranger',

scripts/tsconfig.json

@@ -7,8 +7,7 @@
     "strict": true,
     "noImplicitAny": true,
     "skipLibCheck": true,
-    "checkJs": true,
-    "strictNullChecks": true
+    "checkJs": true
   },
   "ts-node": {
     "transpileOnly": true,

tsconfig.base.json

@@ -1,4 +1,3 @@
-
 {
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2020"],
@@ -7,22 +6,20 @@
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": false,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
     "noUncheckedIndexedAccess": true,
     "strictNullChecks": true,
     "jsx": "react",
     "declaration": true,
     "emitDeclarationOnly": true,
+    "noImplicitReturns": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@tanstack/react-ranger": ["packages/react-ranger/src"],
-      "@tanstack/ranger": ["packages/ranger/src"]
+      "@tanstack/router": ["packages/router"],
+      "@tanstack/react-router": ["packages/react-router"],
+      "@tanstack/react-router-devtools": ["packages/react-router-devtools"],
+      "@tanstack/router-cli": ["packages/router-cli"]
     }
   }
 }