From b3149c1684c80b006f2942a434c6488f29db22d5 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 2 May 2022 14:18:24 +0000 Subject: [PATCH 1/8] remove controller or component suffix from registered elements --- docs/_guide/conventions.md | 11 ++++++++--- docs/_guide/your-first-component.md | 4 ++-- src/register.ts | 2 +- test/register.ts | 12 ++++++++++++ 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/docs/_guide/conventions.md b/docs/_guide/conventions.md index 4d9d01fd..a7548a07 100644 --- a/docs/_guide/conventions.md +++ b/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 +### Use `Element` or `Component` to suffix your controller class -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. +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 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`, but the other suffixes might be useful for symettry with other server side comoponent frameworks such as [ViewComponent](https://viewcomponent.org/). ```typescript @controller -class UserListElement extends HTMLElement {} +class UserListElement extends HTMLElement {} // `` +``` + +```typescript +@controller +class UserListComponent extends HTMLElement {} // `` ``` ### The best class-names are two word descriptions diff --git a/docs/_guide/your-first-component.md b/docs/_guide/your-first-component.md index 5b6348d7..4b876891 100644 --- a/docs/_guide/your-first-component.md +++ b/docs/_guide/your-first-component.md @@ -27,10 +27,10 @@ class HelloWorldElement extends HTMLElement { Catalyst will automatically convert the classes name; removing the trailing `Element` suffix and lowercasing 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. {% 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 %} diff --git a/src/register.ts b/src/register.ts index 97cc1484..60cd8e6c 100644 --- a/src/register.ts +++ b/src/register.ts @@ -9,7 +9,7 @@ import {dasherize} from './dasherize.js' * Example: HelloController => hello-controller */ export function register(classObject: CustomElementClass): CustomElementClass { - const name = dasherize(classObject.name).replace(/-element$/, '') + const name = dasherize(classObject.name).replace(/-(element|controller|component)$/, '') try { window.customElements.define(name, classObject) diff --git a/test/register.ts b/test/register.ts index 7b923f96..b98aa737 100644 --- a/test/register.ts +++ b/test/register.ts @@ -70,4 +70,16 @@ describe('register', () => { class FirstSuffixElement extends HTMLElement {} 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) + }) }) From a23df1f4ebaef6beb1d4619aec96f7dcb450ffeb Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Mon, 2 May 2022 17:35:37 +0100 Subject: [PATCH 2/8] v2 will be 2kb --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b8342ca1..c19351ef 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ { "path": "lib/index.js", "import": "{controller, attr, target, targets}", - "limit": "1.66kb" + "limit": "2kb" } ] } From ef156de07f61fb6e1299352e1c5460a10f3156eb Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Tue, 3 May 2022 12:42:51 +0100 Subject: [PATCH 3/8] improve convention node on controller suffixes --- docs/_guide/conventions.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_guide/conventions.md b/docs/_guide/conventions.md index a7548a07..8577a57c 100644 --- a/docs/_guide/conventions.md +++ b/docs/_guide/conventions.md @@ -5,9 +5,9 @@ subtitle: Conventions Catalyst strives for convention over code. Here are a few conventions we recommend when writing Catalyst code: -### Use `Element` or `Component` 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 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`, but the other suffixes might be useful for symettry with other server side comoponent frameworks such as [ViewComponent](https://viewcomponent.org/). +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 component framework. ```typescript @controller From 4516331aa17a40fae1377b7f2214a0f2433cde7a Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Tue, 3 May 2022 12:45:45 +0100 Subject: [PATCH 4/8] improve your-first-component docs around suffixes --- docs/_guide/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_guide/your-first-component.md b/docs/_guide/your-first-component.md index 4b876891..4ca0e4df 100644 --- a/docs/_guide/your-first-component.md +++ b/docs/_guide/your-first-component.md @@ -27,7 +27,7 @@ class HelloWorldElement extends HTMLElement { Catalyst will automatically convert the classes name; removing the trailing `Element` suffix and lowercasing all capital letters, separating them with a dash. -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. +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`, `Controller` or `Component` suffix). One-word elements will raise exceptions. Example of good names: `UserListElement`, `SubTaskController`, `PagerContainerComponent` From 02a6756a68888dbecd66a0c8c793f3be51db2de9 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Tue, 3 May 2022 12:46:57 +0100 Subject: [PATCH 5/8] add exact example for tag name in your-first-component --- docs/_guide/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_guide/your-first-component.md b/docs/_guide/your-first-component.md index 4ca0e4df..9e6b7c5f 100644 --- a/docs/_guide/your-first-component.md +++ b/docs/_guide/your-first-component.md @@ -25,7 +25,7 @@ class HelloWorldElement extends HTMLElement { ```
-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 ``. It removes the trailing `Element` suffix and lowercases all capital letters, separating them with a dash. 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)). From 754c3e3cde9ea5d7b28f1f986848e6e4f74ab7ad Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Tue, 3 May 2022 12:48:17 +0100 Subject: [PATCH 6/8] drop the the --- docs/_guide/conventions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_guide/conventions.md b/docs/_guide/conventions.md index 8577a57c..e38472af 100644 --- a/docs/_guide/conventions.md +++ b/docs/_guide/conventions.md @@ -7,7 +7,7 @@ Catalyst strives for convention over code. Here are a few conventions we recomme ### Suffix your controllers consistently, for symmetry -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 component framework. +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 From 74d51c97603633285fc2ad9e64b6aa8ef78bb441 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 4 May 2022 10:14:56 +0100 Subject: [PATCH 7/8] remove autoshadowroot --- docs/_guide/rendering.md | 34 +++++++++--- docs/_guide/your-first-component.md | 4 +- src/auto-shadow-root.ts | 11 ---- src/core.ts | 2 - src/index.ts | 1 - test/auto-shadow-root.ts | 80 ----------------------------- test/controller.ts | 24 --------- 7 files changed, 29 insertions(+), 127 deletions(-) delete mode 100644 src/auto-shadow-root.ts delete mode 100644 test/auto-shadow-root.ts diff --git a/docs/_guide/rendering.md b/docs/_guide/rendering.md index c380a92f..69bcd601 100644 --- a/docs/_guide/rendering.md +++ b/docs/_guide/rendering.md @@ -11,15 +11,15 @@ Remember to _always_ make your JavaScript progressively enhanced, where possible By leveraging the native [`ShadowDOM`](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) feature, Catalyst components can render complex sub-trees, fully encapsulated from the rest of the page. -Catalyst will automatically look for elements that match the `template[data-shadowroot]` selector, within your controller. If it finds one as a direct-child of your controller, it will use that to create a shadowRoot. +[Actions]({{ site.baseurl }}/guide/actions) and [Targets]({{ site.baseurl }}/guide/targets) all work within an elements ShadowRoot. -Catalyst Controllers will search for a direct child of `template[data-shadowroot]` and load its contents as the `shadowRoot` of the element. [Actions]({{ site.baseurl }}/guide/actions) and [Targets]({{ site.baseurl }}/guide/targets) all work within an elements ShadowRoot. +You can also leverage the [declarative shadow DOM](https://web.dev/declarative-shadow-dom/) and render a template inline to your HTML, which will automatically be attached (this may require a polyfill for browsers which are yet to support this feature). ### Example ```html -