@teambit/react 0.0.881 → 0.0.883

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (238) hide show
  1. package/artifacts/__bit_junit.xml +2 -2
  2. package/artifacts/env-template/public/{22.110c1e3ba45b0bbf27b0.js → 22.f311243a4b7463651c8e.js} +7 -3
  3. package/artifacts/env-template/public/{238.2ddc5a20aad2fef149e6.js → 700.b88f9139e07991261905.js} +21 -29
  4. package/artifacts/env-template/public/assets-manifest.json +18 -18
  5. package/artifacts/env-template/public/compositions.ac9e6df16c523807a4e3.js +9 -0
  6. package/artifacts/env-template/public/compositions.html +1 -1
  7. package/artifacts/env-template/public/{overview.085d128a4f5272ef7319.js → overview.97f55013f9fda82a24ae.js} +1 -1
  8. package/artifacts/env-template/public/overview.html +1 -1
  9. package/artifacts/env-template/public/{peers.df1b33444b47cc9becfc.js → peers.65a74a62f208506b0532.js} +1 -1
  10. package/artifacts/env-template/public/{preview-root.b9ea187989f25bad7bf4.js → preview-root.a829360e0cc95e341dfd.js} +1 -1
  11. package/artifacts/env-template/public/static/css/700.2aa44154.css +1 -0
  12. package/artifacts/env-template/public/static/css/compositions.812d93fb.css +1 -0
  13. package/artifacts/env-template/public/static/css/overview.793d10f3.css +1 -0
  14. package/artifacts/preview/teambit_react_react-preview.js +1 -1
  15. package/{compositions-1666409808293.js → compositions-1666582798766.js} +0 -0
  16. package/dist/apps/web/compute-results.js +0 -2
  17. package/dist/apps/web/compute-results.js.map +1 -1
  18. package/dist/apps/web/index.js +0 -3
  19. package/dist/apps/web/index.js.map +1 -1
  20. package/dist/apps/web/plugins/index.js +0 -3
  21. package/dist/apps/web/plugins/index.js.map +1 -1
  22. package/dist/apps/web/plugins/prerender.js +0 -14
  23. package/dist/apps/web/plugins/prerender.js.map +1 -1
  24. package/dist/apps/web/react.app-type.js +0 -7
  25. package/dist/apps/web/react.app-type.js.map +1 -1
  26. package/dist/apps/web/react.application.js +11 -76
  27. package/dist/apps/web/react.application.js.map +1 -1
  28. package/dist/apps/web/ssr/ssr-express.js +0 -31
  29. package/dist/apps/web/ssr/ssr-express.js.map +1 -1
  30. package/dist/apps/web/webpack/mutators.js +0 -13
  31. package/dist/apps/web/webpack/mutators.js.map +1 -1
  32. package/dist/apps/web/webpack/webpack.app.ssr.config.js +0 -11
  33. package/dist/apps/web/webpack/webpack.app.ssr.config.js.map +1 -1
  34. package/dist/eslint/eslintrc.js +1 -1
  35. package/dist/eslint/eslintrc.js.map +1 -1
  36. package/dist/highlighter-widget.js +0 -16
  37. package/dist/highlighter-widget.js.map +1 -1
  38. package/dist/index.js +0 -3
  39. package/dist/index.js.map +1 -1
  40. package/dist/jest/index.js +0 -7
  41. package/dist/jest/index.js.map +1 -1
  42. package/dist/jest/jest.base.config.js +3 -3
  43. package/dist/jest/jest.base.config.js.map +1 -1
  44. package/dist/jest/jest.cjs.config.js +0 -10
  45. package/dist/jest/jest.cjs.config.js.map +1 -1
  46. package/dist/jest/jest.config.js +1 -1
  47. package/dist/jest/jest.config.js.map +1 -1
  48. package/dist/jest/jest.esm.config.js +0 -10
  49. package/dist/jest/jest.esm.config.js.map +1 -1
  50. package/dist/jest/setupTests.js.map +1 -1
  51. package/dist/jest/transformers/base-transformer-plugins.js +1 -0
  52. package/dist/jest/transformers/base-transformer-plugins.js.map +1 -1
  53. package/dist/jest/transformers/base-transformer-presets.js +1 -0
  54. package/dist/jest/transformers/base-transformer-presets.js.map +1 -1
  55. package/dist/jest/transformers/base-transformer-process.js +0 -2
  56. package/dist/jest/transformers/base-transformer-process.js.map +1 -1
  57. package/dist/jest/transformers/cjs-transformer.js +0 -5
  58. package/dist/jest/transformers/cjs-transformer.js.map +1 -1
  59. package/dist/jest/transformers/css-transform.js +1 -2
  60. package/dist/jest/transformers/css-transform.js.map +1 -1
  61. package/dist/jest/transformers/esm-transformer.js +1 -5
  62. package/dist/jest/transformers/esm-transformer.js.map +1 -1
  63. package/dist/jest/transformers/file-transform.js +2 -6
  64. package/dist/jest/transformers/file-transform.js.map +1 -1
  65. package/dist/prettier/prettier.config.js.map +1 -1
  66. package/dist/react.aspect.js +0 -5
  67. package/dist/react.aspect.js.map +1 -1
  68. package/dist/react.composition.js +0 -6
  69. package/dist/react.composition.js.map +1 -1
  70. package/dist/react.env.js +34 -143
  71. package/dist/react.env.js.map +1 -1
  72. package/dist/react.graphql.js +0 -6
  73. package/dist/react.graphql.js.map +1 -1
  74. package/dist/react.main.runtime.js +23 -152
  75. package/dist/react.main.runtime.js.map +1 -1
  76. package/dist/react.preview.runtime.js +0 -32
  77. package/dist/react.preview.runtime.js.map +1 -1
  78. package/dist/react.templates.js +0 -46
  79. package/dist/react.templates.js.map +1 -1
  80. package/dist/react.ui.runtime.js +0 -35
  81. package/dist/react.ui.runtime.js.map +1 -1
  82. package/dist/templates/react-app/files/app-plugin.js +0 -1
  83. package/dist/templates/react-app/files/app-plugin.js.map +1 -1
  84. package/dist/templates/react-app/files/app-root.js +0 -1
  85. package/dist/templates/react-app/files/app-root.js.map +1 -1
  86. package/dist/templates/react-app/files/app.js +0 -1
  87. package/dist/templates/react-app/files/app.js.map +1 -1
  88. package/dist/templates/react-app/files/compositions.js +0 -1
  89. package/dist/templates/react-app/files/compositions.js.map +1 -1
  90. package/dist/templates/react-app/files/doc.js +0 -1
  91. package/dist/templates/react-app/files/doc.js.map +1 -1
  92. package/dist/templates/react-app/files/index.js +0 -1
  93. package/dist/templates/react-app/files/index.js.map +1 -1
  94. package/dist/templates/react-app/index.js +0 -19
  95. package/dist/templates/react-app/index.js.map +1 -1
  96. package/dist/templates/react-component/files/component.js +0 -2
  97. package/dist/templates/react-component/files/component.js.map +1 -1
  98. package/dist/templates/react-component/files/composition.js +0 -2
  99. package/dist/templates/react-component/files/composition.js.map +1 -1
  100. package/dist/templates/react-component/files/docs.js +0 -2
  101. package/dist/templates/react-component/files/docs.js.map +1 -1
  102. package/dist/templates/react-component/files/index-file.js +0 -2
  103. package/dist/templates/react-component/files/index-file.js.map +1 -1
  104. package/dist/templates/react-component/files/test.js +0 -2
  105. package/dist/templates/react-component/files/test.js.map +1 -1
  106. package/dist/templates/react-component/index.js +0 -24
  107. package/dist/templates/react-component/index.js.map +1 -1
  108. package/dist/templates/react-component-js/files/component.js +0 -2
  109. package/dist/templates/react-component-js/files/component.js.map +1 -1
  110. package/dist/templates/react-component-js/files/composition.js +0 -2
  111. package/dist/templates/react-component-js/files/composition.js.map +1 -1
  112. package/dist/templates/react-component-js/files/docs.js +0 -2
  113. package/dist/templates/react-component-js/files/docs.js.map +1 -1
  114. package/dist/templates/react-component-js/files/test.js +0 -2
  115. package/dist/templates/react-component-js/files/test.js.map +1 -1
  116. package/dist/templates/react-component-js/index.js +0 -21
  117. package/dist/templates/react-component-js/index.js.map +1 -1
  118. package/dist/templates/react-context/files/composition.js +0 -2
  119. package/dist/templates/react-context/files/composition.js.map +1 -1
  120. package/dist/templates/react-context/files/context-provider.js +0 -2
  121. package/dist/templates/react-context/files/context-provider.js.map +1 -1
  122. package/dist/templates/react-context/files/context.js +0 -2
  123. package/dist/templates/react-context/files/context.js.map +1 -1
  124. package/dist/templates/react-context/files/docs.js +0 -2
  125. package/dist/templates/react-context/files/docs.js.map +1 -1
  126. package/dist/templates/react-context/files/index-file.js +0 -2
  127. package/dist/templates/react-context/files/index-file.js.map +1 -1
  128. package/dist/templates/react-context/files/test.js +0 -2
  129. package/dist/templates/react-context/files/test.js.map +1 -1
  130. package/dist/templates/react-context/index.js +0 -19
  131. package/dist/templates/react-context/index.js.map +1 -1
  132. package/dist/templates/react-env/files/aspect.js +0 -1
  133. package/dist/templates/react-env/files/aspect.js.map +1 -1
  134. package/dist/templates/react-env/files/doc.js +0 -1
  135. package/dist/templates/react-env/files/doc.js.map +1 -1
  136. package/dist/templates/react-env/files/index.js +0 -1
  137. package/dist/templates/react-env/files/index.js.map +1 -1
  138. package/dist/templates/react-env/files/jest.config.js +0 -1
  139. package/dist/templates/react-env/files/jest.config.js.map +1 -1
  140. package/dist/templates/react-env/files/main.runtime.js +0 -1
  141. package/dist/templates/react-env/files/main.runtime.js.map +1 -1
  142. package/dist/templates/react-env/files/preview.runtime.js +0 -1
  143. package/dist/templates/react-env/files/preview.runtime.js.map +1 -1
  144. package/dist/templates/react-env/files/typescript/styles.js +0 -1
  145. package/dist/templates/react-env/files/typescript/styles.js.map +1 -1
  146. package/dist/templates/react-env/files/typescript/ts-transformer.js +0 -1
  147. package/dist/templates/react-env/files/typescript/ts-transformer.js.map +1 -1
  148. package/dist/templates/react-env/files/typescript/typescript.config.js +0 -1
  149. package/dist/templates/react-env/files/typescript/typescript.config.js.map +1 -1
  150. package/dist/templates/react-env/files/webpack.config.js +0 -1
  151. package/dist/templates/react-env/files/webpack.config.js.map +1 -1
  152. package/dist/templates/react-env/index.js +0 -31
  153. package/dist/templates/react-env/index.js.map +1 -1
  154. package/dist/templates/react-hook/files/component.js +0 -2
  155. package/dist/templates/react-hook/files/component.js.map +1 -1
  156. package/dist/templates/react-hook/files/composition.js +0 -2
  157. package/dist/templates/react-hook/files/composition.js.map +1 -1
  158. package/dist/templates/react-hook/files/docs.js +0 -2
  159. package/dist/templates/react-hook/files/docs.js.map +1 -1
  160. package/dist/templates/react-hook/files/index-file.js +0 -2
  161. package/dist/templates/react-hook/files/index-file.js.map +1 -1
  162. package/dist/templates/react-hook/files/index-file.spec.js +0 -6
  163. package/dist/templates/react-hook/files/index-file.spec.js.map +1 -1
  164. package/dist/templates/react-hook/files/test.js +0 -2
  165. package/dist/templates/react-hook/files/test.js.map +1 -1
  166. package/dist/templates/react-hook/index.js +0 -16
  167. package/dist/templates/react-hook/index.js.map +1 -1
  168. package/dist/templates/react-workspace/index.js +2 -6
  169. package/dist/templates/react-workspace/index.js.map +1 -1
  170. package/dist/templates/react-workspace-analytics/index.js +0 -5
  171. package/dist/templates/react-workspace-analytics/index.js.map +1 -1
  172. package/dist/templates/react-workspace-app/index.js +2 -13
  173. package/dist/templates/react-workspace-app/index.js.map +1 -1
  174. package/dist/templates/react-workspace-blog/index.js +0 -5
  175. package/dist/templates/react-workspace-blog/index.js.map +1 -1
  176. package/dist/templates/react-workspace-data-fetching/index.js +0 -5
  177. package/dist/templates/react-workspace-data-fetching/index.js.map +1 -1
  178. package/dist/templates/react-workspace-deprecated/index.js +0 -5
  179. package/dist/templates/react-workspace-deprecated/index.js.map +1 -1
  180. package/dist/templates/react-workspace-design-system/index.js +0 -5
  181. package/dist/templates/react-workspace-design-system/index.js.map +1 -1
  182. package/dist/templates/react-workspace-lib/index.js +0 -5
  183. package/dist/templates/react-workspace-lib/index.js.map +1 -1
  184. package/dist/templates/react-workspace-wiki/index.js +0 -5
  185. package/dist/templates/react-workspace-wiki/index.js.map +1 -1
  186. package/dist/templates/workspace-common/constants.js.map +1 -1
  187. package/dist/templates/workspace-common/files/eslint-config.js.map +1 -1
  188. package/dist/templates/workspace-common/files/git-ignore.js +0 -1
  189. package/dist/templates/workspace-common/files/git-ignore.js.map +1 -1
  190. package/dist/templates/workspace-common/files/launch-json.js +0 -2
  191. package/dist/templates/workspace-common/files/launch-json.js.map +1 -1
  192. package/dist/templates/workspace-common/files/prettier-config.js.map +1 -1
  193. package/dist/templates/workspace-common/files/readme-file.js +0 -1
  194. package/dist/templates/workspace-common/files/readme-file.js.map +1 -1
  195. package/dist/templates/workspace-common/files/ts-config.js.map +1 -1
  196. package/dist/templates/workspace-common/files/types/asset.js.map +1 -1
  197. package/dist/templates/workspace-common/files/types/style.js.map +1 -1
  198. package/dist/templates/workspace-common/files/workspace-config.js +0 -14
  199. package/dist/templates/workspace-common/files/workspace-config.js.map +1 -1
  200. package/dist/templates/workspace-common/generate-files.js +0 -29
  201. package/dist/templates/workspace-common/generate-files.js.map +1 -1
  202. package/dist/templates/workspace-common/index.js +0 -3
  203. package/dist/templates/workspace-common/index.js.map +1 -1
  204. package/dist/webpack/html.js +3 -2
  205. package/dist/webpack/html.js.map +1 -1
  206. package/dist/webpack/index.js +0 -3
  207. package/dist/webpack/index.js.map +1 -1
  208. package/dist/webpack/overlay/formatWebpackMessages.js +26 -37
  209. package/dist/webpack/overlay/formatWebpackMessages.js.map +1 -1
  210. package/dist/webpack/overlay/launchEditorEndpoint.js +2 -2
  211. package/dist/webpack/overlay/launchEditorEndpoint.js.map +1 -1
  212. package/dist/webpack/overlay/refreshOverlayInterop.js +1 -3
  213. package/dist/webpack/overlay/refreshOverlayInterop.js.map +1 -1
  214. package/dist/webpack/overlay/webpackHotDevClient.js +54 -71
  215. package/dist/webpack/overlay/webpackHotDevClient.js.map +1 -1
  216. package/dist/webpack/postcss.config.js +6 -3
  217. package/dist/webpack/postcss.config.js.map +1 -1
  218. package/dist/webpack/webpack.config.base.js +28 -53
  219. package/dist/webpack/webpack.config.base.js.map +1 -1
  220. package/dist/webpack/webpack.config.base.prod.js +10 -14
  221. package/dist/webpack/webpack.config.base.prod.js.map +1 -1
  222. package/dist/webpack/webpack.config.component.dev.js +10 -17
  223. package/dist/webpack/webpack.config.component.dev.js.map +1 -1
  224. package/dist/webpack/webpack.config.component.prod.js +3 -6
  225. package/dist/webpack/webpack.config.component.prod.js.map +1 -1
  226. package/dist/webpack/webpack.config.env.dev.js +5 -5
  227. package/dist/webpack/webpack.config.env.dev.js.map +1 -1
  228. package/dist/webpack/webpack.config.env.template.js +0 -1
  229. package/dist/webpack/webpack.config.env.template.js.map +1 -1
  230. package/{overview-1666409808293.js → overview-1666582798766.js} +0 -0
  231. package/package-tar/teambit-react-0.0.883.tgz +0 -0
  232. package/package.json +26 -26
  233. package/{preview-1666409808293.js → preview-1666582798766.js} +2 -2
  234. package/artifacts/env-template/public/compositions.c4e18d110cce13606364.js +0 -5
  235. package/artifacts/env-template/public/static/css/238.a0238c25.css +0 -1
  236. package/artifacts/env-template/public/static/css/compositions.6d8c7702.css +0 -1
  237. package/artifacts/env-template/public/static/css/overview.367aeb5b.css +0 -1
  238. package/package-tar/teambit-react-0.0.881.tgz +0 -0
