@teambit/compilation.aspect-docs.multi-compiler 0.0.165 → 0.0.166

package/dist/multi-compiler.mdx.js

@@ -21,22 +21,51 @@ function MDXContent(_ref) {
   return (0, _react2.mdx)(MDXLayout, _extends({}, layoutProps, props, {
     components: components,
     mdxType: "MDXLayout"
-  }), (0, _react2.mdx)("p", null, "The multi-compiler aspect allows the configuration of multiple compilers on a component. This determines which compiler to apply on a component file using the ", (0, _react2.mdx)("inlineCode", {
-    parentName: "p"
-  }, "isFileSupported()"), " compiler API."), (0, _react2.mdx)("ul", null, (0, _react2.mdx)("li", {
+  }), (0, _react2.mdx)("blockquote", null, (0, _react2.mdx)("p", {
+    parentName: "blockquote"
+  }, "The Multi-Compiler in Bit allows for the combination of multiple compilers, such as TypeScript and Vue SFC (Single File Components), within a single compiler. This hybrid compiler can then be used in various environments. This guide demonstrates how to create such a compiler. For those new to Bit, start by reviewing ", (0, _react2.mdx)("a", {
+    parentName: "p",
+    "href": "https://bit.dev/reference/compiling/create-compiler"
+  }, "creating your compiler"), ".")), (0, _react2.mdx)("h2", null, "Creating a Hybrid Compiler with Multi-Compiler"), (0, _react2.mdx)("p", null, "The Multi-Compiler excels in situations where components require different types of transpilation processes. Below is an example of creating a new compiler that combines TypeScript and Vue SFC compilers."), (0, _react2.mdx)("h3", null, "Example: Combining TypeScript and Vue SFC Compilers"), (0, _react2.mdx)("p", null, "Suppose you need a compiler that can handle both TypeScript files and Vue SFCs. Here\u2019s how you can create one using the Multi-Compiler:"), (0, _react2.mdx)("pre", null, (0, _react2.mdx)("code", {
+    parentName: "pre",
+    "className": "language-typescript"
+  }, "// Example of creating a new compiler that combines TypeScript and Vue SFC compilers\nimport { MultiCompiler } from '@teambit/compilation.compilers.multi-compiler';\nimport { TypescriptCompiler, TypeScriptCompilerOptions } from '@teambit/typescript.typescript-compiler';\nimport { VueSfcCompiler } from '@teambit/vue.dev-services.compiler.vue-sfc-compiler';\n\nexport const MyCombinedCompiler = {\n  from: (\n    typescriptOptions: TypeScriptCompilerOptions\n  ): Compiler => {\n    const multiCompiler = MultiCompiler.from({\n      shouldCopyNonSupportedFiles: true,\n      compilers: [\n        TypescriptCompiler.from(typescriptOptions),\n        VueSfcCompiler.from({\n          autoImportCss: true,\n          autoResolveImports: true,\n          tsconfigPath: typescriptOptions.tsconfig,\n          tsTypesPath: typescriptOptions.types,\n          tsRuntime: typescriptOptions.typescript,\n        }),\n      ],\n    });\n\n    multiCompiler.deleteDistDir = true;\n\n    return multiCompiler;\n  },\n};\n")), (0, _react2.mdx)("p", null, "In this configuration:"), (0, _react2.mdx)("ul", null, (0, _react2.mdx)("li", {
     parentName: "ul"
   }, (0, _react2.mdx)("inlineCode", {
     parentName: "li"
-  }, "createCompiler(compilers: Compiler[], options: CompilerOptions)"), " API to support the creation a Multi-compiler instance which can be used in the Env API (the ", (0, _react2.mdx)("inlineCode", {
+  }, "TypescriptCompiler"), " and ", (0, _react2.mdx)("inlineCode", {
     parentName: "li"
-  }, "overrideCompiler"), " and ", (0, _react2.mdx)("inlineCode", {
+  }, "VueSfcCompiler"), " are initialized with their respective options."), (0, _react2.mdx)("li", {
+    parentName: "ul"
+  }, (0, _react2.mdx)("inlineCode", {
     parentName: "li"
-  }, "getCompiler"), " APIs)."), (0, _react2.mdx)("li", {
+  }, "MultiCompiler.from"), " is used to combine these compilers."), (0, _react2.mdx)("li", {
     parentName: "ul"
-  }, "Supports the creation of a multi-compiler build tasks.")), (0, _react2.mdx)("pre", null, (0, _react2.mdx)("code", {
-    parentName: "pre",
-    "className": "language-ts"
-  }, "// create a multi compiler instance.\nconst compiler = multiCompiler.createCompiler([createBabelCompiler(), createTsCompiler()]);\n\n// create a multi-compiler build task.\ncompiler.createTask('MultiCompiler', compiler);\n")));
+  }, "The resulting ", (0, _react2.mdx)("inlineCode", {
+    parentName: "li"
+  }, "MyCombinedCompiler"), " can then be used in an environment to handle both TypeScript and Vue SFC files.")), (0, _react2.mdx)("h3", null, "Practical Applications"), (0, _react2.mdx)("p", null, "This approach is particularly useful in environments where multiple types of files need to be compiled, such as:"), (0, _react2.mdx)("ul", null, (0, _react2.mdx)("li", {
+    parentName: "ul"
+  }, "Vue environments that require TypeScript and Vue SFC compilation."), (0, _react2.mdx)("li", {
+    parentName: "ul"
+  }, "Other complex setups where different compilers need to be combined.")), (0, _react2.mdx)("h2", null, "Additional Resources and References"), (0, _react2.mdx)("ul", null, (0, _react2.mdx)("li", {
+    parentName: "ul"
+  }, "Learn more about the Vue Compiler: ", (0, _react2.mdx)("a", {
+    parentName: "li",
+    "href": "https://bit.cloud/bitdev/vue/dev-services/compiler/vue-compiler"
+  }, "Vue Compiler")), (0, _react2.mdx)("li", {
+    parentName: "ul"
+  }, "Explore the MDX Multi-Compiler: ", (0, _react2.mdx)("a", {
+    parentName: "li",
+    "href": "https://bit.cloud/teambit/mdx/compilers/mdx-multi-compiler"
+  }, "MDX Multi-Compiler")), (0, _react2.mdx)("li", {
+    parentName: "ul"
+  }, "Discover the Svelte TypeScript Multi-Compiler: ", (0, _react2.mdx)("a", {
+    parentName: "li",
+    "href": "https://bit.cloud/bitdev/svelte/dev-services/compiler/svelte-typescript-multi-compiler"
+  }, "Svelte TypeScript Multi-Compiler"))), (0, _react2.mdx)("h2", null, "Contributing"), (0, _react2.mdx)("p", null, "We welcome contributions to improve Bit's ecosystem. Learn about submitting a change request ", (0, _react2.mdx)("a", {
+    parentName: "p",
+    "href": "https://bit.dev/reference/lanes/create-lane"
+  }, "here"), "."), (0, _react2.mdx)("h2", null, "License"), (0, _react2.mdx)("p", null, "Apache 2.0 license."));
 }
 ;
 MDXContent.isMDXComponent = true;

