nteract / semiotic

A data visualization framework combining React & D3
https://semioticv1.nteract.io/
Other
2.43k stars 133 forks source link

ensure that devDependencies are listed as devDependencies in package.json #220

Closed micahstubbs closed 6 years ago

micahstubbs commented 6 years ago

ensure that devDependencies are listed as devDependencies in package.json

this should reduce the vendor bundle size for prod semiotic

micahstubbs commented 6 years ago

will take a shot at this

micahstubbs commented 6 years ago

will audit the dependencies and see if any are unused in src/. if a dependency is not used in src/, then it is probably a devDependency. (it's also possible that a dependency could be unused entirely)

micahstubbs commented 6 years ago

screen shot 2018-05-08 at 10 44 39 am

Searching 180 files for "@mapbox/polylabel"

/Users/m/workspace/semiotic/src/components/svg/areaDrawing.js:
    1  import { contourDensity } from "d3-contour"
    2  import { scaleLinear } from "d3-scale"
    3: import polylabel from "@mapbox/polylabel"
    4  import { hexbin } from "d3-hexbin"
    5  

1 match in 1 file
micahstubbs commented 6 years ago
Searching 180 files for "autoprefixer"

0 matches

https://www.npmjs.com/package/autoprefixer is probably a devDependency

micahstubbs commented 6 years ago
Searching 180 files for "babel-core"

0 matches

Searching 180 files for "babel-jest"

0 matches

Searching 180 files for "babel-loader"

0 matches

Searching 180 files for "babel-plugin-external-helpers"

0 matches

Searching 180 files for "babel-preset-react-app"

0 matches

Searching 180 files for "babel-runtime"

0 matches

these are devDependencies

micahstubbs commented 6 years ago
Searching 180 files for "case-sensitive-paths-webpack-plugin"

0 matches

Searching 180 files for "webpack-dev-server"

0 matches

Searching 180 files for "webpack-manifest-plugin"

0 matches

Searching 180 files for "html-webpack-plugin"

0 matches

Searching 180 files for "extract-text-webpack-plugin"

0 matches

these are devDependencies

micahstubbs commented 6 years ago
Searching 180 files for "chalk"

/Users/m/workspace/semiotic/src/docs/sampledata/stanton.js:
  389        />
  390      </g>
  391:     <g id="Bases_and_chalk_lines-ALL">
  392        <g>
  393          <path className="st9" d="M15.6,93.6" />

1 match in 1 file

1 match in src, but it's not a package import, just a string that happens to match the package name.

this is probably a devDependency https://www.npmjs.com/package/chalk

micahstubbs commented 6 years ago
Searching 180 files for "css-loader"

0 matches

Searching 180 files for "eslint-loader"

0 matches

Searching 180 files for "file-loader"

0 matches

Searching 180 files for "postcss-loader"

0 matches

Searching 180 files for "style-loader"

0 matches

Searching 180 files for "url-loader"

0 matches

Searching 180 files for "postcss-flexbugs-fixes"

0 matches

Searching 180 files for "eslint-plugin-flowtype"

0 matches

these are devDependencies

0 matches

Searching 180 files for "eslint-config-react-app"

this package is unused entirely

micahstubbs commented 6 years ago
    "d3-array": "^1.2.0",
    "d3-bboxCollide": "^1.0.3",
    "d3-brush": "^1.0.4",
    "d3-chord": "^1.0.4",
    "d3-collection": "^1.0.1",
    "d3-contour": "^1.1.1",
    "d3-force": "^1.0.2",
    "d3-glyphedge": "^1.2.0",
    "d3-hexbin": "^0.2.2",
    "d3-hierarchy": "^1.1.3",
    "d3-interpolate": "^1.1.5",
    "d3-sankey-circular": "^0.23.0",
    "d3-scale": "^1.0.3",
    "d3-selection": "^1.1.0",
    "d3-shape": "^1.0.4",
    "d3-voronoi": "^1.0.2"

are all used in src and so are valid dependencies

micahstubbs commented 6 years ago
Searching 180 files for "dotenv"

0 matches
    "dotenv": "4.0.0",
    "dotenv-expand": "4.2.0",

these are likely devDependencies

micahstubbs commented 6 years ago
Searching 180 files for "fs-extra"

0 matches

devDependency

micahstubbs commented 6 years ago
Searching 180 files for "jest"

0 matches

devDependency

micahstubbs commented 6 years ago
Searching 180 files for "element-resize-event"

/Users/m/workspace/semiotic/src/components/ResponsiveFrame.js:
    1  import React from "react"
    2  import PropTypes from "prop-types"
    3: import elementResizeEvent from "element-resize-event"
    4  
    5  const createResponsiveFrame = Frame =>

1 match in 1 file

valid prod dependency

micahstubbs commented 6 years ago
Searching 180 files for "json2csv"

/Users/m/workspace/semiotic/src/components/DownloadButton.js:
    1  import React from "react"
    2: import json2csv from "json2csv"
    3  
    4  import PropTypes from "prop-types"
    5  
    6  export const downloadCSV = (csvName, data) => {
    7:   json2csv(Object.assign({}, { data: data }), (err, csv) => {
    8      const blob = new Blob([csv], { type: "text/csv" })
    9  

3 matches in 1 file

valid prod dependency

micahstubbs commented 6 years ago

"labella": "1.1.4", is a valid prod dependency

micahstubbs commented 6 years ago
Searching 180 files for "object-assign"

0 matches

devDependency

micahstubbs commented 6 years ago
Searching 180 files for "promise"

0 matches

devDependency

micahstubbs commented 6 years ago

"prop-types": "15.6.0", is a valid prod dependency

micahstubbs commented 6 years ago
Searching 360 files for "require('raf')"

/Users/m/workspace/semiotic/config/polyfills.js:
   19  // We don't polyfill it in the browser--this is user's responsibility.
   20  if (process.env.NODE_ENV === 'test') {
   21:   require('raf').polyfill(global);
   22  }
   23  

1 match in 1 file
Searching 360 files for "require('whatwg-fetch')"

/Users/m/workspace/semiotic/config/polyfills.js:
   10  
   11  // fetch() polyfill for making API calls.
   12: require('whatwg-fetch');
   13  
   14  // Object.assign() is commonly used with React.

1 match in 1 file
/Users/m/workspace/semiotic/config/polyfills.js:
   14  // Object.assign() is commonly used with React.
   15  // It will use the native implementation if it's present and isn't buggy.
   16: Object.assign = require('object-assign');
   17  
   18  // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.

1 match in 1 file

Searching 360 files for "require('promise"

/Users/m/workspace/semiotic/config/polyfills.js:
    5    // inconsistent state due to an error, but it gets swallowed by a Promise,
    6    // and the user has no idea what causes React's erratic future behavior.
    7:   require('promise/lib/rejection-tracking').enable();
    8:   window.Promise = require('promise/lib/es6-extensions.js');
    9  }
   10  

2 matches in 1 file

not sure about polyfills. this might be able to be moved to devDependencies. 🤔

this thread suggests keeping polyfills in dependencies. will follow that approach here.

https://www.npmjs.com/package/raf

micahstubbs commented 6 years ago
Searching 180 files for "react-dev-utils"

0 matches

devDependency

micahstubbs commented 6 years ago
    "react-annotation": "1.2.1",
    "roughjs": "git://github.com/emeeks/rough",
    "semiotic-mark": "0.2.8",
    "svg-path-bounding-box": "1.0.4",

these are valid prod dependencies

micahstubbs commented 6 years ago
Searching 180 files for "url-loader"

0 matches

devDependency

emeeks commented 6 years ago

w00t