giuliano1993 / make-js-component Goto Github PK

Following the model used for VUe advanced ( PR #78 ), we can create Advanced for Qwik to allow user to "compose" their component with the parts they prefer

Currently, when a new component is created in the same directory and with the same name (and extension clearly) as one that already exists, the latter is overwritten without any kind of warning.
I think it would be useful to introduce a warning if you are trying to overwrite an already existing component and ask for confirmation whether or not you intend to proceed.

We might need some default set for each framework, in order to skip the post framework selections step with a flag.

This issue is about picking the defaults for React

We might need some default set for each framework, in order to skip the post framework selections step with a flag.

This issue is about picking the defaults for Qwik

The dash character should be permitted in my opinion

Add the --folder flag with commander to have the possibility to pass the subfolder we want to create the component in.

Add the possibility to create an Astro component

Add styleUrls to template component

We might need some default set for each framework, in order to skip the post framework selections step with a flag.

This issue is about picking the defaults for Svelte

Some tests should be implemented to check the maintainability and functionality of the package so it doesn't break while growing and being developed.
I mean also to implement github actions the use tests before allowing merging

That would be cool, instead of going necessarily trough all the wizard, to be able to give an optional argument after the npx make-js-component in order to skip the framework selection step and go right into the options

the command would then look like
npx make-js-command [frameworkname]

We might need some default set for each framework, in order to skip the post framework selections step with a flag.

This issue is about picking the defaults for vue

It would be nice to have some styling option on React component creation, for example:

• Tailwind (just adding some basic classes)
• Styled component

Reproduction steps

When starting the process, it now allows to go on after empty component name. That should be avoided

Do you want to work on this issue?

No

Following the model used for VUe advanced ( PR #78 ), we can create Advanced for React to allow user to "compose" their component with the parts they prefer

We could use a [-d --default] flag that applies all the defaults for the framework, so that we can fully skip the framework wizard and directly have the component

Add template and link spec.ts to test component

Writing the documentation on how to add a new framework, so:

• adding it to the wizard
• creating the stubs

When the component creation is complete, ask the user if they want to create another component.
This would allow to directly run again the command and create more component at once

We could add a --multiple flag that, if checked, at the end of each component creation asks the user if he wants to exit.
Otherwise the creator command will be launched once again.

Doing the user is able to easily create more components in a row

Hi, I have already contributed to the project by implementing the React CSS Module feature.

I am excited about the project and really like it, but to be honest, I found the code to be somewhat procedural and, at times, repetitive and confusing.
For example, there are too many nested if/else statements, or repeated code between JS/TS in React components, and there are no comments in the code.

If you agree, I already have ideas on how to make it more extensible and open to modifications.

I believe this choice will completely influence the architecture of the library, so it would be appropriate to suspend the implementation of new features until the refactoring is done.
I also think that now is the right time, especially since the project is still small and there is no documentation yet.

I can put my ideas into action quickly, but with one condition: I am not very confident with TypeScript, so I would only handle the JavaScript part.

What do you think?

Reproduction steps

When starting the process, it now allows to use whatever character in component name. That should be avoided and only letters shall be allowed

Do you want to work on this issue?

No

It would be nice to have, as a styling option for react, the possibility use modules styling

Reproduction steps

When I try to save the component into a subfolder inside a subfolder, the script gives a not handled exception if the second subfolder doesn't exist
Instead, if I give only a folder that doesn't exist, it creates it without problems

? Give a name to your component test1
? Custom path under the component folder for saving your component test1/test1
? Pick a framework to create the component for React
? Do you want to use Typescript? No
? Do you want to use any CSS framework? No
node:internal/fs/utils:347
    throw err;
    ^

Error: ENOENT: no such file or directory, mkdir 'src\components\test1\test1'
    at Module.mkdirSync (node:fs:1396:3)
    at file:[...]src/utils/utils.mjs:16:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  errno: -4058,
  syscall: 'mkdir',
  code: 'ENOENT',
  path: 'src\\components\\test1\\test1'
}

Reproduction steps

The input in wizard.mts have no type and could have string.

Also the whole const wizard could have a type return like Promise<Answers>

### Do you want to work on this issue?

Yes

It would be nice to have some styling option on React component creation, for example:

• Tailwind (just adding some basic classes)
• Styled component
• Modules (the more difficult one because it involves another file creation)

That would be cool, instead of going necessarily trough all the wizard, to be able to give an optional argument after the npx make-js-component in order to skip the component name writing step and go right into the next options

the command would then look like
npx make-js-command --name=[componentName]

Readme.md file could be improved, especially we should describe the options available for each framework

Reproduction steps

Give a name to your component test
Custom path for the component (default: src/components) 
Pick a framework to create the component for React
Do you want to use Typescript? No (or Yes)
Do you want to use any CSS framework? Styled Components

Do you want to work on this issue?

Yes

We need a comprehensive an cohese documentation about working directly with flags.
At the moment we have 3 flags
--name <name> allows to specify the component name
-f <framework> let you specify one of the available frameworks ( at the moment of writing Vue, React, Angular, Qwik, Svelte and Astro)
--folder <path> the components subfolder in which add the component. The folder is created if it doesn't exsists

At the moment the extension defaults to .vue, since originally that package generated only vue components; should be dynamic, depending on the framework of choice

Following the model used for VUe advanced ( PR #78 ), we can create Advanced for Svelte to allow user to "compose" their component with the parts they prefer

Using a setup like inquirer can be more friendly than using all the options when defining a component, and easier to remember

Not an expert of angular, so if anyone knows some more characteristics a basic Angular component have you're welcome to take on this issue and work on it! 😄

Following the model used for VUe advanced ( PR #78 ), we can create Advanced for Angular to allow user to "compose" their component with the parts they prefer

Nuxt framework uses Vue as its frontend.
The components won't change from a normal vue app, but the components shall be created into the ./components folder instead of the ./src/components folder.
Add a question to the Vue installer to ask if the user is working in a vue app or in a nuxt one

We could use a subcommand to implement a custom configurations file to define things such the default components folder or some other default ( like composition or option API for vue or typescript use on each component)