@spectrum-web-components/base - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4-alpha.74

package.json

 {
     "name": "@spectrum-web-components/base",
-    "version": "0.4.3",
+    "version": "0.4.4-alpha.74+f76f322c5",
     "publishConfig": {
@@ -46,4 +46,3 @@ "access": "public"
     "dependencies": {
-        "lit-element": "^2.4.0",
-        "lit-html": "^1.0.0",
+        "lit": "^2.0.0-rc.2",
         "tslib": "^2.0.0"
@@ -53,3 +52,3 @@ },
     "sideEffects": false,
-    "gitHead": "1bd2f11dc1f2485a583e02fb5163ec5f5804df66"
+    "gitHead": "f76f322c5dc769ddfac85dc4d36a322e55e2cadb"
 }

src/Base.d.ts

@@ -1,2 +0,2 @@
-import { LitElement, UpdatingElement } from 'lit-element';
+import { LitElement, ReactiveElement } from 'lit';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -11,3 +11,3 @@ new (...args: any[]): T;
 }
-export declare function SpectrumMixin<T extends Constructor<UpdatingElement>>(constructor: T): T & Constructor<SpectrumInterface>;
+export declare function SpectrumMixin<T extends Constructor<ReactiveElement>>(constructor: T): T & Constructor<SpectrumInterface>;
 declare const SpectrumElement_base: typeof LitElement & Constructor<SpectrumInterface>;
