@teambit/react 0.0.707 → 0.0.710

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

@@ -13,12 +13,14 @@ function mainRuntimeFile({
 import { ReactAspect, ReactMain } from '@teambit/react';
 import { EnvsAspect, EnvsMain } from '@teambit/envs';
 import { ${Name}Aspect } from './${name}.aspect';
-// import { previewConfigTransformer, devServerConfigTransformer } from './webpack/webpack-transformers';
-
-/**
- * Uncomment to include config files for overrides of Typescript or Webpack
- */
-// const tsconfig = require('./typescript/tsconfig');
+//import {
+//  previewConfigTransformer,
+//  devServerConfigTransformer
+//} from './webpack/webpack-transformers';
+//import {
+//  devConfigTransformer,
+//  buildConfigTransformer,
+//} from "./typescript/ts-transformers";
 
 export class ${Name}Main {
   static slots = [];
@@ -27,18 +29,25 @@ export class ${Name}Main {
 
   static runtime = MainRuntime;
 
+  //const webpackModifiers: UseWebpackModifiers = {
+  //  previewConfig: [previewConfigTransformer],
+  //  devServerConfig: [devServerConfigTransformer],
+  //};
+
+  //const tsModifiers: UseTypescriptModifiers = {
+  //  devConfig: [devConfigTransformer],
+  //  buildConfig: [buildConfigTransformer],
+  //};
+
   static async provider([react, envs]: [ReactMain, EnvsMain]) {
-    const templatesReactEnv = envs.compose(react.reactEnv, [
+    const ${Name}Env = react.compose([
       /**
        * Uncomment to override the config files for TypeScript, Webpack or Jest
        * Your config gets merged with the defaults
        */
 
-      // react.overrideTsConfig(tsconfig),
-      // react.useWebpack({
-      //   previewConfig: [previewConfigTransformer],
-      //   devServerConfig: [devServerConfigTransformer],
-      // }),
+      // react.useTypescript(tsModifiers),  // note: this cannot be used in conjunction with react.overrideCompiler
+      // react.useWebpack(webpackModifiers),
       // react.overrideJestConfig(require.resolve('./jest/jest.config')),
 
       /**
@@ -47,14 +56,14 @@ export class ${Name}Main {
        * bit lint
        * bit lint --fix
        */
-      react.useEslint({
-        transformers: [
-          (config) => {
-            config.setRule('no-console', ['error']);
-            return config;
-          }
-        ]
-      }),
+      //react.useEslint({
+      //  transformers: [
+      //  (config) => {
+      //    config.setRule('no-console', ['error']);
+      //    return config;
+      //    }
+      //  ]
+      //}),
 
       /**
        * override the Prettier default config here the check your formatting
@@ -62,14 +71,14 @@ export class ${Name}Main {
        * bit format --check
        * bit format
        */
-      react.usePrettier({
-        transformers: [
-          (config) => {
-            config.setKey('tabWidth', 2);
-            return config;
-          }
-        ]
-      }),
+      //react.usePrettier({
+      //  transformers: [
+      //    (config) => {
+      //      config.setKey('tabWidth', 2);
+      //      return config;
+      //    }
+      //  ]
+      //}),
 
       /**
        * override dependencies here
@@ -82,7 +91,7 @@ export class ${Name}Main {
         }
       })
     ]);
-    envs.registerEnv(templatesReactEnv);
+    envs.registerEnv(${Name}Env);
     return new ${Name}Main();
   }
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["main.runtime.ts"],"names":["mainRuntimeFile","namePascalCase","Name","name"],"mappings":";;;;;;;AAEO,SAASA,eAAT,CAAyB;AAAEC,EAAAA,cAAc,EAAEC,IAAlB;AAAwBC,EAAAA;AAAxB,CAAzB,EAA2E;AAChF,SAAQ;AACV;AACA;AACA,WAAWD,IAAK,oBAAmBC,IAAK;AACxC;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;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,iBAAiBA,IAAK;AACtB;AACA;AACA;AACA,EAAEA,IAAK,qBAAoBA,IAAK;AAChC,CA/EE;AAgFD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function mainRuntimeFile({ namePascalCase: Name, name }: ComponentContext) {\n  return `import { MainRuntime } from '@teambit/cli';\nimport { ReactAspect, ReactMain } from '@teambit/react';\nimport { EnvsAspect, EnvsMain } from '@teambit/envs';\nimport { ${Name}Aspect } from './${name}.aspect';\n// import { previewConfigTransformer, devServerConfigTransformer } from './webpack/webpack-transformers';\n\n/**\n * Uncomment to include config files for overrides of Typescript or Webpack\n */\n// const tsconfig = require('./typescript/tsconfig');\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    const templatesReactEnv = envs.compose(react.reactEnv, [\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.overrideTsConfig(tsconfig),\n      // react.useWebpack({\n      //   previewConfig: [previewConfigTransformer],\n      //   devServerConfig: [devServerConfigTransformer],\n      // }),\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(templatesReactEnv);\n    return new ${Name}Main();\n  }\n}\n\n${Name}Aspect.addRuntime(${Name}Main);\n`;\n}\n"]}
+{"version":3,"sources":["main.runtime.ts"],"names":["mainRuntimeFile","namePascalCase","Name","name"],"mappings":";;;;;;;AAEO,SAASA,eAAT,CAAyB;AAAEC,EAAAA,cAAc,EAAEC,IAAlB;AAAwBC,EAAAA;AAAxB,CAAzB,EAA2E;AAChF,SAAQ;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,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,CAxFE;AAyFD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function mainRuntimeFile({ namePascalCase: Name, name }: ComponentContext) {\n  return `import { MainRuntime } from '@teambit/cli';\nimport { ReactAspect, ReactMain } 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-transformers\";\n\nexport class ${Name}Main {\n  static slots = [];\n\n  static dependencies = [ReactAspect, EnvsAspect];\n\n  static runtime = MainRuntime;\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  static async provider([react, envs]: [ReactMain, EnvsMain]) {\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"]}

package/dist/templates/react-env/files/typescript/styles.d.ts

@@ -0,0 +1 @@
+export declare function globalStylesFile(): string;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.globalStylesFile = globalStylesFile;
+
+function globalStylesFile() {
+  return `
+  /*
+  Add your global styles here to be added for any component using this env
+  */
+  `;
+}
+
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.ts"],"names":["globalStylesFile"],"mappings":";;;;;;;AAAO,SAASA,gBAAT,GAA4B;AACjC,SAAQ;AACV;AACA;AACA;AACA,GAJE;AAKD","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"]}

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

@@ -0,0 +1 @@
+export declare function tsTransformerFile(): string;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tsTransformerFile = tsTransformerFile;
+
+function tsTransformerFile() {
+  return `
+  import * as path from 'path';
+import {
+  TsConfigTransformer,
+  TypescriptConfigMutator,
+} from "@teambit/typescript";
+
+const tsConfig = require('./tsconfig.json');
+
+export const commonTransformer: TsConfigTransformer = (
+  config: TypescriptConfigMutator
+) => {
+  const newConfig = config.addTypes([path.join(__dirname, 'styles.d.ts')])
+  newConfig.mergeTsConfig(tsConfig);
+  // Some examples of other built in mutator functions:
+  //newConfig.addExclude(['someExclude']);
+  //newConfig.setCompileJs(true)
+  return newConfig;
+};
+
+/**
+ * Transformation for the dev config only
+ * @param config
+ * @param context
+ * @returns
+ */
+export const devConfigTransformer: TsConfigTransformer = (
+  config: TypescriptConfigMutator,
+) => {
+  const newConfig = commonTransformer(config, {});
+  return newConfig;
+};
+
+/**
+ * Transformation for the build only
+ * @param config
+ * @param context
+ * @returns
+ */
+export const buildConfigTransformer: TsConfigTransformer = (
+  config: TypescriptConfigMutator
+) => {
+  const newConfig = commonTransformer(config, {});
+  newConfig.mergeTsConfig(tsConfig);
+  return newConfig;
+};
+
+`;
+}
+
+//# sourceMappingURL=ts-transformer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ts-transformer.ts"],"names":["tsTransformerFile"],"mappings":";;;;;;;AAAO,SAASA,iBAAT,GAA6B;AAClC,SAAQ;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","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"]}

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

@@ -66,7 +66,7 @@ function _webpack() {
 }
 
 function _typescript() {
-  const data = require("./files/typescript.config");
+  const data = require("./files/typescript/typescript.config");
 
   _typescript = function () {
     return data;
@@ -75,6 +75,26 @@ function _typescript() {
   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");
 
@@ -111,13 +131,19 @@ const reactEnvTemplate = {
     }, {
       relativePath: `typescript/tsconfig.json`,
       content: (0, _typescript().typescriptConfigFile)()
+    }, {
+      relativePath: `typescript/styles.d.ts`,
+      content: (0, _styles().globalStylesFile)()
+    }, {
+      relativePath: `typescript/ts-transformer.ts`,
+      content: (0, _tsTransformer().tsTransformerFile)()
     }, {
       relativePath: `jest/jest.config.js`,
       content: (0, _jest().jestConfigFile)()
     }];
   },
   config: {
-    'teambit.react/react': {},
+    'teambit.envs/env': {},
     'teambit.envs/envs': {
       env: 'teambit.envs/env'
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["reactEnvTemplate","name","description","generateFiles","context","relativePath","content","isMain","config","env"],"mappings":";;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,gBAAmC,GAAG;AACjDC,EAAAA,IAAI,EAAE,WAD2C;AAEjDC,EAAAA,WAAW,EAAE,0DAFoC;AAGjDC,EAAAA,aAAa,EAAGC,OAAD,IAA+B;AAC5C,WAAO,CACL;AACEC,MAAAA,YAAY,EAAE,UADhB;AAEEC,MAAAA,OAAO,EAAE,wBAAUF,OAAV,CAFX;AAGEG,MAAAA,MAAM,EAAE;AAHV,KADK,EAML;AACEF,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,WADhC;AAEEK,MAAAA,OAAO,EAAE,oBAAQF,OAAR;AAFX,KANK,EAUL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,kBADhC;AAEEK,MAAAA,OAAO,EAAE,6BAAgBF,OAAhB;AAFX,KAVK,EAcL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,qBADhC;AAEEK,MAAAA,OAAO,EAAE,mCAAmBF,OAAnB;AAFX,KAdK,EAkBL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,YADhC;AAEEK,MAAAA,OAAO,EAAE,0BAAWF,OAAX;AAFX,KAlBK,EAsBL;AACEC,MAAAA,YAAY,EAAG,iCADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KAtBK,EA0BL;AACED,MAAAA,YAAY,EAAG,0BADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KA1BK,EA8BL;AACED,MAAAA,YAAY,EAAG,qBADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KA9BK,CAAP;AAmCD,GAvCgD;AAwCjDE,EAAAA,MAAM,EAAE;AACN,2BAAuB,EADjB;AAEN,yBAAqB;AACnBC,MAAAA,GAAG,EAAE;AADc;AAFf;AAxCyC,CAA5C","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.config';\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: `jest/jest.config.js`,\n        content: jestConfigFile(),\n      },\n    ];\n  },\n  config: {\n    'teambit.react/react': {},\n    'teambit.envs/envs': {\n      env: 'teambit.envs/env',\n    },\n  },\n};\n"]}
+{"version":3,"sources":["index.ts"],"names":["reactEnvTemplate","name","description","generateFiles","context","relativePath","content","isMain","config","env"],"mappings":";;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,gBAAmC,GAAG;AACjDC,EAAAA,IAAI,EAAE,WAD2C;AAEjDC,EAAAA,WAAW,EAAE,0DAFoC;AAGjDC,EAAAA,aAAa,EAAGC,OAAD,IAA+B;AAC5C,WAAO,CACL;AACEC,MAAAA,YAAY,EAAE,UADhB;AAEEC,MAAAA,OAAO,EAAE,wBAAUF,OAAV,CAFX;AAGEG,MAAAA,MAAM,EAAE;AAHV,KADK,EAML;AACEF,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,WADhC;AAEEK,MAAAA,OAAO,EAAE,oBAAQF,OAAR;AAFX,KANK,EAUL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,kBADhC;AAEEK,MAAAA,OAAO,EAAE,6BAAgBF,OAAhB;AAFX,KAVK,EAcL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,qBADhC;AAEEK,MAAAA,OAAO,EAAE,mCAAmBF,OAAnB;AAFX,KAdK,EAkBL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACH,IAAK,YADhC;AAEEK,MAAAA,OAAO,EAAE,0BAAWF,OAAX;AAFX,KAlBK,EAsBL;AACEC,MAAAA,YAAY,EAAG,iCADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KAtBK,EA0BL;AACED,MAAAA,YAAY,EAAG,0BADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KA1BK,EA8BL;AACED,MAAAA,YAAY,EAAG,wBADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KA9BK,EAkCL;AACED,MAAAA,YAAY,EAAG,8BADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KAlCK,EAsCL;AACED,MAAAA,YAAY,EAAG,qBADjB;AAEEC,MAAAA,OAAO,EAAE;AAFX,KAtCK,CAAP;AA2CD,GA/CgD;AAgDjDE,EAAAA,MAAM,EAAE;AACN,wBAAoB,EADd;AAEN,yBAAqB;AACnBC,MAAAA,GAAG,EAAE;AADc;AAFf;AAhDyC,CAA5C","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"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.707",
+  "version": "0.0.710",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.707"
+    "version": "0.0.710"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -77,43 +77,43 @@
     "@svgr/webpack": "5.5.0",
     "core-js": "^3.0.0",
     "@teambit/base-ui.utils.composer": "1.0.0",
+    "@teambit/design.ui.input.option-button": "1.0.0",
     "@teambit/harmony": "0.3.3",
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.356",
-    "@teambit/preview": "0.0.707",
+    "@teambit/preview": "0.0.710",
     "@teambit/react.ui.error-fallback": "0.0.111",
     "@teambit/react.ui.loader-fallback": "0.0.89",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.163",
-    "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/builder": "0.0.707",
-    "@teambit/bundler": "0.0.707",
-    "@teambit/compiler": "0.0.707",
+    "@teambit/builder": "0.0.710",
+    "@teambit/bundler": "0.0.710",
+    "@teambit/compiler": "0.0.710",
     "@teambit/component.modules.component-url": "0.0.124",
-    "@teambit/component": "0.0.707",
-    "@teambit/envs": "0.0.707",
-    "@teambit/eslint": "0.0.707",
-    "@teambit/formatter": "0.0.258",
-    "@teambit/jest": "0.0.707",
-    "@teambit/linter": "0.0.707",
-    "@teambit/pkg": "0.0.707",
-    "@teambit/prettier": "0.0.258",
+    "@teambit/component": "0.0.710",
+    "@teambit/envs": "0.0.710",
+    "@teambit/eslint": "0.0.710",
+    "@teambit/formatter": "0.0.261",
+    "@teambit/jest": "0.0.710",
+    "@teambit/linter": "0.0.710",
+    "@teambit/pkg": "0.0.710",
+    "@teambit/prettier": "0.0.261",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
-    "@teambit/schema": "0.0.707",
-    "@teambit/tester": "0.0.707",
-    "@teambit/typescript": "0.0.707",
-    "@teambit/webpack": "0.0.707",
-    "@teambit/workspace": "0.0.707",
-    "@teambit/application": "0.0.349",
-    "@teambit/cli": "0.0.470",
-    "@teambit/dependency-resolver": "0.0.707",
-    "@teambit/generator": "0.0.707",
-    "@teambit/graphql": "0.0.707",
+    "@teambit/schema": "0.0.710",
+    "@teambit/tester": "0.0.710",
+    "@teambit/typescript": "0.0.710",
+    "@teambit/webpack": "0.0.710",
+    "@teambit/workspace": "0.0.710",
+    "@teambit/application": "0.0.352",
+    "@teambit/cli": "0.0.472",
+    "@teambit/dependency-resolver": "0.0.710",
+    "@teambit/generator": "0.0.710",
+    "@teambit/graphql": "0.0.710",
     "@teambit/react.ui.highlighter-provider": "0.0.189",
-    "@teambit/compositions": "0.0.707",
-    "@teambit/ui": "0.0.707",
-    "@teambit/react.eslint-config-bit-react": "0.0.545",
+    "@teambit/compositions": "0.0.710",
+    "@teambit/ui": "0.0.710",
+    "@teambit/react.eslint-config-bit-react": "0.0.547",
     "@teambit/webpack.modules.generate-expose-loaders": "0.0.3",
     "@teambit/webpack.modules.generate-externals": "0.0.3",
     "@teambit/webpack.modules.config-mutator": "0.0.137",
@@ -123,7 +123,7 @@
     "@teambit/webpack.modules.style-regexps": "0.0.132",
     "@teambit/component-id": "0.0.402",
     "@teambit/toolbox.network.get-port": "0.0.113",
-    "@teambit/config": "0.0.483"
+    "@teambit/config": "0.0.485"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -142,7 +142,7 @@
     "@teambit/react.content.react-overview": "1.95.0"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.247",
+    "@teambit/legacy": "1.0.251",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -206,7 +206,7 @@
         "@types/jest": "^26.0.0"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.247",
+        "@teambit/legacy": "1.0.251",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1649733938651.js → preview-1650252279523.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.707/dist/react.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.707/dist/react.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.710/dist/react.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.710/dist/react.docs.mdx')]

package/templates/react-env/files/doc.ts

@@ -8,10 +8,23 @@ labels: ['react', 'typescript', 'env', 'extension']
 
 ## Overview
 
-A customized version which extends the default React component development environment created by teambit. This environment can be applied to all your components or a set of components under the variants of your \`workspace.json\` file. That 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 exported and then shared and used in various projects which makes it easier to create standards when working with many teams.
+A customized version which extends the default React component development environment created by teambit.
+
+This 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.
+That 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
+exported and then shared and used in various projects which makes it easier to create standards when working with many teams.
 
 ### Usage instructions
 
+#### Recommended usage:
+
+Run 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
+config in your component's entry in the \`.bitmap\` file.
+
+:::Note - this will override any variants policy that tries to set an env for this component in the workspace.jsonc
+:::
+
+#### Alternative Usage
 Under 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.
 
 \`\`\`json
@@ -24,6 +37,7 @@ Under the **variant** section of your \`workspace.json\` file choose which compo
 }
 \`\`\`
 
+This usage may be deprecated in future in favour of the recommended usage above
 ## Runtime Configurations
 
 Extend the \`main.runtime\` file when you want to add custom configurations at runtime.

package/templates/react-env/files/main.runtime.ts

@@ -5,12 +5,14 @@ export function mainRuntimeFile({ namePascalCase: Name, name }: ComponentContext
 import { ReactAspect, ReactMain } from '@teambit/react';
 import { EnvsAspect, EnvsMain } from '@teambit/envs';
 import { ${Name}Aspect } from './${name}.aspect';
-// import { previewConfigTransformer, devServerConfigTransformer } from './webpack/webpack-transformers';
-
-/**
- * Uncomment to include config files for overrides of Typescript or Webpack
- */
-// const tsconfig = require('./typescript/tsconfig');
+//import {
+//  previewConfigTransformer,
+//  devServerConfigTransformer
+//} from './webpack/webpack-transformers';
+//import {
+//  devConfigTransformer,
+//  buildConfigTransformer,
+//} from "./typescript/ts-transformers";
 
 export class ${Name}Main {
   static slots = [];
@@ -19,18 +21,25 @@ export class ${Name}Main {
 
   static runtime = MainRuntime;
 
+  //const webpackModifiers: UseWebpackModifiers = {
+  //  previewConfig: [previewConfigTransformer],
+  //  devServerConfig: [devServerConfigTransformer],
+  //};
+
+  //const tsModifiers: UseTypescriptModifiers = {
+  //  devConfig: [devConfigTransformer],
+  //  buildConfig: [buildConfigTransformer],
+  //};
+
   static async provider([react, envs]: [ReactMain, EnvsMain]) {
-    const templatesReactEnv = envs.compose(react.reactEnv, [
+    const ${Name}Env = react.compose([
       /**
        * Uncomment to override the config files for TypeScript, Webpack or Jest
        * Your config gets merged with the defaults
        */
 
-      // react.overrideTsConfig(tsconfig),
-      // react.useWebpack({
-      //   previewConfig: [previewConfigTransformer],
-      //   devServerConfig: [devServerConfigTransformer],
-      // }),
+      // react.useTypescript(tsModifiers),  // note: this cannot be used in conjunction with react.overrideCompiler
+      // react.useWebpack(webpackModifiers),
       // react.overrideJestConfig(require.resolve('./jest/jest.config')),
 
       /**
@@ -39,14 +48,14 @@ export class ${Name}Main {
        * bit lint
        * bit lint --fix
        */
-      react.useEslint({
-        transformers: [
-          (config) => {
-            config.setRule('no-console', ['error']);
-            return config;
-          }
-        ]
-      }),
+      //react.useEslint({
+      //  transformers: [
+      //  (config) => {
+      //    config.setRule('no-console', ['error']);
+      //    return config;
+      //    }
+      //  ]
+      //}),
 
       /**
        * override the Prettier default config here the check your formatting
@@ -54,14 +63,14 @@ export class ${Name}Main {
        * bit format --check
        * bit format
        */
-      react.usePrettier({
-        transformers: [
-          (config) => {
-            config.setKey('tabWidth', 2);
-            return config;
-          }
-        ]
-      }),
+      //react.usePrettier({
+      //  transformers: [
+      //    (config) => {
+      //      config.setKey('tabWidth', 2);
+      //      return config;
+      //    }
+      //  ]
+      //}),
 
       /**
        * override dependencies here
@@ -74,7 +83,7 @@ export class ${Name}Main {
         }
       })
     ]);
-    envs.registerEnv(templatesReactEnv);
+    envs.registerEnv(${Name}Env);
     return new ${Name}Main();
   }
 }

package/templates/react-env/files/typescript/styles.ts

@@ -0,0 +1,7 @@
+export function globalStylesFile() {
+  return `
+  /*
+  Add your global styles here to be added for any component using this env
+  */
+  `
+}

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

@@ -0,0 +1,50 @@
+export function tsTransformerFile() {
+  return `
+  import * as path from 'path';
+import {
+  TsConfigTransformer,
+  TypescriptConfigMutator,
+} from "@teambit/typescript";
+
+const tsConfig = require('./tsconfig.json');
+
+export const commonTransformer: TsConfigTransformer = (
+  config: TypescriptConfigMutator
+) => {
+  const newConfig = config.addTypes([path.join(__dirname, 'styles.d.ts')])
+  newConfig.mergeTsConfig(tsConfig);
+  // Some examples of other built in mutator functions:
+  //newConfig.addExclude(['someExclude']);
+  //newConfig.setCompileJs(true)
+  return newConfig;
+};
+
+/**
+ * Transformation for the dev config only
+ * @param config
+ * @param context
+ * @returns
+ */
+export const devConfigTransformer: TsConfigTransformer = (
+  config: TypescriptConfigMutator,
+) => {
+  const newConfig = commonTransformer(config, {});
+  return newConfig;
+};
+
+/**
+ * Transformation for the build only
+ * @param config
+ * @param context
+ * @returns
+ */
+export const buildConfigTransformer: TsConfigTransformer = (
+  config: TypescriptConfigMutator
+) => {
+  const newConfig = commonTransformer(config, {});
+  newConfig.mergeTsConfig(tsConfig);
+  return newConfig;
+};
+
+`
+}