fix: invalid hooks call

ordazgustavo · ordazgustavo · commit 4b3171526b59 · 2019-08-11T17:46:33.000-05:00
diff --git a/package.json b/package.json
@@ -22,6 +22,10 @@
     "deploy": "gh-pages -d example/build",
     "format": "prettier --write \"src/**/*.+(js|md|css|json|ts|tsx)\""
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
   "dependencies": {
     "lodash.debounce": "^4.0.8"
   },
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,10 +1,10 @@
-import typescript from 'rollup-plugin-typescript2'
-import commonjs from 'rollup-plugin-commonjs'
-import external from 'rollup-plugin-peer-deps-external'
-import resolve from 'rollup-plugin-node-resolve'
-import url from 'rollup-plugin-url'
+import typescript from 'rollup-plugin-typescript2';
+import commonjs from 'rollup-plugin-commonjs';
+import external from 'rollup-plugin-peer-deps-external';
+import resolve from 'rollup-plugin-node-resolve';
+import url from 'rollup-plugin-url';
 
-import pkg from './package.json'
+import pkg from './package.json';
 
 export default {
   input: 'src/index.tsx',
@@ -22,14 +22,15 @@ export default {
       sourcemap: true,
     },
   ],
+  external: ['stream'],
   plugins: [
     external(),
     url(),
-    resolve(),
+    resolve({ preferBuiltins: true }),
     typescript({
       rollupCommonJSResolveHack: true,
       clean: true,
     }),
     commonjs(),
   ],
-}
+};
diff --git a/src/HEREMap.tsx b/src/HEREMap.tsx
@@ -5,8 +5,8 @@ import debounce from 'lodash.debounce';
 import MapContext from './utils/map-context';
 import { HEvents, events, Events } from './utils/map-events';
 import { usePlatform } from './hooks/use-platform';
-import { useScript } from 'hooks/use-script';
-import { useLink } from 'hooks/use-link';
+import { useScript } from './hooks/use-script';
+import { useLink } from './hooks/use-link';
 
 export interface HEREMapProps extends H.Map.Options, HEvents {
   appId: string;
@@ -36,9 +36,11 @@ export const HEREMap: React.FC<HEREMapProps> = ({
   children,
   ...rest
 }) => {
-  const [map, setMap] = React.useState<H.Map>();
-  const [behavior, setBehavior] = React.useState<H.mapevents.Behavior>();
-  const [ui, setUi] = React.useState<H.ui.UI>();
+  const [map, setMap] = React.useState<H.Map | undefined>(undefined);
+  const [behavior, setBehavior] = React.useState<
+    H.mapevents.Behavior | undefined
+  >(undefined);
+  const [ui, setUi] = React.useState<H.ui.UI | undefined>(undefined);
   const debouncedResizeMap = debounce(resizeMap, 200);
   const [,] = useLink(
     'https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296',
diff --git a/src/Marker.tsx b/src/Marker.tsx
@@ -24,7 +24,9 @@ export const Marker: React.FC<MarkerProps> = ({
   ...rest
 }) => {
   const mapContext = React.useContext(MapContext);
-  const [marker, setMarker] = React.useState<H.map.Marker | H.map.DomMarker>();
+  const [marker, setMarker] = React.useState<
+    H.map.Marker | H.map.DomMarker | undefined
+  >(undefined);
 
   React.useEffect(() => {
     const { map, behavior } = mapContext;
diff --git a/src/RouteLine.tsx b/src/RouteLine.tsx
@@ -16,7 +16,9 @@ export const RouteLine: React.FC<RouteLineProps> = ({
   lineWidth,
 }) => {
   const mapContext = React.useContext(MapContext);
-  const [routeLine, setRouteLine] = React.useState<H.map.Polyline>();
+  const [routeLine, setRouteLine] = React.useState<H.map.Polyline | undefined>(
+    undefined,
+  );
 
   React.useEffect(() => {
     const { map } = mapContext;
diff --git a/src/__tests__/HEREMap.test.tsx b/src/__tests__/HEREMap.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import HEREMap from 'HEREMap';
-import Marker from 'Marker';
-import RouteLine from 'RouteLine';
-import Circle from 'Circle';
+
+import HEREMap from '../HEREMap';
+import Marker from '../Marker';
+import RouteLine from '../RouteLine';
+import Circle from '../Circle';
 
 const appId = '';
 const appCode = '';
diff --git a/src/hooks/use-platform.ts b/src/hooks/use-platform.ts
@@ -4,7 +4,9 @@ export function usePlatform(
   platformOptions: H.service.Platform.Options,
   scriptsLoaded = true,
 ) {
-  const [platform, setPlatform] = React.useState<H.service.Platform>();
+  const [platform, setPlatform] = React.useState<
+    H.service.Platform | undefined
+  >(undefined);
 
   React.useEffect(() => {
     if (!platform && scriptsLoaded) {
diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,7 @@ import HEREMap from './HEREMap';
 import Circle from './Circle';
 import Marker from './Marker';
 import RouteLine from './RouteLine';
-import { usePlatform } from 'hooks/use-platform';
+import { usePlatform } from './hooks/use-platform';
 
 export { Circle, HEREMap, Marker, RouteLine, usePlatform };
 
