@alwatr/element - npm Package Compare versions

Comparing version 0.28.0 to 0.29.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [0.29.0](https://github.com/AliMD/alwatr/compare/v0.28.0...v0.29.0) (2023-02-10)
+
+### Bug Fixes
+
+- compatible with i18n ([89c4a90](https://github.com/AliMD/alwatr/commit/89c4a90444db12930b1d0211942c9b84185cbb32))
+- **element:** compatible with new signal api ([020a083](https://github.com/AliMD/alwatr/commit/020a0837de496d8c4943fe5cdb659fee3dc0e051))
+- **element:** import issue ([87b3e12](https://github.com/AliMD/alwatr/commit/87b3e12a289fc477b072c1321aca160db46dc69c))
+- **element:** import type ([b125318](https://github.com/AliMD/alwatr/commit/b1253186036df3dcafca06f1bc4aca613c220f51))
+- **element:** logger mixin issue ([db5d96d](https://github.com/AliMD/alwatr/commit/db5d96d3a3b3cf5e07c60474e69ebf75a77978c4))
+
+### Features
+
+- **element/direction:** compute mode and improve performance ([9d3b2ed](https://github.com/AliMD/alwatr/commit/9d3b2ed4443585e0b2eb497dd24501d8753983c5))
+- **element:** ali ([25422c4](https://github.com/AliMD/alwatr/commit/25422c4dee951be8c8bd37ec709f1492946731ad))
+- **element:** rewrite all mixins with new api ([baa1e5e](https://github.com/AliMD/alwatr/commit/baa1e5e546654658f473622b148ceb7e7e8e3da6))
+- **pwa-helper:** new package ([a77c049](https://github.com/AliMD/alwatr/commit/a77c0491a6337cb48b42a667a0ee67c7f9f150fa))
+- review ([53726b7](https://github.com/AliMD/alwatr/commit/53726b77274be429c87b2fd322fe2d939b048c77))
+- **surface-element:** active-outline ([3261091](https://github.com/AliMD/alwatr/commit/3261091bdfbb3dd777aa2676f1bf0ce5d3aa7192))
+
 # [0.28.0](https://github.com/AliMD/alwatr/compare/v0.27.0...v0.28.0) (2023-01-20)
@@ -8,0 +27,0 @@

index.d.ts

 export * from './dummy-element.js';
 export * from './smart-element.js';
-export * from './surface-element.js';
 export * from './mixins/localize.js';
 export * from './mixins/direction.js';
-export * from 'lit';
-export * from 'lit/decorators.js';
-export { map } from 'lit/directives/map.js';
-export { when } from 'lit/directives/when.js';
-export { repeat } from 'lit/directives/repeat.js';
-export { ifDefined } from 'lit/directives/if-defined.js';
-export { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-export { unsafeHTML } from 'lit/directives/unsafe-html.js';
-export { cache } from 'lit/directives/cache.js';
+export * from './mixins/logging.js';
+export * from './mixins/signal.js';
+export * from './lit.js';
 //# sourceMappingURL=index.d.ts.map

index.js

 import { globalAlwatr } from '@alwatr/logger';
 export * from './dummy-element.js';
 export * from './smart-element.js';
-export * from './surface-element.js';
 export * from './mixins/localize.js';
 export * from './mixins/direction.js';
-export * from 'lit';
-export * from 'lit/decorators.js';
-export { map } from 'lit/directives/map.js';
-export { when } from 'lit/directives/when.js';
-export { repeat } from 'lit/directives/repeat.js';
-export { ifDefined } from 'lit/directives/if-defined.js';
-export { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-export { unsafeHTML } from 'lit/directives/unsafe-html.js';
-export { cache } from 'lit/directives/cache.js';
+export * from './mixins/logging.js';
+export * from './mixins/signal.js';
+export * from './lit.js';
 globalAlwatr.registeredList.push({
@@ -17,0 +10,0 @@ name: '@alwatr/element',

mixins/direction.d.ts

@@ -1,10 +0,11 @@
-import type { LoggerMixinInterface } from './logging.js';
-import type { Constructor } from '@alwatr/type';
-export declare class DirectionMixinInterface extends LoggerMixinInterface {
-    protected _signalListenerList: Array<unknown>;
+import type { SignalMixinInterface } from './signal.js';
+import type { Constructor, LocaleContext } from '@alwatr/type';
+export declare class DirectionMixinInterface extends SignalMixinInterface {
     protected _dirParent: HTMLElement | null;
+    protected _localeChange: (localeContext: LocaleContext) => void;
     protected _updateDir: () => void;
-    protected _localeChange: () => void;
 }
-export declare function DirectionMixin<T extends Constructor<LoggerMixinInterface>>(superClass: T): Constructor<DirectionMixinInterface> & T;
+type ComputeMode = 'locale' | 'parents' | 'computed-style';
+export declare function DirectionMixin<T extends Constructor<SignalMixinInterface>>(superClass: T, computeMode?: ComputeMode): Constructor<DirectionMixinInterface> & T;
+export {};
 //# sourceMappingURL=direction.d.ts.map

mixins/direction.js

@@ -1,14 +0,15 @@
-import { l10n } from '@alwatr/i18n';
-export function DirectionMixin(superClass) {
+import { localeContextConsumer } from '@alwatr/i18n';
+const defaultComputeStyleMode = 'parents';
+export function DirectionMixin(superClass, computeMode = defaultComputeStyleMode) {
     class DirectionMixinClass extends superClass {
         constructor() {
             super(...arguments);
-            this._signalListenerList = [];
-            this._dirParent = null;
+            /**
+             * Parent element for get direction in parents mode.
+             */
+            this._parentEl = null;
         }
         connectedCallback() {
             super.connectedCallback();
-            this._signalListenerList.push(l10n.localeChangeSignal.addListener(() => {
-                this._localeChanged();
-            }));
+            this._signalListenerList.push(localeContextConsumer.subscribe(() => this._updateDir()));
         }
@@ -18,23 +19,38 @@ /**
          */
-        _updateDir() {
+        _updateDir(dir) {
             var _a, _b;
-            this._logger.logMethod('_updateDir');
-            const dir = ((_a = this._dirParent) === null || _a === void 0 ? void 0 : _a.dir) || ((_b = l10n.locale) === null || _b === void 0 ? void 0 : _b.direction) || document.documentElement.dir;
-            this.setAttribute('dir', dir === 'rtl' ? dir : 'ltr');
-        }
-        _localeChanged() {
-            this._logger.logMethod('_localeChanged');
-            if (this._dirParent !== null) {
-                return this._updateDir();
+            this._logger.logMethodArgs('_updateDir', { dir, computeMode });
+            if (typeof dir === 'string') {
+                // console.timeEnd('_updateDir');
+                return this.setAttribute('dir', dir === 'rtl' ? dir : 'ltr');
             }
+            // console.time('_updateDir');
+            // else, calculate
+            if (computeMode === 'locale') {
+                return this._updateDir((_b = (_a = localeContextConsumer.getValue()) === null || _a === void 0 ? void 0 : _a.direction) !== null && _b !== void 0 ? _b : document.documentElement.dir);
+            }
             // else
-            let dirParent = (this.assignedSlot || this.parentNode);
-            while (dirParent != null && dirParent !== document.documentElement && !dirParent.dir) {
+            if (computeMode === 'computed-style') {
+                const dir = window.getComputedStyle(this).getPropertyValue('direction');
+                return this._updateDir(dir);
+            }
+            // else if (computeMode === 'parents')
+            if (this._parentEl !== null) {
+                return this._updateDir(this._parentEl.dir);
+            }
+            // else
+            let parentEl = (this.assignedSlot || this.parentNode);
+            while (parentEl != null && parentEl !== document.documentElement && !parentEl.dir) {
                 // prettier-ignore
-                dirParent = (dirParent.assignedSlot ||
-                    dirParent.parentNode ||
-                    dirParent.host);
+                parentEl = (parentEl.assignedSlot ||
+                    parentEl.parentNode ||
+                    parentEl.host);
             }
-            this._dirParent = (dirParent === null || dirParent === void 0 ? void 0 : dirParent.dir) ? dirParent : null;
-            return this._updateDir();
+            if (parentEl === null || parentEl === void 0 ? void 0 : parentEl.dir) {
+                this._parentEl = parentEl;
+                return this._updateDir(parentEl.dir);
+            }
+            // else
+            computeMode = 'locale';
+            this._updateDir();
         }
@@ -41,0 +57,0 @@ }

mixins/localize.d.ts

@@ -1,12 +0,7 @@
-import { l10n } from '@alwatr/i18n';
-import type { LoggerMixinInterface } from './logging.js';
-import type { Constructor } from '@alwatr/type';
-export declare class LocalizeMixinInterface extends LoggerMixinInterface {
-    protected _signalListenerList: Array<unknown>;
-    protected l10n: {
-        localize: typeof l10n.localize;
-        formatNumber: typeof l10n.formatNumber;
-    };
+import type { SignalMixinInterface } from './signal.js';
+import type { Constructor, L18eContext } from '@alwatr/type';
+export declare class LocalizeMixinInterface extends SignalMixinInterface {
+    protected _l18eContextUpdated(_l18eContext: L18eContext): void;
 }
-export declare function LocalizeMixin<T extends Constructor<LoggerMixinInterface>>(superClass: T): Constructor<LocalizeMixinInterface> & T;
+export declare function LocalizeMixin<T extends Constructor<SignalMixinInterface>>(superClass: T): Constructor<LocalizeMixinInterface> & T;
 //# sourceMappingURL=localize.d.ts.map

mixins/localize.js

@@ -1,20 +0,13 @@
-import { l10n } from '@alwatr/i18n';
+import { l18eContextConsumer } from '@alwatr/i18n';
 export function LocalizeMixin(superClass) {
     class LocalizeMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            this._signalListenerList = [];
-            this.l10n = {
-                localize: l10n.localize,
-                formatNumber: l10n.formatNumber,
-            };
-        }
         connectedCallback() {
             super.connectedCallback();
-            this._signalListenerList.push(l10n.resourceChangeSignal.addListener(() => {
-                this._l10nResourceChanged();
-            }));
+            this._signalListenerList.push(l18eContextConsumer.subscribe(this._l18eContextUpdated.bind(this)));
         }
-        _l10nResourceChanged() {
-            this._logger.logMethod('_l10nResourceChange');
+        /**
+         * On localization resource context updated.
+         */
+        _l18eContextUpdated(l18eContext) {
+            this._logger.logMethodArgs('_l18eContextUpdated', l18eContext.meta);
             this.requestUpdate();
@@ -21,0 +14,0 @@ }

mixins/logging.d.ts

 import { type AlwatrLogger } from '@alwatr/logger';
+import type { LitElement } from '../lit.js';
 import type { Constructor } from '@alwatr/type';
-import type { LitElement } from 'lit';
 export declare class LoggerMixinInterface extends LitElement {
+    /**
+     * Alwatr logger index!
+     *
+     * Element index for logger ;)
+     */
+    ali: number;
     protected _logger: AlwatrLogger;
@@ -6,0 +12,0 @@ }

mixins/logging.js

 import { createLogger } from '@alwatr/logger';
+let _lastAli = 0;
 export function LoggerMixin(superClass) {
@@ -7,3 +8,4 @@ class LoggerMixinClass extends superClass {
             super(...args);
-            this._logger = createLogger(`<${this.tagName.toLowerCase()}>`);
+            this.ali = ++_lastAli;
+            this._logger = createLogger(`<${this.tagName.toLowerCase()}-${this.ali}>`);
             this._logger.logMethod('constructor');
@@ -10,0 +12,0 @@ }

mixins/signal.d.ts

@@ -0,7 +1,8 @@
+import type { LoggerMixinInterface } from './logging.js';
+import type { ListenerSpec } from '@alwatr/signal/type.js';
 import type { Constructor } from '@alwatr/type';
-import type { LitElement } from 'lit';
-export declare class SignalMixinInterface extends LitElement {
-    protected _signalListenerList: Array<unknown>;
+export declare class SignalMixinInterface extends LoggerMixinInterface {
+    protected _signalListenerList: Array<ListenerSpec>;
 }
-export declare function SignalMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<SignalMixinInterface> & T;
+export declare function SignalMixin<T extends Constructor<LoggerMixinInterface>>(superClass: T): Constructor<SignalMixinInterface> & T;
 //# sourceMappingURL=signal.d.ts.map

mixins/signal.js

@@ -0,1 +1,2 @@
+import { unsubscribe } from '@alwatr/signal/core.js';
 export function SignalMixin(superClass) {
@@ -8,8 +9,8 @@ class SignalMixinClass extends superClass {
         disconnectedCallback() {
-            super.disconnectedCallback();
             for (const listener of this._signalListenerList) {
-                if (typeof listener.remove === 'function') {
-                    listener.remove();
-                }
+                unsubscribe(listener);
             }
+            this._signalListenerList.length = 0;
+            this._signalListenerList = [];
+            super.disconnectedCallback();
         }
@@ -16,0 +17,0 @@ }

package.json

 {
   "name": "@alwatr/element",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Elegant powerful web component (lit-element) helper mixins written in tiny TypeScript module.",
@@ -36,12 +36,12 @@ "keywords": [
   "dependencies": {
-    "@alwatr/i18n": "^0.28.0",
-    "@alwatr/logger": "^0.28.0",
-    "@alwatr/router": "^0.28.0",
+    "@alwatr/i18n": "^0.29.0",
+    "@alwatr/logger": "^0.29.0",
+    "@alwatr/router": "^0.29.0",
     "lit": "^2.6.1",
-    "tslib": "^2.4.1"
+    "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@alwatr/type": "^0.28.0"
+    "@alwatr/type": "^0.29.0"
   },
-  "gitHead": "f4f63e7db916fda3ceac8b1d448068fc46da6334"
+  "gitHead": "801487f183f8afd8cba25e0fec5d508c0b4fe809"
 }

smart-element.d.ts

@@ -6,3 +6,3 @@ /**
  */
-export declare const AlwatrSmartElement: import("@alwatr/type").Constructor<import("./mixins/signal.js").SignalMixinInterface> & import("@alwatr/type").Constructor<import("./mixins/logging.js").LoggerMixinInterface> & typeof import("lit").LitElement;
+export declare const AlwatrSmartElement: import("@alwatr/type").Constructor<import("./mixins/signal.js").SignalMixinInterface> & import("@alwatr/type").Constructor<import("./index.js").LoggerMixinInterface> & typeof import("lit").LitElement;
 //# sourceMappingURL=smart-element.d.ts.map

New alerts

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

Fixed alerts

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

Worsened metrics

Total package byte prevSize

37518

decreased by-33.96%

Number of package files

36

decreased by-18.18%

Lines of code

236

decreased by-51.44%

Dependency changes

• + Added@alwatr/i18n@0.29.0(transitive)

• + Added@alwatr/logger@0.29.0(transitive)

• + Added@alwatr/math@0.29.0(transitive)

• + Added@alwatr/router@0.29.0(transitive)

• + Added@alwatr/signal@0.29.0(transitive)

• + Added@alwatr/type@0.29.0(transitive)

• - Removed@alwatr/fetch@0.28.0(transitive)

• - Removed@alwatr/i18n@0.28.0(transitive)

• - Removed@alwatr/logger@0.28.0(transitive)

• - Removed@alwatr/router@0.28.0(transitive)

• - Removed@alwatr/signal@0.28.0(transitive)

• - Removed@alwatr/type@0.28.0(transitive)

• Updated@alwatr/i18n@^0.29.0

• Updated@alwatr/logger@^0.29.0

• Updated@alwatr/router@^0.29.0

• Updatedtslib@^2.5.0