@shopware-ag/storefront-types 0.2.0 → 0.2.2

package/declare/helper/dom-access.helper.d.ts

@@ -27,7 +27,8 @@ interface DomAccessHelper {
     /**
      * Returns the selected elements of a defined parent node
      */
-    querySelectorAll(element: HTMLElement, selector: string, strict?: boolean): HTMLElement[]
+    querySelectorAll(element: HTMLElement, selector: string, strict: true): NodeList
+    querySelectorAll(element: HTMLElement, selector: string, strict?: false): NodeList | false
 }
 
 declare module 'src/helper/dom-access.helper' {

package/declare/helper/emitter.helper.d.ts

@@ -3,22 +3,22 @@ declare module 'src/helper/emitter.helper' {
         detail?: object;
         cancelable?: boolean;
     }
-    
+
     interface NativeEventEmitterSubscribeOpts {
         once?: boolean;
         scope?: Function;
     }
-    
-    class NativeEventEmitter {
+
+    class NativeEventEmitter<El extends HTMLElement = HTMLElement> {
         private _listeners;
         private _el;
-        constructor(el: HTMLElement);
+        constructor(el: El);
         publish(eventName: string, detail?: NativeEventEmitterPublish, cancelable?: boolean): CustomEvent;
         subscribe(eventName: string, callback: Function, opts?: NativeEventEmitterSubscribeOpts): boolean;
         unsubscribe(eventName: String): boolean;
         reset(): boolean;
-        get el(): HTMLElement;
-        set el(value: HTMLElement);
+        get el(): El;
+        set el(value: El);
         get listeners(): any[];
         set listeners(value: any[]);
     }

package/declare/helper/storage.helper.d.ts

@@ -1,5 +1,5 @@
 interface CookieStorageHelper {
-    setItem(key: string, value: string, expireationDays: number): void
+    setItem(key: string, value: string, expirationDays: number): void
 
     getItem(key: string): any
 

package/declare/utility/pseudo-modal.d.ts

@@ -1,5 +1,5 @@
-declare module 'src/utility/modal-extension/psuedo-modal.util' {
-    class PsuedoModalUtil {
+declare module 'src/utility/modal-extension/pseudo-modal.util' {
+    class PseudoModalUtil {
         open(callback: Function): void
         close(): void
         getModal(): HTMLElement
@@ -7,5 +7,5 @@ declare module 'src/utility/modal-extension/psuedo-modal.util' {
         updateContent(content: string, callback: () => void): void
     }
 
-    export = PsuedoModalUtil;
+    export = PseudoModalUtil;
 }

package/global.d.ts

@@ -1,7 +1,7 @@
 declare global {
     interface Window {
         PluginManager: import('./plugin-system/plugin-manager').default,
-        PluginBaseClass: import('./plugin-system/plugin').default,
+        PluginBaseClass: typeof import('./plugin-system/plugin').default,
         router: {
             'frontend.cart.offcanvas': string,
             'frontend.cookie.offcanvas': string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/storefront-types",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Provides Shopware Storefront Typescript types",
   "types": "index.d.ts",
   "scripts": {

package/plugin-system/native-event-emitter.d.ts

@@ -3,16 +3,16 @@ interface NativeEventEmitterSubscribeOpts {
     scope?: Function;
 }
 
-export default class NativeEventEmitter {
+export default class NativeEventEmitter<El extends HTMLElement = HTMLElement> {
     private _listeners;
     private _el;
-    constructor(el: HTMLElement);
+    constructor(el: El);
     publish(eventName: string, detail?: object, cancelable?: boolean): CustomEvent;
     subscribe(eventName: string, callback: Function, opts?: NativeEventEmitterSubscribeOpts): boolean;
     unsubscribe(eventName: String): boolean;
     reset(): boolean;
-    get el(): HTMLElement;
-    set el(value: HTMLElement);
+    get el(): El;
+    set el(value: El);
     get listeners(): any[];
     set listeners(value: any[]);
 }

package/plugin-system/plugin.d.ts

@@ -1,10 +1,10 @@
 import NativeEventEmitter from "./native-event-emitter";
 
-export default interface PluginBaseClass<Options extends object = Record<string, unknown>> {
-    new(el: HTMLElement, options?: Partial<Options>, pluginName?: false | string): PluginBaseClass<Options>;
+export default class PluginBaseClass<Options extends object = Record<string, unknown>, El extends HTMLElement = HTMLElement> {
+    constructor(el: El, options?: Partial<Options>, pluginName?: false | string);
 
-    el: HTMLElement;
-    $emitter: NativeEventEmitter;
+    el: El;
+    $emitter: NativeEventEmitter<El>;
     _pluginName: String;
     initialOptions: Options;
     options: Options;

package/tests/plugin-extend-window.test-d.ts

@@ -0,0 +1,38 @@
+// Test case for using window.PluginBaseClass as shown in the issue
+/// <reference path="../global.d.ts" />
+
+const { PluginBaseClass } = window;
+
+interface MyPluginOptions {
+    option1: string;
+    option2: number | null;
+}
+
+class MyPlugin extends PluginBaseClass<MyPluginOptions> {
+    static options: MyPluginOptions = {
+        option1: 'default value',
+        option2: null,
+    };
+
+    init(): void {
+        // Test that instance properties are accessible
+        console.log(this.el);
+        console.log(this.options);
+        console.log(this.$emitter);
+        
+        // Test that options are properly typed
+        const opt1: string = this.options.option1;
+        const opt2: number | null = this.options.option2;
+    }
+}
+
+// Test: Can instantiate using the class from window
+const element = document.createElement('div');
+const plugin = new MyPlugin(element, { option1: 'custom' });
+
+// Test: Instance properties should be typed correctly
+const opt1: string = plugin.options.option1;
+const opt2: number | null = plugin.options.option2;
+
+// @ts-expect-error - Should error when accessing non-existent property
+plugin.options.nonExistent;

package/tests/plugin-extend.test-d.ts

@@ -0,0 +1,39 @@
+// Test case for extending PluginBaseClass as shown in the issue
+import PluginBaseClass from '../plugin-system/plugin';
+
+interface MyPluginOptions {
+    option1: string;
+    option2: number | null;
+}
+
+class MyPlugin extends PluginBaseClass<MyPluginOptions> {
+    static options: MyPluginOptions = {
+        option1: 'default value',
+        option2: null,
+    };
+
+    init(): void {
+        // Test that instance properties are accessible
+        console.log(this.el);
+        console.log(this.options);
+        console.log(this.$emitter);
+        
+        // Test that options are properly typed
+        const opt1: string = this.options.option1;
+        const opt2: number | null = this.options.option2;
+    }
+}
+
+// Test: Should be able to instantiate via constructor
+const element = document.createElement('div');
+const plugin = new MyPlugin(element, { option1: 'test' });
+
+// Test: Instance properties should be accessible
+const el: HTMLElement = plugin.el;
+const opt1: string = plugin.options.option1;
+
+// @ts-expect-error - Should error when accessing non-existent property
+plugin.options.nonExistent;
+
+// @ts-expect-error - Should error when assigning wrong type
+const wrongType: number = plugin.options.option1;

package/tests/plugin.test-d.ts

@@ -31,7 +31,7 @@ const defaultOpt: unknown = defaultPlugin.options['anyKey'];
 const defaultInitOpt: unknown = defaultPlugin.initialOptions['anyKey'];
 
 // Test: Constructor options parameter should accept Partial<Options>
-declare const PluginClass: PluginBaseClass<MyPluginOptions>;
+declare const PluginClass: new (el: HTMLElement, options?: Partial<MyPluginOptions>, pluginName?: false | string) => PluginBaseClass<MyPluginOptions>;
 declare const element: HTMLElement;
 const instance = new PluginClass(element, { option1: 'partial' });
 const instanceNoOpts = new PluginClass(element);