@pap-it/system-base - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/src/component.d.ts

@@ -1,12 +0,14 @@
-import { Config, FunctionCallback, RenderType } from "./types";
+import { Config, FunctionCallback, RenderType, PropertyConfig } from "./types";
 export declare class Base extends HTMLElement {
     static style?: string;
     static styles?: string[];
+    static __propertyOptions: Record<string, PropertyConfig>;
     protected callAfterUpdate: (Function | FunctionCallback)[];
     protected render_mode: 'greedy' | 'smart';
     protected render_style_mode: 'lazy' | 'smart';
-    private attributeObserver;
-    private _pendingOperations;
+    protected hasrendered: boolean;
+    protected attributeinit: boolean;
     private templateComperator;
     private styleComperator;
+    private delayedAttributes;
     connected: boolean;
@@ -19,2 +21,3 @@ originalHTML: string;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    firstUpdate(): void;
     protected handleblur: () => void;
@@ -27,4 +30,5 @@ protected handlefocus: () => void;
     debouncedRequestUpdate(): void;
-    firstUpdate(): void;
     render(config?: any): RenderType;
+    private initAttributes;
+    private updateAttribute;
     private flushHTML;
@@ -31,0 +35,0 @@ private renderStyle;

dist/src/component.js

 import { __decorate } from "tslib";
-import { NextParent, property, debounce } from "@pap-it/system-utils";
+import { NextParent, property, debounce, convertFromString } from "@pap-it/system-utils";
 // NOTE should this be there?
@@ -12,3 +12,5 @@ // export interface Base extends HTMLElement { }
         this.render_style_mode = 'lazy';
-        this._pendingOperations = [];
+        this.hasrendered = false;
+        this.attributeinit = false;
+        this.delayedAttributes = {};
         this.connected = false;
@@ -33,22 +35,10 @@ this.originalHTML = "";
         this.attachShadow({ mode: 'open', ...(config ? config : {}) });
+        // TODO should implement the function that calls then if fails calls later too
+        this.updateAttribute = debounce(this.updateAttribute, 10);
         this.callAfterUpdate.push(this.firstUpdate);
     }
     connectedCallback() {
+        this.attributeinit = false;
+        this.debouncedRequestUpdate();
         this.connected = true;
-        this.debouncedRequestUpdate();
-        // Create an observer instance linked to a callback function
-        this.attributeObserver = new MutationObserver((mutationsList, observer) => {
-            // Look through all mutations that just occured
-            for (let mutation of mutationsList) {
-                // If the attribute modified is one we are tracking
-                if (mutation.type === 'attributes' && mutation.attributeName) {
-                    this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, this.getAttribute(mutation.attributeName));
-                }
-            }
-        });
-        // Start observing the node with configured parameters
-        // attributes: true indicates we want to observe attribute changes
-        this.attributeObserver.observe(this, { attributes: true });
-        this._pendingOperations.forEach(o => o());
-        this._pendingOperations = [];
         this.dispatchEvent(new Event('connected'));
@@ -58,8 +48,23 @@ }
         this.connected = false;
-        this.attributeObserver.disconnect();
         this.dispatchEvent(new Event('disconnected'));
     }
     attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
         // implement something
+        if (!this.delayedAttributes[name]) {
+            if (Base.__propertyOptions[name]) {
+                this[name + "internal"] = true;
+                this[Base.__propertyOptions[name].propertyKey] = convertFromString(newValue, Base.__propertyOptions[name].type);
+            }
+        }
+        else {
+            delete this.delayedAttributes[name];
+            this[Base.__propertyOptions[name].propertyKey] = convertFromString(newValue, Base.__propertyOptions[name].type);
+        }
     }
+    firstUpdate() {
+        this.hasrendered = true;
+        this.updateAttribute();
+    }
     getStyle() {
@@ -128,3 +133,2 @@ var _a;
     debouncedRequestUpdate() { }
-    firstUpdate() { }
     render(config) {
@@ -134,2 +138,32 @@ return 'Hello From Base Class';
     // helper functions 
+    initAttributes() {
+        if (this.attributeinit)
+            return;
+        this.attributeinit = true;
+        // we need to check if we have any initial values ?
+        const a = this.attributes;
+        for (let i = 0; i < a.length; i++) {
+            const name = a[i].name;
+            if (Base.__propertyOptions[name]) {
+                let value = a[i].value;
+                if (value === "")
+                    value = "true";
+                this[Base.__propertyOptions[name].propertyKey] = convertFromString(value, Base.__propertyOptions[name].type);
+            }
+        }
+    }
+    updateAttribute() {
+        if (this.hasrendered) {
+            // we call this each time but it will probably just cancel anyway..
+            this.initAttributes();
+            for (let name in this.delayedAttributes) {
+                const value = this.delayedAttributes[name];
+                if (value === undefined)
+                    this.removeAttribute(name);
+                else {
+                    this.setAttribute(name, value);
+                }
+            }
+        }
+    }
     flushHTML(node) {
@@ -181,2 +215,3 @@ node.childNodes.forEach(child => {
             return;
+        this.hasrendered = true;
         // flush the html
@@ -381,4 +416,5 @@ while (this.templateComperator.firstChild) {
 }
+Base.__propertyOptions = {};
 __decorate([
     property({ rerender: false, type: Boolean })
 ], Base.prototype, "hasFocus", void 0);

dist/src/types.d.ts

@@ -11,2 +11,6 @@ export type FunctionCallback = {
 };
+export type PropertyConfig = {
+    propertyKey: string;
+    type: Function;
+};
 export {};

package.json

 {
   "name": "@pap-it/system-base",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "scripts": {
@@ -37,8 +37,8 @@ "init": "sh .scripts/init.sh",
   "dependencies": {
-    "@pap-it/system-utils": "1.0.8"
+    "@pap-it/system-utils": "1.0.9"
   },
   "devDependencies": {
     "eslint": "^8.53.0",
-    "@pap-it/system-showcase": "1.0.8",
-    "@pap-it/typography": "1.0.8",
+    "@pap-it/system-showcase": "1.0.9",
+    "@pap-it/typography": "1.0.9",
     "esbuild": "^0.17.18",
@@ -45,0 +45,0 @@ "node-html-parser": "^6.1.5",

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

38818

increased by5.35%

Lines of code

535

increased by9.41%

Dependency changes

• + Added@pap-it/system-utils@1.0.9(transitive)

• - Removed@pap-it/system-utils@1.0.8(transitive)

• Updated@pap-it/system-utils@1.0.9