@teambit/react 0.0.880 → 0.0.882

package/dist/templates/react-context/files/context.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.contextFile = void 0;
-
 const contextFile = context => {
   const {
     name,
@@ -27,7 +26,6 @@ export const ${Name}Context = createContext<${Name}ContextType>({
 `
   };
 };
-
 exports.contextFile = contextFile;
 
 //# sourceMappingURL=context.js.map

package/dist/templates/react-context/files/context.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextFile","context","name","namePascalCase","Name","relativePath","content"],"sources":["context.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const contextFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n  return {\n    relativePath: `${name}-context.tsx`,\n    content: `import { createContext } from 'react';\n\nexport type ${Name}ContextType = {\n  /**\n   * primary color of theme.\n   */\n  color?: string;\n};\n\nexport const ${Name}Context = createContext<${Name}ContextType>({\n  color: 'aqua'\n});\n`,\n  };\n};\n"],"mappings":";;;;;;;AAEO,MAAMA,WAAW,GAAIC,OAAD,IAA+B;EACxD,MAAM;IAAEC,IAAF;IAAQC,cAAc,EAAEC;EAAxB,IAAiCH,OAAvC;EACA,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,cADjB;IAELI,OAAO,EAAG;AACd;AACA,cAAcF,IAAK;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,IAAK,2BAA0BA,IAAK;AACnD;AACA;AACA;EAdS,CAAP;AAgBD,CAlBM"}
+{"version":3,"names":["contextFile","context","name","namePascalCase","Name","relativePath","content"],"sources":["context.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const contextFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n  return {\n    relativePath: `${name}-context.tsx`,\n    content: `import { createContext } from 'react';\n\nexport type ${Name}ContextType = {\n  /**\n   * primary color of theme.\n   */\n  color?: string;\n};\n\nexport const ${Name}Context = createContext<${Name}ContextType>({\n  color: 'aqua'\n});\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,WAAW,GAAIC,OAAyB,IAAK;EACxD,MAAM;IAAEC,IAAI;IAAEC,cAAc,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAC9C,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,cAAa;IACnCI,OAAO,EAAG;AACd;AACA,cAAcF,IAAK;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,IAAK,2BAA0BA,IAAK;AACnD;AACA;AACA;EACE,CAAC;AACH,CAAC;AAAC"}

package/dist/templates/react-context/files/docs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.docsFile = void 0;
-
 const docsFile = context => {
   const {
     name,
@@ -56,7 +55,6 @@ Change the color to see the text change:
 `
   };
 };
-
 exports.docsFile = docsFile;
 
 //# sourceMappingURL=docs.js.map

package/dist/templates/react-context/files/docs.js.map

@@ -1 +1 @@
-{"version":3,"names":["docsFile","context","name","namePascalCase","Name","relativePath","content"],"sources":["docs.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const docsFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n\n  return {\n    relativePath: `${name}-context.docs.mdx`,\n    content: `---\ndescription: ${Name} context.\nlabels: ['context']\n---\n\nimport { ${Name}Context } from './${name}-context';\nimport { ${Name}Provider } from './${name}-context-provider';\nimport { MockComponent } from './${name}-context.composition';\n\n## React Theme Context\n\nThis is a simple [React Context](https://reactjs.org/docs/context.html) shared as a Bit component.\nUse this component to apply a theme as a context to set on it's children.\n\n### Component usage\n\n\\`\\`\\`tsx\n() => {\nimport React, { useContext } from 'react';\nimport { ThemeProvider } from './theme-context-provider';\nimport { ThemeContext } from './theme-context';\n\n<${Name}Provider color=\"blue\">\n  // My lovely children now get a theme!\n  <MockComponent />\n</${Name}Provider>;\n\\`\\`\\`\n\n### Using props to customize the theme\n\nChange the color to see the text change:\n\n\\`\\`\\`tsx live\n() => {\n  return (\n    <${Name}Provider color=\"red\">\n      <MockComponent />\n    </${Name}Provider>\n  );\n};\n\\`\\`\\`\n`,\n  };\n};\n"],"mappings":";;;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAD,IAA+B;EACrD,MAAM;IAAEC,IAAF;IAAQC,cAAc,EAAEC;EAAxB,IAAiCH,OAAvC;EAEA,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,mBADjB;IAELI,OAAO,EAAG;AACd,eAAeF,IAAK;AACpB;AACA;AACA;AACA,WAAWA,IAAK,qBAAoBF,IAAK;AACzC,WAAWE,IAAK,sBAAqBF,IAAK;AAC1C,mCAAmCA,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAGE,IAAK;AACR;AACA;AACA,IAAIA,IAAK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,IAAK;AACZ;AACA,QAAQA,IAAK;AACb;AACA;AACA;AACA;EA3CS,CAAP;AA6CD,CAhDM"}
+{"version":3,"names":["docsFile","context","name","namePascalCase","Name","relativePath","content"],"sources":["docs.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const docsFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n\n  return {\n    relativePath: `${name}-context.docs.mdx`,\n    content: `---\ndescription: ${Name} context.\nlabels: ['context']\n---\n\nimport { ${Name}Context } from './${name}-context';\nimport { ${Name}Provider } from './${name}-context-provider';\nimport { MockComponent } from './${name}-context.composition';\n\n## React Theme Context\n\nThis is a simple [React Context](https://reactjs.org/docs/context.html) shared as a Bit component.\nUse this component to apply a theme as a context to set on it's children.\n\n### Component usage\n\n\\`\\`\\`tsx\n() => {\nimport React, { useContext } from 'react';\nimport { ThemeProvider } from './theme-context-provider';\nimport { ThemeContext } from './theme-context';\n\n<${Name}Provider color=\"blue\">\n  // My lovely children now get a theme!\n  <MockComponent />\n</${Name}Provider>;\n\\`\\`\\`\n\n### Using props to customize the theme\n\nChange the color to see the text change:\n\n\\`\\`\\`tsx live\n() => {\n  return (\n    <${Name}Provider color=\"red\">\n      <MockComponent />\n    </${Name}Provider>\n  );\n};\n\\`\\`\\`\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAyB,IAAK;EACrD,MAAM;IAAEC,IAAI;IAAEC,cAAc,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAE9C,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,mBAAkB;IACxCI,OAAO,EAAG;AACd,eAAeF,IAAK;AACpB;AACA;AACA;AACA,WAAWA,IAAK,qBAAoBF,IAAK;AACzC,WAAWE,IAAK,sBAAqBF,IAAK;AAC1C,mCAAmCA,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAGE,IAAK;AACR;AACA;AACA,IAAIA,IAAK;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,IAAK;AACZ;AACA,QAAQA,IAAK;AACb;AACA;AACA;AACA;EACE,CAAC;AACH,CAAC;AAAC"}

package/dist/templates/react-context/files/index-file.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.indexFile = void 0;
-
 const indexFile = context => {
   const {
     name,
@@ -19,7 +18,6 @@ export type { ${Name}ProviderProps } from './${name}-context-provider';
 `
   };
 };
-
 exports.indexFile = indexFile;
 
 //# sourceMappingURL=index-file.js.map

package/dist/templates/react-context/files/index-file.js.map

@@ -1 +1 @@
-{"version":3,"names":["indexFile","context","name","namePascalCase","Name","relativePath","content"],"sources":["index-file.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const indexFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n\n  return {\n    relativePath: 'index.ts',\n    content: `export { ${Name}Context } from './${name}-context';\nexport type { ${Name}ContextType } from './${name}-context';\nexport { ${Name}Provider } from './${name}-context-provider';\nexport type { ${Name}ProviderProps } from './${name}-context-provider';\n`,\n  };\n};\n"],"mappings":";;;;;;;AAEO,MAAMA,SAAS,GAAIC,OAAD,IAA+B;EACtD,MAAM;IAAEC,IAAF;IAAQC,cAAc,EAAEC;EAAxB,IAAiCH,OAAvC;EAEA,OAAO;IACLI,YAAY,EAAE,UADT;IAELC,OAAO,EAAG,YAAWF,IAAK,qBAAoBF,IAAK;AACvD,gBAAgBE,IAAK,yBAAwBF,IAAK;AAClD,WAAWE,IAAK,sBAAqBF,IAAK;AAC1C,gBAAgBE,IAAK,2BAA0BF,IAAK;AACpD;EANS,CAAP;AAQD,CAXM"}
+{"version":3,"names":["indexFile","context","name","namePascalCase","Name","relativePath","content"],"sources":["index-file.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const indexFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n\n  return {\n    relativePath: 'index.ts',\n    content: `export { ${Name}Context } from './${name}-context';\nexport type { ${Name}ContextType } from './${name}-context';\nexport { ${Name}Provider } from './${name}-context-provider';\nexport type { ${Name}ProviderProps } from './${name}-context-provider';\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,SAAS,GAAIC,OAAyB,IAAK;EACtD,MAAM;IAAEC,IAAI;IAAEC,cAAc,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAE9C,OAAO;IACLI,YAAY,EAAE,UAAU;IACxBC,OAAO,EAAG,YAAWF,IAAK,qBAAoBF,IAAK;AACvD,gBAAgBE,IAAK,yBAAwBF,IAAK;AAClD,WAAWE,IAAK,sBAAqBF,IAAK;AAC1C,gBAAgBE,IAAK,2BAA0BF,IAAK;AACpD;EACE,CAAC;AACH,CAAC;AAAC"}

package/dist/templates/react-context/files/test.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.testFile = void 0;
-
 const testFile = context => {
   const {
     name
@@ -22,7 +21,6 @@ it('should render the button in the color blue', () => {
 `
   };
 };
-
 exports.testFile = testFile;
 
 //# sourceMappingURL=test.js.map

package/dist/templates/react-context/files/test.js.map

@@ -1 +1 @@
-{"version":3,"names":["testFile","context","name","relativePath","content"],"sources":["test.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const testFile = (context: ComponentContext) => {\n  const { name } = context;\n\n  return {\n    relativePath: `${name}-context.spec.tsx`,\n    content: `import { BasicThemeUsage } from './${name}-context.composition';\nimport { render } from '@testing-library/react';\n\nit('should render the button in the color blue', () => {\n  const { getByText } = render(<BasicThemeUsage />);\n  const rendered = getByText('this should be blue');\n  expect(rendered).toBeTruthy();\n});\n`,\n  };\n};\n"],"mappings":";;;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAD,IAA+B;EACrD,MAAM;IAAEC;EAAF,IAAWD,OAAjB;EAEA,OAAO;IACLE,YAAY,EAAG,GAAED,IAAK,mBADjB;IAELE,OAAO,EAAG,sCAAqCF,IAAK;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EAVS,CAAP;AAYD,CAfM"}
+{"version":3,"names":["testFile","context","name","relativePath","content"],"sources":["test.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const testFile = (context: ComponentContext) => {\n  const { name } = context;\n\n  return {\n    relativePath: `${name}-context.spec.tsx`,\n    content: `import { BasicThemeUsage } from './${name}-context.composition';\nimport { render } from '@testing-library/react';\n\nit('should render the button in the color blue', () => {\n  const { getByText } = render(<BasicThemeUsage />);\n  const rendered = getByText('this should be blue');\n  expect(rendered).toBeTruthy();\n});\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAyB,IAAK;EACrD,MAAM;IAAEC;EAAK,CAAC,GAAGD,OAAO;EAExB,OAAO;IACLE,YAAY,EAAG,GAAED,IAAK,mBAAkB;IACxCE,OAAO,EAAG,sCAAqCF,IAAK;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE,CAAC;AACH,CAAC;AAAC"}

package/dist/templates/react-context/index.js

@@ -4,67 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.reactContext = void 0;
-
 function _context() {
   const data = require("./files/context");
-
   _context = function () {
     return data;
   };
-
   return data;
 }
-
 function _contextProvider() {
   const data = require("./files/context-provider");
-
   _contextProvider = function () {
     return data;
   };
-
   return data;
 }
-
 function _composition() {
   const data = require("./files/composition");
-
   _composition = function () {
     return data;
   };
-
   return data;
 }
-
 function _docs() {
   const data = require("./files/docs");
-
   _docs = function () {
     return data;
   };
-
   return data;
 }
-
 function _test() {
   const data = require("./files/test");
-
   _test = function () {
     return data;
   };
-
   return data;
 }
-
 function _indexFile() {
   const data = require("./files/index-file");
-
   _indexFile = function () {
     return data;
   };
-
   return data;
 }
-
 const reactContext = {
   name: 'react-context',
   description: 'a react context component',

package/dist/templates/react-context/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["reactContext","name","description","generateFiles","context","indexFile","contextFile","contextProviderFile","compositionFile","docsFile","testFile","config","env"],"sources":["index.ts"],"sourcesContent":["import { ComponentTemplate, ComponentContext } from '@teambit/generator';\nimport { contextFile } from './files/context';\nimport { contextProviderFile } from './files/context-provider';\nimport { compositionFile } from './files/composition';\nimport { docsFile } from './files/docs';\nimport { testFile } from './files/test';\nimport { indexFile } from './files/index-file';\n\nexport const reactContext: ComponentTemplate = {\n  name: 'react-context',\n  description: 'a react context component',\n\n  generateFiles: (context: ComponentContext) => {\n    return [\n      indexFile(context),\n      contextFile(context),\n      contextProviderFile(context),\n      compositionFile(context),\n      docsFile(context),\n      testFile(context),\n    ];\n  },\n  config: {\n    'teambit.react/react': {},\n    'teambit.envs/envs': {\n      env: 'teambit.react/react',\n    },\n  },\n};\n"],"mappings":";;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,YAA+B,GAAG;EAC7CC,IAAI,EAAE,eADuC;EAE7CC,WAAW,EAAE,2BAFgC;EAI7CC,aAAa,EAAGC,OAAD,IAA+B;IAC5C,OAAO,CACL,IAAAC,sBAAA,EAAUD,OAAV,CADK,EAEL,IAAAE,sBAAA,EAAYF,OAAZ,CAFK,EAGL,IAAAG,sCAAA,EAAoBH,OAApB,CAHK,EAIL,IAAAI,8BAAA,EAAgBJ,OAAhB,CAJK,EAKL,IAAAK,gBAAA,EAASL,OAAT,CALK,EAML,IAAAM,gBAAA,EAASN,OAAT,CANK,CAAP;EAQD,CAb4C;EAc7CO,MAAM,EAAE;IACN,uBAAuB,EADjB;IAEN,qBAAqB;MACnBC,GAAG,EAAE;IADc;EAFf;AAdqC,CAAxC"}
+{"version":3,"names":["reactContext","name","description","generateFiles","context","indexFile","contextFile","contextProviderFile","compositionFile","docsFile","testFile","config","env"],"sources":["index.ts"],"sourcesContent":["import { ComponentTemplate, ComponentContext } from '@teambit/generator';\nimport { contextFile } from './files/context';\nimport { contextProviderFile } from './files/context-provider';\nimport { compositionFile } from './files/composition';\nimport { docsFile } from './files/docs';\nimport { testFile } from './files/test';\nimport { indexFile } from './files/index-file';\n\nexport const reactContext: ComponentTemplate = {\n  name: 'react-context',\n  description: 'a react context component',\n\n  generateFiles: (context: ComponentContext) => {\n    return [\n      indexFile(context),\n      contextFile(context),\n      contextProviderFile(context),\n      compositionFile(context),\n      docsFile(context),\n      testFile(context),\n    ];\n  },\n  config: {\n    'teambit.react/react': {},\n    'teambit.envs/envs': {\n      env: 'teambit.react/react',\n    },\n  },\n};\n"],"mappings":";;;;;;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,YAA+B,GAAG;EAC7CC,IAAI,EAAE,eAAe;EACrBC,WAAW,EAAE,2BAA2B;EAExCC,aAAa,EAAGC,OAAyB,IAAK;IAC5C,OAAO,CACL,IAAAC,sBAAS,EAACD,OAAO,CAAC,EAClB,IAAAE,sBAAW,EAACF,OAAO,CAAC,EACpB,IAAAG,sCAAmB,EAACH,OAAO,CAAC,EAC5B,IAAAI,8BAAe,EAACJ,OAAO,CAAC,EACxB,IAAAK,gBAAQ,EAACL,OAAO,CAAC,EACjB,IAAAM,gBAAQ,EAACN,OAAO,CAAC,CAClB;EACH,CAAC;EACDO,MAAM,EAAE;IACN,qBAAqB,EAAE,CAAC,CAAC;IACzB,mBAAmB,EAAE;MACnBC,GAAG,EAAE;IACP;EACF;AACF,CAAC;AAAC"}

package/dist/templates/react-env/files/aspect.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.aspectFile = aspectFile;
-
 function aspectFile({
   namePascalCase: Name,
   componentId

package/dist/templates/react-env/files/aspect.js.map

@@ -1 +1 @@
-{"version":3,"names":["aspectFile","namePascalCase","Name","componentId"],"sources":["aspect.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function aspectFile({ namePascalCase: Name, componentId }: ComponentContext) {\n  return `import { Aspect } from '@teambit/harmony';\n\nexport const ${Name}Aspect = Aspect.create({\n  id: '${componentId}',\n});\n`;\n}\n"],"mappings":";;;;;;;AAEO,SAASA,UAAT,CAAoB;EAAEC,cAAc,EAAEC,IAAlB;EAAwBC;AAAxB,CAApB,EAA6E;EAClF,OAAQ;AACV;AACA,eAAeD,IAAK;AACpB,SAASC,WAAY;AACrB;AACA,CALE;AAMD"}
+{"version":3,"names":["aspectFile","namePascalCase","Name","componentId"],"sources":["aspect.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function aspectFile({ namePascalCase: Name, componentId }: ComponentContext) {\n  return `import { Aspect } from '@teambit/harmony';\n\nexport const ${Name}Aspect = Aspect.create({\n  id: '${componentId}',\n});\n`;\n}\n"],"mappings":";;;;;;AAEO,SAASA,UAAU,CAAC;EAAEC,cAAc,EAAEC,IAAI;EAAEC;AAA8B,CAAC,EAAE;EAClF,OAAQ;AACV;AACA,eAAeD,IAAK;AACpB,SAASC,WAAY;AACrB;AACA,CAAC;AACD"}

package/dist/templates/react-env/files/doc.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.docFile = docFile;
-
 function docFile({
   name,
   componentId

package/dist/templates/react-env/files/doc.js.map

@@ -1 +1 @@
-{"version":3,"names":["docFile","name","componentId"],"sources":["doc.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function docFile({ name, componentId }: ComponentContext) {\n  return `---\ndescription: 'A standard React component development environment'\nlabels: ['react', 'typescript', 'env', 'extension']\n---\n\n## Overview\n\nA customized version which extends the default React component development environment created by teambit.\n\nThis environment can be applied to all your components or a set of components via the command \\`bit env set <pattern or component_id> ${componentId}\\`, or under the variants of your \\`workspace.json\\` file.\nThat means they will use your custom environment instead of the default environment. Environment components are just like any other Bit components in that they can be\nexported and then shared and used in various projects which makes it easier to create standards when working with many teams.\n\n### Usage instructions\n\n#### Recommended usage:\n\nRun the command \\`bit env set <\"pattern\" or component_id> ${componentId}\\` where the pattern is a glob pattern to select multiple components. This will put the env\nconfig in your component's entry in the \\`.bitmap\\` file.\n\n:::Note - this will override any variants policy that tries to set an env for this component in the workspace.jsonc\n:::\n\n#### Alternative Usage\nUnder the **variant** section of your \\`workspace.json\\` file choose which components you want to have the custom environment set. You can find the id of the extension in the \\`${name}.aspect.ts\\` file.\n\n\\`\\`\\`json\n{\n  \"teambit.workspace/variants\": {\n    \"{ui/**}, {pages/**}\": {\n      \"${componentId}\": {}\n    }\n  }\n}\n\\`\\`\\`\n\nThis usage may be deprecated in future in favour of the recommended usage above\n## Runtime Configurations\n\nExtend the \\`main.runtime\\` file when you want to add custom configurations at runtime.\n\n### Compilation\n\nBy default, Component compilation is done with the TypeScript compiler. Target format is \\`ES2015\\` which\nsupports execution from both NodeJS and browser runtimes for server-side rendering. You can modify the \\`tsconfig.json\\` file to add your own compiler options which will then be merged with the default configs set by teambit.\n\nExample:\n\n\\`\\`\\`json\n{\n  \"compilerOptions\": {\n    \"target\": \"es2017\",\n    \"module\": \"es2015\",\n    \"moduleResolution\": \"node\",\n    \"lib\": [\"es2017\", \"dom\"],\n    \"experimentalDecorators\": true,\n    \"esModuleInterop\": true,\n    \"outDir\": \"dist\",\n    \"sourceMap\": true,\n    \"emitDecoratorMetadata\": true,\n    \"allowJs\": true,\n    \"baseUrl\": \".\",\n    \"jsx\": \"react\"\n  }\n}\n\\`\\`\\`\n\n### Testing\n\nComponent testing is done through [Jest](https://jestjs.io/) with the default \\`teambit.react/react\\` environment. You can modify the \\`jestconfig.js\\` file to add your own configurations which will then be merged with the default configs set by teambit.\n\nExample:\n\nTo Override the Jest config to ignore transpiling from specific folders add this to the \\`jestconfig.js\\` file:\n\n\\`\\`\\`js\nconst reactJestConfig = require('@teambit/react/jest/jest.config');\nmodule.exports = {\n  ...reactJestConfig,\n  transformIgnorePatterns: ['/node_modules/(?!(prop-types|@teambit))']\n};\n\\`\\`\\`\n\n### Webpack\n\nBit uses webpack 5 to bundle components. You can modify the \\`webpack.config.js\\` file to add your own configurations which will then be merged with the default configs set by teambit.\n\nExample:\n\n\\`\\`\\`ts\nmodule.exports = {\n  module: {\n    // add your custom rules here\n    rules: []\n  }\n};\n\\`\\`\\`\n\n### ESLint\n\nBit uses ESLint to lint your components. You can add your own rules in the \\`${name}.main.runtime\\` file.\n\nExample:\n\n\\`\\`\\`ts\nreact.useEslint({\n  transformers: [\n    (config) => {\n      config.setRule('no-console', ['error']);\n      // add more rules here\n      return config;\n    }\n  ]\n}),\n\\`\\`\\`\n\nTo use ESLint:\n\n\\`\\`\\`bash\nbit lint\nbit lint --fix\n\\`\\`\\`\n\n### Formatting\n\nBit uses Prettier to format your components. You can add your own rules in the \\`${name}.main.runtime\\` file.\n\nExample:\n\n\\`\\`\\`ts\nreact.usePrettier({\n  transformers: [\n    (config) => {\n      config.setKey('tabWidth', 2);\n      // add more rules here\n      return config;\n    }\n  ]\n}),\n\\`\\`\\`\n\nTo use Prettier:\n\n\\`\\`\\`bash\nbit format --check\nbit format\n\\`\\`\\`\n\n### Dependencies\n\nOverride the default dependencies in the \\`${name}.main.runtime\\` file to include react types of a different version for example.\n\n\\`\\`\\`ts\nreact.overrideDependencies({\n  devDependencies: {\n    '@types/react': '17.0.3'\n  }\n});\n\\`\\`\\`\n\n## Preview Configurations\n\nExtend the \\`${name}.preview.runtime\\` file when you want to add your own customizations only for previewing in the Bit UI.\n\n### Adding a Theme\n\nA custom theme has been added to the env which wraps all the composition files with the required theme so they can be developed with the correct themeing rather than the browsers default. This is added only in the preview runtime and not in the main runtime meaning it is only applied to compositions and not when consuming components. Adding a theme when consuming should be done at App level as you component may be consumed in various apps and have different themes applied depending on where it is consumed.\n\nExample:\n\n\\`\\`\\`ts\nreact.registerProvider([ThemeCompositions]);\n`;\n}\n"],"mappings":";;;;;;;AAEO,SAASA,OAAT,CAAiB;EAAEC,IAAF;EAAQC;AAAR,CAAjB,EAA0D;EAC/D,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wIAAwIA,WAAY;AACpJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4DAA4DA,WAAY;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,mLAAmLD,IAAK;AACxL;AACA;AACA;AACA;AACA;AACA,SAASC,WAAY;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+EAA+ED,IAAK;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mFAAmFA,IAAK;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6CAA6CA,IAAK;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,IAAK;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA5KE;AA6KD"}
+{"version":3,"names":["docFile","name","componentId"],"sources":["doc.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function docFile({ name, componentId }: ComponentContext) {\n  return `---\ndescription: 'A standard React component development environment'\nlabels: ['react', 'typescript', 'env', 'extension']\n---\n\n## Overview\n\nA customized version which extends the default React component development environment created by teambit.\n\nThis environment can be applied to all your components or a set of components via the command \\`bit env set <pattern or component_id> ${componentId}\\`, or under the variants of your \\`workspace.json\\` file.\nThat means they will use your custom environment instead of the default environment. Environment components are just like any other Bit components in that they can be\nexported and then shared and used in various projects which makes it easier to create standards when working with many teams.\n\n### Usage instructions\n\n#### Recommended usage:\n\nRun the command \\`bit env set <\"pattern\" or component_id> ${componentId}\\` where the pattern is a glob pattern to select multiple components. This will put the env\nconfig in your component's entry in the \\`.bitmap\\` file.\n\n:::Note - this will override any variants policy that tries to set an env for this component in the workspace.jsonc\n:::\n\n#### Alternative Usage\nUnder the **variant** section of your \\`workspace.json\\` file choose which components you want to have the custom environment set. You can find the id of the extension in the \\`${name}.aspect.ts\\` file.\n\n\\`\\`\\`json\n{\n  \"teambit.workspace/variants\": {\n    \"{ui/**}, {pages/**}\": {\n      \"${componentId}\": {}\n    }\n  }\n}\n\\`\\`\\`\n\nThis usage may be deprecated in future in favour of the recommended usage above\n## Runtime Configurations\n\nExtend the \\`main.runtime\\` file when you want to add custom configurations at runtime.\n\n### Compilation\n\nBy default, Component compilation is done with the TypeScript compiler. Target format is \\`ES2015\\` which\nsupports execution from both NodeJS and browser runtimes for server-side rendering. You can modify the \\`tsconfig.json\\` file to add your own compiler options which will then be merged with the default configs set by teambit.\n\nExample:\n\n\\`\\`\\`json\n{\n  \"compilerOptions\": {\n    \"target\": \"es2017\",\n    \"module\": \"es2015\",\n    \"moduleResolution\": \"node\",\n    \"lib\": [\"es2017\", \"dom\"],\n    \"experimentalDecorators\": true,\n    \"esModuleInterop\": true,\n    \"outDir\": \"dist\",\n    \"sourceMap\": true,\n    \"emitDecoratorMetadata\": true,\n    \"allowJs\": true,\n    \"baseUrl\": \".\",\n    \"jsx\": \"react\"\n  }\n}\n\\`\\`\\`\n\n### Testing\n\nComponent testing is done through [Jest](https://jestjs.io/) with the default \\`teambit.react/react\\` environment. You can modify the \\`jestconfig.js\\` file to add your own configurations which will then be merged with the default configs set by teambit.\n\nExample:\n\nTo Override the Jest config to ignore transpiling from specific folders add this to the \\`jestconfig.js\\` file:\n\n\\`\\`\\`js\nconst reactJestConfig = require('@teambit/react/jest/jest.config');\nmodule.exports = {\n  ...reactJestConfig,\n  transformIgnorePatterns: ['/node_modules/(?!(prop-types|@teambit))']\n};\n\\`\\`\\`\n\n### Webpack\n\nBit uses webpack 5 to bundle components. You can modify the \\`webpack.config.js\\` file to add your own configurations which will then be merged with the default configs set by teambit.\n\nExample:\n\n\\`\\`\\`ts\nmodule.exports = {\n  module: {\n    // add your custom rules here\n    rules: []\n  }\n};\n\\`\\`\\`\n\n### ESLint\n\nBit uses ESLint to lint your components. You can add your own rules in the \\`${name}.main.runtime\\` file.\n\nExample:\n\n\\`\\`\\`ts\nreact.useEslint({\n  transformers: [\n    (config) => {\n      config.setRule('no-console', ['error']);\n      // add more rules here\n      return config;\n    }\n  ]\n}),\n\\`\\`\\`\n\nTo use ESLint:\n\n\\`\\`\\`bash\nbit lint\nbit lint --fix\n\\`\\`\\`\n\n### Formatting\n\nBit uses Prettier to format your components. You can add your own rules in the \\`${name}.main.runtime\\` file.\n\nExample:\n\n\\`\\`\\`ts\nreact.usePrettier({\n  transformers: [\n    (config) => {\n      config.setKey('tabWidth', 2);\n      // add more rules here\n      return config;\n    }\n  ]\n}),\n\\`\\`\\`\n\nTo use Prettier:\n\n\\`\\`\\`bash\nbit format --check\nbit format\n\\`\\`\\`\n\n### Dependencies\n\nOverride the default dependencies in the \\`${name}.main.runtime\\` file to include react types of a different version for example.\n\n\\`\\`\\`ts\nreact.overrideDependencies({\n  devDependencies: {\n    '@types/react': '17.0.3'\n  }\n});\n\\`\\`\\`\n\n## Preview Configurations\n\nExtend the \\`${name}.preview.runtime\\` file when you want to add your own customizations only for previewing in the Bit UI.\n\n### Adding a Theme\n\nA custom theme has been added to the env which wraps all the composition files with the required theme so they can be developed with the correct themeing rather than the browsers default. This is added only in the preview runtime and not in the main runtime meaning it is only applied to compositions and not when consuming components. Adding a theme when consuming should be done at App level as you component may be consumed in various apps and have different themes applied depending on where it is consumed.\n\nExample:\n\n\\`\\`\\`ts\nreact.registerProvider([ThemeCompositions]);\n`;\n}\n"],"mappings":";;;;;;AAEO,SAASA,OAAO,CAAC;EAAEC,IAAI;EAAEC;AAA8B,CAAC,EAAE;EAC/D,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wIAAwIA,WAAY;AACpJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4DAA4DA,WAAY;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,mLAAmLD,IAAK;AACxL;AACA;AACA;AACA;AACA;AACA,SAASC,WAAY;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+EAA+ED,IAAK;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mFAAmFA,IAAK;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6CAA6CA,IAAK;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,IAAK;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD"}

package/dist/templates/react-env/files/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.indexFile = indexFile;
-
 function indexFile({
   namePascalCase: Name,
   name

package/dist/templates/react-env/files/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["indexFile","namePascalCase","Name","name"],"sources":["index.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function indexFile({ namePascalCase: Name, name }: ComponentContext) {\n  return `import { ${Name}Aspect } from './${name}.aspect';\n\nexport type { ${Name}Main } from './${name}.main.runtime';\nexport default ${Name}Aspect;\nexport { ${Name}Aspect };\n`;\n}\n"],"mappings":";;;;;;;AAEO,SAASA,SAAT,CAAmB;EAAEC,cAAc,EAAEC,IAAlB;EAAwBC;AAAxB,CAAnB,EAAqE;EAC1E,OAAQ,YAAWD,IAAK,oBAAmBC,IAAK;AAClD;AACA,gBAAgBD,IAAK,kBAAiBC,IAAK;AAC3C,iBAAiBD,IAAK;AACtB,WAAWA,IAAK;AAChB,CALE;AAMD"}
+{"version":3,"names":["indexFile","namePascalCase","Name","name"],"sources":["index.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function indexFile({ namePascalCase: Name, name }: ComponentContext) {\n  return `import { ${Name}Aspect } from './${name}.aspect';\n\nexport type { ${Name}Main } from './${name}.main.runtime';\nexport default ${Name}Aspect;\nexport { ${Name}Aspect };\n`;\n}\n"],"mappings":";;;;;;AAEO,SAASA,SAAS,CAAC;EAAEC,cAAc,EAAEC,IAAI;EAAEC;AAAuB,CAAC,EAAE;EAC1E,OAAQ,YAAWD,IAAK,oBAAmBC,IAAK;AAClD;AACA,gBAAgBD,IAAK,kBAAiBC,IAAK;AAC3C,iBAAiBD,IAAK;AACtB,WAAWA,IAAK;AAChB,CAAC;AACD"}

package/dist/templates/react-env/files/jest.config.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.jestConfigFile = jestConfigFile;
-
 function jestConfigFile() {
   return `
   // Override the Jest config to ignore transpiling from specific folders

package/dist/templates/react-env/files/jest.config.js.map

@@ -1 +1 @@
-{"version":3,"names":["jestConfigFile"],"sources":["jest.config.ts"],"sourcesContent":["export function jestConfigFile() {\n  return `\n  // Override the Jest config to ignore transpiling from specific folders\n  // See the base Jest config: https://bit.cloud/teambit/react/react/~code/jest/jest.config.js\n\n  // const reactJestConfig = require('@teambit/react/jest/jest.config');\n  // uncomment the line below and install the package if you want to use this function\n  // const {\n  //   generateNodeModulesPattern,\n  // } = require('@teambit/dependencies.modules.packages-excluder');\n  // const packagesToExclude = ['@my-org', 'my-package-name'];\n\n  // module.exports = {\n  //   ...reactJestConfig,\n  //   transformIgnorePatterns: [\n  //     '^.+\\\\.module\\\\.(css|sass|scss)$',\n  //     generateNodeModulesPattern({ packages: packagesToExclude }),\n  //   ],\n  // };\n  `;\n}\n"],"mappings":";;;;;;;AAAO,SAASA,cAAT,GAA0B;EAC/B,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAlBE;AAmBD"}
+{"version":3,"names":["jestConfigFile"],"sources":["jest.config.ts"],"sourcesContent":["export function jestConfigFile() {\n  return `\n  // Override the Jest config to ignore transpiling from specific folders\n  // See the base Jest config: https://bit.cloud/teambit/react/react/~code/jest/jest.config.js\n\n  // const reactJestConfig = require('@teambit/react/jest/jest.config');\n  // uncomment the line below and install the package if you want to use this function\n  // const {\n  //   generateNodeModulesPattern,\n  // } = require('@teambit/dependencies.modules.packages-excluder');\n  // const packagesToExclude = ['@my-org', 'my-package-name'];\n\n  // module.exports = {\n  //   ...reactJestConfig,\n  //   transformIgnorePatterns: [\n  //     '^.+\\\\.module\\\\.(css|sass|scss)$',\n  //     generateNodeModulesPattern({ packages: packagesToExclude }),\n  //   ],\n  // };\n  `;\n}\n"],"mappings":";;;;;;AAAO,SAASA,cAAc,GAAG;EAC/B,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH"}

package/dist/templates/react-env/files/main.runtime.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mainRuntimeFile = mainRuntimeFile;
-
 function mainRuntimeFile({
   namePascalCase: Name,
   name

package/dist/templates/react-env/files/main.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["mainRuntimeFile","namePascalCase","Name","name"],"sources":["main.runtime.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function mainRuntimeFile({ namePascalCase: Name, name }: ComponentContext) {\n  return `import { MainRuntime } from '@teambit/cli';\nimport { ReactAspect, ReactMain, UseTypescriptModifiers } from '@teambit/react';\nimport { EnvsAspect, EnvsMain } from '@teambit/envs';\nimport { ${Name}Aspect } from './${name}.aspect';\n//import {\n//  previewConfigTransformer,\n//  devServerConfigTransformer\n//} from './webpack/webpack-transformers';\n//import {\n//  devConfigTransformer,\n//  buildConfigTransformer,\n//} from \"./typescript/ts-transformer\";\n\nexport class ${Name}Main {\n  static slots = [];\n\n  static dependencies = [ReactAspect, EnvsAspect];\n\n  static runtime = MainRuntime;\n\n  static async provider([react, envs]: [ReactMain, EnvsMain]) {\n\n    //const webpackModifiers: UseWebpackModifiers = {\n      //  previewConfig: [previewConfigTransformer],\n      //  devServerConfig: [devServerConfigTransformer],\n    //};\n\n    //const tsModifiers: UseTypescriptModifiers = {\n      //  devConfig: [devConfigTransformer],\n      //  buildConfig: [buildConfigTransformer],\n    //};\n\n    const ${Name}Env = react.compose([\n      /**\n       * Uncomment to override the config files for TypeScript, Webpack or Jest\n       * Your config gets merged with the defaults\n       */\n\n      // react.useTypescript(tsModifiers),  // note: this cannot be used in conjunction with react.overrideCompiler\n      // react.useWebpack(webpackModifiers),\n      // react.overrideJestConfig(require.resolve('./jest/jest.config')),\n\n      /**\n       * override the ESLint default config here then check your files for lint errors\n       * @example\n       * bit lint\n       * bit lint --fix\n       */\n      //react.useEslint({\n      //  transformers: [\n      //  (config) => {\n      //    config.setRule('no-console', ['error']);\n      //    return config;\n      //    }\n      //  ]\n      //}),\n\n      /**\n       * override the Prettier default config here the check your formatting\n       * @example\n       * bit format --check\n       * bit format\n       */\n      //react.usePrettier({\n      //  transformers: [\n      //    (config) => {\n      //      config.setKey('tabWidth', 2);\n      //      return config;\n      //    }\n      //  ]\n      //}),\n\n      /**\n       * override dependencies here\n       * @example\n       * Uncomment types to include version 17.0.3 of the types package\n       */\n      react.overrideDependencies({\n        devDependencies: {\n          // '@types/react': '17.0.3'\n        }\n      })\n    ]);\n    envs.registerEnv(${Name}Env);\n    return new ${Name}Main();\n  }\n}\n\n${Name}Aspect.addRuntime(${Name}Main);\n`;\n}\n"],"mappings":";;;;;;;AAEO,SAASA,eAAT,CAAyB;EAAEC,cAAc,EAAEC,IAAlB;EAAwBC;AAAxB,CAAzB,EAA2E;EAChF,OAAQ;AACV;AACA;AACA,WAAWD,IAAK,oBAAmBC,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeD,IAAK;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAYA,IAAK;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuBA,IAAK;AAC5B,iBAAiBA,IAAK;AACtB;AACA;AACA;AACA,EAAEA,IAAK,qBAAoBA,IAAK;AAChC,CAzFE;AA0FD"}
+{"version":3,"names":["mainRuntimeFile","namePascalCase","Name","name"],"sources":["main.runtime.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function mainRuntimeFile({ namePascalCase: Name, name }: ComponentContext) {\n  return `import { MainRuntime } from '@teambit/cli';\nimport { ReactAspect, ReactMain, UseTypescriptModifiers } from '@teambit/react';\nimport { EnvsAspect, EnvsMain } from '@teambit/envs';\nimport { ${Name}Aspect } from './${name}.aspect';\n//import {\n//  previewConfigTransformer,\n//  devServerConfigTransformer\n//} from './webpack/webpack-transformers';\n//import {\n//  devConfigTransformer,\n//  buildConfigTransformer,\n//} from \"./typescript/ts-transformer\";\n\nexport class ${Name}Main {\n  static slots = [];\n\n  static dependencies = [ReactAspect, EnvsAspect];\n\n  static runtime = MainRuntime;\n\n  static async provider([react, envs]: [ReactMain, EnvsMain]) {\n\n    //const webpackModifiers: UseWebpackModifiers = {\n      //  previewConfig: [previewConfigTransformer],\n      //  devServerConfig: [devServerConfigTransformer],\n    //};\n\n    //const tsModifiers: UseTypescriptModifiers = {\n      //  devConfig: [devConfigTransformer],\n      //  buildConfig: [buildConfigTransformer],\n    //};\n\n    const ${Name}Env = react.compose([\n      /**\n       * Uncomment to override the config files for TypeScript, Webpack or Jest\n       * Your config gets merged with the defaults\n       */\n\n      // react.useTypescript(tsModifiers),  // note: this cannot be used in conjunction with react.overrideCompiler\n      // react.useWebpack(webpackModifiers),\n      // react.overrideJestConfig(require.resolve('./jest/jest.config')),\n\n      /**\n       * override the ESLint default config here then check your files for lint errors\n       * @example\n       * bit lint\n       * bit lint --fix\n       */\n      //react.useEslint({\n      //  transformers: [\n      //  (config) => {\n      //    config.setRule('no-console', ['error']);\n      //    return config;\n      //    }\n      //  ]\n      //}),\n\n      /**\n       * override the Prettier default config here the check your formatting\n       * @example\n       * bit format --check\n       * bit format\n       */\n      //react.usePrettier({\n      //  transformers: [\n      //    (config) => {\n      //      config.setKey('tabWidth', 2);\n      //      return config;\n      //    }\n      //  ]\n      //}),\n\n      /**\n       * override dependencies here\n       * @example\n       * Uncomment types to include version 17.0.3 of the types package\n       */\n      react.overrideDependencies({\n        devDependencies: {\n          // '@types/react': '17.0.3'\n        }\n      })\n    ]);\n    envs.registerEnv(${Name}Env);\n    return new ${Name}Main();\n  }\n}\n\n${Name}Aspect.addRuntime(${Name}Main);\n`;\n}\n"],"mappings":";;;;;;AAEO,SAASA,eAAe,CAAC;EAAEC,cAAc,EAAEC,IAAI;EAAEC;AAAuB,CAAC,EAAE;EAChF,OAAQ;AACV;AACA;AACA,WAAWD,IAAK,oBAAmBC,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeD,IAAK;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAYA,IAAK;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuBA,IAAK;AAC5B,iBAAiBA,IAAK;AACtB;AACA;AACA;AACA,EAAEA,IAAK,qBAAoBA,IAAK;AAChC,CAAC;AACD"}

package/dist/templates/react-env/files/preview.runtime.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.previewRuntimeFile = previewRuntimeFile;
-
 function previewRuntimeFile({
   namePascalCase: Name,
   nameCamelCase: nameCamel,

package/dist/templates/react-env/files/preview.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["previewRuntimeFile","namePascalCase","Name","nameCamelCase","nameCamel","name"],"sources":["preview.runtime.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function previewRuntimeFile({ namePascalCase: Name, nameCamelCase: nameCamel, name }: ComponentContext) {\n  return `import { PreviewRuntime } from '@teambit/preview';\nimport { ReactAspect, ReactPreview } from '@teambit/react';\n// uncomment the line below and install the theme if you want to use our theme or create your own and import it here\n// import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';\n\nimport { ${Name}Aspect } from './${name}.aspect';\n\nexport class ${Name}PreviewMain {\n  static runtime = PreviewRuntime;\n\n  static dependencies = [ReactAspect];\n\n  static async provider([react]: [ReactPreview]) {\n    const ${nameCamel}PreviewMain = new ${Name}PreviewMain();\n    // uncomment the line below to register a new provider to wrap all compositions using this environment with a custom theme.\n    // react.registerProvider([ThemeCompositions]);\n\n    return ${nameCamel}PreviewMain;\n  }\n}\n\n${Name}Aspect.addRuntime(${Name}PreviewMain);\n`;\n}\n"],"mappings":";;;;;;;AAEO,SAASA,kBAAT,CAA4B;EAAEC,cAAc,EAAEC,IAAlB;EAAwBC,aAAa,EAAEC,SAAvC;EAAkDC;AAAlD,CAA5B,EAAwG;EAC7G,OAAQ;AACV;AACA;AACA;AACA;AACA,WAAWH,IAAK,oBAAmBG,IAAK;AACxC;AACA,eAAeH,IAAK;AACpB;AACA;AACA;AACA;AACA;AACA,YAAYE,SAAU,qBAAoBF,IAAK;AAC/C;AACA;AACA;AACA,aAAaE,SAAU;AACvB;AACA;AACA;AACA,EAAEF,IAAK,qBAAoBA,IAAK;AAChC,CAtBE;AAuBD"}
+{"version":3,"names":["previewRuntimeFile","namePascalCase","Name","nameCamelCase","nameCamel","name"],"sources":["preview.runtime.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function previewRuntimeFile({ namePascalCase: Name, nameCamelCase: nameCamel, name }: ComponentContext) {\n  return `import { PreviewRuntime } from '@teambit/preview';\nimport { ReactAspect, ReactPreview } from '@teambit/react';\n// uncomment the line below and install the theme if you want to use our theme or create your own and import it here\n// import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';\n\nimport { ${Name}Aspect } from './${name}.aspect';\n\nexport class ${Name}PreviewMain {\n  static runtime = PreviewRuntime;\n\n  static dependencies = [ReactAspect];\n\n  static async provider([react]: [ReactPreview]) {\n    const ${nameCamel}PreviewMain = new ${Name}PreviewMain();\n    // uncomment the line below to register a new provider to wrap all compositions using this environment with a custom theme.\n    // react.registerProvider([ThemeCompositions]);\n\n    return ${nameCamel}PreviewMain;\n  }\n}\n\n${Name}Aspect.addRuntime(${Name}PreviewMain);\n`;\n}\n"],"mappings":";;;;;;AAEO,SAASA,kBAAkB,CAAC;EAAEC,cAAc,EAAEC,IAAI;EAAEC,aAAa,EAAEC,SAAS;EAAEC;AAAuB,CAAC,EAAE;EAC7G,OAAQ;AACV;AACA;AACA;AACA;AACA,WAAWH,IAAK,oBAAmBG,IAAK;AACxC;AACA,eAAeH,IAAK;AACpB;AACA;AACA;AACA;AACA;AACA,YAAYE,SAAU,qBAAoBF,IAAK;AAC/C;AACA;AACA;AACA,aAAaE,SAAU;AACvB;AACA;AACA;AACA,EAAEF,IAAK,qBAAoBA,IAAK;AAChC,CAAC;AACD"}

package/dist/templates/react-env/files/typescript/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.globalStylesFile = globalStylesFile;
-
 function globalStylesFile() {
   return `
   /*

package/dist/templates/react-env/files/typescript/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["globalStylesFile"],"sources":["styles.ts"],"sourcesContent":["export function globalStylesFile() {\n  return `\n  /*\n  Add your global styles here to be added for any component using this env\n  */\n  `;\n}\n"],"mappings":";;;;;;;AAAO,SAASA,gBAAT,GAA4B;EACjC,OAAQ;AACV;AACA;AACA;AACA,GAJE;AAKD"}
+{"version":3,"names":["globalStylesFile"],"sources":["styles.ts"],"sourcesContent":["export function globalStylesFile() {\n  return `\n  /*\n  Add your global styles here to be added for any component using this env\n  */\n  `;\n}\n"],"mappings":";;;;;;AAAO,SAASA,gBAAgB,GAAG;EACjC,OAAQ;AACV;AACA;AACA;AACA,GAAG;AACH"}

package/dist/templates/react-env/files/typescript/ts-transformer.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tsTransformerFile = tsTransformerFile;
-
 function tsTransformerFile() {
   return `
   import * as path from 'path';

package/dist/templates/react-env/files/typescript/ts-transformer.js.map

@@ -1 +1 @@
-{"version":3,"names":["tsTransformerFile"],"sources":["ts-transformer.ts"],"sourcesContent":["export function tsTransformerFile() {\n  return `\n  import * as path from 'path';\nimport {\n  TsConfigTransformer,\n  TypescriptConfigMutator,\n} from \"@teambit/typescript\";\n\nconst tsConfig = require('./tsconfig.json');\n\nexport const commonTransformer: TsConfigTransformer = (\n  config: TypescriptConfigMutator\n) => {\n  const newConfig = config.addTypes([path.join(__dirname, 'styles.d.ts')])\n  newConfig.mergeTsConfig(tsConfig);\n  // Some examples of other built in mutator functions:\n  //newConfig.addExclude(['someExclude']);\n  //newConfig.setCompileJs(true)\n  return newConfig;\n};\n\n/**\n * Transformation for the dev config only\n * @param config\n * @param context\n * @returns\n */\nexport const devConfigTransformer: TsConfigTransformer = (\n  config: TypescriptConfigMutator,\n) => {\n  const newConfig = commonTransformer(config, {});\n  return newConfig;\n};\n\n/**\n * Transformation for the build only\n * @param config\n * @param context\n * @returns\n */\nexport const buildConfigTransformer: TsConfigTransformer = (\n  config: TypescriptConfigMutator\n) => {\n  const newConfig = commonTransformer(config, {});\n  newConfig.mergeTsConfig(tsConfig);\n  return newConfig;\n};\n\n`;\n}\n"],"mappings":";;;;;;;AAAO,SAASA,iBAAT,GAA6B;EAClC,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA/CE;AAgDD"}
+{"version":3,"names":["tsTransformerFile"],"sources":["ts-transformer.ts"],"sourcesContent":["export function tsTransformerFile() {\n  return `\n  import * as path from 'path';\nimport {\n  TsConfigTransformer,\n  TypescriptConfigMutator,\n} from \"@teambit/typescript\";\n\nconst tsConfig = require('./tsconfig.json');\n\nexport const commonTransformer: TsConfigTransformer = (\n  config: TypescriptConfigMutator\n) => {\n  const newConfig = config.addTypes([path.join(__dirname, 'styles.d.ts')])\n  newConfig.mergeTsConfig(tsConfig);\n  // Some examples of other built in mutator functions:\n  //newConfig.addExclude(['someExclude']);\n  //newConfig.setCompileJs(true)\n  return newConfig;\n};\n\n/**\n * Transformation for the dev config only\n * @param config\n * @param context\n * @returns\n */\nexport const devConfigTransformer: TsConfigTransformer = (\n  config: TypescriptConfigMutator,\n) => {\n  const newConfig = commonTransformer(config, {});\n  return newConfig;\n};\n\n/**\n * Transformation for the build only\n * @param config\n * @param context\n * @returns\n */\nexport const buildConfigTransformer: TsConfigTransformer = (\n  config: TypescriptConfigMutator\n) => {\n  const newConfig = commonTransformer(config, {});\n  newConfig.mergeTsConfig(tsConfig);\n  return newConfig;\n};\n\n`;\n}\n"],"mappings":";;;;;;AAAO,SAASA,iBAAiB,GAAG;EAClC,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD"}

package/dist/templates/react-env/files/typescript/typescript.config.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.typescriptConfigFile = typescriptConfigFile;
-
 function typescriptConfigFile() {
   return `{
   // add your compiler options here

package/dist/templates/react-env/files/typescript/typescript.config.js.map

@@ -1 +1 @@
-{"version":3,"names":["typescriptConfigFile"],"sources":["typescript.config.ts"],"sourcesContent":["export function typescriptConfigFile() {\n  return `{\n  // add your compiler options here\n\n  \"compilerOptions\": {\n    // \"target\": \"es2017\",\n    // \"module\": \"es2015\",\n    // \"moduleResolution\": \"node\",\n    // \"lib\": [\"es2017\", \"dom\"],\n    // \"experimentalDecorators\": true,\n    // \"esModuleInterop\": true,\n    // \"outDir\": \"dist\",\n    // \"sourceMap\": true,\n    // \"emitDecoratorMetadata\": true,\n    // \"allowJs\": true,\n    // \"baseUrl\": \".\",\n    // \"jsx\": \"react\"\n  }\n}\n`;\n}\n"],"mappings":";;;;;;;AAAO,SAASA,oBAAT,GAAgC;EACrC,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAlBE;AAmBD"}
+{"version":3,"names":["typescriptConfigFile"],"sources":["typescript.config.ts"],"sourcesContent":["export function typescriptConfigFile() {\n  return `{\n  // add your compiler options here\n\n  \"compilerOptions\": {\n    // \"target\": \"es2017\",\n    // \"module\": \"es2015\",\n    // \"moduleResolution\": \"node\",\n    // \"lib\": [\"es2017\", \"dom\"],\n    // \"experimentalDecorators\": true,\n    // \"esModuleInterop\": true,\n    // \"outDir\": \"dist\",\n    // \"sourceMap\": true,\n    // \"emitDecoratorMetadata\": true,\n    // \"allowJs\": true,\n    // \"baseUrl\": \".\",\n    // \"jsx\": \"react\"\n  }\n}\n`;\n}\n"],"mappings":";;;;;;AAAO,SAASA,oBAAoB,GAAG;EACrC,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD"}

package/dist/templates/react-env/files/webpack.config.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.webpackConfigFile = webpackConfigFile;
-
 function webpackConfigFile() {
   return `
   import { WebpackConfigTransformer, WebpackConfigMutator, WebpackConfigTransformContext } from '@teambit/webpack';

package/dist/templates/react-env/files/webpack.config.js.map

@@ -1 +1 @@
-{"version":3,"names":["webpackConfigFile"],"sources":["webpack.config.ts"],"sourcesContent":["export function webpackConfigFile() {\n  return `\n  import { WebpackConfigTransformer, WebpackConfigMutator, WebpackConfigTransformContext } from '@teambit/webpack';\n\n  /**\n   * Transformation to apply for both preview and dev server\n   * @param config\n   * @param _context\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  function commonTransformation(config: WebpackConfigMutator, _context: WebpackConfigTransformContext) {\n    // Merge config with the webpack.config.js file if you choose to import a module export format config.\n    // config.merge([webpackConfig]);\n    // config.addAliases({});\n    // config.addModuleRule(youRuleHere);\n    return config;\n  }\n\n  /**\n   * Transformation for the preview only\n   * @param config\n   * @param context\n   * @returns\n   */\n  export const previewConfigTransformer: WebpackConfigTransformer = (\n    config: WebpackConfigMutator,\n    context: WebpackConfigTransformContext\n  ) => {\n    const newConfig = commonTransformation(config, context);\n    return newConfig;\n  };\n\n  /**\n   * Transformation for the dev server only\n   * @param config\n   * @param context\n   * @returns\n   */\n  export const devServerConfigTransformer: WebpackConfigTransformer = (\n    config: WebpackConfigMutator,\n    context: WebpackConfigTransformContext\n  ) => {\n    const newConfig = commonTransformation(config, context);\n    return newConfig;\n  };\n\n`;\n}\n"],"mappings":";;;;;;;AAAO,SAASA,iBAAT,GAA6B;EAClC,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA7CE;AA8CD"}
+{"version":3,"names":["webpackConfigFile"],"sources":["webpack.config.ts"],"sourcesContent":["export function webpackConfigFile() {\n  return `\n  import { WebpackConfigTransformer, WebpackConfigMutator, WebpackConfigTransformContext } from '@teambit/webpack';\n\n  /**\n   * Transformation to apply for both preview and dev server\n   * @param config\n   * @param _context\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  function commonTransformation(config: WebpackConfigMutator, _context: WebpackConfigTransformContext) {\n    // Merge config with the webpack.config.js file if you choose to import a module export format config.\n    // config.merge([webpackConfig]);\n    // config.addAliases({});\n    // config.addModuleRule(youRuleHere);\n    return config;\n  }\n\n  /**\n   * Transformation for the preview only\n   * @param config\n   * @param context\n   * @returns\n   */\n  export const previewConfigTransformer: WebpackConfigTransformer = (\n    config: WebpackConfigMutator,\n    context: WebpackConfigTransformContext\n  ) => {\n    const newConfig = commonTransformation(config, context);\n    return newConfig;\n  };\n\n  /**\n   * Transformation for the dev server only\n   * @param config\n   * @param context\n   * @returns\n   */\n  export const devServerConfigTransformer: WebpackConfigTransformer = (\n    config: WebpackConfigMutator,\n    context: WebpackConfigTransformContext\n  ) => {\n    const newConfig = commonTransformation(config, context);\n    return newConfig;\n  };\n\n`;\n}\n"],"mappings":";;;;;;AAAO,SAASA,iBAAiB,GAAG;EAClC,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD"}

package/dist/templates/react-env/index.js

@@ -4,107 +4,76 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.reactEnvTemplate = void 0;
-
 function _index() {
   const data = require("./files/index");
-
   _index = function () {
     return data;
   };
-
   return data;
 }
-
 function _doc() {
   const data = require("./files/doc");
-
   _doc = function () {
     return data;
   };
-
   return data;
 }
-
 function _main() {
   const data = require("./files/main.runtime");
-
   _main = function () {
     return data;
   };
-
   return data;
 }
-
 function _preview() {
   const data = require("./files/preview.runtime");
-
   _preview = function () {
     return data;
   };
-
   return data;
 }
-
 function _aspect() {
   const data = require("./files/aspect");
-
   _aspect = function () {
     return data;
   };
-
   return data;
 }
-
 function _webpack() {
   const data = require("./files/webpack.config");
-
   _webpack = function () {
     return data;
   };
-
   return data;
 }
-
 function _typescript() {
   const data = require("./files/typescript/typescript.config");
-
   _typescript = function () {
     return data;
   };
-
   return data;
 }
-
 function _styles() {
   const data = require("./files/typescript/styles");
-
   _styles = function () {
     return data;
   };
-
   return data;
 }
-
 function _tsTransformer() {
   const data = require("./files/typescript/ts-transformer");
-
   _tsTransformer = function () {
     return data;
   };
-
   return data;
 }
-
 function _jest() {
   const data = require("./files/jest.config");
-
   _jest = function () {
     return data;
   };
-
   return data;
 }
-
 const reactEnvTemplate = {
   name: 'react-env',
   description: 'customize the base React env with your configs and tools',

package/dist/templates/react-env/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["reactEnvTemplate","name","description","generateFiles","context","relativePath","content","indexFile","isMain","docFile","mainRuntimeFile","previewRuntimeFile","aspectFile","webpackConfigFile","typescriptConfigFile","globalStylesFile","tsTransformerFile","jestConfigFile","config","env"],"sources":["index.ts"],"sourcesContent":["import { ComponentContext, ComponentTemplate } from '@teambit/generator';\nimport { indexFile } from './files/index';\nimport { docFile } from './files/doc';\nimport { mainRuntimeFile } from './files/main.runtime';\nimport { previewRuntimeFile } from './files/preview.runtime';\nimport { aspectFile } from './files/aspect';\nimport { webpackConfigFile } from './files/webpack.config';\nimport { typescriptConfigFile } from './files/typescript/typescript.config';\nimport { globalStylesFile } from './files/typescript/styles';\nimport { tsTransformerFile } from './files/typescript/ts-transformer';\nimport { jestConfigFile } from './files/jest.config';\n\nexport const reactEnvTemplate: ComponentTemplate = {\n  name: 'react-env',\n  description: 'customize the base React env with your configs and tools',\n  generateFiles: (context: ComponentContext) => {\n    return [\n      {\n        relativePath: 'index.ts',\n        content: indexFile(context),\n        isMain: true,\n      },\n      {\n        relativePath: `${context.name}.docs.mdx`,\n        content: docFile(context),\n      },\n      {\n        relativePath: `${context.name}.main.runtime.ts`,\n        content: mainRuntimeFile(context),\n      },\n      {\n        relativePath: `${context.name}.preview.runtime.ts`,\n        content: previewRuntimeFile(context),\n      },\n      {\n        relativePath: `${context.name}.aspect.ts`,\n        content: aspectFile(context),\n      },\n      {\n        relativePath: `webpack/webpack-transformers.ts`,\n        content: webpackConfigFile(),\n      },\n      {\n        relativePath: `typescript/tsconfig.json`,\n        content: typescriptConfigFile(),\n      },\n      {\n        relativePath: `typescript/styles.d.ts`,\n        content: globalStylesFile(),\n      },\n      {\n        relativePath: `typescript/ts-transformer.ts`,\n        content: tsTransformerFile(),\n      },\n      {\n        relativePath: `jest/jest.config.js`,\n        content: jestConfigFile(),\n      },\n    ];\n  },\n  config: {\n    'teambit.envs/env': {},\n    'teambit.envs/envs': {\n      env: 'teambit.envs/env',\n    },\n  },\n};\n"],"mappings":";;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEO,MAAMA,gBAAmC,GAAG;EACjDC,IAAI,EAAE,WAD2C;EAEjDC,WAAW,EAAE,0DAFoC;EAGjDC,aAAa,EAAGC,OAAD,IAA+B;IAC5C,OAAO,CACL;MACEC,YAAY,EAAE,UADhB;MAEEC,OAAO,EAAE,IAAAC,kBAAA,EAAUH,OAAV,CAFX;MAGEI,MAAM,EAAE;IAHV,CADK,EAML;MACEH,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,WADhC;MAEEK,OAAO,EAAE,IAAAG,cAAA,EAAQL,OAAR;IAFX,CANK,EAUL;MACEC,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,kBADhC;MAEEK,OAAO,EAAE,IAAAI,uBAAA,EAAgBN,OAAhB;IAFX,CAVK,EAcL;MACEC,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,qBADhC;MAEEK,OAAO,EAAE,IAAAK,6BAAA,EAAmBP,OAAnB;IAFX,CAdK,EAkBL;MACEC,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,YADhC;MAEEK,OAAO,EAAE,IAAAM,oBAAA,EAAWR,OAAX;IAFX,CAlBK,EAsBL;MACEC,YAAY,EAAG,iCADjB;MAEEC,OAAO,EAAE,IAAAO,4BAAA;IAFX,CAtBK,EA0BL;MACER,YAAY,EAAG,0BADjB;MAEEC,OAAO,EAAE,IAAAQ,kCAAA;IAFX,CA1BK,EA8BL;MACET,YAAY,EAAG,wBADjB;MAEEC,OAAO,EAAE,IAAAS,0BAAA;IAFX,CA9BK,EAkCL;MACEV,YAAY,EAAG,8BADjB;MAEEC,OAAO,EAAE,IAAAU,kCAAA;IAFX,CAlCK,EAsCL;MACEX,YAAY,EAAG,qBADjB;MAEEC,OAAO,EAAE,IAAAW,sBAAA;IAFX,CAtCK,CAAP;EA2CD,CA/CgD;EAgDjDC,MAAM,EAAE;IACN,oBAAoB,EADd;IAEN,qBAAqB;MACnBC,GAAG,EAAE;IADc;EAFf;AAhDyC,CAA5C"}
+{"version":3,"names":["reactEnvTemplate","name","description","generateFiles","context","relativePath","content","indexFile","isMain","docFile","mainRuntimeFile","previewRuntimeFile","aspectFile","webpackConfigFile","typescriptConfigFile","globalStylesFile","tsTransformerFile","jestConfigFile","config","env"],"sources":["index.ts"],"sourcesContent":["import { ComponentContext, ComponentTemplate } from '@teambit/generator';\nimport { indexFile } from './files/index';\nimport { docFile } from './files/doc';\nimport { mainRuntimeFile } from './files/main.runtime';\nimport { previewRuntimeFile } from './files/preview.runtime';\nimport { aspectFile } from './files/aspect';\nimport { webpackConfigFile } from './files/webpack.config';\nimport { typescriptConfigFile } from './files/typescript/typescript.config';\nimport { globalStylesFile } from './files/typescript/styles';\nimport { tsTransformerFile } from './files/typescript/ts-transformer';\nimport { jestConfigFile } from './files/jest.config';\n\nexport const reactEnvTemplate: ComponentTemplate = {\n  name: 'react-env',\n  description: 'customize the base React env with your configs and tools',\n  generateFiles: (context: ComponentContext) => {\n    return [\n      {\n        relativePath: 'index.ts',\n        content: indexFile(context),\n        isMain: true,\n      },\n      {\n        relativePath: `${context.name}.docs.mdx`,\n        content: docFile(context),\n      },\n      {\n        relativePath: `${context.name}.main.runtime.ts`,\n        content: mainRuntimeFile(context),\n      },\n      {\n        relativePath: `${context.name}.preview.runtime.ts`,\n        content: previewRuntimeFile(context),\n      },\n      {\n        relativePath: `${context.name}.aspect.ts`,\n        content: aspectFile(context),\n      },\n      {\n        relativePath: `webpack/webpack-transformers.ts`,\n        content: webpackConfigFile(),\n      },\n      {\n        relativePath: `typescript/tsconfig.json`,\n        content: typescriptConfigFile(),\n      },\n      {\n        relativePath: `typescript/styles.d.ts`,\n        content: globalStylesFile(),\n      },\n      {\n        relativePath: `typescript/ts-transformer.ts`,\n        content: tsTransformerFile(),\n      },\n      {\n        relativePath: `jest/jest.config.js`,\n        content: jestConfigFile(),\n      },\n    ];\n  },\n  config: {\n    'teambit.envs/env': {},\n    'teambit.envs/envs': {\n      env: 'teambit.envs/env',\n    },\n  },\n};\n"],"mappings":";;;;;;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,gBAAmC,GAAG;EACjDC,IAAI,EAAE,WAAW;EACjBC,WAAW,EAAE,0DAA0D;EACvEC,aAAa,EAAGC,OAAyB,IAAK;IAC5C,OAAO,CACL;MACEC,YAAY,EAAE,UAAU;MACxBC,OAAO,EAAE,IAAAC,kBAAS,EAACH,OAAO,CAAC;MAC3BI,MAAM,EAAE;IACV,CAAC,EACD;MACEH,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,WAAU;MACxCK,OAAO,EAAE,IAAAG,cAAO,EAACL,OAAO;IAC1B,CAAC,EACD;MACEC,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,kBAAiB;MAC/CK,OAAO,EAAE,IAAAI,uBAAe,EAACN,OAAO;IAClC,CAAC,EACD;MACEC,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,qBAAoB;MAClDK,OAAO,EAAE,IAAAK,6BAAkB,EAACP,OAAO;IACrC,CAAC,EACD;MACEC,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,YAAW;MACzCK,OAAO,EAAE,IAAAM,oBAAU,EAACR,OAAO;IAC7B,CAAC,EACD;MACEC,YAAY,EAAG,iCAAgC;MAC/CC,OAAO,EAAE,IAAAO,4BAAiB;IAC5B,CAAC,EACD;MACER,YAAY,EAAG,0BAAyB;MACxCC,OAAO,EAAE,IAAAQ,kCAAoB;IAC/B,CAAC,EACD;MACET,YAAY,EAAG,wBAAuB;MACtCC,OAAO,EAAE,IAAAS,0BAAgB;IAC3B,CAAC,EACD;MACEV,YAAY,EAAG,8BAA6B;MAC5CC,OAAO,EAAE,IAAAU,kCAAiB;IAC5B,CAAC,EACD;MACEX,YAAY,EAAG,qBAAoB;MACnCC,OAAO,EAAE,IAAAW,sBAAc;IACzB,CAAC,CACF;EACH,CAAC;EACDC,MAAM,EAAE;IACN,kBAAkB,EAAE,CAAC,CAAC;IACtB,mBAAmB,EAAE;MACnBC,GAAG,EAAE;IACP;EACF;AACF,CAAC;AAAC"}

package/dist/templates/react-hook/files/component.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.componentFile = void 0;
-
 const componentFile = context => {
   const {
     name,
@@ -22,7 +21,6 @@ export function ${Name}() {
 `
   };
 };
-
 exports.componentFile = componentFile;
 
 //# sourceMappingURL=component.js.map

package/dist/templates/react-hook/files/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentFile","context","name","nameCamelCase","Name","relativePath","content"],"sources":["component.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const componentFile = (context: ComponentContext) => {\n  const { name, nameCamelCase: Name } = context;\n  return {\n    relativePath: `${name}.tsx`,\n    content: `import { useState } from 'react';\n\nexport function ${Name}() {\n  const [count, setCount] = useState(0)\n  const increment = () => setCount((c) => c + 1)\n  return { count, increment }\n}\n`,\n  };\n};\n"],"mappings":";;;;;;;AAEO,MAAMA,aAAa,GAAIC,OAAD,IAA+B;EAC1D,MAAM;IAAEC,IAAF;IAAQC,aAAa,EAAEC;EAAvB,IAAgCH,OAAtC;EACA,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,MADjB;IAELI,OAAO,EAAG;AACd;AACA,kBAAkBF,IAAK;AACvB;AACA;AACA;AACA;AACA;EATS,CAAP;AAWD,CAbM"}
+{"version":3,"names":["componentFile","context","name","nameCamelCase","Name","relativePath","content"],"sources":["component.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const componentFile = (context: ComponentContext) => {\n  const { name, nameCamelCase: Name } = context;\n  return {\n    relativePath: `${name}.tsx`,\n    content: `import { useState } from 'react';\n\nexport function ${Name}() {\n  const [count, setCount] = useState(0)\n  const increment = () => setCount((c) => c + 1)\n  return { count, increment }\n}\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,aAAa,GAAIC,OAAyB,IAAK;EAC1D,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAC7C,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,MAAK;IAC3BI,OAAO,EAAG;AACd;AACA,kBAAkBF,IAAK;AACvB;AACA;AACA;AACA;AACA;EACE,CAAC;AACH,CAAC;AAAC"}

package/dist/templates/react-hook/files/composition.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.compositionFile = void 0;
-
 const compositionFile = context => {
   const {
     name,
@@ -28,7 +27,6 @@ export const Basic${Name} = () => {
 `
   };
 };
-
 exports.compositionFile = compositionFile;
 
 //# sourceMappingURL=composition.js.map

package/dist/templates/react-hook/files/composition.js.map

@@ -1 +1 @@
-{"version":3,"names":["compositionFile","context","name","nameCamelCase","Name","relativePath","content"],"sources":["composition.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const compositionFile = (context: ComponentContext) => {\n  const { name, nameCamelCase: Name } = context;\n\n  return {\n    relativePath: `${name}.composition.tsx`,\n    content: `import React from 'react';\nimport { ${Name} } from './${name}';\n\nexport const Basic${Name} = () => {\n  const { count, increment } = ${Name}();\n\n  return (\n    <>\n      <h1>The count is {count}</h1>\n      <button onClick={increment}>increment</button>\n    </>\n  );\n};\n`,\n  };\n};\n"],"mappings":";;;;;;;AAEO,MAAMA,eAAe,GAAIC,OAAD,IAA+B;EAC5D,MAAM;IAAEC,IAAF;IAAQC,aAAa,EAAEC;EAAvB,IAAgCH,OAAtC;EAEA,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,kBADjB;IAELI,OAAO,EAAG;AACd,WAAWF,IAAK,cAAaF,IAAK;AAClC;AACA,oBAAoBE,IAAK;AACzB,iCAAiCA,IAAK;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EAfS,CAAP;AAiBD,CApBM"}
+{"version":3,"names":["compositionFile","context","name","nameCamelCase","Name","relativePath","content"],"sources":["composition.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const compositionFile = (context: ComponentContext) => {\n  const { name, nameCamelCase: Name } = context;\n\n  return {\n    relativePath: `${name}.composition.tsx`,\n    content: `import React from 'react';\nimport { ${Name} } from './${name}';\n\nexport const Basic${Name} = () => {\n  const { count, increment } = ${Name}();\n\n  return (\n    <>\n      <h1>The count is {count}</h1>\n      <button onClick={increment}>increment</button>\n    </>\n  );\n};\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,eAAe,GAAIC,OAAyB,IAAK;EAC5D,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAE7C,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,kBAAiB;IACvCI,OAAO,EAAG;AACd,WAAWF,IAAK,cAAaF,IAAK;AAClC;AACA,oBAAoBE,IAAK;AACzB,iCAAiCA,IAAK;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE,CAAC;AACH,CAAC;AAAC"}

package/dist/templates/react-hook/files/docs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.docsFile = void 0;
-
 const docsFile = context => {
   const {
     name,
@@ -38,7 +37,6 @@ const { count, increment } = ${Name}();
 `
   };
 };
-
 exports.docsFile = docsFile;
 
 //# sourceMappingURL=docs.js.map