@teambit/react 0.0.585 → 0.0.589

package/dist/react-app-options.d.ts

@@ -14,13 +14,17 @@ export declare type ReactAppOptions = {
      */
     ssr?: boolean;
     /**
-     * instance of bundler to use.
+     * instance of bundler to use. default is Webpack.
      */
     bundler?: Bundler;
     /**
-     * instance of dev server to use.
+     * instance of dev server to use. default is Webpack.
      */
     devServer?: DevServer;
+    /**
+     * decide whether to prerender your app. accepts an array of routes. if none, prerender would not apply.
+     */
+    prerender?: string[];
     /**
      * deploy function.
      */

package/dist/react.application.js

@@ -65,7 +65,6 @@ class ReactApp {
   async run(context) {
     const devServerContext = this.getDevServerContext(context);
     const devServer = this.reactEnv.getDevServer(devServerContext, [configMutator => {
-      // configMutator.addTopLevel('output', { publicPath: `/public/${this.name}` });
       configMutator.addTopLevel('devServer', {
         historyApiFallback: {
           index: '/index.html',

package/dist/react.application.js.map

@@ -1 +1 @@
-{"version":3,"sources":["react.application.ts"],"names":["ReactApp","constructor","name","entry","portRange","reactEnv","deploy","prerenderRoutes","run","context","devServerContext","getDevServerContext","devServer","getDevServer","configMutator","addTopLevel","historyApiFallback","index","disableDotRule","raw","output","publicPath","from","to","port","Port","getPort","listen","build","aspectId","appCapsule","env","publicDir","outputPath","path","distDir","getCompiler","entries","map","require","resolve","bundlerContext","Object","assign","targets","components","component","rootPath","bundler","getBundler","addPlugin","PrerenderSPAPlugin","staticDir","routes","postProcess","renderedRoute","originalRoute","deployContext","applicationType","title"],"mappings":"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","sourcesContent":["import PrerenderSPAPlugin from '@dreysolano/prerender-spa-plugin';\nimport { join, basename } from 'path';\nimport { Capsule } from '@teambit/isolator';\nimport { Application, AppContext, DeployContext } from '@teambit/application';\nimport { BuildContext } from '@teambit/builder';\nimport { Bundler, BundlerContext, DevServerContext } from '@teambit/bundler';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { ReactEnv } from './react.env';\n\nexport class ReactApp implements Application {\n  constructor(\n    readonly name: string,\n    readonly entry: string[],\n    readonly portRange: number[],\n    private reactEnv: ReactEnv,\n    readonly deploy?: (context: DeployContext) => Promise<void>,\n    readonly prerenderRoutes?: string[]\n  ) {}\n\n  applicationType = 'react';\n\n  async run(context: AppContext): Promise<number> {\n    const devServerContext = this.getDevServerContext(context);\n    const devServer = this.reactEnv.getDevServer(devServerContext, [\n      (configMutator) => {\n        // configMutator.addTopLevel('output', { publicPath: `/public/${this.name}` });\n        configMutator.addTopLevel('devServer', {\n          historyApiFallback: {\n            index: '/index.html',\n            disableDotRule: true,\n          },\n        });\n\n        if (!configMutator.raw.output) configMutator.raw.output = {};\n        configMutator.raw.output.publicPath = '/';\n\n        return configMutator;\n      },\n    ]);\n    const [from, to] = this.portRange;\n    const port = await Port.getPort(from, to);\n    await devServer.listen(port);\n    return port;\n  }\n\n  async build(context: BuildContext, aspectId: string, appCapsule: Capsule): Promise<DeployContext> {\n    const reactEnv: ReactEnv = context.env;\n    const publicDir = join('applications', this.name, 'build');\n    const outputPath = join(appCapsule.path, publicDir);\n    const { distDir } = reactEnv.getCompiler();\n    const entries = this.entry.map((entry) => require.resolve(`${appCapsule.path}/${distDir}/${basename(entry)}`));\n    const bundlerContext: BundlerContext = Object.assign(context, {\n      targets: [\n        {\n          components: [appCapsule?.component],\n          entries,\n          outputPath,\n        },\n      ],\n      entry: [],\n      rootPath: '/',\n    });\n    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, [\n      (configMutator) => {\n        configMutator.addTopLevel('output', { path: join(outputPath, 'public'), publicPath: `/` });\n        configMutator.addPlugin(\n          new PrerenderSPAPlugin({\n            staticDir: join(outputPath, 'public'),\n            routes: this.prerenderRoutes,\n            postProcess(renderedRoute) {\n              renderedRoute.outputPath = join(outputPath, 'public', `${renderedRoute.originalRoute}.html`);\n              return renderedRoute;\n            },\n          })\n        );\n        return configMutator;\n      },\n    ]);\n    await bundler.run();\n    const deployContext = Object.assign(context, {\n      applicationType: this.applicationType,\n      aspectId,\n      publicDir: join(appCapsule.path, publicDir, 'public'),\n    });\n    return deployContext;\n  }\n\n  private getDevServerContext(context: AppContext): DevServerContext {\n    return Object.assign(context, {\n      entry: this.entry,\n      rootPath: '',\n      publicPath: `public/${this.name}`,\n      title: this.name,\n    });\n  }\n}\n"]}
+{"version":3,"sources":["react.application.ts"],"names":["ReactApp","constructor","name","entry","portRange","reactEnv","deploy","prerenderRoutes","run","context","devServerContext","getDevServerContext","devServer","getDevServer","configMutator","addTopLevel","historyApiFallback","index","disableDotRule","raw","output","publicPath","from","to","port","Port","getPort","listen","build","aspectId","appCapsule","env","publicDir","outputPath","path","distDir","getCompiler","entries","map","require","resolve","bundlerContext","Object","assign","targets","components","component","rootPath","bundler","getBundler","addPlugin","PrerenderSPAPlugin","staticDir","routes","postProcess","renderedRoute","originalRoute","deployContext","applicationType","title"],"mappings":"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","sourcesContent":["import PrerenderSPAPlugin from '@dreysolano/prerender-spa-plugin';\nimport { join, basename } from 'path';\nimport { Capsule } from '@teambit/isolator';\nimport { Application, AppContext, DeployContext } from '@teambit/application';\nimport { BuildContext } from '@teambit/builder';\nimport { Bundler, BundlerContext, DevServerContext } from '@teambit/bundler';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { ReactEnv } from './react.env';\n\nexport class ReactApp implements Application {\n  constructor(\n    readonly name: string,\n    readonly entry: string[],\n    readonly portRange: number[],\n    private reactEnv: ReactEnv,\n    readonly deploy?: (context: DeployContext) => Promise<void>,\n    readonly prerenderRoutes?: string[]\n  ) {}\n\n  applicationType = 'react';\n\n  async run(context: AppContext): Promise<number> {\n    const devServerContext = this.getDevServerContext(context);\n    const devServer = this.reactEnv.getDevServer(devServerContext, [\n      (configMutator) => {\n        configMutator.addTopLevel('devServer', {\n          historyApiFallback: {\n            index: '/index.html',\n            disableDotRule: true,\n          },\n        });\n\n        if (!configMutator.raw.output) configMutator.raw.output = {};\n        configMutator.raw.output.publicPath = '/';\n\n        return configMutator;\n      },\n    ]);\n    const [from, to] = this.portRange;\n    const port = await Port.getPort(from, to);\n    await devServer.listen(port);\n    return port;\n  }\n\n  async build(context: BuildContext, aspectId: string, appCapsule: Capsule): Promise<DeployContext> {\n    const reactEnv: ReactEnv = context.env;\n    const publicDir = join('applications', this.name, 'build');\n    const outputPath = join(appCapsule.path, publicDir);\n    const { distDir } = reactEnv.getCompiler();\n    const entries = this.entry.map((entry) => require.resolve(`${appCapsule.path}/${distDir}/${basename(entry)}`));\n    const bundlerContext: BundlerContext = Object.assign(context, {\n      targets: [\n        {\n          components: [appCapsule?.component],\n          entries,\n          outputPath,\n        },\n      ],\n      entry: [],\n      rootPath: '/',\n    });\n    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, [\n      (configMutator) => {\n        configMutator.addTopLevel('output', { path: join(outputPath, 'public'), publicPath: `/` });\n        configMutator.addPlugin(\n          new PrerenderSPAPlugin({\n            staticDir: join(outputPath, 'public'),\n            routes: this.prerenderRoutes,\n            postProcess(renderedRoute) {\n              renderedRoute.outputPath = join(outputPath, 'public', `${renderedRoute.originalRoute}.html`);\n              return renderedRoute;\n            },\n          })\n        );\n        return configMutator;\n      },\n    ]);\n    await bundler.run();\n    const deployContext = Object.assign(context, {\n      applicationType: this.applicationType,\n      aspectId,\n      publicDir: join(appCapsule.path, publicDir, 'public'),\n    });\n    return deployContext;\n  }\n\n  private getDevServerContext(context: AppContext): DevServerContext {\n    return Object.assign(context, {\n      entry: this.entry,\n      rootPath: '',\n      publicPath: `public/${this.name}`,\n      title: this.name,\n    });\n  }\n}\n"]}

package/dist/react.main.runtime.js

@@ -253,9 +253,9 @@ function _react6() {
   return data;
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 class ReactMain {
   constructor(

package/dist/templates/react-app/files/app-plugin.d.ts

@@ -0,0 +1,2 @@
+import { ComponentContext } from '@teambit/generator';
+export declare function appPlugin({ name, namePascalCase: Name }: ComponentContext): string;

package/dist/templates/react-app/files/app-plugin.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.appPlugin = appPlugin;
+
+function appPlugin({
+  name,
+  namePascalCase: Name
+}) {
+  return `import { ReactAppOptions } from '@teambit/react';
+
+export const ${Name}App: ReactAppOptions = {
+  name: '${name}',
+  entry: [require.resolve('./${name}.app-root')],
+  prerenderRoutes: ['/'],
+};
+
+export default ${Name}App;
+`;
+}
+
+//# sourceMappingURL=app-plugin.js.map

package/dist/templates/react-app/files/app-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["app-plugin.ts"],"names":["appPlugin","name","namePascalCase","Name"],"mappings":";;;;;;;AAEO,SAASA,SAAT,CAAmB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,cAAc,EAAEC;AAAxB,CAAnB,EAAqE;AAC1E,SAAQ;AACV;AACA,eAAeA,IAAK;AACpB,WAAWF,IAAK;AAChB,+BAA+BA,IAAK;AACpC;AACA;AACA;AACA,iBAAiBE,IAAK;AACtB,CATE;AAUD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function appPlugin({ name, namePascalCase: Name }: ComponentContext) {\n  return `import { ReactAppOptions } from '@teambit/react';\n\nexport const ${Name}App: ReactAppOptions = {\n  name: '${name}',\n  entry: [require.resolve('./${name}.app-root')],\n  prerenderRoutes: ['/'],\n};\n\nexport default ${Name}App;\n`;\n}\n"]}

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

@@ -9,7 +9,7 @@ function appFile({
   namePascalCase: Name
 }) {
   return `import React from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 export function ${Name}App() {
   return (
@@ -17,8 +17,8 @@ export function ${Name}App() {
 
        {/* header component */}
 
-        <Switch>
-          <Route path="/">
+        <Routes>
+          <Route path="/" element={<div>Hello World!!</div>}>
              {/* home page component */}
           </Route>
 

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

@@ -1 +1 @@
-{"version":3,"sources":["app.ts"],"names":["appFile","namePascalCase","Name"],"mappings":";;;;;;;AAEO,SAASA,OAAT,CAAiB;AAAEC,EAAAA,cAAc,EAAEC;AAAlB,CAAjB,EAA6D;AAClE,SAAQ;AACV;AACA;AACA,kBAAkBA,IAAK;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAzBE;AA0BD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function appFile({ namePascalCase: Name }: ComponentContext) {\n  return `import React from 'react';\nimport { BrowserRouter, Switch, Route } from 'react-router-dom';\n\nexport function ${Name}App() {\n  return (\n    <BrowserRouter>\n\n       {/* header component */}\n\n        <Switch>\n          <Route path=\"/\">\n             {/* home page component */}\n          </Route>\n\n          <Route path=\"/about\">\n             {/* about page component */}\n          </Route>\n\n        </Switch>\n\n        {/* footer component */}\n\n    </BrowserRouter>\n  );\n}\n`;\n}\n"]}
+{"version":3,"sources":["app.ts"],"names":["appFile","namePascalCase","Name"],"mappings":";;;;;;;AAEO,SAASA,OAAT,CAAiB;AAAEC,EAAAA,cAAc,EAAEC;AAAlB,CAAjB,EAA6D;AAClE,SAAQ;AACV;AACA;AACA,kBAAkBA,IAAK;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAzBE;AA0BD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function appFile({ namePascalCase: Name }: ComponentContext) {\n  return `import React from 'react';\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\n\nexport function ${Name}App() {\n  return (\n    <BrowserRouter>\n\n       {/* header component */}\n\n        <Routes>\n          <Route path=\"/\" element={<div>Hello World!!</div>}>\n             {/* home page component */}\n          </Route>\n\n          <Route path=\"/about\">\n             {/* about page component */}\n          </Route>\n\n        </Switch>\n\n        {/* footer component */}\n\n    </BrowserRouter>\n  );\n}\n`;\n}\n"]}

package/dist/templates/react-app/files/doc.d.ts

@@ -1,2 +1,2 @@
 import { ComponentContext } from '@teambit/generator';
-export declare function docFile({ name }: ComponentContext): string;
+export declare function docFile({ name, componentId, nameCamelCase }: ComponentContext): string;

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

@@ -6,23 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.docFile = docFile;
 
 function docFile({
-  name
+  name,
+  componentId,
+  nameCamelCase
 }) {
   return `---
-description: Application.
-labels: ['env', 'app']
+description: ${nameCamelCase} application component.
+labels: ['${name}', 'app']
 ---
 
-## Application component
-
-- The app file contains components from react router dom so you can add here all routes for your app and include all your page components.
-- The main runtime file contains what is needed to build your application as a React app.
-- The app root file renders your app to the DOM.
-- The compositions file renders your app so it can be seen in the compositions tab.
-- The aspect file contains the id of the aspect. You will need to modify this with your own org name, scope name and namespace if any, and then add it to your \`workspace.json\` file at root level like:
+Configure the app plugin on your workspace:
 
 \`\`\`json
-"org-name.scope-name/namespace/name": {},
+"${componentId.toString()}": {},
 \`\`\`
 
 ### Run the application

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

@@ -1 +1 @@
-{"version":3,"sources":["doc.ts"],"names":["docFile","name"],"mappings":";;;;;;;AAEO,SAASA,OAAT,CAAiB;AAAEC,EAAAA;AAAF,CAAjB,EAA6C;AAClD,SAAQ;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,IAAK;AACf;AACA,CAxBE;AAyBD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function docFile({ name }: ComponentContext) {\n  return `---\ndescription: Application.\nlabels: ['env', 'app']\n---\n\n## Application component\n\n- The app file contains components from react router dom so you can add here all routes for your app and include all your page components.\n- The main runtime file contains what is needed to build your application as a React app.\n- The app root file renders your app to the DOM.\n- The compositions file renders your app so it can be seen in the compositions tab.\n- The aspect file contains the id of the aspect. You will need to modify this with your own org name, scope name and namespace if any, and then add it to your \\`workspace.json\\` file at root level like:\n\n\\`\\`\\`json\n\"org-name.scope-name/namespace/name\": {},\n\\`\\`\\`\n\n### Run the application\n\nYou can run your application on a separate port to see it outside of the Bit workspace\n\n\\`\\`\\`bash\nbit run ${name}\n\\`\\`\\`\n`;\n}\n"]}
+{"version":3,"sources":["doc.ts"],"names":["docFile","name","componentId","nameCamelCase","toString"],"mappings":";;;;;;;AAEO,SAASA,OAAT,CAAiB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,WAAR;AAAqBC,EAAAA;AAArB,CAAjB,EAAyE;AAC9E,SAAQ;AACV,eAAeA,aAAc;AAC7B,YAAYF,IAAK;AACjB;AACA;AACA;AACA;AACA;AACA,GAAGC,WAAW,CAACE,QAAZ,EAAuB;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUH,IAAK;AACf;AACA,CAlBE;AAmBD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function docFile({ name, componentId, nameCamelCase }: ComponentContext) {\n  return `---\ndescription: ${nameCamelCase} application component.\nlabels: ['${name}', 'app']\n---\n\nConfigure the app plugin on your workspace:\n\n\\`\\`\\`json\n\"${componentId.toString()}\": {},\n\\`\\`\\`\n\n### Run the application\n\nYou can run your application on a separate port to see it outside of the Bit workspace\n\n\\`\\`\\`bash\nbit run ${name}\n\\`\\`\\`\n`;\n}\n"]}

package/dist/templates/react-app/files/index.d.ts

@@ -1,2 +1,2 @@
 import { ComponentContext } from '@teambit/generator';
-export declare function indexFile({ name, namePascalCase: Name }: ComponentContext): string;
+export declare function indexFile({ namePascalCase: Name }: ComponentContext): string;

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

@@ -6,15 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.indexFile = indexFile;
 
 function indexFile({
-  name,
   namePascalCase: Name
 }) {
-  return `import { ${Name}Aspect } from './${name}.aspect';
-
-export type { ${Name}Main } from './${name}.main.runtime';
-export default ${Name}Aspect;
-export { ${Name}Aspect };
-`;
+  return `export { ${Name}App } from './app';`;
 }
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["indexFile","name","namePascalCase","Name"],"mappings":";;;;;;;AAEO,SAASA,SAAT,CAAmB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,cAAc,EAAEC;AAAxB,CAAnB,EAAqE;AAC1E,SAAQ,YAAWA,IAAK,oBAAmBF,IAAK;AAClD;AACA,gBAAgBE,IAAK,kBAAiBF,IAAK;AAC3C,iBAAiBE,IAAK;AACtB,WAAWA,IAAK;AAChB,CALE;AAMD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function indexFile({ name, namePascalCase: 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"]}
+{"version":3,"sources":["index.ts"],"names":["indexFile","namePascalCase","Name"],"mappings":";;;;;;;AAEO,SAASA,SAAT,CAAmB;AAAEC,EAAAA,cAAc,EAAEC;AAAlB,CAAnB,EAA+D;AACpE,SAAQ,YAAWA,IAAK,qBAAxB;AACD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function indexFile({ namePascalCase: Name }: ComponentContext) {\n  return `export { ${Name}App } from './app';`;\n}\n"]}

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

@@ -5,30 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.reactAppTemplate = void 0;
 
-function _index() {
-  const data = require("./files/index");
+function _appPlugin() {
+  const data = require("./files/app-plugin");
 
-  _index = function () {
+  _appPlugin = function () {
     return data;
   };
 
   return data;
 }
 
-function _doc() {
-  const data = require("./files/doc");
+function _index() {
+  const data = require("./files/index");
 
-  _doc = function () {
+  _index = function () {
     return data;
   };
 
   return data;
 }
 
-function _main() {
-  const data = require("./files/main.runtime");
+function _doc() {
+  const data = require("./files/doc");
 
-  _main = function () {
+  _doc = function () {
     return data;
   };
 
@@ -45,16 +45,6 @@ function _compositions() {
   return data;
 }
 
-function _aspect() {
-  const data = require("./files/aspect");
-
-  _aspect = function () {
-    return data;
-  };
-
-  return data;
-}
-
 function _app() {
   const data = require("./files/app");
 
@@ -88,14 +78,11 @@ const reactAppTemplate = {
       relativePath: `${context.name}.docs.mdx`,
       content: (0, _doc().docFile)(context)
     }, {
-      relativePath: `${context.name}.main.runtime.ts`,
-      content: (0, _main().mainRuntimeFile)(context)
+      relativePath: `${context.name}.react-app.ts`,
+      content: (0, _appPlugin().appPlugin)(context)
     }, {
       relativePath: `${context.name}.compositions.tsx`,
       content: (0, _compositions().compositionsFile)(context)
-    }, {
-      relativePath: `${context.name}.aspect.ts`,
-      content: (0, _aspect().aspectFile)(context)
     }, {
       relativePath: `app.tsx`,
       content: (0, _app().appFile)(context)

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["reactAppTemplate","name","hidden","description","generateFiles","context","relativePath","content","isMain"],"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;;AAEO,MAAMA,gBAAmC,GAAG;AACjDC,EAAAA,IAAI,EAAE,WAD2C;AAEjDC,EAAAA,MAAM,EAAE,IAFyC;AAGjDC,EAAAA,WAAW,EAAE,qBAHoC;AAIjDC,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,CAACJ,IAAK,WADhC;AAEEM,MAAAA,OAAO,EAAE,oBAAQF,OAAR;AAFX,KANK,EAUL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACJ,IAAK,kBADhC;AAEEM,MAAAA,OAAO,EAAE,6BAAgBF,OAAhB;AAFX,KAVK,EAcL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACJ,IAAK,mBADhC;AAEEM,MAAAA,OAAO,EAAE,sCAAiBF,OAAjB;AAFX,KAdK,EAkBL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACJ,IAAK,YADhC;AAEEM,MAAAA,OAAO,EAAE,0BAAWF,OAAX;AAFX,KAlBK,EAsBL;AACEC,MAAAA,YAAY,EAAG,SADjB;AAEEC,MAAAA,OAAO,EAAE,oBAAQF,OAAR;AAFX,KAtBK,EA0BL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACJ,IAAK,eADhC;AAEEM,MAAAA,OAAO,EAAE,4BAAYF,OAAZ;AAFX,KA1BK,CAAP;AA+BD;AApCgD,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 { compositionsFile } from './files/compositions';\nimport { aspectFile } from './files/aspect';\nimport { appFile } from './files/app';\nimport { appRootFile } from './files/app-root';\n\nexport const reactAppTemplate: ComponentTemplate = {\n  name: 'react-app',\n  hidden: true,\n  description: 'Creates a React app',\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}.compositions.tsx`,\n        content: compositionsFile(context),\n      },\n      {\n        relativePath: `${context.name}.aspect.ts`,\n        content: aspectFile(context),\n      },\n      {\n        relativePath: `app.tsx`,\n        content: appFile(context),\n      },\n      {\n        relativePath: `${context.name}.app-root.tsx`,\n        content: appRootFile(context),\n      },\n    ];\n  },\n};\n"]}
+{"version":3,"sources":["index.ts"],"names":["reactAppTemplate","name","hidden","description","generateFiles","context","relativePath","content","isMain"],"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;;AAEO,MAAMA,gBAAmC,GAAG;AACjDC,EAAAA,IAAI,EAAE,WAD2C;AAEjDC,EAAAA,MAAM,EAAE,IAFyC;AAGjDC,EAAAA,WAAW,EAAE,qBAHoC;AAIjDC,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,CAACJ,IAAK,WADhC;AAEEM,MAAAA,OAAO,EAAE,oBAAQF,OAAR;AAFX,KANK,EAUL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACJ,IAAK,eADhC;AAEEM,MAAAA,OAAO,EAAE,4BAAUF,OAAV;AAFX,KAVK,EAcL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACJ,IAAK,mBADhC;AAEEM,MAAAA,OAAO,EAAE,sCAAiBF,OAAjB;AAFX,KAdK,EAkBL;AACEC,MAAAA,YAAY,EAAG,SADjB;AAEEC,MAAAA,OAAO,EAAE,oBAAQF,OAAR;AAFX,KAlBK,EAsBL;AACEC,MAAAA,YAAY,EAAG,GAAED,OAAO,CAACJ,IAAK,eADhC;AAEEM,MAAAA,OAAO,EAAE,4BAAYF,OAAZ;AAFX,KAtBK,CAAP;AA2BD;AAhCgD,CAA5C","sourcesContent":["import { ComponentContext, ComponentTemplate } from '@teambit/generator';\nimport { appPlugin } from './files/app-plugin';\nimport { indexFile } from './files/index';\nimport { docFile } from './files/doc';\nimport { compositionsFile } from './files/compositions';\nimport { appFile } from './files/app';\nimport { appRootFile } from './files/app-root';\n\nexport const reactAppTemplate: ComponentTemplate = {\n  name: 'react-app',\n  hidden: true,\n  description: 'Creates a React app',\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}.react-app.ts`,\n        content: appPlugin(context),\n      },\n      {\n        relativePath: `${context.name}.compositions.tsx`,\n        content: compositionsFile(context),\n      },\n      {\n        relativePath: `app.tsx`,\n        content: appFile(context),\n      },\n      {\n        relativePath: `${context.name}.app-root.tsx`,\n        content: appRootFile(context),\n      },\n    ];\n  },\n};\n"]}

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

@@ -12,19 +12,19 @@ const componentFile = context => {
   } = context;
   return {
     relativePath: `${name}.tsx`,
-    content: `import React from 'react';
+    content: `import React, { ReactNode } from 'react';
 
 export type ${Name}Props = {
   /**
-   * a text to be rendered in the component.
+   * a node to be rendered in the special component.
    */
-  text: string
+  children?: ReactNode;
 };
 
-export function ${Name}({ text }: ${Name}Props) {
+export function ${Name}({ children }: ${Name}Props) {
   return (
     <div>
-      {text}
+      {children}
     </div>
   );
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["component.ts"],"names":["componentFile","context","name","namePascalCase","Name","relativePath","content"],"mappings":";;;;;;;AAEO,MAAMA,aAAa,GAAIC,OAAD,IAA+B;AAC1D,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,cAAc,EAAEC;AAAxB,MAAiCH,OAAvC;AACA,SAAO;AACLI,IAAAA,YAAY,EAAG,GAAEH,IAAK,MADjB;AAELI,IAAAA,OAAO,EAAG;AACd;AACA,cAAcF,IAAK;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBA,IAAK,cAAaA,IAAK;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AAlBS,GAAP;AAoBD,CAtBM","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const componentFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n  return {\n    relativePath: `${name}.tsx`,\n    content: `import React from 'react';\n\nexport type ${Name}Props = {\n  /**\n   * a text to be rendered in the component.\n   */\n  text: string\n};\n\nexport function ${Name}({ text }: ${Name}Props) {\n  return (\n    <div>\n      {text}\n    </div>\n  );\n}\n`,\n  };\n};\n"]}
+{"version":3,"sources":["component.ts"],"names":["componentFile","context","name","namePascalCase","Name","relativePath","content"],"mappings":";;;;;;;AAEO,MAAMA,aAAa,GAAIC,OAAD,IAA+B;AAC1D,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,cAAc,EAAEC;AAAxB,MAAiCH,OAAvC;AACA,SAAO;AACLI,IAAAA,YAAY,EAAG,GAAEH,IAAK,MADjB;AAELI,IAAAA,OAAO,EAAG;AACd;AACA,cAAcF,IAAK;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBA,IAAK,kBAAiBA,IAAK;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AAlBS,GAAP;AAoBD,CAtBM","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const componentFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n  return {\n    relativePath: `${name}.tsx`,\n    content: `import React, { ReactNode } from 'react';\n\nexport type ${Name}Props = {\n  /**\n   * a node to be rendered in the special component.\n   */\n  children?: ReactNode;\n};\n\nexport function ${Name}({ children }: ${Name}Props) {\n  return (\n    <div>\n      {children}\n    </div>\n  );\n}\n`,\n  };\n};\n"]}

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

@@ -15,9 +15,11 @@ const compositionFile = context => {
     content: `import React from 'react';
 import { ${Name} } from './${name}';
 
-export const Basic${Name} = () => (
-  <${Name} text="hello from ${Name}" />
-);
+export const Basic${Name} = () => {
+  return (
+    <${Name}>hello world!</${Name}>
+  );
+}
 `
   };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["composition.ts"],"names":["compositionFile","context","name","namePascalCase","Name","relativePath","content"],"mappings":";;;;;;;AAEO,MAAMA,eAAe,GAAIC,OAAD,IAA+B;AAC5D,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,cAAc,EAAEC;AAAxB,MAAiCH,OAAvC;AAEA,SAAO;AACLI,IAAAA,YAAY,EAAG,GAAEH,IAAK,kBADjB;AAELI,IAAAA,OAAO,EAAG;AACd,WAAWF,IAAK,cAAaF,IAAK;AAClC;AACA,oBAAoBE,IAAK;AACzB,KAAKA,IAAK,qBAAoBA,IAAK;AACnC;AACA;AARS,GAAP;AAUD,CAbM","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const compositionFile = (context: ComponentContext) => {\n  const { name, namePascalCase: 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  <${Name} text=\"hello from ${Name}\" />\n);\n`,\n  };\n};\n"]}
+{"version":3,"sources":["composition.ts"],"names":["compositionFile","context","name","namePascalCase","Name","relativePath","content"],"mappings":";;;;;;;AAEO,MAAMA,eAAe,GAAIC,OAAD,IAA+B;AAC5D,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,cAAc,EAAEC;AAAxB,MAAiCH,OAAvC;AAEA,SAAO;AACLI,IAAAA,YAAY,EAAG,GAAEH,IAAK,kBADjB;AAELI,IAAAA,OAAO,EAAG;AACd,WAAWF,IAAK,cAAaF,IAAK;AAClC;AACA,oBAAoBE,IAAK;AACzB;AACA,OAAOA,IAAK,kBAAiBA,IAAK;AAClC;AACA;AACA;AAVS,GAAP;AAYD,CAfM","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const compositionFile = (context: ComponentContext) => {\n  const { name, namePascalCase: 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  return (\n    <${Name}>hello world!</${Name}>\n  );\n}\n`,\n  };\n};\n"]}

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

@@ -13,26 +13,22 @@ const docsFile = context => {
   return {
     relativePath: `${name}.docs.mdx`,
     content: `---
-description: 'A ${Name} component.'
-labels: ['label1', 'label2', 'label3']
+description: A ${Name} component.
 ---
 
 import { ${Name} } from './${name}';
 
-## React Component for rendering text
-
-A basic div that renders some text
+A component that does something special and renders text in a div.
 
 ### Component usage
 \`\`\`js
-<${Name} text="hello from ${Name}" />
+<${Name}>Hello world!</${Name}>
 \`\`\`
 
-### Using props to customize the text
+### Render hello world!
 
-Modify the text to see it change live:
 \`\`\`js live
-<${Name} text="hello from ${Name}" />
+<${Name}>Hello world!</${Name}>
 \`\`\`
 `
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["docs.ts"],"names":["docsFile","context","name","namePascalCase","Name","relativePath","content"],"mappings":";;;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAD,IAA+B;AACrD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,cAAc,EAAEC;AAAxB,MAAiCH,OAAvC;AAEA,SAAO;AACLI,IAAAA,YAAY,EAAG,GAAEH,IAAK,WADjB;AAELI,IAAAA,OAAO,EAAG;AACd,kBAAkBF,IAAK;AACvB;AACA;AACA;AACA,WAAWA,IAAK,cAAaF,IAAK;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAGE,IAAK,qBAAoBA,IAAK;AACjC;AACA;AACA;AACA;AACA;AACA;AACA,GAAGA,IAAK,qBAAoBA,IAAK;AACjC;AACA;AAxBS,GAAP;AA0BD,CA7BM","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const docsFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n\n  return {\n    relativePath: `${name}.docs.mdx`,\n    content: `---\ndescription: 'A ${Name} component.'\nlabels: ['label1', 'label2', 'label3']\n---\n\nimport { ${Name} } from './${name}';\n\n## React Component for rendering text\n\nA basic div that renders some text\n\n### Component usage\n\\`\\`\\`js\n<${Name} text=\"hello from ${Name}\" />\n\\`\\`\\`\n\n### Using props to customize the text\n\nModify the text to see it change live:\n\\`\\`\\`js live\n<${Name} text=\"hello from ${Name}\" />\n\\`\\`\\`\n`,\n  };\n};\n"]}
+{"version":3,"sources":["docs.ts"],"names":["docsFile","context","name","namePascalCase","Name","relativePath","content"],"mappings":";;;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAD,IAA+B;AACrD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,cAAc,EAAEC;AAAxB,MAAiCH,OAAvC;AAEA,SAAO;AACLI,IAAAA,YAAY,EAAG,GAAEH,IAAK,WADjB;AAELI,IAAAA,OAAO,EAAG;AACd,iBAAiBF,IAAK;AACtB;AACA;AACA,WAAWA,IAAK,cAAaF,IAAK;AAClC;AACA;AACA;AACA;AACA;AACA,GAAGE,IAAK,kBAAiBA,IAAK;AAC9B;AACA;AACA;AACA;AACA;AACA,GAAGA,IAAK,kBAAiBA,IAAK;AAC9B;AACA;AApBS,GAAP;AAsBD,CAzBM","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const docsFile = (context: ComponentContext) => {\n  const { name, namePascalCase: Name } = context;\n\n  return {\n    relativePath: `${name}.docs.mdx`,\n    content: `---\ndescription: A ${Name} component.\n---\n\nimport { ${Name} } from './${name}';\n\nA component that does something special and renders text in a div.\n\n### Component usage\n\\`\\`\\`js\n<${Name}>Hello world!</${Name}>\n\\`\\`\\`\n\n### Render hello world!\n\n\\`\\`\\`js live\n<${Name}>Hello world!</${Name}>\n\\`\\`\\`\n`,\n  };\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["reactComponent","name","description","generateFiles","context","namePascalCase","Name","indexFile","relativePath","content","deprecatedReactComponent","hidden"],"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;;AAEO,MAAMA,cAAiC,GAAG;AAC/CC,EAAAA,IAAI,EAAE,OADyC;AAE/CC,EAAAA,WAAW,EAAE,yBAFkC;AAI/CC,EAAAA,aAAa,EAAGC,OAAD,IAA+B;AAC5C,UAAM;AAAEH,MAAAA,IAAF;AAAQI,MAAAA,cAAc,EAAEC;AAAxB,QAAiCF,OAAvC;AACA,UAAMG,SAAS,GAAG;AAChBC,MAAAA,YAAY,EAAE,UADE;AAEhBC,MAAAA,OAAO,EAAG,YAAWH,IAAK,cAAaL,IAAK;AAClD,gBAAgBK,IAAK,mBAAkBL,IAAK;AAC5C;AAJsB,KAAlB;AAOA,WAAO,CAACM,SAAD,EAAY,gCAAcH,OAAd,CAAZ,EAAoC,oCAAgBA,OAAhB,CAApC,EAA8D,sBAASA,OAAT,CAA9D,EAAiF,sBAASA,OAAT,CAAjF,CAAP;AACD;AAd8C,CAA1C;;AAiBA,MAAMM,wBAA2C,GAAG;AACzDT,EAAAA,IAAI,EAAE,iBADmD;AAEzDC,EAAAA,WAAW,EAAE,yBAF4C;AAGzDS,EAAAA,MAAM,EAAE,IAHiD;AAKzDR,EAAAA,aAAa,EAAGC,OAAD,IAA+B;AAC5C,UAAM;AAAEH,MAAAA,IAAF;AAAQI,MAAAA,cAAc,EAAEC;AAAxB,QAAiCF,OAAvC;AACA,UAAMG,SAAS,GAAG;AAChBC,MAAAA,YAAY,EAAE,UADE;AAEhBC,MAAAA,OAAO,EAAG,YAAWH,IAAK,cAAaL,IAAK;AAClD,gBAAgBK,IAAK,mBAAkBL,IAAK;AAC5C;AAJsB,KAAlB;AAOA,WAAO,CAACM,SAAD,EAAY,gCAAcH,OAAd,CAAZ,EAAoC,oCAAgBA,OAAhB,CAApC,EAA8D,sBAASA,OAAT,CAA9D,EAAiF,sBAASA,OAAT,CAAjF,CAAP;AACD;AAfwD,CAApD","sourcesContent":["import { ComponentTemplate, ComponentContext } from '@teambit/generator';\nimport { componentFile } from './files/component';\nimport { compositionFile } from './files/composition';\nimport { docsFile } from './files/docs';\nimport { testFile } from './files/test';\n\nexport const reactComponent: ComponentTemplate = {\n  name: 'react',\n  description: 'a basic react component',\n\n  generateFiles: (context: ComponentContext) => {\n    const { name, namePascalCase: Name } = context;\n    const indexFile = {\n      relativePath: 'index.ts',\n      content: `export { ${Name} } from './${name}';\nexport type { ${Name}Props } from './${name}';\n`,\n    };\n\n    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];\n  },\n};\n\nexport const deprecatedReactComponent: ComponentTemplate = {\n  name: 'react-component',\n  description: 'a basic react component',\n  hidden: true,\n\n  generateFiles: (context: ComponentContext) => {\n    const { name, namePascalCase: Name } = context;\n    const indexFile = {\n      relativePath: 'index.ts',\n      content: `export { ${Name} } from './${name}';\nexport type { ${Name}Props } from './${name}';\n`,\n    };\n\n    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];\n  },\n};\n"]}
+{"version":3,"sources":["index.ts"],"names":["reactComponent","name","description","generateFiles","context","namePascalCase","Name","indexFile","relativePath","content","deprecatedReactComponent","hidden"],"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;;AAEO,MAAMA,cAAiC,GAAG;AAC/CC,EAAAA,IAAI,EAAE,OADyC;AAE/CC,EAAAA,WAAW,EAAE,yBAFkC;AAG/CC,EAAAA,aAAa,EAAGC,OAAD,IAA+B;AAC5C,UAAM;AAAEH,MAAAA,IAAF;AAAQI,MAAAA,cAAc,EAAEC;AAAxB,QAAiCF,OAAvC;AACA,UAAMG,SAAS,GAAG;AAChBC,MAAAA,YAAY,EAAE,UADE;AAEhBC,MAAAA,OAAO,EAAG,YAAWH,IAAK,cAAaL,IAAK;AAClD,gBAAgBK,IAAK,mBAAkBL,IAAK;AAC5C;AAJsB,KAAlB;AAOA,WAAO,CAACM,SAAD,EAAY,gCAAcH,OAAd,CAAZ,EAAoC,oCAAgBA,OAAhB,CAApC,EAA8D,sBAASA,OAAT,CAA9D,EAAiF,sBAASA,OAAT,CAAjF,CAAP;AACD;AAb8C,CAA1C;;AAgBA,MAAMM,wBAA2C,GAAG;AACzDT,EAAAA,IAAI,EAAE,iBADmD;AAEzDC,EAAAA,WAAW,EAAE,yBAF4C;AAGzDS,EAAAA,MAAM,EAAE,IAHiD;AAKzDR,EAAAA,aAAa,EAAGC,OAAD,IAA+B;AAC5C,UAAM;AAAEH,MAAAA,IAAF;AAAQI,MAAAA,cAAc,EAAEC;AAAxB,QAAiCF,OAAvC;AACA,UAAMG,SAAS,GAAG;AAChBC,MAAAA,YAAY,EAAE,UADE;AAEhBC,MAAAA,OAAO,EAAG,YAAWH,IAAK,cAAaL,IAAK;AAClD,gBAAgBK,IAAK,mBAAkBL,IAAK;AAC5C;AAJsB,KAAlB;AAOA,WAAO,CAACM,SAAD,EAAY,gCAAcH,OAAd,CAAZ,EAAoC,oCAAgBA,OAAhB,CAApC,EAA8D,sBAASA,OAAT,CAA9D,EAAiF,sBAASA,OAAT,CAAjF,CAAP;AACD;AAfwD,CAApD","sourcesContent":["import { ComponentTemplate, ComponentContext } from '@teambit/generator';\nimport { componentFile } from './files/component';\nimport { compositionFile } from './files/composition';\nimport { docsFile } from './files/docs';\nimport { testFile } from './files/test';\n\nexport const reactComponent: ComponentTemplate = {\n  name: 'react',\n  description: 'a basic react component',\n  generateFiles: (context: ComponentContext) => {\n    const { name, namePascalCase: Name } = context;\n    const indexFile = {\n      relativePath: 'index.ts',\n      content: `export { ${Name} } from './${name}';\nexport type { ${Name}Props } from './${name}';\n`,\n    };\n\n    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];\n  },\n};\n\nexport const deprecatedReactComponent: ComponentTemplate = {\n  name: 'react-component',\n  description: 'a basic react component',\n  hidden: true,\n\n  generateFiles: (context: ComponentContext) => {\n    const { name, namePascalCase: Name } = context;\n    const indexFile = {\n      relativePath: 'index.ts',\n      content: `export { ${Name} } from './${name}';\nexport type { ${Name}Props } from './${name}';\n`,\n    };\n\n    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];\n  },\n};\n"]}

package/dist/templates/workspace-common/files/workspace-config.d.ts

@@ -1,2 +1,2 @@
 import { WorkspaceContext } from '@teambit/generator';
-export declare function workspaceConfig({ name, defaultScope, empty }: WorkspaceContext): Promise<string>;
+export declare function workspaceConfig({ name, defaultScope }: WorkspaceContext): Promise<string>;

package/dist/templates/workspace-common/files/workspace-config.js

@@ -29,8 +29,7 @@ function _commentJson() {
 
 async function workspaceConfig({
   name,
-  defaultScope,
-  empty
+  defaultScope
 }) {
   const scope = defaultScope || 'company.scope';
   const configParsed = await (0, _config().getWorkspaceConfigTemplateParsed)();
@@ -55,26 +54,36 @@ async function workspaceConfig({
     }
   };
   const variants = {
-    'teambit.workspace/variants': empty ? {
-      '*': {
-        'teambit.react/react': {}
-      }
-    } : (0, _commentJson().parse)(`{
-      "{ui/**}, {pages/**}": {
-        // uses the custom env
-        "${scope}/envs/my-react": {},
-        // uncomment the line below if you remove the custom env and remove the line above
-        // "teambit.react/react": {},
+    'teambit.workspace/variants': (0, _commentJson().parse)(`{
+      /**
+       * configures all components with namespaces 'ui', 'blocks', 'pages' and 'themes'
+       * to use the default React development environment.
+       *
+      */
+      "{ui/**}, {blocks/**}, {pages/**}, {themes/**}": {
+        "teambit.react/react": {}
       },
-      "{themes/**}": {
-        "teambit.react/react": {},
+  
+      /**
+       * configures components with namespaces 'entities', 'modules' and 'functions' to use the 
+       * default NodeJS dev environment.
+      */
+      "{entities/**}, {modules/**}, {functions/**}": {
+        "teambit.harmony/node": {}
       },
+      /**
+       * configures components with namespace 'content' to use the MDX dev environment.
+      */
       "{content/**}": {
-        "teambit.mdx/mdx": {},
-      },
-      "{envs/**}, {extensions/**}": {
-        "teambit.harmony/aspect": {},
+        "teambit.mdx/mdx": {}
       },
+  
+      /**
+       * configures components with namespaces 'envs' and 'aspects' to use the default Aspect development environment.
+      */
+      "{envs/**}, {aspects/**}": {
+        "teambit.harmony/aspect": {}
+      }
     }`)
   };
   const configMerged = (0, _commentJson().assign)(configParsed, variants);

package/dist/templates/workspace-common/files/workspace-config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["workspace-config.ts"],"names":["workspaceConfig","name","defaultScope","empty","scope","configParsed","packageManager","policy","dependencies","peerDependencies","react","variants","configMerged"],"mappings":";;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,eAAeA,eAAf,CAA+B;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,YAAR;AAAsBC,EAAAA;AAAtB,CAA/B,EAAgF;AACrF,QAAMC,KAAK,GAAGF,YAAY,IAAI,eAA9B;AACA,QAAMG,YAAY,GAAG,MAAM,iDAA3B;AACAA,EAAAA,YAAY,CAAC,6BAAD,CAAZ,CAA4CJ,IAA5C,GAAmDA,IAAnD;AACAI,EAAAA,YAAY,CAAC,6BAAD,CAAZ,CAA4CH,YAA5C,GAA2DE,KAA3D;AACAC,EAAAA,YAAY,CAAC,0CAAD,CAAZ,CAAyDC,cAAzD,GAA0E,2BAA1E;AACAD,EAAAA,YAAY,CAAC,0CAAD,CAAZ,CAAyDE,MAAzD,GAAkE;AAChEC,IAAAA,YAAY,EAAE;AACZ,0CAAoC,UADxB;AAEZ,0CAAoC,QAFxB;AAGZ,qCAA+B,OAHnB;AAIZ,8BAAwB,QAJZ;AAKZ,4BAAsB,QALV;AAMZ,gCAA0B,OANd;AAOZ,2BAAqB,QAPT;AAQZ,6BAAuB;AARX,KADkD;AAWhEC,IAAAA,gBAAgB,EAAE;AAChB,gCAA0B,QADV;AAEhBC,MAAAA,KAAK,EAAE,QAFS;AAGhB,mBAAa;AAHG;AAX8C,GAAlE;AAkBA,QAAMC,QAAQ,GAAG;AACf,kCAA8BR,KAAK,GAC/B;AACE,WAAK;AACH,+BAAuB;AADpB;AADP,KAD+B,GAM/B,0BAAO;AACf;AACA;AACA,WAAWC,KAAM;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAhBQ;AAPW,GAAjB;AA0BA,QAAMQ,YAAY,GAAG,2BAAOP,YAAP,EAAqBM,QAArB,CAArB;AAEA,SAAO,wCAAyBC,YAAzB,CAAP;AACD","sourcesContent":["import { WorkspaceContext } from '@teambit/generator';\nimport { getWorkspaceConfigTemplateParsed, stringifyWorkspaceConfig } from '@teambit/config';\nimport { parse, assign } from 'comment-json';\n\nexport async function workspaceConfig({ name, defaultScope, empty }: WorkspaceContext) {\n  const scope = defaultScope || 'company.scope';\n  const configParsed = await getWorkspaceConfigTemplateParsed();\n  configParsed['teambit.workspace/workspace'].name = name;\n  configParsed['teambit.workspace/workspace'].defaultScope = scope;\n  configParsed['teambit.dependencies/dependency-resolver'].packageManager = 'teambit.dependencies/pnpm';\n  configParsed['teambit.dependencies/dependency-resolver'].policy = {\n    dependencies: {\n      '@teambit/eslint-config-bit-react': '~0.0.367',\n      '@typescript-eslint/eslint-plugin': '4.29.3',\n      'eslint-import-resolver-node': '0.3.6',\n      'eslint-plugin-import': '2.22.1',\n      'eslint-plugin-jest': '24.4.0',\n      'eslint-plugin-jsx-a11y': '6.4.1',\n      'eslint-plugin-mdx': '1.15.0',\n      'eslint-plugin-react': '7.25.1',\n    },\n    peerDependencies: {\n      '@testing-library/react': '12.0.0',\n      react: '17.0.2',\n      'react-dom': '17.0.2',\n    },\n  };\n\n  const variants = {\n    'teambit.workspace/variants': empty\n      ? {\n          '*': {\n            'teambit.react/react': {},\n          },\n        }\n      : parse(`{\n      \"{ui/**}, {pages/**}\": {\n        // uses the custom env\n        \"${scope}/envs/my-react\": {},\n        // uncomment the line below if you remove the custom env and remove the line above\n        // \"teambit.react/react\": {},\n      },\n      \"{themes/**}\": {\n        \"teambit.react/react\": {},\n      },\n      \"{content/**}\": {\n        \"teambit.mdx/mdx\": {},\n      },\n      \"{envs/**}, {extensions/**}\": {\n        \"teambit.harmony/aspect\": {},\n      },\n    }`),\n  };\n\n  const configMerged = assign(configParsed, variants);\n\n  return stringifyWorkspaceConfig(configMerged);\n}\n"]}
+{"version":3,"sources":["workspace-config.ts"],"names":["workspaceConfig","name","defaultScope","scope","configParsed","packageManager","policy","dependencies","peerDependencies","react","variants","configMerged"],"mappings":";;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,eAAeA,eAAf,CAA+B;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAA/B,EAAyE;AAC9E,QAAMC,KAAK,GAAGD,YAAY,IAAI,eAA9B;AACA,QAAME,YAAY,GAAG,MAAM,iDAA3B;AACAA,EAAAA,YAAY,CAAC,6BAAD,CAAZ,CAA4CH,IAA5C,GAAmDA,IAAnD;AACAG,EAAAA,YAAY,CAAC,6BAAD,CAAZ,CAA4CF,YAA5C,GAA2DC,KAA3D;AACAC,EAAAA,YAAY,CAAC,0CAAD,CAAZ,CAAyDC,cAAzD,GAA0E,2BAA1E;AACAD,EAAAA,YAAY,CAAC,0CAAD,CAAZ,CAAyDE,MAAzD,GAAkE;AAChEC,IAAAA,YAAY,EAAE;AACZ,0CAAoC,UADxB;AAEZ,0CAAoC,QAFxB;AAGZ,qCAA+B,OAHnB;AAIZ,8BAAwB,QAJZ;AAKZ,4BAAsB,QALV;AAMZ,gCAA0B,OANd;AAOZ,2BAAqB,QAPT;AAQZ,6BAAuB;AARX,KADkD;AAWhEC,IAAAA,gBAAgB,EAAE;AAChB,gCAA0B,QADV;AAEhBC,MAAAA,KAAK,EAAE,QAFS;AAGhB,mBAAa;AAHG;AAX8C,GAAlE;AAkBA,QAAMC,QAAQ,GAAG;AACf,kCAA8B,0BAAO;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MA9BkC;AADf,GAAjB;AAkCA,QAAMC,YAAY,GAAG,2BAAOP,YAAP,EAAqBM,QAArB,CAArB;AAEA,SAAO,wCAAyBC,YAAzB,CAAP;AACD","sourcesContent":["import { WorkspaceContext } from '@teambit/generator';\nimport { getWorkspaceConfigTemplateParsed, stringifyWorkspaceConfig } from '@teambit/config';\nimport { parse, assign } from 'comment-json';\n\nexport async function workspaceConfig({ name, defaultScope }: WorkspaceContext) {\n  const scope = defaultScope || 'company.scope';\n  const configParsed = await getWorkspaceConfigTemplateParsed();\n  configParsed['teambit.workspace/workspace'].name = name;\n  configParsed['teambit.workspace/workspace'].defaultScope = scope;\n  configParsed['teambit.dependencies/dependency-resolver'].packageManager = 'teambit.dependencies/pnpm';\n  configParsed['teambit.dependencies/dependency-resolver'].policy = {\n    dependencies: {\n      '@teambit/eslint-config-bit-react': '~0.0.367',\n      '@typescript-eslint/eslint-plugin': '4.29.3',\n      'eslint-import-resolver-node': '0.3.6',\n      'eslint-plugin-import': '2.22.1',\n      'eslint-plugin-jest': '24.4.0',\n      'eslint-plugin-jsx-a11y': '6.4.1',\n      'eslint-plugin-mdx': '1.15.0',\n      'eslint-plugin-react': '7.25.1',\n    },\n    peerDependencies: {\n      '@testing-library/react': '12.0.0',\n      react: '17.0.2',\n      'react-dom': '17.0.2',\n    },\n  };\n\n  const variants = {\n    'teambit.workspace/variants': parse(`{\n      /**\n       * configures all components with namespaces 'ui', 'blocks', 'pages' and 'themes'\n       * to use the default React development environment.\n       *\n      */\n      \"{ui/**}, {blocks/**}, {pages/**}, {themes/**}\": {\n        \"teambit.react/react\": {}\n      },\n  \n      /**\n       * configures components with namespaces 'entities', 'modules' and 'functions' to use the \n       * default NodeJS dev environment.\n      */\n      \"{entities/**}, {modules/**}, {functions/**}\": {\n        \"teambit.harmony/node\": {}\n      },\n      /**\n       * configures components with namespace 'content' to use the MDX dev environment.\n      */\n      \"{content/**}\": {\n        \"teambit.mdx/mdx\": {}\n      },\n  \n      /**\n       * configures components with namespaces 'envs' and 'aspects' to use the default Aspect development environment.\n      */\n      \"{envs/**}, {aspects/**}\": {\n        \"teambit.harmony/aspect\": {}\n      }\n    }`),\n  };\n\n  const configMerged = assign(configParsed, variants);\n\n  return stringifyWorkspaceConfig(configMerged);\n}\n"]}

package/dist/webpack/webpack.config.base.js

@@ -97,9 +97,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2().default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 const styleLoaderPath = require.resolve('style-loader');
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.585",
+  "version": "0.0.589",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.585"
+    "version": "0.0.589"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -79,47 +79,47 @@
     "@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.354",
-    "@teambit/preview": "0.0.585",
-    "@teambit/react.ui.error-fallback": "0.0.102",
-    "@teambit/react.ui.loader-fallback": "0.0.81",
-    "@teambit/compositions.ui.hooks.use-composition": "0.0.155",
+    "@teambit/preview": "0.0.589",
+    "@teambit/react.ui.error-fallback": "0.0.105",
+    "@teambit/react.ui.loader-fallback": "0.0.84",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.158",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/application": "0.0.227",
-    "@teambit/bundler": "0.0.585",
-    "@teambit/builder": "0.0.585",
-    "@teambit/isolator": "0.0.585",
-    "@teambit/toolbox.network.get-port": "0.0.105",
-    "@teambit/compiler": "0.0.585",
-    "@teambit/component.modules.component-url": "0.0.112",
-    "@teambit/component": "0.0.585",
-    "@teambit/envs": "0.0.585",
-    "@teambit/eslint": "0.0.585",
-    "@teambit/formatter": "0.0.136",
-    "@teambit/jest": "0.0.585",
-    "@teambit/linter": "0.0.585",
-    "@teambit/pkg": "0.0.585",
-    "@teambit/prettier": "0.0.136",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.13",
-    "@teambit/schema": "0.0.585",
-    "@teambit/tester": "0.0.585",
-    "@teambit/typescript": "0.0.585",
-    "@teambit/webpack": "0.0.585",
-    "@teambit/workspace": "0.0.585",
-    "@teambit/cli": "0.0.401",
-    "@teambit/dependency-resolver": "0.0.585",
-    "@teambit/generator": "0.0.585",
-    "@teambit/graphql": "0.0.585",
-    "@teambit/react.ui.highlighter-provider": "0.0.171",
-    "@teambit/compositions": "0.0.585",
-    "@teambit/ui": "0.0.585",
-    "@teambit/react.eslint-config-bit-react": "0.0.479",
-    "@teambit/mdx.modules.mdx-loader": "0.0.479",
-    "@teambit/react.babel.bit-react-transformer": "0.0.487",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.95",
-    "@teambit/webpack.modules.style-regexps": "0.0.124",
-    "@teambit/component-id": "0.0.391",
-    "@teambit/config": "0.0.413"
+    "@teambit/application": "0.0.231",
+    "@teambit/bundler": "0.0.589",
+    "@teambit/builder": "0.0.589",
+    "@teambit/isolator": "0.0.589",
+    "@teambit/toolbox.network.get-port": "0.0.108",
+    "@teambit/compiler": "0.0.589",
+    "@teambit/component.modules.component-url": "0.0.115",
+    "@teambit/component": "0.0.589",
+    "@teambit/envs": "0.0.589",
+    "@teambit/eslint": "0.0.589",
+    "@teambit/formatter": "0.0.140",
+    "@teambit/jest": "0.0.589",
+    "@teambit/linter": "0.0.589",
+    "@teambit/pkg": "0.0.589",
+    "@teambit/prettier": "0.0.140",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.16",
+    "@teambit/schema": "0.0.589",
+    "@teambit/tester": "0.0.589",
+    "@teambit/typescript": "0.0.589",
+    "@teambit/webpack": "0.0.589",
+    "@teambit/workspace": "0.0.589",
+    "@teambit/cli": "0.0.404",
+    "@teambit/dependency-resolver": "0.0.589",
+    "@teambit/generator": "0.0.589",
+    "@teambit/graphql": "0.0.589",
+    "@teambit/react.ui.highlighter-provider": "0.0.174",
+    "@teambit/compositions": "0.0.589",
+    "@teambit/ui": "0.0.589",
+    "@teambit/react.eslint-config-bit-react": "0.0.482",
+    "@teambit/mdx.modules.mdx-loader": "0.0.482",
+    "@teambit/react.babel.bit-react-transformer": "0.0.490",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.98",
+    "@teambit/webpack.modules.style-regexps": "0.0.127",
+    "@teambit/component-id": "0.0.394",
+    "@teambit/config": "0.0.416"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -134,10 +134,10 @@
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
-    "@teambit/react.aspect-docs.react": "0.0.123"
+    "@teambit/react.aspect-docs.react": "0.0.126"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.187",
+    "@teambit/legacy": "1.0.190",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -199,7 +199,7 @@
         "@types/jest": "^26.0.0"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.187",
+        "@teambit/legacy": "1.0.190",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/templates/react-app/files/app-plugin.ts

@@ -0,0 +1,14 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function appPlugin({ name, namePascalCase: Name }: ComponentContext) {
+  return `import { ReactAppOptions } from '@teambit/react';
+
+export const ${Name}App: ReactAppOptions = {
+  name: '${name}',
+  entry: [require.resolve('./${name}.app-root')],
+  prerenderRoutes: ['/'],
+};
+
+export default ${Name}App;
+`;
+}

package/templates/react-app/files/app.ts

@@ -2,7 +2,7 @@ import { ComponentContext } from '@teambit/generator';
 
 export function appFile({ namePascalCase: Name }: ComponentContext) {
   return `import React from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 export function ${Name}App() {
   return (
@@ -10,8 +10,8 @@ export function ${Name}App() {
 
        {/* header component */}
 
-        <Switch>
-          <Route path="/">
+        <Routes>
+          <Route path="/" element={<div>Hello World!!</div>}>
              {/* home page component */}
           </Route>
 

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

@@ -1,21 +1,15 @@
 import { ComponentContext } from '@teambit/generator';
 
-export function docFile({ name }: ComponentContext) {
+export function docFile({ name, componentId, nameCamelCase }: ComponentContext) {
   return `---
-description: Application.
-labels: ['env', 'app']
+description: ${nameCamelCase} application component.
+labels: ['${name}', 'app']
 ---
 
-## Application component
-
-- The app file contains components from react router dom so you can add here all routes for your app and include all your page components.
-- The main runtime file contains what is needed to build your application as a React app.
-- The app root file renders your app to the DOM.
-- The compositions file renders your app so it can be seen in the compositions tab.
-- The aspect file contains the id of the aspect. You will need to modify this with your own org name, scope name and namespace if any, and then add it to your \`workspace.json\` file at root level like:
+Configure the app plugin on your workspace:
 
 \`\`\`json
-"org-name.scope-name/namespace/name": {},
+"${componentId.toString()}": {},
 \`\`\`
 
 ### Run the application

package/templates/react-app/files/index.ts

@@ -1,10 +1,5 @@
 import { ComponentContext } from '@teambit/generator';
 
-export function indexFile({ name, namePascalCase: Name }: ComponentContext) {
-  return `import { ${Name}Aspect } from './${name}.aspect';
-
-export type { ${Name}Main } from './${name}.main.runtime';
-export default ${Name}Aspect;
-export { ${Name}Aspect };
-`;
+export function indexFile({ namePascalCase: Name }: ComponentContext) {
+  return `export { ${Name}App } from './app';`;
 }

package/templates/react-app/index.ts

@@ -1,9 +1,8 @@
 import { ComponentContext, ComponentTemplate } from '@teambit/generator';
+import { appPlugin } from './files/app-plugin';
 import { indexFile } from './files/index';
 import { docFile } from './files/doc';
-import { mainRuntimeFile } from './files/main.runtime';
 import { compositionsFile } from './files/compositions';
-import { aspectFile } from './files/aspect';
 import { appFile } from './files/app';
 import { appRootFile } from './files/app-root';
 
@@ -23,17 +22,13 @@ export const reactAppTemplate: ComponentTemplate = {
         content: docFile(context),
       },
       {
-        relativePath: `${context.name}.main.runtime.ts`,
-        content: mainRuntimeFile(context),
+        relativePath: `${context.name}.react-app.ts`,
+        content: appPlugin(context),
       },
       {
         relativePath: `${context.name}.compositions.tsx`,
         content: compositionsFile(context),
       },
-      {
-        relativePath: `${context.name}.aspect.ts`,
-        content: aspectFile(context),
-      },
       {
         relativePath: `app.tsx`,
         content: appFile(context),

package/templates/react-component/files/component.ts

@@ -4,19 +4,19 @@ export const componentFile = (context: ComponentContext) => {
   const { name, namePascalCase: Name } = context;
   return {
     relativePath: `${name}.tsx`,
-    content: `import React from 'react';
+    content: `import React, { ReactNode } from 'react';
 
 export type ${Name}Props = {
   /**
-   * a text to be rendered in the component.
+   * a node to be rendered in the special component.
    */
-  text: string
+  children?: ReactNode;
 };
 
-export function ${Name}({ text }: ${Name}Props) {
+export function ${Name}({ children }: ${Name}Props) {
   return (
     <div>
-      {text}
+      {children}
     </div>
   );
 }

package/templates/react-component/files/composition.ts

@@ -8,9 +8,11 @@ export const compositionFile = (context: ComponentContext) => {
     content: `import React from 'react';
 import { ${Name} } from './${name}';
 
-export const Basic${Name} = () => (
-  <${Name} text="hello from ${Name}" />
-);
+export const Basic${Name} = () => {
+  return (
+    <${Name}>hello world!</${Name}>
+  );
+}
 `,
   };
 };

package/templates/react-component/files/docs.ts

@@ -6,26 +6,22 @@ export const docsFile = (context: ComponentContext) => {
   return {
     relativePath: `${name}.docs.mdx`,
     content: `---
-description: 'A ${Name} component.'
-labels: ['label1', 'label2', 'label3']
+description: A ${Name} component.
 ---
 
 import { ${Name} } from './${name}';
 
-## React Component for rendering text
-
-A basic div that renders some text
+A component that does something special and renders text in a div.
 
 ### Component usage
 \`\`\`js
-<${Name} text="hello from ${Name}" />
+<${Name}>Hello world!</${Name}>
 \`\`\`
 
-### Using props to customize the text
+### Render hello world!
 
-Modify the text to see it change live:
 \`\`\`js live
-<${Name} text="hello from ${Name}" />
+<${Name}>Hello world!</${Name}>
 \`\`\`
 `,
   };

package/templates/react-component/index.ts

@@ -7,7 +7,6 @@ import { testFile } from './files/test';
 export const reactComponent: ComponentTemplate = {
   name: 'react',
   description: 'a basic react component',
-
   generateFiles: (context: ComponentContext) => {
     const { name, namePascalCase: Name } = context;
     const indexFile = {

package/templates/workspace-common/files/workspace-config.ts

@@ -2,7 +2,7 @@ import { WorkspaceContext } from '@teambit/generator';
 import { getWorkspaceConfigTemplateParsed, stringifyWorkspaceConfig } from '@teambit/config';
 import { parse, assign } from 'comment-json';
 
-export async function workspaceConfig({ name, defaultScope, empty }: WorkspaceContext) {
+export async function workspaceConfig({ name, defaultScope }: WorkspaceContext) {
   const scope = defaultScope || 'company.scope';
   const configParsed = await getWorkspaceConfigTemplateParsed();
   configParsed['teambit.workspace/workspace'].name = name;
@@ -27,28 +27,36 @@ export async function workspaceConfig({ name, defaultScope, empty }: WorkspaceCo
   };
 
   const variants = {
-    'teambit.workspace/variants': empty
-      ? {
-          '*': {
-            'teambit.react/react': {},
-          },
-        }
-      : parse(`{
-      "{ui/**}, {pages/**}": {
-        // uses the custom env
-        "${scope}/envs/my-react": {},
-        // uncomment the line below if you remove the custom env and remove the line above
-        // "teambit.react/react": {},
+    'teambit.workspace/variants': parse(`{
+      /**
+       * configures all components with namespaces 'ui', 'blocks', 'pages' and 'themes'
+       * to use the default React development environment.
+       *
+      */
+      "{ui/**}, {blocks/**}, {pages/**}, {themes/**}": {
+        "teambit.react/react": {}
       },
-      "{themes/**}": {
-        "teambit.react/react": {},
+  
+      /**
+       * configures components with namespaces 'entities', 'modules' and 'functions' to use the 
+       * default NodeJS dev environment.
+      */
+      "{entities/**}, {modules/**}, {functions/**}": {
+        "teambit.harmony/node": {}
       },
+      /**
+       * configures components with namespace 'content' to use the MDX dev environment.
+      */
       "{content/**}": {
-        "teambit.mdx/mdx": {},
-      },
-      "{envs/**}, {extensions/**}": {
-        "teambit.harmony/aspect": {},
+        "teambit.mdx/mdx": {}
       },
+  
+      /**
+       * configures components with namespaces 'envs' and 'aspects' to use the default Aspect development environment.
+      */
+      "{envs/**}, {aspects/**}": {
+        "teambit.harmony/aspect": {}
+      }
     }`),
   };
 

package/dist/templates/react-app/files/aspect.d.ts

@@ -1,2 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-export declare function aspectFile({ name, namePascalCase: Name }: ComponentContext): string;

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

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.aspectFile = aspectFile;
-
-function aspectFile({
-  name,
-  namePascalCase: Name
-}) {
-  return `import { Aspect } from '@teambit/harmony';
-
-export const ${Name}Aspect = Aspect.create({
-  id: 'YourOrgName.YourScopeName/namespace?/${name}'
-});
-`;
-}
-
-//# sourceMappingURL=aspect.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["aspect.ts"],"names":["aspectFile","name","namePascalCase","Name"],"mappings":";;;;;;;AAEO,SAASA,UAAT,CAAoB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,cAAc,EAAEC;AAAxB,CAApB,EAAsE;AAC3E,SAAQ;AACV;AACA,eAAeA,IAAK;AACpB,8CAA8CF,IAAK;AACnD;AACA,CALE;AAMD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function aspectFile({ name, namePascalCase: Name }: ComponentContext) {\n  return `import { Aspect } from '@teambit/harmony';\n\nexport const ${Name}Aspect = Aspect.create({\n  id: 'YourOrgName.YourScopeName/namespace?/${name}'\n});\n`;\n}\n"]}

package/dist/templates/react-app/files/main.runtime.d.ts

@@ -1,2 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-export declare function mainRuntimeFile({ name, namePascalCase: Name }: ComponentContext): string;

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

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mainRuntimeFile = mainRuntimeFile;
-
-function mainRuntimeFile({
-  name,
-  namePascalCase: Name
-}) {
-  return `import { MainRuntime } from '@teambit/cli';
-import { ReactAspect, ReactMain } from '@teambit/react';
-import { ${Name}Aspect } from './${name}.aspect';
-
-export class ${Name}Main {
-  static slots = [];
-  static dependencies = [ReactAspect];
-  static runtime = MainRuntime;
-  static async provider([react]: [ReactMain]) {
-    react.registerReactApp({
-      name: '${name}',
-      entry: ['dist/${name}.app-root']
-    });
-    return new ${Name}Main();
-  }
-}
-${Name}Aspect.addRuntime(${Name}Main);
-`;
-}
-
-//# sourceMappingURL=main.runtime.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["main.runtime.ts"],"names":["mainRuntimeFile","name","namePascalCase","Name"],"mappings":";;;;;;;AAEO,SAASA,eAAT,CAAyB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,cAAc,EAAEC;AAAxB,CAAzB,EAA2E;AAChF,SAAQ;AACV;AACA,WAAWA,IAAK,oBAAmBF,IAAK;AACxC;AACA,eAAeE,IAAK;AACpB;AACA;AACA;AACA;AACA;AACA,eAAeF,IAAK;AACpB,sBAAsBA,IAAK;AAC3B;AACA,iBAAiBE,IAAK;AACtB;AACA;AACA,EAAEA,IAAK,qBAAoBA,IAAK;AAChC,CAjBE;AAkBD","sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport function mainRuntimeFile({ name, namePascalCase: Name }: ComponentContext) {\n  return `import { MainRuntime } from '@teambit/cli';\nimport { ReactAspect, ReactMain } from '@teambit/react';\nimport { ${Name}Aspect } from './${name}.aspect';\n\nexport class ${Name}Main {\n  static slots = [];\n  static dependencies = [ReactAspect];\n  static runtime = MainRuntime;\n  static async provider([react]: [ReactMain]) {\n    react.registerReactApp({\n      name: '${name}',\n      entry: ['dist/${name}.app-root']\n    });\n    return new ${Name}Main();\n  }\n}\n${Name}Aspect.addRuntime(${Name}Main);\n`;\n}\n"]}

package/templates/react-app/files/aspect.ts

@@ -1,10 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function aspectFile({ name, namePascalCase: Name }: ComponentContext) {
-  return `import { Aspect } from '@teambit/harmony';
-
-export const ${Name}Aspect = Aspect.create({
-  id: 'YourOrgName.YourScopeName/namespace?/${name}'
-});
-`;
-}

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

@@ -1,22 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function mainRuntimeFile({ name, namePascalCase: Name }: ComponentContext) {
-  return `import { MainRuntime } from '@teambit/cli';
-import { ReactAspect, ReactMain } from '@teambit/react';
-import { ${Name}Aspect } from './${name}.aspect';
-
-export class ${Name}Main {
-  static slots = [];
-  static dependencies = [ReactAspect];
-  static runtime = MainRuntime;
-  static async provider([react]: [ReactMain]) {
-    react.registerReactApp({
-      name: '${name}',
-      entry: ['dist/${name}.app-root']
-    });
-    return new ${Name}Main();
-  }
-}
-${Name}Aspect.addRuntime(${Name}Main);
-`;
-}