@@ -0,0 +1 @@
1
+ .circular-font_circularFont__2U4VL{font-family:"CircularXX","Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif}@font-face{font-family:"CircularXX";src:url(https://static.bit.dev/circular-xx/CircularXXWeb-Regular.woff2)}@font-face{font-family:"CircularXX";font-weight:700;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-Bold.woff2)}@font-face{font-family:"CircularXX";font-weight:800;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-Black.woff2)}@font-face{font-family:"CircularXX";font-style:italic;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-Italic.woff2)}@font-face{font-family:"CircularXX";font-style:italic;font-weight:700;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-BoldItalic.woff2)}@font-face{font-family:"CircularXX";font-style:italic;font-weight:800;src:url(https://static.bit.dev/circular-xx/CirculrXXWeb-BlackItalic.woff2)}@font-face{font-family:"CircularXX";font-weight:300;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-light.woff2)}@font-face{font-family:"CircularXX";font-style:italic;font-weight:300;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-lightItalic.woff2)}@font-face{font-family:"CircularXX";font-weight:500;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-Medium.woff2)}@font-face{font-family:"CircularXX";font-style:italic;font-weight:500;src:url(https://static.bit.dev/circular-xx/CircularXXWeb-MediumItalic.woff2)}.base-theme_theme__20K5p{background:var(--background-color);color:var(--on-background-color);min-height:100%}.theme-toggler_toggler__10ZbF{background:#fff;background:var(--surface-color,#fff);border-radius:8px;cursor:pointer;padding:.5em;transition:color .18s,background-color .18s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.theme-toggler_toggler__10ZbF:hover{background:#edebfc;background:var(--surface-hover-color,#edebfc)}.theme-toggler_toggler__10ZbF:active{background:#dcd8f9;background:var(--surface-active-color,#dcd8f9)}.docs-app_compositionSection__2rAWY{margin-top:40px}.docs-app_compositionCard__2BFqj{max-height:500px;max-width:100%;overflow:hidden}.docs-app_docsMainBlock__1Vyyg{box-sizing:border-box;margin:0 0 150px;max-width:1440px;padding:20px 40px 10px;width:100%}.docs-app_docsMainBlock__1Vyyg .docs-app_heading__25cfc{margin-bottom:unset}.docs-app_mdx__WbON7{font-size:16px}.heading-sizes_xxs__sqY6F{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__2vIO-{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__SWCg7{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__1VfRy{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__12r2v{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__18vfm{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__1XBq0{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__18YHt,.heading_h2__1ja7_,.heading_h3__3SLRc,.heading_h4__uSuLS,.heading_h5__30dq2,.heading_h6__2CGfq{font-weight:700;margin:0}.heading_h1__18YHt{margin-bottom:20px}.anchor_anchor__3Kymc{align-items:center;display:flex;text-decoration:none}.anchor_anchorIcon__osznX{color:var(--bit-text-color-light);font-size:18px}.linked-heading_linkedHeading__1exDt{align-items:center;display:flex;margin-bottom:16px;width:-moz-fit-content;width:fit-content}.linked-heading_linkedHeading__1exDt:hover .linked-heading_anchor__3xkqo{opacity:1;visibility:unset}.linked-heading_heading__28Zmh{margin-bottom:0;margin-right:8px}.linked-heading_anchor__3xkqo{opacity:0;transform:translateY(4px);transition:visibility .3s,opacity .3s ease-in-out;visibility:hidden}.themed-text_themedText__-5NI1{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7)}.composition-card_compositionCard__1TGzH{background-color:#fff;background-color:var(--bit-bg-color,#fff);box-shadow:var(--bit-shadow-raised-low);display:flex;flex:none;flex-direction:column;min-height:122px;min-width:199px;padding:0}.composition-card_compositionCard__1TGzH:hover .composition-card_linkToComposition__uWeCP{opacity:1;visibility:visible}.composition-card_compositionContainer__1fvHN{box-sizing:border-box;margin:auto;max-width:100%;overflow:auto;padding:16px;position:relative;transform:translateZ(0)}.composition-card_title__1pxwS{align-items:center;border-top:1px solid #ededed;border-top:1px solid var(--bit-border-color-lightest,#ededed);display:flex;flex:none;font-size:.875em;justify-content:space-between;padding:8px 16px}.composition-card_title__1pxwS>span{margin-right:8px}.composition-card_linkToComposition__uWeCP{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);opacity:0;text-decoration:none;transition:opacity .3s,visibility .3s ease-in-out;visibility:hidden}.composition-card_compositionCardError__1YDP3{border-radius:4px 4px 0 0}.compositions-overview_background__1G-zc{background:#f6f6f6;background:var(--bit-bg-dent,#f6f6f6);border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-radius:6px;display:flex;max-height:500px;overflow-x:auto;padding:12px}.compositions-overview_background__1G-zc>*{margin-right:16px}.compositions-overview_background__1G-zc>:last-child{margin:0}.error_error__Aedkj{color:#e62e5c;color:var(--bit-error-color,#e62e5c)}.react-playground_error__1zi13{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);border-bottom-right-radius:6px;border-left:none;border-top-right-radius:6px;bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out;width:100%}.react-playground_error__1zi13.react-playground_column__1Kovw{border:1px solid var(--bit-error-color);border-bottom:none;border-bottom-right-radius:0;border-top-left-radius:6px}.react-playground_editorWrapper__1wY8s{max-height:450px;overflow:auto!important}.react-playground_codePane__19Xda{background-color:#282c34;max-width:-moz-fit-content;max-width:fit-content;max-width:90%;min-width:150px}.react-playground_codePane__19Xda.react-playground_column__1Kovw,.react-playground_codePane__19Xda.react-playground_column__1Kovw .react-playground_editorWrapper__1wY8s{height:220px;max-width:100%}.react-playground_editor__1LFjB{border-bottom-left-radius:6px;border-top-left-radius:6px;box-sizing:border-box;font-family:Roboto mono!important;font-size:11px;min-height:100px;width:-moz-fit-content;width:fit-content}.react-playground_editor__1LFjB>textarea{outline:none;white-space:pre!important;width:100%!important}.react-playground_editor__1LFjB>pre{white-space:pre!important;width:-moz-fit-content!important;width:fit-content!important}.react-playground_splitter__R480r{background-color:#282c34}.react-playground_splitter__R480r>div{border:none;border-radius:0}.react-playground_previewPane__1Rkn-{border:1px solid var(--bit-border-color-lightest);border-bottom-right-radius:6px;border-left:none;border-top-right-radius:6px;min-height:100px;overflow:auto;position:relative}.react-playground_previewPane__1Rkn-.react-playground_column__1Kovw{border:1px solid var(--bit-border-color-lightest);border-bottom:none;border-bottom-right-radius:0;border-top-left-radius:6px;min-height:220px}.react-playground_previewPane__1Rkn-.react-playground_column__1Kovw .react-playground_editorWrapper__1wY8s{max-height:220px}.react-playground_previewBox__1quIl{bottom:0;left:0;position:absolute;right:0;top:0}.react-playground_preview__1LvFd{border-left:none;box-sizing:border-box;height:100%;width:100%}.react-playground_playground__1mVdr{border-radius:6px;display:flex;max-height:450px;overflow:hidden;width:100%}.react-playground_playground__1mVdr>div{width:100%}.examples-overview_exampleSection__1OdhX>:not(:last-child){margin-bottom:8px}
@@ -8,4 +8,4 @@ It enables you to quickly set up a dev environment that follows best practices f
8
8
  }
