Merge pull request #126 from aidenybai/staging

.eslintignore

@@ -1 +1,2 @@
-**/*.js
+**/*.js
+node_modules/

README.md

@@ -2,7 +2,7 @@
 
 ### 3kb library for tiny web apps.
 
-Sometimes, all you want to do is to try and do something—No boilerplate, bundlers, or complex build processes. Lucia aims to do this, providing an augmentation layer for your logic, allowing you to build just what you need with minimal effort and time.
+Sometimes, all you want to do is to try and do something—No boilerplate, bundlers, or complex build processes. Lucia aims to do this, providing an augmentation layer for your logic, allowing you to bind attributes to your HTML to add interactivity without writing any extra JavaScript.
 
 [![CI](https://img.shields.io/github/workflow/status/aidenybai/lucia/test-runner?color=7460E1&labelColor=1D1E32&style=flat-square&label=build)](https://img.shields.io/github/workflow/status/aidenybai/lucia)
 ![Code Size](https://badgen.net/badgesize/brotli/https/unpkg.com/lucia?color=7460E1&labelColor=1D1E32&style=flat-square&label=size) ![NPM Version](https://img.shields.io/npm/v/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) ![Code Coverage](https://img.shields.io/coveralls/github/aidenybai/lucia?color=7460E1&labelColor=1D1E32&style=flat-square)

src/core/compile.ts

@@ -10,7 +10,7 @@ export const isListRenderScope = (el: HTMLElement): boolean => {
 };
 
 export const isUnderListRenderScope = (el: HTMLElement): boolean => {
-  return el.parentElement && el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`);
+  return !!el.parentElement && el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`);
 };
 
 export const createASTNode = (el: HTMLElement, state: State): ASTNode | undefined => {
@@ -28,10 +28,11 @@ export const createASTNode = (el: HTMLElement, state: State): ASTNode | undefine
 
 /* istanbul ignore next */
 export const collectRefs = (): Refs => {
-  const refElements = document.querySelectorAll(`[${DIRECTIVE_PREFIX}ref]`);
+  const refDirective = `${DIRECTIVE_PREFIX}ref`;
+  const refElements = document.querySelectorAll(`[${refDirective}]`);
   const refs = {};
   refElements.forEach((refElement) => {
-    const name = refElement.getAttribute(`${DIRECTIVE_PREFIX}ref`);
+    const name = refElement.getAttribute(refDirective);
     if (name) refs[name] = refElement;
   });
   return refs;

src/core/directives/bind.ts

@@ -13,7 +13,7 @@ export const bindDirective = ({ el, parts, data, state }: DirectiveProps): void
       if (typeof classes === 'string') {
         return el.setAttribute('class', formatAcceptableWhitespace(`${el.className} ${classes}`));
         // Accept providing an array of classes and appending them
-      } else if (classes instanceof Array) {
+      } else if (Array.isArray(classes)) {
         return el.setAttribute(
           'class',
           formatAcceptableWhitespace(`${el.className} ${classes.join(' ')}`)

src/core/reactive.ts

@@ -4,8 +4,8 @@ import { State, Watchers } from '../models/structs';
 export const arrayEquals = (firstArray: unknown[], secondArray: unknown[]): boolean => {
   // Deep Array equality check
   return (
-    firstArray instanceof Array &&
-    secondArray instanceof Array &&
+    Array.isArray(firstArray) &&
+    Array.isArray(secondArray) &&
     firstArray.length === secondArray.length &&
     firstArray.every((value: unknown, i: number) => value === secondArray[i])
   );
@@ -30,14 +30,13 @@ export const reactive = (
     set(target: UnknownKV, key: string, value: unknown): boolean {
       // Currently double renderes - bad perf
       const hasArrayMutationKey = !isNaN(Number(key)) || key === 'length';
-      const props = [key];
+      const props = hasArrayMutationKey ? [] : [key];
 
-      if (target instanceof Array && hasArrayMutationKey) {
+      if (Array.isArray(target) && hasArrayMutationKey) {
         const keys = Object.keys(state).filter((prop) => {
           return (
             // Find the array that equals the target
-            state[prop] instanceof Array &&
-            arrayEquals(state[prop] as unknown[], target as unknown[])
+            Array.isArray(state[prop]) && arrayEquals(state[prop] as unknown[], target as unknown[])
           );
         });
         props.push(...keys);

yarn.lock

@@ -5856,9 +5856,9 @@ trim-newlines@^3.0.0:
   integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
 
 ts-jest@^26.4.2:
-  version "26.5.4"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.4.tgz#207f4c114812a9c6d5746dd4d1cdf899eafc9686"
-  integrity sha512-I5Qsddo+VTm94SukBJ4cPimOoFZsYTeElR2xy6H2TOVs+NsvgYglW8KuQgKoApOKuaU/Ix/vrF9ebFZlb5D2Pg==
+  version "26.5.5"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.5.tgz#e40481b6ee4dd162626ba481a2be05fa57160ea5"
+  integrity sha512-7tP4m+silwt1NHqzNRAPjW1BswnAhopTdc2K3HEkRZjF0ZG2F/e/ypVH0xiZIMfItFtD3CX0XFbwPzp9fIEUVg==
   dependencies:
     bs-logger "0.x"
     buffer-from "1.x"