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

Comparing version 0.4.4-alpha.135 to 0.4.4-alpha.146

package.json

 {
     "name": "@spectrum-web-components/base",
-    "version": "0.4.4-alpha.135+ed84dff79",
+    "version": "0.4.4-alpha.146+6493e508",
     "publishConfig": {
@@ -33,6 +33,5 @@ "access": "public"
     "files": [
-        "*.d.ts",
-        "*.js",
-        "*.js.map",
-        "/src/",
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
         "custom-elements.json"
@@ -47,3 +46,4 @@ ],
     "dependencies": {
-        "lit": "^2.0.0-rc.2",
+        "lit-element": "^2.4.0",
+        "lit-html": "^1.0.0",
         "tslib": "^2.0.0"
@@ -53,3 +53,3 @@ },
     "sideEffects": false,
-    "gitHead": "ed84dff79fd23708ed6c63a8114290217d9c17ad"
+    "gitHead": "6493e508af9a30ea6eda1901cf800d770d498219"
 }

src/Base.d.ts

@@ -1,2 +0,2 @@
-import { LitElement, ReactiveElement } from 'lit';
+import { LitElement, UpdatingElement } from 'lit-element';
 declare type Constructor<T = Record<string, unknown>> = {
@@ -11,3 +11,3 @@ new (...args: any[]): T;
 }
-export declare function SpectrumMixin<T extends Constructor<ReactiveElement>>(constructor: T): T & Constructor<SpectrumInterface>;
+export declare function SpectrumMixin<T extends Constructor<UpdatingElement>>(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,4 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { LitElement, property } from 'lit-element';
 const observedForElements = new Set();
@@ -17,0 +16,0 @@ const updateRTL = () => {

src/index.d.ts

 export * from './Base.js';
 export * from './sizedMixin.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';
+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';

src/index.js

@@ -14,11 +14,10 @@ /*
 export * from './sizedMixin.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';
+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';
 //# sourceMappingURL=index.js.map

src/sizedMixin.d.ts

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

src/sizedMixin.js

 import { __decorate } from "tslib";
-import { property } from 'lit/decorators.js';
+/*
+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';
 export function SizedMixin(constructor, { validSizes = ['s', 'm', 'l', 'xl'], noDefaultSize, } = {}) {
@@ -4,0 +15,0 @@ class SizedElement extends constructor {

src/streaming-listener.d.ts

@@ -1,38 +0,13 @@
-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;
+import { Part } from 'lit-html';
+declare type StreamingEvent = {
+    type: string | string[];
+    fn: (event: any) => void;
 };
-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>;
 /**
- * The type of the class that powers this directive. Necessary for naming the
- * directive's return type.
+ * 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 type { StreamingListenerDirective };
+export declare const streamingListener: (start: StreamingEvent, stream: StreamingEvent, end: StreamingEvent) => (part: Part) => void;
+export {};

src/streaming-listener.js

@@ -13,111 +13,100 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 */
-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);
-        };
+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);
+        });
     }
-    /* c8 ignore next 4 */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    render(_configGroup) {
-        return nothing;
+    else {
+        el.addEventListener(type, 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();
+};
+const removeListener = (el, type, fn) => {
+    if (Array.isArray(type)) {
+        type.map((eventName) => {
+            el.removeEventListener(eventName, 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);
-        }
+    else {
+        el.removeEventListener(type, fn);
     }
-    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 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;
             });
         }
-        else {
-            this.element.addEventListener(type, 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;
         }
+        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);
     }
-    removeListener(type, fn) {
-        if (Array.isArray(type)) {
-            type.map((eventName) => {
-                this.element.removeEventListener(eventName, fn);
-            });
-        }
-        else {
-            this.element.removeEventListener(type, fn);
-        }
+    else {
+        addListener(element, stream.type, handleStream);
+        addListener(element, end.type, handleEnd);
     }
-    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);
+    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;
     }
-    disconnected() {
-        this.removeListeners();
+    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();
     }
-    reconnected() {
-        this.addListeners();
+    else {
+        stateMap.set(part, false);
     }
-}
-export const streamingListener = directive(StreamingListenerDirective);
+    previousValues.set(part, {
+        start,
+        stream,
+        end,
+        removeEventListeners: addEventListeners(part, start, stream, end),
+    });
+});
 //# 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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

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

Worsened metrics

Total package byte prevSize

56305

decreased by-21.92%

Dependency count

3

increased by50%

Number of package files

16

decreased by-20%

Lines of code

327

decreased by-54.01%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedlit-element@^2.4.0

• + Addedlit-html@^1.0.0

• + Addedlit-element@2.5.1(transitive)

• + Addedlit-html@1.4.1(transitive)

• - Removedlit@^2.0.0-rc.2

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

• - Removed@lit/reactive-element@1.6.3(transitive)

• - Removed@types/trusted-types@2.0.7(transitive)

• - Removedlit@2.8.0(transitive)

• - Removedlit-element@3.3.3(transitive)

• - Removedlit-html@2.8.0(transitive)