9
9
  `)),(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
10
10
  `)),(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
11
- `)),(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__})()});
11
+ `)),(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},925:(__unused_webpack_module,exports2,__webpack_require__2)=>{"use strict";var __bit_component={id:"teambit.react/react@0.0.883",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__(925),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__})()});
@@ -1,12 +1,10 @@
1
1
  "use strict";
2
2
 
3
3
  require("core-js/modules/es.promise.js");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.computeResults = computeResults;
9
-
10
8
  async function computeResults(results, {
11
9
  publicDir,
12
10
  ssrPublicDir
@@ -1 +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"}
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,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"}
@@ -9,14 +9,11 @@ Object.defineProperty(exports, "ReactAppType", {
9
9
  return _react().ReactAppType;
10
10
  }
11
11
  });
12
-
13
12
  function _react() {
14
13
  const data = require("./react.app-type");
15
-
16
14
  _react = function () {
17
15
  return data;
18
16
  };
19
-
20
17
  return data;
21
18
  }
22
19
 
@@ -1 +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"}
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"}
@@ -9,14 +9,11 @@ Object.defineProperty(exports, "prerenderPlugin", {
9
9
  return _prerender().prerenderPlugin;
10
10
  }
11
11
  });
12
-
13
12
  function _prerender() {
14
13
  const data = require("./prerender");
15
-
16
14
  _prerender = function () {
17
15
  return data;
18
16
  };
19
-
20
17
  return data;
21
18
  }
