Add new decorated components and update dependencies

.gitignore

@@ -25,3 +25,5 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 .env
+
+src/**/*.js

package.json

@@ -28,11 +28,11 @@
   "author": "ReferralSaaSquatch.com, Inc.",
   "devDependencies": {
     "@stencil/core": "^4",
-    "@types/puppeteer": "2.0.1",
-    "jest-cli": "26.0.1",
+    "@types/puppeteer": "^7.0.4",
+    "jest-cli": "^29.7.0",
     "jest-cucumber": "^3.0.0",
-    "microbundle": "^0.12.4",
-    "puppeteer": "2.1.1"
+    "microbundle": "^0.15.1",
+    "puppeteer": "^23.3.0"
   },
   "peerDependencies": {
     "@stencil/core": ">= 4 < 5"

src/decorator.tsx

@@ -0,0 +1,27 @@
+import { withHooks } from './stencil-hooks';
+import { mockFunction } from './tests/mockFunction';
+
+interface RequiresStencilLifecycleMethods {
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    render(): any;
+}
+
+export function WithStencilHooks(){
+return function applyHooks<T extends { new (...args: any): RequiresStencilLifecycleMethods }>(
+    constructor: T,
+  ) {
+    return class extends constructor {
+      constructor(...args: any[]) {
+        super(...args);
+        withHooks(this);
+        window['lifecycleCalls'] = window['lifecycleCalls'] || mockFunction();
+      }
+
+      render() {
+        window['lifecycleCalls']('render');
+        return super.render();
+      }
+    }
+};
+}

src/tests/components.tsx

@@ -5,6 +5,7 @@ import { withHooks, useEffect, useState, useDomContext, useDomContextState, useR
 import * as HooksAPI from '../stencil-hooks';
 import { mockFunction } from './mockFunction';
 import { setImplementation } from '@saasquatch/universal-hooks';
+import { WithStencilHooks } from '../decorator';
 setImplementation(HooksAPI);
 
 @Component({
@@ -417,3 +418,54 @@ export class InnocentChild {
     window['lifecycleCalls']('child.disconnectedCallback');
   }
 }
+
+
+
+
+
+
+
+@Component({
+  tag: 'decorated-component-test',
+})
+@WithStencilHooks()
+export class DecoratedComponentTest {
+  constructor() {
+    window['lifecycleCalls'] = window['lifecycleCalls'] || mockFunction();
+    withHooks(this);
+  }
+  render() {
+    const [count, setCount] = useState(0);
+    window['lifecycleCalls']('render');
+
+    this.foo();
+
+    return (
+      <Host onClick={()=>setCount(10)}>
+        <div>{count}</div>
+      </Host>
+    );
+  }
+  connectedCallback() {
+    window['lifecycleCalls']('connectedCallback');
+  }
+
+  foo(){}
+
+  disconnectedCallback() {
+    window['lifecycleCalls']('disconnectedCallback');
+  }
+}
+
+
+@Component({
+  tag: 'decorated-component-test-fail',
+})
+// @ts-expect-error dupa
+@WithStencilHooks()
+export class DecoratedComponentTestFail {
+  constructor() {
+    window['lifecycleCalls'] = window['lifecycleCalls'] || mockFunction();
+    withHooks(this);
+  }
+}

src/tests/tests.e2e.tsx

@@ -228,6 +228,23 @@ describe('stencil-context', () => {
   });
 });
 
+  it('renders correctly with decorator', async () => {
+    const page = await newE2EPage();
+    const errorRef = trackErrors(page);
+
+    await page.setContent('<decorated-component-test></decorated-component-test>');
+    const component = await page.find('decorated-component-test > div');
+    await component.click();
+    expect(component.innerHTML).toEqualHtml(`10`);
+    expect(errorRef.current).toEqual([]);
+  });
+
+  it('fails with missing lifecycle methods', async () => {
+
+
+
+  });
+
 function trackErrors(page: E2EPage) {
   const ref = new MutableRef<string[]>([]);
   page.on('pageerror', ({ message }) => (ref.current = [message, ...ref.current]));

stencil.config.ts

@@ -7,8 +7,8 @@ export const config: Config = {
       type: 'dist',
       esmLoaderPath: '../loader',
     },
-    {
-      type: 'dist-custom-elements-bundle',
-    }
+    // {
+    //   type: 'dist-custom-elements-bundle',
+    // }
   ],
 };

tsconfig.json

@@ -16,7 +16,8 @@
     "jsxFactory": "h"
   },
   "include": [
-    "src"
+    "src",
+    "node_modules/@stencil/core/compiler/lib.decorators.d.ts"
   ],
   "exclude": [
     "node_modules"