package/dist/multi-compiler.mdx.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_excluded","obj","__esModule","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","layoutProps","MDXLayout","MDXContent","_ref","components","props","mdx","mdxType","parentName","isMDXComponent"],"sourceRoot":"/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.compilation_aspect-docs_multi-compiler@0.0.165","sources":["multi-compiler.mdx.js"],"sourcesContent":["\n// @ts-nocheck\nimport React from 'react'\nimport { mdx } from '@mdx-js/react'\n\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\n\n\n\nconst layoutProps = {\n  \n};\nconst MDXLayout = \"wrapper\"\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n    <p>{`The multi-compiler aspect allows the configuration of multiple compilers on a component. This determines which compiler to apply on a component file using the `}<inlineCode parentName=\"p\">{`isFileSupported()`}</inlineCode>{` compiler API.`}</p>\n    <ul>\n      <li parentName=\"ul\"><inlineCode parentName=\"li\">{`createCompiler(compilers: Compiler[], options: CompilerOptions)`}</inlineCode>{` API to support the creation a Multi-compiler instance which can be used in the Env API (the `}<inlineCode parentName=\"li\">{`overrideCompiler`}</inlineCode>{` and `}<inlineCode parentName=\"li\">{`getCompiler`}</inlineCode>{` APIs).`}</li>\n      <li parentName=\"ul\">{`Supports the creation of a multi-compiler build tasks.`}</li>\n    </ul>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-ts\"\n      }}>{`// create a multi compiler instance.\nconst compiler = multiCompiler.createCompiler([createBabelCompiler(), createTsCompiler()]);\n\n// create a multi-compiler build task.\ncompiler.createTask('MultiCompiler', compiler);\n`}</code></pre>\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_react2","_excluded","obj","__esModule","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","layoutProps","MDXLayout","MDXContent","_ref","components","props","mdx","mdxType","parentName","isMDXComponent"],"sourceRoot":"/tmp/capsules-root/sign-capsules/2023-10-17/1py3zf8/teambit.compilation_aspect-docs_multi-compiler@b178b66672563603b4dfc97329d5f4d7642594bc","sources":["multi-compiler.mdx.js"],"sourcesContent":["\n// @ts-nocheck\nimport React from 'react'\nimport { mdx } from '@mdx-js/react'\n\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\n\n\n\nconst layoutProps = {\n  \n};\nconst MDXLayout = \"wrapper\"\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n    <blockquote>\n      <p parentName=\"blockquote\">{`The Multi-Compiler in Bit allows for the combination of multiple compilers, such as TypeScript and Vue SFC (Single File Components), within a single compiler. This hybrid compiler can then be used in various environments. This guide demonstrates how to create such a compiler. For those new to Bit, start by reviewing `}<a parentName=\"p\" {...{\n          \"href\": \"https://bit.dev/reference/compiling/create-compiler\"\n        }}>{`creating your compiler`}</a>{`.`}</p>\n    </blockquote>\n    <h2>{`Creating a Hybrid Compiler with Multi-Compiler`}</h2>\n    <p>{`The Multi-Compiler excels in situations where components require different types of transpilation processes. Below is an example of creating a new compiler that combines TypeScript and Vue SFC compilers.`}</p>\n    <h3>{`Example: Combining TypeScript and Vue SFC Compilers`}</h3>\n    <p>{`Suppose you need a compiler that can handle both TypeScript files and Vue SFCs. Here’s how you can create one using the Multi-Compiler:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-typescript\"\n      }}>{`// Example of creating a new compiler that combines TypeScript and Vue SFC compilers\nimport { MultiCompiler } from '@teambit/compilation.compilers.multi-compiler';\nimport { TypescriptCompiler, TypeScriptCompilerOptions } from '@teambit/typescript.typescript-compiler';\nimport { VueSfcCompiler } from '@teambit/vue.dev-services.compiler.vue-sfc-compiler';\n\nexport const MyCombinedCompiler = {\n  from: (\n    typescriptOptions: TypeScriptCompilerOptions\n  ): Compiler => {\n    const multiCompiler = MultiCompiler.from({\n      shouldCopyNonSupportedFiles: true,\n      compilers: [\n        TypescriptCompiler.from(typescriptOptions),\n        VueSfcCompiler.from({\n          autoImportCss: true,\n          autoResolveImports: true,\n          tsconfigPath: typescriptOptions.tsconfig,\n          tsTypesPath: typescriptOptions.types,\n          tsRuntime: typescriptOptions.typescript,\n        }),\n      ],\n    });\n\n    multiCompiler.deleteDistDir = true;\n\n    return multiCompiler;\n  },\n};\n`}</code></pre>\n    <p>{`In this configuration:`}</p>\n    <ul>\n      <li parentName=\"ul\"><inlineCode parentName=\"li\">{`TypescriptCompiler`}</inlineCode>{` and `}<inlineCode parentName=\"li\">{`VueSfcCompiler`}</inlineCode>{` are initialized with their respective options.`}</li>\n      <li parentName=\"ul\"><inlineCode parentName=\"li\">{`MultiCompiler.from`}</inlineCode>{` is used to combine these compilers.`}</li>\n      <li parentName=\"ul\">{`The resulting `}<inlineCode parentName=\"li\">{`MyCombinedCompiler`}</inlineCode>{` can then be used in an environment to handle both TypeScript and Vue SFC files.`}</li>\n    </ul>\n    <h3>{`Practical Applications`}</h3>\n    <p>{`This approach is particularly useful in environments where multiple types of files need to be compiled, such as:`}</p>\n    <ul>\n      <li parentName=\"ul\">{`Vue environments that require TypeScript and Vue SFC compilation.`}</li>\n      <li parentName=\"ul\">{`Other complex setups where different compilers need to be combined.`}</li>\n    </ul>\n    <h2>{`Additional Resources and References`}</h2>\n    <ul>\n      <li parentName=\"ul\">{`Learn more about the Vue Compiler: `}<a parentName=\"li\" {...{\n          \"href\": \"https://bit.cloud/bitdev/vue/dev-services/compiler/vue-compiler\"\n        }}>{`Vue Compiler`}</a></li>\n      <li parentName=\"ul\">{`Explore the MDX Multi-Compiler: `}<a parentName=\"li\" {...{\n          \"href\": \"https://bit.cloud/teambit/mdx/compilers/mdx-multi-compiler\"\n        }}>{`MDX Multi-Compiler`}</a></li>\n      <li parentName=\"ul\">{`Discover the Svelte TypeScript Multi-Compiler: `}<a parentName=\"li\" {...{\n          \"href\": \"https://bit.cloud/bitdev/svelte/dev-services/compiler/svelte-typescript-multi-compiler\"\n        }}>{`Svelte TypeScript Multi-Compiler`}</a></li>\n    </ul>\n    <h2>{`Contributing`}</h2>\n    <p>{`We welcome contributions to improve Bit's ecosystem. Learn about submitting a change request `}<a parentName=\"p\" {...{\n        \"href\": \"https://bit.dev/reference/lanes/create-lane\"\n      }}>{`here`}</a>{`.`}</p>\n    <h2>{`License`}</h2>\n    <p>{`Apache 2.0 license.`}</p>\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;"],"mappings":"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"}

