Skip to content

Release/1.4.0 rc2 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 15 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ npx @dreamsicle.io/create-component [options] <name>

## Getting started

All that is necessary to start using the tool is a component name `name`, which corresponds to a pascal-cased string that will serve as the component name, and a relative `--path`/`-p` that contains a `_Template` directory.
All that is necessary to start using the tool is a component name `name`, which corresponds to a pascal-cased string that will serve as the component name, and a relative `--path`/`-p` that contains a `_Template` directory (or other directory as specified by the `-t`/`--templateDir` option).

### 1. Install

Expand All @@ -26,7 +26,7 @@ npm install --save-dev @dreamsicle.io/create-component

While it is possible to run this script directly, it is recommended that you add scripts to your `package.json` file in order to make using this tool easier and faster. The app structure isn't likely to change in any given project often, so this will help in making the usage more consistent.

The scripts `name` arg can be passed through to the script when running it through `npm`, therefore all that is recommended is to set up a script corresponding to each path that contains a `_Template` directory.
The scripts `name` arg can be passed through to the script when running it through `npm`, therefore all that is recommended is to set up a script corresponding to each path that contains a `_Template` directory (or other directory as specified by the `-t`/`--templateDir` option).

**Setting up scripts is simple ― consider an application with the following structure:**

Expand Down Expand Up @@ -55,6 +55,8 @@ The scripts `name` arg can be passed through to the script when running it throu

> **Note:** If your templates live outside of the directory you want them to be created in, use the `-o` or `--outputPath` option to set the output path.

> **Note:** If you want the template directory to have a different name than `_Template` for stylistic or conflict reasons, use the `-t`/`--templateDir` option.

### 3. Run the scripts

Given the scripts created in step #2 above, run them as follows ― being sure to provide a component name after the script name. These commands will clone the `_Template` directory in each of the corresponding project directories and will perform replacements both on the file names themselves as well as on the text content within the files.
Expand Down Expand Up @@ -82,7 +84,9 @@ The following table documents which text nodes will be operated on when the `_Te
| `_version` | The root package's version | `1.0.0` | ✔️ | ❌ |
| `_date` | The date as `m/d/yyyy` | `3/23/2022` | ✔️ | ❌ |

> **Note:** Version 2.0.0 will provide an API for adding custom replacements to the script.
> **Note:** The `_Template` and `_template` replacements are not affected by the `-t`/`--templateDir` option.

> **Coming soon:** Version 2.0.0 will provide an API for adding custom replacements to the script.

## Logging

Expand Down Expand Up @@ -114,17 +118,18 @@ npx @dreamsicle.io/create-component --help
**The above would ouput the following help information:**

```
Usage: npx @dreamsicle.io/create-component [options] <name>
Usage: @dreamsicle.io/create-component [options] <name>

Create a templated component structure.

Arguments:
name The name of the component
name The name of the component

