feat(actions): snapshot action test

.changeset/fast-yaks-chew.md

@@ -0,0 +1,5 @@
+---
+'@websublime/vitamin-core': minor
+---
+
+Init htmx component for testing

package.json

@@ -20,6 +20,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
+    "changeset": "changeset",
     "lint": "pnpm --filter \"@websublime/*\" lint",
     "build": "pnpm --filter \"@websublime/*\" build",
     "version": "changeset version",

packages/core/package.json

@@ -73,10 +73,18 @@
       "types": "./dist/lib/controllers/inspect-controller.d.ts",
       "default": "./dist/lib/controllers/inspect-controller.js"
     },
+    "./component.js": {
+      "types": "./dist/lib/component.d.ts",
+      "default": "./dist/lib/component.js"
+    },
     "./web-component.js": {
       "types": "./dist/lib/web-component.d.ts",
       "default": "./dist/lib/web-component.js"
     },
+    "./htmx-component.js": {
+      "types": "./dist/lib/htmx-component.d.ts",
+      "default": "./dist/lib/htmx-component.js"
+    },
     "./storage.js": {
       "types": "./dist/lib/storage.d.ts",
       "default": "./dist/lib/storage.js"

packages/core/src/lib/component.ts

@@ -0,0 +1,66 @@
+/**
+|--------------------------------------------------------------------------
+| Copyright Websublime All Rights Reserved.
+|--------------------------------------------------------------------------
+|
+| Use of this source code is governed by an MIT-style license that can be
+| found in the LICENSE file at https://websublime.dev/license
+|
+*/
+
+import { PropertyValues, ReactiveElement } from 'lit';
+
+import type { ComponentMixinInterface } from '../types/component';
+import type { Constructor } from '../types/general';
+import { property } from '../utilities/decorators';
+
+export function ComponentMixin<T extends Constructor<ReactiveElement>>(
+  constructor: T
+): T & Constructor<ComponentMixinInterface> {
+  class SuperElement extends constructor {
+    /**
+     * @public
+     */
+    @property({ reflect: true })
+    public override dir: 'ltr' | 'rtl' = 'ltr';
+
+    /**
+     * @public
+     */
+    @property({ reflect: true, type: Boolean })
+    public inspect = false;
+
+    /**
+     * @public
+     */
+    public get isLTR(): boolean {
+      return this.dir === 'ltr';
+    }
+
+    /**
+     * @internal
+     * @readonly
+     */
+    public override connectedCallback(): void {
+      super.connectedCallback();
+    }
+
+    /**
+     * @internal
+     * @readonly
+     */
+    public override disconnectedCallback(): void {
+      super.disconnectedCallback();
+    }
+
+    /**
+     * @internal
+     * @readonly
+     */
+    public override updated(changedProperties: PropertyValues) {
+      super.updated?.(changedProperties);
+    }
+  }
+
+  return SuperElement as Constructor<SuperElement> & T;
+}

packages/core/src/lib/htmx-component.ts

@@ -0,0 +1,44 @@
+/**
+|--------------------------------------------------------------------------
+| Copyright Websublime All Rights Reserved.
+|--------------------------------------------------------------------------
+|
+| Use of this source code is governed by an MIT-style license that can be
+| found in the LICENSE file at https://websublime.dev/license
+|
+*/
+
+import type { ComponentMetadata, WebComponentOptions } from '../types/component';
+import { Constructor } from '../types/general';
+
+import { ComponentElement } from './web-component';
+
+export class ComponentHtmx extends ComponentElement<WebComponentOptions> {
+  constructor(registry: ComponentMetadata) {
+    super(registry);
+  }
+}
+
+/**
+ * Register a custom element Lit class component. This function will
+ * also add the component options to the prototype.
+ *
+ * @public
+ */
+export function defineHtmxComponent<ComponentHtmx extends ComponentElement>(
+  name: string,
+  component: Constructor<ComponentHtmx>,
+  options: WebComponentOptions = {}
+): Constructor<ComponentHtmx> {
+  Object.defineProperty(component.prototype, 'componentOptions', {
+    enumerable: true,
+    value: options,
+    writable: true
+  });
+
+  if (!window.customElements.get(name)) {
+    window.customElements.define(name, component);
+  }
+
+  return component;
+}

packages/core/src/lib/web-component.ts

@@ -8,70 +8,17 @@
 |
 */
 
-import { LitElement, PropertyValues, ReactiveElement } from 'lit';
+import { LitElement, ReactiveElement } from 'lit';
 
-import type { ComponentMetadata, ComponentMixinInterface, WebComponentOptions } from '../types/component';
+import type { ComponentMetadata, WebComponentOptions } from '../types/component';
 import type { Constructor } from '../types/general';
 import { property } from '../utilities/decorators';
 
+import { ComponentMixin } from './component';
 import { InspectController } from './controllers/inspect-controller';
 
 const id = Symbol.for('VITA');
 
-/**
- * @public
- */
-export function ComponentMixin<T extends Constructor<ReactiveElement>>(
-  constructor: T
-): T & Constructor<ComponentMixinInterface> {
-  class SuperElement extends constructor {
-    /**
-     * @public
-     */
-    @property({ reflect: true })
-    public override dir: 'ltr' | 'rtl' = 'ltr';
-
-    /**
-     * @public
-     */
-    @property({ reflect: true, type: Boolean })
-    public inspect = false;
-
-    /**
-     * @public
-     */
-    public get isLTR(): boolean {
-      return this.dir === 'ltr';
-    }
-
-    /**
-     * @internal
-     * @readonly
-     */
-    public override connectedCallback(): void {
-      super.connectedCallback();
-    }
-
-    /**
-     * @internal
-     * @readonly
-     */
-    public override disconnectedCallback(): void {
-      super.disconnectedCallback();
-    }
-
-    /**
-     * @internal
-     * @readonly
-     */
-    public override updated(changedProperties: PropertyValues) {
-      super.updated?.(changedProperties);
-    }
-  }
-
-  return SuperElement as Constructor<SuperElement> & T;
-}
-
 /**
  * Extend your components from this. Will have QA tag and metadata
  * for the inspector.