Enable symbol-description and import/extensions

.eslintrc

@@ -16,7 +16,6 @@
         "class-methods-use-this": "off",
         "consistent-return": "off",
         "eqeqeq": "off",
-        "guard-for-in": "off",
         "max-classes-per-file": "off",
         "new-cap": "off",
         "no-bitwise": "off",
@@ -35,23 +34,23 @@
         "no-underscore-dangle": "off",
         "no-unused-expressions": "off",
         "no-use-before-define": "off",
-        "no-void": "off",
         "prefer-const": "off",
         "prefer-destructuring": ["error", { "object": true, "array": false }],
         "prefer-rest-params": "off",
         "prefer-promise-reject-errors": "off",
-        "symbol-description": "off",
-        "import/extensions": "off",
+        "import/extensions": ["error", "always"],
+        "import/no-cycle": "off",
         "import/no-extraneous-dependencies": "off",
         "import/prefer-default-export": "off"
     },
     "overrides": [
         {
-            "files": "types/**/*.ts",
+            "files": "**/*.{ts,tsx}",
             "extends": ["airbnb-typescript/base", "prettier"],
             "rules": {
                 "@typescript-eslint/no-shadow": "off",
                 "@typescript-eslint/no-unused-expressions": "off",
+                "import/extensions": ["error", "always"],
                 "import/no-cycle": "off"
             }
         }

package.json

@@ -78,7 +78,7 @@
         "ssr": "node ssr/tests/ssr.js",
         "test:w": "web-test-runner --watch",
         "build:html": "rollup -c",
-        "prepare": "npm run test:ts && npm run test",
+        "prepare": "husky install && npm run test:ts && npm run test",
         "lint": "eslint .",
         "hook:push": "npm run lint && npm run test",
         "hook:commit": "npm run lint"
@@ -104,9 +104,9 @@
     "devDependencies": {
         "@esm-bundle/chai": "^4.3.4-fix.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
-        "@types/chai": "^4.2.18",
-        "@types/mocha": "^8.0.0",
-        "@web/test-runner": "^0.13.27",
+        "@types/chai": "^4.3.9",
+        "@types/mocha": "^8.2.3",
+        "@web/test-runner": "^0.13.31",
         "eslint": "^8.52.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^17.1.0",
@@ -118,9 +118,6 @@
         "typescript": "^5.2.2"
     },
     "prettier": {
-        "endOfLine": "lf",
-        "semi": true,
-        "singleQuote": false,
         "tabWidth": 4
     }
 }

src/context.js

