component-creator-plugin / react-component-creator-plugin

React Component Creation plugin for JetBrains IDE
https://plugins.jetbrains.com/plugin/13965-react-component-creator
MIT License
16 stars 6 forks source link

Template examples #9

Closed Erythros closed 3 years ago

Erythros commented 3 years ago

Hey there! Love the plugin! It definitely deserves more love!

Would like to ask if you can include 1-2 example files for showing how to create templates. What I want to do is to create a react template that generates a component like this:

import type {ReactElement} from "react";
import React from "react";

type TypesProps = {
    // TODO
};

const ComponentName = ({data}: TypesProps): ReactElement => {
    return <></>;
};

export default ComponentName;
faebeee commented 3 years ago

Hi there. I'll try to work on a better documentation regarding templates this weekend.

For now the steps are quiet simple.

  1. Create a file (somewhere on your filesystem. even in the project itself if you are sharing it) Name it something like {{componentName}}.jsx

  2. In the Settings section of the Plugin (inside the IDE) you can now overwrite de default template. The settings are stored here Settings > Other Settings > Vue Component Creator > Component. Here you can define custom templates from your own files

  3. Now you can create the element how ever you want. In the Development Section of the readme, you have a list of available variables, which are passed into the template for compilation. Also checkout the existing templates here they might help

I hove this helps for the first part

Erythros commented 3 years ago

@faebeee thank you for your super quick reply. So, I created a file called {{componentName}}.tsx and added this to it.

import type {ReactElement} from "react";
import React from "react";

interface Props {
};

const {{ componentCamelcaseName }} = ({}: Props): ReactElement => {
    return (
        <>

        </>
    );
};

export default {{ componentCamelcaseName }};

I have added it in settings, as instructed. image

The problem is that now, when I create a new component, I just get an empty folder. No error that I could find in the IDE.

I just found this, in the idea.log (from PHPStorm). Not sure if it's of any use: https://pastebin.com/BwFhZpRn

Am I doing something wrong?

faebeee commented 3 years ago

Thanks for the log. That will help a lot. There is already a similar issue regarding this: https://github.com/component-creator-plugin/react-component-creator-plugin/issues/8

I'll try to fix this. Let's see how it will work out, without a machine to test it xD.

So I'll close the issue due to the duplication and keep you updated in the other one.