Code editor barking at improper syntax

[marksmccann]

In a few cases, we have to add the case suffix e.g. (pascalCase) after certain slots in our files, because it is an improper syntax, the code editor (I am using VS Code) is barking at the improper syntax:

// templates/.../__name__(pascalCase).js
class __name__(pascalCase) { ... } // <-- code editor does not like this, obviously

I certainly could update the settings of the editor to ignore those files, but we have a lot of contributors and would prefer not to have everyone have to do that. Do you know of a workaround? In the interim we decided to add a .template suffix to each filename (__name__(pascalCase).js.template) so the editor does not lint it. We then remove that extension in the onComplete callback. This works fine, but I'd prefer to retain the original extension so that I can take advantage of the project linting, formatting, etc.

I thought of a very simple, potential solution; If the dynamicReplacers were just replaced before the stringReplacers they could be used to dynamically add the non-editor-friendly syntax. For example:

stringReplacers: [
    { 
        question: 'Insert component name',
        slot: '__name__',
    }
],
dynamicReplacers: [
    { 
        slot: 'ComponentName', // <-- this slot gets replaced first...
        slotValue: '__name__(pascalCase)', // <-- ...with this syntax for the stringReplacers
    },
]

// templates/.../__name__(pascalCase).js
class ComponentName { ... } // <-- code editor does not mind this :)

Just an idea, not sure if it would work, or if that is a feature you want to enable. However, it does seem simple enough. I haven't looked at the source code yet, but would image a simple change to the order of operations could accomplish this.

Also, are you open to contributions? I am interested in taking a stab at this update and submitting a PR.

[codeBelt]

sure take a stab at it but it seems like a lot of refactoring of the code.

[codeBelt]

@marksmccann would this PR https://github.com/codeBelt/generate-template-files/pull/66 be sufficient for your request?

[marksmccann]

Unless I misunderstand the update, I don't think so. The main issue I was explaining is that the string replacer syntax is not valid JavaScript syntax.

class __name__(pascalCase) { ... } <-- not valid js syntax
class __name__ PascalCase__ { ... } <-- ALSO not valid js syntax

There needs to be a way to specify the case without parenthesis, a space, or any other invalid character. I guess something like this could work?

class __name____pascalCase__ { ... } 

[codeBelt]

There is new case converters:

__replacerSlot__NoCase__; //        Lives down BY the River
__replacerSlot__CamelCase__; //     livesDownByTheRiver
__replacerSlot__ConstantCase__; //  LIVES_DOWN_BY_THE_RIVER
__replacerSlot__DotCase__; //       lives.down.by.the.river
__replacerSlot__KebabCase__; //     lives-down-by-the-river
__replacerSlot__LowerCase__; //     livesdownbytheriver
__replacerSlot__PascalCase__; //    LivesDownByTheRiver
__replacerSlot__PathCase__; //      lives/down/by/the/river
__replacerSlot__SentenceCase__; //  Lives down by the river
__replacerSlot__SnakeCase__; //     lives_down_by_the_river
__replacerSlot__TitleCase__; //     Lives Down By The River

So you can use PascalCase__ in combination with __name__:

class __name__PascalCase__ { ... } <--  valid js syntax

[marksmccann]

Yeah looks like I did misunderstand. Is that a new feature, or did I just totally miss that feature? Which version did this feature become available? This looks great and it looks like this issue is resolved.

[codeBelt]

It was added yesterday by @TikiTDO (Version 3.2.0)