22
19
 
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { prerenderPlugin } from './prerender';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}
1
+ {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { prerenderPlugin } from './prerender';\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA"}
@@ -1,52 +1,38 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.prerenderPlugin = void 0;
9
-
10
8
  function _defineProperty2() {
11
9
  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
-
13
10
  _defineProperty2 = function () {
14
11
  return data;
15
12
  };
16
-
17
13
  return data;
18
14
  }
19
-
20
15
  function _prerenderSpaPluginNext() {
21
16
  const data = _interopRequireDefault(require("prerender-spa-plugin-next"));
22
-
23
17
  _prerenderSpaPluginNext = function () {
24
18
  return data;
25
19
  };
26
-
27
20
  return data;
28
21
  }
29
-
30
22
  function _reactModules() {
31
23
  const data = require("@teambit/react.modules.prerenderer-puppeteer");
32
-
33
24
  _reactModules = function () {
34
25
  return data;
35
26
  };
36
-
37
27
  return data;
38
28
  }
39
-
40
29
  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; }
41
-
42
30
  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; }
43
-
44
31
  const prerenderPlugin = options => {
45
32
  return new (_prerenderSpaPluginNext().default)(_objectSpread({
46
33
  renderer: _reactModules().PuppeteerRenderer
47
34
  }, options));
48
35
  };
