refactor: unify component registration and template creation

.ignore

@@ -2,3 +2,4 @@
 
 /packages/docs/static/js/ace-builds/
 /packages/docs/themes/hugo-book/
+package-lock.json

packages/core/cypress/component/attribute-reflection.cy.ts

@@ -1,11 +1,12 @@
-import { Component, rx, define, MVUI_GLOBALS } from '$thispkg';
+import { Component, rx, MVUI_GLOBALS } from '$thispkg';
 import { attempt, mount, waitFrame } from '../support/helpers';
 
 describe('attribute reflection', () => {
   it('basic attribute reflection', attempt(async () => {
     MVUI_GLOBALS.APP_DEBUG = false;
 
-    const [_, AttrReflectionTest] = define(class AttrReflectionTest extends Component {
+    @Component.register
+    class AttrReflectionTest extends Component {
       static useShadow = false;
 
       props = {
@@ -14,7 +15,7 @@ describe('attribute reflection', () => {
         attrNum: new rx.Prop(5, { reflect: true, converter: Number }),
       }
       render = () => [];
-    });
+    };
 
     const comp = mount(AttrReflectionTest);
     // const [_doc, comp] = testDoc(new AttrReflectionTest());

packages/core/cypress/component/bindings.cy.ts

@@ -1,6 +1,7 @@
 import { Component, h, rx } from "$thispkg";
 import { attempt, mount } from "../support/helpers";
 
+@Component.register
 class MyBoundInput extends Component {
   props = { value: new rx.Prop('') };
 
@@ -15,18 +16,17 @@ class MyBoundInput extends Component {
     })
   ]
 }
-MyBoundInput.register();
 
 describe('bindings', () => {
   it('prop binding', attempt(async () => {
+    @Component.register
     class BindingTest extends Component {
       state = new rx.State('initial');
 
       render = () => [
-        MyBoundInput.new({ props: { value: rx.bind(this.state) } }),
+        MyBoundInput.t({ props: { value: rx.bind(this.state) } }),
       ]
     }
-    BindingTest.register();
 
     const comp = mount(BindingTest);
     const myInput = await comp.query<MyBoundInput>('app-my-bound-input');
@@ -64,14 +64,14 @@ describe('bindings', () => {
   }));
 
   it('field binding', attempt(async () => {
+    @Component.register
     class BindingTestField extends Component {
       state = new rx.State('initial');
 
       render = () => [
         h.input({ fields: { value: rx.bind(this.state) } }),
       ]
     }
-    BindingTestField.register();
 
     const comp = mount(BindingTestField);
     const input = await comp.query<HTMLInputElement>('input');
@@ -97,14 +97,14 @@ describe('bindings', () => {
   }));
 
   it('attribute binding', attempt(async () => {
+    @Component.register
     class BindingTestAttribute extends Component {
       state = new rx.State('initial');
 
       render = () => [
         h.input({ attrs: { value: rx.bind(this.state) } }),
       ]
     }
-    BindingTestAttribute.register();
 
     const comp = mount(BindingTestAttribute);
     const input = await comp.query<HTMLInputElement>('input');
@@ -131,6 +131,7 @@ describe('bindings', () => {
 
 
   it('type coercion/serialization', attempt(async () => {
+    @Component.register
     class BindingsTestSerialization extends Component {
       noCoerce = new rx.State('0');
       coerce = new rx.State(0);
@@ -151,7 +152,6 @@ describe('bindings', () => {
         ]
       }
     }
-    BindingsTestSerialization.register();
 
     const comp = mount(BindingsTestSerialization);
     let inputs: HTMLInputElement[] = [];
@@ -192,17 +192,17 @@ describe('bindings', () => {
   }));
 
   it('two bindings', async () => {
+    @Component.register
     class BindingTestTwo extends Component {
       // #state = new State('nothing');
       state = new rx.State('initial');
 
       render = () => [
-        MyBoundInput.new({ props: { value: rx.bind(this.state) } }),
-        MyBoundInput.new({ props: { value: rx.bind(this.state) } }),
+        MyBoundInput.t({ props: { value: rx.bind(this.state) } }),
+        MyBoundInput.t({ props: { value: rx.bind(this.state) } }),
         h.input({ fields: { value: rx.bind(this.state) } }),
       ]
     }
-    BindingTestTwo.register();
 
     const comp = mount(BindingTestTwo);
     const myInputs = await comp.queryAll<MyBoundInput>('app-my-bound-input');

packages/core/cypress/component/classes.cy.ts

@@ -6,6 +6,7 @@ describe('setting css classes', () => {
 
     const klass3 = new rx.State(false);
 
+    @Component.register
     class ClassListTest extends Component {
       render() {
         return [
@@ -19,7 +20,6 @@ describe('setting css classes', () => {
         ]
       }
     }
-    ClassListTest.register();
 
     const comp = mount(ClassListTest);
     const el = await comp.query('div');

packages/core/cypress/component/context.cy.ts

@@ -1,8 +1,9 @@
-import { Component, rx, h, define } from "$thispkg";
+import { Component, rx, h } from "$thispkg";
 import { attempt, mount } from "../support/helpers";
 
 const selectCtx = new rx.Context(() => new rx.State('val1'));
 
+@Component.register
 class MySelect extends Component {
   render() {
     const ctx = this.provideContext(selectCtx);
@@ -16,8 +17,8 @@ class MySelect extends Component {
     ]
   }
 }
-const [ mySelect ] = define(MySelect);
 
+@Component.register
 class MySelectItem extends Component {
   props = {
     value: new rx.Prop(''),
@@ -31,24 +32,23 @@ class MySelectItem extends Component {
     ]
   }
 }
-const [ mySelectItem ] = define(MySelectItem);
 
 describe('context', () => {
 
   it('kind works', attempt(async () => {
 
+    @Component.register
     class ContextTest extends Component {
       render() {
         return [
-          mySelect([
-            mySelectItem({ props: { value: 'val1' } }),
-            mySelectItem({ props: { value: 'val2' } }),
-            mySelectItem({ props: { value: 'val3' } }),
+          MySelect.t([
+            MySelectItem.t({ props: { value: 'val1' } }),
+            MySelectItem.t({ props: { value: 'val2' } }),
+            MySelectItem.t({ props: { value: 'val3' } }),
           ])
         ];
       }
     }
-    define(ContextTest);
 
     const comp = mount(ContextTest);
     const currVal = await (await comp.query<MySelect>('app-my-select')).query(

packages/core/cypress/component/events.cy.ts

@@ -1,6 +1,7 @@
 import { Component, h, rx } from "$thispkg";
 import { mount } from "../support/helpers";
 
+@Component.register
 export class EventEmitter extends Component<{
   events: {
     'customClick': MouseEvent,
@@ -39,9 +40,9 @@ export class EventEmitter extends Component<{
   ];
 
 }
-EventEmitter.register();
 
 
+@Component.register
 export class EventReceiver extends Component {
   state = new rx.State<Event>(new CustomEvent(''));
 
@@ -50,7 +51,7 @@ export class EventReceiver extends Component {
       h.fieldset([
         h.legend('Event Receiver'),
         h.p({ attrs: { id: 'state' } }, this.state),
-        EventEmitter.new({
+        EventEmitter.t({
           events: {
             // we put the click event in here additionally to test the types
             customClick: (e) => this.state.next(e),
@@ -63,7 +64,6 @@ export class EventReceiver extends Component {
   };
 
 }
-EventReceiver.register();
 
 describe('custom events', () => {
   it('kinda works', async () => {

packages/core/cypress/component/generics.cy.ts

@@ -20,11 +20,11 @@ describe('generic components', () => {
         const state1 = new rx.State(0);
         const state2 = new rx.State('hi');
         return [
-          (GenericComp<number>).new({
+          (GenericComp<number>).t({
             props: { value: state1 },
             events: { change: e => state1.next(e) }
           }),
-          (GenericComp<string>).new({
+          (GenericComp<string>).t({
             props: { value: state2 },
             events: { change: e => state2.next(e) }
           })

packages/core/cypress/component/lifecycle.cy.ts

@@ -1,8 +1,9 @@
-import { Component, h, rx, define } from "$thispkg";
+import { Component, h, rx } from "$thispkg";
 import { attempt } from "../support/helpers";
 
 const lifecycle = new rx.State<string>('initial');
 
+@Component.register
 class LifecycleTestComponent extends Component {
 
   stickyCounter = new rx.State(100);
@@ -28,7 +29,6 @@ class LifecycleTestComponent extends Component {
     ];
   }
 }
-define(LifecycleTestComponent);
 
 describe('lifecycle', () => {
   it('general lifecycle', attempt(async () => {

packages/core/cypress/component/props.cy.ts

@@ -1,6 +1,7 @@
 import { Component, rx, h } from "$thispkg";
 import { attempt, mount } from "../support/helpers";
 
+@Component.register
 class DumbComponent extends Component {
 
   props = { value: new rx.Prop('', { reflect: true }) };
@@ -12,8 +13,8 @@ class DumbComponent extends Component {
     ])
   ]
 }
-DumbComponent.register();
 
+@Component.register
 class SmartComponent extends Component {
 
   private state = new rx.State('reactive value');
@@ -24,15 +25,14 @@ class SmartComponent extends Component {
       h.button({ events: {
         click: () => this.state.next('second reactive value')
       }}, 'Change reactive value'),
-      DumbComponent.new({ props: { value: 'test' }}),
-      DumbComponent.new({ props: { value: this.state }}),
-      DumbComponent.new(
+      DumbComponent.t({ props: { value: 'test' }}),
+      DumbComponent.t({ props: { value: this.state }}),
+      DumbComponent.t(
         { attrs: { value: this.state.map(v => v + ' from attribute') }}
       ),
     ])
   ]
 }
-SmartComponent.register();
 
 describe('props', (() => {
   it('basic props', attempt(async () => {

packages/core/cypress/component/reactivity.cy.ts

@@ -2,6 +2,7 @@ import { Component, rx, h } from "$thispkg";
 import { attempt, mount } from "../support/helpers";
 
 describe('reactive templates', () => {
+  @Component.register
   class CounterComponent extends Component {
     private count = new rx.State(0);
     private multiplier = new rx.State(1);
@@ -30,7 +31,6 @@ describe('reactive templates', () => {
       ])
     ];
   }
-  CounterComponent.register();
 
   it('basic reactivity (counter)', attempt(async () => {
     const comp = mount(CounterComponent);
@@ -49,7 +49,7 @@ describe('reactive templates', () => {
     btnIncCount.click(); expect(state.innerText).to.be.eq('4 * 3 = 12');
   }));
 
-
+  @Component.register
   class ReactiveList extends Component {
     private list = new rx.State(['item 1', 'item 2']);
     private counter = new rx.State(0);
@@ -86,7 +86,6 @@ describe('reactive templates', () => {
       ])
     ];
   }
-  ReactiveList.register();
 
   it('reactive list', attempt(async () => {
     const comp = mount(ReactiveList);
@@ -114,6 +113,7 @@ describe('reactive templates', () => {
     check(3, 5);
   }));
 
+  @Component.register
   class EditableList extends Component {
     private editableList = new rx.State([
       { name: 'name1', value: 'val1' },
@@ -165,7 +165,6 @@ describe('reactive templates', () => {
       ),
     ]
   }
-  EditableList.register();
 
 
   it('editable list', attempt(async () => {

packages/core/cypress/component/rx/store.cy.ts

@@ -202,6 +202,7 @@ describe('Stores', () => {
 
 
   it('attaching to component lifecycle', async () => {
+    @Component.register
     class StoreComponent extends Component {
       render() {
         // console.log('render');
@@ -243,7 +244,6 @@ describe('Stores', () => {
         ]
       }
     }
-    StoreComponent.register();
 
     const comp = mount(StoreComponent);
     const addEffect = await comp.query<HTMLButtonElement>('#add-effect');
@@ -264,6 +264,7 @@ describe('Stores', () => {
   it('partial bindings in component', async () => {
     let bindVal = '';
 
+    @Component.register
     class PartialBindingsStoreComponent extends Component {
       render() {
         // console.log('render');
@@ -284,7 +285,6 @@ describe('Stores', () => {
         ]
       }
     }
-    PartialBindingsStoreComponent.register();
 
     const comp = mount(PartialBindingsStoreComponent);
     const input = await comp.query<HTMLInputElement>('input');