style: switch indentation to 2 spaces

.eslintrc.json

@@ -42,8 +42,8 @@
             "allowAllPropertiesOnSameLine": true
         }],
         "react/jsx-first-prop-new-line": [2, "multiline"],
-        "react/jsx-indent": [2, 4],
-        "react/jsx-indent-props": [2, 4],
+        "react/jsx-indent": [2, 2],
+        "react/jsx-indent-props": [2, 2],
         "prettier/prettier": 2
     },
     "settings": {

.prettierrc.json

@@ -1,7 +1,7 @@
 {
-    "bracketSpacing": true,
-    "semi": true,
-    "singleQuote": false,
-    "tabWidth": 4,
-    "trailingComma": "all"
+  "bracketSpacing": true,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all"
 }

config/mocks/DOMRect.ts

@@ -1,23 +1,23 @@
 export default class DOMRect {
-    bottom = 0;
-    left = 0;
-    right = 0;
-    top = 0;
-    constructor(
-        // eslint-disable-next-line no-unused-vars
-        public x = 0,
-        // eslint-disable-next-line no-unused-vars
-        public y = 0,
-        // eslint-disable-next-line no-unused-vars
-        public width = 0,
-        // eslint-disable-next-line no-unused-vars
-        public height = 0,
-    ) {
-        this.left = x;
-        this.top = y;
-        this.right = x + width;
-        this.bottom = y + height;
-    }
+  bottom = 0;
+  left = 0;
+  right = 0;
+  top = 0;
+  constructor(
+    // eslint-disable-next-line no-unused-vars
+    public x = 0,
+    // eslint-disable-next-line no-unused-vars
+    public y = 0,
+    // eslint-disable-next-line no-unused-vars
+    public width = 0,
+    // eslint-disable-next-line no-unused-vars
+    public height = 0,
+  ) {
+    this.left = x;
+    this.top = y;
+    this.right = x + width;
+    this.bottom = y + height;
+  }
 }
 
 Object.assign(window, { DOMRect });

config/mocks/ResizeObserver.ts

@@ -1,13 +1,13 @@
 export default class ResizeObserver {
-    observe() {
-        // do nothing
-    }
-    unobserve() {
-        // do nothing
-    }
-    disconnect() {
-        // do nothing
-    }
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    // do nothing
+  }
 }
 
 Object.assign(window, { ResizeObserver });

demo/src/App.tsx

@@ -5,34 +5,34 @@ import { Clock } from "./Clock";
 import "./styles.css";
 
 export default function App(): JSX.Element {
-    const [usingPortal, setUsingPortal] = React.useState(false);
-    const [ref, reflection] = useMirror({ className: "Frame" });
-    return (
-        <div className="App">
-            <h1>React Mirror Demo</h1>
-            <button
-                className="Button"
-                disabled={usingPortal}
-                onClick={(): void => setUsingPortal(true)}
-            >
-                Start thinking with portals!
-            </button>
+  const [usingPortal, setUsingPortal] = React.useState(false);
+  const [ref, reflection] = useMirror({ className: "Frame" });
+  return (
+    <div className="App">
+      <h1>React Mirror Demo</h1>
+      <button
+        className="Button"
+        disabled={usingPortal}
+        onClick={(): void => setUsingPortal(true)}
+      >
+        Start thinking with portals!
+      </button>
 
-            <div className="Demo">
-                <div className="Frame" ref={ref}>
-                    <input className="Input" placeholder="type something..." />
-                    <div style={{ padding: 10 }}>Mirror mirror in my dom</div>
-                    <Clock />
-                </div>
-
-                {usingPortal ? (
-                    <Window onClose={(): void => setUsingPortal(false)}>
-                        {reflection}
-                    </Window>
-                ) : (
-                    reflection
-                )}
-            </div>
+      <div className="Demo">
+        <div className="Frame" ref={ref}>
+          <input className="Input" placeholder="type something..." />
+          <div style={{ padding: 10 }}>Mirror mirror in my dom</div>
+          <Clock />
         </div>
-    );
+
+        {usingPortal ? (
+          <Window onClose={(): void => setUsingPortal(false)}>
+            {reflection}
+          </Window>
+        ) : (
+          reflection
+        )}
+      </div>
+    </div>
+  );
 }

demo/src/Clock.tsx

@@ -2,30 +2,30 @@ import * as React from "react";
 import "./clock.css";
 
 function useCurrent(): Date {
-    const [date, setDate] = React.useState(new Date());
-    React.useEffect(() => {
-        const timeout = setTimeout(() => setDate(new Date()), 300);
-        return (): void => clearTimeout(timeout);
-    }, [date, setDate]);
-    return date;
+  const [date, setDate] = React.useState(new Date());
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setDate(new Date()), 300);
+    return (): void => clearTimeout(timeout);
+  }, [date, setDate]);
+  return date;
 }
 
 export function Clock(): JSX.Element {
-    const date = useCurrent();
-    const ratios = {
-        Second: date.getSeconds() / 60,
-        Minute: date.getMinutes() / 60,
-        Hour: (date.getHours() % 12) / 12,
-    };
-    return (
-        <div className="Clock Face" data-name="MyClock">
-            {Object.entries(ratios).map(([cls, ratio]) => (
-                <span
-                    key={cls}
-                    className={`Clock Hand ${cls}`}
-                    style={{ transform: `rotate(${ratio * 360}deg)` }}
-                ></span>
-            ))}
-        </div>
-    );
+  const date = useCurrent();
+  const ratios = {
+    Second: date.getSeconds() / 60,
+    Minute: date.getMinutes() / 60,
+    Hour: (date.getHours() % 12) / 12,
+  };
+  return (
+    <div className="Clock Face" data-name="MyClock">
+      {Object.entries(ratios).map(([cls, ratio]) => (
+        <span
+          key={cls}
+          className={`Clock Hand ${cls}`}
+          style={{ transform: `rotate(${ratio * 360}deg)` }}
+        ></span>
+      ))}
+    </div>
+  );
 }