49
-
50
36
  exports.prerenderPlugin = prerenderPlugin;
51
37
 
52
38
  //# sourceMappingURL=prerender.js.map
@@ -1 +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"}
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;AAAiF;AAAA;AAG1E,MAAMA,eAAe,GAAIC,OAAiC,IAAK;EACpE,OAAO,KAAIC,iCAAkB;IAC3BC,QAAQ,EAAEC;EAAiB,GACxBH,OAAO,EACV;AACJ,CAAC;AAAC"}
@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.ReactAppType = void 0;
7
-
8
7
  function _react() {
9
8
  const data = require("./react.application");
10
-
11
9
  _react = function () {
12
10
  return data;
13
11
  };
14
-
15
12
  return data;
16
13
  }
17
-
18
14
  class ReactAppType {
19
15
  constructor(name, reactEnv, logger, dependencyResolver) {
20
16
  this.name = name;
@@ -22,13 +18,10 @@ class ReactAppType {
22
18
  this.logger = logger;
23
19
  this.dependencyResolver = dependencyResolver;
24
20
  }
25
-
26
21
  createApp(options) {
27
22
  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);
28
23
  }
29
-
30
24
  }
31
-
32
25
  exports.ReactAppType = ReactAppType;
33
26
 
34
27
  //# sourceMappingURL=react.app-type.js.map
