refactor(rollup): treeshakable

src/additional-components/Controls/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useCallback, FC, useEffect, useState } from 'react';
 import cc from 'classcat';
 
 import { useStore, useStoreApi } from '../../store';
-import useViewportHelper from '../../hooks/useViewportHelper';
+import useReactFlow from '../../hooks/useReactFlow';
 
 import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
@@ -36,7 +36,7 @@ const Controls: FC<ControlProps> = ({
   const store = useStoreApi();
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const isInteractive = useStore(isInteractiveSelector);
-  const { zoomIn, zoomOut, fitView } = useViewportHelper();
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
 
   const mapClasses = cc(['react-flow__controls', className]);
 

src/container/ReactFlow/index.tsx

@@ -12,6 +12,7 @@ import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../compon
 import Attribution from '../../components/Attribution';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import Wrapper from './Wrapper';
+import injectStyle, { useNodeOrEdgeTypes } from './utils';
 
 import {
   ConnectionMode,
@@ -23,9 +24,13 @@ import {
   EdgeTypes,
 } from '../../types';
 
-import '../../style.css';
-import '../../theme-default.css';
-import { useNodeOrEdgeTypes } from './utils';
+import css from '../../style.css';
+import theme from '../../theme-default.css';
+
+if (__INJECT_STYLES__) {
+  injectStyle(css as unknown as string);
+  injectStyle(theme as unknown as string);
+}
 
 const defaultNodeTypes = {
   input: InputNode,

src/container/ReactFlow/utils.ts

@@ -26,3 +26,14 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
 
   return typesParsed;
 }
+
+export default function injectStyle(css: string): void {
+  if (!css || typeof document === 'undefined') return;
+
+  const head = document.head || document.getElementsByTagName('head')[0];
+  const style = document.createElement('style');
+
+  head.appendChild(style);
+
+  style.appendChild(document.createTextNode(css));
+}

src/custom.d.ts

@@ -14,3 +14,4 @@ declare module '*.svg' {
 
 declare var __REACT_FLOW_VERSION__: string;
 declare var __ENV__: string;
+declare var __INJECT_STYLES__: boolean;

src/d3-color-alias.js

@@ -1,10 +0,0 @@
-// this helps us to reduce bundle size by ~10kb. d3-color is not used but can't be treeshaked in this case.
-
-const obj = {};
-export const rgb = {};
-export const color = {};
-export const hsl = {};
-export const lab = {};
-export const hcl = {};
-export const cubehelix = {};
-export default obj;