haunted - npm Package Compare versions

Comparing version 4.5.1 to 4.5.2

haunted.js

@@ -146,6 +146,9 @@ import { directive, render } from 'https://unpkg.com/lit-html@^1.0.0/lit-html.js';
 function makeComponent(Container) {
-  function component(renderer, BaseElement = HTMLElement, {useShadowDOM = true, shadowRootInit = {}} = {}) {
+  function component(renderer, baseElementOrOptions, options) {
+    const BaseElement = (options || baseElementOrOptions || {}).baseElement || HTMLElement;
+    const {observedAttributes = [], useShadowDOM = true, shadowRootInit = {}} = options || baseElementOrOptions || {};
+
     class Element extends BaseElement {
       static get observedAttributes() {
-        return renderer.observedAttributes || [];
+        return renderer.observedAttributes || observedAttributes || [];
       }
@@ -152,0 +155,0 @@

lib/component.js

@@ -9,6 +9,9 @@
 function makeComponent(Container) {
-  function component(renderer, BaseElement = HTMLElement, {useShadowDOM = true, shadowRootInit = {}} = {}) {
+  function component(renderer, baseElementOrOptions, options) {
+    const BaseElement = (options || baseElementOrOptions || {}).baseElement || HTMLElement;
+    const {observedAttributes = [], useShadowDOM = true, shadowRootInit = {}} = options || baseElementOrOptions || {};
+
     class Element extends BaseElement {
       static get observedAttributes() {
-        return renderer.observedAttributes || [];
+        return renderer.observedAttributes || observedAttributes || [];
       }
@@ -15,0 +18,0 @@

lib/haunted.d.ts

@@ -1,30 +0,42 @@
-import { html, render, TemplateResult } from 'lit-html';    
-export { html, render, TemplateResult }    
+import { html, render, TemplateResult } from 'lit-html';
+import { DirectiveFactory } from "lit-html/lib/directive";
+export { html, render, TemplateResult, DirectiveFactory }
 
-export function component(renderer: (el: HTMLElement) => TemplateResult, BaseElement?: Function, options?: {
-    useShadowDOM: boolean,
-    shadowRootInit?: {
-        mode?: string
-        delegatesFocus?: boolean,
-    }
-}): Function;
+export type ComponentLike = HTMLElement | ShadowRoot;
+export type ComponentType<P, T extends ComponentLike = HTMLElement> = new(...args: any[]) => T & P;
 
-export function useCallback(fn: Function, inputs: any[]): Function;
+type Options = {
+  useShadowDOM: boolean,
+  shadowRootInit?: {
+    mode?: string
+    delegatesFocus?: boolean,
+  }
+}
 
-export function useEffect(fn: () => Function | void, inputs?: any[]): void;
+export function component<P, T extends ComponentLike = HTMLElement>(
+  renderer: (this: T, el: P & T) => TemplateResult | void,
+  BaseElement?: new(...args: any[]) => T,
+  options?: Options): ComponentType<P, T>;
+export function component<P, T extends ComponentLike = HTMLElement>(
+  renderer: (this: T, el: P & T) => TemplateResult | void,
+  options?: Options & { baseElement: new(...args: any[]) => T} ): ComponentType<P, T>;
 
-export function useState(intialValue?: any): [any, Function];
+export function useCallback<T extends Function>(fn: T, inputs: any[]): T;
 
-export function useReducer(reducer: (state: any, action: any) => any, initialState: any): [any, Function];
+export function useEffect(fn: () => void | VoidFunction, inputs?: any[]): void;
 
-export function useMemo(fn: Function, values: any[]): any;
+export type StateUpdater<T> = (value: T | ((state?: T) => T)) => void;
+export function useState<T>(intialValue?: T): [T, StateUpdater<T>];
 
-export function useRef(initialValue: any): { current: any};
+export function useReducer<S = any, A = any>(reducer: (state: S, action: A) => S, initialState: S): [S, (action: A) => void];
 
-export function withHooks(renderer: Function): Function;
-export function virtual(renderer: Function): Function;
+export function useMemo<T>(fn: () => T, values: any[]): T;
 
+export function useRef<T>(initialValue: T): { current: T};
+
+export function virtual<P, T extends ComponentLike = HTMLElement>(renderer: (this: T, el: P) => TemplateResult | void): () => DirectiveFactory;
+
 export interface Context<T> {
-    Provider: Function;
-    Consumer: Function;
+    Provider: ComponentType<T>;
+    Consumer: ComponentType<T>;
     defaultValue: T;
@@ -35,6 +47,15 @@ }
 
-export function hook(Hook: Function): Function;
-export class Hook {
+export class Hook<T extends ComponentLike = HTMLElement> {
     id: number;
-    el: HTMLElement;
+    el: T;
+    constructor(id: number,  el: T);
 }
+
+interface HookWithLifecycle<T extends ComponentLike = HTMLElement, P extends any[] = null, R = void> extends Hook<T> {
+    update?(...args: P): R;
+    teardown?(): void;
+}
+
+export function hook<T extends ComponentLike = HTMLElement>(Hook: new(id: number, el: T) => Hook<T>): () => void;
+export function hook<T extends ComponentLike = HTMLElement, P extends any[] = void[], R = void>(Hook: new (id: number, el: T, ...args: P) => HookWithLifecycle<T, P, R>): (...args: P) => R;
+

package.json

 {
   "name": "haunted",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "description": "Hooks for web components",
@@ -11,4 +11,4 @@ "main": "lib/haunted.js",
     "preversion": "make",
-    "testee": "testee --browsers chrome test/test.html --config=testee.json",
-    "test": "npm run build && npm run testee"
+    "server": "http-server -p 1991",
+    "test-ci": "mocha-headless-chrome -f http://localhost:1991/test/test.html"
   },
@@ -32,6 +32,7 @@ "files": [
   "homepage": "https://github.com/matthewp/haunted#readme",
-  "typings": "index.d.ts",
+  "typings": " lib/haunted.d.ts",
   "devDependencies": {
-    "@matthewp/compile": "^1.3.1",
-    "testee": "^0.8.1"
+    "@matthewp/compile": "^2.4.3",
+    "http-server": "^0.11.1",
+    "mocha-headless-chrome": "^2.0.3"
   },
@@ -38,0 +39,0 @@ "dependencies": {

readme.md

@@ -51,3 +51,3 @@ # Haunted 🦇 🎃
 ```js
-component(() => html`...`, HTMLElement, { useShadowDOM: false }));
+component(() => html`...`, { useShadowDOM: false }));
 ```
@@ -150,5 +150,11 @@
 
-customElements.define('hello-app', App);
+customElements.define('hello-app', component(App));
 ```
 
+Alternatively, you can pass `observedAttributes` as an option to `component()`:
+
+```js
+customElements.define('hello-app', component(App, {observedAttributes: ['name']}));
+```
+
 Which allows you to author (in HTML):
@@ -472,6 +478,7 @@
 
+`component(renderer, options): Element`
 `component(renderer, BaseElement, options): Element`
 - renderer = ``` (element) => html`...` ```  
 - BaseElement = `HTMLElement`
-- options = `{useShadowDOM: true}`
+- options = `{baseElement: HTMLElement, observedAttributes: [], useShadowDOM: true}`
 
@@ -478,0 +485,0 @@ `virtual(renderer): directive`

web.js

@@ -146,6 +146,9 @@ import { directive, render } from '../lit-html/lit-html.js';
 function makeComponent(Container) {
-  function component(renderer, BaseElement = HTMLElement, {useShadowDOM = true, shadowRootInit = {}} = {}) {
+  function component(renderer, baseElementOrOptions, options) {
+    const BaseElement = (options || baseElementOrOptions || {}).baseElement || HTMLElement;
+    const {observedAttributes = [], useShadowDOM = true, shadowRootInit = {}} = options || baseElementOrOptions || {};
+
     class Element extends BaseElement {
       static get observedAttributes() {
-        return renderer.observedAttributes || [];
+        return renderer.observedAttributes || observedAttributes || [];
       }
@@ -152,0 +155,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59230

increased by3.6%

Lines of code

1539

increased by1.45%

Number of lines in readme file

488

increased by1.46%

Worsened metrics

Dev dependency count

3

increased by50%

No dependency changes