@teambit/react 0.0.668 → 0.0.669

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}}},3841:(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},1840:(e,t,n)=>{"use strict";var a={id:"teambit.react/react@0.0.668",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(1840)],t=[n(3841)]})(),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}}},6457:(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},3763:(e,t,n)=>{"use strict";var a={id:"teambit.react/react@0.0.669",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(3763)],t=[n(6457)]})(),a})()}));

package/dist/webpack/webpack.config.base.js

@@ -332,6 +332,9 @@ function _default(isEnvProduction = false) {
             dataUrlCondition: {
               maxSize: imageInlineSizeLimit
             }
+          },
+          generator: {
+            filename: 'static/images/[hash][ext][query]'
           }
         }, {
           // loads svg as both inlineUrl and react component, like:
@@ -354,6 +357,12 @@ function _default(isEnvProduction = false) {
             type: 'asset' // export a data URI or emit a separate file
 
           }]
+        }, {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          type: 'asset',
+          generator: {
+            filename: 'static/fonts/[hash][ext][query]'
+          }
         }, // "file" loader makes sure those assets get served by WebpackDevServer.
         // When you `import` an asset, you get its (virtual) filename.
         // In production, they would get copied to the `build` folder.
@@ -365,6 +374,9 @@ function _default(isEnvProduction = false) {
           // Also exclude `html` and `json` extensions so they get processed
           // by webpacks internal loaders.
           exclude: [/\.(js|mjs|cjs|jsx|ts|tsx)$/, /\.html$/, /\.mdx?/, /\.json$/, /\.css$/],
+          generator: {
+            filename: 'static/[hash][ext][query]'
+          },
           type: 'asset'
         } // ** STOP ** Are you adding a new loader?
         // Make sure to add the new loader(s) before the "type:asset" loader.

package/dist/webpack/webpack.config.base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack.config.base.ts"],"names":["styleLoaderPath","require","resolve","moduleFileExtensions","shouldUseSourceMap","process","env","GENERATE_SOURCEMAP","imageInlineSizeLimit","parseInt","IMAGE_INLINE_SIZE_LIMIT","isEnvProduction","isEnvProductionProfile","argv","includes","baseStyleLoadersOptions","injectingLoader","MiniCssExtractPlugin","loader","cssLoaderPath","postCssLoaderPath","postCssConfig","extensions","map","ext","alias","module","strictExportPresence","rules","test","fullySpecified","oneOf","stylesRegexps","cssNoModulesRegex","use","cssLoaderOpts","importLoaders","sourceMap","sideEffects","exclude","options","babelrc","configFile","customize","presets","cacheDirectory","cacheCompression","compact","cssModuleRegex","modules","getLocalIdent","getCSSModuleLocalIdent","sassNoModuleRegex","preProcessOptions","resolveUrlLoaderPath","preProcessorPath","sassModuleRegex","lessNoModuleRegex","lessModuleRegex","type","parser","dataUrlCondition","maxSize","dependency","not","titleProp","ref","plugins","filename","chunkFilename","IgnorePlugin","resourceRegExp","contextRegExp","filter","Boolean","performance"],"mappings":"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","sourcesContent":["import { merge } from 'lodash';\nimport 'style-loader';\nimport MiniCssExtractPlugin from 'mini-css-extract-plugin';\nimport getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';\nimport { Configuration, IgnorePlugin } from 'webpack';\nimport * as stylesRegexps from '@teambit/webpack.modules.style-regexps';\nimport { generateStyleLoaders } from '@teambit/webpack.modules.generate-style-loaders';\nimport { postCssConfig } from './postcss.config';\n// Make sure the bit-react-transformer is a dependency\n// TODO: remove it once we can set policy from component to component then set it via the component.json\nimport '@teambit/react.babel.bit-react-transformer';\n// Make sure the mdx-loader is a dependency\nimport '@teambit/mdx.modules.mdx-loader';\n\nconst styleLoaderPath = require.resolve('style-loader');\n\nconst moduleFileExtensions = [\n  'web.mjs',\n  'mjs',\n  'web.js',\n  'js',\n  'cjs',\n  'web.ts',\n  'ts',\n  'web.tsx',\n  'tsx',\n  'json',\n  'web.jsx',\n  'jsx',\n  'mdx',\n  'md',\n];\n\n// Source maps are resource heavy and can cause out of memory issue for large source files.\nconst shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';\n\nconst imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\nexport default function (isEnvProduction = false): Configuration {\n  // Variable used for enabling profiling in Production\n  // passed into alias object. Uses a flag if passed into the build command\n  const isEnvProductionProfile = process.argv.includes('--profile');\n\n  const baseStyleLoadersOptions = {\n    injectingLoader: isEnvProduction ? MiniCssExtractPlugin.loader : styleLoaderPath,\n    cssLoaderPath: require.resolve('css-loader'),\n    postCssLoaderPath: require.resolve('postcss-loader'),\n    postCssConfig,\n  };\n\n  // We will provide `paths.publicUrlOrPath` to our app\n  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.\n  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.\n  // Get environment variables to inject into our app.\n  // const env = getClientEnvironment(publicUrlOrPath.slice(0, -1));\n\n  return {\n    // TODO: make the dev tool according to shouldUseSourceMap and isEnvProduction\n    // devtool: 'inline-source-map',\n    resolve: {\n      // These are the reasonable defaults supported by the Node ecosystem.\n      // We also include JSX as a common component filename extension to support\n      // some tools, although we do not recommend using it, see:\n      // https://github.com/facebook/create-react-app/issues/290\n      // `web` extension prefixes have been added for better support\n      // for React Native Web.\n      extensions: moduleFileExtensions.map((ext) => `.${ext}`),\n\n      alias: {\n        'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime.js'),\n        'react/jsx-runtime': require.resolve('react/jsx-runtime.js'),\n        // Support React Native Web\n        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/\n        // TODO: @uri please remember to remove after publishing evangelist and base-ui\n\n        'react-dom/server': require.resolve('react-dom/server'),\n        // Allows for better profiling with ReactDevTools\n        ...(isEnvProductionProfile && {\n          'react-dom$': 'react-dom/profiling',\n          'scheduler/tracing': 'scheduler/tracing-profiling',\n        }),\n      },\n    },\n    module: {\n      strictExportPresence: true,\n      rules: [\n        {\n          test: /\\.m?js/,\n          resolve: {\n            fullySpecified: false,\n          },\n        },\n        {\n          // \"oneOf\" will traverse all following loaders until one will\n          // match the requirements. When no loader matches it will fall\n          // back to the \"file\" loader at the end of the loader list.\n          oneOf: [\n            // \"postcss\" loader applies autoprefixer to our CSS.\n            // \"css\" loader resolves paths in CSS and adds assets as dependencies.\n            // \"style\" loader turns CSS into JS modules that inject <style> tags.\n            // In production, we use MiniCSSExtractPlugin to extract that CSS\n            // to a file, but in development \"style\" loader enables hot editing\n            // of CSS.\n            // By default we support CSS Modules with the extension .module.css\n            {\n              test: stylesRegexps.cssNoModulesRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                  },\n                })\n              ),\n              // Don't consider CSS imports dead code even if the\n              // containing package claims to have no side effects.\n              // Remove this when webpack adds a warning or an error for this.\n              // See https://github.com/webpack/webpack/issues/6571\n              sideEffects: true,\n            },\n\n            // Process application JS with Babel.\n            // The preset includes JSX, Flow, TypeScript, and some ESnext features.\n            {\n              test: /\\.(js|mjs|jsx|ts|tsx)$/,\n              exclude: [/node_modules/, /\\/dist\\//],\n              // consider: limit loader to files only in a capsule that has bitid in package.json\n              // descriptionData: { componentId: ComponentID.isValidObject },\n              // // or\n              // include: capsulePaths\n              loader: require.resolve('babel-loader'),\n              options: {\n                babelrc: false,\n                configFile: false,\n                customize: require.resolve('babel-preset-react-app/webpack-overrides'),\n                presets: [require.resolve('@babel/preset-react')],\n                // This is a feature of `babel-loader` for webpack (not Babel itself).\n                // It enables caching results in ./node_modules/.cache/babel-loader/\n                // directory for faster rebuilds.\n                cacheDirectory: true,\n                // See #6846 for context on why cacheCompression is disabled\n                cacheCompression: false,\n                compact: isEnvProduction,\n              },\n            },\n            // Process any JS outside of the app with Babel.\n            // Unlike the application JS, we only compile the standard ES features.\n            // Probably not needed in our use case\n            // {\n            //   test: /\\.(js|mjs)$/,\n            //   exclude: /@babel(?:\\/|\\\\{1,2})runtime/,\n            //   loader: require.resolve('babel-loader'),\n            //   options: {\n            //     babelrc: false,\n            //     configFile: false,\n            //     compact: false,\n            //     presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],\n            //     cacheDirectory: true,\n            //     // See #6846 for context on why cacheCompression is disabled\n            //     cacheCompression: false,\n\n            //     // Babel sourcemaps are needed for debugging into node_modules\n            //     // code.  Without the options below, debuggers like VSCode\n            //     // show incorrect code and set breakpoints on the wrong lines.\n            //     sourceMaps: shouldUseSourceMap,\n            //     inputSourceMap: shouldUseSourceMap,\n            //   },\n            // },\n            // MDX support (move to the mdx aspect and extend from there)\n            {\n              test: /\\.mdx?$/,\n              exclude: [/node_modules/],\n              use: [\n                {\n                  loader: require.resolve('babel-loader'),\n                  options: {\n                    babelrc: false,\n                    configFile: false,\n                    presets: [require.resolve('@babel/preset-react'), require.resolve('@babel/preset-env')],\n                  },\n                },\n                {\n                  loader: require.resolve('@teambit/mdx.modules.mdx-loader'),\n                },\n              ],\n            },\n            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)\n            // using the extension .module.css\n            {\n              test: stylesRegexps.cssModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                    modules: {\n                      getLocalIdent: getCSSModuleLocalIdent,\n                    },\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                })\n              ),\n            },\n            // Opt-in support for SASS (using .scss or .sass extensions).\n            // By default we support SASS Modules with the\n            // extensions .module.scss or .module.sass\n            {\n              test: stylesRegexps.sassNoModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 3,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('sass-loader'),\n                  },\n                })\n              ),\n              // Don't consider CSS imports dead code even if the\n              // containing package claims to have no side effects.\n              // Remove this when webpack adds a warning or an error for this.\n              // See https://github.com/webpack/webpack/issues/6571\n              sideEffects: true,\n            },\n            // Adds support for CSS Modules, but using SASS\n            // using the extension .module.scss or .module.sass\n            {\n              test: stylesRegexps.sassModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 3,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                    modules: {\n                      getLocalIdent: getCSSModuleLocalIdent,\n                    },\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('sass-loader'),\n                  },\n                })\n              ),\n            },\n            {\n              test: stylesRegexps.lessNoModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('less-loader'),\n                  },\n                })\n              ),\n              // Don't consider CSS imports dead code even if the\n              // containing package claims to have no side effects.\n              // Remove this when webpack adds a warning or an error for this.\n              // See https://github.com/webpack/webpack/issues/6571\n              sideEffects: true,\n            },\n            {\n              test: stylesRegexps.lessModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                    modules: {\n                      getLocalIdent: getCSSModuleLocalIdent,\n                    },\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('less-loader'),\n                  },\n                })\n              ),\n            },\n            {\n              test: [/\\.bmp$/, /\\.gif$/, /\\.jpe?g$/, /\\.png$/],\n              type: 'asset',\n              parser: {\n                dataUrlCondition: {\n                  maxSize: imageInlineSizeLimit,\n                },\n              },\n            },\n            {\n              // loads svg as both inlineUrl and react component, like:\n              // import starUrl, { ReactComponent as StarIcon } from './star.svg';\n              // (remove when there is native support for both opitons from webpack5 / svgr)\n              test: /\\.svg$/,\n              oneOf: [\n                {\n                  dependency: { not: ['url'] }, // exclude new URL calls\n                  use: [\n                    {\n                      loader: require.resolve('@svgr/webpack'),\n                      options: { titleProp: true, ref: true },\n                    },\n                    require.resolve('new-url-loader'),\n                  ],\n                },\n                {\n                  type: 'asset', // export a data URI or emit a separate file\n                },\n              ],\n            },\n            // \"file\" loader makes sure those assets get served by WebpackDevServer.\n            // When you `import` an asset, you get its (virtual) filename.\n            // In production, they would get copied to the `build` folder.\n            // This loader doesn't use a \"test\" so it will catch all modules\n            // that fall through the other loaders.\n            {\n              // Exclude `js` files to keep \"css\" loader working as it injects\n              // its runtime that would otherwise be processed through \"file\" loader.\n              // Also exclude `html` and `json` extensions so they get processed\n              // by webpacks internal loaders.\n              exclude: [/\\.(js|mjs|cjs|jsx|ts|tsx)$/, /\\.html$/, /\\.mdx?/, /\\.json$/, /\\.css$/],\n              type: 'asset',\n            },\n            // ** STOP ** Are you adding a new loader?\n            // Make sure to add the new loader(s) before the \"type:asset\" loader.\n          ],\n        },\n      ],\n    },\n    // @ts-ignore\n    plugins: [\n      isEnvProduction &&\n        new MiniCssExtractPlugin({\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: 'static/css/[name].[contenthash:8].css',\n          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',\n        }),\n      // Moment.js is an extremely popular library that bundles large locale files\n      // by default due to how webpack interprets its code. This is a practical\n      // solution that requires the user to opt into importing specific locales.\n      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack\n      // You can remove this if you don't use Moment.js:\n      new IgnorePlugin({\n        resourceRegExp: /^\\.\\/locale$/,\n        contextRegExp: /moment$/,\n      }),\n    ].filter(Boolean),\n    // Turn off performance processing because we utilize\n    // our own hints via the FileSizeReporter\n    performance: false,\n  };\n}\n"]}
+{"version":3,"sources":["webpack.config.base.ts"],"names":["styleLoaderPath","require","resolve","moduleFileExtensions","shouldUseSourceMap","process","env","GENERATE_SOURCEMAP","imageInlineSizeLimit","parseInt","IMAGE_INLINE_SIZE_LIMIT","isEnvProduction","isEnvProductionProfile","argv","includes","baseStyleLoadersOptions","injectingLoader","MiniCssExtractPlugin","loader","cssLoaderPath","postCssLoaderPath","postCssConfig","extensions","map","ext","alias","module","strictExportPresence","rules","test","fullySpecified","oneOf","stylesRegexps","cssNoModulesRegex","use","cssLoaderOpts","importLoaders","sourceMap","sideEffects","exclude","options","babelrc","configFile","customize","presets","cacheDirectory","cacheCompression","compact","cssModuleRegex","modules","getLocalIdent","getCSSModuleLocalIdent","sassNoModuleRegex","preProcessOptions","resolveUrlLoaderPath","preProcessorPath","sassModuleRegex","lessNoModuleRegex","lessModuleRegex","type","parser","dataUrlCondition","maxSize","generator","filename","dependency","not","titleProp","ref","plugins","chunkFilename","IgnorePlugin","resourceRegExp","contextRegExp","filter","Boolean","performance"],"mappings":"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","sourcesContent":["import { merge } from 'lodash';\nimport 'style-loader';\nimport MiniCssExtractPlugin from 'mini-css-extract-plugin';\nimport getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';\nimport { Configuration, IgnorePlugin } from 'webpack';\nimport * as stylesRegexps from '@teambit/webpack.modules.style-regexps';\nimport { generateStyleLoaders } from '@teambit/webpack.modules.generate-style-loaders';\nimport { postCssConfig } from './postcss.config';\n// Make sure the bit-react-transformer is a dependency\n// TODO: remove it once we can set policy from component to component then set it via the component.json\nimport '@teambit/react.babel.bit-react-transformer';\n// Make sure the mdx-loader is a dependency\nimport '@teambit/mdx.modules.mdx-loader';\n\nconst styleLoaderPath = require.resolve('style-loader');\n\nconst moduleFileExtensions = [\n  'web.mjs',\n  'mjs',\n  'web.js',\n  'js',\n  'cjs',\n  'web.ts',\n  'ts',\n  'web.tsx',\n  'tsx',\n  'json',\n  'web.jsx',\n  'jsx',\n  'mdx',\n  'md',\n];\n\n// Source maps are resource heavy and can cause out of memory issue for large source files.\nconst shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';\n\nconst imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\nexport default function (isEnvProduction = false): Configuration {\n  // Variable used for enabling profiling in Production\n  // passed into alias object. Uses a flag if passed into the build command\n  const isEnvProductionProfile = process.argv.includes('--profile');\n\n  const baseStyleLoadersOptions = {\n    injectingLoader: isEnvProduction ? MiniCssExtractPlugin.loader : styleLoaderPath,\n    cssLoaderPath: require.resolve('css-loader'),\n    postCssLoaderPath: require.resolve('postcss-loader'),\n    postCssConfig,\n  };\n\n  // We will provide `paths.publicUrlOrPath` to our app\n  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.\n  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.\n  // Get environment variables to inject into our app.\n  // const env = getClientEnvironment(publicUrlOrPath.slice(0, -1));\n\n  return {\n    // TODO: make the dev tool according to shouldUseSourceMap and isEnvProduction\n    // devtool: 'inline-source-map',\n    resolve: {\n      // These are the reasonable defaults supported by the Node ecosystem.\n      // We also include JSX as a common component filename extension to support\n      // some tools, although we do not recommend using it, see:\n      // https://github.com/facebook/create-react-app/issues/290\n      // `web` extension prefixes have been added for better support\n      // for React Native Web.\n      extensions: moduleFileExtensions.map((ext) => `.${ext}`),\n\n      alias: {\n        'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime.js'),\n        'react/jsx-runtime': require.resolve('react/jsx-runtime.js'),\n        // Support React Native Web\n        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/\n        // TODO: @uri please remember to remove after publishing evangelist and base-ui\n\n        'react-dom/server': require.resolve('react-dom/server'),\n        // Allows for better profiling with ReactDevTools\n        ...(isEnvProductionProfile && {\n          'react-dom$': 'react-dom/profiling',\n          'scheduler/tracing': 'scheduler/tracing-profiling',\n        }),\n      },\n    },\n    module: {\n      strictExportPresence: true,\n      rules: [\n        {\n          test: /\\.m?js/,\n          resolve: {\n            fullySpecified: false,\n          },\n        },\n        {\n          // \"oneOf\" will traverse all following loaders until one will\n          // match the requirements. When no loader matches it will fall\n          // back to the \"file\" loader at the end of the loader list.\n          oneOf: [\n            // \"postcss\" loader applies autoprefixer to our CSS.\n            // \"css\" loader resolves paths in CSS and adds assets as dependencies.\n            // \"style\" loader turns CSS into JS modules that inject <style> tags.\n            // In production, we use MiniCSSExtractPlugin to extract that CSS\n            // to a file, but in development \"style\" loader enables hot editing\n            // of CSS.\n            // By default we support CSS Modules with the extension .module.css\n            {\n              test: stylesRegexps.cssNoModulesRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                  },\n                })\n              ),\n              // Don't consider CSS imports dead code even if the\n              // containing package claims to have no side effects.\n              // Remove this when webpack adds a warning or an error for this.\n              // See https://github.com/webpack/webpack/issues/6571\n              sideEffects: true,\n            },\n\n            // Process application JS with Babel.\n            // The preset includes JSX, Flow, TypeScript, and some ESnext features.\n            {\n              test: /\\.(js|mjs|jsx|ts|tsx)$/,\n              exclude: [/node_modules/, /\\/dist\\//],\n              // consider: limit loader to files only in a capsule that has bitid in package.json\n              // descriptionData: { componentId: ComponentID.isValidObject },\n              // // or\n              // include: capsulePaths\n              loader: require.resolve('babel-loader'),\n              options: {\n                babelrc: false,\n                configFile: false,\n                customize: require.resolve('babel-preset-react-app/webpack-overrides'),\n                presets: [require.resolve('@babel/preset-react')],\n                // This is a feature of `babel-loader` for webpack (not Babel itself).\n                // It enables caching results in ./node_modules/.cache/babel-loader/\n                // directory for faster rebuilds.\n                cacheDirectory: true,\n                // See #6846 for context on why cacheCompression is disabled\n                cacheCompression: false,\n                compact: isEnvProduction,\n              },\n            },\n            // Process any JS outside of the app with Babel.\n            // Unlike the application JS, we only compile the standard ES features.\n            // Probably not needed in our use case\n            // {\n            //   test: /\\.(js|mjs)$/,\n            //   exclude: /@babel(?:\\/|\\\\{1,2})runtime/,\n            //   loader: require.resolve('babel-loader'),\n            //   options: {\n            //     babelrc: false,\n            //     configFile: false,\n            //     compact: false,\n            //     presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],\n            //     cacheDirectory: true,\n            //     // See #6846 for context on why cacheCompression is disabled\n            //     cacheCompression: false,\n\n            //     // Babel sourcemaps are needed for debugging into node_modules\n            //     // code.  Without the options below, debuggers like VSCode\n            //     // show incorrect code and set breakpoints on the wrong lines.\n            //     sourceMaps: shouldUseSourceMap,\n            //     inputSourceMap: shouldUseSourceMap,\n            //   },\n            // },\n            // MDX support (move to the mdx aspect and extend from there)\n            {\n              test: /\\.mdx?$/,\n              exclude: [/node_modules/],\n              use: [\n                {\n                  loader: require.resolve('babel-loader'),\n                  options: {\n                    babelrc: false,\n                    configFile: false,\n                    presets: [require.resolve('@babel/preset-react'), require.resolve('@babel/preset-env')],\n                  },\n                },\n                {\n                  loader: require.resolve('@teambit/mdx.modules.mdx-loader'),\n                },\n              ],\n            },\n            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)\n            // using the extension .module.css\n            {\n              test: stylesRegexps.cssModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                    modules: {\n                      getLocalIdent: getCSSModuleLocalIdent,\n                    },\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                })\n              ),\n            },\n            // Opt-in support for SASS (using .scss or .sass extensions).\n            // By default we support SASS Modules with the\n            // extensions .module.scss or .module.sass\n            {\n              test: stylesRegexps.sassNoModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 3,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('sass-loader'),\n                  },\n                })\n              ),\n              // Don't consider CSS imports dead code even if the\n              // containing package claims to have no side effects.\n              // Remove this when webpack adds a warning or an error for this.\n              // See https://github.com/webpack/webpack/issues/6571\n              sideEffects: true,\n            },\n            // Adds support for CSS Modules, but using SASS\n            // using the extension .module.scss or .module.sass\n            {\n              test: stylesRegexps.sassModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 3,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                    modules: {\n                      getLocalIdent: getCSSModuleLocalIdent,\n                    },\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('sass-loader'),\n                  },\n                })\n              ),\n            },\n            {\n              test: stylesRegexps.lessNoModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('less-loader'),\n                  },\n                })\n              ),\n              // Don't consider CSS imports dead code even if the\n              // containing package claims to have no side effects.\n              // Remove this when webpack adds a warning or an error for this.\n              // See https://github.com/webpack/webpack/issues/6571\n              sideEffects: true,\n            },\n            {\n              test: stylesRegexps.lessModuleRegex,\n              use: generateStyleLoaders(\n                merge({}, baseStyleLoadersOptions, {\n                  cssLoaderOpts: {\n                    importLoaders: 1,\n                    sourceMap: isEnvProduction || shouldUseSourceMap,\n                    modules: {\n                      getLocalIdent: getCSSModuleLocalIdent,\n                    },\n                  },\n                  shouldUseSourceMap: isEnvProduction || shouldUseSourceMap,\n                  preProcessOptions: {\n                    resolveUrlLoaderPath: require.resolve('resolve-url-loader'),\n                    preProcessorPath: require.resolve('less-loader'),\n                  },\n                })\n              ),\n            },\n            {\n              test: [/\\.bmp$/, /\\.gif$/, /\\.jpe?g$/, /\\.png$/],\n              type: 'asset',\n              parser: {\n                dataUrlCondition: {\n                  maxSize: imageInlineSizeLimit,\n                },\n              },\n              generator: {\n                filename: 'static/images/[hash][ext][query]',\n              },\n            },\n            {\n              // loads svg as both inlineUrl and react component, like:\n              // import starUrl, { ReactComponent as StarIcon } from './star.svg';\n              // (remove when there is native support for both opitons from webpack5 / svgr)\n              test: /\\.svg$/,\n              oneOf: [\n                {\n                  dependency: { not: ['url'] }, // exclude new URL calls\n                  use: [\n                    {\n                      loader: require.resolve('@svgr/webpack'),\n                      options: { titleProp: true, ref: true },\n                    },\n                    require.resolve('new-url-loader'),\n                  ],\n                },\n                {\n                  type: 'asset', // export a data URI or emit a separate file\n                },\n              ],\n            },\n            {\n              test: /\\.(woff(2)?|ttf|eot|svg)(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n              type: 'asset',\n              generator: {\n                filename: 'static/fonts/[hash][ext][query]',\n              },\n            },\n\n            // \"file\" loader makes sure those assets get served by WebpackDevServer.\n            // When you `import` an asset, you get its (virtual) filename.\n            // In production, they would get copied to the `build` folder.\n            // This loader doesn't use a \"test\" so it will catch all modules\n            // that fall through the other loaders.\n            {\n              // Exclude `js` files to keep \"css\" loader working as it injects\n              // its runtime that would otherwise be processed through \"file\" loader.\n              // Also exclude `html` and `json` extensions so they get processed\n              // by webpacks internal loaders.\n              exclude: [/\\.(js|mjs|cjs|jsx|ts|tsx)$/, /\\.html$/, /\\.mdx?/, /\\.json$/, /\\.css$/],\n              generator: {\n                filename: 'static/[hash][ext][query]',\n              },\n              type: 'asset',\n            },\n            // ** STOP ** Are you adding a new loader?\n            // Make sure to add the new loader(s) before the \"type:asset\" loader.\n          ],\n        },\n      ],\n    },\n    // @ts-ignore\n    plugins: [\n      isEnvProduction &&\n        new MiniCssExtractPlugin({\n          // Options similar to the same options in webpackOptions.output\n          // both options are optional\n          filename: 'static/css/[name].[contenthash:8].css',\n          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',\n        }),\n      // Moment.js is an extremely popular library that bundles large locale files\n      // by default due to how webpack interprets its code. This is a practical\n      // solution that requires the user to opt into importing specific locales.\n      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack\n      // You can remove this if you don't use Moment.js:\n      new IgnorePlugin({\n        resourceRegExp: /^\\.\\/locale$/,\n        contextRegExp: /moment$/,\n      }),\n    ].filter(Boolean),\n    // Turn off performance processing because we utilize\n    // our own hints via the FileSizeReporter\n    performance: false,\n  };\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.668",
+  "version": "0.0.669",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.668"
+    "version": "0.0.669"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -79,38 +79,38 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.355",
-    "@teambit/preview": "0.0.668",
+    "@teambit/preview": "0.0.669",
     "@teambit/react.ui.error-fallback": "0.0.110",
     "@teambit/react.ui.loader-fallback": "0.0.89",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.163",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/builder": "0.0.668",
-    "@teambit/bundler": "0.0.668",
-    "@teambit/compiler": "0.0.668",
+    "@teambit/builder": "0.0.669",
+    "@teambit/bundler": "0.0.669",
+    "@teambit/compiler": "0.0.669",
     "@teambit/component.modules.component-url": "0.0.123",
-    "@teambit/component": "0.0.668",
-    "@teambit/envs": "0.0.668",
-    "@teambit/eslint": "0.0.668",
-    "@teambit/formatter": "0.0.219",
-    "@teambit/jest": "0.0.668",
-    "@teambit/linter": "0.0.668",
-    "@teambit/pkg": "0.0.668",
-    "@teambit/prettier": "0.0.219",
+    "@teambit/component": "0.0.669",
+    "@teambit/envs": "0.0.669",
+    "@teambit/eslint": "0.0.669",
+    "@teambit/formatter": "0.0.220",
+    "@teambit/jest": "0.0.669",
+    "@teambit/linter": "0.0.669",
+    "@teambit/pkg": "0.0.669",
+    "@teambit/prettier": "0.0.220",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
-    "@teambit/schema": "0.0.668",
-    "@teambit/tester": "0.0.668",
-    "@teambit/typescript": "0.0.668",
-    "@teambit/webpack": "0.0.668",
-    "@teambit/workspace": "0.0.668",
-    "@teambit/application": "0.0.310",
+    "@teambit/schema": "0.0.669",
+    "@teambit/tester": "0.0.669",
+    "@teambit/typescript": "0.0.669",
+    "@teambit/webpack": "0.0.669",
+    "@teambit/workspace": "0.0.669",
+    "@teambit/application": "0.0.311",
     "@teambit/cli": "0.0.451",
-    "@teambit/dependency-resolver": "0.0.668",
-    "@teambit/generator": "0.0.668",
-    "@teambit/graphql": "0.0.668",
+    "@teambit/dependency-resolver": "0.0.669",
+    "@teambit/generator": "0.0.669",
+    "@teambit/graphql": "0.0.669",
     "@teambit/react.ui.highlighter-provider": "0.0.184",
-    "@teambit/compositions": "0.0.668",
-    "@teambit/ui": "0.0.668",
+    "@teambit/compositions": "0.0.669",
+    "@teambit/ui": "0.0.669",
     "@teambit/react.eslint-config-bit-react": "0.0.528",
     "@teambit/webpack.modules.generate-expose-loaders": "0.0.3",
     "@teambit/webpack.modules.generate-externals": "0.0.3",

package/{preview-1646709972516.js → preview-1646796119196.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.668/dist/react.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.668/dist/react.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.669/dist/react.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.669/dist/react.docs.mdx')]

package/webpack/webpack.config.base.ts

@@ -297,6 +297,9 @@ export default function (isEnvProduction = false): Configuration {
                   maxSize: imageInlineSizeLimit,
                 },
               },
+              generator: {
+                filename: 'static/images/[hash][ext][query]',
+              },
             },
             {
               // loads svg as both inlineUrl and react component, like:
@@ -319,6 +322,14 @@ export default function (isEnvProduction = false): Configuration {
                 },
               ],
             },
+            {
+              test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+              type: 'asset',
+              generator: {
+                filename: 'static/fonts/[hash][ext][query]',
+              },
+            },
+
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
             // In production, they would get copied to the `build` folder.
@@ -330,6 +341,9 @@ export default function (isEnvProduction = false): Configuration {
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
               exclude: [/\.(js|mjs|cjs|jsx|ts|tsx)$/, /\.html$/, /\.mdx?/, /\.json$/, /\.css$/],
+              generator: {
+                filename: 'static/[hash][ext][query]',
+              },
               type: 'asset',
             },
             // ** STOP ** Are you adding a new loader?