chore: rewrite with TypeScript, remove babel

.eslintrc

@@ -4,7 +4,9 @@
     "prettier",
     "plugin:prettier/recommended"
   ],
+  "parser": "@typescript-eslint/parser",
   "plugins": [
+    "@typescript-eslint",
     "prettier"
   ],
   "env": {
@@ -15,8 +17,14 @@
     "prettier/prettier": ["error"],
     "semi": ["error", "never"],
     "no-plusplus": "off",
+    "no-unused-vars": "off",
+    "no-restricted-syntax": "off",
     "import/no-unresolved": "off",
+    "import/extensions": "off",
+    "import/prefer-default-export": "off",
+    "react/jsx-props-no-spreading": "off",
     "react/jsx-filename-extension": "off",
-    "react/forbid-prop-types": "off"
+    "react/forbid-prop-types": "off",
+    "jsx-a11y/control-has-associated-label": "off"
   }
 }

.lintstagedrc

@@ -1,3 +1,3 @@
 {
-  "*.js": ["prettier --write", "eslint --fix", "git add"]
+  "*.{ts,tsx}": ["prettier --write", "eslint --fix", "git add"]
 }

package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-photoswipe-gallery",
   "version": "0.0.5",
-  "description": "WIP PhotoSwipe wrapper for React",
+  "description": "PhotoSwipe wrapper for React",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*"
   ],
@@ -14,27 +15,29 @@
   "repository": "https://github.com/irudoy/react-photoswipe-gallery.git",
   "license": "MIT",
   "scripts": {
-    "start": "rimraf dist && babel -s -w -d dist src",
-    "prepublish": "rimraf dist && babel -s -d dist src",
+    "build": "rimraf dist && tsc --project tsconfig.json",
+    "start": "yarn build --watch",
+    "prepublish": "yarn build",
     "lint": "eslint",
     "prettify": "prettier"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.3",
-    "@babel/core": "^7.4.3",
-    "@babel/preset-env": "^7.4.3",
-    "@babel/preset-react": "^7.0.0",
-    "eslint": "5.3.0",
-    "eslint-config-airbnb": "17.1.0",
-    "eslint-config-prettier": "^4.1.0",
+    "@types/photoswipe": "^4.1.0",
+    "@types/react": "^16.9.34",
+    "@typescript-eslint/eslint-plugin": "^2.29.0",
+    "@typescript-eslint/parser": "^2.29.0",
+    "eslint": "6.8.0",
+    "eslint-config-airbnb": "18.1.0",
+    "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.11.0",
-    "husky": "^1.3.1",
-    "lint-staged": "^8.1.5",
-    "prettier": "^1.17.0",
-    "rimraf": "^2.6.3"
+    "husky": "^4.2.5",
+    "lint-staged": "^10.1.6",
+    "prettier": "^2.0.4",
+    "rimraf": "^3.0.2",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "photoswipe": ">= 4.1.0",
@@ -44,7 +47,7 @@
   "author": "Ivan Rudoy <[email protected]>",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "yarn build && lint-staged"
     }
   }
 }

src/context.ts

@@ -0,0 +1,8 @@
+import React from 'react'
+import { InternalAPI } from './types'
+
+export const Context = React.createContext<InternalAPI>({
+  remove: () => {},
+  update: () => {},
+  handleClick: () => {},
+})

src/gallery.tsx

@@ -0,0 +1,92 @@
+import PhotoSwipe from 'photoswipe'
+import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
+import React, { useRef, useCallback, FC } from 'react'
+import PropTypes, { InferProps } from 'prop-types'
+import { getElBounds } from './helpers'
+import { Context } from './context'
+import { ItemRef, InternalItem } from './types'
+
+const propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+  layout: PropTypes.any.isRequired,
+  ui: PropTypes.any,
+  options: PropTypes.object,
+}
+
+interface PhotoSwipeItem extends PhotoSwipe.Item {
+  thumbEl?: HTMLImageElement
+}
+
+export type GalleryProps = InferProps<typeof propTypes>
+
+export const Gallery: FC<GalleryProps> = ({
+  children,
+  layout: Layout,
+  ui,
+  options,
+}) => {
+  const tplRef = useRef<HTMLElement>()
+  const items = useRef(new Map<ItemRef, InternalItem>())
+
+  const handleClick = useCallback((ref: ItemRef) => {
+    const normalized: PhotoSwipeItem[] = []
+    let index = 0
+    let i = 0
+    for (const [
+      r,
+      { thumbRef, width, height, title, full, thumb },
+    ] of items.current) {
+      if (r === ref) {
+        index = i
+      }
+      normalized.push({
+        ...(title ? { title } : {}),
+        w: Number(width),
+        h: Number(height),
+        src: full,
+        msrc: thumb || undefined,
+        thumbEl: thumbRef.current || undefined,
+      })
+      i++
+    }
+    if (tplRef.current) {
+      new PhotoSwipe(tplRef.current, ui, normalized, {
+        ...(options || {}),
+        index,
+        getThumbBoundsFn: (thumbIndex) => {
+          const thumb = normalized[thumbIndex].thumbEl
+          if (thumb) {
+            return getElBounds(thumb)
+          }
+          return { x: 0, y: 0, w: 0 }
+        },
+      }).init()
+    }
+  }, [])
+
+  const remove = useCallback((ref) => {
+    items.current.delete(ref)
+  }, [])
+
+  const update = useCallback((ref, data) => {
+    items.current.set(ref, data)
+  }, [])
+
+  return (
+    <Context.Provider value={{ remove, update, handleClick }}>
+      {children}
+      <Layout ref={tplRef} />
+      {/* TODO: shared layout */}
+    </Context.Provider>
+  )
+}
+
+Gallery.propTypes = propTypes
+
+Gallery.defaultProps = {
+  ui: PhotoswipeUIDefault,
+  options: null,
+}

src/helpers.ts

@@ -0,0 +1,10 @@
+export const getElBounds = (el: HTMLImageElement) => {
+  const pageXScroll = window.pageXOffset || document.documentElement.scrollLeft
+  const pageYScroll = window.pageYOffset || document.documentElement.scrollTop
+  const rect = el.getBoundingClientRect()
+  return {
+    x: rect.left + pageXScroll,
+    y: rect.top + pageYScroll,
+    w: rect.width,
+  }
+}