Customize templates

[smeevil]

Hey,

I really like where this is going :)
Would it be possible to make the templates customizable from the preferences UI?

Gerard.

[faebeee]

Hi, sure they are. It depends on what you're thinking of.
Basically it works like this.
This is the file which takes the input from the UI https://github.com/faebeee/react-component-creator-plugin/blob/master/src/fabs/reducer/ReducerDialog.java and creates a map with getTemplateVars with all values used in the templates.

I'm not quite sure, what you want to do exactly. Maybe I can help

[smeevil]

The way I like to structure my components is as follows:

• MyComponent
  • index.tsx
  • styles.scss
  • index.story.tsx
  • interfaces.ts
  • README.md

where for example the index.tsx looks like:

import React from 'react'
import { IProps } from './interfaces'
import './styles.scss'

export const TestComponent: React.FC<IProps> = ({}) => {
  return <div className="test-component">Hello World</div>
}

I've been checking out the source and this is, of course, possible by changing the resources/templates/component/*.mustache files, but it would be awesome if these were customizable from the preference pane of the plugin :)

[faebeee]

I see. Well that is currently not possible. But I already played with this idea. I've to figure out, how to achieve that functionality with the jetbrains platform. Currently the fastest way, is to fork the plugin and do your own customisations and install it from disk in your IDE.

[smeevil]

Yeah, already did that and have it working :)
The templates are updated and reflect what I want, now I just need to find a way on how to rename the filenames.

[faebeee]

Renaming them is quiet easily.
Here you have to update the template file names
https://github.com/faebeee/react-component-creator-plugin/blob/master/src/fabs/component/ComponentCreatorDialog.java#L21

and here you can do the template name modifications
https://github.com/faebeee/react-component-creator-plugin/blob/master/src/fabs/util/TemplateRenderer.java#L27

What you have to return is just the file name of the template and not the whole path

Hope this helps. Otherwise you can send me the code, and I'll look into it

[smeevil]

Hey,

Thanks to your pointers I could make all the changes.
If I run the plugin, it will start another instance of intellij and there the plugin works exactly as I'd like. However, I cannot seem to figure out how to get this plugin in production ? I was thinking to zip up the directory from out/production and then use the plugin install from disk option. This does install the plugin, but I do not see the menu entry when trying to create a new component. Might you have an idea what is wrong ?

Sorry for all the questions, really actually the first time trying to manipulate a intellij plugin at all :)

[faebeee]

Hi, nevermind. I'm also no expert in this. A lot was try and error.

This action generates a .zip file in the project root directory. That is the installable plugin. At least it works for me (most famous words ;) )

Hope this helps

[smeevil]

Works like a charm, thank you so much for your time and patience!

[faebeee]

Glad to head. I'll reopen this issue. I'm working on some settings Right now. Lets see how this goes.
I'll close the issue with the corresponding PR.

[faebeee]

@smeevil I've a question. (now since you are the only user I got feedback from)
How would you like to customise the template files. Would it be enough, if you had some kind of file picker for every filetype in the settings? Or do you have another idea how you would like to use it.

If you don't want to get involved any further let me know, and I'll not disturb you anymore

[smeevil]

no worries, also remember... you asked for it ;)

I'm a polyglot myself writing in Ruby, Elixir, Typescript and, C#. Been using IntelliJ for years but always felt too daunted by it to start trying to make my own plugins... so... in this case, your success is my success :P

Yeah a file picker would work for a first instance.

What would be nice is, if you could edit the template files just like you would with Live Template Feature of IntelliJ. That allows you to basically edit the template in a UI window inside the preferences.

Lastly, the most ideal would be, if you could create a template group. For example, as you have now, with the React or Redux options. So given the previous case, you could make a group, call it react template, then add templates to it. You give the templates the name of the file it should create. The popup UI could check for the template groups and offer that as a select option, which in turn shows the UI with the checkboxes build according to the given file templates.

I hope this image makes more sense :)

[faebeee]

I see, I see. I just went down the rabbit hole ^^

Currently I have absolutely no idea how to achieve this. Have to dig deeper in the doc (which is not that useful, since many parts are missing).
I'll start with a file picker for now. And from there improve further more towards your solution. In addition, I've to figure out, how to share code between java projects, since I've done the same plugin for Vue and Vuex. https://github.com/faebeee/vue-component-creator-plugin

But one step after another. And thanks for your input! 💯

[faebeee]

I actually did it. At least the simpler version. I'll let some coworkers let test my plugin and then create a new release.

[smeevil]

Awesome! That's nice progress :D