{"_id":"@storybook/react-dev-utils","_rev":"467501","name":"@storybook/react-dev-utils","description":"Webpack utilities used by Create React App","dist-tags":{"latest":"5.0.0"},"maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"dylanpiercey","email":"pierceydylan@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":""},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"monkeyworks","email":"igor.szyporyn@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":""},{"name":"pago","email":"patrick@pagosoft.com"},{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":""},{"name":"usulpro","email":"regx@usul.su"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"time":{"modified":"2021-08-05T08:02:39.000Z","created":"2018-03-26T09:35:48.340Z","5.0.0":"2018-03-26T09:35:48.340Z"},"users":{},"repository":{"type":"git","url":"https://github.com/facebook/create-react-app.git"},"versions":{"5.0.0":{"name":"@storybook/react-dev-utils","version":"5.0.0","description":"Webpack utilities used by Create React App","repository":{"type":"git","url":"https://github.com/facebook/create-react-app.git"},"license":"MIT","bugs":{"url":"https://github.com/facebook/create-react-app/issues"},"engines":{"node":">=6"},"files":["browsersHelper.js","checkRequiredFiles.js","clearConsole.js","crossSpawn.js","errorOverlayMiddleware.js","eslintFormatter.js","FileSizeReporter.js","formatWebpackMessages.js","getProcessForPort.js","ignoredFiles.js","inquirer.js","InterpolateHtmlPlugin.js","launchEditor.js","launchEditorEndpoint.js","ModuleScopePlugin.js","noopServiceWorkerMiddleware.js","openBrowser.js","openChrome.applescript","printBuildError.js","printHostingInstructions.js","WatchMissingNodeModulesPlugin.js","WebpackDevServerUtils.js","webpackHotDevClient.js","workspaceUtils.js"],"dependencies":{"@babel/code-frame":"7.0.0-beta.42","address":"1.0.3","browserslist":"3.2.0","chalk":"2.3.2","cross-spawn":"6.0.5","detect-port-alt":"1.1.5","escape-string-regexp":"1.0.5","filesize":"3.6.0","find-pkg":"1.0.0","global-modules":"1.0.0","globby":"8.0.1","gzip-size":"4.1.0","inquirer":"5.1.0","is-root":"1.0.0","opn":"5.3.0","pkg-up":"2.0.0","react-error-overlay":"^4.0.0","recursive-readdir":"2.2.2","shell-quote":"1.6.1","sockjs-client":"1.1.4","strip-ansi":"4.0.0","text-table":"0.2.0"},"devDependencies":{"jest":"22.4.3"},"scripts":{"test":"jest"},"_id":"@storybook/react-dev-utils@5.0.0","dist":{"shasum":"d33a6baf480a980e135c21ade859632aca20fe78","size":25238,"noattachment":false,"key":"/@storybook/react-dev-utils/-/@storybook/react-dev-utils-5.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@storybook/react-dev-utils/download/@storybook/react-dev-utils-5.0.0.tgz"},"maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"dylanpiercey","email":"pierceydylan@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":""},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"monkeyworks","email":"igor.szyporyn@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":""},{"name":"pago","email":"patrick@pagosoft.com"},{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":""},{"name":"usulpro","email":"regx@usul.su"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"_npmUser":{"name":"hypnosphi","email":"talpa@yandex.ru"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-dev-utils_5.0.0_1522056947486_0.04353503497097555"},"_hasShrinkwrap":false,"publish_time":1522056948340,"_cnpm_publish_time":1522056948340}},"readme":"# react-dev-utils\n\nThis package includes some utilities used by [Create React App](https://github.com/facebook/create-react-app).<br>\nPlease refer to its documentation:\n\n* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.\n* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.\n\n## Usage in Create React App Projects\n\nThese utilities come by default with [Create React App](https://github.com/facebook/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**\n\n## Usage Outside of Create React App\n\nIf you don’t use Create React App, or if you [ejected](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future.\n\n### Entry Points\n\nThere is no single entry point. You can only import individual top-level modules.\n\n#### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})`\n\nThis Webpack plugin lets us interpolate custom variables into `index.html`.<br>\nIt works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin) 2.x via its [events](https://github.com/ampedandwired/html-webpack-plugin#events).\n\n```js\nvar path = require('path');\nvar HtmlWebpackPlugin = require('html-dev-plugin');\nvar InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');\n\n// Webpack config\nvar publicUrl = '/my-custom-url';\n\nmodule.exports = {\n  output: {\n    // ...\n    publicPath: publicUrl + '/'\n  },\n  // ...\n  plugins: [\n    // Generates an `index.html` file with the <script> injected.\n    new HtmlWebpackPlugin({\n      inject: true,\n      template: path.resolve('public/index.html'),\n    }),\n    // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:\n    // <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/favicon.ico\">\n    new InterpolateHtmlPlugin({\n      PUBLIC_URL: publicUrl\n      // You can pass any key-value pairs, this was just an example.\n      // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.\n    }),\n    // ...\n  ],\n  // ...\n}\n```\n\n\n#### `new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])`\n\nThis Webpack plugin ensures that relative imports from app's source directories don't reach outside of it.\n\n```js\nvar path = require('path');\nvar ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');\n\n\nmodule.exports = {\n  // ...\n  resolve: {\n    // ...\n    plugins: [\n      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),\n      // ...\n    ],\n    // ...\n  },\n  // ...\n}\n```\n\n#### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`\n\nThis Webpack plugin ensures `npm install <library>` forces a project rebuild.<br>\nWe’re not sure why this isn't Webpack's default behavior.<br>\nSee [#186](https://github.com/facebook/create-react-app/issues/186) for details.\n\n```js\nvar path = require('path');\nvar WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');\n\n// Webpack config\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    // If you require a missing module and then `npm install` it, you still have\n    // to restart the development server for Webpack to discover it. This plugin\n    // makes the discovery automatic so you don't have to restart.\n    // See https://github.com/facebook/create-react-app/issues/186\n    new WatchMissingNodeModulesPlugin(path.resolve('node_modules'))\n  ],\n  // ...\n}\n```\n\n#### `checkRequiredFiles(files: Array<string>): boolean`\n\nMakes sure that all passed files exist.<br>\nFilenames are expected to be absolute.<br>\nIf a file is not found, prints a warning message and returns `false`.\n\n```js\nvar path = require('path');\nvar checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');\n\nif (!checkRequiredFiles([\n  path.resolve('public/index.html'),\n  path.resolve('src/index.js')\n])) {\n  process.exit(1);\n}\n```\n\n#### `clearConsole(): void`\n\nClears the console, hopefully in a cross-platform way.\n\n```js\nvar clearConsole = require('react-dev-utils/clearConsole');\n\nclearConsole();\nconsole.log('Just cleared the screen!');\n```\n\n#### `eslintFormatter(results: Object): string`\n\nThis is our custom ESLint formatter that integrates well with Create React App console output.<br>\nYou can use the default one instead if you prefer so.\n\n```js\nconst eslintFormatter = require('react-dev-utils/eslintFormatter');\n\n// In your webpack config:\n// ...\nmodule: {\n   rules: [\n     {\n        test: /\\.(js|jsx)$/,\n        include: paths.appSrc,\n        enforce: 'pre',\n        use: [\n          {\n            loader: 'eslint-loader',\n            options: {\n              // Pass the formatter:\n              formatter: eslintFormatter,\n            },\n          },\n        ],\n      }\n   ]\n}\n```\n\n#### `FileSizeReporter`\n\n##### `measureFileSizesBeforeBuild(buildFolder: string): Promise<OpaqueFileSizes>`\n\nCaptures JS and CSS asset sizes inside the passed `buildFolder`. Save the result value to compare it after the build.\n\n##### `printFileSizesAfterBuild(webpackStats: WebpackStats, previousFileSizes: OpaqueFileSizes, buildFolder: string, maxBundleGzipSize?: number, maxChunkGzipSize?: number)`\n\nPrints the JS and CSS asset sizes after the build, and includes a size comparison with `previousFileSizes` that were captured earlier using `measureFileSizesBeforeBuild()`. `maxBundleGzipSize` and `maxChunkGzipSizemay` may optionally be specified to display a warning when the main bundle or a chunk exceeds the specified size (in bytes).\n\n```js\nvar {\n  measureFileSizesBeforeBuild,\n  printFileSizesAfterBuild,\n} = require('react-dev-utils/FileSizeReporter');\n\nmeasureFileSizesBeforeBuild(buildFolder).then(previousFileSizes => {\n  return cleanAndRebuild().then(webpackStats => {\n    printFileSizesAfterBuild(webpackStats, previousFileSizes, buildFolder);\n  });\n});\n```\n\n#### `formatWebpackMessages({errors: Array<string>, warnings: Array<string>}): {errors: Array<string>, warnings: Array<string>}`\n\nExtracts and prettifies warning and error messages from webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object.\n\n```js\nvar webpack = require('webpack');\nvar config = require('../config/webpack.config.dev');\nvar formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');\n\nvar compiler = webpack(config);\n\ncompiler.hooks.invalid.tap('invalid', function() {\n  console.log('Compiling...');\n});\n\ncompiler.hooks.done.tap('done', function(stats) {\n  var rawMessages = stats.toJson({}, true);\n  var messages = formatWebpackMessages(rawMessages);\n  if (!messages.errors.length && !messages.warnings.length) {\n    console.log('Compiled successfully!');\n  }\n  if (messages.errors.length) {\n    console.log('Failed to compile.');\n    messages.errors.forEach(e => console.log(e));\n    return;\n  }\n  if (messages.warnings.length) {\n    console.log('Compiled with warnings.');\n    messages.warnings.forEach(w => console.log(w));\n  }\n});\n```\n\n#### `printBuildError(error: Object): void`\n\nPrettify some known build errors.\nPass an Error object to log a prettified error message in the console.\n\n```\n  const printBuildError = require('react-dev-utils/printBuildError')\n  try {\n    build()\n  } catch(e) {\n    printBuildError(e) // logs prettified message\n  }\n```\n\n#### `getProcessForPort(port: number): string`\n\nFinds the currently running process on `port`.\nReturns a string containing the name and directory, e.g.,\n\n```\ncreate-react-app\nin /Users/developer/create-react-app\n```\n\n```js\nvar getProcessForPort = require('react-dev-utils/getProcessForPort');\n\ngetProcessForPort(3000);\n```\n\n#### `launchEditor(fileName: string, lineNumber: number): void`\n\nOn macOS, tries to find a known running editor process and opens the file in it. It can also be explicitly configured by `REACT_EDITOR`, `VISUAL`, or `EDITOR` environment variables. For example, you can put `REACT_EDITOR=atom` in your `.env.local` file, and Create React App will respect that.\n\n#### `noopServiceWorkerMiddleware(): ExpressMiddleware`\n\nReturns Express middleware that serves a `/service-worker.js` that resets any previously set service worker configuration. Useful for development.\n\n#### `openBrowser(url: string): boolean`\n\nAttempts to open the browser with a given URL.<br>\nOn Mac OS X, attempts to reuse an existing Chrome tab via AppleScript.<br>\nOtherwise, falls back to [opn](https://github.com/sindresorhus/opn) behavior.\n\n\n```js\nvar path = require('path');\nvar openBrowser = require('react-dev-utils/openBrowser');\n\nif (openBrowser('http://localhost:3000')) {\n  console.log('The browser tab has been opened!');\n}\n```\n\n#### `printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void`\n\nPrints hosting instructions after the project is built.\n\nPass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your Webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.\n\n```js\nconst appPackage = require(paths.appPackageJson);\nconst publicUrl = paths.publicUrl;\nconst publicPath = config.output.publicPath;\nprintHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);\n```\n\n#### `WebpackDevServerUtils`\n\n##### `choosePort(host: string, defaultPort: number): Promise<number | null>`\n\nReturns a Promise resolving to either `defaultPort` or next available port if the user confirms it is okay to do. If the port is taken and the user has refused to use another port, or if the terminal is not interactive and can’t present user with the choice, resolves to `null`.\n\n##### `createCompiler(webpack: Function, config: Object, appName: string, urls: Object, useYarn: boolean): WebpackCompiler`\n\nCreates a Webpack compiler instance for WebpackDevServer with built-in helpful messages. Takes the `require('webpack')` entry point as the first argument. To provide the `urls` argument, use `prepareUrls()` described below.\n\n##### `prepareProxy(proxySetting: string, appPublicFolder: string): Object`\n\nCreates a WebpackDevServer `proxy` configuration object from the `proxy` setting in `package.json`.\n\n##### `prepareUrls(protocol: string, host: string, port: number): Object`\n\nReturns an object with local and remote URLs for the development server. Pass this object to `createCompiler()` described above.\n\n#### `webpackHotDevClient`\n\nThis is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay.\n\nIt currently supports only Webpack 3.x.\n\n```js\n// Webpack development config\nmodule.exports = {\n  // ...\n  entry: [\n    // You can replace the line below with these two lines if you prefer the\n    // stock client:\n    // require.resolve('webpack-dev-server/client') + '?/',\n    // require.resolve('webpack/hot/dev-server'),\n    'react-dev-utils/webpackHotDevClient',\n    'src/index'\n  ],\n  // ...\n}\n```\n","_attachments":{},"bugs":{"url":"https://github.com/facebook/create-react-app/issues"},"license":"MIT"}