@fboes/formwerk - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

CHANGELOG.md

 # Changelog
 
+## 1.0.3
+
+- Moved as much as possible to `connectedCallback`
+
+## 1.0.2
+
 - Fixed example URL in documentation
@@ -4,0 +10,0 @@

dist/formwerk.js

@@ -19,6 +19,8 @@ const _html = (html) => {
     constructor() {
-        super();
+        super(...arguments);
         this._values = [];
         this._options = [];
         this.input = document.createElement("input");
+    }
+    connectedCallback() {
         const options = this.getAttribute("options");
@@ -55,3 +57,7 @@ const values = this.getAttribute("values");
     constructor() {
-        super();
+        super(...arguments);
+        this.output = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this._addHtml();
@@ -210,3 +216,7 @@ this.input = this.querySelector("input, select, textarea");
     constructor() {
-        super();
+        super(...arguments);
+        this.formGroup = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
         this._addHtml();
@@ -254,2 +264,5 @@ this.formGroup = this.querySelector('[role="group"]');
     drawOptions() {
+        if (!this.formGroup) {
+            return;
+        }
         this.formGroup.innerHTML = this._options
@@ -277,4 +290,4 @@ .map((option, index) => {
 export class FormwerkTextarea extends FormwerkInput {
-    constructor() {
-        super();
+    connectedCallback() {
+        super.connectedCallback();
         if (this.getAttribute("autogrow")) {
@@ -281,0 +294,0 @@ this.input.style.overflow = "hidden";

eslint.config.js

@@ -24,4 +24,4 @@ import globals from "globals";
       jsdoc,
-    }
+    },
   },
 ];

package.json

 {
   "name": "@fboes/formwerk",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Web components for improved HTML form elements.",
@@ -5,0 +5,0 @@ "main": "dist/formwerk.js",

README.md

@@ -53,2 +53,4 @@ # Formwerk
 
+Be aware that changing the attributes of the web components after mounting these to the DOM does not apply any further changes. Instead change the _properties_ of the web components.
+
 ## Attributes
@@ -55,0 +57,0 @@

src/formwerk.ts

@@ -36,4 +36,3 @@ type FormwerkTypeToggle = {
 
-  constructor() {
-    super();
+  connectedCallback() {
     const options = this.getAttribute("options");
@@ -75,6 +74,6 @@ const values = this.getAttribute("values");
 export class FormwerkInput extends FormwerkElement {
-  output: HTMLOutputElement | null;
+  output: HTMLOutputElement | null = null;
 
-  constructor() {
-    super();
+  connectedCallback() {
+    super.connectedCallback();
     this._addHtml();
@@ -263,6 +262,6 @@ this.input = this.querySelector("input, select, textarea") as
 export class FormwerkCheckboxes extends FormwerkElement {
-  formGroup: HTMLDivElement;
+  formGroup: HTMLDivElement | null = null;
 
-  constructor() {
-    super();
+  connectedCallback() {
+    super.connectedCallback();
     this._addHtml();
@@ -320,2 +319,5 @@ this.formGroup = this.querySelector('[role="group"]') as HTMLDivElement;
   drawOptions() {
+    if (!this.formGroup) {
+      return;
+    }
     this.formGroup.innerHTML = this._options
@@ -349,4 +351,4 @@ .map((option: FormwerkOption, index: number) => {
 export class FormwerkTextarea extends FormwerkInput {
-  constructor() {
-    super();
+  connectedCallback() {
+    super.connectedCallback();
 
@@ -353,0 +355,0 @@ if (this.getAttribute("autogrow")) {

types/formwerk.d.ts

@@ -10,3 +10,3 @@ type FormwerkOption = string | {
     input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    constructor();
+    connectedCallback(): void;
     set options(options: FormwerkOption[]);
@@ -19,3 +19,3 @@ get options(): FormwerkOption[];
     output: HTMLOutputElement | null;
-    constructor();
+    connectedCallback(): void;
     protected _addToggleButton(): void;
@@ -33,4 +33,4 @@ protected _addHtml(): void;
 export declare class FormwerkCheckboxes extends FormwerkElement {
-    formGroup: HTMLDivElement;
-    constructor();
+    formGroup: HTMLDivElement | null;
+    connectedCallback(): void;
     protected _addHtml(): void;
@@ -41,3 +41,3 @@ protected _syncAttributes(): void;
 export declare class FormwerkTextarea extends FormwerkInput {
-    constructor();
+    connectedCallback(): void;
     protected _autogrow(): void;
@@ -44,0 +44,0 @@ protected _addHtml(): void;

No alert changes

Improved metrics

Total package byte prevSize

46265

increased by1.91%

Lines of code

842

increased by1.81%

Number of lines in readme file

151

increased by1.34%

No dependency changes