@@ -14,0 +14,0 @@ export declare class SpectrumElement extends SpectrumElement_base {

src/Base.js

@@ -13,3 +13,4 @@ /*
 import { __decorate } from "tslib";
-import { LitElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 const observedForElements = new Set();
@@ -16,0 +17,0 @@ const updateRTL = () => {

src/Base.ts

@@ -13,3 +13,4 @@ /*
 
-import { LitElement, property, UpdatingElement } from 'lit-element';
+import { LitElement, ReactiveElement } from 'lit';
+import { property } from 'lit/decorators.js';
 type ThemeRoot = HTMLElement & {
@@ -59,3 +60,3 @@ startManagingContentDirection: (el: HTMLElement) => void;
 
-export function SpectrumMixin<T extends Constructor<UpdatingElement>>(
+export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
     constructor: T
@@ -62,0 +63,0 @@ ): T & Constructor<SpectrumInterface> {

src/index.d.ts

 export * from './Base.js';
 export * from './sizedMixin.js';
-export * from 'lit-element';
-export { nothing } from 'lit-html';
-export { ifDefined } from 'lit-html/directives/if-defined.js';
-export { repeat } from 'lit-html/directives/repeat.js';
-export { classMap } from 'lit-html/directives/class-map.js';
-export { styleMap } from 'lit-html/directives/style-map.js';
-export { until } from 'lit-html/directives/until.js';
-export { live } from 'lit-html/directives/live.js';
+export * from 'lit';
+export * from 'lit/decorators.js';
+export { nothing, render } from 'lit/html.js';
+export { ifDefined } from 'lit/directives/if-defined.js';
+export { repeat } from 'lit/directives/repeat.js';
+export { classMap } from 'lit/directives/class-map.js';
+export { styleMap } from 'lit/directives/style-map.js';
+export type { StyleInfo } from 'lit/directives/style-map.js';
+export { until } from 'lit/directives/until.js';
+export { live } from 'lit/directives/live.js';

src/index.js

@@ -14,10 +14,11 @@ /*
 export * from './sizedMixin.js';
-export * from 'lit-element';
-export { nothing } from 'lit-html';
-export { ifDefined } from 'lit-html/directives/if-defined.js';
-export { repeat } from 'lit-html/directives/repeat.js';
-export { classMap } from 'lit-html/directives/class-map.js';
-export { styleMap } from 'lit-html/directives/style-map.js';
-export { until } from 'lit-html/directives/until.js';
-export { live } from 'lit-html/directives/live.js';
+export * from 'lit';
+export * from 'lit/decorators.js';
+export { nothing, render } from 'lit/html.js';
+export { ifDefined } from 'lit/directives/if-defined.js';
+export { repeat } from 'lit/directives/repeat.js';
+export { classMap } from 'lit/directives/class-map.js';
+export { styleMap } from 'lit/directives/style-map.js';
+export { until } from 'lit/directives/until.js';
+export { live } from 'lit/directives/live.js';
 //# sourceMappingURL=index.js.map

src/index.ts

@@ -15,9 +15,11 @@ /*
 export * from './sizedMixin.js';
-export * from 'lit-element';
-export { nothing } from 'lit-html';
-export { ifDefined } from 'lit-html/directives/if-defined.js';
-export { repeat } from 'lit-html/directives/repeat.js';
-export { classMap } from 'lit-html/directives/class-map.js';
-export { styleMap } from 'lit-html/directives/style-map.js';
-export { until } from 'lit-html/directives/until.js';
-export { live } from 'lit-html/directives/live.js';
+export * from 'lit';
+export * from 'lit/decorators.js';
+export { nothing, render } from 'lit/html.js';
+export { ifDefined } from 'lit/directives/if-defined.js';
+export { repeat } from 'lit/directives/repeat.js';
+export { classMap } from 'lit/directives/class-map.js';
+export { styleMap } from 'lit/directives/style-map.js';
+export type { StyleInfo } from 'lit/directives/style-map.js';
+export { until } from 'lit/directives/until.js';
+export { live } from 'lit/directives/live.js';

src/sizedMixin.d.ts

@@ -1,2 +0,2 @@
-import { UpdatingElement } from 'lit-element';
+import { ReactiveElement } from 'lit';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -10,3 +10,3 @@ new (...args: any[]): T;
 }
-export declare function SizedMixin<T extends Constructor<UpdatingElement>>(constructor: T, { validSizes, noDefaultSize, }?: {
+export declare function SizedMixin<T extends Constructor<ReactiveElement>>(constructor: T, { validSizes, noDefaultSize, }?: {
     validSizes?: ElementSize[];
@@ -13,0 +13,0 @@ noDefaultSize?: boolean;

src/sizedMixin.js

 import { __decorate } from "tslib";
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { property } from 'lit-element';
+import { property } from 'lit/decorators.js';
 export function SizedMixin(constructor, { validSizes = ['s', 'm', 'l', 'xl'], noDefaultSize, } = {}) {
@@ -15,0 +4,0 @@ class SizedElement extends constructor {

src/sizedMixin.ts

@@ -12,3 +12,4 @@ /*
 */
-import { UpdatingElement, property, PropertyValues } from 'lit-element';
+import { ReactiveElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
 
@@ -27,3 +28,3 @@ type Constructor<T = Record<string, unknown>> = {
 
-export function SizedMixin<T extends Constructor<UpdatingElement>>(
+export function SizedMixin<T extends Constructor<ReactiveElement>>(
     constructor: T,
@@ -30,0 +31,0 @@ {

src/streaming-listener.d.ts

@@ -1,13 +0,38 @@
-import { Part } from 'lit-html';
-declare type StreamingEvent = {
-    type: string | string[];
-    fn: (event: any) => void;
+import { Part } from 'lit';
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { DirectiveResult } from 'lit/directive.js';
+declare type ListenerConfig = [string | string[], (event?: any) => void];
+declare type ListenerConfigGroup = {
+    start: ListenerConfig;
+    end: ListenerConfig;
+    streamInside?: ListenerConfig;
+    streamOutside?: ListenerConfig;
 };
+declare class StreamingListenerDirective extends AsyncDirective {
+    host: EventTarget | object | Element;
+    element: Element;
+    start: ListenerConfig;
+    streamInside: ListenerConfig;
+    end: ListenerConfig;
+    streamOutside: ListenerConfig;
+    state: 'off' | 'on';
+    render(_configGroup: ListenerConfigGroup): symbol;
+    update(part: Part, [{ start, end, streamInside, streamOutside, },]: Parameters<this['render']>): void;
+    addListeners(state?: 'on' | 'off'): void;
+    callHandler(value: Function | EventListenerObject, event: any): void;
+    handleStart: (event: any) => void;
+    handleStream: (event: any) => void;
+    handleEnd: (event: any) => void;
+    handleBetween: (event: any) => void;
+    addListener(type: string | string[], fn: (event: any) => void): void;
+    removeListener(type: string | string[], fn: (event: any) => void): void;
+    removeListeners(): void;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const streamingListener: (_configGroup: ListenerConfigGroup) => DirectiveResult<typeof StreamingListenerDirective>;
 /**
- * For AttributeParts, sets the attribute if the value is defined and removes
- * the attribute if the value is undefined.
- *
- * For other part types, this directive is a no-op.
+ * The type of the class that powers this directive. Necessary for naming the
+ * directive's return type.
  */
-export declare const streamingListener: (start: StreamingEvent, stream: StreamingEvent, end: StreamingEvent) => (part: Part) => void;
-export {};
+export type { StreamingListenerDirective };

src/streaming-listener.js

@@ -13,100 +13,102 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 */
-import { EventPart, directive } from 'lit-html';
-const previousValues = new WeakMap();
-const stateMap = new WeakMap();
-const addListener = (el, type, fn) => {
-    if (Array.isArray(type)) {
-        type.map((eventName) => {
-            el.addEventListener(eventName, fn);
-        });
+import { nothing } from 'lit';
+import { directive, AsyncDirective } from 'lit/async-directive.js';
+const defaultListener = ['', () => { }];
+class StreamingListenerDirective extends AsyncDirective {
+    constructor() {
+        super(...arguments);
+        this.start = defaultListener;
+        this.streamInside = defaultListener;
+        this.end = defaultListener;
+        this.streamOutside = defaultListener;
+        this.state = 'off';
+        this.handleStart = (event) => {
+            this.callHandler(this.start[1], event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            this.removeListeners();
+            this.addListeners('on');
+        };
+        this.handleStream = (event) => {
+            this.callHandler(this.streamInside[1], event);
+        };
+        this.handleEnd = (event) => {
+            this.callHandler(this.end[1], event);
+            this.removeListeners();
+            this.addListeners('off');
+        };
+        this.handleBetween = (event) => {
+            this.callHandler(this.streamOutside[1], event);
+        };
     }
-    else {
-        el.addEventListener(type, fn);
+    render(_configGroup) {
+        return nothing;
     }
-};
-const removeListener = (el, type, fn) => {
-    if (Array.isArray(type)) {
-        type.map((eventName) => {
-            el.removeEventListener(eventName, fn);
-        });
+    update(part, [{ start, end, streamInside = defaultListener, streamOutside = defaultListener, },]) {
+        var _a;
+        if (this.element !== part.element) {
+            this.element = part.element;
+            this.removeListeners();
+        }
+        this.host = ((_a = part.options) === null || _a === void 0 ? void 0 : _a.host) || this.element;
+        this.start = start;
+        this.end = end;
+        this.streamInside = streamInside;
+        this.streamOutside = streamOutside;
+        this.addListeners();
     }
-    else {
-        el.removeEventListener(type, fn);
+    addListeners(state) {
+        this.state = state || this.state;
+        if (this.state === 'off') {
+            this.addListener(this.streamOutside[0], this.handleBetween);
+            this.addListener(this.start[0], this.handleStart);
+        }
+        else if (this.state === 'on') {
+            this.addListener(this.streamInside[0], this.handleStream);
+            this.addListener(this.end[0], this.handleEnd);
+        }
     }
-};
-const addEventListeners = (part, start, stream, end) => {
-    const { element, eventContext } = part;
-    const isStreaming = stateMap.get(part);
-    let handledStream = false;
-    const handleStream = (event) => {
-        if (!handledStream) {
-            handledStream = true;
-            stream.fn.call(eventContext || element, event);
-            requestAnimationFrame(() => {
-                handledStream = false;
+    callHandler(value, event) {
+        if (typeof value === 'function') {
+            value.call(this.host, event);
+        }
+        else {
+            value.handleEvent(event);
+        }
+    }
+    addListener(type, fn) {
+        if (Array.isArray(type)) {
+            type.map((eventName) => {
+                this.element.addEventListener(eventName, fn);
             });
         }
-    };
-    const handleEnd = (event) => {
-        addListener(element, start.type, handleStart);
-        removeListener(element, stream.type, handleStream);
-        removeListener(element, end.type, handleEnd);
-        stateMap.set(part, false);
-        end.fn.call(eventContext || element, event);
-    };
-    const handleStart = (event) => {
-        start.fn.call(eventContext || element, event);
-        if (event.defaultPrevented) {
-            return;
+        else {
+            this.element.addEventListener(type, fn);
         }
-        removeListener(element, start.type, handleStart);
-        addListener(element, stream.type, handleStream);
-        addListener(element, end.type, handleEnd);
-        stateMap.set(part, true);
-    };
-    if (!isStreaming) {
-        addListener(element, start.type, handleStart);
     }
-    else {
-        addListener(element, stream.type, handleStream);
-        addListener(element, end.type, handleEnd);
+    removeListener(type, fn) {
+        if (Array.isArray(type)) {
+            type.map((eventName) => {
+                this.element.removeEventListener(eventName, fn);
+            });
+        }
+        else {
+            this.element.removeEventListener(type, fn);
+        }
     }
-    return () => {
-        removeListener(element, start.type, handleStart);
-        removeListener(element, stream.type, handleStream);
-        removeListener(element, end.type, handleEnd);
-    };
-};
-/**
- * For AttributeParts, sets the attribute if the value is defined and removes
- * the attribute if the value is undefined.
- *
- * For other part types, this directive is a no-op.
- */
-export const streamingListener = directive((start, stream, end) => (part) => {
-    if (!(part instanceof EventPart)) {
-        return;
+    removeListeners() {
+        this.removeListener(this.start[0], this.handleStart);
+        this.removeListener(this.streamInside[0], this.handleStream);
+        this.removeListener(this.end[0], this.handleEnd);
+        this.removeListener(this.streamOutside[0], this.handleBetween);
     }
-    if (previousValues.has(part)) {
-        const previous = previousValues.get(part);
-        if (start.type === previous.start.type &&
-            stream.type === previous.stream.type &&
-            end.type === previous.end.type &&
-            start.fn === previous.start.fn &&
-            stream.fn === previous.stream.fn &&
-            end.fn === previous.end.fn) {
-            return;
-        }
-        previous.removeEventListeners();
+    disconnected() {
+        this.removeListeners();
     }
-    else {
-        stateMap.set(part, false);
+    reconnected() {
+        this.addListeners();
     }
-    previousValues.set(part, {
-        start,
-        stream,
-        end,
-        removeEventListeners: addEventListeners(part, start, stream, end),
-    });
-});
+}
+export const streamingListener = directive(StreamingListenerDirective);
 //# sourceMappingURL=streaming-listener.js.map

src/streaming-listener.ts

@@ -13,137 +13,142 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 */
-import { EventPart, directive, Part } from 'lit-html';
+import { nothing, Part, ElementPart } from 'lit';
+import { directive, AsyncDirective } from 'lit/async-directive.js';
+import type { DirectiveResult } from 'lit/directive.js';
 
-type StreamingEvent = {
-    type: string | string[];
-    fn: (event: any) => void;
+type ListenerConfig = [string | string[], (event?: any) => void];
+type ListenerConfigGroup = {
+    start: ListenerConfig;
+    end: ListenerConfig;
+    streamInside?: ListenerConfig;
+    streamOutside?: ListenerConfig;
 };
 
-type StreamingListener = {
-    start: StreamingEvent;
-    stream: StreamingEvent;
-    end: StreamingEvent;
-    removeEventListeners: () => void;
-};
+const defaultListener: ListenerConfig = ['', () => {}];
 
-const previousValues = new WeakMap<Part, StreamingListener>();
+class StreamingListenerDirective extends AsyncDirective {
+    host!: EventTarget | object | Element;
+    element!: Element;
 
-const stateMap = new WeakMap<Part, boolean>();
+    start: ListenerConfig = defaultListener;
+    streamInside: ListenerConfig = defaultListener;
+    end: ListenerConfig = defaultListener;
+    streamOutside: ListenerConfig = defaultListener;
 
-const addListener = (
-    el: Element,
-    type: string | string[],
-    fn: EventListenerOrEventListenerObject
-): void => {
-    if (Array.isArray(type)) {
-        type.map((eventName) => {
-            el.addEventListener(eventName, fn);
-        });
-    } else {
-        el.addEventListener(type, fn);
+    state: 'off' | 'on' = 'off';
+
+    render(_configGroup: ListenerConfigGroup) {
+        return nothing;
     }
-};
 
-const removeListener = (
-    el: Element,
-    type: string | string[],
-    fn: EventListenerOrEventListenerObject
-): void => {
-    if (Array.isArray(type)) {
-        type.map((eventName) => {
-            el.removeEventListener(eventName, fn);
-        });
-    } else {
-        el.removeEventListener(type, fn);
+    update(
+        part: Part,
+        [
+            {
+                start,
+                end,
+                streamInside = defaultListener,
+                streamOutside = defaultListener,
+            },
+        ]: Parameters<this['render']>
+    ) {
+        if (this.element !== (part as ElementPart).element) {
+            this.element = (part as ElementPart).element;
+            this.removeListeners();
+        }
+        this.host = part.options?.host || this.element;
+        this.start = start;
+        this.end = end;
+        this.streamInside = streamInside;
+        this.streamOutside = streamOutside;
+        this.addListeners();
     }
-};
 
-const addEventListeners = (
-    part: EventPart,
-    start: StreamingEvent,
-    stream: StreamingEvent,
-    end: StreamingEvent
-): (() => void) => {
-    const { element, eventContext } = part;
-    const isStreaming = stateMap.get(part);
-    let handledStream = false;
+    addListeners(state?: 'on' | 'off'): void {
+        this.state = state || this.state;
+        if (this.state === 'off') {
+            this.addListener(this.streamOutside[0], this.handleBetween);
+            this.addListener(this.start[0], this.handleStart);
+        } else if (this.state === 'on') {
+            this.addListener(this.streamInside[0], this.handleStream);
+            this.addListener(this.end[0], this.handleEnd);
+        }
+    }
 
-    const handleStream = (event: any): void => {
-        if (!handledStream) {
-            handledStream = true;
-            stream.fn.call(eventContext || element, event);
-            requestAnimationFrame(() => {
-                handledStream = false;
-            });
+    callHandler(value: Function | EventListenerObject, event: any): void {
+        if (typeof value === 'function') {
+            (value as Function).call(this.host, event);
+        } else {
+            (value as EventListenerObject).handleEvent(event);
         }
-    };
+    }
 
-    const handleEnd = (event: any): void => {
-        addListener(element, start.type, handleStart);
-        removeListener(element, stream.type, handleStream);
-        removeListener(element, end.type, handleEnd);
-        stateMap.set(part, false);
-        end.fn.call(eventContext || element, event);
-    };
-
-    const handleStart = (event: any): void => {
-        start.fn.call(eventContext || element, event);
+    handleStart = (event: any): void => {
+        this.callHandler(this.start[1], event);
         if (event.defaultPrevented) {
             return;
         }
-        removeListener(element, start.type, handleStart);
-        addListener(element, stream.type, handleStream);
-        addListener(element, end.type, handleEnd);
-        stateMap.set(part, true);
+        this.removeListeners();
+        this.addListeners('on');
     };
 
-    if (!isStreaming) {
-        addListener(element, start.type, handleStart);
-    } else {
-        addListener(element, stream.type, handleStream);
-        addListener(element, end.type, handleEnd);
-    }
+    handleStream = (event: any): void => {
+        this.callHandler(this.streamInside[1], event);
+    };
 
-    return () => {
-        removeListener(element, start.type, handleStart);
-        removeListener(element, stream.type, handleStream);
-        removeListener(element, end.type, handleEnd);
+    handleEnd = (event: any): void => {
+        this.callHandler(this.end[1], event);
+        this.removeListeners();
+        this.addListeners('off');
     };
-};
 
-/**
- * For AttributeParts, sets the attribute if the value is defined and removes
- * the attribute if the value is undefined.
- *
- * For other part types, this directive is a no-op.
- */
-export const streamingListener = directive(
-    (start: StreamingEvent, stream: StreamingEvent, end: StreamingEvent) => (
-        part: Part
-    ) => {
-        if (!(part instanceof EventPart)) {
-            return;
+    handleBetween = (event: any): void => {
+        this.callHandler(this.streamOutside[1], event);
+    };
+
+    addListener(type: string | string[], fn: (event: any) => void): void {
+        if (Array.isArray(type)) {
+            type.map((eventName) => {
+                this.element.addEventListener(eventName, fn);
+            });
+        } else {
+            this.element.addEventListener(type, fn);
         }
-        if (previousValues.has(part)) {
-            const previous = previousValues.get(part) as StreamingListener;
-            if (
-                start.type === previous.start.type &&
-                stream.type === previous.stream.type &&
-                end.type === previous.end.type &&
-                start.fn === previous.start.fn &&
-                stream.fn === previous.stream.fn &&
-                end.fn === previous.end.fn
-            ) {
-                return;
-            }
-            previous.removeEventListeners();
+    }
+
+    removeListener(type: string | string[], fn: (event: any) => void): void {
+        if (Array.isArray(type)) {
+            type.map((eventName) => {
+                this.element.removeEventListener(eventName, fn);
+            });
         } else {
-            stateMap.set(part, false);
+            this.element.removeEventListener(type, fn);
         }
-        previousValues.set(part, {
-            start,
-            stream,
-            end,
-            removeEventListeners: addEventListeners(part, start, stream, end),
-        });
     }
+
+    removeListeners(): void {
+        this.removeListener(this.start[0], this.handleStart);
+        this.removeListener(this.streamInside[0], this.handleStream);
+        this.removeListener(this.end[0], this.handleEnd);
+        this.removeListener(this.streamOutside[0], this.handleBetween);
+    }
+
+    disconnected() {
+        this.removeListeners();
+    }
+
+    reconnected() {
+        this.addListeners();
+    }
+}
+
+export const streamingListener: (
+    _configGroup: ListenerConfigGroup
+) => DirectiveResult<typeof StreamingListenerDirective> = directive(
+    StreamingListenerDirective
 );
+
+/**
+ * The type of the class that powers this directive. Necessary for naming the
+ * directive's return type.
+ */
+export type { StreamingListenerDirective };

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

71210

increased by2.93%

Dependency count

2

decreased by-33.33%

Lines of code

690

increased by3.45%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlit@^2.0.0-rc.2

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removedlit-element@^2.4.0

• - Removedlit-html@^1.0.0

• - Removedlit-element@2.5.1(transitive)

• - Removedlit-html@1.4.1(transitive)