cvarisco / create-component-app Goto Github PK
View Code? Open in Web Editor NEWTool to generate different types of React components from the terminal. π»
License: MIT License
Tool to generate different types of React components from the terminal. π»
License: MIT License
It would be great to don't call the script in the directory where .ccarc
is but rather call it from some child directory eg. src/main/components
.
What create-component-app can do then is that he will look for .ccarc
file starting from current directory to every parent directory (so ..
,../..
etc) till he find config file (similarly how node look for node_modules dir).
When config file will be found then you can assume that path
param is not needed. Script should create files where it has been executed.
This may be quite a change but I think it will be more usable then passing everytime --path parameter (which btw is not that bad - but for sure can be better).
What do you think about that?
As a user, I want use create-component-app in my tools / node-application.
Make exportable the function to create components passing the config object.
Personally, I think the CLI should be create-component
as it's not making an app but understand you adopted it from react-create-app
and create-component
was already taken.
Would you be open to supporting both, by just adding another bin path in package.json ?
Add a flag to add flow annotations which would enable flow at the top of the file and put in some default flow type annotations like so:
// @flow
type Props = {}
class SomeClass extends PureComponent {
constructor(props: Props) {
super(props)
}
}
If I use a template , it's work well, but if I don't use a template, it will raise an error
$ create-component-app
[Info] No config file detected, using defaults.
? Do you wanna choose a template No
? What kind of components do you want to create ? stateless
? What is the name of the component ? ComponentName
? Do you want to connect the component to redux ? No
? Do you want an index file on your folder ? No
? What kind of extension do you use for js files ? js
? What kind of extension do you use for style file ? css
? Do you want a storybook file? Yes
? Do you want a test file? Yes
? Where do you want create your component ? ./src/components
[Error] Cannot convert undefined or null to object
The node verison:
$ node -v
v8.9.0
If I have a components/
directory and want to just create a file in that directory when running the script can I do that with the current implementation?
so if I run create-component-app -t container
and call it NavContainer
can I get it to create it under components/NavContainer.js
instead of components/NavContainer/NavContainer.js
I'd like to run generator providing path
parameter from commandline (not from config file).
It would be great to have ability to provide almost every parameter from commandline so that script can be easily integrated with IDEs.
When we add an .ccarc
file to pass configs, this file is not being read.
This is a really great tool that you've built! I'm hoping to start using this with the team I work with. It appears that your latest bug fix from a couple weeks ago dealing with duplicate extensions for custom templates isn't in the latest release available on npm?
If you're already aware of this, then I apologize in advance for opening this issue! And thank you for contributing your time to making this π
I'm trying to use create-component-app for some of the other templated files I create. Specifically redux actions, reducers, and selectors. I'd like to be able to use the COMPONENT_NAME replacement key with different casing. Currently it just uses whatever I've entered as the component name.
What I'd love to be able to do is:
ComponentName
on the command line_component_name_
for an lcased
version of the ComponentName
_COMPONENT_NAME_
for a ucased
version of the ComponentName
_Component_Name_
for a raw output of the ComponentName
templateName
config key is supposed to point toEISDIR: illegal operation on a directory, read
I REALLY like this project and as I onboard a few new devs I want to enforce the code standards by giving them templates to work with. Help me help them.
Given input:
- What kind of components do you want to create ? stateless
- What is the name of the component ? Foo
- Do you want to connect the component to redux ? Yes
- Do you want an index file on your folder ? Yes
- What kind of extension do you use for js files ? js
- What kind of extension do you use for css files ? css
- Where do you want create your component ? ./src/components
Output index.js:
import template from './Foo.js'
import { connect } from 'react-redux';
const mapDispatchToProps = (dispatch, ownProps) => {
return {}
}
const mapStateToProps = (state, ownProps) => {
return {};
};
const Foo = connect(
mapStateToProps,
mapDispatchToProps,
)(Foo);
export default Foo
Should connect
connect template
instead? Am I missing something?
Is it possible to also write templates for index.js
, template.stories.js
and template.spec.js
? When I try it with my current templates it does not output it correctly or am I doing it wrong?
I can't find that much docs on how to do this, nor how to use the COMPONENT_NAME
in an import COMPONENT_NAME from './COMPONENT_NAME.js
It would be great if the new component is already linted with the rules of the project !
thank you @cedmax for the tip!
This is a great little tool and I'd love to use it...
Our current setup dictates test files in a subfolder called __test__
So the tree is as follows:
template
β index.js
β COMPONENT_NAME.jsx
β SubComponent.jsx
β
ββββ__test__
β β COMPONENT_NAME.spec.jsx
β β SubComponent.spec.jsx
β
ββββ__stories__
β COMPONENT_NAME.stories.jsx
If I create a template like this the follwing error occurs:
(node:672) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: EISDIR: illegal operation on a directory, read
(node:672) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
index.js
Also, the path option in the config file seems to have no effect when using templates, as it resets to ./src/components
when run.
.tsx type file
typescript component
I think to make this really useful, editor integrations need to be coded. I realize this is easier said than done given the languages you usually code within these platforms. But I don't think it provides a huge benefit to code snippets without it; or at the very least as much as a better alternative as it could.
TypeScript is viewed as a viable means of type enforcement in React apps. All the components in my project are .tsx, and all the store files are .ts. I'd try out create-component-app if it had this functionality and it shouldn't be too difficult to implement.
I have created a .ccarc
file in the root of my project folder with the following config:
{
"path": "./src/components",
"jsExtension": "js",
"cssExtension": "scss",
"includeTests": true,
"includeStories": true
}
The problem is that the cli doesn't seem to apply that config.
I run [email protected] with [email protected]. I do not have a global config file.
Instead of having ${COMPONENT_NAME}.propTypes = {}
it would be nice if it was
class ${COMPONENT_NAME} extends Component {
static propTypes = {};
static defaultProps = {};
//.....
}
The inspiration for this feature is oh my zsh plugins mgmt
templatesDirPath
- a custom path to the user custom templates folder.create-component-app -t templateName
templates
- a list of used templates (with a default)templates
and will validate them with predefinedTemplates
and templatesDirPath
.https://github.com/puemos/create-component-app
https://github.com/puemos/create-component-app/blob/master/docs/CUSTOM-TEMPLATES.md
I execute create-component-app without config.json.
The following code was generated.
I want to name it COMPONENT_NAME.css.
import React from 'react'
import PropTypes from 'prop-types'
import styles from './undefined.css' // <- undefined.css :(
const Foo = ({}) => (
<div className="Foo"></div>
);
Foo.propTypes = {}
Foo.defaultProps = {}
export default Foo
The convention I use for naming tests in my project is COMPONENT_NAME.test.js
. The script generates test files in the format of test.COMPONENT_NAME.js
.
Do you think the format should be exposed as a .ccarc
option?
Hi,
Thanks for this tool that will change the way we work.
I like your generator (without template) but I would like to have the ability to have semicolons after statements.
Do you think it would be possible to give that possibility as an additional question?
Thanks in advance for considering this
Adds the ability to the user to insert the file name.
Something like this in the config:
{
...
file_name: {
test: 'COMPONENT_NAME.test.js',
etc
}
}
thanks to @viktorbergehall
Hi!
The following 'session':
~/skyscanner (master*) $ create-component-app
[Info] No config file detected, using defaults.
? Do you wanna choose a template No
? What kind of components do you want to create ? class
? What is the name of the component ? Foo
? Do you want to connect the component to redux ? No
? Do you want an index file on your folder ? Yes
? What kind of extension do you use for js files ? js
? What kind of extension do you use for style file ? scss
? Do you want a storybook file? No
? Do you want a test file? No
? Where do you want create your component ? ./client/src/components
[Info] Your component is created!
generated this:
class Foo extends Component {
constructor(props) {
super(props)
}
null
render() {
return (
<div className="Foo"></div>
);
}
}
See the null
? Seems like a little issue.
Cheers - Victor
Hi again!
I tried setting "componentMethods": ["render"],
in my .ccarc.
This results in the following:
class template extends Component {
constructor(props) {
super(props)
}
Β Β Β Β render(){}
render() {
return (
<div className="template"></div>
);
}
}
I see two issues here:
render
methodconstructor
. Intuition would tell me that for a ["render"]
option, that method shouldn't be emitted. It could be emitted for []
(i.e. by default), and for ["constructor", "shouldComponentUpdate"]
(i.e. if explicitly specified).Cheers - Victor
It would be great if it is possible to adds all (for now) component lifecycle methods on class and pure component template.
Hi, great project thanks! ππ»
I'm having an issue with using the config file. I've created it in the project root and would like to use includeStories
:
config.json
{
"path": "./src/components",
"includeStories": true
}
When I run create-component-app
or create-component-app --config config.json
I get the message:
[Info] No config file detected, using defaults.
[Info] Your component is created!
Oddly, if I break the json
formatting I get an Error, so it looks to be finding it.
ΰΌΌ γ€ β_β ΰΌ½γ€β‘ create-component-app --config config.json
[Error] An error occured while parsing your config file. Using defaults...
JSON Error in /Users/uidesign1/Documents/workspace/nbrown-ui/config.json:
Trailing comma in object at 4:1
}
^
? Do you wanna choose a template (y/N)
Any ideas please?
When creating a new statefull component the template is failing because Component is not defined.
I think it is because of the shared file setup from 3a2e513
A way to resolve the issue would be just to use React.Component
instead for https://github.com/CVarisco/create-component-app/blob/master/src/templates/js/class.template.js.
If it isn't already supported, it'd be awesome to support TypeScript files in this project as well.
I'm getting a SyntaxError: Unexpected token {
C:\Users\vaiulian\AppData\Roaming\npm\node_modules\create-component-app\dist\index.js:69
function generateFiles({ type, name, path, indexFile, cssExtension, jsExtension, connected }) {
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3
i tried with config file as well.
L.E.
node --version v4.5.0
npm --version 2.15.9
As a user, I want to create a tree configuration object to create directly from one file the components structure.
I'd like to be able to alter the default path (./src/components
) in a template and still suggest a path change to the user. So if I'm using my containers
template I could put a config value in that would suggest ./src/containers
and if I'm using a template that makes multiple folders in the root of src
I could offer ./src
as the suggested path. I'd like the user to still be able to overwrite with whatever they want.
Hi @CVarisco I was just wondering, what are the next steps for this project? I might want to contribute some more :)
If I run without a config file specified I get: "Bad config file, Please check config file syntax." Then if I say I want to use a template I get: "Object.entries is not a function"
I tried using the example config files and each fails with a "Bad config file" message. It appears that the comments in the examples are invalid. It also looks like, with the basic .ccarc config that is presented the templates don't work.
I'd love to update the readme with some corrections but I'm not sure I know what all the options should be. Can you post a working config file so that we can update the docs to better guide a new user?
The description on how to create custom templates is pretty thin. Could you provide a more detailed example?
// Default extension for your css file ["css", "scss", "sass"]
"cssExtension": "css",
Can you add less?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.