Documenting the treatment of camel-casing, and treatment of class name capitalizations

[jacobdr]

Right now, the implementation of camelCase and unCamelCase require the user to utilize a hyphen ("-") for camelCasing and unCamelCasing to work.

For example:

1. camelCase('tunafish') => "tunafish"
2. camelCase('tuna-fish') => "tunaFish"
3. unCamelCase("tunaFish") => "tuna-fish"
4. unCamelCase("tuna-Fish") => "tuna--fish"

This makes complete sense because in Case 1 it is impossible to tell programmatically where to split the word. In case 3, without inserting the hyphen, the input term could not be reliably recovered without saving its original state, which is not worth keeping track of.

What it means is that all @Component directives need to be named using a hyphen () if its corresponding class is to be named using the camelCasing convention. The alternative seems to be to keep the class name all lowercase (but no hyphens are required).

The third option, which doesn't seem feasible now given the implementation of the casing, is to allow for a class name that starts with a capital letter and also is camel cased... so camelCase("tuna-fish") => "TunaFish", which might be more in line with traditional class naming conventions but not necessarily Javascript function naming conventions. This might actually be worth talking about, since the Typescript and (Angular2 Docs)[https://angular.io/docs/js/latest/quickstart.html] seem to be consistency using capitalized first letter, camelCased naming.

Anyway, in the meantime I will try to update the docs to make the currently implemented naming convention of the project more clear:

index.html:

<directive-i-want-to-manipuate></directive-i-want-to-manipuate>

app.ts

@Component({
    selector: 'directive-i-want-to-manipuate'
})
@Template{
    templateUrl: 'app.ng.html'
}
class directiveIWantToManipulate{
    animal:string;
    constructor(){
        this.animal="Monkey?"
    }
}

app.ng.html

<b> Wait a second... am I really a {{directiveIWantToManipulate.animal}} </b>

[pbastowski]

@jacobdr point 4 is a bug in my code. Thanks for picking that up. I'll fix is :)

You can actually use pascal-cased class names already. So, camel-cased directiveIWantToManipulate and pascal-cased DirectiveIWantToManipulate are equivalent and both will currently work.

Unfortunately, actual class names are lost during the process of minification, which is why you can have any name for the class and it does not have to be the same as the selector name.

[jacobdr]

Thanks for the quick response.

I was actually unable to produce the same results in my code by moving to Pascal-Case -- so that a class TestModule() attached to the component, and TestModule.xyzProperty syntax in my template (via url), with a directive/selector of does not produce the same result as a class named class testModule and testmodule.Property syntax and with the same directive/selector.

In cases like this I think it would make sense to try to create a unit test case attached to the repository (or at least my forked version), but I am not really sure how package testing works in meteor (as opposed to my won application's tests). Any chance you can provide suggestions or any insight into how you would want contributors to conduct testing?

Finally, for your last comment

Unfortunately, actual class names are lost during the process of minification, which is why you can have any name for the class and it does not have to be the same as the selector name.

are you referring to angular2now.options({ controllerAs: 'vm' })?

[pbastowski]

Hmmm.... I would have to see your repo to better understand your issue with the PascalCase vs camelCase issue. However, for me, with Meteor and Babel either case works. That is, I have to choose one case, either class TestModule or class testModule and then use that same case in all places in my code where I refer to it.

For testing we use the Meteor package sanjo:jasmine. Github repo here: https://github.com/Sanjo/meteor-jasmine

Although, I must say, that I am not so good at writing tests and could definitely use some help here :)

Regarding minification. It is a process that reduces the size of the code. Meteor running in development mode, which is the default mode when you edit and develop, does not minify the code. When you deploy a Meteor app to production, however, it will minify, uglify and concatenate all your html and JS modules into just one JS file. You won't be able to recognise any class names or function names in that minified file.

By deploy to production I mean meteor deploy your-app-name.meteor.com. If you haven't thought about minification and its impact on your app once it's deployed out there then you will encounter errors about missing providers.

So, no, I wasn't referring to angular2now.options({ controllerAs: 'vm' }).

[jacobdr]

Gotcha. I am using the Typescript 1.5.0 beta, so that could be a cause of our difference. Let me try to write a test to reproduce and then update this thread.

[jacobdr]

Also all of the examples on the README.md page use camelCase and not PascalCase, which is maybe something we ought to consider changing as well given class naming conventions.

[pbastowski]

I was thinking the same thing. Actually, the whole page needs an overhaul. Better examples from my current projects would help newcomers too.

[pbastowski]

Closing this now. If need be it can be reopened.