Options:
-V, --version output the version number
-p, --path <path> The relative path where the template to be used lives
-o, --outputPath [path] The relative path where the component should be placed, if different from the template path
-v, --verbose Output extra information to the console (default: false)
-h, --help display help for command
-V, --version output the version number
-p, --path <string> The relative path where the template to be used lives
-o, --outputPath [string] The relative path where the component should be placed, if different from the template path
-t, --templateDir <string> The name of the template directory (default: "_Template")
-v, --verbose Output extra information to the console (default: false)
-h, --help display help for command
```
47 changes: 47 additions & 0 deletions examples/components/_CustomTemplate/_Template.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// @ts-nocheck

import React from 'react';
import classNames from 'classnames';
import './_Template.scss';

export interface Props {
id?: string;
className?: string;
children?: React.ReactNode;
}

export interface State {}

/**
* Components / _Template
*
* Describe the custom `_Template` component's use cases here.
* Include what it does, why it was developed, and why
* it's awesome.
*
* @since _version Added by the `create-component` script on `_date`
*/
class _Template extends React.Component<Props, State> {
static defaultProps: Props = {};

constructor(props: Props) {
super(props);
this.state = {};
}

render() {
const { id, className, children } = this.props;
const {} = this.state;
const containerClass = classNames('_Template', className);
return (
<div id={id} className={containerClass}>
<h3>
Hello from the <code>_Template</code> component.
</h3>
{children}
</div>
);
}
}

export default _Template;
10 changes: 10 additions & 0 deletions examples/components/_CustomTemplate/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// @ts-nocheck

/**
* This is a test `_Template` util functions file.
*
* @since _version Added on `_date`
*/
export function _TemplateUtil() {
console.log(`Hello from the _Template utils file!`);
}
2 changes: 2 additions & 0 deletions examples/components/_Template/_Template.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

@import '../../mixins';

._Template {
Expand Down
2 changes: 2 additions & 0 deletions examples/components/_Template/_Template.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import _Template from './_Template';
Expand Down
2 changes: 2 additions & 0 deletions examples/components/_Template/_Template.test.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

import React from 'react';
import { render } from '@testing-library/react';
import _Template from './_Template';
Expand Down
2 changes: 2 additions & 0 deletions examples/components/_Template/_Template.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

import React from 'react';
import classNames from 'classnames';
import './_Template.scss';
Expand Down
2 changes: 2 additions & 0 deletions examples/components/_Template/unmodified.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

/**
* This tests an unmodified file.
*/
Expand Down
2 changes: 2 additions & 0 deletions examples/components/_Template/utils/_Template.utils.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

/**
* This is a test `_Template` util class file.
*
Expand Down
2 changes: 2 additions & 0 deletions examples/components/_Template/utils/_template-utils.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

/**
* This is a test `_Template` util functions file.
*
Expand Down
2 changes: 2 additions & 0 deletions examples/components/_Template/utils/nested-unmodified.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

/**
* This tests a nested unmodified file.
*/
Expand Down
18 changes: 13 additions & 5 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import zod from 'zod';
* @typedef {object} Options
* @property {string} path
* @property {string} outputPath
* @property {string} templateDir
* @property {boolean} verbose
*/

Expand Down Expand Up @@ -99,7 +100,7 @@ let options;
const program = new Command();
program
.version(pkg.version)
.name('npx @dreamsicle.io/create-component')
.name('@dreamsicle.io/create-component')
.description('Create a templated component structure.')
// Construct arguments.
.argument(
Expand All @@ -112,19 +113,27 @@ program
)
// Construct options.
.option(
'-p, --path <path>',
'-p, --path <string>',
'The relative path where the template to be used lives',
(value) => {
return zod.string().trim().safeParse(value).data || '';
}
)
.option(
'-o, --outputPath [path]',
'-o, --outputPath [string]',
'The relative path where the component should be placed, if different from the template path',
(value) => {
return zod.string().trim().safeParse(value).data || '';
}
)
.option(
'-t, --templateDir <string>',
'The name of the template directory',
(value) => {
return zod.string().trim().safeParse(value).data || '';
},
'_Template'
)
.option(
'-v, --verbose',
'Output extra information to the console',
Expand All @@ -135,7 +144,7 @@ program
// Initialize args and options.
options = { ...opts };
componentName = name;
srcPath = path.resolve(options.path, '_Template');
srcPath = path.resolve(options.path, options.templateDir);
tmpPath = path.resolve(tmpDirPath, componentName);
destPath = path.resolve(options.outputPath || options.path, componentName);
// Run creation.
Expand Down Expand Up @@ -254,7 +263,6 @@ function validate() {
}
// Check if the component directory already exists.
if (fs.existsSync(destPath)) {

throw new Error(`There is already a directory at "${path.relative(cwd, destPath)}"`);
}
}
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dreamsicle.io/create-component",
"version": "2.0.0",
"version": "1.4.0",
"type": "module",
"main": "index.js",
"license": "MIT",
Expand Down