Skip to content

Commit

Permalink
Merge pull request #2 from Omar-Belghaouti/feat/templates
Browse files Browse the repository at this point in the history 
Feature: creating files with user defined templates
  • Loading branch information
@omdxp
omdxp authored Sep 4, 2021
2 parents 3cd485a + a563004 commit bbe7629
Show file tree
Hide file tree
Showing 5 changed files with 253 additions and 61 deletions.
73 changes: 60 additions & 13 deletions bin/create/component/functions/create-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ const { componentTemplateJs, componentTemplateTs } = require("../templates");
* @param {boolean} js - if the component is a javascript component.
* @param {boolean} ts - if the component is a typescript component.
* @param {string} folder - the folder of the component.
* @version 1.0.0
* @param {string} template - the template to create the component.
* @version 1.1.0
* @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
*/
exports.createComponent = (componentName, js, ts, folder) => {
exports.createComponent = (componentName, js, ts, folder, template) => {
if (ts) {
const path =
folder === ""
Expand All @@ -20,14 +21,37 @@ exports.createComponent = (componentName, js, ts, folder) => {
if (fs.existsSync(path)) {
console.log(`${path} already exist`);
} else {
fs.writeFile(path, componentTemplateTs(componentName), (err) => {
if (err) {
console.log(err);
console.log(`Unable to create ${componentName} component`);
// check if template file exist
if (template !== "") {
const temp = fs
.readdirSync(".template")
.filter((file) => file.split(".")[0] === template)[0];
if (temp) {
const file = fs.readFileSync(`.template/${temp}`, {
encoding: "utf8",
flag: "r",
});
fs.writeFile(path, file, (err) => {
if (err) {
console.log(err);
console.log(`Unable to create ${componentName} component`);
} else {
console.log(`${path} created`);
}
});
} else {
console.log(`${path} created`);
console.log(`.template/${template} file does not exist`);
}
});
} else {
fs.writeFile(path, componentTemplateTs(componentName), (err) => {
if (err) {
console.log(err);
console.log(`Unable to create ${componentName} component`);
} else {
console.log(`${path} created`);
}
});
}
}
} else {
const path =
Expand All @@ -37,13 +61,36 @@ exports.createComponent = (componentName, js, ts, folder) => {
if (fs.existsSync(path)) {
console.log(`${path} already exist`);
} else {
fs.writeFile(path, componentTemplateJs(componentName), (err) => {
if (err) {
console.log(`Unable to create ${componentName} component`);
// check if template file exist
if (template !== "") {
const temp = fs
.readdirSync(".template")
.filter((file) => file.split(".")[0] === template)[0];
if (temp) {
const file = fs.readFileSync(`.template/${temp}`, {
encoding: "utf8",
flag: "r",
});
fs.writeFile(path, file, (err) => {
if (err) {
console.log(err);
console.log(`Unable to create ${componentName} component`);
} else {
console.log(`${path} created`);
}
});
} else {
console.log(`${path} created`);
console.log(`.template/${template} file does not exist`);
}
});
} else {
fs.writeFile(path, componentTemplateJs(componentName), (err) => {
if (err) {
console.log(`Unable to create ${componentName} component`);
} else {
console.log(`${path} created`);
}
});
}
}
}
};
163 changes: 121 additions & 42 deletions bin/create/page/functions/create-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ const {
* @param {boolean} js - if the page is a javascript page.
* @param {boolean} ts - if the page is a typescript page.
* @param {string} folder - the folder of the page.
* @version 1.0.0
* @param {string} template - the template to create the page component.
* @version 1.1.0
* @author [Omar Belghaouti](https://github.com/Omar-Belghaouti)
*/
exports.createPage = (pageName, js, ts, folder) => {
exports.createPage = (pageName, js, ts, folder, template) => {
const path =
folder === ""
? `src/pages/${pageName.toLowerCase()}/`
Expand All @@ -25,51 +26,129 @@ exports.createPage = (pageName, js, ts, folder) => {
console.log(`${path} already exist`);
} else {
if (ts) {
fs.writeFile(
`${path}ui/${pageName.toLowerCase()}-ui.tsx`,
pageTemplateTs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page ui`);
} else {
console.log(`${path}ui/${pageName.toLowerCase()}-ui.tsx created`);
}
// check if template file exist
if (template !== "") {
const temp = fs
.readdirSync(".template")
.filter((file) => file.split(".")[0] === template)[0];
if (temp) {
const file = fs.readFileSync(`.template/${temp}`, {
encoding: "utf8",
flag: "r",
});
fs.writeFile(
`${path}ui/${pageName.toLowerCase()}-ui.tsx`,
file,
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page ui`);
} else {
console.log(
`${path}ui/${pageName.toLowerCase()}-ui.tsx created`
);
}
}
);
fs.writeFile(
`${path}functions/index.ts`,
pageFunctionTemplateTs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page functions`);
} else {
console.log(`${path}functions/index.ts created`);
}
}
);
} else {
console.log(`.template/${template} file does not exist`);
}
);
fs.writeFile(
`${path}functions/index.ts`,
pageFunctionTemplateTs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page functions`);
} else {
console.log(`${path}functions/index.ts created`);
} else {
fs.writeFile(
`${path}ui/${pageName.toLowerCase()}-ui.tsx`,
pageTemplateTs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page ui`);
} else {
console.log(`${path}ui/${pageName.toLowerCase()}-ui.tsx created`);
}
}
}
);
} else {
fs.writeFile(
`${path}ui/${pageName.toLowerCase()}-ui.jsx`,
pageTemplateJs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page ui`);
} else {
console.log(`${path}ui/${pageName.toLowerCase()}-ui.jsx created`);
);
fs.writeFile(
`${path}functions/index.ts`,
pageFunctionTemplateTs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page functions`);
} else {
console.log(`${path}functions/index.ts created`);
}
}
);
}
} else {
// check if template file exist
if (template !== "") {
const temp = fs
.readdirSync(".template")
.filter((file) => file.split(".")[0] === template)[0];
if (temp) {
const file = fs.readFileSync(`.template/${temp}`, {
encoding: "utf8",
flag: "r",
});
fs.writeFile(
`${path}ui/${pageName.toLowerCase()}-ui.jsx`,
file,
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page ui`);
} else {
console.log(
`${path}ui/${pageName.toLowerCase()}-ui.jsx created`
);
}
}
);
fs.writeFile(
`${path}functions/index.js`,
pageFunctionTemplateJs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page functions`);
} else {
console.log(`${path}functions/index.js created`);
}
}
);
} else {
console.log(`.template/${template} file does not exist`);
}
);
fs.writeFile(
`${path}functions/index.js`,
pageFunctionTemplateJs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page functions`);
} else {
console.log(`${path}functions/index.js created`);
} else {
fs.writeFile(
`${path}ui/${pageName.toLowerCase()}-ui.jsx`,
pageTemplateJs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page ui`);
} else {
console.log(`${path}ui/${pageName.toLowerCase()}-ui.jsx created`);
}
}
}
);
);
fs.writeFile(
`${path}functions/index.js`,
pageFunctionTemplateJs(pageName),
(err) => {
if (err) {
console.log(`Unable to create ${pageName} page functions`);
} else {
console.log(`${path}functions/index.js created`);
}
}
);
}
}
}
};
14 changes: 11 additions & 3 deletions bin/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,23 @@ yargs
type: "string",
default: "",
describe: "to create files in a specific folder",
})
.option("t", {
alias: "template",
type: "string",
default: "",
describe: "to create files with user defined templates",
});
},
(argv) => {
if (fs.existsSync("package.json")) {
const { component, page, redux, js, ts, folder } = argv;
const { component, page, redux, js, ts, folder, template } = argv;
if (component) {
component.forEach((c) => createComponent(c, js, ts, folder));
component.forEach((c) =>
createComponent(c, js, ts, folder, template)
);
} else if (page) {
page.forEach((p) => createPage(p, js, ts, folder));
page.forEach((p) => createPage(p, js, ts, folder, template));
} else if (redux) {
createRedux(redux, js, ts);
} else {
Expand Down
59 changes: 56 additions & 3 deletions docs/DOCS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
2. [Creating files](#creating-files)

- 1. [Creating components](#creating-components)
- 2. [Creating pages](#creating-pages)
- 3. [Creating redux implementation](#creating-redux-implementation)
- 3. [Creating pages](#creating-pages)
- 4. [Creating components and pages with templates](#creating-components-and-pages-with-templates)
- 5. [Creating redux implementation](#creating-redux-implementation)

3. [Deleting files](#deleting-files)

Expand All @@ -27,7 +28,7 @@
- You can run `rhc --help` to see the available commands.
- By default `rhc` helps you create components, pages and redux implementation in JavaScript (so `--js` is optional).
- If you want to create components or pages in TypeScript, all what you need to do is to add the option `--ts` at the end of your command line.
- You don't have to specify the language option in `delete` nor in `combine` mode.
- You don't have to specify the language nor template option in `delete` nor in `combine` mode.

## Creating files

Expand Down Expand Up @@ -73,6 +74,58 @@ rhc create -p <page_name_1> <page_name_2> ...
rhc create -p <page_name_1> <page_name_2> ... -f <folder>
```

### Creating components and pages with templates

- Sometimes you want to create components with templates that you create, well you can do it in `rhc` by following these steps:

1 - First thing to do is to create a `.template` folder at the root of your react project.

2 - Inside the `.template` folder you can add your template, for example `componentWithUseEffect.tsx` (the file extension doesn't matter so it could be `*.jsx`, `*.js` or `*.tsx`):

```tsx
import { useEffect } from "react";

export default function Component() {
useEffect(() => {}, []);

return <div>Hello, World!</div>;
}
```

- There is a restriction in naming these templates which is you should not put dots (`.`) between the name, like this (`component.WithUseEffect.jsx`). It should only contain one dot that makes the extension file like we're doing above.

3 - After creating your template you can use them to create components or pages as the following:

```sh
rhc create -c <component_name> --template <template_name>
```

As for our example it can be used like this:

```sh
rhc create -c comp --template componentWithUseEffect
```

- This will create `comp.jsx` component at the `src/components/` folder, and the file will contain the template as written above.

- It can also be used to create the component pages like this:

```sh
rhc create -p page1 --template componentWithUseEffect
```

- And of course, you can create multiple components or pages with the same template like this:

```sh
rhc create -c <component_name_1> <component_name_2> ... --template <template_name>
```

- The `--template` option can be shortened by `-t`.

- You can always create with TypeScript implementation by adding the `--ts` option at the end of the command line.

- And you can also create your files in a specific folder usin `-f` (or `--folder`) option.

### Creating redux implementation

- To create a redux implementation run
Expand Down
Loading

0 comments on commit bbe7629

Please sign in to comment.