@@ -1 +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"}
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,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"}
@@ -1,160 +1,112 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  require("core-js/modules/es.array.iterator.js");
6
-
7
5
  require("core-js/modules/es.promise.js");
8
-
9
6
  Object.defineProperty(exports, "__esModule", {
10
7
  value: true
11
8
  });
12
9
  exports.ReactApp = void 0;
13
-
14
10
  function _defineProperty2() {
15
11
  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
-
17
12
  _defineProperty2 = function () {
18
13
  return data;
19
14
  };
20
-
21
15
  return data;
22
16
  }
23
-
24
17
  function _fs() {
25
18
  const data = require("fs");
26
-
27
19
  _fs = function () {
28
20
  return data;
29
21
  };
30
-
31
22
  return data;
32
23
  }
33
-
34
24
  function _path() {
35
25
  const data = require("path");
36
-
37
26
  _path = function () {
38
27
  return data;
39
28
  };
40
-
41
29
  return data;
42
30
  }
43
-
44
31
  function _toolboxNetwork() {
45
32
  const data = require("@teambit/toolbox.network.get-port");
46
-
47
33
  _toolboxNetwork = function () {
48
34
  return data;
49
35
  };
50
-
51
36
  return data;
52
37
  }
53
-
54
38
  function _component() {
55
39
  const data = require("@teambit/component");
56
-
57
40
  _component = function () {
58
41
  return data;
59
42
  };
60
-
61
43
  return data;
62
44
  }
