feat(core): add new config option "newJsx"

add possibility to remove react import in favor of new jsx transform

Author: vs-cristian

src/config/Config.ts

@@ -26,6 +26,8 @@ export class Config implements IConfig {
 
   path: string;
 
+  newJsx: boolean;
+
   jsxExt: boolean;
 
   typescript: boolean;
@@ -57,6 +59,7 @@ export class Config implements IConfig {
     // Boolean
 
     this.jsxExt = config.jsxExt ?? this.jsxExt;
+    this.newJsx = config.newJsx ?? this.newJsx;
     this.typescript = config.typescript ?? this.typescript;
     this.wrapFolder = config.wrapFolder ?? this.wrapFolder;
     this.cssModules = config.cssModules ?? this.cssModules;

src/constants/index.ts

@@ -8,6 +8,7 @@ export const DEFAULT_CONFIG: IConfig = {
   styles: 'scss',
   typescript: false,
   jsxExt: true,
+  newJsx: false,
   wrapFolder: true,
   fileNameCase: 'pascal',
   path: 'src/components',

src/core/TemplateBase.ts

@@ -1,5 +1,6 @@
 import * as t from '@babel/types';
 import { ReactHook, Variables } from '@/types';
+import { config } from '@/config';
 import * as c from './temlpates/shared';
 
 /* istanbul ignore next */
@@ -10,7 +11,19 @@ export class TemplateBase {
     this.vars = vars;
   }
 
-  protected getReactImportSpecifier(): t.ImportSpecifier[] {
+  protected getReactImport(): t.ImportDeclaration | null {
+    const reactImportSpecifiers = this.getReactImportSpecifiers();
+
+    if (config.newJsx) {
+      if (reactImportSpecifiers.length) {
+        return c.importNamed(reactImportSpecifiers, 'react');
+      }
+      return null;
+    }
+    return c.importDefault('React', 'react', reactImportSpecifiers);
+  }
+
+  protected getReactImportSpecifiers(): t.ImportSpecifier[] {
     return this.vars.hooks.map(hook => c.importSpec(hook));
   }
 

src/core/temlpates/components/ComponentTemplate.ts

@@ -48,9 +48,10 @@ export class ComponentTemplate
   generateAST() {
     const body: t.Statement[] = [];
 
-    body.push(
-      c.importDefault('React', 'react', this.getReactImportSpecifier())
-    );
+    const reactImport = this.getReactImport();
+    if (reactImport) {
+      body.push(reactImport);
+    }
 
     if (this.hasMod('propTypes')) {
       body.push(c.importDefault('PropTypes', 'prop-types'));

src/core/temlpates/components/ComponentTestTemplate.ts

@@ -16,7 +16,10 @@ export class ComponentTestTemplate
     const componentPath = `./${this.vars.componentName}`;
     const body: t.Statement[] = [];
 
-    body.push(c.importDefault('React', 'react'));
+    const reactImport = this.getReactImport();
+    if (reactImport) {
+      body.push(reactImport);
+    }
     body.push(
       c.importNamed([c.importSpec('render')], '@testing-library/react')
     );

src/core/temlpates/components/HOCTemplate.ts

@@ -13,9 +13,10 @@ export class HOCTemplate extends TemplateBase implements Template {
   generateAST(): t.File {
     const body: t.Statement[] = [];
 
-    body.push(
-      c.importDefault('React', 'react', this.getReactImportSpecifier())
-    );
+    const reactImport = this.getReactImport();
+    if (reactImport) {
+      body.push(reactImport);
+    }
     body.push(t.emptyStatement());
 
     if (this.hasHook('useReducer')) {

src/core/temlpates/components/HookTemplate.ts

@@ -13,12 +13,11 @@ export class HookTemplate extends TemplateBase implements Template {
   generateAST(): t.File {
     const body: t.Statement[] = [];
 
-    const reactImportSpecifiers = this.getReactImportSpecifier();
-
-    if (reactImportSpecifiers.length) {
-      body.push(c.importNamed(reactImportSpecifiers, 'react'));
-      body.push(t.emptyStatement());
+    const reactImport = this.getReactImport();
+    if (reactImport) {
+      body.push(reactImport);
     }
+    body.push(t.emptyStatement());
 
     if (this.hasHook('useReducer')) {
       body.push(c.useReducerInit());

src/types/types.ts

@@ -14,6 +14,7 @@ export type ReactHooks = ReactHook[];
 export interface IConfig {
   styles?: StyleFormats;
   typescript?: boolean;
+  newJsx?: boolean;
   jsxExt?: boolean;
   fileNameCase?: FileNameCase;
   path: string;