@a9g/plop-generator-react-atomic-component 中文文档教程

Question

plop generator react atomic component

自以为是的 plop 生成器，用于 打字稿 atomic react 组件。

Installation

这个包托管在 npm。

npm install --save-dev @a9g/plop-generator-react-atomic-component

Usage

首先，创建两个接口以包含类名或样式（取决于您是否使用 react-native）以将它们包含到您的 props 中。 h

import { StyleProp, ViewStyle } from "react-native";

export interface PropsWithClassName {
  className?: string;
}

export interface PropsWithStyle {
  style?: StyleProp<ViewStyle>;
}

之后，确保安装了 plop。 然后，将以下行添加到您的 plopfile.js。

const atomicGenerator =
  require("@a9g/plop-generator-react-atomic-component").default;

const defaultConfig = {
  createIndex: true,
  functional: true,
  basePath: "src/ui/components",
  withClassnameInterfaceImportPath: "/framework/ui", //make sure to configure this path
  withStyleInterfaceImportPath: "/framework/ui",
  tests: true,
  stories: true,
  styledComponents: true,
  useNative: false, // native and macro can't be used together
  useMacro: false
};

atomicGenerator(plop, defaultConfig);

所以你的 plopfile.js 看起来像这样

const atomicGenerator =
  require("@a9g/plop-generator-react-atomic-component").default;

const defaultConfig = {
  createIndex: true,
  functional: true,
  basePath: "src/ui/components",
  withClassnameInterfaceImportPath: "/framework/ui", //make sure to configure this path
  withStyleInterfaceImportPath: "/framework/ui",
  tests: true,
  stories: true,
  styledComponents: true,
  useNative: false,
  useMacro: false
};

const config = plop => {
  atomicGenerator(plop, defaultConfig);
};

module.exports = config;

现在你可以访问 atomic-component 生成器，如下所示。

plop atomic-component

src
└── ui
   └── components
      └── $Type
         └── $ComponentName
            ├── $ComponentName.tsx
            ├── $ComponentName.test.tsx (optional)
            ├── $ComponentName.stories.tsx (optional)
            ├── $ComponentName.styles.tsx (optional)
            └── index.tsx (optional)

Configuration

export interface GeneratorConfig {
  createIndex: boolean; //create an index file
  functional: boolean; //should the template be functional or class based?
  basePath: string; //where do you want to store the generated files
  withClassnameInterfaceImportPath: string; //from where can we import the classname interface
  withStyleInterfaceImportPath: string; //from where can we import the styles interface
  tests: boolean; //create test files
  stories: boolean; //create story files
  styledComponents: boolean; //use styled components
  useNative: boolean; //use react native
  useMacro: boolean; // use styled components macro import. native and macro can't be used together
  templateIndex?: string; //path to the corresponding files, need to be an absolute path
  templateStory?: string;
  templateStyles?: string;
  templateTest?: string;
  templateComponentFunctional?: string;
  templateComponentClassBased?: string;
}

Questions

通过提交 问题

License

MIT 报告错误或提供反馈，请参阅 许可证.md