refactor: change indentation back to spaces (#67)

tatomyr · Mar 26, 2024 · 1a78068 · 1a78068
1 parent 04a3aa3
commit 1a78068
Show file tree

Hide file tree

Showing 145 changed files with 17,416 additions and 17,411 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,3 +2,5 @@
 coverage/
 public/
 *snapshot.js
+package-lock.json
+*.svg
diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -1,6 +1,4 @@
 trailingComma: es5
-useTabs: true
-tabWidth: 2
 semi: false
 bracketSpacing: false
 arrowParens: avoid
diff --git a/README.md b/README.md
@@ -16,10 +16,10 @@ To use **Purity** in a project, you have to put in your **index.html** a root el
 
 ```html
 <html>
-	<body>
-		<div id="root"></div>
-		<script type="module" src="./main.js">
-	</body>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.js">
+  </body>
 </html>
 ```
 
@@ -45,7 +45,7 @@ Then you declare a component using the `render` tag:
 
 ```js
 const root = () => render`
-	<div id="root">Hello Purity!</div>
+  <div id="root">Hello Purity!</div>
 `
 ```
 
@@ -67,12 +67,12 @@ Since they are merely bare functions that return a string, we can embed other fu
 
 ```js
 const child = ({name}) => render`
-	<div>Hello ${name}!</div>
+  <div>Hello ${name}!</div>
 `
 
 const parent = () => render`
-	<h1>Welcome page</h1>
-	${child({name: "Guest"})}
+  <h1>Welcome page</h1>
+  ${child({name: "Guest"})}
 `
 ```
 
@@ -85,9 +85,9 @@ We can add some interactivity by binding events:
 
 ```js
 const clickable = () => render`
-	<button ::click=${() => alert("Hello!")}>
-		Click Me
-	</button>
+  <button ::click=${() => alert("Hello!")}>
+    Click Me
+  </button>
 `
 ```
 
@@ -102,18 +102,19 @@ For instance, the example below is wrong since we are trying to use `COUNT` (whi
 
 ```js
 const wrongCounter = () => {
-	const COUNT = getState().count
-
-	return render`
-		<div id="root">
-			<pre id="count">Counter: ${COUNT}</pre>
-			<button 
-				::click=${() => setState(() => ({count: COUNT /* Incorrect value! */ + 1}))}
-			>
-				Increment
-			</button>
-		</div>
-	`
+  const COUNT = getState().count
+
+  return render`
+    <div id="root">
+      <pre id="count">Counter: ${COUNT}</pre>
+      <button 
+        ::click=${() =>
+          setState(() => ({count: COUNT /* Incorrect value! */ + 1}))}
+      >
+        Increment
+      </button>
+    </div>
+  `
 }
 ```
 
@@ -124,19 +125,19 @@ The correct example would look like this:
 
 ```js
 const correctCounter = () => {
-	const COUNT = getState().count
-
-	return render`
-		<div id="root">
-			<pre id="counter">Counter: ${COUNT}</pre>
-			<button 
-				::click=${() =>
-					setState(({count}) => ({count: count /* Correct value! */ + 1}))}
-			>
-				Increment
-			</button>
-		</div>
-	`
+  const COUNT = getState().count
+
+  return render`
+    <div id="root">
+      <pre id="counter">Counter: ${COUNT}</pre>
+      <button 
+        ::click=${() =>
+          setState(({count}) => ({count: count /* Correct value! */ + 1}))}
+      >
+        Increment
+      </button>
+    </div>
+  `
 }
 ```
 
@@ -153,13 +154,13 @@ You can implement the simplest async flow using a tiny helper (you may also impo
 
 ```js
 const makeOnce = () => {
-	const calls = new Set()
-	return (id, query) => {
-		if (!calls.has(id)) {
-			calls.add(id)
-			setTimeout(query)
-		}
-	}
+  const calls = new Set()
+  return (id, query) => {
+    if (!calls.has(id)) {
+      calls.add(id)
+      setTimeout(query)
+    }
+  }
 }
 ```
 
@@ -168,37 +169,37 @@ It can be used like this:
 
 ```js
 const {mount, getState, setState} = init({
-	spinner: false,
-	stargazers_count: "-",
+  spinner: false,
+  stargazers_count: "-",
 })
 
 const url = `https://api.github.com/repos/tatomyr/purity`
 
 const getStargazers = async () => {
-	try {
-		setState(() => ({spinner: true}))
-		const {stargazers_count} = await fetch(url).then(checkResponse)
-		setState(() => ({stargazers_count, spinner: false}))
-	} catch (err) {
-		setState(() => ({stargazers_count: "🚫", spinner: false}))
-	}
+  try {
+    setState(() => ({spinner: true}))
+    const {stargazers_count} = await fetch(url).then(checkResponse)
+    setState(() => ({stargazers_count, spinner: false}))
+  } catch (err) {
+    setState(() => ({stargazers_count: "🚫", spinner: false}))
+  }
 }
 
 const once = makeOnce()
 
 const root = () => {
-	once(url, getStargazers)
-
-	return render`
-		<div id="root">
-			<pre id="stars">
-				${getState().spinner ? "⌛" : `⭐️: ${getState().stargazers_count}`}
-			</pre>
-			<button ::click=${getStargazers}>
-				Refetch
-			</button>
-		</div>
-	`
+  once(url, getStargazers)
+
+  return render`
+    <div id="root">
+      <pre id="stars">
+        ${getState().spinner ? "⌛" : `⭐️: ${getState().stargazers_count}`}
+      </pre>
+      <button ::click=${getStargazers}>
+        Refetch
+      </button>
+    </div>
+  `
 }
 
 mount(root)
@@ -234,49 +235,49 @@ To get a better understanding, let's compare two applications that differ only b
 
 ```js
 const noId = () => render`
-	<div id="root"> <!-- The entire root will be re-rendered as it's the closest `id` to the changes -->
-		<span>
-			${getState().count} <!-- The actual changes -->
-		</span>
-		<button
-			::click=${({count}) => setState({count: count + 1})}
-		>
-			Update
-		</button>
-	</div>
+  <div id="root"> <!-- The entire root will be re-rendered as it's the closest `id` to the changes -->
+    <span>
+      ${getState().count} <!-- The actual changes -->
+    </span>
+    <button
+      ::click=${({count}) => setState({count: count + 1})}
+    >
+      Update
+    </button>
+  </div>
 `
 
 const withId = () => render`
-	<div id="root">
-		<span id="count"> <!-- Only this element will be re-rendered -->
-			${getState().count}
-		</span>
-		<button
-			::click=${({count}) => setState({count: count + 1})}
-		>
-			Update
-		</button>
-	</div>
+  <div id="root">
+    <span id="count"> <!-- Only this element will be re-rendered -->
+      ${getState().count}
+    </span>
+    <button
+      ::click=${({count}) => setState({count: count + 1})}
+    >
+      Update
+    </button>
+  </div>
 `
 ```
 
 You can see the difference in the graph below:
 
 ```mermaid
 graph TD
-	subgraph State
-		state[$count: 0 -> 1 *]
-	end
-
-	subgraph withId
-		root2[#root] --> span2[span#count] --> count2[$count *] == rerender the nearest # ==> span2
-		root2 --> button2[button::click] == increment ==> state
-	end
-
-	subgraph noId
-		root[#root] --> span[span] --> count[$count *] == rerender the nearest # ==> root
-		root --> button[button::click] == increment ==> state
-	end
+  subgraph State
+    state[$count: 0 -> 1 *]
+  end
+
+  subgraph withId
+    root2[#root] --> span2[span#count] --> count2[$count *] == rerender the nearest # ==> span2
+    root2 --> button2[button::click] == increment ==> state
+  end
+
+  subgraph noId
+    root[#root] --> span[span] --> count[$count *] == rerender the nearest # ==> root
+    root --> button[button::click] == increment ==> state
+  end
 ```
 
 In the _noId_ example, after updating the state inside the span, all the app gets re-rendered since the closest node with `id` is _root_.

diff --git a/cypress.config.js b/cypress.config.js
@@ -1,5 +1,5 @@
 import {defineConfig} from "cypress"
 
 export default defineConfig({
-	e2e: {},
+  e2e: {},
 })