1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[77],{343053(Ce,I,d){d.r(I),d.d(I,{UseDependencies:()=>P,default:()=>P});var Se=d(531715),o=d(437910),oe=d(241040),r=d(134307),k=d(954364);const C={noMarginBottom:"styles_noMarginBottom__gIKv8",grid:"styles_grid__ViZHj"};var se={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0};function S(){return(0,r.jsxs)("div",{className:C.grid,children:[(0,r.jsx)(k.vZ,{href:"/reference/packages/using-private-registries#use-jfrog-artifactory",imageUrl:"https://storage.googleapis.com/static.bit.dev/extensions-icons/artifactory.svg",children:"JFrog Artifactory"}),(0,r.jsx)(k.vZ,{href:"/reference/packages/using-private-registries#use-sonatype-nexus",imageUrl:"https://storage.googleapis.com/static.bit.dev/extensions-icons/nexus.svg",children:"Nexus"})]})}S.__bit_component=se;var Xe=d(336519);const Le=d.p+"static/images/422127c81dd6a622494c.png";var re=d(707009),p=d(87945),m=d(967590),c={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0};const X=()=>(0,r.jsx)(m.K,{commandName:"install",className:C.noMarginBottom});X.__bit_component=c;const L=()=>{const e={"packages...":"@teambit/design.inputs.input-text"};return(0,r.jsx)(m.K,{commandName:"install",commandExample:e})};L.__bit_component=c;const E=()=>{const e={"packages...":"lodash"};return(0,r.jsx)(m.K,{commandName:"install",commandExample:e})};E.__bit_component=c;const ie=()=>{const e={"component-name":"apps/to-do"};return(0,r.jsx)(m.K,{commandName:"show",commandExample:e})};ie.__bit_component=c;const B=()=>{const e={"component-patterns...":"acme.corporate/corporate-website"};return(0,r.jsx)(m.K,{commandName:"import",commandExample:e})};B.__bit_component=c;const W=()=>(0,r.jsxs)(p.BK,{children:[(0,r.jsx)(p.o$,{children:"npm i"}),(0,r.jsx)(p.vl,{children:" @teambit/design.inputs.dropdown"})]});W.__bit_component=c;const K=()=>(0,r.jsxs)(p.BK,{children:[(0,r.jsx)(p.o$,{children:"yarn add"}),(0,r.jsx)(p.vl,{children:" @teambit/design.inputs.dropdownn"})]});K.__bit_component=c;const U=()=>(0,r.jsxs)(p.BK,{children:[(0,r.jsx)(p.o$,{children:"pnpm i"}),(0,r.jsx)(p.vl,{children:" @teambit/design.inputs.dropdown"})]});U.__bit_component=c;function V(){const e=[{component:()=>(0,r.jsx)("span",{children:"pnpm"}),content:(0,r.jsx)(U,{})},{component:()=>(0,r.jsx)("span",{children:"yarn"}),content:(0,r.jsx)(K,{})},{component:()=>(0,r.jsx)("span",{children:"npm"}),content:(0,r.jsx)(W,{})}];return(0,r.jsx)(re.k,{priority:"folder",tabs:e})}V.__bit_component=c;var H=d(819267),l={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0},ae=["components"];function u(){return u=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},u.apply(null,arguments)}u.__bit_component=l;function R(e,s){if(e==null)return{};var n,t,i=Y(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}R.__bit_component=l;function Y(e,s){if(e==null)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(s.indexOf(t)!==-1)continue;n[t]=e[t]}return n}Y.__bit_component=l;var de={},pe="wrapper";function w(e){var s=e.components,n=R(e,ae);return(0,o.mdx)(pe,u({},de,n,{components:s,mdxType:"MDXLayout"}),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-ts"},`// @component: my-org.tasks-scope/apps/to-to 2// @filename: to-do.tsx 3 4import React, { useState } from 'react'; 5import { InputText } from '@teambit/design.inputs.input-text'; 6 7export type ToDoProps = { 8 initialTodo?: string; 9}; 10 11const inputStyle = { 12 width: 300, 13 padding: 10, 14}; 15 16export function ToDo({ initialTodo = 'first to-do!' }: ToDoProps) { 17 const [todos, setTodos] = useState([initialTodo]); 18 const [inputVal, setInputVal] = useState(''); 19 return ( 20 <> 21 <InputText 22 style={inputStyle} 23 value={inputVal} 24 placeholder="Write a to-do and hit the 'return' key" 25 onChange={(e) => { 26 setInputVal(e.target.value); 27 }} 28 onKeyDown={(e) => { 29 if (!(e.code === 'Enter') || inputVal === '') return; 30 setTodos((prev) => [inputVal, ...prev]); 31 setInputVal(''); 32 }} 33 /> 34 <ul> 35 {todos.map((todo, i) => ( 36 <li key={i}>{todo}</li> 37 ))} 38 </ul> 39 </> 40 ); 41} 42`)))}w.__bit_component=l,w.isMDXComponent=!0;var A={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0}
42;const ce=()=>(0,r.jsx)(H._,{codeType:"snippet",snippet:w});ce.__bit_component=A;const Z=()=>(0,r.jsx)(H._,{snippet:X});Z.__bit_component=A;var me=d(355192);const le=d.p+"static/images/02209a6133afb7821fb4.png";var g={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0},ue=["components"];function _(){return _=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},_.apply(null,arguments)}_.__bit_component=g;function $(e,s){if(e==null)return{};var n,t,i=F(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}$.__bit_component=g;function F(e,s){if(e==null)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(s.indexOf(t)!==-1)continue;n[t]=e[t]}return n}F.__bit_component=g;var ge={},_e="wrapper";function D(e){var s=e.components,n=$(e,ue);return(0,o.mdx)(_e,_({},ge,n,{components:s,mdxType:"MDXLayout"}),(0,o.mdx)("h4",null,"Component ID"),(0,o.mdx)("p",null,"The component ID of the component being reviewed."),(0,o.mdx)("p",null,`The component ID is a unique component identifier that consists of 'scope name' and 'component name'. 43When named properly, an ID reveals the component's purpose, context, and owner.`),(0,o.mdx)(oe.Image,{maxWidth:400,src:le,mdxType:"Image"}),(0,o.mdx)("p",null,"Use the component ID to perform actions on components in your workspace or remote scope."),(0,o.mdx)("p",null,"To learn more, see ",(0,o.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/components/component-id"},"Component ID"),"."))}D.__bit_component=g,D.isMDXComponent=!0;var x={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0},xe=["components"];function h(){return h=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},h.apply(null,arguments)}h.__bit_component=x;function J(e,s){if(e==null)return{};var n,t,i=z(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}J.__bit_component=x;function z(e,s){if(e==null)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(s.indexOf(t)!==-1)continue;n[t]=e[t]}return n}z.__bit_component=x;var he={},be="wrapper";function T(e){var s=e.components,n=J(e,xe);return(0,o.mdx)(be,h({},he,n,{components:s,mdxType:"MDXLayout"}),(0,o.mdx)("h4",null,"Dependencies"),(0,o.mdx)("p",null,"The 'dependencies' property lists the component regular dependencies."),(0,o.mdx)("p",null,(0,o.mdx)("inlineCode",{parentName:"p"},"@teambit/[email protected]"),` is listed as a dependency of this component since a relevant 'import' statement was detected in this component's files. 44This dependency is labeled as a component (`,(0,o.mdx)("inlineCode",{parentName:"p"},"(component)"),")."),(0,o.mdx)("p",null,"See the ",(0,o.mdx)("a",{parentName:"p",href:"#dependency-policy-and-dependency-resolution"},"Dependency policy and dependency resolution")," section to learn how Bit resolves the dependency type and version."))}T.__bit_component=x,T.isMDXComponent=!0;var b={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0},ye=["components"];function y(){return y=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},y.apply(null,arguments)}y.__bit_component=b;function G(e,s){if(e==null)return{};var n,t,i=Q(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}G.__bit_component=b;function Q(e,s){if(e==null)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(s.indexOf(t)!==-1)continue;n[t]=e[t]}return n}Q.__bit_component=b;var fe={},ve="wrapper";function M(e){var s=e.components,n=G(e,ye);return(0,o.mdx)(ve,y({},fe,n,{components:s,mdxType:"MDXLayout"}),(0,o.mdx)("h4",null,"Dev dependencies"),(0,o.mdx)("p",null,"The 'dev dependencies' property lists the component dev dependencies (dependencies that are used for its development and are not used in runtime)."),(0,o.mdx)("p",null,"See the ",(0,o.mdx)("a",{parentName:"p",href:"#dependency-policy-and-dependency-resolution"},"Dependency policy and dependency resolution")," section to learn how Bit resolves the dependency type and version."))}M.__bit_component=b,M.isMDXComponent=!0;var f={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0}
44,je=["components"];function v(){return v=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},v.apply(null,arguments)}v.__bit_component=f;function q(e,s){if(e==null)return{};var n,t,i=ee(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}q.__bit_component=f;function ee(e,s){if(e==null)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(s.indexOf(t)!==-1)continue;n[t]=e[t]}return n}ee.__bit_component=f;var Oe={},Pe="wrapper";function N(e){var s=e.components,n=q(e,je);return(0,o.mdx)(Pe,v({},Oe,n,{components:s,mdxType:"MDXLayout"}),(0,o.mdx)("h4",null,"Peer dependencies"),(0,o.mdx)("p",null,"The 'peer dependencies' property lists the component peer dependencies."),(0,o.mdx)("p",null,`Peer dependencies are dependencies that are expected to be included in a component's host application. 45Since peer dependencies play a special "public role" in an app, such as the medium of communication between modules or the app's global state, they are required to exist in just a single instance, a single version.`),(0,o.mdx)("p",null,"See the ",(0,o.mdx)("a",{parentName:"p",href:"#dependency-policy-and-dependency-resolution"},"Dependency policy and dependency resolution")," section to learn how Bit resolves the dependency type and version."))}N.__bit_component=f,N.isMDXComponent=!0;var we={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0};const De=[(0,r.jsx)(D,{}),(0,r.jsx)(T,{}),(0,r.jsx)(M,{}),(0,r.jsx)(N,{})],Te=` 46\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 47\u2502 id \u2502 my-org.tasks-scope/apps/to-do \u2502 48\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 49\u2502 dependencies \u2502 @teambit/[email protected] (component) \u2502 50\u2502 \u2502 core-js@^3.0.0-------------------------- (package) \u2502 51\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 52\u2502 dev dependencies \u2502 @types/[email protected] (package) \u2502 53\u2502 \u2502 @babel/[email protected] (package) \u2502 54\u2502 \u2502 @types/jest@^26.0.0-------------------- (package) \u2502 55\u2502 \u2502 @types/react-dom@^17.0.5--------------- (package) \u2502 56\u2502 \u2502 @types/react@^17.0.8------------------- (package) \u2502 57\u2502 \u2502 @types/[email protected] (package) \u2502 58\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 59\u2502 peer dependencies \u2502 @testing-library/react@^12.1.5- (package) \u2502 60\u2502 \u2502 react-dom@^16.8.0 || ^17.0.0--- (package) \u2502 61\u2502 \u2502 react@^16.8.0 || ^17.0.0------- (package) \u2502 62\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518`,Me=()=>(0,r.jsx)(me.g,{bitShowOutput:Te,descriptions:De});Me.__bit_component=we;var j={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0}
62,Ne=["components"];function O(){return O=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},O.apply(null,arguments)}O.__bit_component=j;function ne(e,s){if(e==null)return{};var n,t,i=te(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)===-1&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}ne.__bit_component=j;function te(e,s){if(e==null)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(s.indexOf(t)!==-1)continue;n[t]=e[t]}return n}te.__bit_component=j;var Ie={},ke="wrapper";function P(e){var s=e.components,n=ne(e,Ne);return(0,o.mdx)(ke,O({},Ie,n,{components:s,mdxType:"MDXLayout"}),(0,o.mdx)("h1",null,"Use in existing projects"),(0,o.mdx)("p",null,"Components can be installed in legacy projects using Bit or other standard package managers. As needed you can import components for debugging, testing or for applying changes in the desired context."),(0,o.mdx)("h2",null,"Using package managers"),(0,o.mdx)("p",null,"Once ",(0,o.mdx)("a",{parentName:"p",href:"docs/getting-started/collaborate/exporting-components"},"components are released"),", you can install them using your preferred package manager:"),(0,o.mdx)(V,{mdxType:"PackageManagers"}),(0,o.mdx)("p",null,(0,o.mdx)("a",{parentName:"p",href:"reference/packages/npmrc"},"Configure your npmrc to the Bit registry"),", or use Bit from your private registry."),(0,o.mdx)("h2",null,"Importing components"),(0,o.mdx)("p",null,"You can import components for debugging, testing or for applying changes in the desired context by running the following command:"),(0,o.mdx)(B,{mdxType:"Import"}),(0,o.mdx)("p",null,"After testing, debugging or changing the component you can either eject it using ",(0,o.mdx)("a",{parentName:"p",href:"reference/workspace/importing-components#convert-a-workspace-component-to-an-external-dependency"},"bit eject")," or ",(0,o.mdx)("a",{parentName:"p",href:"reference/workspace/exporting-components#ejecting-components"},"bit export --eject")," in case you are looking to release a change."),(0,o.mdx)("h2",null,"Use from your private registry"),(0,o.mdx)("p",null,"You can set up a private registry as a reverse proxy for your Bit packages."),(0,o.mdx)(S,{mdxType:"Registries"}),(0,o.mdx)("h2",null,"Using Bit"),(0,o.mdx)("p",null,"Run the following to ",(0,o.mdx)("a",{parentName:"p",href:"reference/components/installing-components"},"install")," the component as an external dependency:"),(0,o.mdx)(L,{mdxType:"InstallExample"}),(0,o.mdx)(Z,{mdxType:"ExpandedCommand"}),(0,o.mdx)("p",null,"You can install packages from NPM in the same way you use components:"),(0,o.mdx)(E,{mdxType:"InstallLodashExample"}),(0,o.mdx)("h2",null,"Harmony features"),(0,o.mdx)("p",null,"Using Harmony features in existing projects can be achieved by installing the ",(0,o.mdx)("inlineCode",{parentName:"p"},"@bitdev/harmony.harmony"),` package in your existing project. 63Create a Harmony application instance and install the required features using your package manager of choice.`),(0,o.mdx)("h2",null,"Learn more"),(0,o.mdx)("ul",null,(0,o.mdx)("li",{parentName:"ul"},(0,o.mdx)("a",{parentName:"li",href:"reference/change-requests/building-lanes"},"Manage component changes")),(0,o.mdx)("li",{parentName:"ul"},(0,o.mdx)("a",{parentName:"li",href:"reference/dependencies/updating-dependencies"},"Keep components up-to-date")),(0,o.mdx)("li",{parentName:"ul"},(0,o.mdx)("a",{parentName:"li",href:"reference/workspace/importing-components#forking-components"},"Forking components"))))}P.__bit_component=j,P.isMDXComponent=!0;var Ee={id:"teambit.docs/content/getting-started/[email protected]",homepage:"https://bit.cloud/teambit/docs/content/getting-started/use-dependencies",exported:!0}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.