63
-
64
45
  function _dependencyResolver() {
65
46
  const data = require("@teambit/dependency-resolver");
66
-
67
47
  _dependencyResolver = function () {
68
48
  return data;
69
49
  };
70
-
71
50
  return data;
72
51
  }
73
-
74
52
  function _lodash() {
75
53
  const data = _interopRequireDefault(require("lodash.compact"));
76
-
77
54
  _lodash = function () {
78
55
  return data;
79
56
  };
80
-
81
57
  return data;
82
58
  }
83
-
84
59
  function _bitError() {
85
60
  const data = require("@teambit/bit-error");
86
-
87
61
  _bitError = function () {
88
62
  return data;
89
63
  };
90
-
91
64
  return data;
92
65
  }
93
-
94
66
  function _plugins() {
95
67
  const data = require("./plugins");
96
-
97
68
  _plugins = function () {
98
69
  return data;
99
70
  };
100
-
101
71
  return data;
102
72
  }
103
-
104
73
  function _webpack() {
105
74
  const data = require("../../webpack");
106
-
107
75
  _webpack = function () {
108
76
  return data;
109
77
  };
110
-
111
78
  return data;
112
79
  }
113
-
114
80
  function _computeResults() {
115
81
  const data = require("./compute-results");
116
-
117
82
  _computeResults = function () {
118
83
  return data;
119
84
  };
120
-
121
85
  return data;
122
86
  }
123
-
124
87
  function _webpackAppSsr() {
125
88
  const data = require("./webpack/webpack.app.ssr.config");
126
-
127
89
  _webpackAppSsr = function () {
128
90
  return data;
129
91
  };
130
-
131
92
  return data;
132
93
  }
133
-
134
94
  function _mutators() {
135
95
  const data = require("./webpack/mutators");
136
-
137
96
  _mutators = function () {
138
97
  return data;
139
98
  };
140
-
141
99
  return data;
142
100
  }
143
-
144
101
  function _ssrExpress() {
145
102
  const data = require("./ssr/ssr-express");
146
-
147
103
  _ssrExpress = function () {
148
104
  return data;
149
105
  };
150
-
151
106
  return data;
152
107
  }
153
-
154
108
  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; }
155
-
156
109
  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; }
