@teambit/react 0.0.657 → 0.0.660

package/artifacts/preview/teambit_react_react-preview.js

@@ -1 +1 @@
-!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["teambit.react/react-preview"]=t():e["teambit.react/react-preview"]=t()}(self,(function(){return(()=>{var e={8244:e=>{e.exports=function(e){return e&&e.__esModule?e:{default:e}}},7365:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>p});n(3804);var a=n(5057),r=n(8459),o=n(6765),i=["components"];function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s.apply(this,arguments)}function m(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c={};function p(e){var t=e.components,n=m(e,i);return(0,a.mdx)("wrapper",s({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.mdx)(r.MDXScopeProvider,{components:{ReactAspect:o.a},mdxType:"MDXScopeProvider"},(0,a.mdx)(o.a,{mdxType:"ReactAspect"})))}p.isMDXComponent=!0},6765:(e,t,n)=>{"use strict";Object.defineProperty(t,"a",{enumerable:!0,get:function(){return a.default}});var a=r(n(8948));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.react/aspect-docs/react@0.0.132",homepage:"https://bit.dev/teambit/react/aspect-docs/react",exported:!0}},8948:(e,t,n)=>{"use strict";var a={id:"teambit.react/aspect-docs/react@0.0.132",homepage:"https://bit.dev/teambit/react/aspect-docs/react",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=l;s(n(3804));var r=n(5057),o=n(8459),i=["components"];function s(e){return e&&e.__esModule?e:{default:e}}function m(){return m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},m.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,a,r=p(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function p(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}s.__bit_component=a,m.__bit_component=a,c.__bit_component=a,p.__bit_component=a;var d={};function l(e){var t=e.components,n=c(e,i);return(0,r.mdx)("wrapper",m({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(o.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,r.mdx)("p",null,"The built-in ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/react/react"},"React Component Development Environment")," is a concrete composition of the ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/envs/envs"},"Env Aspect"),". It compose different tools and configs that fit practices implemented in ",(0,r.mdx)("a",{parentName:"p",href:"https://create-react-app.dev"},"Create React App"),". Use it when getting started with React components with Bit and later as a base for any future customization of your React-based workflow."),(0,r.mdx)("h2",null,"Use React environment"),(0,r.mdx)("p",null,"To use this environment for your components, add it to any of the ",(0,r.mdx)("inlineCode",{parentName:"p"},"variants")," in your ",(0,r.mdx)("inlineCode",{parentName:"p"},"workspace.jsonc")," file as follows:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.jsonc"',title:'"workspace.jsonc"'},'{\n  "teambit.workspace/variants": {\n    "some/path": {\n      "teambit.react/react": {}\n    }\n  }\n}\n')),(0,r.mdx)("h2",null,"Create React components"),(0,r.mdx)("p",null,"React implements several component templates:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-component")," a basic React UI component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-context")," a react context component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-hook")," a react hook component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"mdx-component")," an MDX component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-component-js")," a basic React component in JS."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-env")," boilerplate for a customized environment configuration.")),(0,r.mdx)("p",null,"Use any of these templates with the ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit create")," command:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create <template name> [components...]\n")),(0,r.mdx)("h2",null,"Runtime (framework) dependencies"),(0,r.mdx)("p",null,"As with many Frontend frameworks React requires a singleton instance in your app's runtime. When building reuseable components that means setting ",(0,r.mdx)("inlineCode",{parentName:"p"},"react")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"react-dom")," as ",(0,r.mdx)("inlineCode",{parentName:"p"},"peerDependencies"),", thus allowing the consuming app to determine the runtime version. Bit's base React environment implements this via the ",(0,r.mdx)("strong",{parentName:"p"},"Dependencies")," service which is used to override ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/dependencies/dependency-resolver"},"dependency-resolver")," and set your preferred dependencies.\nIt is recommended for you to extend the base React environment and define a semantic version rule and range to fit your current tech stack and guidelines for reuseable React components."),(0,r.mdx)("h2",null,"Development services"),(0,r.mdx)("p",null,"React, like all other Bit Environments must implement a set of Service Handlers. Each service corresponds to a specific tool or stage in the component life-cycle, with a default config as set by the base React environment:"),(0,r.mdx)("table",null,(0,r.mdx)("thead",{parentName:"table"},(0,r.mdx)("tr",{parentName:"thead"},(0,r.mdx)("th",{parentName:"tr",align:null},"Service"),(0,r.mdx)("th",{parentName:"tr",align:null},"Aspect"),(0,r.mdx)("th",{parentName:"tr",align:null},"Base Configuration"))),(0,r.mdx)("tbody",{parentName:"table"},(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Compilation"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript"},"TypeScript")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/typescript/tsconfig.json"},"tsconfig.json"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Testing"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Jest")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/jest/jest.config.js"},"jest.config.js"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Linting"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"ESLint")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/eslint/eslintrc.ts"},"eslintrc.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"DevServer"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Webpack")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.dev.ts"},"webpack.config.preview.dev.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Preview (simulation)"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Webpack")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Package"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"PKG")),(0,r.mdx)("td",{parentName:"tr",align:null},"Base ",(0,r.mdx)("inlineCode",{parentName:"td"},"package.json")," props from ",(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript/~code/typescript.main.runtime.ts"},"TypeScript Aspect"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Bundling"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Webpack")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Documentation"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("em",{parentName:"td"},"Core implementation")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/docs/index.tsx"},"Docs template"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Build pipeline"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/pipelines/builder"},"Builder")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/react.env.ts"},"Build pipeline"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Dependencies"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("em",{parentName:"td"},"Core implementation")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/react.env.ts"},"Env-dependencies"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Component Generator"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/generator/generator"},"Generator")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/templates/react-component.ts"},"example template"))))),(0,r.mdx)("h2",null,"Customize environment"),(0,r.mdx)("p",null,"All environments are extendible. You can take any pre-existing environment, and create a component to extend it, creating a customized environment. That customized environment can use APIs from the environment it is extending to:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},"Override default configurations."),(0,r.mdx)("li",{parentName:"ul"},"Replace composed tools with others (for example - use Babel to transpile instead of TypeScript)."),(0,r.mdx)("li",{parentName:"ul"},"Add new services and capabilities.")),(0,r.mdx)("h3",null,"Create an extension"),(0,r.mdx)("p",null,"The first step is to create a component that extends React. Use the ",(0,r.mdx)("inlineCode",{parentName:"p"},"react-env")," template from React env."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create react-env extensions/custom-react\n")),(0,r.mdx)("p",null,"As with any component, environments must themselves have an environment which compiles, builds, transpiles, etc, them. Bit has a special environment that knows how to create other environments - ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect"),". So for any component that is meant to be a Bit environment, you must set ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," as the environment for that component."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="add variant for the extension and set the aspect env"',title:'"add',variant:!0,for:!0,the:!0,extension:!0,and:!0,set:!0,aspect:!0,'env"':!0},'{\n  //...\n  "teambit.workspace/variants": {\n    //...\n    "extensions/custom-react": {\n      "teambit.harmony/aspect": {}\n    }\n    //...\n  }\n}\n')),(0,r.mdx)("p",null,"Validate the above by running ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit env")," and see that the extension-component has ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," set as its environment."),(0,r.mdx)("p",null,"Now that you have a basic customized extension to start from, you can go ahead and configure it for your components in ",(0,r.mdx)("inlineCode",{parentName:"p"},"workspace.json"),":"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="edit variants and set the new env"',title:'"edit',variants:!0,and:!0,set:!0,the:!0,new:!0,'env"':!0},'{\n  //...\n  "teambit.workspace/variants": {\n    //...\n    "[some]/[variant]": {\n      "[yourscope]/extensions/custom-react": {}\n    }\n    //...\n  }\n}\n')),(0,r.mdx)("h3",null,"Customize configuration"),(0,r.mdx)("p",null,"React implements a set of APIs you can use to merge your preferred configuration with its defaults. These APIs are called ",(0,r.mdx)("strong",{parentName:"p"},"transformers")," and they all start with the ",(0,r.mdx)("inlineCode",{parentName:"p"},"override")," pre-fix. Find ",(0,r.mdx)("a",{parentName:"p",href:"#transformers-api-docs"},"Available transformers here"),".\nIn case of a conflict, your config will override the default."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:'{4,14} title="Customized TypeScript configuration"',"{4,14}":!0,title:'"Customized',TypeScript:!0,'configuration"':!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { ReactAspect, ReactMain } from '@teambit/react';\n\nconst tsconfig = require('./typescript/tsconfig.json');\n\nexport class CustomReactExtension {\n  constructor(private react: ReactMain) {}\n\n  static dependencies: any = [EnvsAspect, ReactAspect];\n\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const customReactEnv = react.compose([react.overrideTsConfig(tsconfig)]);\n\n    envs.registerEnv(customReactEnv);\n\n    return new CustomReactExtension(react);\n  }\n}\n")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"To override any specific configuration it's recommended to create a separate config file with your customized configuration and import it into the main ",(0,r.mdx)("inlineCode",{parentName:"p"},".extension.ts")," file where you can supply it to the relevant ",(0,r.mdx)("strong",{parentName:"p"},"transformers"),". See the tsconfig example in the above snippet.")),(0,r.mdx)("h3",null,"Composing tools and services"),(0,r.mdx)("p",null,"Environments use Environment Services by implementing a special class of methods called Service Handlers.\nThe supplied transformers allow overriding of these services - for instance the ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer allows overriding the environment's ",(0,r.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," method."),(0,r.mdx)("p",null,"The below example uses the ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer to override the ",(0,r.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," Service Handler to change the compilation service."),(0,r.mdx)("ol",null,(0,r.mdx)("li",{parentName:"ol"},"Add a Babel config file to your custom environment and import/require it in your ",(0,r.mdx)("inlineCode",{parentName:"li"},".extension")," file"),(0,r.mdx)("li",{parentName:"ol"},"Create a new Babel compiler using the Babel aspect, and initialize it with the above babelConfig"),(0,r.mdx)("li",{parentName:"ol"},"Use the ",(0,r.mdx)("inlineCode",{parentName:"li"},"compose")," Env API to apply the compiler override transformer and add Babel as a transpiler in the environment")),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:"{3,5,10-12,15,17-18,22-23}","{3,5,10-12,15,17-18,22-23}":!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { ReactAspect, ReactMain } from '@teambit/react';\nimport { BabelAspect, BabelMain } from '@teambit/babel';\n\nconst babelConfig = require('./babel/babel.config');\n\nexport class CustomReactExtension {\n  constructor(private react: ReactMain) {}\n\n  static dependencies: any = [EnvsAspect, ReactAspect, BabelAspect];\n\n  static async provider([envs, react, babel]: [EnvsMain, ReactMain, BabelMain]) {\n    const babelCompiler = babel.createCompiler({\n      babelTransformOptions: babelConfig,\n    });\n\n    const customReactEnv = react.compose([\n      react.overrideCompiler(babelCompiler),\n      react.overrideCompilerTasks([babelCompiler.createTask()]),\n    ]);\n\n    envs.registerEnv(customReactEnv);\n    return new CustomReactExtension(react);\n  }\n}\n")),(0,r.mdx)("h3",null,"Transformers API docs"),(0,r.mdx)("p",null,"Use these APIs to customize the base React environment default configuration with your extension. ",(0,r.mdx)("a",{parentName:"p",href:"#customizing-configuration"},"Read more here"),"."),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,r.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects the transpilation carried out when rendering components on the local dev UI. To override the config used when building components, use ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideBuildTsConfig")," below."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class ReactExtension {\n// ...\n\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideTsConfig(tsconfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideBuildTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,r.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects transpilation of component code during the build process, i.e. in preparation for packaging and exporting the component. To override the local ts config used when rendering components in the local UI, please use ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideTsConfig")," above."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class ReactExtension {\n// ...\n\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideTsConfig(tsconfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overridePreviewConfig(config: Configuration): EnvTransformer")),(0,r.mdx)("p",null,"Merges the Webpack configuration for the 'Preview' environment service, with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis webpack configuration is used for building and rendering your components for production (during ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit tag")," or ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit build"),")."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class ReactExtension {\n// ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overridePreviewConfig(webpackConfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideDevServerConfig(config: Configuration): EnvTransformer")),(0,r.mdx)("p",null,"Merges the Webpack configuration for the 'DevServer' environment service, with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis configuration is used for building and rendering your components in the local dev server."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class ReactExtension {\n// ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideDevServerConfig(webpackConfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideJestConfig(jestConfigPath: string): EnvTransformer")),(0,r.mdx)("p",null,"Merges the default configuration for the Jest test runner with the contents of your (",(0,r.mdx)("a",{parentName:"p",href:"https://jestjs.io/en/configuration"},"jest.config configuration file"),")."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst jestConfig = require.resolve('./jest/jest.config');\nexport class ReactExtension {\n// ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideJestConfig(jestConfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideBuildPipe(tasks: BuildTask[]): EnvTransformer")),(0,r.mdx)("p",null,"This method receives an array of build tasks. It merges the provided tasks with the environment's default build pipeline (initiated either on a ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit tag")," or ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit build")," command)."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\n// Import the task\nimport { CustomTask } from './custom.task';\nexport class CustomReact {\n  // ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    // Get the environment's default build pipeline using the 'getBuildPipe' service handler\n    const reactPipe = react.env.getBuildPipe();\n    // Add the custom task to the end of the build tasks sequence.\n    const tasks = [...reactPipe, new CustomTask()];\n    const newReactEnv = react.compose([react.overrideBuildPipe(tasks)]);\n    // ...\n  }\n}\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideDependencies(dependencyPolicy: DependenciesPolicy): EnvTransformer")),(0,r.mdx)("p",null,"This method receives a dependency-policy object and merges it with the environment's default dependency policy for components using this environment.\nEach key-value pair in a dependency-policy object signifies the package and the version to be used. Use also the ",(0,r.mdx)("inlineCode",{parentName:"p"},"-")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"+")," notation to signify a module should moved between dependency types (dev, peer or standard)."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst newDependencies = {\n  dependencies: {\n    react: '-',\n  },\n  devDependencies: {\n    '@types/jest': '~26.0.9',\n  },\n  peerDependencies: {\n    react: '^17.0.2',\n  },\n};\n\nexport class CustomReact {\n  // ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([react.overrideDependencies(newDependencies)]);\n    // ...\n  }\n}\n")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"The above example shows the 'React' library being removed as a (runtime) dependency and added as a peer dependency.")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overridePackageJsonProps(props: PackageJsonProps): EnvTransformer")),(0,r.mdx)("p",null,"Merges the provide props with the default properties added to the ",(0,r.mdx)("inlineCode",{parentName:"p"},"package.json")," file of every package generated from components using this environment."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst newPackageProps = {\n  main: 'dist/{main}.js',\n  types: '{main}.ts',\n};\n\nexport class CustomReact {\n  // ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([react.overridePackageJsonProps(newPackageProps)]);\n    // ...\n  }\n}\n"))))}l.__bit_component=a,l.isMDXComponent=!0},9097:(e,t,n)=>{"use strict";var a={id:"teambit.react/react@0.0.657",homepage:"https://bit.dev/teambit/react/react",exported:!0},r=n(8244);function o(){const e=r(n(3804));return o=function(){return e},e}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,o.__bit_component=a;const i=()=>o().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},o().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/brands/logo-react.svg"}));i.__bit_component=a,t.Logo=i},5057:e=>{"use strict";e.exports=MdxJsReact},3804:e=>{"use strict";e.exports=React},8459:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var o=t[a]={exports:{}};return e[a](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{"use strict";n.r(a),n.d(a,{compositions:()=>e,overview:()=>t});const e=[n(9097)],t=[n(7365)]})(),a})()}));
+!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["teambit.react/react-preview"]=t():e["teambit.react/react-preview"]=t()}(self,(function(){return(()=>{var e={8244:e=>{e.exports=function(e){return e&&e.__esModule?e:{default:e}}},264:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>p});n(3804);var a=n(5057),r=n(8459),o=n(6765),i=["components"];function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s.apply(this,arguments)}function m(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var c={};function p(e){var t=e.components,n=m(e,i);return(0,a.mdx)("wrapper",s({},c,n,{components:t,mdxType:"MDXLayout"}),(0,a.mdx)(r.MDXScopeProvider,{components:{ReactAspect:o.a},mdxType:"MDXScopeProvider"},(0,a.mdx)(o.a,{mdxType:"ReactAspect"})))}p.isMDXComponent=!0},6765:(e,t,n)=>{"use strict";Object.defineProperty(t,"a",{enumerable:!0,get:function(){return a.default}});var a=r(n(8948));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.react/aspect-docs/react@0.0.132",homepage:"https://bit.dev/teambit/react/aspect-docs/react",exported:!0}},8948:(e,t,n)=>{"use strict";var a={id:"teambit.react/aspect-docs/react@0.0.132",homepage:"https://bit.dev/teambit/react/aspect-docs/react",exported:!0};Object.defineProperty(t,"__esModule",{value:!0}),t.default=l;s(n(3804));var r=n(5057),o=n(8459),i=["components"];function s(e){return e&&e.__esModule?e:{default:e}}function m(){return m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},m.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,a,r=p(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function p(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}s.__bit_component=a,m.__bit_component=a,c.__bit_component=a,p.__bit_component=a;var d={};function l(e){var t=e.components,n=c(e,i);return(0,r.mdx)("wrapper",m({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.mdx)(o.MDXScopeProvider,{components:{},mdxType:"MDXScopeProvider"},(0,r.mdx)("p",null,"The built-in ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/react/react"},"React Component Development Environment")," is a concrete composition of the ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/envs/envs"},"Env Aspect"),". It compose different tools and configs that fit practices implemented in ",(0,r.mdx)("a",{parentName:"p",href:"https://create-react-app.dev"},"Create React App"),". Use it when getting started with React components with Bit and later as a base for any future customization of your React-based workflow."),(0,r.mdx)("h2",null,"Use React environment"),(0,r.mdx)("p",null,"To use this environment for your components, add it to any of the ",(0,r.mdx)("inlineCode",{parentName:"p"},"variants")," in your ",(0,r.mdx)("inlineCode",{parentName:"p"},"workspace.jsonc")," file as follows:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="workspace.jsonc"',title:'"workspace.jsonc"'},'{\n  "teambit.workspace/variants": {\n    "some/path": {\n      "teambit.react/react": {}\n    }\n  }\n}\n')),(0,r.mdx)("h2",null,"Create React components"),(0,r.mdx)("p",null,"React implements several component templates:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-component")," a basic React UI component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-context")," a react context component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-hook")," a react hook component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"mdx-component")," an MDX component."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-component-js")," a basic React component in JS."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"react-env")," boilerplate for a customized environment configuration.")),(0,r.mdx)("p",null,"Use any of these templates with the ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit create")," command:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create <template name> [components...]\n")),(0,r.mdx)("h2",null,"Runtime (framework) dependencies"),(0,r.mdx)("p",null,"As with many Frontend frameworks React requires a singleton instance in your app's runtime. When building reuseable components that means setting ",(0,r.mdx)("inlineCode",{parentName:"p"},"react")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"react-dom")," as ",(0,r.mdx)("inlineCode",{parentName:"p"},"peerDependencies"),", thus allowing the consuming app to determine the runtime version. Bit's base React environment implements this via the ",(0,r.mdx)("strong",{parentName:"p"},"Dependencies")," service which is used to override ",(0,r.mdx)("a",{parentName:"p",href:"https://bit.dev/teambit/dependencies/dependency-resolver"},"dependency-resolver")," and set your preferred dependencies.\nIt is recommended for you to extend the base React environment and define a semantic version rule and range to fit your current tech stack and guidelines for reuseable React components."),(0,r.mdx)("h2",null,"Development services"),(0,r.mdx)("p",null,"React, like all other Bit Environments must implement a set of Service Handlers. Each service corresponds to a specific tool or stage in the component life-cycle, with a default config as set by the base React environment:"),(0,r.mdx)("table",null,(0,r.mdx)("thead",{parentName:"table"},(0,r.mdx)("tr",{parentName:"thead"},(0,r.mdx)("th",{parentName:"tr",align:null},"Service"),(0,r.mdx)("th",{parentName:"tr",align:null},"Aspect"),(0,r.mdx)("th",{parentName:"tr",align:null},"Base Configuration"))),(0,r.mdx)("tbody",{parentName:"table"},(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Compilation"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript"},"TypeScript")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/typescript/tsconfig.json"},"tsconfig.json"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Testing"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Jest")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/jest/jest.config.js"},"jest.config.js"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Linting"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"ESLint")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/eslint/eslintrc.ts"},"eslintrc.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"DevServer"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Webpack")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.dev.ts"},"webpack.config.preview.dev.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Preview (simulation)"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Webpack")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Package"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"PKG")),(0,r.mdx)("td",{parentName:"tr",align:null},"Base ",(0,r.mdx)("inlineCode",{parentName:"td"},"package.json")," props from ",(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript/~code/typescript.main.runtime.ts"},"TypeScript Aspect"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Bundling"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("strong",{parentName:"td"},"Webpack")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Documentation"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("em",{parentName:"td"},"Core implementation")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/docs/index.tsx"},"Docs template"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Build pipeline"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/pipelines/builder"},"Builder")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/react.env.ts"},"Build pipeline"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Dependencies"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("em",{parentName:"td"},"Core implementation")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/react.env.ts"},"Env-dependencies"))),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"Component Generator"),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/generator/generator"},"Generator")),(0,r.mdx)("td",{parentName:"tr",align:null},(0,r.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/templates/react-component.ts"},"example template"))))),(0,r.mdx)("h2",null,"Customize environment"),(0,r.mdx)("p",null,"All environments are extendible. You can take any pre-existing environment, and create a component to extend it, creating a customized environment. That customized environment can use APIs from the environment it is extending to:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},"Override default configurations."),(0,r.mdx)("li",{parentName:"ul"},"Replace composed tools with others (for example - use Babel to transpile instead of TypeScript)."),(0,r.mdx)("li",{parentName:"ul"},"Add new services and capabilities.")),(0,r.mdx)("h3",null,"Create an extension"),(0,r.mdx)("p",null,"The first step is to create a component that extends React. Use the ",(0,r.mdx)("inlineCode",{parentName:"p"},"react-env")," template from React env."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-sh"},"bit create react-env extensions/custom-react\n")),(0,r.mdx)("p",null,"As with any component, environments must themselves have an environment which compiles, builds, transpiles, etc, them. Bit has a special environment that knows how to create other environments - ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect"),". So for any component that is meant to be a Bit environment, you must set ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," as the environment for that component."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="add variant for the extension and set the aspect env"',title:'"add',variant:!0,for:!0,the:!0,extension:!0,and:!0,set:!0,aspect:!0,'env"':!0},'{\n  //...\n  "teambit.workspace/variants": {\n    //...\n    "extensions/custom-react": {\n      "teambit.harmony/aspect": {}\n    }\n    //...\n  }\n}\n')),(0,r.mdx)("p",null,"Validate the above by running ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit env")," and see that the extension-component has ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.harmony/aspect")," set as its environment."),(0,r.mdx)("p",null,"Now that you have a basic customized extension to start from, you can go ahead and configure it for your components in ",(0,r.mdx)("inlineCode",{parentName:"p"},"workspace.json"),":"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json",metastring:'title="edit variants and set the new env"',title:'"edit',variants:!0,and:!0,set:!0,the:!0,new:!0,'env"':!0},'{\n  //...\n  "teambit.workspace/variants": {\n    //...\n    "[some]/[variant]": {\n      "[yourscope]/extensions/custom-react": {}\n    }\n    //...\n  }\n}\n')),(0,r.mdx)("h3",null,"Customize configuration"),(0,r.mdx)("p",null,"React implements a set of APIs you can use to merge your preferred configuration with its defaults. These APIs are called ",(0,r.mdx)("strong",{parentName:"p"},"transformers")," and they all start with the ",(0,r.mdx)("inlineCode",{parentName:"p"},"override")," pre-fix. Find ",(0,r.mdx)("a",{parentName:"p",href:"#transformers-api-docs"},"Available transformers here"),".\nIn case of a conflict, your config will override the default."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:'{4,14} title="Customized TypeScript configuration"',"{4,14}":!0,title:'"Customized',TypeScript:!0,'configuration"':!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { ReactAspect, ReactMain } from '@teambit/react';\n\nconst tsconfig = require('./typescript/tsconfig.json');\n\nexport class CustomReactExtension {\n  constructor(private react: ReactMain) {}\n\n  static dependencies: any = [EnvsAspect, ReactAspect];\n\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const customReactEnv = react.compose([react.overrideTsConfig(tsconfig)]);\n\n    envs.registerEnv(customReactEnv);\n\n    return new CustomReactExtension(react);\n  }\n}\n")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"To override any specific configuration it's recommended to create a separate config file with your customized configuration and import it into the main ",(0,r.mdx)("inlineCode",{parentName:"p"},".extension.ts")," file where you can supply it to the relevant ",(0,r.mdx)("strong",{parentName:"p"},"transformers"),". See the tsconfig example in the above snippet.")),(0,r.mdx)("h3",null,"Composing tools and services"),(0,r.mdx)("p",null,"Environments use Environment Services by implementing a special class of methods called Service Handlers.\nThe supplied transformers allow overriding of these services - for instance the ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer allows overriding the environment's ",(0,r.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," method."),(0,r.mdx)("p",null,"The below example uses the ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideCompiler")," transformer to override the ",(0,r.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," Service Handler to change the compilation service."),(0,r.mdx)("ol",null,(0,r.mdx)("li",{parentName:"ol"},"Add a Babel config file to your custom environment and import/require it in your ",(0,r.mdx)("inlineCode",{parentName:"li"},".extension")," file"),(0,r.mdx)("li",{parentName:"ol"},"Create a new Babel compiler using the Babel aspect, and initialize it with the above babelConfig"),(0,r.mdx)("li",{parentName:"ol"},"Use the ",(0,r.mdx)("inlineCode",{parentName:"li"},"compose")," Env API to apply the compiler override transformer and add Babel as a transpiler in the environment")),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-typescript",metastring:"{3,5,10-12,15,17-18,22-23}","{3,5,10-12,15,17-18,22-23}":!0},"import { EnvsMain, EnvsAspect } from '@teambit/envs';\nimport { ReactAspect, ReactMain } from '@teambit/react';\nimport { BabelAspect, BabelMain } from '@teambit/babel';\n\nconst babelConfig = require('./babel/babel.config');\n\nexport class CustomReactExtension {\n  constructor(private react: ReactMain) {}\n\n  static dependencies: any = [EnvsAspect, ReactAspect, BabelAspect];\n\n  static async provider([envs, react, babel]: [EnvsMain, ReactMain, BabelMain]) {\n    const babelCompiler = babel.createCompiler({\n      babelTransformOptions: babelConfig,\n    });\n\n    const customReactEnv = react.compose([\n      react.overrideCompiler(babelCompiler),\n      react.overrideCompilerTasks([babelCompiler.createTask()]),\n    ]);\n\n    envs.registerEnv(customReactEnv);\n    return new CustomReactExtension(react);\n  }\n}\n")),(0,r.mdx)("h3",null,"Transformers API docs"),(0,r.mdx)("p",null,"Use these APIs to customize the base React environment default configuration with your extension. ",(0,r.mdx)("a",{parentName:"p",href:"#customizing-configuration"},"Read more here"),"."),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,r.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects the transpilation carried out when rendering components on the local dev UI. To override the config used when building components, use ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideBuildTsConfig")," below."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class ReactExtension {\n// ...\n\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideTsConfig(tsconfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideBuildTsConfig(tsconfig: TsConfigSourceFile): EnvTransformer")),(0,r.mdx)("p",null,"Merges the environment's default TypeScript configuration with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://www.typescriptlang.org/handbook/tsconfig-json.html"},"typescript configuration file"),".\nThis config affects transpilation of component code during the build process, i.e. in preparation for packaging and exporting the component. To override the local ts config used when rendering components in the local UI, please use ",(0,r.mdx)("inlineCode",{parentName:"p"},"overrideTsConfig")," above."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst tsconfig = require('./typescript/tsconfig.json');\nexport class ReactExtension {\n// ...\n\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideTsConfig(tsconfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overridePreviewConfig(config: Configuration): EnvTransformer")),(0,r.mdx)("p",null,"Merges the Webpack configuration for the 'Preview' environment service, with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis webpack configuration is used for building and rendering your components for production (during ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit tag")," or ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit build"),")."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class ReactExtension {\n// ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overridePreviewConfig(webpackConfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideDevServerConfig(config: Configuration): EnvTransformer")),(0,r.mdx)("p",null,"Merges the Webpack configuration for the 'DevServer' environment service, with the contents of your ",(0,r.mdx)("a",{parentName:"p",href:"https://webpack.js.org/configuration/"},"webpack configuration file"),".\nThis configuration is used for building and rendering your components in the local dev server."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst webpackConfig = require('./webpack/webpack.config');\nexport class ReactExtension {\n// ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideDevServerConfig(webpackConfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideJestConfig(jestConfigPath: string): EnvTransformer")),(0,r.mdx)("p",null,"Merges the default configuration for the Jest test runner with the contents of your (",(0,r.mdx)("a",{parentName:"p",href:"https://jestjs.io/en/configuration"},"jest.config configuration file"),")."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst jestConfig = require.resolve('./jest/jest.config');\nexport class ReactExtension {\n// ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([\n      react.overrideJestConfig(jestConfig)\n    ]);\n}\n// ...\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideBuildPipe(tasks: BuildTask[]): EnvTransformer")),(0,r.mdx)("p",null,"This method receives an array of build tasks. It merges the provided tasks with the environment's default build pipeline (initiated either on a ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit tag")," or ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit build")," command)."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\n// Import the task\nimport { CustomTask } from './custom.task';\nexport class CustomReact {\n  // ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    // Get the environment's default build pipeline using the 'getBuildPipe' service handler\n    const reactPipe = react.env.getBuildPipe();\n    // Add the custom task to the end of the build tasks sequence.\n    const tasks = [...reactPipe, new CustomTask()];\n    const newReactEnv = react.compose([react.overrideBuildPipe(tasks)]);\n    // ...\n  }\n}\n")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overrideDependencies(dependencyPolicy: DependenciesPolicy): EnvTransformer")),(0,r.mdx)("p",null,"This method receives a dependency-policy object and merges it with the environment's default dependency policy for components using this environment.\nEach key-value pair in a dependency-policy object signifies the package and the version to be used. Use also the ",(0,r.mdx)("inlineCode",{parentName:"p"},"-")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"+")," notation to signify a module should moved between dependency types (dev, peer or standard)."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst newDependencies = {\n  dependencies: {\n    react: '-',\n  },\n  devDependencies: {\n    '@types/jest': '~26.0.9',\n  },\n  peerDependencies: {\n    react: '^17.0.2',\n  },\n};\n\nexport class CustomReact {\n  // ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([react.overrideDependencies(newDependencies)]);\n    // ...\n  }\n}\n")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"The above example shows the 'React' library being removed as a (runtime) dependency and added as a peer dependency.")),(0,r.mdx)("h4",null,(0,r.mdx)("inlineCode",{parentName:"h4"},"overridePackageJsonProps(props: PackageJsonProps): EnvTransformer")),(0,r.mdx)("p",null,"Merges the provide props with the default properties added to the ",(0,r.mdx)("inlineCode",{parentName:"p"},"package.json")," file of every package generated from components using this environment."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// ...\nconst newPackageProps = {\n  main: 'dist/{main}.js',\n  types: '{main}.ts',\n};\n\nexport class CustomReact {\n  // ...\n  static async provider([envs, react]: [EnvsMain, ReactMain]) {\n    const newReactEnv = react.compose([react.overridePackageJsonProps(newPackageProps)]);\n    // ...\n  }\n}\n"))))}l.__bit_component=a,l.isMDXComponent=!0},8015:(e,t,n)=>{"use strict";var a={id:"teambit.react/react@0.0.660",homepage:"https://bit.dev/teambit/react/react",exported:!0},r=n(8244);function o(){const e=r(n(3804));return o=function(){return e},e}Object.defineProperty(t,"__esModule",{value:!0}),t.Logo=void 0,o.__bit_component=a;const i=()=>o().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},o().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/brands/logo-react.svg"}));i.__bit_component=a,t.Logo=i},5057:e=>{"use strict";e.exports=MdxJsReact},3804:e=>{"use strict";e.exports=React},8459:e=>{"use strict";e.exports=TeambitMdxUiMdxScopeContext}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var o=t[a]={exports:{}};return e[a](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{"use strict";n.r(a),n.d(a,{compositions:()=>e,overview:()=>t});const e=[n(8015)],t=[n(264)]})(),a})()}));

package/dist/webpack/{format-webpack-messages.js → overlay/formatWebpackMessages.js}

@@ -1,4 +1,12 @@
-"use strict";
+/* eslint-disable */
+
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
 
 require("core-js/modules/es.array.iterator.js");
 
@@ -8,12 +16,6 @@ require("core-js/modules/es.string.replace.js");
 
 require("core-js/modules/es.string.trim.js");
 
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 const friendlySyntaxErrorLabel = 'Syntax error:';
 
 function isLikelyASyntaxError(message) {
@@ -21,11 +23,23 @@ function isLikelyASyntaxError(message) {
 } // Cleans up webpack error messages.
 
 
-function formatMessage(error) {
-  let message = error.message;
-  let lines = message.split('\n'); // Strip webpack-added headers off errors/warnings
+function formatMessage(message) {
+  let lines = [];
+
+  if (typeof message === 'string') {
+    lines = message.split('\n');
+  } else if ('message' in message) {
+    lines = message['message'].split('\n');
+  } else if (Array.isArray(message)) {
+    message.forEach(message => {
+      if ('message' in message) {
+        lines = message['message'].split('\n');
+      }
+    });
+  } // Strip webpack-added headers off errors/warnings
   // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
 
+
   lines = lines.filter(line => !/Module [A-z ]+\(from/.test(line)); // Transform parsing error into syntax error
   // TODO: move this to our ESLint formatter?
 
@@ -60,9 +74,9 @@ function formatMessage(error) {
   } // Add helpful message for users trying to use Sass for the first time
 
 
-  if (lines[1] && lines[1].match(/Cannot find module.+node-sass/)) {
-    lines[1] = 'To import Sass files, you first need to install node-sass.\n';
-    lines[1] += 'Run `npm install node-sass` or `yarn add node-sass` inside your workspace.';
+  if (lines[1] && lines[1].match(/Cannot find module.+sass/)) {
+    lines[1] = 'To import Sass files, you first need to install sass.\n';
+    lines[1] += 'Run `bit install sass` inside your workspace.';
   }
 
   message = lines.join('\n'); // Internal stacks are generally useless so we strip them... with the
@@ -100,4 +114,4 @@ function formatWebpackMessages(json) {
 
 module.exports = formatWebpackMessages;
 
-//# sourceMappingURL=format-webpack-messages.js.map
+//# sourceMappingURL=formatWebpackMessages.js.map

package/dist/webpack/overlay/formatWebpackMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["formatWebpackMessages.js"],"names":["friendlySyntaxErrorLabel","isLikelyASyntaxError","message","indexOf","formatMessage","lines","split","Array","isArray","forEach","filter","line","test","map","parsingError","exec","errorLine","errorColumn","errorMessage","join","replace","length","trim","splice","match","index","arr","formatWebpackMessages","json","formattedErrors","errors","formattedWarnings","warnings","result","some","module","exports"],"mappings":"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","sourcesContent":["/* eslint-disable */\n/**\n * Copyright (c) 2015-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nconst friendlySyntaxErrorLabel = 'Syntax error:';\n\nfunction isLikelyASyntaxError(message) {\n  return message.indexOf(friendlySyntaxErrorLabel) !== -1;\n}\n\n// Cleans up webpack error messages.\nfunction formatMessage(message) {\n  let lines = [];\n\n  if (typeof message === 'string') {\n    lines = message.split('\\n');\n  } else if ('message' in message) {\n    lines = message['message'].split('\\n');\n  } else if (Array.isArray(message)) {\n    message.forEach((message) => {\n      if ('message' in message) {\n        lines = message['message'].split('\\n');\n      }\n    });\n  }\n\n  // Strip webpack-added headers off errors/warnings\n  // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js\n  lines = lines.filter((line) => !/Module [A-z ]+\\(from/.test(line));\n\n  // Transform parsing error into syntax error\n  // TODO: move this to our ESLint formatter?\n  lines = lines.map((line) => {\n    const parsingError = /Line (\\d+):(?:(\\d+):)?\\s*Parsing error: (.+)$/.exec(line);\n    if (!parsingError) {\n      return line;\n    }\n    const [, errorLine, errorColumn, errorMessage] = parsingError;\n    return `${friendlySyntaxErrorLabel} ${errorMessage} (${errorLine}:${errorColumn})`;\n  });\n\n  message = lines.join('\\n');\n  // Smoosh syntax errors (commonly found in CSS)\n  message = message.replace(/SyntaxError\\s+\\((\\d+):(\\d+)\\)\\s*(.+?)\\n/g, `${friendlySyntaxErrorLabel} $3 ($1:$2)\\n`);\n  // Clean up export errors\n  message = message.replace(\n    /^.*export '(.+?)' was not found in '(.+?)'.*$/gm,\n    `Attempted import error: '$1' is not exported from '$2'.`\n  );\n  message = message.replace(\n    /^.*export 'default' \\(imported as '(.+?)'\\) was not found in '(.+?)'.*$/gm,\n    `Attempted import error: '$2' does not contain a default export (imported as '$1').`\n  );\n  message = message.replace(\n    /^.*export '(.+?)' \\(imported as '(.+?)'\\) was not found in '(.+?)'.*$/gm,\n    `Attempted import error: '$1' is not exported from '$3' (imported as '$2').`\n  );\n  lines = message.split('\\n');\n\n  // Remove leading newline\n  if (lines.length > 2 && lines[1].trim() === '') {\n    lines.splice(1, 1);\n  }\n  // Clean up file name\n  lines[0] = lines[0].replace(/^(.*) \\d+:\\d+-\\d+$/, '$1');\n\n  // Cleans up verbose \"module not found\" messages for files and packages.\n  if (lines[1] && lines[1].indexOf('Module not found: ') === 0) {\n    lines = [\n      lines[0],\n      lines[1].replace('Error: ', '').replace('Module not found: Cannot find file:', 'Cannot find file:'),\n    ];\n  }\n\n  // Add helpful message for users trying to use Sass for the first time\n  if (lines[1] && lines[1].match(/Cannot find module.+sass/)) {\n    lines[1] = 'To import Sass files, you first need to install sass.\\n';\n    lines[1] += 'Run `bit install sass` inside your workspace.';\n  }\n\n  message = lines.join('\\n');\n  // Internal stacks are generally useless so we strip them... with the\n  // exception of stacks containing `webpack:` because they're normally\n  // from user code generated by webpack. For more information see\n  // https://github.com/facebook/create-react-app/pull/1050\n  message = message.replace(/^\\s*at\\s((?!webpack:).)*:\\d+:\\d+[\\s)]*(\\n|$)/gm, ''); // at ... ...:x:y\n  message = message.replace(/^\\s*at\\s<anonymous>(\\n|$)/gm, ''); // at <anonymous>\n  lines = message.split('\\n');\n\n  // Remove duplicated newlines\n  lines = lines.filter(\n    (line, index, arr) => index === 0 || line.trim() !== '' || line.trim() !== arr[index - 1].trim()\n  );\n\n  // Reassemble the message\n  message = lines.join('\\n');\n  return message.trim();\n}\n\nfunction formatWebpackMessages(json) {\n  const formattedErrors = json.errors.map(formatMessage);\n  const formattedWarnings = json.warnings.map(formatMessage);\n  const result = { errors: formattedErrors, warnings: formattedWarnings };\n  if (result.errors.some(isLikelyASyntaxError)) {\n    // If there are any syntax errors, show just them.\n    result.errors = result.errors.filter(isLikelyASyntaxError);\n  }\n  return result;\n}\n\nmodule.exports = formatWebpackMessages;\n"]}

package/dist/webpack/{launch-editor-endpoint.js → overlay/launchEditorEndpoint.js}

@@ -1,4 +1,4 @@
-"use strict";
+/* eslint-disable */
 
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
@@ -6,7 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-// TODO: we might want to make this injectable to support DEV-time non-root URLs.
+'use strict'; // TODO: we might want to make this injectable to support DEV-time non-root URLs.
+
 module.exports = '/__open-stack-frame-in-editor';
 
-//# sourceMappingURL=launch-editor-endpoint.js.map
+//# sourceMappingURL=launchEditorEndpoint.js.map

package/dist/webpack/overlay/launchEditorEndpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["launchEditorEndpoint.js"],"names":["module","exports"],"mappings":"AAAA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA,a,CAEA;;AACAA,MAAM,CAACC,OAAP,GAAiB,+BAAjB","sourcesContent":["/* eslint-disable */\n/**\n * Copyright (c) 2015-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';\n\n// TODO: we might want to make this injectable to support DEV-time non-root URLs.\nmodule.exports = '/__open-stack-frame-in-editor';\n"]}

package/dist/webpack/{refresh.js → overlay/refreshOverlayInterop.js}

@@ -1,3 +1,6 @@
+/* eslint-disable */
+
+/** this file was copied as is from react-dev-utils/refreshOverlayInterop */
 // @remove-on-eject-begin
 
 /**
@@ -19,4 +22,4 @@ module.exports = {
   handleRuntimeError: reportRuntimeError
 };
 
-//# sourceMappingURL=refresh.js.map
+//# sourceMappingURL=refreshOverlayInterop.js.map

package/dist/webpack/overlay/refreshOverlayInterop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["refreshOverlayInterop.js"],"names":["dismissRuntimeErrors","reportRuntimeError","require","module","exports","clearRuntimeErrors","handleRuntimeError"],"mappings":"AAAA;;AACA;AAEA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAM;AAAEA,EAAAA,oBAAF;AAAwBC,EAAAA;AAAxB,IAA+CC,OAAO,CAAC,qBAAD,CAA5D;;AAEAC,MAAM,CAACC,OAAP,GAAiB;AACfC,EAAAA,kBAAkB,EAAEL,oBADL;AAEfM,EAAAA,kBAAkB,EAAEL;AAFL,CAAjB","sourcesContent":["/* eslint-disable */\n/** this file was copied as is from react-dev-utils/refreshOverlayInterop */\n\n// @remove-on-eject-begin\n/**\n * Copyright (c) 2015-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n// @remove-on-eject-end\n'use strict';\n\nconst { dismissRuntimeErrors, reportRuntimeError } = require('react-error-overlay');\n\nmodule.exports = {\n  clearRuntimeErrors: dismissRuntimeErrors,\n  handleRuntimeError: reportRuntimeError,\n};\n"]}

package/dist/webpack/{react-hot-dev-client.js → overlay/webpackHotDevClient.js}

@@ -1,12 +1,12 @@
-"use strict";
+/* eslint-disable */
 
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.promise.js");
-
-require("core-js/modules/web.url.js");
-
-/* eslint-disable promise/catch-or-return */
+/*
+ * this file was copied as is from `react-dev-utils/webpackHotDevClient`
+ * and adjusted for our socket url.
+ *
+ * we use just set process.env.WDS_* with the EnvironmentPlugin or DefinePlugin
+ * once we get react-error-overlay up and running again
+ */
 
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
@@ -14,20 +14,33 @@ require("core-js/modules/web.url.js");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const stripAnsi = require('strip-ansi');
+'use strict'; // This alternative WebpackDevServer combines the functionality of:
+// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
+// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
+// It only supports their simplest configuration (hot updates on same server).
+// It makes some opinionated choices on top, like adding a syntax error overlay
+// that looks similar to our console output. The error overlay is inspired by:
+// https://github.com/glenjamin/webpack-hot-middleware
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/web.url.js");
+
+var stripAnsi = require('strip-ansi');
 
-const ErrorOverlay = require('react-error-overlay');
+var url = require('url');
 
-const url = require('url');
+var launchEditorEndpoint = require('./launchEditorEndpoint');
 
-const launchEditorEndpoint = require('./launch-editor-endpoint');
+var formatWebpackMessages = require('./formatWebpackMessages');
 
-const formatWebpackMessages = require('./format-webpack-messages');
+var ErrorOverlay = require('react-error-overlay');
 
 ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
   // Keep this sync with errorOverlayMiddleware.js
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-  fetch(`${launchEditorEndpoint}?fileName=${window.encodeURIComponent(errorLocation.fileName)}&lineNumber=${window.encodeURIComponent(errorLocation.lineNumber || 1)}&colNumber=${window.encodeURIComponent(errorLocation.colNumber || 1)}`);
+  fetch(launchEditorEndpoint + '?fileName=' + window.encodeURIComponent(errorLocation.fileName) + '&lineNumber=' + window.encodeURIComponent(errorLocation.lineNumber || 1) + '&colNumber=' + window.encodeURIComponent(errorLocation.colNumber || 1));
 }); // We need to keep track of if there has been a runtime error.
 // Essentially, we cannot guarantee application state was not corrupted by the
 // runtime error. To prevent confusing behavior, we forcibly reload the entire
@@ -35,12 +48,11 @@ ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
 // change).
 // See https://github.com/facebook/create-react-app/issues/3096
 
-let hadRuntimeError = false;
+var hadRuntimeError = false;
 ErrorOverlay.startReportingRuntimeErrors({
-  onError() {
+  onError: function () {
     hadRuntimeError = true;
   },
-
   filename: '/static/js/bundle.js'
 });
 
@@ -49,42 +61,36 @@ if (module.hot && typeof module.hot.dispose === 'function') {
     // TODO: why do we need this?
     ErrorOverlay.stopReportingRuntimeErrors();
   });
-} // Connect to WebpackDevServer via a socket.
-
+}
 
 const querystring = module.id.substring(module.id.indexOf('?'));
-const urlParams = new URLSearchParams(querystring);
-const connection = new WebSocket(url.format({
+const urlParams = new URLSearchParams(querystring); // Connect to WebpackDevServer via a socket.
+
+var connection = new WebSocket(url.format({
   protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
   hostname: window.location.hostname,
   port: window.location.port,
-  // Hardcoded in WebpackDevServer
-  pathname: urlParams.get('sockPath') || '/sockjs-node',
-  // pathname: '_hmr/teambit.bad-jokes/extensions/harmony-react',
+  pathname: urlParams.get('sockPath') || '/ws',
   slashes: true
 })); // Unlike WebpackDevServer client, we won't try to reconnect
 // to avoid spamming the console. Disconnect usually happens
 // when developer stops the server.
 
 connection.onclose = function () {
-  // eslint-disable-next-line no-console
   if (typeof console !== 'undefined' && typeof console.info === 'function') {
-    // eslint-disable-next-line no-console
     console.info('The development server has disconnected.\nRefresh the page if necessary.');
   }
 }; // Remember some state related to hot module replacement.
 
 
-let isFirstCompilation = true;
-let mostRecentCompilationHash = null;
-let hasCompileErrors = false;
+var isFirstCompilation = true;
+var mostRecentCompilationHash = null;
+var hasCompileErrors = false;
 
 function clearOutdatedErrors() {
   // Clean up outdated compile errors, if any.
-  // eslint-disable-next-line no-console
   if (typeof console !== 'undefined' && typeof console.clear === 'function') {
     if (hasCompileErrors) {
-      // eslint-disable-next-line no-console
       console.clear();
     }
   }
@@ -93,7 +99,7 @@ function clearOutdatedErrors() {
 
 function handleSuccess() {
   clearOutdatedErrors();
-  const isHotUpdate = !isFirstCompilation;
+  var isHotUpdate = !isFirstCompilation;
   isFirstCompilation = false;
   hasCompileErrors = false; // Attempt to apply hot updates or reload.
 
@@ -109,26 +115,23 @@ function handleSuccess() {
 
 function handleWarnings(warnings) {
   clearOutdatedErrors();
-  const isHotUpdate = !isFirstCompilation;
+  var isHotUpdate = !isFirstCompilation;
   isFirstCompilation = false;
   hasCompileErrors = false;
 
   function printWarnings() {
     // Print warnings to the console.
-    const formatted = formatWebpackMessages({
-      warnings,
+    var formatted = formatWebpackMessages({
+      warnings: warnings,
       errors: []
-    }); // eslint-disable-next-line no-console
+    });
 
     if (typeof console !== 'undefined' && typeof console.warn === 'function') {
-      // eslint-disable-next-line no-plusplus
-      for (let i = 0; i < formatted.warnings.length; i++) {
+      for (var i = 0; i < formatted.warnings.length; i++) {
         if (i === 5) {
-          // eslint-disable-next-line
           console.warn('There were more warnings in other files.\n' + 'You can find a complete log in the terminal.');
           break;
-        } // eslint-disable-next-line no-console
-
+        }
 
         console.warn(stripAnsi(formatted.warnings[i]));
       }
@@ -152,18 +155,15 @@ function handleErrors(errors) {
   isFirstCompilation = false;
   hasCompileErrors = true; // "Massage" webpack messages.
 
-  const formatted = formatWebpackMessages({
-    errors,
+  var formatted = formatWebpackMessages({
+    errors: errors,
     warnings: []
   }); // Only show the first error.
 
   ErrorOverlay.reportBuildError(formatted.errors[0]); // Also log them to the console.
-  // eslint-disable-next-line no-console
 
   if (typeof console !== 'undefined' && typeof console.error === 'function') {
-    // eslint-disable-next-line no-plusplus
-    for (let i = 0; i < formatted.errors.length; i++) {
-      // eslint-disable-next-line no-console
+    for (var i = 0; i < formatted.errors.length; i++) {
       console.error(stripAnsi(formatted.errors[i]));
     }
   } // Do not attempt to reload now.
@@ -185,7 +185,7 @@ function handleAvailableHash(hash) {
 
 
 connection.onmessage = function (e) {
-  const message = JSON.parse(e.data);
+  var message = JSON.parse(e.data);
 
   switch (message.type) {
     case 'hash':
@@ -226,6 +226,17 @@ function isUpdateAvailable() {
 
 function canApplyUpdates() {
   return module.hot.status() === 'idle';
+}
+
+function canAcceptErrors() {
+  // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
+  const hasReactRefresh = process.env.FAST_REFRESH;
+  const status = module.hot.status(); // React refresh can handle hot-reloading over errors.
+  // However, when hot-reload status is abort or fail,
+  // it indicates the current update cannot be applied safely,
+  // and thus we should bail out to a forced reload for consistency.
+
+  return hasReactRefresh && ['abort', 'fail'].indexOf(status) === -1;
 } // Attempt to update code on the fly, fall back to a hard reload.
 
 
@@ -241,7 +252,14 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    if (err || !updatedModules || hadRuntimeError) {
+    const haveErrors = err || hadRuntimeError; // When there is no error but updatedModules is unavailable,
+    // it indicates a critical failure in hot-reloading,
+    // e.g. server is not ready to serve new bundle,
+    // and hence we need to do a forced reload.
+
+    const needsForcedReload = !err && !updatedModules;
+
+    if (haveErrors && !canAcceptErrors() || needsForcedReload) {
       window.location.reload();
       return;
     }
@@ -258,7 +276,7 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   } // https://webpack.github.io/docs/hot-module-replacement.html#check
 
 
-  const result = module.hot.check(
+  var result = module.hot.check(
   /* autoApply */
   true, handleApplyUpdates); // // webpack 2 returns a Promise instead of invoking a callback
 
@@ -271,4 +289,4 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 }
 
-//# sourceMappingURL=react-hot-dev-client.js.map
+//# sourceMappingURL=webpackHotDevClient.js.map

package/dist/webpack/overlay/webpackHotDevClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpackHotDevClient.js"],"names":["stripAnsi","require","url","launchEditorEndpoint","formatWebpackMessages","ErrorOverlay","setEditorHandler","editorHandler","errorLocation","fetch","window","encodeURIComponent","fileName","lineNumber","colNumber","hadRuntimeError","startReportingRuntimeErrors","onError","filename","module","hot","dispose","stopReportingRuntimeErrors","querystring","id","substring","indexOf","urlParams","URLSearchParams","connection","WebSocket","format","protocol","location","hostname","port","pathname","get","slashes","onclose","console","info","isFirstCompilation","mostRecentCompilationHash","hasCompileErrors","clearOutdatedErrors","clear","handleSuccess","isHotUpdate","tryApplyUpdates","onHotUpdateSuccess","tryDismissErrorOverlay","handleWarnings","warnings","printWarnings","formatted","errors","warn","i","length","onSuccessfulHotUpdate","handleErrors","reportBuildError","error","dismissBuildError","handleAvailableHash","hash","onmessage","e","message","JSON","parse","data","type","reload","isUpdateAvailable","__webpack_hash__","canApplyUpdates","status","canAcceptErrors","hasReactRefresh","process","env","FAST_REFRESH","handleApplyUpdates","err","updatedModules","haveErrors","needsForcedReload","result","check","then"],"mappings":"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","sourcesContent":["/* eslint-disable */\n/*\n * this file was copied as is from `react-dev-utils/webpackHotDevClient`\n * and adjusted for our socket url.\n *\n * we use just set process.env.WDS_* with the EnvironmentPlugin or DefinePlugin\n * once we get react-error-overlay up and running again\n */\n\n/**\n * Copyright (c) 2015-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\n// This alternative WebpackDevServer combines the functionality of:\n// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js\n// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js\n\n// It only supports their simplest configuration (hot updates on same server).\n// It makes some opinionated choices on top, like adding a syntax error overlay\n// that looks similar to our console output. The error overlay is inspired by:\n// https://github.com/glenjamin/webpack-hot-middleware\n\nvar stripAnsi = require('strip-ansi');\nvar url = require('url');\nvar launchEditorEndpoint = require('./launchEditorEndpoint');\nvar formatWebpackMessages = require('./formatWebpackMessages');\nvar ErrorOverlay = require('react-error-overlay');\n\nErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {\n  // Keep this sync with errorOverlayMiddleware.js\n  fetch(\n    launchEditorEndpoint +\n      '?fileName=' +\n      window.encodeURIComponent(errorLocation.fileName) +\n      '&lineNumber=' +\n      window.encodeURIComponent(errorLocation.lineNumber || 1) +\n      '&colNumber=' +\n      window.encodeURIComponent(errorLocation.colNumber || 1)\n  );\n});\n\n// We need to keep track of if there has been a runtime error.\n// Essentially, we cannot guarantee application state was not corrupted by the\n// runtime error. To prevent confusing behavior, we forcibly reload the entire\n// application. This is handled below when we are notified of a compile (code\n// change).\n// See https://github.com/facebook/create-react-app/issues/3096\nvar hadRuntimeError = false;\nErrorOverlay.startReportingRuntimeErrors({\n  onError: function () {\n    hadRuntimeError = true;\n  },\n  filename: '/static/js/bundle.js',\n});\n\nif (module.hot && typeof module.hot.dispose === 'function') {\n  module.hot.dispose(function () {\n    // TODO: why do we need this?\n    ErrorOverlay.stopReportingRuntimeErrors();\n  });\n}\n\nconst querystring = module.id.substring(module.id.indexOf('?'));\nconst urlParams = new URLSearchParams(querystring);\n\n// Connect to WebpackDevServer via a socket.\nvar connection = new WebSocket(\n  url.format({\n    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',\n    hostname: window.location.hostname,\n    port: window.location.port,\n    pathname: urlParams.get('sockPath') || '/ws',\n    slashes: true,\n  })\n);\n\n// Unlike WebpackDevServer client, we won't try to reconnect\n// to avoid spamming the console. Disconnect usually happens\n// when developer stops the server.\nconnection.onclose = function () {\n  if (typeof console !== 'undefined' && typeof console.info === 'function') {\n    console.info('The development server has disconnected.\\nRefresh the page if necessary.');\n  }\n};\n\n// Remember some state related to hot module replacement.\nvar isFirstCompilation = true;\nvar mostRecentCompilationHash = null;\nvar hasCompileErrors = false;\n\nfunction clearOutdatedErrors() {\n  // Clean up outdated compile errors, if any.\n  if (typeof console !== 'undefined' && typeof console.clear === 'function') {\n    if (hasCompileErrors) {\n      console.clear();\n    }\n  }\n}\n\n// Successful compilation.\nfunction handleSuccess() {\n  clearOutdatedErrors();\n\n  var isHotUpdate = !isFirstCompilation;\n  isFirstCompilation = false;\n  hasCompileErrors = false;\n\n  // Attempt to apply hot updates or reload.\n  if (isHotUpdate) {\n    tryApplyUpdates(function onHotUpdateSuccess() {\n      // Only dismiss it when we're sure it's a hot update.\n      // Otherwise it would flicker right before the reload.\n      tryDismissErrorOverlay();\n    });\n  }\n}\n\n// Compilation with warnings (e.g. ESLint).\nfunction handleWarnings(warnings) {\n  clearOutdatedErrors();\n\n  var isHotUpdate = !isFirstCompilation;\n  isFirstCompilation = false;\n  hasCompileErrors = false;\n\n  function printWarnings() {\n    // Print warnings to the console.\n    var formatted = formatWebpackMessages({\n      warnings: warnings,\n      errors: [],\n    });\n\n    if (typeof console !== 'undefined' && typeof console.warn === 'function') {\n      for (var i = 0; i < formatted.warnings.length; i++) {\n        if (i === 5) {\n          console.warn('There were more warnings in other files.\\n' + 'You can find a complete log in the terminal.');\n          break;\n        }\n        console.warn(stripAnsi(formatted.warnings[i]));\n      }\n    }\n  }\n\n  printWarnings();\n\n  // Attempt to apply hot updates or reload.\n  if (isHotUpdate) {\n    tryApplyUpdates(function onSuccessfulHotUpdate() {\n      // Only dismiss it when we're sure it's a hot update.\n      // Otherwise it would flicker right before the reload.\n      tryDismissErrorOverlay();\n    });\n  }\n}\n\n// Compilation with errors (e.g. syntax error or missing modules).\nfunction handleErrors(errors) {\n  clearOutdatedErrors();\n\n  isFirstCompilation = false;\n  hasCompileErrors = true;\n\n  // \"Massage\" webpack messages.\n  var formatted = formatWebpackMessages({\n    errors: errors,\n    warnings: [],\n  });\n\n  // Only show the first error.\n  ErrorOverlay.reportBuildError(formatted.errors[0]);\n\n  // Also log them to the console.\n  if (typeof console !== 'undefined' && typeof console.error === 'function') {\n    for (var i = 0; i < formatted.errors.length; i++) {\n      console.error(stripAnsi(formatted.errors[i]));\n    }\n  }\n\n  // Do not attempt to reload now.\n  // We will reload on next success instead.\n}\n\nfunction tryDismissErrorOverlay() {\n  if (!hasCompileErrors) {\n    ErrorOverlay.dismissBuildError();\n  }\n}\n\n// There is a newer version of the code available.\nfunction handleAvailableHash(hash) {\n  // Update last known compilation hash.\n  mostRecentCompilationHash = hash;\n}\n\n// Handle messages from the server.\nconnection.onmessage = function (e) {\n  var message = JSON.parse(e.data);\n  switch (message.type) {\n    case 'hash':\n      handleAvailableHash(message.data);\n      break;\n    case 'still-ok':\n    case 'ok':\n      handleSuccess();\n      break;\n    case 'content-changed':\n      // Triggered when a file from `contentBase` changed.\n      window.location.reload();\n      break;\n    case 'warnings':\n      handleWarnings(message.data);\n      break;\n    case 'errors':\n      handleErrors(message.data);\n      break;\n    default:\n    // Do nothing.\n  }\n};\n\n// Is there a newer version of this code available?\nfunction isUpdateAvailable() {\n  /* globals __webpack_hash__ */\n  // __webpack_hash__ is the hash of the current compilation.\n  // It's a global variable injected by webpack.\n  return mostRecentCompilationHash !== __webpack_hash__;\n}\n\n// webpack disallows updates in other states.\nfunction canApplyUpdates() {\n  return module.hot.status() === 'idle';\n}\n\nfunction canAcceptErrors() {\n  // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.\n  const hasReactRefresh = process.env.FAST_REFRESH;\n\n  const status = module.hot.status();\n  // React refresh can handle hot-reloading over errors.\n  // However, when hot-reload status is abort or fail,\n  // it indicates the current update cannot be applied safely,\n  // and thus we should bail out to a forced reload for consistency.\n  return hasReactRefresh && ['abort', 'fail'].indexOf(status) === -1;\n}\n\n// Attempt to update code on the fly, fall back to a hard reload.\nfunction tryApplyUpdates(onHotUpdateSuccess) {\n  if (!module.hot) {\n    // HotModuleReplacementPlugin is not in webpack configuration.\n    window.location.reload();\n    return;\n  }\n\n  if (!isUpdateAvailable() || !canApplyUpdates()) {\n    return;\n  }\n\n  function handleApplyUpdates(err, updatedModules) {\n    const haveErrors = err || hadRuntimeError;\n    // When there is no error but updatedModules is unavailable,\n    // it indicates a critical failure in hot-reloading,\n    // e.g. server is not ready to serve new bundle,\n    // and hence we need to do a forced reload.\n    const needsForcedReload = !err && !updatedModules;\n    if ((haveErrors && !canAcceptErrors()) || needsForcedReload) {\n      window.location.reload();\n      return;\n    }\n\n    if (typeof onHotUpdateSuccess === 'function') {\n      // Maybe we want to do something.\n      onHotUpdateSuccess();\n    }\n\n    if (isUpdateAvailable()) {\n      // While we were updating, there was a new update! Do it again.\n      tryApplyUpdates();\n    }\n  }\n\n  // https://webpack.github.io/docs/hot-module-replacement.html#check\n  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);\n\n  // // webpack 2 returns a Promise instead of invoking a callback\n  if (result && result.then) {\n    result.then(\n      function (updatedModules) {\n        handleApplyUpdates(null, updatedModules);\n      },\n      function (err) {\n        handleApplyUpdates(err, null);\n      }\n    );\n  }\n}\n"]}

package/dist/webpack/webpack.config.component.dev.js

@@ -108,10 +108,9 @@ function _default(workDir, envId) {
     new (_reactRefreshWebpackPlugin().default)({
       overlay: {
         sockPath: `_hmr/${envId}`,
-        // TODO: check why webpackHotDevClient and react-error-overlay are not responding for runtime
-        // errors
-        entry: require.resolve('./react-hot-dev-client'),
-        module: require.resolve('./refresh')
+        // TODO - react-error-overlay not showing runtime errors - https://github.com/teambit/bit/issues/5452
+        entry: require.resolve('./overlay/webpackHotDevClient'),
+        module: require.resolve('./overlay/refreshOverlayInterop')
       },
       // we use '@pmmmwh/react-refresh-webpack-plugin/loader' directly where relevant.
       // FYI, original defaults of the plugin are: