@teambit/react 0.0.881 → 0.0.882

package/artifacts/preview/teambit_react_react-preview.js

@@ -8,4 +8,4 @@ It enables you to quickly set up a dev environment that follows best practices f
 }
 `)),(0,_react2.mdx)("h2",null,"Creating Components"),(0,_react2.mdx)("p",null,"React env provides a set of component templates that can be used to speed-up and standardize your component development:"),(0,_react2.mdx)("p",null,"To list all available templates:"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",{parentName:"pre",className:"language-bash"},`bit templates
 `)),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"react")," a basic React UI component."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"react-context")," a react context component."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"react-hook")," a react hook component."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"mdx-component")," an MDX component."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"react-component-js")," a basic React component in JS."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"react-env")," boilerplate for a customized environment configuration.")),(0,_react2.mdx)("p",null,"Use any of these templates with the ",(0,_react2.mdx)("inlineCode",{parentName:"p"},"bit create")," command:"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",{parentName:"pre",className:"language-bash"},`bit create react ui/my-welcome
-`)),(0,_react2.mdx)("h2",null,"Development services and configurations"),(0,_react2.mdx)("p",null,"The table below lists ",(0,_react2.mdx)("a",{parentName:"p",href:"/dev-services/dev-services-overview"},"dev services")," that are provided by the React env. Each service handles a specific component development operation. Each is implemented by the React env, using a specific set of configurations."),(0,_react2.mdx)("p",null,"To customize and extend the React env, ",(0,_react2.mdx)("a",{parentName:"p",href:"/envs/pre-configured-envs/react/extending-react#using-your-own-react-env-extension"},"create you own React env extension"),". You can replace the Aspects used by the env, or override their configurations (use the links provided in the 'customization' column)."),(0,_react2.mdx)("table",null,(0,_react2.mdx)("thead",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"thead"},(0,_react2.mdx)("th",{parentName:"tr",align:null},"Service"),(0,_react2.mdx)("th",{parentName:"tr",align:null},"Aspect"),(0,_react2.mdx)("th",{parentName:"tr",align:null},"Default config"),(0,_react2.mdx)("th",{parentName:"tr",align:null},"Customization"))),(0,_react2.mdx)("tbody",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/compiler/compiler-overview"},"Compiler")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript"},"TypeScript")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/typescript/tsconfig.json"},"tsconfig.json")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#typescript"},"TS compilation config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/compiler/configure-env-with-compiler"},"Replace compiler"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/tester/overview"},"Tester")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/defender/jest"},"Jest")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/jest/jest.config.js"},"jest.config.js")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#jest"},"Jest config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/tester/configure-env-with-tester"},"Replace Tester"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/linter/overview"},"Linting")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/defender/eslint"},"ESLint")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/eslint/eslintrc.ts"},"eslintrc.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#eslint"},"ESLint Config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/linter/configure-env-with-linter"},"Replace Linter"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/formatter/overview"},"Formatter")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/defender/prettier"},"Prettier")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/prettier/prettier.config.js"},"prettier.config.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#prettier"},"Prettier config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/formatter/configure-env-with-formatter"},"Replace Formatter"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},"DevServer"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/webpack/webpack"},"Webpack")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.dev.ts"},"webpack.config.preview.dev.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 Webpack config (for bundling in the workspace)")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/preview/overview"},"Preview")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null}),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/preview/register-custom-preview"},"Add preview"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/packages/packages-overview"},"Package")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},"See the ",(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript/~code/typescript.main.runtime.ts"},"TypeScript Aspect")," config"),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/packages/managing-package-json#set-configuration-from-an-env"},"Add Env package config")," ",(0,_react2.mdx)("br",null)," \u2022 TypeScript's package config")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},"Bundler"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/webpack/webpack"},"Webpack")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 Webpack config (for bundling during build)")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/docs/docs-overview"},"Documentation")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/docs/index.tsx"},"Docs template")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/docs/docs-templates"},"Replace docs template"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"http://localhost:3000/docs/dev-services/builder/builder-overview"},"Builder")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"http://localhost:3000/docs/dev-services/builder/builder-overview"},"Build pipeline")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/builder/build-pipelines"},"Build pipelines"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/dependencies/dependencies-overview"},"Dependencies")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/react.env.ts"},"Env-dependencies")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/dependencies/configuring-dependencies#configuring-dependencies-from-an-env"},"Env dependencies"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/generator/generator-overview"},"Generator")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/templates/react-component.ts"},"React templates")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:""},"Add a component template"))))),(0,_react2.mdx)("h3",null,"Default React versions"),(0,_react2.mdx)("p",null,"By default, the React env sets the following dependency versions for components using it:"),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"react")," (peer dependency): ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^16.8.0 || ^17.0.0")),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"react-dom")," (peer dependency): ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^16.8.0 || ^17.0.0")),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"@types/react"),": ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^17.0.8")),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"@types/react-dom"),": ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^17.0.5")))))}MDXContent.__bit_component=__bit_component,MDXContent.isMDXComponent=!0},428:(__unused_webpack_module,exports2,__webpack_require__2)=>{"use strict";var __bit_component={id:"teambit.react/react@0.0.881",homepage:"https://bit.dev/teambit/react/react",exported:!0},_interopRequireDefault=__webpack_require__2(244);Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.Logo=void 0;function _react(){const data=_interopRequireDefault(__webpack_require__2(804));return _react=function(){return data},data}_react.__bit_component=__bit_component;const Logo=()=>_react().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},_react().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/react.svg"}));Logo.__bit_component=__bit_component,exports2.Logo=Logo},57:module2=>{"use strict";module2.exports=MdxJsReact},804:module2=>{"use strict";module2.exports=React},459:module2=>{"use strict";module2.exports=TeambitMdxUiMdxScopeContext}},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(cachedModule!==void 0)return cachedModule.exports;var module2=__webpack_module_cache__[moduleId]={exports:{}};return __webpack_modules__[moduleId](module2,module2.exports,__webpack_require__),module2.exports}__webpack_require__.d=(exports2,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports2,key)&&Object.defineProperty(exports2,key,{enumerable:!0,get:definition[key]})},__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),__webpack_require__.r=exports2=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(exports2,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports2,"__esModule",{value:!0})};var __webpack_exports__={};return(()=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{compositions:()=>compositions,compositions_metadata:()=>compositions_metadata,overview:()=>overview});var react_docs_namespaceObject={};__webpack_require__.r(react_docs_namespaceObject),__webpack_require__.d(react_docs_namespaceObject,{default:()=>MDXContent});var react_composition=__webpack_require__(428),external_React_=__webpack_require__(804),external_MdxJsReact_=__webpack_require__(57),external_TeambitMdxUiMdxScopeContext_=__webpack_require__(459),dist=__webpack_require__(906),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&(!Object.prototype.propertyIsEnumerable.call(source,key)||(target[key]=source[key]))}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}var layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return(0,external_MdxJsReact_.mdx)(MDXLayout,_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,external_MdxJsReact_.mdx)(external_TeambitMdxUiMdxScopeContext_.MDXScopeProvider,{components:{ReactOverview:dist.ZP},mdxType:"MDXScopeProvider"},(0,external_MdxJsReact_.mdx)(dist.ZP,{mdxType:"ReactOverview"})))}MDXContent.isMDXComponent=!0;const compositions=[react_composition],overview=[react_docs_namespaceObject],compositions_metadata={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),__webpack_exports__})()});
+`)),(0,_react2.mdx)("h2",null,"Development services and configurations"),(0,_react2.mdx)("p",null,"The table below lists ",(0,_react2.mdx)("a",{parentName:"p",href:"/dev-services/dev-services-overview"},"dev services")," that are provided by the React env. Each service handles a specific component development operation. Each is implemented by the React env, using a specific set of configurations."),(0,_react2.mdx)("p",null,"To customize and extend the React env, ",(0,_react2.mdx)("a",{parentName:"p",href:"/envs/pre-configured-envs/react/extending-react#using-your-own-react-env-extension"},"create you own React env extension"),". You can replace the Aspects used by the env, or override their configurations (use the links provided in the 'customization' column)."),(0,_react2.mdx)("table",null,(0,_react2.mdx)("thead",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"thead"},(0,_react2.mdx)("th",{parentName:"tr",align:null},"Service"),(0,_react2.mdx)("th",{parentName:"tr",align:null},"Aspect"),(0,_react2.mdx)("th",{parentName:"tr",align:null},"Default config"),(0,_react2.mdx)("th",{parentName:"tr",align:null},"Customization"))),(0,_react2.mdx)("tbody",{parentName:"table"},(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/compiler/compiler-overview"},"Compiler")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript"},"TypeScript")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/typescript/tsconfig.json"},"tsconfig.json")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#typescript"},"TS compilation config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/compiler/configure-env-with-compiler"},"Replace compiler"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/tester/overview"},"Tester")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/defender/jest"},"Jest")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/jest/jest.config.js"},"jest.config.js")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#jest"},"Jest config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/tester/configure-env-with-tester"},"Replace Tester"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/linter/overview"},"Linting")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/defender/eslint"},"ESLint")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/eslint/eslintrc.ts"},"eslintrc.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#eslint"},"ESLint Config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/linter/configure-env-with-linter"},"Replace Linter"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/formatter/overview"},"Formatter")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/defender/prettier"},"Prettier")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/prettier/prettier.config.js"},"prettier.config.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/frameworks/react/config-react-tools#prettier"},"Prettier config")," ",(0,_react2.mdx)("br",null)," \u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/formatter/configure-env-with-formatter"},"Replace Formatter"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},"DevServer"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/webpack/webpack"},"Webpack")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.dev.ts"},"webpack.config.preview.dev.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 Webpack config (for bundling in the workspace)")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/preview/overview"},"Preview")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null}),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/preview/register-custom-preview"},"Add preview"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/packages/packages-overview"},"Package")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},"See the ",(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/typescript/typescript/~code/typescript.main.runtime.ts"},"TypeScript Aspect")," config"),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 ",(0,_react2.mdx)("a",{parentName:"td",href:"/packages/managing-package-json#set-configuration-from-an-env"},"Add Env package config")," ",(0,_react2.mdx)("br",null)," \u2022 TypeScript's package config")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},"Bundler"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/webpack/webpack"},"Webpack")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/webpack/webpack.config.preview.ts"},"webpack.config.preview.ts")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"\u2022 Webpack config (for bundling during build)")),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/docs/docs-overview"},"Documentation")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/docs/index.tsx"},"Docs template")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/docs/docs-templates"},"Replace docs template"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"http://localhost:3000/docs/dev-services/builder/builder-overview"},"Builder")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"http://localhost:3000/docs/dev-services/builder/builder-overview"},"Build pipeline")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/dev-services/builder/build-pipelines"},"Build pipelines"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/dependencies/dependencies-overview"},"Dependencies")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/react.env.ts"},"Env-dependencies")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/dependencies/configuring-dependencies#configuring-dependencies-from-an-env"},"Env dependencies"))),(0,_react2.mdx)("tr",{parentName:"tbody"},(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"/docs/dev-services/generator/generator-overview"},"Generator")),(0,_react2.mdx)("td",{parentName:"tr",align:null},"-"),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:"https://bit.dev/teambit/react/react/~code/templates/react-component.ts"},"React templates")),(0,_react2.mdx)("td",{parentName:"tr",align:null},(0,_react2.mdx)("a",{parentName:"td",href:""},"Add a component template"))))),(0,_react2.mdx)("h3",null,"Default React versions"),(0,_react2.mdx)("p",null,"By default, the React env sets the following dependency versions for components using it:"),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"react")," (peer dependency): ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^16.8.0 || ^17.0.0")),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"react-dom")," (peer dependency): ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^16.8.0 || ^17.0.0")),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"@types/react"),": ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^17.0.8")),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("strong",{parentName:"li"},"@types/react-dom"),": ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"^17.0.5")))))}MDXContent.__bit_component=__bit_component,MDXContent.isMDXComponent=!0},663:(__unused_webpack_module,exports2,__webpack_require__2)=>{"use strict";var __bit_component={id:"teambit.react/react@0.0.882",homepage:"https://bit.dev/teambit/react/react",exported:!0},_interopRequireDefault=__webpack_require__2(244);Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.Logo=void 0;function _react(){const data=_interopRequireDefault(__webpack_require__2(804));return _react=function(){return data},data}_react.__bit_component=__bit_component;const Logo=()=>_react().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},_react().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/react.svg"}));Logo.__bit_component=__bit_component,exports2.Logo=Logo},57:module2=>{"use strict";module2.exports=MdxJsReact},804:module2=>{"use strict";module2.exports=React},459:module2=>{"use strict";module2.exports=TeambitMdxUiMdxScopeContext}},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(cachedModule!==void 0)return cachedModule.exports;var module2=__webpack_module_cache__[moduleId]={exports:{}};return __webpack_modules__[moduleId](module2,module2.exports,__webpack_require__),module2.exports}__webpack_require__.d=(exports2,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports2,key)&&Object.defineProperty(exports2,key,{enumerable:!0,get:definition[key]})},__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),__webpack_require__.r=exports2=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(exports2,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports2,"__esModule",{value:!0})};var __webpack_exports__={};return(()=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{compositions:()=>compositions,compositions_metadata:()=>compositions_metadata,overview:()=>overview});var react_docs_namespaceObject={};__webpack_require__.r(react_docs_namespaceObject),__webpack_require__.d(react_docs_namespaceObject,{default:()=>MDXContent});var react_composition=__webpack_require__(663),external_React_=__webpack_require__(804),external_MdxJsReact_=__webpack_require__(57),external_TeambitMdxUiMdxScopeContext_=__webpack_require__(459),dist=__webpack_require__(906),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&(!Object.prototype.propertyIsEnumerable.call(source,key)||(target[key]=source[key]))}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}var layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return(0,external_MdxJsReact_.mdx)(MDXLayout,_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,external_MdxJsReact_.mdx)(external_TeambitMdxUiMdxScopeContext_.MDXScopeProvider,{components:{ReactOverview:dist.ZP},mdxType:"MDXScopeProvider"},(0,external_MdxJsReact_.mdx)(dist.ZP,{mdxType:"ReactOverview"})))}MDXContent.isMDXComponent=!0;const compositions=[react_composition],overview=[react_docs_namespaceObject],compositions_metadata={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),__webpack_exports__})()});

package/dist/apps/web/compute-results.js

@@ -1,12 +1,10 @@
 "use strict";
 
 require("core-js/modules/es.promise.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.computeResults = computeResults;
-
 async function computeResults(results, {
   publicDir,
   ssrPublicDir

package/dist/apps/web/compute-results.js.map

@@ -1 +1 @@
-{"version":3,"names":["computeResults","results","publicDir","ssrPublicDir","result","errors","warnings"],"sources":["compute-results.ts"],"sourcesContent":["import { BundlerResult } from '@teambit/bundler';\nimport { ReactAppBuildResult } from './react-build-result';\n\ntype resultsOptions = {\n  publicDir: string;\n  ssrPublicDir?: string;\n};\nexport async function computeResults(\n  results: BundlerResult[],\n  { publicDir, ssrPublicDir }: resultsOptions\n): Promise<ReactAppBuildResult> {\n  const result = results[0];\n\n  return {\n    publicDir,\n    ssrPublicDir,\n    errors: result.errors,\n    warnings: result.warnings,\n  };\n}\n"],"mappings":";;;;;;;;;AAOO,eAAeA,cAAf,CACLC,OADK,EAEL;EAAEC,SAAF;EAAaC;AAAb,CAFK,EAGyB;EAC9B,MAAMC,MAAM,GAAGH,OAAO,CAAC,CAAD,CAAtB;EAEA,OAAO;IACLC,SADK;IAELC,YAFK;IAGLE,MAAM,EAAED,MAAM,CAACC,MAHV;IAILC,QAAQ,EAAEF,MAAM,CAACE;EAJZ,CAAP;AAMD"}
+{"version":3,"names":["computeResults","results","publicDir","ssrPublicDir","result","errors","warnings"],"sources":["compute-results.ts"],"sourcesContent":["import { BundlerResult } from '@teambit/bundler';\nimport { ReactAppBuildResult } from './react-build-result';\n\ntype resultsOptions = {\n  publicDir: string;\n  ssrPublicDir?: string;\n};\nexport async function computeResults(\n  results: BundlerResult[],\n  { publicDir, ssrPublicDir }: resultsOptions\n): Promise<ReactAppBuildResult> {\n  const result = results[0];\n\n  return {\n    publicDir,\n    ssrPublicDir,\n    errors: result.errors,\n    warnings: result.warnings,\n  };\n}\n"],"mappings":";;;;;;;AAOO,eAAeA,cAAc,CAClCC,OAAwB,EACxB;EAAEC,SAAS;EAAEC;AAA6B,CAAC,EACb;EAC9B,MAAMC,MAAM,GAAGH,OAAO,CAAC,CAAC,CAAC;EAEzB,OAAO;IACLC,SAAS;IACTC,YAAY;IACZE,MAAM,EAAED,MAAM,CAACC,MAAM;IACrBC,QAAQ,EAAEF,MAAM,CAACE;EACnB,CAAC;AACH"}

package/dist/apps/web/index.js

@@ -9,14 +9,11 @@ Object.defineProperty(exports, "ReactAppType", {
     return _react().ReactAppType;
   }
 });
-
 function _react() {
   const data = require("./react.app-type");
-
   _react = function () {
     return data;
   };
-
   return data;
 }
 

package/dist/apps/web/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ReactAppType } from './react.app-type';\nexport type { ReactDeployContext } from './deploy-context';\nexport type { ReactAppOptions } from './react-app-options';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ReactAppType } from './react.app-type';\nexport type { ReactDeployContext } from './deploy-context';\nexport type { ReactAppOptions } from './react-app-options';\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA"}

