Merge pull request #219 from github/register-truncates-component-or-c…

…ontroller-suffix

remove controller or component suffix from registered elements

docs/_guide/conventions.md

@@ -5,13 +5,18 @@ subtitle: Conventions
 
 Catalyst strives for convention over code. Here are a few conventions we recommend when writing Catalyst code:
 
-### Use `Element` to suffix your controller class
+### Suffix your controllers consistently, for symmetry
 
-Built in HTML elements all extend from the `HTMLElement` constructor, and are all suffixed with `Element` (for example `HTMLElement`, `SVGElement`, `HTMLInputElement` and so on). Catalyst components should be no different, they should behave as closely to the built-ins as possible.
+Catalyst components can be suffixed with `Element`, `Component` or `Controller`. We think elements should behave as closely to the built-ins as possible, so we like to use `Element` (existing elements do this, for example `HTMLDivElement`, `SVGElement`). If you're using a server side comoponent framework such as [ViewComponent](https://viewcomponent.org/), it's probably better to suffix `Component` for symmetry with that framework.
 
 ```typescript
 @controller
-class UserListElement extends HTMLElement {}
+class UserListElement extends HTMLElement {} // `<user-list />`
+```
+
+```typescript
+@controller
+class UserListComponent extends HTMLElement {} // `<user-list />`
 ```
 
 ### The best class-names are two word descriptions

docs/_guide/your-first-component.md

@@ -25,12 +25,12 @@ class HelloWorldElement extends HTMLElement {
 ```
 <br>
 
-Catalyst will automatically convert the classes name; removing the trailing `Element` suffix and lowercasing all capital letters, separating them with a dash.
+Catalyst will automatically convert the classes name so the HTML tag will be `<hello-world>`. It removes the trailing `Element` suffix and lowercases all capital letters, separating them with a dash.
 
-By convention Catalyst controllers end in `Element`; Catalyst will omit this when generating a tag name. The `Element` suffix is _not_ required - just convention. All examples in this guide use `Element` suffixed names.
+Catalyst controllers can end in `Element`, `Controller`, or `Component` and Catalyst will remove this suffix when generating a tag name. Adding one of these suffixes is _not_ required - just convention. All examples in this guide use `Element` suffixed names (see our [convention note on this for more]({{ site.baseurl }}/guide/conventions#suffix-your-controllers-consistently-for-symmetry)).
 
 {% capture callout %}
-Remember! A class name _must_ include at least two CamelCased words (not including the `Element` suffix). One-word elements will raise exceptions. Example of good names: `UserListElement`, `SubTaskElement`, `PagerContainerElement`
+Remember! A class name _must_ include at least two CamelCased words (not including the `Element`, `Controller` or `Component` suffix). One-word elements will raise exceptions. Example of good names: `UserListElement`, `SubTaskController`, `PagerContainerComponent`
 {% endcapture %}{% include callout.md %}
 
 

package.json

@@ -53,7 +53,7 @@
     {
       "path": "lib/index.js",
       "import": "{controller, attr, target, targets}",
-      "limit": "1.64kb"
+      "limit": "2kb"
     }
   ]
 }

src/register.ts

@@ -1,5 +1,5 @@
-import type {CustomElement} from './custom-element.js'
 import {dasherize} from './dasherize.js'
+import type {CustomElement} from './custom-element.js'
 
 /**
  * Register the controller as a custom element.
@@ -9,7 +9,7 @@ import {dasherize} from './dasherize.js'
  * Example: HelloController => hello-controller
  */
 export function register(classObject: CustomElement): CustomElement {
-  const name = dasherize(classObject.name).replace(/-element$/, '')
+  const name = dasherize(classObject.name).replace(/-(element|controller|component)$/, '')
 
   try {
     window.customElements.define(name, classObject)

test/register.ts

@@ -70,4 +70,16 @@ describe('register', () => {
     class FirstSuffixElement {}
     expect(window.customElements.get('first-suffix')).to.equal(FirstSuffixElement)
   })
+
+  it('automatically drops the `Controller` suffix', () => {
+    @register
+    class SecondSuffixController {}
+    expect(window.customElements.get('second-suffix')).to.equal(SecondSuffixController)
+  })
+
+  it('automatically drops the `Component` suffix', () => {
+    @register
+    class ThirdSuffixComponent {}
+    expect(window.customElements.get('third-suffix')).to.equal(ThirdSuffixComponent)
+  })
 })