demo/src/Window.tsx

@@ -2,24 +2,24 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 export function Window({
-    onClose,
-    children,
+  onClose,
+  children,
 }: {
-    onClose: () => void;
-    children: React.ReactNode;
+  onClose: () => void;
+  children: React.ReactNode;
 }): JSX.Element {
-    const portalWindow = React.useMemo(() => {
-        const _window = window.open(
-            "",
-            "React Mirror Portal Test",
-            "width=400,height=400",
-        );
-        _window?.addEventListener("beforeunload", onClose);
-        return _window;
-    }, [onClose]);
-    const portal = React.useMemo(() => {
-        if (!portalWindow?.document?.body) return;
-        return ReactDOM.createPortal(children, portalWindow.document.body);
-    }, [children, portalWindow]);
-    return <>{portal}</>;
+  const portalWindow = React.useMemo(() => {
+    const _window = window.open(
+      "",
+      "React Mirror Portal Test",
+      "width=400,height=400",
+    );
+    _window?.addEventListener("beforeunload", onClose);
+    return _window;
+  }, [onClose]);
+  const portal = React.useMemo(() => {
+    if (!portalWindow?.document?.body) return;
+    return ReactDOM.createPortal(children, portalWindow.document.body);
+  }, [children, portalWindow]);
+  return <>{portal}</>;
 }

package.json

@@ -30,7 +30,7 @@
         "lib"
     ],
     "scripts": {
-        "lint": "eslint . --ext .js,.ts",
+        "lint": "eslint . --ext .js,.ts,.jsx,.tsx",
         "build": "webpack --mode=production",
         "build-watch": "webpack --mode=development --watch",
         "build-types": "tsc --declaration --emitDeclarationOnly --project tsconfig.prod.json",

src/__mocks__.ts

@@ -1,25 +1,25 @@
 export function addDomNode() {
-    const domNode = document.createElement("div");
-    document.body.appendChild(domNode);
-    const node0 = document.createComment("comment node");
-    document.appendChild(node0);
-    const node1 = document.createElement("div");
-    domNode.appendChild(node1);
-    node1.className = "class1 one";
-    node1.setAttribute("attr", "[value");
-    const node2 = document.createElement("input");
-    node1.appendChild(node2);
-    node2.className = "class2 two";
-    node2.value = "input-value";
-    const node3 = document.createTextNode("text content");
-    domNode.appendChild(node3);
-    return domNode;
+  const domNode = document.createElement("div");
+  document.body.appendChild(domNode);
+  const node0 = document.createComment("comment node");
+  document.appendChild(node0);
+  const node1 = document.createElement("div");
+  domNode.appendChild(node1);
+  node1.className = "class1 one";
+  node1.setAttribute("attr", "[value");
+  const node2 = document.createElement("input");
+  node1.appendChild(node2);
+  node2.className = "class2 two";
+  node2.value = "input-value";
+  const node3 = document.createTextNode("text content");
+  domNode.appendChild(node3);
+  return domNode;
 }
 
 export function addDomStyles() {
-    const domStyle = document.createElement("style");
-    document.head.appendChild(domStyle);
-    domStyle.innerHTML = `
+  const domStyle = document.createElement("style");
+  document.head.appendChild(domStyle);
+  domStyle.innerHTML = `
         @charset "utf-8";
         @font-face {
             font-family: "Open Sans";
@@ -58,5 +58,5 @@ export function addDomStyles() {
             width: 20px;
         }
     `;
-    return domStyle;
+  return domStyle;
 }

src/__tests__/index.test.ts

@@ -1,13 +1,13 @@
 describe("Entry", () => {
-    it("exports expected modules", async () => {
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        expect(require("../")).toMatchInlineSnapshot(`
+  it("exports expected modules", async () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    expect(require("../")).toMatchInlineSnapshot(`
             Object {
               "Frame": [Function],
               "Mirror": [Function],
               "Reflection": [Function],
               "useMirror": [Function],
             }
         `);
-    });
+  });
 });

src/components/Element.tsx

@@ -1,28 +1,28 @@
 import * as React from "react";
 
 export type ElementProps<T extends string> =
-    T extends keyof JSX.IntrinsicElements
-        ? JSX.IntrinsicElements[T]
-        : JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
+  T extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[T]
+    : JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
 
 type DOMElement<T extends string> = T extends keyof HTMLElementTagNameMap
-    ? HTMLElementTagNameMap[T]
-    : never;
+  ? HTMLElementTagNameMap[T]
+  : never;
 
 type DOMElementProps<T extends string> = {
-    tagName: T;
-    domRef?: React.Ref<DOMElement<T>>;
+  tagName: T;
+  domRef?: React.Ref<DOMElement<T>>;
 } & ElementProps<T>;
 
 export function Element<T extends string>({
-    children,
-    domRef,
-    tagName,
-    ...props
+  children,
+  domRef,
+  tagName,
+  ...props
 }: DOMElementProps<T>) {
-    return React.createElement(
-        tagName.toLowerCase(),
-        { ...props, ref: domRef },
-        ...(Array.isArray(children) ? children : [children]),
-    );
+  return React.createElement(
+    tagName.toLowerCase(),
+    { ...props, ref: domRef },
+    ...(Array.isArray(children) ? children : [children]),
+  );
 }