@@ -92,7 +92,10 @@ export const createContext = (value) => {
     /**
      * @type {import("context").ComponentContext<any>}
      */
-    const context = () => void useProvider(Context, useHost().current);
+    const context = () => {
+        useProvider(Context, useHost().current);
+        return undefined;
+    };
 
     context.props = {
         value: {

src/element/custom-element.js

@@ -46,7 +46,11 @@ export const c = (component, base) => {
                 super();
                 this._setup();
                 this._render = () => component({ ...this._props });
-                for (const prop in values) this[prop] = values[prop];
+                for (const prop in values) {
+                    if (Object.prototype.hasOwnProperty.call(values, prop)) {
+                        this[prop] = values[prop];
+                    }
+                }
             }
 
             /**
@@ -104,7 +108,7 @@ export const c = (component, base) => {
                     };
                 });
 
-                this.symbolId = this.symbolId || Symbol();
+                this.symbolId = this.symbolId || Symbol(className);
 
                 const hooks = createHooks(
                     () => this.update(),
@@ -229,13 +233,15 @@ export const c = (component, base) => {
                 // @ts-ignore
                 const superAttrs = super.observedAttributes || [];
                 for (const prop in props) {
-                    setPrototype(
-                        this.prototype,
-                        prop,
-                        props[prop],
-                        attrs,
-                        values,
-                    );
+                    if (Object.prototype.hasOwnProperty.call(props, prop)) {
+                        setPrototype(
+                            this.prototype,
+                            prop,
+                            props[prop],
+                            attrs,
+                            values,
+                        );
+                    }
                 }
                 return Object.keys(attrs).concat(superAttrs);
             }

src/hooks/create-hooks.js

@@ -87,9 +87,11 @@ export const createHooks = (update, host, id = 0) => {
      */
     const cleanEffectsByType = (tag, unmounted) => {
         for (const index in hooks) {
-            const hook = hooks[index];
-            if (hook.effect && hook.tag === tag) {
-                hook.value = hook.effect(hook.value, unmounted);
+            if (Object.prototype.hasOwnProperty.call(hooks, index)) {
+                const hook = hooks[index];
+                if (hook.effect && hook.tag === tag) {
+                    hook.value = hook.effect(hook.value, unmounted);
+                }
             }
         }
     };

src/hooks/tests/use-effect.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks } from "../create-hooks";
-import { useEffect } from "../hooks";
+import { createHooks } from "../create-hooks.js";
+import { useEffect } from "../hooks.js";
 
 describe("src/hooks/use-effect", () => {
     /**

src/hooks/tests/use-event.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks } from "../create-hooks";
-import { useEvent } from "../custom-hooks/use-event";
+import { createHooks } from "../create-hooks.js";
+import { useEvent } from "../custom-hooks/use-event.js";
 
 describe("src/hooks/custom-hooks/use-event", () => {
     it("association of useEvent to host", (done) => {

src/hooks/tests/use-layout-effect.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks } from "../create-hooks";
-import { useLayoutEffect } from "../hooks";
+import { createHooks } from "../create-hooks.js";
+import { useLayoutEffect } from "../hooks.js";
 
 describe("src/hooks/use-effect", () => {
     /**

src/hooks/tests/use-memo.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks } from "../create-hooks";
-import { useMemo, useCallback } from "../hooks";
+import { createHooks } from "../create-hooks.js";
+import { useMemo, useCallback } from "../hooks.js";
 
 describe("src/hooks/use-callback", () => {
     it("reflection of useMemo", () => {

src/hooks/tests/use-prop.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks } from "../create-hooks";
-import { useProp } from "../custom-hooks/use-prop";
+import { createHooks } from "../create-hooks.js";
+import { useProp } from "../custom-hooks/use-prop.js";
 
 describe("src/hooks/custom-hooks/use-prop", () => {
     it("manipulation of the DOM object", () => {

src/hooks/tests/use-reducer.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks } from "../create-hooks";
-import { useReducer } from "../hooks";
+import { createHooks } from "../create-hooks.js";
+import { useReducer } from "../hooks.js";
 
 describe("src/hooks/use-state", () => {
     it("initialState", () => {

src/hooks/tests/use-ref.test.js

@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks, useRef } from "../create-hooks";
+import { createHooks, useRef } from "../create-hooks.js";
 
 describe("src/hooks/use-ref", () => {
     it("referencia persistente de creacion", () => {

src/hooks/tests/use-state.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
-import { createHooks } from "../create-hooks";
-import { useState } from "../hooks";
+import { createHooks } from "../create-hooks.js";
+import { useState } from "../hooks.js";
 
 describe("src/hooks/use-state", () => {
     it("single execution", () => {

src/render.js

@@ -388,11 +388,15 @@ export function renderChildren(children, fragment, parent, id, hydrate, isSvg) {
  */
 export function diffProps(node, props, nextProps, handlers, isSvg) {
     for (const key in props) {
-        !(key in nextProps) &&
-            setProperty(node, key, props[key], null, isSvg, handlers);
+        if (Object.prototype.hasOwnProperty.call(props, key)) {
+            !(key in nextProps) &&
+                setProperty(node, key, props[key], null, isSvg, handlers);
+        }
     }
     for (const key in nextProps) {
-        setProperty(node, key, props[key], nextProps[key], isSvg, handlers);
+        if (Object.prototype.hasOwnProperty.call(nextProps, key)) {
+            setProperty(node, key, props[key], nextProps[key], isSvg, handlers);
+        }
     }
 }
 
@@ -456,9 +460,11 @@ export function setProperty(node, key, prevValue, nextValue, isSvg, handlers) {
 
         if (nextIsObject) {
             for (const key in nextValue) {
-                const value = nextValue[key];
-                if (prevIsObject && prevValue[key] === value) continue;
-                setPropertyStyle(style, key, value);
+                if (Object.prototype.hasOwnProperty.call(nextValue, key)) {
+                    const value = nextValue[key];
+                    if (prevIsObject && prevValue[key] === value) continue;
+                    setPropertyStyle(style, key, value);
+                }
             }
         } else {
             style.cssText = nextValue;

src/tests/element-hooks.test.js

@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { useRef } from "../hooks/create-hooks";
+import { useRef } from "../hooks/create-hooks.js";
 import { customElementScope } from "./element.test.js";
 import { html } from "../../html.js";
 

src/tests/element.test.js

@@ -374,7 +374,7 @@ describe("src/element", () => {
 
         let node = customElementScope(Wc);
 
-        let value = Symbol();
+        let value = Symbol("value");
 
         document.body.appendChild(node);
 

src/tests/internal/set-prototype.test.js

@@ -4,7 +4,7 @@ import {
     filterValue,
     reflectValue,
     getAttr,
-} from "../../element/set-prototype";
+} from "../../element/set-prototype.js";
 
 describe("internal: getAttr", () => {
     it("check getAttr", () => {

src/tests/render-children.test.js

@@ -41,22 +41,22 @@ describe("src/render#children", () => {
         const root = document.createElement("div");
         const ref = {};
         const children = [{}, {}, [{}], html`<span ref=${ref} />`];
-        const id = Symbol();
+        const id = Symbol("id");
         const fragment = renderChildren(children, null, root, id, false);
         const childNodes = fragmentToChildNodes(fragment);
         expect(childNodes).to.deep.equal([ref.current]);
     });
     it("Render: Size", () => {
         const root = document.createElement("div");
         const children = [...Array(10)].map(() => html`<span></span>`);
-        const id = Symbol();
+        const id = Symbol("id");
         const fragment = renderChildren(children, null, root, id, false);
         const childNodes = fragmentToChildNodes(fragment);
         expect(childNodes.length).to.equal(children.length);
     });
     it("nested lists", () => {
         const root = document.createElement("div");
-        const id = Symbol();
+        const id = Symbol("id");
         let count = 0;
         const list = [...Array(10)].map((_, index) => {
             const list = [...Array(5)].map(
@@ -76,7 +76,7 @@ describe("src/render#children", () => {
     });
     it("Render: Simple list rendering", () => {
         const root = document.createElement("div");
-        const id = Symbol();
+        const id = Symbol("id");
         let fragment;
         /**
          *
@@ -110,7 +110,7 @@ describe("src/render#children", () => {
     });
 
     it("Render: Simple list rendering with keyes", () => {
-        const id = Symbol();
+        const id = Symbol("id");
         const host = document.createElement("div");
         let size = 100;
         let fragment;

src/tests/render.test.js

@@ -159,7 +159,9 @@ describe("src/render", () => {
         );
 
         for (let key in attrs) {
-            expect(el.getAttribute(key)).to.equal(attrs[key].expect);
+            if (Object.prototype.hasOwnProperty.call(attrs, key)) {
+                expect(el.getAttribute(key)).to.equal(attrs[key].expect);
+            }
         }
     });
 

src/tests/template.test.js

@@ -1,6 +1,6 @@
 import { expect } from "@esm-bundle/chai";
 import { html } from "../../html.js";
-import { template } from "../template";
+import { template } from "../template.js";
 
 describe("src/template", () => {
     it("check", () => {

src/tests/utils.test.js

@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { isEqualArray, isFunction, isObject } from "../utils";
+import { isEqualArray, isFunction, isObject } from "../utils.js";
 
 describe("src/utils", () => {
     it("isEqualArray", () => {