package/multi-compiler.mdx

@@ -1,12 +1,66 @@
-The multi-compiler aspect allows the configuration of multiple compilers on a component. This determines which compiler to apply on a component file using the `isFileSupported()` compiler API.
 
-- `createCompiler(compilers: Compiler[], options: CompilerOptions)` API to support the creation a Multi-compiler instance which can be used in the Env API (the `overrideCompiler` and `getCompiler` APIs).
-- Supports the creation of a multi-compiler build tasks.
+> The Multi-Compiler in Bit allows for the combination of multiple compilers, such as TypeScript and Vue SFC (Single File Components), within a single compiler. This hybrid compiler can then be used in various environments. This guide demonstrates how to create such a compiler. For those new to Bit, start by reviewing [creating your compiler](https://bit.dev/reference/compiling/create-compiler).
 
-```ts
-// create a multi compiler instance.
-const compiler = multiCompiler.createCompiler([createBabelCompiler(), createTsCompiler()]);
+## Creating a Hybrid Compiler with Multi-Compiler
 
-// create a multi-compiler build task.
-compiler.createTask('MultiCompiler', compiler);
+The Multi-Compiler excels in situations where components require different types of transpilation processes. Below is an example of creating a new compiler that combines TypeScript and Vue SFC compilers.
+
+### Example: Combining TypeScript and Vue SFC Compilers
+
+Suppose you need a compiler that can handle both TypeScript files and Vue SFCs. Here’s how you can create one using the Multi-Compiler:
+
+```typescript
+// Example of creating a new compiler that combines TypeScript and Vue SFC compilers
+import { MultiCompiler } from '@teambit/compilation.compilers.multi-compiler';
+import { TypescriptCompiler, TypeScriptCompilerOptions } from '@teambit/typescript.typescript-compiler';
+import { VueSfcCompiler } from '@teambit/vue.dev-services.compiler.vue-sfc-compiler';
+
+export const MyCombinedCompiler = {
+  from: (
+    typescriptOptions: TypeScriptCompilerOptions
+  ): Compiler => {
+    const multiCompiler = MultiCompiler.from({
+      shouldCopyNonSupportedFiles: true,
+      compilers: [
+        TypescriptCompiler.from(typescriptOptions),
+        VueSfcCompiler.from({
+          autoImportCss: true,
+          autoResolveImports: true,
+          tsconfigPath: typescriptOptions.tsconfig,
+          tsTypesPath: typescriptOptions.types,
+          tsRuntime: typescriptOptions.typescript,
+        }),
+      ],
+    });
+
+    multiCompiler.deleteDistDir = true;
+
+    return multiCompiler;
+  },
+};
 ```
+
+In this configuration:
+- `TypescriptCompiler` and `VueSfcCompiler` are initialized with their respective options.
+- `MultiCompiler.from` is used to combine these compilers.
+- The resulting `MyCombinedCompiler` can then be used in an environment to handle both TypeScript and Vue SFC files.
+
+### Practical Applications
+
+This approach is particularly useful in environments where multiple types of files need to be compiled, such as:
+- Vue environments that require TypeScript and Vue SFC compilation.
+- Other complex setups where different compilers need to be combined.
+
+## Additional Resources and References
+
+- Learn more about the Vue Compiler: [Vue Compiler](https://bit.cloud/bitdev/vue/dev-services/compiler/vue-compiler)
+- Explore the MDX Multi-Compiler: [MDX Multi-Compiler](https://bit.cloud/teambit/mdx/compilers/mdx-multi-compiler)
+- Discover the Svelte TypeScript Multi-Compiler: [Svelte TypeScript Multi-Compiler](https://bit.cloud/bitdev/svelte/dev-services/compiler/svelte-typescript-multi-compiler)
+
+## Contributing
+
+We welcome contributions to improve Bit's ecosystem. Learn about submitting a change request [here](https://bit.dev/reference/lanes/create-lane).
+
+## License
+
+Apache 2.0 license.

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compilation.aspect-docs.multi-compiler",
-  "version": "0.0.165",
+  "version": "0.0.166",
   "homepage": "https://bit.cloud/teambit/compilation/aspect-docs/multi-compiler",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compilation",
     "name": "aspect-docs/multi-compiler",
-    "version": "0.0.165"
+    "version": "0.0.166"
   },
   "dependencies": {
     "@mdx-js/react": "1.6.22",

package/schema.json

@@ -0,0 +1,36 @@
+{
+  "__schema": "APISchema",
+  "location": {
+    "filePath": "index.ts",
+    "line": 1,
+    "character": 1
+  },
+  "module": {
+    "__schema": "ModuleSchema",
+    "location": {
+      "filePath": "index.ts",
+      "line": 1,
+      "character": 1
+    },
+    "exports": [
+      {
+        "__schema": "InferenceTypeSchema",
+        "location": {
+          "filePath": "index.ts",
+          "line": 1,
+          "character": 10
+        },
+        "name": "MultiCompiler",
+        "type": "component:"
+      }
+    ],
+    "internals": []
+  },
+  "internals": [],
+  "componentId": {
+    "scope": "teambit.compilation",
+    "name": "aspect-docs/multi-compiler",
+    "version": "b178b66672563603b4dfc97329d5f4d7642594bc"
+  },
+  "taggedModuleExports": []
+}

package/static/css/teambit.compilation/aspect-docs/multi-compiler-preview.69a5f330.css

@@ -0,0 +1 @@
+.size-definition_headingFontSize__2ii4S{--bit-h-xxs:18px;--bit-h-xs:26px;--bit-h-sm:36px;--bit-h-md:40px;--bit-h-lg:50px;--bit-h-xl:60px;--bit-h-xxl:80px}.size-definition_textFontSize__Mvh-b{--bit-p-xxs:12px;--bit-p-xs:14px;--bit-p-sm:15px;--bit-p-md:16px;--bit-p-lg:18px;--bit-p-xl:20px;--bit-p-xxl:24px}.shadow-definition_shadowTheme__cNGZP{--bit-shadow-none:none;--bit-shadow-faint:0 2px 10px 0 rgba(0,0,0,.1);--bit-shadow-resting:0px 0px 4px rgba(0,0,0,.08),0px 2px 4px rgba(0,0,0,.08);--bit-shadow-raised-low:0 -1px 1px 0 rgba(0,0,0,.09),0 2px 2px 0 rgba(0,0,0,.23);--bit-shadow-hover-low:0 2px 8px 0 rgba(0,0,0,.2);--bit-shadow-hover-medium:0 0 20px 0 rgba(0,0,0,.12),0 2px 6px 0 rgba(0,0,0,.24);--bit-shadow-hover-high:0px 11px 29px 0px rgba(0,0,0,.23)}.color-definition_primaryPalette__9wP2s{--bit-text-color:#414141;--bit-text-color-heavy:#2b2b2b;--bit-text-color-light:#6c707c;--bit-text-inactive:#babec9;--bit-text-inactive-heavy:#878c9a;--bit-border-color:#babec9;--bit-border-color-heavy:#878c9a;--bit-border-color-light:#cccfd4;--bit-border-color-lightest:#ededed;--bit-accent-color:#6c5ce7;--bit-accent-heavy:#5d4aec;--bit-accent-light:#897dec;--bit-accent-text:#6c5ce7;--bit-accent-text-heavy:#5d4aec;--bit-text-on-accent:#fff;--bit-accent-bg:#eceaff;--bit-accent-bg-heavy:#c9c3f6;--bit-bg-color:#fff;--bit-bg-heavy:#f6f6f6;--bit-bg-heaviest:#ededed;--bit-bg-bedrock:#fff;--bit-bg-navigation:#f6f6f6;--bit-bg-overlay:#fff;--bit-bg-modal:#fff;--bit-bg-tooltip:#fff;--bit-bg-tooltip-heavy:#f6f6f6;--bit-bg-dent:#f6f6f6;--bit-error-color:#e62e5c;--bit-error-heavy:#d31948;--bit-error-light:#f086a0;--bit-error-bg:#fdeff2;--bit-error-bg-heavy:#f7bac9;color:#414141}.brand-definition_brands__RqGBx{--bit-github-bg:#2b2b2b;--bit-brand-text:#fff;--bit-slack-bg:#4a154b;--bit-twitter-bg:#1da1f2}.heading-margin-definition_headingMargins__3pQMg{--bit-h1Margin:20px;--bit-h2Margin:20px;--bit-h3Margin:20px;--bit-h4Margin:8px;--bit-h5Margin:8px;--bit-h6Margin:8px;--bit-h7Margin:8px}@font-face{font-family:"CircularPro";src:url(https://static.bit.dev/fonts/CircularPro-Book.otf)}@font-face{font-family:"CircularPro";font-weight:700;src:url(https://static.bit.dev/fonts/CircularPro-Bold.otf)}@font-face{font-family:"CircularPro";font-weight:800;src:url(https://static.bit.dev/fonts/CircularPro-Black.otf)}@font-face{font-family:"CircularPro";font-style:italic;src:url(https://static.bit.dev/fonts/CircularPro-BookItalic.otf)}@font-face{font-family:"CircularPro";font-style:italic;font-weight:700;src:url(https://static.bit.dev/fonts/CircularPro-BoldItalic.otf)}@font-face{font-family:"CircularPro";font-style:italic;font-weight:800;src:url(https://static.bit.dev/fonts/CircularPro-BlackItalic.otf)}.book-font_bookFont__3VHr7{font-family:"CircularPro","Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial,sans-serif}.texts_defaults__36V5C{line-height:1.23}.sizes_heading__3a_wd{--bit-h-xxs:16px;--bit-h-xs:18px;--bit-h-sm:24px;--bit-h-md:26px;--bit-h-lg:36px;--bit-h-xl:40px;--bit-h-xxl:50px}.global_overrides__1sQoq{line-height:normal}.layout_center__32o0w{align-items:center;display:flex;height:100%;justify-content:center}.block-quote_blockQuote__12pYz{background-color:hsla(0,2%,79%,.2);border-left:5px solid #897dec;border-radius:5px;margin:0 0 1em;padding:1em 10px 1em 18px}.block-quote_blockQuote__12pYz>:last-child{margin-bottom:0}.bold_bold__1dapd{font-weight:700}.external-link_link__1fdcO{text-decoration:none}.external-link_link__1fdcO:hover{text-decoration:underline}.heading-sizes_xxs__38mEg{font-size:16px;font-size:var(--bit-h-xxs,16px)}.heading-sizes_xs__2j2It{font-size:18px;font-size:var(--bit-h-xs,18px)}.heading-sizes_sm__UQ_op{font-size:24px;font-size:var(--bit-h-sm,24px)}.heading-sizes_md__2KSNl{font-size:26px;font-size:var(--bit-h-md,26px)}.heading-sizes_lg__2O_yK{font-size:36px;font-size:var(--bit-h-lg,36px)}.heading-sizes_xl__2JhPI{font-size:40px;font-size:var(--bit-h-xl,40px)}.heading-sizes_xxl__32s8F{font-size:50px;font-size:var(--bit-h-xxl,50px)}.heading_h1__oP1GX,.heading_h2__2NYFG,.heading_h3__2Ehs8,.heading_h4__1hfFI,.heading_h5__1SgDx,.heading_h6__2MhC4{font-weight:700;margin:0}.heading_h1__oP1GX{margin-bottom:20px}.anchor_anchor__2Nq_O{align-items:center;display:flex;text-decoration:none}.anchor_anchorIcon__QXyTk{color:var(--bit-text-color-light);font-size:18px}.linked-heading_linkedHeading__1_ZCR{align-items:center;display:flex;margin-bottom:16px;width:-moz-fit-content;width:fit-content}.linked-heading_linkedHeading__1_ZCR:hover .linked-heading_anchor__2iWR0{opacity:1;visibility:inherit}.linked-heading_heading__3gM-X{margin-bottom:0;margin-right:8px}.linked-heading_anchor__2iWR0{opacity:0;transform:translateY(4px);transition:visibility .3s,opacity .3s ease-in-out;visibility:hidden}.create-heading_mdxLinkedHeading__iE0k4{justify-content:start;margin-top:40px;width:100%}.create-heading_mdxLinkedHeading__iE0k4[align=center]{justify-content:center}.create-heading_mdxLinkedHeading__iE0k4[align=left]{justify-content:start}.create-heading_mdxLinkedHeading__iE0k4[align=right]{justify-content:flex-end}.create-heading_mdxLinkedHeading__iE0k4.create-heading_mainHeadingStyles__2kOKz{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed);padding-bottom:8px}.create-heading_mdxLinkedHeading__iE0k4:first-child{padding-top:0}.image_img__3H0eg{max-width:100%}.image_img__3H0eg:not(:last-child){margin-bottom:16px}.inline-code_inlineCode__22mwq{background-color:hsla(0,0%,65%,.2);border-radius:.25em;font-family:monospace,sans-serif;font-size:.85em;padding:.2em .4em}.inline-code_highlight__1uL46{background-color:#eceaff;background-color:var(--bit-accent-bg,#eceaff)}.italic_italic__1Nrhx{font-style:italic}.ol_ol__Jm2hh{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ol_ol__Jm2hh ol,.ol_ol__Jm2hh ul{padding-left:18px}.ol_ol__Jm2hh>li>p{margin-bottom:0}.text-sizes_xxs__XXaRP{font-size:12px;font-size:var(--bit-p-xxs,12px)}.text-sizes_xs__kT5X1{font-size:14px;font-size:var(--bit-p-xs,14px)}.text-sizes_sm__3MbiD{font-size:15px;font-size:var(--bit-p-sm,15px)}.text-sizes_md__1JzhC{font-size:16px;font-size:var(--bit-p-md,16px)}.text-sizes_lg__2JTOB{font-size:18px;font-size:var(--bit-p-lg,18px)}.text-sizes_xl__9ckN-{font-size:20px;font-size:var(--bit-p-xl,20px)}.text-sizes_xxl__1mn4D{font-size:24px;font-size:var(--bit-p-xxl,24px)}.paragraph_paragraph__xKZr7{margin:0 0 1em}.separator_separator__2y2OK{border:none;border-bottom:1px solid var(--bit-border-color-lightest);border-radius:5px;margin-bottom:40px;margin-top:30px}.copied-message_copiedMessage__2zu0e{background-color:#6c5ce7;background-color:var(--bit-accent-color,#6c5ce7);border-radius:12px;color:#fff;color:var(--bit-text-on-accent,#fff);font-size:12px;opacity:0;padding:2px 5px;pointer-events:none;position:absolute;transform:translate(-100%);transition:visibility .5s,opacity .5s ease-in-out;visibility:hidden}.copied-message_showMessage__2qJKH{opacity:1;visibility:visible}.code-snippet_snippetWrapper__7PAFj{position:relative}.code-snippet_snippetWrapper__7PAFj:hover .code-snippet_copyIcon__ht756{opacity:1}.code-snippet_snippetWrapper__7PAFj .code-snippet_codeSnippet__2bydN{background-color:#fff;border-radius:10px;font-family:Roboto mono;font-size:var(--bit-p-xs);margin:0!important;padding:16px!important}.code-snippet_snippetWrapper__7PAFj .code-snippet_copyIcon__ht756{background-color:#fff;border-radius:8px;box-sizing:border-box;color:#414141;cursor:pointer;margin-left:8px;opacity:0;padding:2px;transition:opacity .3s ease-in-out;width:24px}.code-snippet_snippetWrapper__7PAFj code{font-family:inherit!important}.code-snippet_copy__2ygEW{align-items:center;display:flex;position:absolute;right:6px;top:6px}.pane_pane__3iunn{transition:width .3s,height .3s}[data-split-layout*=first]>.pane_pane__3iunn,[data-split-layout*=last]>.pane_pane__3iunn{max-width:none;min-width:0;min-width:auto}.splitter_splitter__25sZt{-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-split-layout^=row] .splitter_splitter__25sZt{cursor:col-resize;height:100%}[data-split-layout^=column] .splitter_splitter__25sZt{cursor:row-resize;width:100%}body{padding:0}.split-pane_splitPane__gvGDe{display:flex;flex-direction:column}.split-pane_splitPane__gvGDe.split-pane_isDragging__lvDmS{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.split-pane_splitPane__gvGDe[data-is-dragging=true]>*{transition:none}.split-pane_splitPane__gvGDe[data-split-layout^=row]{flex-direction:row}.split-pane_splitPane__gvGDe[data-split-layout^="row reverse"]{flex-direction:row-reverse}.split-pane_splitPane__gvGDe[data-split-layout^=column]{flex-direction:column}.split-pane_splitPane__gvGDe[data-split-layout^="column reverse"]{flex-direction:column-reverse}.splitter_hoverSplitter__2gmhL{background:#ededed;background:var(--bit-border-color-lightest,#ededed);flex:none;min-height:1px;min-width:1px;position:relative}.splitter_highlighter__3bBDt{height:100%;width:100%}.splitter_highlighter__3bBDt,.splitter_highlighter__3bBDt:after,.splitter_highlighter__3bBDt:before{transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out}.splitter_highlighter__3bBDt:hover,.splitter_highlighter__3bBDt:hover:after,.splitter_highlighter__3bBDt:hover:before,[data-is-dragging=true]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt,[data-is-dragging=true]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:after,[data-is-dragging=true]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:before{background:#6c5ce7;background:var(--bit-accent-color,#6c5ce7);transition-delay:.18s}.splitter_highlighter__3bBDt:after,.splitter_highlighter__3bBDt:before{background:transparent;content:" ";display:block;position:absolute}[data-split-layout^=row]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:after,[data-split-layout^=row]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:before{height:100%;width:200%}[data-split-layout^=row]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:before{left:-200%}[data-split-layout^=row]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:after{right:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:after,[data-split-layout^=column]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:before{height:200%;width:100%}[data-split-layout^=column]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:before{top:-200%}[data-split-layout^=column]>.splitter_hoverSplitter__2gmhL>.splitter_highlighter__3bBDt:after{bottom:-200%}.error_error__2jskz{color:#e62e5c;color:var(--bit-error-color,#e62e5c)}.react-playground_column__2JzPl{height:450px}.react-playground_column__2JzPl .react-playground_codePane__1LEoz,.react-playground_column__2JzPl .react-playground_previewPane__1NT3B{max-height:90%;min-height:10%;width:100%}.react-playground_column__2JzPl .react-playground_error__3W6zm,.react-playground_column__2JzPl .react-playground_previewPane__1NT3B{border-bottom:none;border-radius:6px 6px 0 0}.react-playground_row__barLF{height:100%;max-height:450px}.react-playground_row__barLF .react-playground_codePane__1LEoz,.react-playground_row__barLF .react-playground_previewPane__1NT3B{height:100%;max-width:90%;min-width:10%}.react-playground_row__barLF .react-playground_error__3W6zm,.react-playground_row__barLF .react-playground_previewPane__1NT3B{border-left:none;border-radius:0 6px 6px 0}.react-playground_error__3W6zm{background-color:var(--bit-bg-color);border:1px solid var(--bit-error-color);bottom:0;box-sizing:border-box;color:var(--bit-error-color);font-family:Roboto mono;font-size:11px;left:0;margin:0;overflow:auto;padding:8px;position:absolute;right:0;top:0;transition:all 1s ease-in-out}.react-playground_codePane__1LEoz{background-color:#282c34;overflow:auto}.react-playground_editor__2uElk{font-family:Roboto mono!important;font-size:11px;max-width:none!important;min-width:100%;width:-moz-fit-content;width:fit-content}.react-playground_editor__2uElk>textarea{outline:none;white-space:pre!important}.react-playground_editor__2uElk>pre{white-space:pre!important}.react-playground_splitter__3Oe_R{background-color:#282c34}.react-playground_previewPane__1NT3B{border:1px solid var(--bit-border-color-lightest);box-sizing:border-box;display:flex;flex-shrink:1!important;overflow:auto;position:relative;transform:translateZ(0)}.react-playground_previewBox__1rY5B{margin:auto;min-height:20px;min-width:20px}.react-playground_playground__3L3Ma{border-radius:6px;display:flex;overflow:hidden}.react-playground_playground__3L3Ma>div{width:100%}.snippet_snippet__3ar-t{margin-bottom:16px}.sup_sup__3dGS-{font-size:smaller;vertical-align:super}.base-table_table__1C_R0{border:1px solid #ededed;border:1px solid var(--bit-border-color-lightest,#ededed);border-collapse:collapse;border-radius:8px;border-spacing:0;display:block;margin-bottom:16px;max-width:100%;overflow:auto;width:-moz-fit-content;width:fit-content}.base-table_table__1C_R0 tr:nth-child(2n){background-color:#f6f6f6;background-color:var(--bit-bg-dent,#f6f6f6)}.base-table_table__1C_R0 thead{border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.base-table_table__1C_R0 th{color:#2b2b2b;color:var(--bit-text-color-heavy,#2b2b2b);font-size:var(--bit-p-xs);font-weight:700;padding:12px 20px}.base-table_table__1C_R0 td,.base-table_table__1C_R0 th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-table_table__1C_R0 table,.base-table_table__1C_R0 td,.base-table_table__1C_R0 th,.base-table_table__1C_R0 thead,.base-table_table__1C_R0 tr{text-align:start}.base-table_table__1C_R0 table[align=center],.base-table_table__1C_R0 td[align=center],.base-table_table__1C_R0 th[align=center],.base-table_table__1C_R0 thead[align=center],.base-table_table__1C_R0 tr[align=center]{text-align:center}.base-table_table__1C_R0 table[align=left],.base-table_table__1C_R0 td[align=left],.base-table_table__1C_R0 th[align=left],.base-table_table__1C_R0 thead[align=left],.base-table_table__1C_R0 tr[align=left]{text-align:start}.base-table_table__1C_R0 table[align=right],.base-table_table__1C_R0 td[align=right],.base-table_table__1C_R0 th[align=right],.base-table_table__1C_R0 thead[align=right],.base-table_table__1C_R0 tr[align=right]{text-align:end}.td_td__9UkFy{padding:12px 20px}.tr_tr__1IEVC:not(:last-child){border-bottom:1px solid #ededed;border-bottom:1px solid var(--bit-border-color-lightest,#ededed)}.ul_ul__23oun{list-style:revert;list-style-position:outside;margin:0 0 16px;padding:0 0 0 32px}.ul_ul__23oun>li>ol,.ul_ul__23oun>li>ul{margin-bottom:0;padding-left:18px}.ul_ul__23oun>li>p{margin-bottom:none}.mdx-layout_mdxContent__oOMzS{line-height:1.5}.mdx-layout_mdxContent__oOMzS img{max-width:100%}.link_link__2r8_7{color:#6c5ce7;color:var(--bit-accent-color,#6c5ce7);text-decoration:none}.link_link__2r8_7:hover{color:#5d4aec;color:var(--bit-accent-heavy,#5d4aec);text-decoration:underline}.admonition{border-radius:8px;margin-bottom:1em;padding:15px 30px 15px 15px}.admonition h3{display:flex;margin-bottom:8px;margin-top:0;text-transform:uppercase}.admonition-heading>div{margin-bottom:0;margin-top:0}.admonition-icon{display:inline-flex;margin-right:4px;padding-top:1px}.admonition-icon svg{stroke-width:0;stroke:currentColor;fill:currentColor;display:inline-block;height:22px;width:18px}.admonition-content>:last-child{margin-bottom:0}.admonition{background-color:#eceaff;background-color:var(--bit-accent-primary-bg,#eceaff);border-left:8px solid #6c5ce7;border-left:8px solid var(--bit-accent-primary-color,#6c5ce7)}.admonition h5{color:#6c5ce7;color:var(--bit-accent-primary-color,#6c5ce7);display:flex}.admonition-caution{background-color:#fff5dd;background-color:var(--bit-accent-hunger-bg,#fff5dd);border-left:8px solid #ffc640;border-left:8px solid var(--bit-accent-hunger-color,#ffc640)}.admonition-caution h5{color:#ffc640;color:var(--bit-accent-hunger-color,#ffc640)}.admonition-tip{background-color:#eefaf3;background-color:var(--bit-accent-success-bg,#eefaf3);border-left:8px solid #37b26c;border-left:8px solid var(--bit-accent-success-color,#37b26c)}.admonition-tip h5{color:#37b26c;color:var(--bit-accent-success-color,#37b26c)}.admonition-warning{background-color:#fdeff2;background-color:var(--bit-accent-impulsive-bg,#fdeff2);border-left:8px solid #e62e5c;border-left:8px solid var(--bit-accent-impulsive-color,#e62e5c)}.admonition-warning h5{color:#e62e5c;color:var(--bit-accent-impulsive-color,#e62e5c)}.admonition-important{background-color:#f3faff;background-color:var(--bit-accent-process-color,#f3faff);border-left:8px solid #0984e3;border-left:8px solid var(--bit-accent-process-color,#0984e3)}.admonition-important h5{color:#0984e3;color:var(--bit-accent-process-color,#0984e3)}.admonition-note{background-color:#fff5dd;background-color:var(--bit-accent-hunger-bg,#fff5dd);border-left:8px solid #ffc640;border-left:8px solid var(--bit-accent-hunger-color,#ffc640)}.admonition-note h5{color:#ffc640;color:var(--bit-accent-hunger-color,#ffc640)}

package/teambit_compilation_aspect_docs_multi_compiler-component.js

@@ -0,0 +1,29 @@
+(function(root,factory){typeof exports=="object"&&typeof module=="object"?module.exports=factory():typeof define=="function"&&define.amd?define([],factory):typeof exports=="object"?exports["teambit.compilation/aspect-docs/multi-compiler"]=factory():root["teambit.compilation/aspect-docs/multi-compiler"]=factory()})(self,()=>(()=>{"use strict";var __webpack_modules__={3178:function(__unused_webpack_module,exports2,__webpack_require__2){var __bit_component={id:"teambit.compilation/aspect-docs/multi-compiler@b178b66672563603b4dfc97329d5f4d7642594bc",homepage:"https://bit.cloud/teambit/compilation/aspect-docs/multi-compiler",exported:!0},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.MultiCompiler=void 0;var multi_compiler_mdx_1=__webpack_require__2(4166);Object.defineProperty(exports2,"MultiCompiler",{enumerable:!0,get:function(){return __importDefault(multi_compiler_mdx_1).default}})},4166:(__unused_webpack_module,exports2,__webpack_require__2)=>{var __bit_component={id:"teambit.compilation/aspect-docs/multi-compiler@b178b66672563603b4dfc97329d5f4d7642594bc",homepage:"https://bit.cloud/teambit/compilation/aspect-docs/multi-compiler",exported:!0};Object.defineProperty(exports2,"__esModule",{value:!0}),exports2.default=MDXContent;var _react=_interopRequireDefault(__webpack_require__2(7363)),_react2=__webpack_require__2(40),_excluded=["components"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}_interopRequireDefault.__bit_component=__bit_component;function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}_extends.__bit_component=__bit_component;function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&(!Object.prototype.propertyIsEnumerable.call(source,key)||(target[key]=source[key]))}return target}_objectWithoutProperties.__bit_component=__bit_component;function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}_objectWithoutPropertiesLoose.__bit_component=__bit_component;var layoutProps={},MDXLayout="wrapper";function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return(0,_react2.mdx)(MDXLayout,_extends({},layoutProps,props,{components,mdxType:"MDXLayout"}),(0,_react2.mdx)("blockquote",null,(0,_react2.mdx)("p",{parentName:"blockquote"},"The Multi-Compiler in Bit allows for the combination of multiple compilers, such as TypeScript and Vue SFC (Single File Components), within a single compiler. This hybrid compiler can then be used in various environments. This guide demonstrates how to create such a compiler. For those new to Bit, start by reviewing ",(0,_react2.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/compiling/create-compiler"},"creating your compiler"),".")),(0,_react2.mdx)("h2",null,"Creating a Hybrid Compiler with Multi-Compiler"),(0,_react2.mdx)("p",null,"The Multi-Compiler excels in situations where components require different types of transpilation processes. Below is an example of creating a new compiler that combines TypeScript and Vue SFC compilers."),(0,_react2.mdx)("h3",null,"Example: Combining TypeScript and Vue SFC Compilers"),(0,_react2.mdx)("p",null,"Suppose you need a compiler that can handle both TypeScript files and Vue SFCs. Here\u2019s how you can create one using the Multi-Compiler:"),(0,_react2.mdx)("pre",null,(0,_react2.mdx)("code",{parentName:"pre",className:"language-typescript"},`// Example of creating a new compiler that combines TypeScript and Vue SFC compilers
+import { MultiCompiler } from '@teambit/compilation.compilers.multi-compiler';
+import { TypescriptCompiler, TypeScriptCompilerOptions } from '@teambit/typescript.typescript-compiler';
+import { VueSfcCompiler } from '@teambit/vue.dev-services.compiler.vue-sfc-compiler';
+
+export const MyCombinedCompiler = {
+  from: (
+    typescriptOptions: TypeScriptCompilerOptions
+  ): Compiler => {
+    const multiCompiler = MultiCompiler.from({
+      shouldCopyNonSupportedFiles: true,
+      compilers: [
+        TypescriptCompiler.from(typescriptOptions),
+        VueSfcCompiler.from({
+          autoImportCss: true,
+          autoResolveImports: true,
+          tsconfigPath: typescriptOptions.tsconfig,
+          tsTypesPath: typescriptOptions.types,
+          tsRuntime: typescriptOptions.typescript,
+        }),
+      ],
+    });
+
+    multiCompiler.deleteDistDir = true;
+
+    return multiCompiler;
+  },
+};
+`)),(0,_react2.mdx)("p",null,"In this configuration:"),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"TypescriptCompiler")," and ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"VueSfcCompiler")," are initialized with their respective options."),(0,_react2.mdx)("li",{parentName:"ul"},(0,_react2.mdx)("inlineCode",{parentName:"li"},"MultiCompiler.from")," is used to combine these compilers."),(0,_react2.mdx)("li",{parentName:"ul"},"The resulting ",(0,_react2.mdx)("inlineCode",{parentName:"li"},"MyCombinedCompiler")," can then be used in an environment to handle both TypeScript and Vue SFC files.")),(0,_react2.mdx)("h3",null,"Practical Applications"),(0,_react2.mdx)("p",null,"This approach is particularly useful in environments where multiple types of files need to be compiled, such as:"),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},"Vue environments that require TypeScript and Vue SFC compilation."),(0,_react2.mdx)("li",{parentName:"ul"},"Other complex setups where different compilers need to be combined.")),(0,_react2.mdx)("h2",null,"Additional Resources and References"),(0,_react2.mdx)("ul",null,(0,_react2.mdx)("li",{parentName:"ul"},"Learn more about the Vue Compiler: ",(0,_react2.mdx)("a",{parentName:"li",href:"https://bit.cloud/bitdev/vue/dev-services/compiler/vue-compiler"},"Vue Compiler")),(0,_react2.mdx)("li",{parentName:"ul"},"Explore the MDX Multi-Compiler: ",(0,_react2.mdx)("a",{parentName:"li",href:"https://bit.cloud/teambit/mdx/compilers/mdx-multi-compiler"},"MDX Multi-Compiler")),(0,_react2.mdx)("li",{parentName:"ul"},"Discover the Svelte TypeScript Multi-Compiler: ",(0,_react2.mdx)("a",{parentName:"li",href:"https://bit.cloud/bitdev/svelte/dev-services/compiler/svelte-typescript-multi-compiler"},"Svelte TypeScript Multi-Compiler"))),(0,_react2.mdx)("h2",null,"Contributing"),(0,_react2.mdx)("p",null,"We welcome contributions to improve Bit's ecosystem. Learn about submitting a change request ",(0,_react2.mdx)("a",{parentName:"p",href:"https://bit.dev/reference/lanes/create-lane"},"here"),"."),(0,_react2.mdx)("h2",null,"License"),(0,_react2.mdx)("p",null,"Apache 2.0 license."))}MDXContent.__bit_component=__bit_component,MDXContent.isMDXComponent=!0},40:module2=>{module2.exports=MdxJsReact},7363:module2=>{module2.exports=React}},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(cachedModule!==void 0)return cachedModule.exports;var module2=__webpack_module_cache__[moduleId]={exports:{}};return __webpack_modules__[moduleId].call(module2.exports,module2,module2.exports,__webpack_require__),module2.exports}__webpack_require__.m=__webpack_modules__,(()=>{var deferred=[];__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(chunkIds){priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority];return}for(var notFulfilled=1/0,i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(priority&!1||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every(key=>__webpack_require__.O[key](chunkIds[j]))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();r!==void 0&&(result=r)}}return result}})(),__webpack_require__.n=module2=>{var getter=module2&&module2.__esModule?()=>module2.default:()=>module2;return __webpack_require__.d(getter,{a:getter}),getter},__webpack_require__.d=(exports2,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports2,key)&&Object.defineProperty(exports2,key,{enumerable:!0,get:definition[key]})},__webpack_require__.g=function(){if(typeof globalThis=="object")return globalThis;try{return this||new Function("return this")()}catch{if(typeof window=="object")return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),__webpack_require__.r=exports2=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(exports2,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports2,"__esModule",{value:!0})},(()=>{var installedChunks={459:0};__webpack_require__.O.j=chunkId=>installedChunks[chunkId]===0;var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var[chunkIds,moreModules,runtime]=data,moduleId,chunkId,i=0;if(chunkIds.some(id=>installedChunks[id]!==0)){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk=self.webpackChunk||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})();var __webpack_exports__=__webpack_require__(3178);return __webpack_exports__=__webpack_require__.O(__webpack_exports__),__webpack_exports__})());