@teambit/envs.aspect-docs.envs 0.0.176 → 0.0.178
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.
- package/dist/envs.composition.js +5 -14
- package/dist/envs.composition.js.map +1 -1
- package/dist/envs.mdx.js +324 -330
- package/dist/envs.mdx.js.map +1 -1
- package/dist/index.js +1 -8
- package/dist/index.js.map +1 -1
- package/dist/{preview-1779204000743.js → preview-1783010236244.js} +2 -2
- package/package.json +9 -17
- package/types/asset.d.ts +15 -1
package/dist/envs.mdx.js
CHANGED
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = MDXContent;
|
|
7
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
-
var _react = require("@mdx-js/react");
|
|
9
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
10
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -13,6 +5,8 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
|
|
|
13
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
14
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
15
7
|
MDXContent.isMDXComponent = true;
|
|
8
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { useMDXComponents as _provideComponents } from "@mdx-js/react";
|
|
16
10
|
function _createMdxContent(props) {
|
|
17
11
|
var _components = _objectSpread(_objectSpread({
|
|
18
12
|
a: "a",
|
|
@@ -30,695 +24,695 @@ function _createMdxContent(props) {
|
|
|
30
24
|
pre: "pre",
|
|
31
25
|
strong: "strong",
|
|
32
26
|
ul: "ul"
|
|
33
|
-
}, (
|
|
34
|
-
return (
|
|
35
|
-
children: [(
|
|
27
|
+
}, _provideComponents()), props.components);
|
|
28
|
+
return _jsxs(_Fragment, {
|
|
29
|
+
children: [_jsx(_components.p, {
|
|
36
30
|
children: "The Envs aspect runs Bit environments and environment services, and defines their structure."
|
|
37
|
-
}), "\n", (
|
|
31
|
+
}), "\n", _jsx(_components.p, {
|
|
38
32
|
children: "A Bit environment is a development environment encapsulated in a Bit component. Just like other components, Bit environments can be instantly added to your workspace to start developing, testing, and building components with zero configurations.\nDifferent environments can be easily applied to multiple components in a workspace, and can be easily extended or customized to fit your needs and development stack. For example, try the React environment to start developing React components in your workspace.\nLike all Bit components, Bit environments are reusable, so you can share them across projects and teams to greatly speed up and standardize development."
|
|
39
|
-
}), "\n", (
|
|
33
|
+
}), "\n", _jsx(_components.h4, {
|
|
40
34
|
children: "Example"
|
|
41
|
-
}), "\n", (
|
|
42
|
-
children: (
|
|
35
|
+
}), "\n", _jsx(_components.pre, {
|
|
36
|
+
children: _jsx(_components.code, {
|
|
43
37
|
className: "language-json",
|
|
44
38
|
children: "// Using the 'Node' and 'React' environments for different components in a Bit workspace.\n{\n \"teambit.workspace/variants\": {\n \"components/ui\": {\n \"teambit.react/react\": {}\n },\n \"components/utils\": {\n \"teambit.harmony/node\": {}\n }\n }\n}\n"
|
|
45
39
|
})
|
|
46
|
-
}), "\n", (
|
|
40
|
+
}), "\n", _jsx(_components.h4, {
|
|
47
41
|
children: "Features"
|
|
48
|
-
}), "\n", (
|
|
49
|
-
children: ["\n", (
|
|
50
|
-
children: ["\n", (
|
|
51
|
-
children: [(
|
|
42
|
+
}), "\n", _jsxs(_components.ul, {
|
|
43
|
+
children: ["\n", _jsxs(_components.li, {
|
|
44
|
+
children: ["\n", _jsxs(_components.p, {
|
|
45
|
+
children: [_jsx(_components.strong, {
|
|
52
46
|
children: "Blazing fast environment setup"
|
|
53
47
|
}), ": Setting up an environment requires nothing more than configuring a workspace to use a Bit extension.\nGet started in seconds and focus on the thing that matters most - delivering great features."]
|
|
54
48
|
}), "\n"]
|
|
55
|
-
}), "\n", (
|
|
56
|
-
children: ["\n", (
|
|
57
|
-
children: [(
|
|
49
|
+
}), "\n", _jsxs(_components.li, {
|
|
50
|
+
children: ["\n", _jsxs(_components.p, {
|
|
51
|
+
children: [_jsx(_components.strong, {
|
|
58
52
|
children: "Multiple environments in a single workspace"
|
|
59
53
|
}), ": No need to constantly switch between workspaces as different environments,\nset to handle different components, can all be used in parallel in a single workspace."]
|
|
60
54
|
}), "\n"]
|
|
61
|
-
}), "\n", (
|
|
62
|
-
children: ["\n", (
|
|
63
|
-
children: [(
|
|
55
|
+
}), "\n", _jsxs(_components.li, {
|
|
56
|
+
children: ["\n", _jsxs(_components.p, {
|
|
57
|
+
children: [_jsx(_components.strong, {
|
|
64
58
|
children: "Less to learn"
|
|
65
59
|
}), ": Using a pre-configured environment extension means you don't have to get into all the details of your build tooling.\nThat's a especially important when onboarding a new developer to your team."]
|
|
66
60
|
}), "\n"]
|
|
67
|
-
}), "\n", (
|
|
68
|
-
children: ["\n", (
|
|
69
|
-
children: [(
|
|
61
|
+
}), "\n", _jsxs(_components.li, {
|
|
62
|
+
children: ["\n", _jsxs(_components.p, {
|
|
63
|
+
children: [_jsx(_components.strong, {
|
|
70
64
|
children: "Customizable and extensible"
|
|
71
65
|
}), ": Environments can be extended to add or override configurations.\nQuickly add your own modifications to get an environment that best suits your needs.\nExport your environment extension to a remote scope to have it available to all your team."]
|
|
72
66
|
}), "\n"]
|
|
73
|
-
}), "\n", (
|
|
74
|
-
children: ["\n", (
|
|
75
|
-
children: [(
|
|
67
|
+
}), "\n", _jsxs(_components.li, {
|
|
68
|
+
children: ["\n", _jsxs(_components.p, {
|
|
69
|
+
children: [_jsx(_components.strong, {
|
|
76
70
|
children: "Standardized development"
|
|
77
71
|
}), ": Sharing and reusing environments makes it easier to maintain consistency in development across multiple decoupled Bit workspaces."]
|
|
78
72
|
}), "\n"]
|
|
79
|
-
}), "\n", (
|
|
80
|
-
children: ["\n", (
|
|
81
|
-
children: [(
|
|
73
|
+
}), "\n", _jsxs(_components.li, {
|
|
74
|
+
children: ["\n", _jsxs(_components.p, {
|
|
75
|
+
children: [_jsx(_components.strong, {
|
|
82
76
|
children: "Easy to maintain"
|
|
83
|
-
}), ": Get your environment's latest updates with just a simple ", (
|
|
77
|
+
}), ": Get your environment's latest updates with just a simple ", _jsx(_components.code, {
|
|
84
78
|
children: "bit import"
|
|
85
79
|
}), " command. Roll-back as easily, if needed."]
|
|
86
80
|
}), "\n"]
|
|
87
81
|
}), "\n"]
|
|
88
|
-
}), "\n", (
|
|
82
|
+
}), "\n", _jsx(_components.h2, {
|
|
89
83
|
children: "CLI reference"
|
|
90
|
-
}), "\n", (
|
|
91
|
-
children: ["Bit environments make use of Bit's CLI to execute their different services. That means, ", (
|
|
84
|
+
}), "\n", _jsxs(_components.p, {
|
|
85
|
+
children: ["Bit environments make use of Bit's CLI to execute their different services. That means, ", _jsx(_components.code, {
|
|
92
86
|
children: "bit test"
|
|
93
87
|
}), ", for example, may execute different test runners, depending on the environment in use."]
|
|
94
|
-
}), "\n", (
|
|
88
|
+
}), "\n", _jsx(_components.h4, {
|
|
95
89
|
children: "start"
|
|
96
|
-
}), "\n", (
|
|
90
|
+
}), "\n", _jsx(_components.p, {
|
|
97
91
|
children: "Runs the development serve (that includes running the Workspace UI)."
|
|
98
|
-
}), "\n", (
|
|
99
|
-
children: (
|
|
92
|
+
}), "\n", _jsx(_components.pre, {
|
|
93
|
+
children: _jsx(_components.code, {
|
|
100
94
|
className: "language-shell",
|
|
101
95
|
children: "// run the dev server\nbit start\n"
|
|
102
96
|
})
|
|
103
|
-
}), "\n", (
|
|
97
|
+
}), "\n", _jsx(_components.h4, {
|
|
104
98
|
children: "build"
|
|
105
|
-
}), "\n", (
|
|
99
|
+
}), "\n", _jsx(_components.p, {
|
|
106
100
|
children: "Runs the build pipeline (without tagging components with a new release version)."
|
|
107
|
-
}), "\n", (
|
|
108
|
-
children: (
|
|
101
|
+
}), "\n", _jsx(_components.pre, {
|
|
102
|
+
children: _jsx(_components.code, {
|
|
109
103
|
className: "language-shell",
|
|
110
104
|
children: "bit build\n"
|
|
111
105
|
})
|
|
112
|
-
}), "\n", (
|
|
106
|
+
}), "\n", _jsx(_components.h4, {
|
|
113
107
|
children: "test"
|
|
114
|
-
}), "\n", (
|
|
108
|
+
}), "\n", _jsx(_components.p, {
|
|
115
109
|
children: "Runs all tests."
|
|
116
|
-
}), "\n", (
|
|
117
|
-
children: (
|
|
110
|
+
}), "\n", _jsx(_components.pre, {
|
|
111
|
+
children: _jsx(_components.code, {
|
|
118
112
|
className: "language-shell",
|
|
119
113
|
children: "bit test\n"
|
|
120
114
|
})
|
|
121
|
-
}), "\n", (
|
|
115
|
+
}), "\n", _jsx(_components.h4, {
|
|
122
116
|
children: "compile"
|
|
123
|
-
}), "\n", (
|
|
117
|
+
}), "\n", _jsx(_components.p, {
|
|
124
118
|
children: "Compiles all components."
|
|
125
|
-
}), "\n", (
|
|
126
|
-
children: (
|
|
119
|
+
}), "\n", _jsx(_components.pre, {
|
|
120
|
+
children: _jsx(_components.code, {
|
|
127
121
|
className: "language-shell",
|
|
128
122
|
children: "bit compile\n"
|
|
129
123
|
})
|
|
130
|
-
}), "\n", (
|
|
124
|
+
}), "\n", _jsx(_components.h4, {
|
|
131
125
|
children: "lint"
|
|
132
|
-
}), "\n", (
|
|
126
|
+
}), "\n", _jsx(_components.p, {
|
|
133
127
|
children: "Get lint results for all components."
|
|
134
|
-
}), "\n", (
|
|
135
|
-
children: (
|
|
128
|
+
}), "\n", _jsx(_components.pre, {
|
|
129
|
+
children: _jsx(_components.code, {
|
|
136
130
|
className: "language-shell",
|
|
137
131
|
children: "bit lint\n"
|
|
138
132
|
})
|
|
139
|
-
}), "\n", (
|
|
133
|
+
}), "\n", _jsx(_components.h2, {
|
|
140
134
|
children: "Usage"
|
|
141
|
-
}), "\n", (
|
|
135
|
+
}), "\n", _jsx(_components.h3, {
|
|
142
136
|
children: "Setting a default environment for the workspace"
|
|
143
|
-
}), "\n", (
|
|
144
|
-
children: ["Environments can only be configured using the ", (
|
|
137
|
+
}), "\n", _jsxs(_components.p, {
|
|
138
|
+
children: ["Environments can only be configured using the ", _jsx(_components.code, {
|
|
145
139
|
children: "teambit.workspace/variants"
|
|
146
|
-
}), " workspace API. That means the ", (
|
|
140
|
+
}), " workspace API. That means the ", _jsx(_components.code, {
|
|
147
141
|
children: "teambit.workspace/workspace"
|
|
148
|
-
}), " cannot be utilized to set an environment as the default for all components. To achieve a similar result, select all components using the ", (
|
|
142
|
+
}), " cannot be utilized to set an environment as the default for all components. To achieve a similar result, select all components using the ", _jsx(_components.code, {
|
|
149
143
|
children: "*"
|
|
150
144
|
}), " wildcard."]
|
|
151
|
-
}), "\n", (
|
|
145
|
+
}), "\n", _jsx(_components.p, {
|
|
152
146
|
children: "For example:"
|
|
153
|
-
}), "\n", (
|
|
154
|
-
children: (
|
|
147
|
+
}), "\n", _jsx(_components.pre, {
|
|
148
|
+
children: _jsx(_components.code, {
|
|
155
149
|
className: "language-json",
|
|
156
150
|
children: "{\n \"teambit.workspace/variants\": {\n \"*\": {\n \"teambit.react/react\": {}\n }\n }\n}\n"
|
|
157
151
|
})
|
|
158
|
-
}), "\n", (
|
|
159
|
-
children: ["\n", (
|
|
160
|
-
children: [(
|
|
152
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
153
|
+
children: ["\n", _jsxs(_components.p, {
|
|
154
|
+
children: [_jsx("p", {
|
|
161
155
|
style: {
|
|
162
156
|
color: '#c31313'
|
|
163
157
|
},
|
|
164
158
|
children: "Never use the '*' wildcard in a workspace that uses multiple environments!"
|
|
165
159
|
}), "\nInstead, use exclusive namespaces or directories to select and configure each group of components to use its own\nenvironment (see an example in the next section)."]
|
|
166
160
|
}), "\n"]
|
|
167
|
-
}), "\n", (
|
|
161
|
+
}), "\n", _jsx("br", {}), "\n", _jsx("br", {}), "\n", _jsx(_components.p, {
|
|
168
162
|
children: "To learn more, see the 'Troubleshooting' section."
|
|
169
|
-
}), "\n", (
|
|
170
|
-
children: ["\n", (
|
|
163
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
164
|
+
children: ["\n", _jsx(_components.p, {
|
|
171
165
|
children: "A single component (with the same version) cannot use more than a single environment."
|
|
172
166
|
}), "\n"]
|
|
173
|
-
}), "\n", (
|
|
167
|
+
}), "\n", _jsx(_components.h3, {
|
|
174
168
|
children: "Setting multiple environments"
|
|
175
|
-
}), "\n", (
|
|
176
|
-
children: ["A single workspace can use different environments for different sets of components. Setting an environment on a specific group of components is done by selecting the group and applying the environment. This is done using ", (
|
|
169
|
+
}), "\n", _jsxs(_components.p, {
|
|
170
|
+
children: ["A single workspace can use different environments for different sets of components. Setting an environment on a specific group of components is done by selecting the group and applying the environment. This is done using ", _jsx(_components.code, {
|
|
177
171
|
children: "teambit.workspace/variants"
|
|
178
172
|
}), "."]
|
|
179
|
-
}), "\n", (
|
|
173
|
+
}), "\n", _jsx(_components.p, {
|
|
180
174
|
children: "For example, to set the Node and React environments on two sets of components (selected by their directory):"
|
|
181
|
-
}), "\n", (
|
|
182
|
-
children: (
|
|
175
|
+
}), "\n", _jsx(_components.pre, {
|
|
176
|
+
children: _jsx(_components.code, {
|
|
183
177
|
className: "language-json",
|
|
184
178
|
children: "{\n \"teambit.workspace/variants\": {\n \"components/ui\": {\n \"teambit.react/react\": {}\n },\n \"components/utils\": {\n \"teambit.harmony/node\": {}\n }\n }\n}\n"
|
|
185
179
|
})
|
|
186
|
-
}), "\n", (
|
|
180
|
+
}), "\n", _jsx(_components.h3, {
|
|
187
181
|
children: "Extending an environment"
|
|
188
|
-
}), "\n", (
|
|
189
|
-
children: ["\n", (
|
|
182
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
183
|
+
children: ["\n", _jsx(_components.p, {
|
|
190
184
|
children: "This section goes through the steps of extending the 'main runtime'.\nSee the 'Runtime Environment' section to learn how to extend multiple runtime environments."
|
|
191
185
|
}), "\n"]
|
|
192
|
-
}), "\n", (
|
|
193
|
-
children: ["An environment extension is a component that extends an existing environment. An extension file will have the ", (
|
|
186
|
+
}), "\n", _jsxs(_components.p, {
|
|
187
|
+
children: ["An environment extension is a component that extends an existing environment. An extension file will have the ", _jsx(_components.code, {
|
|
194
188
|
children: ".extension.ts"
|
|
195
189
|
}), " suffix as a convention."]
|
|
196
|
-
}), "\n", (
|
|
197
|
-
children: ["\n", (
|
|
198
|
-
children: ["The ", (
|
|
190
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
191
|
+
children: ["\n", _jsxs(_components.p, {
|
|
192
|
+
children: ["The ", _jsx(_components.code, {
|
|
199
193
|
children: "*.extensions.ts"
|
|
200
194
|
}), " pattern should only be used when no other 'runtime environment' is being extended other than the 'main runtime.' For more details, see the 'runtime environments' section."]
|
|
201
195
|
}), "\n"]
|
|
202
|
-
}), "\n", (
|
|
196
|
+
}), "\n", _jsx(_components.p, {
|
|
203
197
|
children: "To create and use an environment extension:"
|
|
204
|
-
}), "\n", (
|
|
205
|
-
children: ["\n", (
|
|
198
|
+
}), "\n", _jsxs(_components.ol, {
|
|
199
|
+
children: ["\n", _jsx(_components.li, {
|
|
206
200
|
children: "Create the extension files"
|
|
207
|
-
}), "\n", (
|
|
201
|
+
}), "\n", _jsx(_components.li, {
|
|
208
202
|
children: "Use and extend an existing environment"
|
|
209
|
-
}), "\n", (
|
|
203
|
+
}), "\n", _jsx(_components.li, {
|
|
210
204
|
children: "Track the new component"
|
|
211
|
-
}), "\n", (
|
|
205
|
+
}), "\n", _jsx(_components.li, {
|
|
212
206
|
children: "Use the new extension component ID to set it in the workspace configuration file"
|
|
213
|
-
}), "\n", (
|
|
207
|
+
}), "\n", _jsx(_components.li, {
|
|
214
208
|
children: "(Optional) Tag the new component"
|
|
215
|
-
}), "\n", (
|
|
209
|
+
}), "\n", _jsx(_components.li, {
|
|
216
210
|
children: "(Optional) Export the component the make it available to be used by others"
|
|
217
211
|
}), "\n"]
|
|
218
|
-
}), "\n", (
|
|
212
|
+
}), "\n", _jsx(_components.h4, {
|
|
219
213
|
children: "1. Create the environment extension files"
|
|
220
|
-
}), "\n", (
|
|
214
|
+
}), "\n", _jsx(_components.p, {
|
|
221
215
|
children: "We'll start by creating a new extension:"
|
|
222
|
-
}), "\n", (
|
|
223
|
-
children: (
|
|
216
|
+
}), "\n", _jsx(_components.pre, {
|
|
217
|
+
children: _jsx(_components.code, {
|
|
224
218
|
className: "language-shell",
|
|
225
219
|
children: "// In the workspace's root directory\nmkdir -p extensions/custom-react\ntouch extensions/custom-react/custom-react.extension.ts\ntouch extensions/custom-react/index.ts\n"
|
|
226
220
|
})
|
|
227
|
-
}), "\n", (
|
|
221
|
+
}), "\n", _jsx(_components.h4, {
|
|
228
222
|
children: "2. Use an existing environment to extend it"
|
|
229
|
-
}), "\n", (
|
|
230
|
-
children: ["\n", (
|
|
223
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
224
|
+
children: ["\n", _jsx(_components.p, {
|
|
231
225
|
children: "The below code uses the React environment as an example."
|
|
232
226
|
}), "\n"]
|
|
233
|
-
}), "\n", (
|
|
234
|
-
children: ["Our files will have the following code (the code below will only extend the ", (
|
|
227
|
+
}), "\n", _jsxs(_components.p, {
|
|
228
|
+
children: ["Our files will have the following code (the code below will only extend the ", _jsx(_components.code, {
|
|
235
229
|
children: "@teambit.react/react"
|
|
236
230
|
}), " environment without changing its configurations):"]
|
|
237
|
-
}), "\n", (
|
|
238
|
-
children: (
|
|
231
|
+
}), "\n", _jsx(_components.pre, {
|
|
232
|
+
children: _jsx(_components.code, {
|
|
239
233
|
className: "language-tsx",
|
|
240
234
|
children: "// custom-react.extension.ts\n\n// Import from the Environments aspect to register this extension as an environment\nimport { EnvsMain, EnvsAspect } from '@teambit/envs';\n// Import from the React aspect to extend it\nimport { ReactAspect, ReactMain } from '@teambit/react';\n\nexport class CustomReactExtension {\n constructor(private react: ReactMain) {}\n\n // Set the necessary dependencies to be injected (by Bit) into the following 'provider' function\n static dependencies: any = [EnvsAspect, ReactAspect];\n\n static async provider([envs, react]: [EnvsMain, ReactMain]) {\n // The 'compose' methods to compose the overrides into a single environment\n const customReactEnv = react.compose([\n // This is were the environment's 'transformers' will be used to customize it\n ]);\n\n // Register this extension as an environment using the \"registerEnv\" slot (provided by the Environments aspect).\n envs.registerEnv(customReactEnv);\n\n return new CustomReactExtension(react);\n }\n}\n"
|
|
241
235
|
})
|
|
242
|
-
}), "\n", (
|
|
243
|
-
children: (
|
|
236
|
+
}), "\n", _jsx(_components.pre, {
|
|
237
|
+
children: _jsx(_components.code, {
|
|
244
238
|
className: "language-ts",
|
|
245
239
|
children: "// index.ts\n\nimport { CustomReactExtension } from './custom-react.extension';\nexport { CustomReactExtension };\nexport default CustomReactExtension;\n"
|
|
246
240
|
})
|
|
247
|
-
}), "\n", (
|
|
241
|
+
}), "\n", _jsx(_components.h4, {
|
|
248
242
|
children: "3. Track the extension component"
|
|
249
|
-
}), "\n", (
|
|
243
|
+
}), "\n", _jsx(_components.p, {
|
|
250
244
|
children: "We'll then track the new component (with the 'my-extensions' namespace):"
|
|
251
|
-
}), "\n", (
|
|
252
|
-
children: (
|
|
245
|
+
}), "\n", _jsx(_components.pre, {
|
|
246
|
+
children: _jsx(_components.code, {
|
|
253
247
|
className: "language-shell",
|
|
254
248
|
children: "bit add extensions/custom-react -n my-extensions\n"
|
|
255
249
|
})
|
|
256
|
-
}), "\n", (
|
|
250
|
+
}), "\n", _jsx(_components.h4, {
|
|
257
251
|
children: "4. Set the extension component in the workspace config file"
|
|
258
|
-
}), "\n", (
|
|
259
|
-
children: ["Our extension component now has a component ID that can be used in our ", (
|
|
252
|
+
}), "\n", _jsxs(_components.p, {
|
|
253
|
+
children: ["Our extension component now has a component ID that can be used in our ", _jsx(_components.code, {
|
|
260
254
|
children: "workspace.jsonc"
|
|
261
255
|
}), " configuration file:"]
|
|
262
|
-
}), "\n", (
|
|
263
|
-
children: (
|
|
256
|
+
}), "\n", _jsx(_components.pre, {
|
|
257
|
+
children: _jsx(_components.code, {
|
|
264
258
|
className: "language-json",
|
|
265
259
|
children: "{\n \"teambit.workspace/workspace\": {\n \"name\": \"my-workspace\",\n \"icon\": \"https://image.flaticon.com/icons/svg/185/185034.svg\",\n \"defaultScope\": \"my-org.my-extensions\"\n },\n \"teambit.workspace/variants\": {\n \"*\": {\n \"my-org.my-extensions/custom-react\": {}\n }\n }\n}\n"
|
|
266
260
|
})
|
|
267
|
-
}), "\n", (
|
|
261
|
+
}), "\n", _jsx(_components.h3, {
|
|
268
262
|
children: "The anatomy of an environment extension"
|
|
269
|
-
}), "\n", (
|
|
263
|
+
}), "\n", _jsx(_components.p, {
|
|
270
264
|
children: "An environment extension uses the following Bit components to extend an existing environment, and to register itself as an environment:"
|
|
271
|
-
}), "\n", (
|
|
272
|
-
children: ["\n", (
|
|
273
|
-
children: ["\n", (
|
|
274
|
-
children: ["The ", (
|
|
265
|
+
}), "\n", _jsxs(_components.ul, {
|
|
266
|
+
children: ["\n", _jsxs(_components.li, {
|
|
267
|
+
children: ["\n", _jsxs(_components.p, {
|
|
268
|
+
children: ["The ", _jsx(_components.strong, {
|
|
275
269
|
children: "\"base\" environment"
|
|
276
|
-
}), " (e.g, ", (
|
|
270
|
+
}), " (e.g, ", _jsx(_components.code, {
|
|
277
271
|
children: "@teambit/react"
|
|
278
|
-
}), ") is extended and customized using its override methods. Each override method, or \"environment transformer\", corresponds to a Bit extension component used by the environment (e.g, the TypeScript component). Using an 'environment transformer' will add new configurations to the relevant Bit component and will override any conflicting ones.", (
|
|
272
|
+
}), ") is extended and customized using its override methods. Each override method, or \"environment transformer\", corresponds to a Bit extension component used by the environment (e.g, the TypeScript component). Using an 'environment transformer' will add new configurations to the relevant Bit component and will override any conflicting ones.", _jsx("br", {}), " The full list of available 'environment transformers' can be seen in the specific environment's documentation (see: React, React Native, Node)."]
|
|
279
273
|
}), "\n"]
|
|
280
|
-
}), "\n", (
|
|
281
|
-
children: ["\n", (
|
|
282
|
-
children: ["The ", (
|
|
274
|
+
}), "\n", _jsxs(_components.li, {
|
|
275
|
+
children: ["\n", _jsxs(_components.p, {
|
|
276
|
+
children: ["The ", _jsx(_components.strong, {
|
|
283
277
|
children: "'Environments' component"
|
|
284
|
-
}), " (", (
|
|
278
|
+
}), " (", _jsx(_components.code, {
|
|
285
279
|
children: "@teambit/envs"
|
|
286
280
|
}), ") is used to:"]
|
|
287
|
-
}), "\n", (
|
|
288
|
-
children: ["\n", (
|
|
281
|
+
}), "\n", _jsxs(_components.ol, {
|
|
282
|
+
children: ["\n", _jsx(_components.li, {
|
|
289
283
|
children: "Register the new environment using its \"slot\""
|
|
290
|
-
}), "\n", (
|
|
284
|
+
}), "\n", _jsx(_components.li, {
|
|
291
285
|
children: "Override a \"service handler\". This is done to replace a Bit component used by an environment service. For example, to set the \"compiler\" service handler to use Babel instead of TypeScript"
|
|
292
286
|
}), "\n"]
|
|
293
287
|
}), "\n"]
|
|
294
288
|
}), "\n"]
|
|
295
|
-
}), "\n", (
|
|
289
|
+
}), "\n", _jsx(_components.h4, {
|
|
296
290
|
children: "Override the config for a Bit component used by the environment"
|
|
297
|
-
}), "\n", (
|
|
298
|
-
children: ["\n", (
|
|
291
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
292
|
+
children: ["\n", _jsx(_components.p, {
|
|
299
293
|
children: "The current Envs API will soon be replaced."
|
|
300
294
|
}), "\n"]
|
|
301
|
-
}), "\n", (
|
|
295
|
+
}), "\n", _jsx(_components.p, {
|
|
302
296
|
children: "The example below is of a React environment extension. This new environment overrides React's DevServer configuration by setting a new Webpack configuration file."
|
|
303
|
-
}), "\n", (
|
|
304
|
-
children: (
|
|
297
|
+
}), "\n", _jsx(_components.pre, {
|
|
298
|
+
children: _jsx(_components.code, {
|
|
305
299
|
className: "language-tsx",
|
|
306
300
|
children: "// custom-react.extension.ts\n\n// Import from the Environments aspect to register this extension as an environment\nimport { EnvsMain, EnvsAspect } from '@teambit/envs';\n// Import from the React aspect to extend it and override its DevServer config\nimport { ReactAspect, ReactMain } from '@teambit/react';\n\nconst newWebpackConfig = require('./webpack/new-webpack-config');\n\nexport class CustomReactExtension {\n constructor(private react: ReactMain) {}\n\n // Set the necessary dependencies to be injected (by Bit) into the following 'provider' function\n static dependencies: any = [EnvsAspect, ReactAspect];\n\n static async provider([envs, react]: [EnvsMain, ReactMain]) {\n // The 'compose' methods to compose the overrides into a single environment\n const customReactEnv = react.compose([\n\n // Override the Webpack configs of the DevServer aspect\n react.overrideDevServerConfig(newWebpackRules);\n\n ]);\n\n // Register this extension as an environment using the \"registerEnv\" slot (provided by the Environments aspect).\n envs.registerEnv(customReactEnv);\n\n return new CustomReactExtension(react);\n }\n}\n"
|
|
307
301
|
})
|
|
308
|
-
}), "\n", (
|
|
309
|
-
children: (
|
|
302
|
+
}), "\n", _jsx(_components.pre, {
|
|
303
|
+
children: _jsx(_components.code, {
|
|
310
304
|
className: "language-ts",
|
|
311
305
|
children: "// index.ts\nimport { CustomReactExtension } from './custom-react.extension';\nexport { CustomReactExtension };\nexport default CustomReactExtension;\n"
|
|
312
306
|
})
|
|
313
|
-
}), "\n", (
|
|
314
|
-
children: ["\n", (
|
|
315
|
-
children: ["The 'provider' method will be executed by Bit. Its Bit aspects dependencies are set in the ", (
|
|
307
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
308
|
+
children: ["\n", _jsxs(_components.p, {
|
|
309
|
+
children: ["The 'provider' method will be executed by Bit. Its Bit aspects dependencies are set in the ", _jsx(_components.code, {
|
|
316
310
|
children: "dependencies"
|
|
317
311
|
}), " variable, and will be injected into the method upon execution."]
|
|
318
312
|
}), "\n"]
|
|
319
|
-
}), "\n", (
|
|
313
|
+
}), "\n", _jsx(_components.h4, {
|
|
320
314
|
children: "Override a 'service handler' to replace a component used by the environment"
|
|
321
|
-
}), "\n", (
|
|
315
|
+
}), "\n", _jsx(_components.p, {
|
|
322
316
|
children: "The example below is of a React environment extension. This new environment overrides the 'service handler' for the compiler service. It replaces the Bit aspect used by it, TypeScript, with another Bit aspect, Babel."
|
|
323
|
-
}), "\n", (
|
|
324
|
-
children: (
|
|
317
|
+
}), "\n", _jsx(_components.pre, {
|
|
318
|
+
children: _jsx(_components.code, {
|
|
325
319
|
className: "language-tsx",
|
|
326
320
|
children: "// custom-react.extension.ts\n\n// Import from the Environments aspect to register this extension as an environment\nimport { EnvsMain, EnvsAspect } from '@teambit/envs';\n// Import from the React aspect to extend it and override its DevServer config\nimport { ReactAspect, ReactMain } from '@teambit/react';\n// Import the Babel aspect to configure it and set it as the new compiler\nimport { BabelAspect, BabelMain } from '@teambit.compilation/babel';\n\nconst babelConfig = require('./babel/babel-config');\n\nexport class CustomReactExtension {\n constructor(private react: ReactMain) {}\n\n // Set the necessary dependencies to be injected (by Bit) into the following 'provider' function\n static dependencies: any = [EnvsAspect, ReactAspect, BabelAspect];\n\n static async provider([envs, react, babel]: [EnvsMain, ReactMain, BabelMain]) {\n // Create a new Babel compiler with the 'babelConfig' configurations\n const babelCompiler = babel.createCompiler({\n babelTransformOptions: babelConfig,\n });\n\n // Use the 'override' method provided by the 'environments' aspect (not the React aspect)\n const compilerOverride = envs.override({\n getCompiler: () => {\n return babelCompiler;\n },\n });\n\n // Compose the overrides into a single environment\n const customReactEnv = react.compose([compilerOverride]);\n\n // Register this extension as an environment using the \"registerEnv\" slot (provided by the 'environments' aspect).\n envs.registerEnv(customReactEnv);\n\n return new CustomReactExtension(react);\n }\n}\n"
|
|
327
321
|
})
|
|
328
|
-
}), "\n", (
|
|
329
|
-
children: (
|
|
322
|
+
}), "\n", _jsx(_components.pre, {
|
|
323
|
+
children: _jsx(_components.code, {
|
|
330
324
|
className: "language-ts",
|
|
331
325
|
children: "// index.ts\nimport { CustomReactExtension } from './custom-react.extension';\nexport { CustomReactExtension };\nexport default CustomReactExtension;\n"
|
|
332
326
|
})
|
|
333
|
-
}), "\n", (
|
|
327
|
+
}), "\n", _jsx(_components.h2, {
|
|
334
328
|
children: "Concepts and tools"
|
|
335
|
-
}), "\n", (
|
|
329
|
+
}), "\n", _jsx(_components.h3, {
|
|
336
330
|
children: "Environment Services"
|
|
337
|
-
}), "\n", (
|
|
331
|
+
}), "\n", _jsx(_components.p, {
|
|
338
332
|
children: "To become a \"one-stop-shop\" for components, an environment \"bundles\" together different Environment Services provided by various Bit aspect components. These Environment Services enable other Bit aspects to integrate into Bit's component life-cycle features."
|
|
339
|
-
}), "\n", (
|
|
340
|
-
children: ["For example, the 'Tester' service (", (
|
|
333
|
+
}), "\n", _jsxs(_components.p, {
|
|
334
|
+
children: ["For example, the 'Tester' service (", _jsx(_components.code, {
|
|
341
335
|
children: "@teambit.defender/tester"
|
|
342
|
-
}), ") enables the React environment (", (
|
|
336
|
+
}), ") enables the React environment (", _jsx(_components.code, {
|
|
343
337
|
children: "@teambit.react/react"
|
|
344
|
-
}), ") to set 'Jest' (", (
|
|
338
|
+
}), ") to set 'Jest' (", _jsx(_components.code, {
|
|
345
339
|
children: "teambit.defender/jest"
|
|
346
|
-
}), ") as the default test runner for its components. This will enable Jest to be executed on the ", (
|
|
340
|
+
}), ") as the default test runner for its components. This will enable Jest to be executed on the ", _jsx(_components.code, {
|
|
347
341
|
children: "bbit test"
|
|
348
342
|
}), " command, to be run as a pre-tag check, to output results using Bit's logger, and even to display the generated logs in the Workspace and Scope UIs (to name just a few examples)."]
|
|
349
|
-
}), "\n", (
|
|
343
|
+
}), "\n", _jsx("img", {
|
|
350
344
|
src: "https://storage.googleapis.com/docs-images/react_env_ex.png",
|
|
351
345
|
alt: "React env using Jest with the tester service",
|
|
352
346
|
style: {
|
|
353
347
|
width: '50%',
|
|
354
348
|
minWidth: 500
|
|
355
349
|
}
|
|
356
|
-
}), "\n", (
|
|
357
|
-
children: ["\n", (
|
|
350
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
351
|
+
children: ["\n", _jsx(_components.h5, {
|
|
358
352
|
children: "Services VS Build Tasks"
|
|
359
|
-
}), "\n", (
|
|
353
|
+
}), "\n", _jsx(_components.p, {
|
|
360
354
|
children: "Environment Services which are executed either by the development server, or via the CLI, are not identical\nto Build Tasks that run as part of the Build Pipeline.\nFor example, the TypeScript configurations used for compilation by the development server are not the same as the ones used for a component's build process."
|
|
361
355
|
}), "\n"]
|
|
362
|
-
}), "\n", (
|
|
356
|
+
}), "\n", _jsx(_components.h4, {
|
|
363
357
|
children: "Compiler"
|
|
364
|
-
}), "\n", (
|
|
358
|
+
}), "\n", _jsx(_components.p, {
|
|
365
359
|
children: "Runs the environment's selected compiler (for example, TypeScript)."
|
|
366
|
-
}), "\n", (
|
|
360
|
+
}), "\n", _jsx(_components.h4, {
|
|
367
361
|
children: "Tester"
|
|
368
|
-
}), "\n", (
|
|
362
|
+
}), "\n", _jsx(_components.p, {
|
|
369
363
|
children: "Runs the environment's selected test runner (for example, Jest)"
|
|
370
|
-
}), "\n", (
|
|
364
|
+
}), "\n", _jsx(_components.h4, {
|
|
371
365
|
children: "Linter"
|
|
372
|
-
}), "\n", (
|
|
366
|
+
}), "\n", _jsx(_components.p, {
|
|
373
367
|
children: "Runs the environment's selected linter (for example, ESLint)"
|
|
374
|
-
}), "\n", (
|
|
368
|
+
}), "\n", _jsx(_components.h4, {
|
|
375
369
|
children: "Documentation"
|
|
376
|
-
}), "\n", (
|
|
370
|
+
}), "\n", _jsx(_components.p, {
|
|
377
371
|
children: "Sets the template for the auto-generated component documentation, as well as the API for customizing component docs."
|
|
378
|
-
}), "\n", (
|
|
372
|
+
}), "\n", _jsx(_components.h4, {
|
|
379
373
|
children: "Build pipeline (CI)"
|
|
380
|
-
}), "\n", (
|
|
374
|
+
}), "\n", _jsx(_components.p, {
|
|
381
375
|
children: "Sets the sequence of build tasks to run before a component is tagged with a new version."
|
|
382
|
-
}), "\n", (
|
|
376
|
+
}), "\n", _jsx(_components.h4, {
|
|
383
377
|
children: "DevServer"
|
|
384
|
-
}), "\n", (
|
|
378
|
+
}), "\n", _jsx(_components.p, {
|
|
385
379
|
children: "Bundles all components and runs a server to display them, live (using \"hot reloading\") in the workspace UI. This includes rendering the 'compositions' as well as the documentation shown in the 'Overview' tab."
|
|
386
|
-
}), "\n", (
|
|
387
|
-
children: ["\n", (
|
|
380
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
381
|
+
children: ["\n", _jsx(_components.p, {
|
|
388
382
|
children: "Even though different types of components, e.g. React and Node components, run on different servers (one for each environment) the workspace is explored and navigated through as if it where a single server."
|
|
389
383
|
}), "\n"]
|
|
390
|
-
}), "\n", (
|
|
384
|
+
}), "\n", _jsx(_components.h4, {
|
|
391
385
|
children: "Package"
|
|
392
|
-
}), "\n", (
|
|
386
|
+
}), "\n", _jsx(_components.p, {
|
|
393
387
|
children: "Generates the node module package for components, with properties set by the environment."
|
|
394
|
-
}), "\n", (
|
|
388
|
+
}), "\n", _jsx(_components.h4, {
|
|
395
389
|
children: "Dependencies"
|
|
396
|
-
}), "\n", (
|
|
397
|
-
children: ["Sets the default dependencies (as well as their version and type) for each component handled by the environment. That includes peer dependencies used for runtime (for example, ", (
|
|
390
|
+
}), "\n", _jsxs(_components.p, {
|
|
391
|
+
children: ["Sets the default dependencies (as well as their version and type) for each component handled by the environment. That includes peer dependencies used for runtime (for example, ", _jsx(_components.code, {
|
|
398
392
|
children: "react-dom"
|
|
399
|
-
}), ") and dev dependencies (for example, ", (
|
|
393
|
+
}), ") and dev dependencies (for example, ", _jsx(_components.code, {
|
|
400
394
|
children: "@types/react"
|
|
401
395
|
}), ")."]
|
|
402
|
-
}), "\n", (
|
|
396
|
+
}), "\n", _jsx(_components.h4, {
|
|
403
397
|
children: "Bundler"
|
|
404
|
-
}), "\n", (
|
|
398
|
+
}), "\n", _jsx(_components.p, {
|
|
405
399
|
children: "Bundles components (compositions, docs, etc.) using the environment's bundler and bundling configurations. The generated assets are use both in development (when running the development server) and when exploring component's tagged releases (for example, in the scope UI)."
|
|
406
|
-
}), "\n", (
|
|
400
|
+
}), "\n", _jsx(_components.h3, {
|
|
407
401
|
children: "Service Handlers"
|
|
408
|
-
}), "\n", (
|
|
402
|
+
}), "\n", _jsx(_components.p, {
|
|
409
403
|
children: "Service Handlers are the link that binds an environment to the various Environment Services. They are methods in the Environment class that set an Environment Service to use a specific Bit extension component or a configuration file."
|
|
410
|
-
}), "\n", (
|
|
411
|
-
children: ["For example, the React environment uses the Service Handler ", (
|
|
404
|
+
}), "\n", _jsxs(_components.p, {
|
|
405
|
+
children: ["For example, the React environment uses the Service Handler ", _jsx(_components.code, {
|
|
412
406
|
children: "getCompiler()"
|
|
413
407
|
}), " to configure the Compiler Environment Service to run the TypeScript extension component."]
|
|
414
|
-
}), "\n", (
|
|
408
|
+
}), "\n", _jsx(_components.p, {
|
|
415
409
|
children: "Environment services run on various events. Whenever a service runs, it executes its corresponding service handler which consequently runs the configured aspect (in the previous example, that would be TypeScript)."
|
|
416
|
-
}), "\n", (
|
|
410
|
+
}), "\n", _jsx(_components.p, {
|
|
417
411
|
children: "Different components in a Bit workspace may use different environments. That means environment services need to execute their corresponding service handlers in the specific environment applied on the component currently being processed."
|
|
418
|
-
}), "\n", (
|
|
419
|
-
children: ["For example, if ", (
|
|
412
|
+
}), "\n", _jsxs(_components.p, {
|
|
413
|
+
children: ["For example, if ", _jsx(_components.em, {
|
|
420
414
|
children: "component A"
|
|
421
|
-
}), " uses the Node environment then the Compiler service processing that component, will execute the Service Handler (in that case, ", (
|
|
415
|
+
}), " uses the Node environment then the Compiler service processing that component, will execute the Service Handler (in that case, ", _jsx(_components.code, {
|
|
422
416
|
children: "getCompiler"
|
|
423
417
|
}), ") found in the Node environment."]
|
|
424
|
-
}), "\n", (
|
|
418
|
+
}), "\n", _jsx(_components.h3, {
|
|
425
419
|
children: "List of service handlers"
|
|
426
|
-
}), "\n", (
|
|
420
|
+
}), "\n", _jsx(_components.h4, {
|
|
427
421
|
children: "getTester"
|
|
428
|
-
}), "\n", (
|
|
429
|
-
children: (
|
|
422
|
+
}), "\n", _jsx(_components.pre, {
|
|
423
|
+
children: _jsx(_components.code, {
|
|
430
424
|
className: "language-ts",
|
|
431
425
|
children: "getTester(...args : any[]): Tester\n"
|
|
432
426
|
})
|
|
433
|
-
}), "\n", (
|
|
427
|
+
}), "\n", _jsx(_components.p, {
|
|
434
428
|
children: "Returns a test runner to be used by the Tester service."
|
|
435
|
-
}), "\n", (
|
|
429
|
+
}), "\n", _jsx(_components.p, {
|
|
436
430
|
children: "For example:"
|
|
437
|
-
}), "\n", (
|
|
438
|
-
children: (
|
|
431
|
+
}), "\n", _jsx(_components.pre, {
|
|
432
|
+
children: _jsx(_components.code, {
|
|
439
433
|
className: "language-ts",
|
|
440
434
|
children: "export class ReactEnv implements Environment {\n constructor(\n // ...\n\n // The Jest Aspect\n private jestAspect: JestMain\n ) {}\n\n // ...\n\n getTester(jestConfigPath: string, jestModule = jest): Tester {\n const jestConfig = require.resolve('./jest/jest.config');\n return this.jestAspect.createTester(jestConfig);\n }\n}\n"
|
|
441
435
|
})
|
|
442
|
-
}), "\n", (
|
|
436
|
+
}), "\n", _jsx(_components.h4, {
|
|
443
437
|
children: "getCompiler"
|
|
444
|
-
}), "\n", (
|
|
445
|
-
children: (
|
|
438
|
+
}), "\n", _jsx(_components.pre, {
|
|
439
|
+
children: _jsx(_components.code, {
|
|
446
440
|
className: "language-ts",
|
|
447
441
|
children: "getCompiler(...args : any[]): Compiler\n"
|
|
448
442
|
})
|
|
449
|
-
}), "\n", (
|
|
443
|
+
}), "\n", _jsx(_components.p, {
|
|
450
444
|
children: "Returns a compiler to be used by the Compiler service."
|
|
451
|
-
}), "\n", (
|
|
445
|
+
}), "\n", _jsx(_components.p, {
|
|
452
446
|
children: "For example:"
|
|
453
|
-
}), "\n", (
|
|
454
|
-
children: (
|
|
447
|
+
}), "\n", _jsx(_components.pre, {
|
|
448
|
+
children: _jsx(_components.code, {
|
|
455
449
|
className: "language-ts",
|
|
456
450
|
children: "export class ReactEnv implements Environment {\n\nconstructor(\n // ...\n\n // The TypeScript aspect\n private tsAspect: TypescriptMain\n){}\n\n// ...\n\ngetCompiler() {\n const tsConfig = require.resolve('./typescript/tsconfig.json')\n return this.tsAspect.createCompiler(tsConfig);\n}\n"
|
|
457
451
|
})
|
|
458
|
-
}), "\n", (
|
|
452
|
+
}), "\n", _jsx(_components.h4, {
|
|
459
453
|
children: "getLinter"
|
|
460
|
-
}), "\n", (
|
|
461
|
-
children: (
|
|
454
|
+
}), "\n", _jsx(_components.pre, {
|
|
455
|
+
children: _jsx(_components.code, {
|
|
462
456
|
className: "language-ts",
|
|
463
457
|
children: "getLinter(...args : any[]): Linter\n"
|
|
464
458
|
})
|
|
465
|
-
}), "\n", (
|
|
459
|
+
}), "\n", _jsx(_components.p, {
|
|
466
460
|
children: "Returns a linter to be used by the Linter service."
|
|
467
|
-
}), "\n", (
|
|
461
|
+
}), "\n", _jsx(_components.p, {
|
|
468
462
|
children: "For example:"
|
|
469
|
-
}), "\n", (
|
|
470
|
-
children: (
|
|
463
|
+
}), "\n", _jsx(_components.pre, {
|
|
464
|
+
children: _jsx(_components.code, {
|
|
471
465
|
className: "language-ts",
|
|
472
466
|
children: "import { ESLintLinter } from '@teambit/defender.eslint-linter';\n\nexport class ReactEnv implements Environment {\n\n constructor(){\n // ...\n\n // The ESLint aspect\n private eslint: ESLintMain\n }\n\n // ...\n\n getLinter() {\n return ESLintLinter.from({\n configPath: require.resolve('./eslint/eslintrc'),\n // resolve all plugins from the react environment.\n pluginsPath: __dirname,\n });\n }\n}\n"
|
|
473
467
|
})
|
|
474
|
-
}), "\n", (
|
|
468
|
+
}), "\n", _jsx(_components.h4, {
|
|
475
469
|
children: "getDevServer"
|
|
476
|
-
}), "\n", (
|
|
477
|
-
children: (
|
|
470
|
+
}), "\n", _jsx(_components.pre, {
|
|
471
|
+
children: _jsx(_components.code, {
|
|
478
472
|
className: "language-ts",
|
|
479
473
|
children: "getDevServer(...args : any[]): DevServer\n"
|
|
480
474
|
})
|
|
481
|
-
}), "\n", (
|
|
475
|
+
}), "\n", _jsx(_components.p, {
|
|
482
476
|
children: "Returns a DevServer to be used by the DevServer service. (A DevServer is essentially the combination of the bundler configurations, together with a specified 'listen' port number)"
|
|
483
|
-
}), "\n", (
|
|
477
|
+
}), "\n", _jsx(_components.p, {
|
|
484
478
|
children: "For example:"
|
|
485
|
-
}), "\n", (
|
|
486
|
-
children: (
|
|
479
|
+
}), "\n", _jsx(_components.pre, {
|
|
480
|
+
children: _jsx(_components.code, {
|
|
487
481
|
className: "language-ts",
|
|
488
482
|
children: "export class ReactEnv implements Environment {\n constructor(\n // ...\n\n // The Webpack aspect\n private webpack: WebpackMain\n ) {}\n\n // ...\n\n getDevServer(): DevServer {\n const withDocs = Object.assign(context, {\n entry: context.entry.concat([require.resolve('./docs')]),\n });\n return this.webpack.createDevServer(withDocs, webpackConfig);\n }\n}\n"
|
|
489
483
|
})
|
|
490
|
-
}), "\n", (
|
|
491
|
-
children: ["\n", (
|
|
484
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
485
|
+
children: ["\n", _jsx(_components.p, {
|
|
492
486
|
children: "The above example runs the dev server with the environment's documentation template."
|
|
493
487
|
}), "\n"]
|
|
494
|
-
}), "\n", (
|
|
488
|
+
}), "\n", _jsx(_components.h4, {
|
|
495
489
|
children: "getDocsTemplate"
|
|
496
|
-
}), "\n", (
|
|
497
|
-
children: (
|
|
490
|
+
}), "\n", _jsx(_components.pre, {
|
|
491
|
+
children: _jsx(_components.code, {
|
|
498
492
|
className: "language-ts",
|
|
499
493
|
children: "getDocsTemplate(...args : any[]): string\n"
|
|
500
494
|
})
|
|
501
|
-
}), "\n", (
|
|
495
|
+
}), "\n", _jsx(_components.p, {
|
|
502
496
|
children: "Returns the path to the documentation template files, to be used by the Documentation service."
|
|
503
|
-
}), "\n", (
|
|
504
|
-
children: ["For example (see docs files ", (
|
|
497
|
+
}), "\n", _jsxs(_components.p, {
|
|
498
|
+
children: ["For example (see docs files ", _jsx(_components.a, {
|
|
505
499
|
href: "https://github.com/teambit/bit/tree/master/scopes/react/react/docs",
|
|
506
500
|
children: "here"
|
|
507
501
|
}), "):"]
|
|
508
|
-
}), "\n", (
|
|
509
|
-
children: (
|
|
502
|
+
}), "\n", _jsx(_components.pre, {
|
|
503
|
+
children: _jsx(_components.code, {
|
|
510
504
|
className: "language-ts",
|
|
511
505
|
children: "export class ReactEnv implements Environment {\n // ...\n\n getDocsTemplate() {\n return require.resolve('./docs');\n }\n}\n"
|
|
512
506
|
})
|
|
513
|
-
}), "\n", (
|
|
507
|
+
}), "\n", _jsx(_components.h4, {
|
|
514
508
|
children: "getPackageJsonProps"
|
|
515
|
-
}), "\n", (
|
|
516
|
-
children: (
|
|
509
|
+
}), "\n", _jsx(_components.pre, {
|
|
510
|
+
children: _jsx(_components.code, {
|
|
517
511
|
className: "language-ts",
|
|
518
512
|
children: "getPackageJsonProps(...args : any[]): object\n"
|
|
519
513
|
})
|
|
520
|
-
}), "\n", (
|
|
521
|
-
children: ["Returns an object that defines the ", (
|
|
514
|
+
}), "\n", _jsxs(_components.p, {
|
|
515
|
+
children: ["Returns an object that defines the ", _jsx(_components.code, {
|
|
522
516
|
children: "package.json"
|
|
523
517
|
}), " properties of the packages generated for components handled by this environment. This configuration is used by the Packager service."]
|
|
524
|
-
}), "\n", (
|
|
525
|
-
children: (
|
|
518
|
+
}), "\n", _jsx(_components.pre, {
|
|
519
|
+
children: _jsx(_components.code, {
|
|
526
520
|
className: "language-ts",
|
|
527
521
|
children: "export class ReactEnv implements Environment {\n // ...\n\n getPackageJsonProps() {\n return {\n main: 'dist/{main}.js',\n types: '{main}.ts',\n };\n }\n}\n"
|
|
528
522
|
})
|
|
529
|
-
}), "\n", (
|
|
530
|
-
children: ["\n", (
|
|
523
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
524
|
+
children: ["\n", _jsx(_components.p, {
|
|
531
525
|
children: "As with any other 'merging' process, the properties defined in the above returned object will be added to configurations set by Bit.\nConflicting properties will be overridden by the properties that are set here.\nConfigurations that are set here may also be overridden, either by the 'pkg aspect' or by workspace configurations set using the 'variants API'."
|
|
532
526
|
}), "\n"]
|
|
533
|
-
}), "\n", (
|
|
527
|
+
}), "\n", _jsx(_components.h4, {
|
|
534
528
|
children: "getDependencies"
|
|
535
|
-
}), "\n", (
|
|
536
|
-
children: (
|
|
529
|
+
}), "\n", _jsx(_components.pre, {
|
|
530
|
+
children: _jsx(_components.code, {
|
|
537
531
|
className: "language-ts",
|
|
538
532
|
children: "getDependencies(component: any): Promise<DependencyList>\n"
|
|
539
533
|
})
|
|
540
|
-
}), "\n", (
|
|
534
|
+
}), "\n", _jsx(_components.p, {
|
|
541
535
|
children: "Returns an object that defines the default dependencies for components handled by this environment. The returned object is used by the Dependencies service."
|
|
542
|
-
}), "\n", (
|
|
536
|
+
}), "\n", _jsx(_components.p, {
|
|
543
537
|
children: "For example:"
|
|
544
|
-
}), "\n", (
|
|
545
|
-
children: (
|
|
538
|
+
}), "\n", _jsx(_components.pre, {
|
|
539
|
+
children: _jsx(_components.code, {
|
|
546
540
|
className: "language-ts",
|
|
547
541
|
children: "export class ReactEnv implements Environment {\n // ...\n\n async getDependencies() {\n return {\n dependencies: {\n react: '-',\n },\n devDependencies: {\n '@types/react': '16.9.43',\n '@types/jest': '~26.0.9',\n },\n peerDependencies: {\n react: '^16.13.1',\n 'react-dom': '^16.13.1',\n },\n };\n }\n}\n"
|
|
548
542
|
})
|
|
549
|
-
}), "\n", (
|
|
550
|
-
children: ["\n", (
|
|
543
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
544
|
+
children: ["\n", _jsx(_components.p, {
|
|
551
545
|
children: "As with any other 'merging' process, the properties defined in the above returned object will be added to configurations set by Bit.\nConflicting properties will be overridden by the properties that are set here.\nConfigurations that are set here may also be overridden, either by the 'Dependency Resolver aspect' or by workspace configurations set using the 'variants API'."
|
|
552
546
|
}), "\n"]
|
|
553
|
-
}), "\n", (
|
|
547
|
+
}), "\n", _jsx(_components.h4, {
|
|
554
548
|
children: "getBuildPipe"
|
|
555
|
-
}), "\n", (
|
|
556
|
-
children: (
|
|
549
|
+
}), "\n", _jsx(_components.pre, {
|
|
550
|
+
children: _jsx(_components.code, {
|
|
557
551
|
className: "language-ts",
|
|
558
552
|
children: "getBuildPipe(...args : any[]): BuildTask[]\n"
|
|
559
553
|
})
|
|
560
|
-
}), "\n", (
|
|
554
|
+
}), "\n", _jsx(_components.p, {
|
|
561
555
|
children: "Returns an array of build tasks to be used by the Builder service. Tasks will be added after and before Bit's pre-configured build tasks."
|
|
562
|
-
}), "\n", (
|
|
556
|
+
}), "\n", _jsx(_components.p, {
|
|
563
557
|
children: "For example:"
|
|
564
|
-
}), "\n", (
|
|
565
|
-
children: (
|
|
558
|
+
}), "\n", _jsx(_components.pre, {
|
|
559
|
+
children: _jsx(_components.code, {
|
|
566
560
|
className: "language-ts",
|
|
567
561
|
children: "export class ReactEnv implements Environment {\n constructor(\n // ...\n\n // The Compiler aspect\n private compiler: CompilerMain,\n\n // The Tester aspect\n private tester: TesterMain\n ) {}\n\n getBuildPipe(): BuildTask[] {\n return [this.compiler.createTask('StencilCompiler', this.getCompiler()), this.tester.task];\n }\n}\n"
|
|
568
562
|
})
|
|
569
|
-
}), "\n", (
|
|
563
|
+
}), "\n", _jsx(_components.h2, {
|
|
570
564
|
children: "Extending multiple runtime environments"
|
|
571
|
-
}), "\n", (
|
|
565
|
+
}), "\n", _jsx(_components.p, {
|
|
572
566
|
children: "An environment may operate in multiple runtime environments: 'Main', which runs on the server and 'UI' and 'Preview', which run on the browser.\nEach runtime environment runs all files that are named with its corresponding file pattern."
|
|
573
|
-
}), "\n", (
|
|
567
|
+
}), "\n", _jsx(_components.p, {
|
|
574
568
|
children: "An environment extension that runs on multiple runtimes is called \"Aspect\" an will have the following file structure:"
|
|
575
|
-
}), "\n", (
|
|
576
|
-
children: (
|
|
569
|
+
}), "\n", _jsx(_components.pre, {
|
|
570
|
+
children: _jsx(_components.code, {
|
|
577
571
|
children: "|-- env-extension\n |-- env-extension.main.ts\n |-- env-extension.ui.tsx\n |-- env-extension.preview.tsx\n |-- env.extension.aspect.ts\n"
|
|
578
572
|
})
|
|
579
|
-
}), "\n", (
|
|
573
|
+
}), "\n", _jsx(_components.h3, {
|
|
580
574
|
children: "Registering an environment as an aspect"
|
|
581
|
-
}), "\n", (
|
|
582
|
-
children: ["Create a ", (
|
|
575
|
+
}), "\n", _jsxs(_components.p, {
|
|
576
|
+
children: ["Create a ", _jsx(_components.code, {
|
|
583
577
|
children: "*.aspect.ts"
|
|
584
578
|
}), " file:"]
|
|
585
|
-
}), "\n", (
|
|
579
|
+
}), "\n", _jsx(_components.p, {
|
|
586
580
|
children: "For example:"
|
|
587
|
-
}), "\n", (
|
|
588
|
-
children: (
|
|
581
|
+
}), "\n", _jsx(_components.pre, {
|
|
582
|
+
children: _jsx(_components.code, {
|
|
589
583
|
className: "language-shell",
|
|
590
584
|
children: "touch path/to/extension/env-extension.aspect.ts\n"
|
|
591
585
|
})
|
|
592
|
-
}), "\n", (
|
|
586
|
+
}), "\n", _jsx(_components.p, {
|
|
593
587
|
children: "Place the following lines to register your environment as a multiple runtime extension (a.k.a, an Aspect):"
|
|
594
|
-
}), "\n", (
|
|
595
|
-
children: (
|
|
588
|
+
}), "\n", _jsx(_components.pre, {
|
|
589
|
+
children: _jsx(_components.code, {
|
|
596
590
|
className: "language-ts",
|
|
597
591
|
children: "// env-extension.aspect.ts\n\nimport { Aspect } from '@teambit/harmony';\n\nexport const ReactWithProvidersAspect = Aspect.create({\n // The ID should be your component's ID\n // Make sure to track your extension component before registering it as an Aspect\n id: 'my-scope.react-with-providers',\n});\n"
|
|
598
592
|
})
|
|
599
|
-
}), "\n", (
|
|
593
|
+
}), "\n", _jsx(_components.h3, {
|
|
600
594
|
children: "Registering a runtime extension"
|
|
601
|
-
}), "\n", (
|
|
595
|
+
}), "\n", _jsx(_components.p, {
|
|
602
596
|
children: "An aspect is a collection of multiple extensions, each extending a specific runtime."
|
|
603
|
-
}), "\n", (
|
|
604
|
-
children: ["Register each runtime extension to its corresponding runtime, using the ", (
|
|
597
|
+
}), "\n", _jsxs(_components.p, {
|
|
598
|
+
children: ["Register each runtime extension to its corresponding runtime, using the ", _jsx(_components.code, {
|
|
605
599
|
children: "addRuntime"
|
|
606
600
|
}), " method."]
|
|
607
|
-
}), "\n", (
|
|
601
|
+
}), "\n", _jsx(_components.p, {
|
|
608
602
|
children: "For example:"
|
|
609
|
-
}), "\n", (
|
|
610
|
-
children: (
|
|
603
|
+
}), "\n", _jsx(_components.pre, {
|
|
604
|
+
children: _jsx(_components.code, {
|
|
611
605
|
className: "language-typescript",
|
|
612
606
|
children: "// react-extension.preview.ts\n\nimport { PreviewRuntime } from '@teambit/preview';\nimport { ReactAspect, ReactPreview } from '@teambit/react';\nimport { ReactExtensionAspect } from './react-with-providers.aspect';\n\nexport class ReactExtensionPreview {\n static runtime = PreviewRuntime;\n\n static dependencies = [ReactAspect];\n\n static async provider([react]: [ReactPreview]) {\n return new ReactExtensionPreview();\n }\n}\n\nReactExtensionAspect.addRuntime(ReactExtensionPreview);\n"
|
|
613
607
|
})
|
|
614
|
-
}), "\n", (
|
|
608
|
+
}), "\n", _jsx(_components.h3, {
|
|
615
609
|
children: "Runtime environments"
|
|
616
|
-
}), "\n", (
|
|
610
|
+
}), "\n", _jsx(_components.h4, {
|
|
617
611
|
children: "Main"
|
|
618
|
-
}), "\n", (
|
|
619
|
-
children: (
|
|
612
|
+
}), "\n", _jsx(_components.p, {
|
|
613
|
+
children: _jsx(_components.code, {
|
|
620
614
|
children: "*.main.runtime.ts"
|
|
621
615
|
})
|
|
622
|
-
}), "\n", (
|
|
616
|
+
}), "\n", _jsx(_components.p, {
|
|
623
617
|
children: "Node files that run in a node runtime environments and outputs to the terminal."
|
|
624
|
-
}), "\n", (
|
|
625
|
-
children: [(
|
|
618
|
+
}), "\n", _jsxs(_components.p, {
|
|
619
|
+
children: [_jsx(_components.strong, {
|
|
626
620
|
children: "Example:"
|
|
627
621
|
}), "\nThe React environment TypeScript compiler will be extended in the main runtime."]
|
|
628
|
-
}), "\n", (
|
|
629
|
-
children: (
|
|
622
|
+
}), "\n", _jsx(_components.pre, {
|
|
623
|
+
children: _jsx(_components.code, {
|
|
630
624
|
className: "language-typescript",
|
|
631
625
|
children: "// react-extension.main.ts\n\nimport { MainRuntime } from '@teambit/cli';\nimport { EnvsAspect, EnvsMain } from '@teambit/envs';\nimport { ReactAspect, ReactMain } from '@teambit/react';\nimport { ReactExtensionAspect } from './react-extension.aspect';\n\nconst tsconfig = require('./typescript/tsconfig.json');\n\nexport class ReactExtensionMain {\n constructor(\n private react: ReactMain,\n private envs: EnvsMain\n ) {}\n\n icon() {\n return 'https://static.bit.dev/extensions-icons/react.svg';\n }\n\n static runtime = MainRuntime;\n\n static dependencies = [ReactAspect, EnvsAspect];\n\n static async provider([react, envs]: [ReactMain, EnvsMain]) {\n const reactExtension = envs.compose(react, [react.overrideTsConfig(tsconfig)]);\n envs.registerEnv(reactExtension);\n return new ReactWithProvidersMain(react, envs);\n }\n}\n\nReactExtensionAspect.addRuntime(ReactExtensionMain);\n"
|
|
632
626
|
})
|
|
633
|
-
}), "\n", (
|
|
627
|
+
}), "\n", _jsx(_components.h4, {
|
|
634
628
|
children: "UI"
|
|
635
|
-
}), "\n", (
|
|
636
|
-
children: (
|
|
629
|
+
}), "\n", _jsx(_components.p, {
|
|
630
|
+
children: _jsx(_components.code, {
|
|
637
631
|
children: "*.ui.runtime.[ts,js,jsx,tsx]"
|
|
638
632
|
})
|
|
639
|
-
}), "\n", (
|
|
633
|
+
}), "\n", _jsx(_components.p, {
|
|
640
634
|
children: "JSX files that run in the browser, as part of the Workspace/Scope UI bundle that is being served by the development server."
|
|
641
|
-
}), "\n", (
|
|
635
|
+
}), "\n", _jsx(_components.h4, {
|
|
642
636
|
children: "Preview"
|
|
643
|
-
}), "\n", (
|
|
644
|
-
children: (
|
|
637
|
+
}), "\n", _jsx(_components.p, {
|
|
638
|
+
children: _jsx(_components.code, {
|
|
645
639
|
children: "*.preview.runtime.*"
|
|
646
640
|
})
|
|
647
|
-
}), "\n", (
|
|
641
|
+
}), "\n", _jsx(_components.p, {
|
|
648
642
|
children: "These files are served by the environment's server, as part of the environment's preview bundle (i.e, the component compositions and documentation).\n(The 'preview' runtime is rendered in the Workspace/Scope UI using an iframe.)"
|
|
649
|
-
}), "\n", (
|
|
650
|
-
children: [(
|
|
643
|
+
}), "\n", _jsxs(_components.p, {
|
|
644
|
+
children: [_jsx(_components.strong, {
|
|
651
645
|
children: "Example:"
|
|
652
646
|
}), "\nA new composition provider that will \"wrap\" every composition using that environment will be added using the preview runtime since it is part of the component compositions (which are being served to the browser by the environment's server)."]
|
|
653
|
-
}), "\n", (
|
|
654
|
-
children: (
|
|
647
|
+
}), "\n", _jsx(_components.pre, {
|
|
648
|
+
children: _jsx(_components.code, {
|
|
655
649
|
className: "language-typescript",
|
|
656
650
|
children: "// react-extension.preview.ts\n\nimport { PreviewRuntime } from '@teambit/preview';\nimport { ReactAspect, ReactPreview } from '@teambit/react';\nimport { ReactExtensionAspect } from './react-with-providers.aspect';\nimport { Center } from './my-providers/center';\n\nexport class ReactExtensionPreview {\n static runtime = PreviewRuntime;\n\n static dependencies = [ReactAspect];\n\n static async provider([react]: [ReactPreview]) {\n react.registerProvider(Center);\n\n return new ReactExtensionPreview();\n }\n}\n\nReactExtensionAspect.addRuntime(ReactExtensionPreview);\n"
|
|
657
651
|
})
|
|
658
|
-
}), "\n", (
|
|
652
|
+
}), "\n", _jsx(_components.h2, {
|
|
659
653
|
children: "Troubleshooting"
|
|
660
|
-
}), "\n", (
|
|
661
|
-
children: [(
|
|
654
|
+
}), "\n", _jsxs(_components.p, {
|
|
655
|
+
children: [_jsx(_components.strong, {
|
|
662
656
|
children: "Problem:"
|
|
663
657
|
}), " Components that are configured to use a specific environment, use the workspace's default environment, instead."]
|
|
664
|
-
}), "\n", (
|
|
658
|
+
}), "\n", _jsx(_components.p, {
|
|
665
659
|
children: "For example:"
|
|
666
|
-
}), "\n", (
|
|
667
|
-
children: (
|
|
660
|
+
}), "\n", _jsx(_components.pre, {
|
|
661
|
+
children: _jsx(_components.code, {
|
|
668
662
|
className: "language-json",
|
|
669
663
|
children: "{\n \"teambit.workspace/variants\": {\n \"*\": {\n \"teambit.react/react\": {}\n },\n \"components/utils\": {\n \"teambit.harmony/node\": {}\n }\n }\n}\n"
|
|
670
664
|
})
|
|
671
|
-
}), "\n", (
|
|
672
|
-
children: ["In the above example, components in the ", (
|
|
665
|
+
}), "\n", _jsxs(_components.p, {
|
|
666
|
+
children: ["In the above example, components in the ", _jsx(_components.code, {
|
|
673
667
|
children: "components/utils"
|
|
674
|
-
}), " directory are set to use the Node environment.\nSince that selection is more specific than the one done using the ", (
|
|
668
|
+
}), " directory are set to use the Node environment.\nSince that selection is more specific than the one done using the ", _jsx(_components.code, {
|
|
675
669
|
children: "*"
|
|
676
670
|
}), " wildcard selector, it is expected to override it."]
|
|
677
|
-
}), "\n", (
|
|
678
|
-
children: [(
|
|
671
|
+
}), "\n", _jsxs(_components.p, {
|
|
672
|
+
children: [_jsx(_components.strong, {
|
|
679
673
|
children: "Understanding the problem:"
|
|
680
674
|
}), "\nTo select the right configurations for each component, the 'Variants' aspect sorts all workspace configurations, from the most specific to the most general.\nThe first configuration set on an aspect (the most specific one) will be the one that is selected for that aspect.\nThat means, once Variants encounters configurations for an aspect, it stops looking for additional configurations for that specific aspect."]
|
|
681
|
-
}), "\n", (
|
|
675
|
+
}), "\n", _jsx(_components.p, {
|
|
682
676
|
children: "Each environment is considered as a different aspect, even though they are all under the \"environments\" category and can only be used once per component.\n'Variants' does not understand categories, only individual aspects and therefore, cannot override one environment with a different environment."
|
|
683
|
-
}), "\n", (
|
|
684
|
-
children: (
|
|
677
|
+
}), "\n", _jsx(_components.p, {
|
|
678
|
+
children: _jsx(_components.strong, {
|
|
685
679
|
children: "Solution #1:"
|
|
686
680
|
})
|
|
687
|
-
}), "\n", (
|
|
688
|
-
children: ["Remove the ", (
|
|
681
|
+
}), "\n", _jsxs(_components.p, {
|
|
682
|
+
children: ["Remove the ", _jsx(_components.code, {
|
|
689
683
|
children: "*"
|
|
690
684
|
}), " general selection and use only specific and exclusive selectors to configure environments\n(that means your workspace directories/ namespaces need to be structured in a way that enables complete selection of all components using selectors that are exclusive)."]
|
|
691
|
-
}), "\n", (
|
|
685
|
+
}), "\n", _jsx(_components.p, {
|
|
692
686
|
children: "For example:"
|
|
693
|
-
}), "\n", (
|
|
694
|
-
children: (
|
|
687
|
+
}), "\n", _jsx(_components.pre, {
|
|
688
|
+
children: _jsx(_components.code, {
|
|
695
689
|
className: "language-json",
|
|
696
690
|
children: "{\n \"teambit.workspace/variants\": {\n \"components/react\": {\n \"teambit.react/react\": {}\n },\n \"components/utils\": {\n \"teambit.harmony/node\": {}\n }\n }\n}\n"
|
|
697
691
|
})
|
|
698
|
-
}), "\n", (
|
|
699
|
-
children: [(
|
|
692
|
+
}), "\n", _jsxs(_components.p, {
|
|
693
|
+
children: [_jsx(_components.strong, {
|
|
700
694
|
children: "Solution #2:"
|
|
701
695
|
}), "\nConfigure the environment using the Envs config API."]
|
|
702
|
-
}), "\n", (
|
|
696
|
+
}), "\n", _jsx(_components.p, {
|
|
703
697
|
children: "Example:"
|
|
704
|
-
}), "\n", (
|
|
705
|
-
children: (
|
|
698
|
+
}), "\n", _jsx(_components.pre, {
|
|
699
|
+
children: _jsx(_components.code, {
|
|
706
700
|
className: "language-json",
|
|
707
701
|
children: "{\n \"teambit.workspace/variants\": {\n \"*\": {\n \"teambit.react/react\": {}\n },\n \"components/utils\": {\n \"teambit.harmony/node\": {},\n \"teambit.envs/envs\": {\n \"env\": \"teambit.harmony/node\"\n }\n }\n }\n}\n"
|
|
708
702
|
})
|
|
709
|
-
}), "\n", (
|
|
710
|
-
children: ["\n", (
|
|
703
|
+
}), "\n", _jsxs(_components.blockquote, {
|
|
704
|
+
children: ["\n", _jsx(_components.p, {
|
|
711
705
|
children: "Notice how the Node environment was added also as a standalone aspect, to ensure that it is registered as a dependency of the selected components."
|
|
712
706
|
}), "\n"]
|
|
713
|
-
}), "\n", (
|
|
707
|
+
}), "\n", _jsx(_components.hr, {})]
|
|
714
708
|
});
|
|
715
709
|
}
|
|
716
|
-
function MDXContent() {
|
|
710
|
+
export default function MDXContent() {
|
|
717
711
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
718
|
-
var _provideComponents$pr = _objectSpread(_objectSpread({}, (
|
|
712
|
+
var _provideComponents$pr = _objectSpread(_objectSpread({}, _provideComponents()), props.components),
|
|
719
713
|
MDXLayout = _provideComponents$pr.wrapper;
|
|
720
|
-
return MDXLayout ? (
|
|
721
|
-
children: (
|
|
714
|
+
return MDXLayout ? _jsx(MDXLayout, _objectSpread(_objectSpread({}, props), {}, {
|
|
715
|
+
children: _jsx(_createMdxContent, _objectSpread({}, props))
|
|
722
716
|
})) : _createMdxContent(props);
|
|
723
717
|
}
|
|
724
718
|
|