package/dist/apps/web/plugins/index.js

@@ -9,14 +9,11 @@ Object.defineProperty(exports, "prerenderPlugin", {
     return _prerender().prerenderPlugin;
   }
 });
-
 function _prerender() {
   const data = require("./prerender");
-
   _prerender = function () {
     return data;
   };
-
   return data;
 }
 

package/dist/apps/web/plugins/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { prerenderPlugin } from './prerender';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { prerenderPlugin } from './prerender';\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA"}

package/dist/apps/web/plugins/prerender.js

@@ -1,52 +1,38 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.prerenderPlugin = void 0;
-
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
   _defineProperty2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _prerenderSpaPluginNext() {
   const data = _interopRequireDefault(require("prerender-spa-plugin-next"));
-
   _prerenderSpaPluginNext = function () {
     return data;
   };
-
   return data;
 }
-
 function _reactModules() {
   const data = require("@teambit/react.modules.prerenderer-puppeteer");
-
   _reactModules = function () {
     return data;
   };
-
   return data;
 }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const prerenderPlugin = options => {
   return new (_prerenderSpaPluginNext().default)(_objectSpread({
     renderer: _reactModules().PuppeteerRenderer
   }, options));
 };
-
 exports.prerenderPlugin = prerenderPlugin;
 
 //# sourceMappingURL=prerender.js.map

