feat: simplify

.github/dependabot.yml

@@ -4,22 +4,6 @@ updates:
     directory: /
     schedule:
       interval: monthly
-    groups:
-      react:
-        patterns:
-          - "react"
-          - "react-dom"
-      parcel:
-        patterns:
-          - "parcel"
-          - "@parcel/*"
-      typescript-eslint:
-        patterns:
-          - "@typescript-eslint/*"
-    ignore:
-      - dependency-name: eslint
-        update-types:
-          - version-update:semver-major
   - package-ecosystem: github-actions
     directory: /
     schedule:

.gitignore

@@ -1,4 +1,3 @@
-.parcel-cache/
 node_modules/
-dist/
-docs/
+*.d.ts
+*.js

README.md

@@ -24,6 +24,7 @@ If you don't need to control the current page from JavaScript, you can use a sim
 }
 
 .ScrollSnapper > * {
+  box-sizing: border-box; /* if not set globally */
   width: 100%;
   flex-shrink: 0;
   scroll-snap-align: center;
@@ -125,19 +126,19 @@ You can import only the styles from this library and use them with the snippets
 Import the styles in your HTML:
 
 ```html
-<link rel="stylesheet" href="react-scroll-snapper/dist/index.css" />
+<link rel="stylesheet" href="react-scroll-snapper/index.css" />
 ```
 
 or in your CSS:
 
 ```css
-@import "react-scroll-snapper/dist/index.css";
+@import "react-scroll-snapper/index.css";
 ```
 
 or in your JavaScript if your bundler supports it:
 
 ```js
-import "react-scroll-snapper/dist/index.css"
+import "react-scroll-snapper/index.css"
 ```
 
 > [!TIP]
@@ -147,15 +148,15 @@ import "react-scroll-snapper/dist/index.css"
 > That way you don't need to install this library in your node_modules and you can use the styles without any build tools.
 >
 > ```html
-> <link rel="stylesheet" href="https://esm.sh/react-scroll-snapper/dist/index.css" />
+> <link rel="stylesheet" href="https://esm.sh/react-scroll-snapper/index.css" />
 > ```
 
 ## Using the React component
 
 You can use the `ScrollSnapper` component to easily bind the current page index to your React state:
 
 ```jsx
-import "react-scroll-snapper/dist/index.css"
+import "react-scroll-snapper/index.css"
 import { ScrollSnapper } from "react-scroll-snapper"
 import { useState } from "react"
 
@@ -227,31 +228,12 @@ You can set `max-height` on the container and add `overflow-y: scroll` to the pa
 
 ## Developing
 
-- `npm start`: Start the example app from `example/` using Parcel.
-- `npm run doc`: Emit documentation into `README.md` using TypeDoc.
-- `npm run format`: Format all code using ESLint and Prettier.
-- `npm run prepare`: Build the code from `src/` to `dist/` using Parcel.
-- `npm test`: Check all code using TypeScript, ESLint and Prettier.
+- `npm start`: Start the example app using vite.
+- `npm run prepare`: Build the library using tsc.
+- `npm test`: Check code using tsc.
 
 # API
 
-**react-scroll-snapper** • **Docs**
-
----
-
-## ScrollSnapperProps
-
-Props for the [ScrollSnapper](README.md#scrollsnapper) component.
-
-### Properties
-
-| Property        | Type                                                      | Description                                                                                                                                                                                                                                               |
-| --------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `index`         | `number`                                                  | The current page index. Can be changed to programmatically scroll to a different page.                                                                                                                                                                    |
-| `onIndexChange` | (`index`: `number`, `target`: `HTMLDivElement`) => `void` | A callback which runs after the container is scrolled to a page. This will run even if the user scrolled but ended up on the same page. Scrolling triggered by changing the `index` prop will also trigger this callback after the animation is finished. |
-
----
-
 ## ScrollSnapper()
 
 > **ScrollSnapper**(`props`): `Element`
@@ -267,3 +249,16 @@ Scroll Snapper React component.
 ### Returns
 
 `Element`
+
+---
+
+## ScrollSnapperProps
+
+Props for the [ScrollSnapper](README.md#scrollsnapper) component.
+
+### Properties
+
+| Property        | Type                                                      | Description                                                                                                                                                                                                                                               |
+| --------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `index`         | `number`                                                  | The current page index. Can be changed to programmatically scroll to a different page.                                                                                                                                                                    |
+| `onIndexChange` | (`index`: `number`, `target`: `HTMLDivElement`) => `void` | A callback which runs after the container is scrolled to a page. This will run even if the user scrolled but ended up on the same page. Scrolling triggered by changing the `index` prop will also trigger this callback after the animation is finished. |

example/index.tsx → example.tsx

@@ -1,14 +1,16 @@
+/// <reference types="vite/client" />
 import { StrictMode, useState } from "react"
 import { createRoot } from "react-dom/client"
-import { ScrollSnapper } from "../src"
+import "./index.css"
+import { ScrollSnapper } from "./index.js"
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
 )
 
-export function App() {
+function App(): JSX.Element {
   const [page, setPage] = useState(1)
   const [containerStyle, setContainerStyle] = useState<React.CSSProperties>({})
   const [childStyle, setChildStyle] = useState<React.CSSProperties>({})
@@ -58,7 +60,14 @@ export function App() {
             auctor nisl.
           </p>
         </div>
-        <div id="page1" style={{ margin: "32px", backgroundColor: "lightblue", ...childStyle }}>
+        <div
+          id="page1"
+          style={{
+            margin: "32px",
+            backgroundColor: "lightblue",
+            ...childStyle,
+          }}
+        >
           <h2>Page 1</h2>
           <p>
             Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
@@ -76,7 +85,11 @@ export function App() {
         </div>
         <div
           id="page2"
-          style={{ border: "4px solid green", backgroundColor: "lightgreen", ...childStyle }}
+          style={{
+            border: "4px solid green",
+            backgroundColor: "lightgreen",
+            ...childStyle,
+          }}
         >
           <h2>Page 2</h2>
           <p>

src/ScrollSnapper.css → index.css

@@ -6,6 +6,7 @@
 }
 
 .ScrollSnapper > * {
+  box-sizing: border-box;
   width: 100%;
   flex-shrink: 0;
   scroll-snap-align: center;

example/index.html → index.html

@@ -5,8 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Scroll Snapper Example</title>
-    <script type="module" src="./index.tsx"></script>
-    <link rel="stylesheet" href="./index.css" />
+    <script type="module" src="./example.tsx"></script>
   </head>
   <body>
     <div id="root"></div>

src/ScrollSnapper.tsx → index.tsx

@@ -23,7 +23,9 @@ export interface ScrollSnapperProps {
 /**
  * Scroll Snapper React component.
  */
-export function ScrollSnapper(props: ScrollSnapperProps & React.HTMLProps<HTMLDivElement>) {
+export function ScrollSnapper(
+  props: ScrollSnapperProps & React.HTMLProps<HTMLDivElement>,
+): JSX.Element {
   const { className = "", index, onIndexChange, onScroll, ...rootProps } = props
 
   const containerRef = useRef<HTMLDivElement>(null)