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

Comparing version 0.4.5 to 0.4.6-alpha.1

package.json

 {
     "name": "@spectrum-web-components/base",
-    "version": "0.4.5",
+    "version": "0.4.6-alpha.1+204701b5",
     "publishConfig": {
@@ -47,4 +47,3 @@ "access": "public"
     "dependencies": {
-        "lit-element": "^2.4.0",
-        "lit-html": "^1.0.0",
+        "lit": "^2.0.0-rc.2",
         "tslib": "^2.0.0"
@@ -55,3 +54,3 @@ },
     "sideEffects": false,
-    "gitHead": "fbd509e0f30f1da0dcb972fa9ac5492acc00d96e"
+    "gitHead": "204701b5496ec55efa8476f3a31298e7f5375212"
 }

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/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/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/streaming-listener.d.ts

@@ -1,13 +0,38 @@
-import { Part } from 'lit-html';
-declare type StreamingEvent = {
-    type: string | string[];
-    fn: (event: any) => void;
+import { nothing, 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 | Record<string, unknown> | Element;
+    element: Element;
+    start: ListenerConfig;
+    streamInside: ListenerConfig;
+    end: ListenerConfig;
+    streamOutside: ListenerConfig;
+    state: 'off' | 'on';
+    render(_configGroup: ListenerConfigGroup): typeof nothing;
+    update(part: Part, [{ start, end, streamInside, streamOutside, },]: Parameters<this['render']>): void;
+    addListeners(state?: 'on' | 'off'): void;
+    callHandler(value: (event: Event) => void | EventListenerObject, event: Event): void;
+    handleStart: (event: Event) => void;
+    handleStream: (event: Event) => void;
+    handleEnd: (event: Event) => void;
+    handleBetween: (event: Event) => void;
+    addListener(type: string | string[], fn: (event: Event) => void): void;
+    removeListener(type: string | string[], fn: (event: Event) => 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,111 @@ /* 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';
+/* c8 ignore next 6 */
+const defaultListener = [
+    '',
+    () => {
+        return;
+    },
+];
+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);
+    /* c8 ignore next 4 */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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

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

55545

increased by4%

Dependency count

2

decreased by-33.33%

Lines of code

386

increased by8.43%

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)