package/dist/apps/web/plugins/prerender.js.map

@@ -1 +1 @@
-{"version":3,"names":["prerenderPlugin","options","PrerenderSPAPlugin","renderer","PuppeteerRenderer"],"sources":["prerender.ts"],"sourcesContent":["import PrerenderSPAPlugin from 'prerender-spa-plugin-next';\nimport { PuppeteerRenderer } from '@teambit/react.modules.prerenderer-puppeteer';\nimport { ReactAppPrerenderOptions } from '../react-app-options';\n\nexport const prerenderPlugin = (options: ReactAppPrerenderOptions) => {\n  return new PrerenderSPAPlugin({\n    renderer: PuppeteerRenderer,\n    ...options,\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAGO,MAAMA,eAAe,GAAIC,OAAD,IAAuC;EACpE,OAAO,KAAIC,iCAAJ;IACLC,QAAQ,EAAEC;EADL,GAEFH,OAFE,EAAP;AAID,CALM"}
+{"version":3,"names":["prerenderPlugin","options","PrerenderSPAPlugin","renderer","PuppeteerRenderer"],"sources":["prerender.ts"],"sourcesContent":["import PrerenderSPAPlugin from 'prerender-spa-plugin-next';\nimport { PuppeteerRenderer } from '@teambit/react.modules.prerenderer-puppeteer';\nimport { ReactAppPrerenderOptions } from '../react-app-options';\n\nexport const prerenderPlugin = (options: ReactAppPrerenderOptions) => {\n  return new PrerenderSPAPlugin({\n    renderer: PuppeteerRenderer,\n    ...options,\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAAiF;AAAA;AAG1E,MAAMA,eAAe,GAAIC,OAAiC,IAAK;EACpE,OAAO,KAAIC,iCAAkB;IAC3BC,QAAQ,EAAEC;EAAiB,GACxBH,OAAO,EACV;AACJ,CAAC;AAAC"}

package/dist/apps/web/react.app-type.js

@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactAppType = void 0;
-
 function _react() {
   const data = require("./react.application");
-
   _react = function () {
     return data;
   };
-
   return data;
 }
-
 class ReactAppType {
   constructor(name, reactEnv, logger, dependencyResolver) {
     this.name = name;
@@ -22,13 +18,10 @@ class ReactAppType {
     this.logger = logger;
     this.dependencyResolver = dependencyResolver;
   }
-
   createApp(options) {
     return new (_react().ReactApp)(options.name, options.entry, options.ssr, options.portRange || [3000, 4000], this.reactEnv, this.logger, this.dependencyResolver, options.prerender, options.bundler, options.ssrBundler, options.devServer, options.webpackTransformers, options.deploy, options.favicon);
   }
-
 }
-
 exports.ReactAppType = ReactAppType;
 
 //# sourceMappingURL=react.app-type.js.map

package/dist/apps/web/react.app-type.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactAppType","constructor","name","reactEnv","logger","dependencyResolver","createApp","options","ReactApp","entry","ssr","portRange","prerender","bundler","ssrBundler","devServer","webpackTransformers","deploy","favicon"],"sources":["react.app-type.ts"],"sourcesContent":["import type { Logger } from '@teambit/logger';\nimport type { DependencyResolverMain } from '@teambit/dependency-resolver';\nimport { ApplicationType } from '@teambit/application';\nimport { ReactAppOptions } from './react-app-options';\nimport { ReactApp } from './react.application';\nimport { ReactEnv } from '../../react.env';\n\nexport class ReactAppType implements ApplicationType<ReactAppOptions> {\n  constructor(\n    readonly name: string,\n    private reactEnv: ReactEnv,\n    private logger: Logger,\n    private dependencyResolver: DependencyResolverMain\n  ) {}\n\n  createApp(options: ReactAppOptions) {\n    return new ReactApp(\n      options.name,\n      options.entry,\n      options.ssr,\n      options.portRange || [3000, 4000],\n      this.reactEnv,\n      this.logger,\n      this.dependencyResolver,\n      options.prerender,\n      options.bundler,\n      options.ssrBundler,\n      options.devServer,\n      options.webpackTransformers,\n      options.deploy,\n      options.favicon\n    );\n  }\n}\n"],"mappings":";;;;;;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGO,MAAMA,YAAN,CAA+D;EACpEC,WAAW,CACAC,IADA,EAEDC,QAFC,EAGDC,MAHC,EAIDC,kBAJC,EAKT;IAAA,KAJSH,IAIT,GAJSA,IAIT;IAAA,KAHQC,QAGR,GAHQA,QAGR;IAAA,KAFQC,MAER,GAFQA,MAER;IAAA,KADQC,kBACR,GADQA,kBACR;EAAE;;EAEJC,SAAS,CAACC,OAAD,EAA2B;IAClC,OAAO,KAAIC,iBAAJ,EACLD,OAAO,CAACL,IADH,EAELK,OAAO,CAACE,KAFH,EAGLF,OAAO,CAACG,GAHH,EAILH,OAAO,CAACI,SAAR,IAAqB,CAAC,IAAD,EAAO,IAAP,CAJhB,EAKL,KAAKR,QALA,EAML,KAAKC,MANA,EAOL,KAAKC,kBAPA,EAQLE,OAAO,CAACK,SARH,EASLL,OAAO,CAACM,OATH,EAULN,OAAO,CAACO,UAVH,EAWLP,OAAO,CAACQ,SAXH,EAYLR,OAAO,CAACS,mBAZH,EAaLT,OAAO,CAACU,MAbH,EAcLV,OAAO,CAACW,OAdH,CAAP;EAgBD;;AAzBmE"}
+{"version":3,"names":["ReactAppType","constructor","name","reactEnv","logger","dependencyResolver","createApp","options","ReactApp","entry","ssr","portRange","prerender","bundler","ssrBundler","devServer","webpackTransformers","deploy","favicon"],"sources":["react.app-type.ts"],"sourcesContent":["import type { Logger } from '@teambit/logger';\nimport type { DependencyResolverMain } from '@teambit/dependency-resolver';\nimport { ApplicationType } from '@teambit/application';\nimport { ReactAppOptions } from './react-app-options';\nimport { ReactApp } from './react.application';\nimport { ReactEnv } from '../../react.env';\n\nexport class ReactAppType implements ApplicationType<ReactAppOptions> {\n  constructor(\n    readonly name: string,\n    private reactEnv: ReactEnv,\n    private logger: Logger,\n    private dependencyResolver: DependencyResolverMain\n  ) {}\n\n  createApp(options: ReactAppOptions) {\n    return new ReactApp(\n      options.name,\n      options.entry,\n      options.ssr,\n      options.portRange || [3000, 4000],\n      this.reactEnv,\n      this.logger,\n      this.dependencyResolver,\n      options.prerender,\n      options.bundler,\n      options.ssrBundler,\n      options.devServer,\n      options.webpackTransformers,\n      options.deploy,\n      options.favicon\n    );\n  }\n}\n"],"mappings":";;;;;;AAIA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAGO,MAAMA,YAAY,CAA6C;EACpEC,WAAW,CACAC,IAAY,EACbC,QAAkB,EAClBC,MAAc,EACdC,kBAA0C,EAClD;IAAA,KAJSH,IAAY,GAAZA,IAAY;IAAA,KACbC,QAAkB,GAAlBA,QAAkB;IAAA,KAClBC,MAAc,GAAdA,MAAc;IAAA,KACdC,kBAA0C,GAA1CA,kBAA0C;EACjD;EAEHC,SAAS,CAACC,OAAwB,EAAE;IAClC,OAAO,KAAIC,iBAAQ,EACjBD,OAAO,CAACL,IAAI,EACZK,OAAO,CAACE,KAAK,EACbF,OAAO,CAACG,GAAG,EACXH,OAAO,CAACI,SAAS,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EACjC,IAAI,CAACR,QAAQ,EACb,IAAI,CAACC,MAAM,EACX,IAAI,CAACC,kBAAkB,EACvBE,OAAO,CAACK,SAAS,EACjBL,OAAO,CAACM,OAAO,EACfN,OAAO,CAACO,UAAU,EAClBP,OAAO,CAACQ,SAAS,EACjBR,OAAO,CAACS,mBAAmB,EAC3BT,OAAO,CAACU,MAAM,EACdV,OAAO,CAACW,OAAO,CAChB;EACH;AACF;AAAC"}

package/dist/apps/web/react.application.js

@@ -1,160 +1,112 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.promise.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactApp = void 0;
-
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
   _defineProperty2 = function () {
     return data;
   };
-
   return data;
 }
-
 function _fs() {
   const data = require("fs");
-
   _fs = function () {
     return data;
   };
-
   return data;
 }
-
 function _path() {
   const data = require("path");
-
   _path = function () {
     return data;
   };
-
   return data;
 }
-
 function _toolboxNetwork() {
   const data = require("@teambit/toolbox.network.get-port");
-
   _toolboxNetwork = function () {
     return data;
   };
-
   return data;
 }
-
 function _component() {
   const data = require("@teambit/component");
-
   _component = function () {
     return data;
   };
-
   return data;
 }
-
 function _dependencyResolver() {
   const data = require("@teambit/dependency-resolver");
-
   _dependencyResolver = function () {
     return data;
   };
-
   return data;
 }
-
 function _lodash() {
   const data = _interopRequireDefault(require("lodash.compact"));
-
   _lodash = function () {
     return data;
   };
-
   return data;
 }
-
 function _bitError() {
   const data = require("@teambit/bit-error");
-
   _bitError = function () {
     return data;
   };
-
   return data;
 }
-
 function _plugins() {
   const data = require("./plugins");
-
   _plugins = function () {
     return data;
   };
-
   return data;
 }
-
 function _webpack() {
   const data = require("../../webpack");
-
   _webpack = function () {
     return data;
   };
-
   return data;
 }
-
 function _computeResults() {
   const data = require("./compute-results");
-
   _computeResults = function () {
     return data;
   };
-
   return data;
 }
-
 function _webpackAppSsr() {
   const data = require("./webpack/webpack.app.ssr.config");
-
   _webpackAppSsr = function () {
     return data;
   };
-
   return data;
 }
-
 function _mutators() {
   const data = require("./webpack/mutators");
-
   _mutators = function () {
     return data;
   };
-
   return data;
 }
-
 function _ssrExpress() {
   const data = require("./ssr/ssr-express");
-
   _ssrExpress = function () {
     return data;
   };
-
   return data;
 }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 class ReactApp {
   constructor(name, entry, ssr, portRange, reactEnv, logger, dependencyResolver, prerender, bundler, ssrBundler, devServer, transformers = [], deploy, favicon) {
     this.name = name;
@@ -175,40 +127,38 @@ class ReactApp {
     (0, _defineProperty2().default)(this, "dir", 'public');
     (0, _defineProperty2().default)(this, "ssrDir", 'ssr');
   }
-
   async run(context) {
     const [from, to] = this.portRange;
     const port = await _toolboxNetwork().Port.getPort(from, to);
-
     if (this.devServer) {
       await this.devServer.listen(port);
       return port;
     }
-
     const devServerContext = await this.getDevServerContext(context);
     const devServer = this.reactEnv.getDevServer(devServerContext, [_mutators().addDevServer, _mutators().setOutput, ...this.transformers]);
     await devServer.listen(port);
     return port;
   }
-
   async runSsr(context) {
     var _this$logger, _this$logger2, _this$logger3;
-
     const [from, to] = this.portRange;
-    const port = await _toolboxNetwork().Port.getPort(from, to); // bundle client
+    const port = await _toolboxNetwork().Port.getPort(from, to);
 
+    // bundle client
     const clientBundle = await this.buildClient(context);
     if (clientBundle.errors.length > 0) return {
       errors: clientBundle.errors
     };
-    (_this$logger = this.logger) === null || _this$logger === void 0 ? void 0 : _this$logger.info('[react.application] [ssr] client bundle - complete'); // bundle server
+    (_this$logger = this.logger) === null || _this$logger === void 0 ? void 0 : _this$logger.info('[react.application] [ssr] client bundle - complete');
 
+    // bundle server
     const serverBundle = await this.buildSsr(context);
     if (serverBundle.errors.length > 0) return {
       errors: serverBundle.errors
     };
-    (_this$logger2 = this.logger) === null || _this$logger2 === void 0 ? void 0 : _this$logger2.info('[react.application] [ssr] server bundle - complete'); // load server-side runtime
+    (_this$logger2 = this.logger) === null || _this$logger2 === void 0 ? void 0 : _this$logger2.info('[react.application] [ssr] server bundle - complete');
 
+    // load server-side runtime
     const app = await (0, _ssrExpress().loadSsrApp)(context.workdir, context.appName);
     (_this$logger3 = this.logger) === null || _this$logger3 === void 0 ? void 0 : _this$logger3.info('[react.application] [ssr] bundle code - loaded');
     const expressApp = (0, _ssrExpress().createExpressSsr)({
@@ -224,15 +174,15 @@ class ReactApp {
       port
     };
   }
-
   async buildClient(context) {
     const htmlConfig = [{
       title: context.appName,
       templateContent: (0, _webpack().html)(context.appName),
       minify: false,
       favicon: this.favicon
-    }]; // extend, including prototype methods
+    }];
 
+    // extend, including prototype methods
     const ctx = Object.assign(Object.create(context), {
       html: htmlConfig,
       targets: [{
@@ -250,7 +200,6 @@ class ReactApp {
     const bundleResult = await bundler.run();
     return bundleResult[0];
   }
-
   async buildSsr(context) {
     // extend, including prototype methods
     const ctx = Object.assign(Object.create(context), _objectSpread(_objectSpread({}, context), {}, {
@@ -269,15 +218,15 @@ class ReactApp {
     const bundleResult = await bundler.run();
     return bundleResult[0];
   }
-
   async build(context) {
     const htmlConfig = [{
       title: context.name,
       templateContent: (0, _webpack().html)(context.name),
       minify: false,
-      favicon: this.favicon // filename: ''.html`,
-
+      favicon: this.favicon
+      // filename: ''.html`,
     }];
+
     Object.assign(context, {
       html: htmlConfig
     });
@@ -290,7 +239,6 @@ class ReactApp {
       ssrPublicDir: ssrAppDir
     });
   }
-
   async buildSsrApp(context, ssrAppDir) {
     const ssrBundler = await this.getSsrBundler(context);
     await ssrBundler.run();
@@ -305,7 +253,6 @@ class ReactApp {
     await installer.install(capsuleSsrDir, this.getSsrPolicy(), new (_component().ComponentMap)(new Map()));
     return ssrAppDir;
   }
-
   getSsrPolicy() {
     const workspacePolicy = new (_dependencyResolver().WorkspacePolicy)([]);
     workspacePolicy.add({
@@ -345,17 +292,14 @@ class ReactApp {
     });
     return workspacePolicy;
   }
-
   getBundler(context) {
     if (this.bundler) return this.bundler;
     return this.getDefaultBundler(context);
   }
-
   getSsrBundler(context) {
     if (this.ssrBundler) return this.ssrBundler;
     return this.getDefaultSsrBundler(context);
   }
-
   async getDefaultBundler(context) {
     const {
       capsule
@@ -377,7 +321,6 @@ class ReactApp {
     const bundler = await reactEnv.getBundler(bundlerContext, transformers);
     return bundler;
   }
-
   async getDefaultSsrBundler(context) {
     const {
       capsule
@@ -396,7 +339,6 @@ class ReactApp {
     const bundler = await reactEnv.getBundler(bundlerContext, transformers);
     return bundler;
   }
-
   async getBuildContext(context, {
     outputPath
   }) {
@@ -427,22 +369,18 @@ class ReactApp {
     });
     return bundlerContext;
   }
-
   getPublicDir(artifactsDir) {
     return (0, _path().join)(artifactsDir, this.applicationType, this.name);
   }
-
   async getEntries(path) {
     if (Array.isArray(this.entry)) return this.entry;
     return this.entry(path);
   }
-
   async getSsrEntries() {
     if (!this.ssr) throw new (_bitError().BitError)('tried to build ssr without ssr entries');
     if (typeof this.ssr === 'string') return [this.ssr];
     return [await this.ssr()];
   }
-
   async getDevServerContext(context) {
     const entries = await this.getEntries();
     return Object.assign(context, {
@@ -455,13 +393,10 @@ class ReactApp {
       aliasHostDependencies: true
     });
   }
-
   getPeers() {
     return this.reactEnv.getPeerDependenciesList();
   }
-
 }
-
 exports.ReactApp = ReactApp;
 
 //# sourceMappingURL=react.application.js.map