@teambit/envs 1.0.108 → 1.0.109

package/artifacts/preview/teambit_envs_envs-preview.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports["teambit.envs/envs-preview"]=n():e["teambit.envs/envs-preview"]=n()}(self,(()=>(()=>{"use strict";var e={79043:(e,n,t)=>{var o={id:"teambit.envs/envs@1.0.109",homepage:"https://bit.cloud/teambit/envs/envs",exported:!0};function r(){const e=a(t(87363));return r=function(){return e},e}function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Logo=void 0,r.__bit_component=o,a.__bit_component=o;const s=()=>r().default.createElement("div",{style:{height:"100%",display:"flex",justifyContent:"center"}},r().default.createElement("img",{style:{width:70},src:"https://static.bit.dev/extensions-icons/env.svg"}));s.__bit_component=o,n.Logo=s},81282:(e,n,t)=>{var o={id:"teambit.envs/aspect-docs/envs@0.0.165",homepage:"https://bit.cloud/teambit/envs/aspect-docs/envs",exported:!0};Object.defineProperty(n,"__esModule",{value:!0}),n.default=d,s(t(87363));var r=t(40040),a=["components"];function s(e){return e&&e.__esModule?e:{default:e}}function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},i.apply(this,arguments)}function m(e,n){if(null==e)return{};var t,o,r=l(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}function l(e,n){if(null==e)return{};var t,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}s.__bit_component=o,i.__bit_component=o,m.__bit_component=o,l.__bit_component=o;var c={},p="wrapper";function d(e){var n=e.components,t=m(e,a);return(0,r.mdx)(p,i({},c,t,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("p",null,"The Envs aspect runs Bit environments and environment services, and defines their structure."),(0,r.mdx)("p",null,"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."),(0,r.mdx)("h4",null,"Example"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json"},'// 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')),(0,r.mdx)("h4",null,"Features"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},(0,r.mdx)("strong",{parentName:"p"},"Blazing fast environment setup"),": 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.")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},(0,r.mdx)("strong",{parentName:"p"},"Multiple environments in a single workspace"),": 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.")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},(0,r.mdx)("strong",{parentName:"p"},"Less to learn"),": 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.")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},(0,r.mdx)("strong",{parentName:"p"},"Customizable and extensible"),": 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.")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},(0,r.mdx)("strong",{parentName:"p"},"Standardized development"),": Sharing and reusing environments makes it easier to maintain consistency in development across multiple decoupled Bit workspaces.")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},(0,r.mdx)("strong",{parentName:"p"},"Easy to maintain"),": Get your environment's latest updates with just a simple ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit import")," command. Roll-back as easily, if needed."))),(0,r.mdx)("h2",null,"CLI reference"),(0,r.mdx)("p",null,"Bit environments make use of Bit's CLI to execute their different services. That means, ",(0,r.mdx)("inlineCode",{parentName:"p"},"bit test"),", for example, may execute different test runners, depending on the environment in use."),(0,r.mdx)("h4",null,"start"),(0,r.mdx)("p",null,"Runs the development serve (that includes running the Workspace UI)."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"// run the dev server\nbit start\n")),(0,r.mdx)("h4",null,"build"),(0,r.mdx)("p",null,"Runs the build pipeline (without tagging components with a new release version)."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"bit build\n")),(0,r.mdx)("h4",null,"test"),(0,r.mdx)("p",null,"Runs all tests."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"bit test\n")),(0,r.mdx)("h4",null,"compile"),(0,r.mdx)("p",null,"Compiles all components."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"bit compile\n")),(0,r.mdx)("h4",null,"lint"),(0,r.mdx)("p",null,"Get lint results for all components."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"bit lint\n")),(0,r.mdx)("h2",null,"Usage"),(0,r.mdx)("h3",null,"Setting a default environment for the workspace"),(0,r.mdx)("p",null,"Environments can only be configured using the ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.workspace/variants")," workspace API. That means the ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.workspace/workspace")," cannot be utilized to set an environment as the default for all components. To achieve a similar result, select all components using the ",(0,r.mdx)("inlineCode",{parentName:"p"},"*")," wildcard."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json"},'{\n  "teambit.workspace/variants": {\n    "*": {\n      "teambit.react/react": {}\n    }\n  }\n}\n')),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{style:{color:"#c31313"}},"Never use the '*' wildcard in a workspace that uses multiple environments!"),"Instead, use exclusive namespaces or directories to select and configure each group of components to use its own environment (see an example in the next section)."),(0,r.mdx)("br",null),(0,r.mdx)("br",null),(0,r.mdx)("p",null,"To learn more, see the 'Troubleshooting' section."),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"A single component (with the same version) cannot use more than a single environment.")),(0,r.mdx)("h3",null,"Setting multiple environments"),(0,r.mdx)("p",null,"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 ",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.workspace/variants"),"."),(0,r.mdx)("p",null,"For example, to set the Node and React environments on two sets of components (selected by their directory):"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json"},'{\n  "teambit.workspace/variants": {\n    "components/ui": {\n      "teambit.react/react": {}\n    },\n    "components/utils": {\n      "teambit.harmony/node": {}\n    }\n  }\n}\n')),(0,r.mdx)("h3",null,"Extending an environment"),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"This section goes through the steps of extending the 'main runtime'.\nSee the 'Runtime Environment' section to learn how to extend multiple runtime environments.")),(0,r.mdx)("p",null,"An environment extension is a component that extends an existing environment. An extension file will have the ",(0,r.mdx)("inlineCode",{parentName:"p"},".extension.ts")," suffix as a convention."),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"The ",(0,r.mdx)("inlineCode",{parentName:"p"},"*.extensions.ts")," 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.")),(0,r.mdx)("p",null,"To create and use an environment extension:"),(0,r.mdx)("ol",null,(0,r.mdx)("li",{parentName:"ol"},"Create the extension files"),(0,r.mdx)("li",{parentName:"ol"},"Use and extend an existing environment"),(0,r.mdx)("li",{parentName:"ol"},"Track the new component"),(0,r.mdx)("li",{parentName:"ol"},"Use the new extension component ID to set it in the workspace configuration file"),(0,r.mdx)("li",{parentName:"ol"},"(Optional) Tag the new component"),(0,r.mdx)("li",{parentName:"ol"},"(Optional) Export the component the make it available to be used by others")),(0,r.mdx)("h4",null,"1. Create the environment extension files"),(0,r.mdx)("p",null,"We'll start by creating a new extension:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"// 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")),(0,r.mdx)("h4",null,"2. Use an existing environment to extend it"),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"The below code uses the React environment as an example.")),(0,r.mdx)("p",null,"Our files will have the following code (the code below will only extend the ",(0,r.mdx)("inlineCode",{parentName:"p"},"@teambit.react/react")," environment without changing its configurations):"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-tsx"},"// 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")),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// index.ts\n\nimport { CustomReactExtension } from './custom-react.extension';\nexport { CustomReactExtension };\nexport default CustomReactExtension;\n")),(0,r.mdx)("h4",null,"3. Track the extension component"),(0,r.mdx)("p",null,"We'll then track the new component (with the 'my-extensions' namespace):"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"bit add extensions/custom-react -n my-extensions\n")),(0,r.mdx)("h4",null,"4. Set the extension component in the workspace config file"),(0,r.mdx)("p",null,"Our extension component now has a component ID that can be used in our ",(0,r.mdx)("inlineCode",{parentName:"p"},"workspace.jsonc")," configuration file:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json"},'{\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')),(0,r.mdx)("h3",null,"The anatomy of an environment extension"),(0,r.mdx)("p",null,"An environment extension uses the following Bit components to extend an existing environment, and to register itself as an environment:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},"The ",(0,r.mdx)("strong",{parentName:"p"},'"base" environment')," (e.g, ",(0,r.mdx)("inlineCode",{parentName:"p"},"@teambit/react"),") 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.",(0,r.mdx)("br",null)," The full list of available 'environment transformers' can be seen in the specific environment's documentation (see: React, React Native, Node).")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("p",{parentName:"li"},"The ",(0,r.mdx)("strong",{parentName:"p"},"'Environments' component")," (",(0,r.mdx)("inlineCode",{parentName:"p"},"@teambit/envs"),") is used to:"),(0,r.mdx)("ol",{parentName:"li"},(0,r.mdx)("li",{parentName:"ol"},'Register the new environment using its "slot"'),(0,r.mdx)("li",{parentName:"ol"},'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')))),(0,r.mdx)("h4",null,"Override the config for a Bit component used by the environment"),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"The current Envs API will soon be replaced.")),(0,r.mdx)("p",null,"The example below is of a React environment extension. This new environment overrides React's DevServer configuration by setting a new Webpack configuration file."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-tsx"},"// 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")),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// index.ts\nimport { CustomReactExtension } from './custom-react.extension';\nexport { CustomReactExtension };\nexport default CustomReactExtension;\n")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"The 'provider' method will be executed by Bit. Its Bit aspects dependencies are set in the ",(0,r.mdx)("inlineCode",{parentName:"p"},"dependencies")," variable, and will be injected into the method upon execution.")),(0,r.mdx)("h4",null,"Override a 'service handler' to replace a component used by the environment"),(0,r.mdx)("p",null,"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."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-tsx"},"// 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")),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// index.ts\nimport { CustomReactExtension } from './custom-react.extension';\nexport { CustomReactExtension };\nexport default CustomReactExtension;\n")),(0,r.mdx)("h2",null,"Concepts and tools"),(0,r.mdx)("h3",null,"Environment Services"),(0,r.mdx)("p",null,'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.'),(0,r.mdx)("p",null,"For example, the 'Tester' service (",(0,r.mdx)("inlineCode",{parentName:"p"},"@teambit.defender/tester"),") enables the React environment (",(0,r.mdx)("inlineCode",{parentName:"p"},"@teambit.react/react"),") to set 'Jest' (",(0,r.mdx)("inlineCode",{parentName:"p"},"teambit.defender/jest"),") as the default test runner for its components. This will enable Jest to be executed on the ",(0,r.mdx)("inlineCode",{parentName:"p"},"bbit test")," 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)."),(0,r.mdx)("img",{src:"https://storage.googleapis.com/docs-images/react_env_ex.png",alt:"React env using Jest with the tester service",style:{width:"50%",minWidth:500}}),(0,r.mdx)("blockquote",null,(0,r.mdx)("h5",{parentName:"blockquote"},"Services VS Build Tasks"),(0,r.mdx)("p",{parentName:"blockquote"},"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.")),(0,r.mdx)("h4",null,"Compiler"),(0,r.mdx)("p",null,"Runs the environment's selected compiler (for example, TypeScript)."),(0,r.mdx)("h4",null,"Tester"),(0,r.mdx)("p",null,"Runs the environment's selected test runner (for example, Jest)"),(0,r.mdx)("h4",null,"Linter"),(0,r.mdx)("p",null,"Runs the environment's selected linter (for example, ESLint)"),(0,r.mdx)("h4",null,"Documentation"),(0,r.mdx)("p",null,"Sets the template for the auto-generated component documentation, as well as the API for customizing component docs."),(0,r.mdx)("h4",null,"Build pipeline (CI)"),(0,r.mdx)("p",null,"Sets the sequence of build tasks to run before a component is tagged with a new version."),(0,r.mdx)("h4",null,"DevServer"),(0,r.mdx)("p",null,"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."),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"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.")),(0,r.mdx)("h4",null,"Package"),(0,r.mdx)("p",null,"Generates the node module package for components, with properties set by the environment."),(0,r.mdx)("h4",null,"Dependencies"),(0,r.mdx)("p",null,"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, ",(0,r.mdx)("inlineCode",{parentName:"p"},"react-dom"),") and dev dependencies (for example, ",(0,r.mdx)("inlineCode",{parentName:"p"},"@types/react"),")."),(0,r.mdx)("h4",null,"Bundler"),(0,r.mdx)("p",null,"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)."),(0,r.mdx)("h3",null,"Service Handlers"),(0,r.mdx)("p",null,"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."),(0,r.mdx)("p",null,"For example, the React environment uses the Service Handler ",(0,r.mdx)("inlineCode",{parentName:"p"},"getCompiler()")," to configure the Compiler Environment Service to run the TypeScript extension component."),(0,r.mdx)("p",null,"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)."),(0,r.mdx)("p",null,"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."),(0,r.mdx)("p",null,"For example, if ",(0,r.mdx)("em",{parentName:"p"},"component A")," uses the Node environment then the Compiler service processing that component, will execute the Service Handler (in that case, ",(0,r.mdx)("inlineCode",{parentName:"p"},"getCompiler"),") found in the Node environment."),(0,r.mdx)("h3",null,"List of service handlers"),(0,r.mdx)("h4",null,"getTester"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getTester(...args : any[]): Tester\n")),(0,r.mdx)("p",null,"Returns a test runner to be used by the Tester service."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"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")),(0,r.mdx)("h4",null,"getCompiler"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getCompiler(...args : any[]): Compiler\n")),(0,r.mdx)("p",null,"Returns a compiler to be used by the Compiler service."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"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")),(0,r.mdx)("h4",null,"getLinter"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getLinter(...args : any[]): Linter\n")),(0,r.mdx)("p",null,"Returns a linter to be used by the Linter service."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"export class ReactEnv implements Environment {\n\n    constructor(){\n        // ...\n\n        // The ESLint aspect\n        private eslint: ESLintMain\n    }\n\n    // ...\n\n    getLinter() {\n        const eslintConfig = require.resolve('./eslint/eslintrc')\n        return this.eslint.createLinter({\n            config: eslintConfig,\n            // resolve all plugins from the react environment\n            pluginPath: __dirname,\n        });\n    }\n}\n")),(0,r.mdx)("h4",null,"getDevServer"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getDevServer(...args : any[]): DevServer\n")),(0,r.mdx)("p",null,"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)"),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"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")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"The above example runs the dev server with the environment's documentation template.")),(0,r.mdx)("h4",null,"getDocsTemplate"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getDocsTemplate(...args : any[]): string\n")),(0,r.mdx)("p",null,"Returns the path to the documentation template files, to be used by the Documentation service."),(0,r.mdx)("p",null,"For example (see docs files ",(0,r.mdx)("a",{parentName:"p",href:"https://github.com/teambit/bit/tree/master/scopes/react/react/docs"},"here"),"):"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"export class ReactEnv implements Environment {\n  // ...\n\n  getDocsTemplate() {\n    return require.resolve('./docs');\n  }\n}\n")),(0,r.mdx)("h4",null,"getPackageJsonProps"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getPackageJsonProps(...args : any[]): object\n")),(0,r.mdx)("p",null,"Returns an object that defines the ",(0,r.mdx)("inlineCode",{parentName:"p"},"package.json")," properties of the packages generated for components handled by this environment. This configuration is used by the Packager service."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"export class ReactEnv implements Environment {\n  // ...\n\n  getPackageJsonProps() {\n    return {\n      main: 'dist/{main}.js',\n      types: '{main}.ts',\n    };\n  }\n}\n")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"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'.")),(0,r.mdx)("h4",null,"getDependencies"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getDependencies(component: any): Promise<DependencyList>\n")),(0,r.mdx)("p",null,"Returns an object that defines the default dependencies for components handled by this environment. The returned object is used by the Dependencies service."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"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")),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"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'.")),(0,r.mdx)("h4",null,"getBuildPipe"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"getBuildPipe(...args : any[]): BuildTask[]\n")),(0,r.mdx)("p",null,"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."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"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")),(0,r.mdx)("h2",null,"Extending multiple runtime environments"),(0,r.mdx)("p",null,"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."),(0,r.mdx)("p",null,'An environment extension that runs on multiple runtimes is called "Aspect" an will have the following file structure:'),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre"},"|-- env-extension\n    |-- env-extension.main.ts\n    |-- env-extension.ui.tsx\n    |-- env-extension.preview.tsx\n    |-- env.extension.aspect.ts\n")),(0,r.mdx)("h3",null,"Registering an environment as an aspect"),(0,r.mdx)("p",null,"Create a ",(0,r.mdx)("inlineCode",{parentName:"p"},"*.aspect.ts")," file:"),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-shell"},"touch path/to/extension/env-extension.aspect.ts\n")),(0,r.mdx)("p",null,"Place the following lines to register your environment as a multiple runtime extension (a.k.a, an Aspect):"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-ts"},"// 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")),(0,r.mdx)("h3",null,"Registering a runtime extension"),(0,r.mdx)("p",null,"An aspect is a collection of multiple extensions, each extending a specific runtime."),(0,r.mdx)("p",null,"Register each runtime extension to its corresponding runtime, using the ",(0,r.mdx)("inlineCode",{parentName:"p"},"addRuntime")," method."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-typescript"},"// 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")),(0,r.mdx)("h3",null,"Runtime environments"),(0,r.mdx)("h4",null,"Main"),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"*.main.runtime.ts")),(0,r.mdx)("p",null,"Node files that run in a node runtime environments and outputs to the terminal."),(0,r.mdx)("p",null,(0,r.mdx)("strong",{parentName:"p"},"Example:"),"\nThe React environment TypeScript compiler will be extended in the main runtime."),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-typescript"},"// 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(private react: ReactMain, private envs: EnvsMain) {}\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")),(0,r.mdx)("h4",null,"UI"),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"*.ui.runtime.[ts,js,jsx,tsx]")),(0,r.mdx)("p",null,"JSX files that run in the browser, as part of the Workspace/Scope UI bundle that is being served by the development server."),(0,r.mdx)("h4",null,"Preview"),(0,r.mdx)("p",null,(0,r.mdx)("inlineCode",{parentName:"p"},"*.preview.runtime.*")),(0,r.mdx)("p",null,"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.)"),(0,r.mdx)("p",null,(0,r.mdx)("strong",{parentName:"p"},"Example:"),'\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).'),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-typescript"},"// 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")),(0,r.mdx)("h2",null,"Troubleshooting"),(0,r.mdx)("p",null,(0,r.mdx)("strong",{parentName:"p"},"Problem:")," Components that are configured to use a specific environment, use the workspace's default environment, instead."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json"},'{\n  "teambit.workspace/variants": {\n    "*": {\n      "teambit.react/react": {}\n    },\n    "components/utils": {\n      "teambit.harmony/node": {}\n    }\n  }\n}\n')),(0,r.mdx)("p",null,"In the above example, components in the ",(0,r.mdx)("inlineCode",{parentName:"p"},"components/utils")," directory are set to use the Node environment.\nSince that selection is more specific than the one done using the ",(0,r.mdx)("inlineCode",{parentName:"p"},"*")," wildcard selector, it is expected to override it."),(0,r.mdx)("p",null,(0,r.mdx)("strong",{parentName:"p"},"Understanding the problem:"),"\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."),(0,r.mdx)("p",null,"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."),(0,r.mdx)("p",null,(0,r.mdx)("strong",{parentName:"p"},"Solution #1:")),(0,r.mdx)("p",null,"Remove the ",(0,r.mdx)("inlineCode",{parentName:"p"},"*")," 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)."),(0,r.mdx)("p",null,"For example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json"},'{\n  "teambit.workspace/variants": {\n    "components/react": {\n      "teambit.react/react": {}\n    },\n    "components/utils": {\n      "teambit.harmony/node": {}\n    }\n  }\n}\n')),(0,r.mdx)("p",null,(0,r.mdx)("strong",{parentName:"p"},"Solution #2:"),"\nConfigure the environment using the Envs config API."),(0,r.mdx)("p",null,"Example:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-json"},'{\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')),(0,r.mdx)("blockquote",null,(0,r.mdx)("p",{parentName:"blockquote"},"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.")),(0,r.mdx)("hr",null))}d.__bit_component=o,d.isMDXComponent=!0},29600:(e,n,t)=>{Object.defineProperty(n,"S",{enumerable:!0,get:function(){return o.default}});var o=r(t(81282));function r(e){return e&&e.__esModule?e:{default:e}}r.__bit_component={id:"teambit.envs/aspect-docs/envs@0.0.165",homepage:"https://bit.cloud/teambit/envs/aspect-docs/envs",exported:!0}},40040:e=>{e.exports=MdxJsReact},87363:e=>{e.exports=React}},n={};function t(o){var r=n[o];if(void 0!==r)return r.exports;var a=n[o]={exports:{}};return e[o](a,a.exports,t),a.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{t.r(o),t.d(o,{compositions:()=>d,compositions_metadata:()=>x,overview:()=>u});var e={};t.r(e),t.d(e,{default:()=>p});var n=t(79043),r=(t(87363),t(40040));const a=TeambitMdxUiMdxScopeContext;var s=t(29600),i=["components"];function m(){return m=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},m.apply(this,arguments)}var l={},c="wrapper";function p(e){var n=e.components,t=function(e,n){if(null==e)return{};var t,o,r=function(e,n){if(null==e)return{};var t,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}(e,i);return(0,r.mdx)(c,m({},l,t,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)(a.MDXScopeProvider,{components:{Envs:s.S},mdxType:"MDXScopeProvider"},(0,r.mdx)(s.S,{mdxType:"Envs"})))}p.isMDXComponent=!0;const d=[n],u=[e],x={compositions:[{displayName:"Logo",identifier:"Logo"}]}})(),o})()));

package/dist/{preview-1703647408454.js → preview-1703698405864.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.envs_envs@1.0.108/dist/env.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.envs_envs@1.0.108/dist/envs.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.envs_envs@1.0.109/dist/env.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.envs_envs@1.0.109/dist/envs.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/envs",
-  "version": "1.0.108",
+  "version": "1.0.109",
   "homepage": "https://bit.cloud/teambit/envs/envs",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.envs",
     "name": "envs",
-    "version": "1.0.108"
+    "version": "1.0.109"
   },
   "dependencies": {
     "chalk": "2.4.2",
@@ -19,27 +19,27 @@
     "@teambit/harmony": "0.4.6",
     "@teambit/bit-error": "0.0.404",
     "@teambit/component-id": "1.2.0",
-    "@teambit/component": "1.0.108",
-    "@teambit/aspect-loader": "1.0.108",
-    "@teambit/cli": "0.0.840",
-    "@teambit/logger": "0.0.933",
-    "@teambit/worker": "0.0.1144",
-    "@teambit/builder": "1.0.108",
-    "@teambit/bundler": "1.0.108",
-    "@teambit/compiler": "1.0.108",
-    "@teambit/dependency-resolver": "1.0.108",
-    "@teambit/formatter": "1.0.108",
-    "@teambit/isolator": "1.0.108",
-    "@teambit/linter": "1.0.108",
-    "@teambit/pkg": "1.0.108",
-    "@teambit/preview": "1.0.108",
-    "@teambit/schema": "1.0.108",
-    "@teambit/tester": "1.0.108",
-    "@teambit/webpack": "1.0.108",
-    "@teambit/graphql": "1.0.108",
-    "@teambit/bit": "1.6.1",
+    "@teambit/component": "1.0.109",
+    "@teambit/aspect-loader": "1.0.109",
+    "@teambit/cli": "0.0.841",
+    "@teambit/logger": "0.0.934",
+    "@teambit/worker": "0.0.1145",
+    "@teambit/builder": "1.0.109",
+    "@teambit/bundler": "1.0.109",
+    "@teambit/compiler": "1.0.109",
+    "@teambit/dependency-resolver": "1.0.109",
+    "@teambit/formatter": "1.0.109",
+    "@teambit/isolator": "1.0.109",
+    "@teambit/linter": "1.0.109",
+    "@teambit/pkg": "1.0.109",
+    "@teambit/preview": "1.0.109",
+    "@teambit/schema": "1.0.109",
+    "@teambit/tester": "1.0.109",
+    "@teambit/webpack": "1.0.109",
+    "@teambit/graphql": "1.0.109",
+    "@teambit/bit": "1.6.2",
     "@teambit/component-issues": "0.0.138",
-    "@teambit/issues": "1.0.108",
+    "@teambit/issues": "1.0.109",
     "@teambit/cli-table": "0.0.46"
   },
   "devDependencies": {
@@ -47,7 +47,7 @@
     "@types/mocha": "9.1.0",
     "@types/jest": "^29.2.2",
     "@types/testing-library__jest-dom": "^5.9.5",
-    "@teambit/harmony.envs.core-aspect-env": "0.0.13",
+    "@teambit/harmony.envs.core-aspect-env": "0.0.14",
     "@teambit/envs.aspect-docs.envs": "0.0.165"
   },
   "peerDependencies": {

package/env-definition.ts

@@ -1,50 +0,0 @@
-import { Environment } from './environment';
-
-/**
- * API for component development environment.
- */
-export class EnvDefinition {
-  constructor(
-    /**
-     * id of the env.
-     */
-    readonly id: string,
-
-    /**
-     * env instance.
-     */
-    readonly env: Environment
-  ) {}
-
-  /**
-   * get icon of the env.
-   */
-  get icon() {
-    // TODO: refactor this away from here.
-    const defaultIcon = `https://static.bit.dev/extensions-icons/default.svg`;
-    return this.env.icon || defaultIcon;
-  }
-
-  /**
-   * get the name of the env.
-   */
-  get name() {
-    return this.env.name;
-  }
-
-  /**
-   * get the description of the env.
-   */
-  get description() {
-    return this.env.description;
-  }
-
-  toObject() {
-    return {
-      id: this.id,
-      description: this.description,
-      name: this.name,
-      icon: this.icon,
-    };
-  }
-}

package/env-interface.ts

@@ -1,5 +0,0 @@
-import { EnvHandler } from '.';
-
-export interface Env {
-  [key: string]: EnvHandler<unknown> | any;
-}

package/env-service-list.ts

@@ -1,31 +0,0 @@
-import { EnvDefinition } from './env-definition';
-import { EnvService } from './services';
-
-export class EnvServiceList {
-  constructor(
-    /**
-     * environment
-     */
-    readonly env: EnvDefinition,
-
-    /**
-     * services available on the env.
-     */
-    readonly services: [string, EnvService<any>][]
-  ) {}
-
-  toObject() {
-    return {
-      env: this.env.toObject(),
-      services: this.services.map(([id, service]) => {
-        return {
-          id,
-          name: service.name,
-          description: service.description,
-          // @ts-ignore
-          data: service.getDescriptor(this.env),
-        };
-      }),
-    };
-  }
-}

package/env.fragment.ts

@@ -1,35 +0,0 @@
-import { ShowFragment, Component } from '@teambit/component';
-import chalk from 'chalk';
-import { EnvsMain } from './environments.main.runtime';
-
-export class EnvFragment implements ShowFragment {
-  constructor(private envs: EnvsMain) {}
-
-  readonly title = 'env';
-
-  async renderRow(component: Component) {
-    const envId = await this.getEnvId(component);
-    const isLoaded = this.envs.isEnvRegistered(envId);
-    return {
-      title: this.title,
-      content: isLoaded ? envId : `${envId} ${chalk.red('(not loaded)')}`,
-    };
-  }
-
-  async json(component: Component) {
-    const envId = await this.getEnvId(component);
-    return {
-      title: this.title,
-      json: envId,
-    };
-  }
-
-  private async getEnvId(component: Component) {
-    // don't use this.envs.getEnv(). otherwise, it'll throw an error when running bit-show on a remote component
-    // where the env can't register to the slot.
-    // return this.envs.getEnvId(component);
-    return (await this.envs.calculateEnvId(component)).toString();
-  }
-
-  weight = 3;
-}

package/env.plugin.ts

@@ -1,60 +0,0 @@
-import { PluginDefinition } from '@teambit/aspect-loader';
-import { Aspect, Harmony } from '@teambit/harmony';
-import { ComponentID } from '@teambit/component';
-import { WorkerMain } from '@teambit/worker';
-import { MainRuntime } from '@teambit/cli';
-import { LoggerMain } from '@teambit/logger';
-import { flatten } from 'lodash';
-import { ServiceHandlerContext as EnvContext } from './services/service-handler-context';
-import { Env } from './env-interface';
-import { EnvsRegistry, ServicesRegistry } from './environments.main.runtime';
-
-export class EnvPlugin implements PluginDefinition {
-  constructor(
-    private envSlot: EnvsRegistry,
-    private servicesRegistry: ServicesRegistry,
-    private loggerMain: LoggerMain,
-    private workerMain: WorkerMain,
-    private harmony: Harmony
-  ) {}
-
-  pattern = '*.bit-env.*';
-
-  runtimes = [MainRuntime.name];
-
-  private createContext(envId: ComponentID) {
-    return new EnvContext(envId, this.loggerMain, this.workerMain, this.harmony);
-  }
-
-  private transformToLegacyEnv(envId: string, env: Env) {
-    const envComponentId = ComponentID.fromString(envId);
-    const envContext = this.createContext(envComponentId);
-    const allServices = flatten(this.servicesRegistry.values());
-    const transformers = allServices.reduce((acc, service) => {
-      if (!service.transform) return acc;
-      const currTransformer = service.transform(env, envContext);
-      if (!currTransformer) return acc;
-      return { ...acc, ...currTransformer };
-    }, {});
-
-    if (!env.preview && !env.compiler) return undefined;
-
-    return {
-      ...transformers,
-      name: env.name,
-      icon: env.icon,
-      __getDescriptor: async () => {
-        return {
-          type: env.name,
-        };
-      },
-      id: envId,
-    };
-  }
-
-  register(object: any, aspect: Aspect) {
-    const env = this.transformToLegacyEnv(aspect.id, object);
-    if (!env) return undefined;
-    return this.envSlot.register(env);
-  }
-}

package/environment.ts

@@ -1,236 +0,0 @@
-// TODO: @gilad refactor to an abstract env.
-import type { Linter, LinterContext } from '@teambit/linter';
-import type { Formatter, FormatterContext } from '@teambit/formatter';
-import type { Tester } from '@teambit/tester';
-import type { Compiler } from '@teambit/compiler';
-import type { Bundler, BundlerContext, DevServer, DevServerContext } from '@teambit/bundler';
-import type { BuildTask } from '@teambit/builder';
-import type { SchemaExtractor } from '@teambit/schema';
-import type { WebpackConfigTransformer } from '@teambit/webpack';
-import type { PackageJsonProps } from '@teambit/pkg';
-import type { DependencyDetector, EnvPolicyConfigObject } from '@teambit/dependency-resolver';
-import type { Capsule } from '@teambit/isolator';
-import type { Component } from '@teambit/component';
-import { EnvPreviewConfig } from '@teambit/preview';
-
-export type EnvDescriptor = {
-  type: string;
-};
-
-/**
- * add a custom type and include all properties from within the environment.
- */
-export interface Environment {
-  /**
-   * name of the environment.
-   */
-  name?: string;
-
-  /**
-   * description of the environment.
-   */
-  description?: string;
-
-  /**
-   * icon of the environment.
-   */
-  icon?: string;
-
-  [key: string]: any; // :TODO need to define an abstract type for service handlers (now using any)
-
-  /**
-   * Returns the Environment descriptor
-   * Required for any task
-   */
-  __getDescriptor?: () => Promise<EnvDescriptor>;
-
-  /**
-   * Returns a schema generator instance
-   */
-  getSchemaExtractor?: (config?: any, tsserverPath?: string, contextPath?: string) => SchemaExtractor;
-
-  /**
-   * Returns the dev patterns to match doc files
-   */
-  getDocsDevPatterns?: (component: Component) => string[];
-
-  /**
-   * Returns the dev patterns to match composition files
-   */
-  getCompositionsDevPatterns?: (component: Component) => string[];
-
-  /**
-   * Returns additional dev patterns for the component.
-   * Patterns that were provided by getDocsDevPatterns, getTestsDevPatterns will be considered as dev files as well, without need to add them here.
-   */
-  getDevPatterns?: (component: Component) => string[];
-}
-
-export interface DependenciesEnv extends Environment {
-  /**
-   * Returns the list of dependencies
-   * Required for any task
-   */
-  getDependencies?: () => EnvPolicyConfigObject | Promise<EnvPolicyConfigObject>;
-
-  /**
-   * Returns a list of additional test host dependencies
-   * this will be added to the tester context
-   * This can be used in cases when you want specific dependencies to be resolved from the env during testing
-   * but you don't want these dependencies as peer dependencies of the component (as they are not used during runtime)
-   * An example for this is @angular/compiler, which during running tests you want to resolve from the env, but you don't
-   * need it during component runtime.
-   */
-  getAdditionalTestHostDependencies?: () => string[] | Promise<string[]>;
-
-  /**
-   * Returns a list of additional host dependencies
-   * this list will be provided as globals on the window after bit preview bundle
-   * by default bit will merge this list with the peers from the getDependencies function
-   */
-  getAdditionalHostDependencies?: () => string[] | Promise<string[]>;
-
-  /**
-   * Returns a list of dependency detectors
-   * this list will be used to detect all the dependencies in each file of the component
-   */
-  getDepDetectors?: () => DependencyDetector[] | null;
-}
-
-export type GetNpmIgnoreContext = {
-  capsule: Capsule;
-  component: Component;
-};
-export interface PackageEnv extends Environment {
-  /**
-   * define the package json properties to add to each component.
-   * Used by `bit link` to augment package.json with new properties
-   */
-  getPackageJsonProps?: () => PackageJsonProps;
-
-  /**
-   * return `.npmignore` entries to be written before packing the component
-   */
-  getNpmIgnore?: (npmIgnoreContext?: GetNpmIgnoreContext) => string[];
-}
-
-export interface LinterEnv extends Environment {
-  /**
-   * Returns & configures the linter to use (ESLint, ...)
-   * Required for `bit lint`
-   */
-  getLinter?: (context: LinterContext, transformers: any[]) => Linter;
-}
-
-export interface FormatterEnv extends Environment {
-  /**
-   * Returns & configures the formatter to use (prettier, ...)
-   * Required for `bit format`
-   */
-  getFormatter?: (context: FormatterContext, transformers: any[]) => Formatter;
-}
-
-export interface PreviewEnv extends Environment {
-  /**
-   * Returns a paths to a function which mounts a given component to DOM
-   * Required for `bit start` & `bit build`
-   */
-  getMounter?: () => string;
-
-  /**
-   * Returns a path to a docs template.
-   * Required for `bit start` & `bit build`
-   */
-  getDocsTemplate?: () => string;
-
-  /**
-   * Returns a bundler for the preview.
-   * Required for `bit build` & `bit start`
-   */
-  getBundler?: (context: BundlerContext, transformers: any[]) => Promise<Bundler>;
-
-  /**
-   * Returns preview config like the strategy name to use when bundling the components for the preview
-   */
-  getPreviewConfig?: () => EnvPreviewConfig;
-
-  /**
-   * Returns a bundler for the env template.
-   * this bundler will be used to bundle the docs/compositions (or other preview) apps
-   * Required for `bit build` & `bit tag`
-   */
-  getTemplateBundler?: (context: BundlerContext, transformers?: any[]) => Promise<Bundler>;
-}
-
-export type PipeServiceModifiersMap = Record<string, PipeServiceModifier>;
-
-export interface PipeServiceModifier {
-  transformers?: Function[];
-  module?: any;
-}
-
-export interface BuilderEnv extends PreviewEnv {
-  /**
-   * @deprecated Fatal: a breaking API was introduced. Use getBuildPipe() instead.
-   */
-  getPipe?: () => BuildTask[];
-
-  /**
-   * Returns the component build pipeline
-   * Either `getBuildPipe`, `getTagPipe`, or `getSnapPipe` is required for `bit build`
-   */
-  getBuildPipe?: (modifiersMap?: PipeServiceModifiersMap) => BuildTask[];
-
-  /**
-   * Returns the component tag pipeline
-   * Either `getBuildPipe`, `getTagPipe`, or `getSnapPipe` is required for `bit build`
-   */
-  getTagPipe?: (modifiersMap?: PipeServiceModifiersMap) => BuildTask[];
-
-  /**
-   * Returns the component snap pipeline
-   * Either `getBuildPipe`, `getTagPipe`, or `getSnapPipe` is required for `bit build`
-   */
-  getSnapPipe?: (modifiersMap?: PipeServiceModifiersMap) => BuildTask[];
-}
-
-export interface TesterEnv extends Environment {
-  /**
-   * Returns a tester
-   * Required for `bit start` & `bit test`
-   */
-  getTester?: (path: string, tester: any) => Tester;
-
-  /**
-   * Returns the dev patterns to match test files
-   */
-  getTestsDevPatterns?: (component: Component) => string[];
-}
-
-export interface CompilerEnv {
-  /**
-   * Returns a compiler
-   * Required for making and reading dists, especially for `bit compile`
-   */
-  getCompiler: () => Compiler;
-}
-
-export function hasCompiler(obj: Environment): obj is CompilerEnv {
-  return typeof obj.getCompiler === 'function';
-}
-
-export interface DevEnv extends PreviewEnv {
-  /**
-   * Required for `bit start`
-   */
-  getDevEnvId?: (context?: any) => string;
-
-  /**
-   * Returns and configures the dev server
-   * Required for `bit start`
-   */
-  getDevServer?: (
-    context: DevServerContext,
-    transformers: WebpackConfigTransformer[]
-  ) => DevServer | Promise<DevServer>;
-}

package/environments.aspect.ts

@@ -1,5 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const EnvsAspect = Aspect.create({
-  id: 'teambit.envs/envs',
-});

package/environments.graphql.ts

@@ -1,27 +0,0 @@
-import { Component } from '@teambit/component';
-import { Schema } from '@teambit/graphql';
-import gql from 'graphql-tag';
-
-import { EnvsMain } from './environments.main.runtime';
-
-export function environmentsSchema(environments: EnvsMain): Schema {
-  return {
-    typeDefs: gql`
-      extend type Component {
-        env: ExtensionDescriptor
-      }
-
-      type ExtensionDescriptor {
-        id: String
-        icon: String
-      }
-    `,
-    resolvers: {
-      Component: {
-        env: (component: Component) => {
-          return environments.getDescriptor(component);
-        },
-      },
-    },
-  };
-}