157
-
158
110
  class ReactApp {
159
111
  constructor(name, entry, ssr, portRange, reactEnv, logger, dependencyResolver, prerender, bundler, ssrBundler, devServer, transformers = [], deploy, favicon) {
160
112
  this.name = name;
@@ -175,40 +127,38 @@ class ReactApp {
175
127
  (0, _defineProperty2().default)(this, "dir", 'public');
176
128
  (0, _defineProperty2().default)(this, "ssrDir", 'ssr');
177
129
  }
178
-
179
130
  async run(context) {
180
131
  const [from, to] = this.portRange;
181
132
  const port = await _toolboxNetwork().Port.getPort(from, to);
182
-
183
133
  if (this.devServer) {
184
134
  await this.devServer.listen(port);
185
135
  return port;
186
136
  }
187
-
188
137
  const devServerContext = await this.getDevServerContext(context);
189
138
  const devServer = this.reactEnv.getDevServer(devServerContext, [_mutators().addDevServer, _mutators().setOutput, ...this.transformers]);
190
139
  await devServer.listen(port);
191
140
  return port;
192
141
  }
193
-
194
142
  async runSsr(context) {
195
143
  var _this$logger, _this$logger2, _this$logger3;
196
-
197
144
  const [from, to] = this.portRange;
198
- const port = await _toolboxNetwork().Port.getPort(from, to); // bundle client
145
+ const port = await _toolboxNetwork().Port.getPort(from, to);
199
146
 
147
+ // bundle client
200
148
  const clientBundle = await this.buildClient(context);
201
149
  if (clientBundle.errors.length > 0) return {
202
150
  errors: clientBundle.errors
203
151
  };
204
- (_this$logger = this.logger) === null || _this$logger === void 0 ? void 0 : _this$logger.info('[react.application] [ssr] client bundle - complete'); // bundle server
152
+ (_this$logger = this.logger) === null || _this$logger === void 0 ? void 0 : _this$logger.info('[react.application] [ssr] client bundle - complete');
205
153
 
154
+ // bundle server
206
155
  const serverBundle = await this.buildSsr(context);
207
156
  if (serverBundle.errors.length > 0) return {
208
157
  errors: serverBundle.errors
209
158
  };
210
- (_this$logger2 = this.logger) === null || _this$logger2 === void 0 ? void 0 : _this$logger2.info('[react.application] [ssr] server bundle - complete'); // load server-side runtime
159
+ (_this$logger2 = this.logger) === null || _this$logger2 === void 0 ? void 0 : _this$logger2.info('[react.application] [ssr] server bundle - complete');
211
160
 
161
+ // load server-side runtime
212
162
  const app = await (0, _ssrExpress().loadSsrApp)(context.workdir, context.appName);
213
163
  (_this$logger3 = this.logger) === null || _this$logger3 === void 0 ? void 0 : _this$logger3.info('[react.application] [ssr] bundle code - loaded');
214
164
  const expressApp = (0, _ssrExpress().createExpressSsr)({
@@ -224,15 +174,15 @@ class ReactApp {
224
174
  port
225
175
  };
226
176
  }
227
-
228
177
  async buildClient(context) {
229
178
  const htmlConfig = [{
230
179
  title: context.appName,
231
180
  templateContent: (0, _webpack().html)(context.appName),
232
181
  minify: false,
233
182
  favicon: this.favicon
234
- }]; // extend, including prototype methods
183
+ }];
235
184
 
185
+ // extend, including prototype methods
236
186
  const ctx = Object.assign(Object.create(context), {
237
187
  html: htmlConfig,
238
188
  targets: [{
@@ -250,7 +200,6 @@ class ReactApp {
250
200
  const bundleResult = await bundler.run();
251
201
  return bundleResult[0];
252
202
  }
253
-
254
203
  async buildSsr(context) {
255
204
  // extend, including prototype methods
256
205
  const ctx = Object.assign(Object.create(context), _objectSpread(_objectSpread({}, context), {}, {
@@ -269,15 +218,15 @@ class ReactApp {
269
218
  const bundleResult = await bundler.run();
270
219
  return bundleResult[0];
271
220
  }
272
-
273
221
  async build(context) {
274
222
  const htmlConfig = [{
275
223
  title: context.name,
276
224
  templateContent: (0, _webpack().html)(context.name),
277
225
  minify: false,
278
- favicon: this.favicon // filename: ''.html`,
279
-
226
+ favicon: this.favicon
227
+ // filename: ''.html`,
280
228
  }];
229
+
281
230
  Object.assign(context, {
282
231
  html: htmlConfig
283
232
  });
@@ -290,7 +239,6 @@ class ReactApp {
290
239
  ssrPublicDir: ssrAppDir
291
240
  });
292
241
  }
293
-
294
242
  async buildSsrApp(context, ssrAppDir) {
295
243
  const ssrBundler = await this.getSsrBundler(context);
296
244
  await ssrBundler.run();
@@ -305,7 +253,6 @@ class ReactApp {
305
253
  await installer.install(capsuleSsrDir, this.getSsrPolicy(), new (_component().ComponentMap)(new Map()));
306
254
  return ssrAppDir;
307
255
  }
308
-
309
256
  getSsrPolicy() {
310
257
  const workspacePolicy = new (_dependencyResolver().WorkspacePolicy)([]);
311
258
  workspacePolicy.add({
@@ -345,17 +292,14 @@ class ReactApp {
345
292
  });
346
293
  return workspacePolicy;
347
294
  }
348
-
349
295
  getBundler(context) {
350
296
  if (this.bundler) return this.bundler;
351
297
  return this.getDefaultBundler(context);
352
298
  }
353
-
354
299
  getSsrBundler(context) {
355
300
  if (this.ssrBundler) return this.ssrBundler;
356
301
  return this.getDefaultSsrBundler(context);
357
302
  }
358
-
359
303
  async getDefaultBundler(context) {
360
304
  const {
361
305
  capsule
@@ -377,7 +321,6 @@ class ReactApp {
377
321
  const bundler = await reactEnv.getBundler(bundlerContext, transformers);
378
322
  return bundler;
379
323
  }
380
-
381
324
  async getDefaultSsrBundler(context) {
382
325
  const {
383
326
  capsule
@@ -396,7 +339,6 @@ class ReactApp {
396
339
  const bundler = await reactEnv.getBundler(bundlerContext, transformers);
397
340
  return bundler;
398
341
  }
399
-
400
342
  async getBuildContext(context, {
401
343
  outputPath
402
344
  }) {
@@ -427,22 +369,18 @@ class ReactApp {
427
369
  });
428
370
  return bundlerContext;
429
371
  }
430
-
431
372
  getPublicDir(artifactsDir) {
432
373
  return (0, _path().join)(artifactsDir, this.applicationType, this.name);
433
374
  }
434
-
435
375
  async getEntries(path) {
436
376
  if (Array.isArray(this.entry)) return this.entry;
437
377
  return this.entry(path);
438
378
  }
439
-
440
379
  async getSsrEntries() {
441
380
  if (!this.ssr) throw new (_bitError().BitError)('tried to build ssr without ssr entries');
442
381
  if (typeof this.ssr === 'string') return [this.ssr];
443
382
  return [await this.ssr()];
444
383
  }
445
-
446
384
  async getDevServerContext(context) {
447
385
  const entries = await this.getEntries();
448
386
  return Object.assign(context, {
@@ -455,13 +393,10 @@ class ReactApp {
455
393
  aliasHostDependencies: true
456
394
  });
457
395
  }
458
-
459
396
  getPeers() {
460
397
  return this.reactEnv.getPeerDependenciesList();
461
398
  }
462
-
463
399
  }
464
-
465
400
  exports.ReactApp = ReactApp;
466
401
 
467
402
  //# sourceMappingURL=react.application.js.map