chore: use parcel v2 for development and bundling

garthenweb · garthenweb · commit 2a6d6dd20b9f · 2021-10-23T15:25:18.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 node_modules/
 examples-dist/
 dist/
-.cache/
+.parcel-cache/
 .rpt2_cache/
 .vscode/
 coverage/
diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-replace", "..."]
+  }
+}
diff --git a/.travis.yml b/.travis.yml
@@ -6,5 +6,5 @@ matrix:
     - node_js: "10"
     - node_js: "8"
 
-script: "npm test -- --coverage"
+script: "yarn test -- --coverage"
 after_success: cat ./coverage/lcov.info | npx coveralls
diff --git a/bundler/parcel-transformer-replace/package.json b/bundler/parcel-transformer-replace/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "parcel-transformer-replace",
+  "version": "1.0.0",
+  "main": "./transformer.js",
+  "dependencies": {
+    "@parcel/plugin": "^2.0.0"
+  },
+  "engines": {
+    "parcel": "^2.0.0"
+  }
+}
diff --git a/bundler/parcel-transformer-replace/transformer.js b/bundler/parcel-transformer-replace/transformer.js
@@ -0,0 +1,13 @@
+const { Transformer } = require('@parcel/plugin');
+const pkg = require('../../package.json');
+
+module.exports.default = new Transformer({
+  async transform({ asset }) {
+    const code = await asset.getCode();
+    // TODO consider adding a source map. Currently, we put the variable length to the exact same size to not make the code jump, but this is a bit odd and error prone...
+    const result = code.replace(/_VERS_/gm, pkg.version);
+
+    asset.setCode(result);
+    return [asset];
+  },
+});
diff --git a/examples/index.html b/examples/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>
diff --git a/lib/ConnectViewport.tsx b/lib/ConnectViewport.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import { IScroll, IDimensions } from './index';
+import { Scroll, Dimensions } from './types';
 import ObserveViewport from './ObserveViewport';
 import { PriorityType } from './types';
 
 interface InjectedProps {
-  scroll?: IScroll | null;
-  dimensions?: IDimensions | null;
+  scroll?: Scroll | null;
+  dimensions?: Dimensions | null;
 }
 
 type OmitValues = 'scroll' | 'dimensions';
diff --git a/lib/ViewportProvider.tsx b/lib/ViewportProvider.tsx
@@ -54,7 +54,7 @@ export const ViewportContext = React.createContext({
   ) => {},
   getCurrentViewport: createFallbackViewportRequester(),
   hasRootProviderAsParent: false,
-  version: '__VERSION__',
+  version: '_VERS_',
 });
 
 const maxIterations = (priority: 'highest' | 'high' | 'normal' | 'low') => {
@@ -285,7 +285,7 @@ export default class ViewportProvider extends React.PureComponent<
       return this.getCurrentDefaultViewport();
     },
     hasRootProviderAsParent: true,
-    version: '__VERSION__',
+    version: '_VERS_',
   };
 
   renderChildren = (props: {
@@ -295,11 +295,11 @@ export default class ViewportProvider extends React.PureComponent<
     if (props.hasRootProviderAsParent) {
       if (
         process.env.NODE_ENV !== 'production' &&
-        props.version !== '__VERSION__'
+        props.version !== '_VERS_'
       ) {
         console.warn(
           `react-viewport-utils: Two different versions of the react-viewport-utils library are used in the same react tree. This can lead to unexpected results as the versions might not be compatible.
-The <ViewportProvider> of version ${props.version} is currently used, another <ViewportProvider> of version __VERSION__ was detected but is ignored.
+The <ViewportProvider> of version ${props.version} is currently used, another <ViewportProvider> of version _VERS_ was detected but is ignored.
 This is most probably due to some dependencies that use different versions of the react-viewport-utils library. You can check if an update is possible.`,
         );
       }
diff --git a/lib/hooks.ts b/lib/hooks.ts
@@ -63,7 +63,7 @@ export function useViewportEffect<T>(
       notifyDimensions: () => !memoOptions.disableDimensionsUpdates,
       notifyOnlyWhenIdle: () => Boolean(memoOptions.deferUpdateUntilIdle),
       priority: () => memoOptions.priority || 'normal',
-      recalculateLayoutBeforeUpdate: (...args: any) =>
+      recalculateLayoutBeforeUpdate: (...args) =>
         memoOptions.recalculateLayoutBeforeUpdate
           ? memoOptions.recalculateLayoutBeforeUpdate(...args)
           : null,
@@ -79,7 +79,7 @@ export function useViewportEffect<T>(
 export const useViewport = (options: FullOptions = {}): Viewport => {
   const { getCurrentViewport } = useContext(ViewportContext);
   const [state, setViewport] = useState(getCurrentViewport());
-  useViewportEffect(viewport => setViewport(viewport), options);
+  useViewportEffect((viewport) => setViewport(viewport), options);
 
   return state;
 };
diff --git a/lib/index.ts b/lib/index.ts
@@ -14,13 +14,13 @@ export {
   useRectEffect,
 } from './hooks';
 export { requestAnimationFrame, cancelAnimationFrame } from './utils';
-export {
-  Rect as IRect,
-  Scroll as IScroll,
-  Dimensions as IDimensions,
+export type {
   Rect,
   Scroll,
   Dimensions,
+  IRect,
+  IScroll,
+  IDimensions,
 } from './types';
 
-export const VERSION = '__VERSION__';
+export const VERSION = '_VERS_';
diff --git a/lib/types.ts b/lib/types.ts
@@ -31,6 +31,19 @@ export interface Rect {
   width: number;
 }
 
+/**
+ * @deprecated Better use Dimensions
+ */
+export interface IDimensions extends Dimensions {}
+/**
+ * @deprecated Better use Scroll
+ */
+export interface IScroll extends Scroll {}
+/**
+ * @deprecated Better use Rect
+ */
+export interface IRect extends Rect {}
+
 export interface Viewport {
   scroll: Scroll;
   dimensions: Dimensions;
diff --git a/lib/utils.ts b/lib/utils.ts
@@ -165,7 +165,7 @@ export const requestAnimationFrame = ((): RequestAnimationFrameType => {
   if (typeof window !== 'undefined') {
     const nativeRAF =
       window.requestAnimationFrame ||
-      window.webkitRequestAnimationFrame ||
+      (<any>window).webkitRequestAnimationFrame ||
       (<any>window).mozRequestAnimationFrame;
     if (nativeRAF) {
       return nativeRAF.bind(window);
@@ -182,7 +182,7 @@ export const cancelAnimationFrame = ((): ((handle: number) => void) => {
   if (typeof window !== 'undefined') {
     const nativeCAF =
       window.cancelAnimationFrame ||
-      window.webkitCancelAnimationFrame ||
+      (<any>window).webkitCancelAnimationFrame ||
       (<any>window).webkitCancelRequestAnimationFrame;
     if (nativeCAF) {
       return nativeCAF.bind(window);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tsconfig.test.json b/tsconfig.test.json
diff --git a/yarn.lock b/yarn.lock
