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",
@@ -40,18 +39,19 @@
         "prefer-destructuring": ["error", { "object": true, "array": false }],
         "prefer-rest-params": "off",
         "prefer-promise-reject-errors": "off",
-        "symbol-description": "off",
         "import/extensions": "off",
+        "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": "off",
                 "import/no-cycle": "off"
             }
         }

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/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.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/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);
+            }
         }
     });
 

ssr/tag.js

@@ -26,27 +26,33 @@ export class Attributes {
     toString() {
         const attrs = new Map();
         for (let prop in this) {
-            const value = this[prop];
-            const type = typeof value;
+            if (Object.prototype.hasOwnProperty.call(this, prop)) {
+                const value = this[prop];
+                const type = typeof value;
 
-            if (INTERNAL_PROPS[prop] || type === "function" || prop[0] === "_")
-                continue;
+                if (
+                    INTERNAL_PROPS[prop] ||
+                    type === "function" ||
+                    prop[0] === "_"
+                )
+                    continue;
 
-            const attr =
-                prop === "className"
-                    ? "class"
-                    : prop.replace(
-                          /([\w])([A-Z])/g,
-                          (all, before, after) =>
-                              `${before}-${after.toLowerCase()}`,
-                      );
+                const attr =
+                    prop === "className"
+                        ? "class"
+                        : prop.replace(
+                              /([\w])([A-Z])/g,
+                              (all, before, after) =>
+                                  `${before}-${after.toLowerCase()}`,
+                          );
 
-            if (type === "boolean") {
-                if (value) attrs.set(attr);
-            } else if (type === "object") {
-                attrs.set(attr, JSON.stringify(value));
-            } else {
-                attrs.set(attr, value);
+                if (type === "boolean") {
+                    if (value) attrs.set(attr);
+                } else if (type === "object") {
+                    attrs.set(attr, JSON.stringify(value));
+                } else {
+                    attrs.set(attr, value);
+                }
             }
         }
         const list = [...attrs];