Formatting updates (#680)

Co-authored-by: Atila Fassina <[email protected]>

src/routes/advanced-concepts/fine-grained-reactivity.mdx

@@ -44,7 +44,7 @@ const [count, setCount] = createSignal(1);
 
 console.log(count()); // prints "1"
 
-setCount(0); // modifies the count value to 0
+setCount(0); // changes count to 0
 
 console.log(count()); // prints "0"
 ```

src/routes/concepts/context.mdx

@@ -51,7 +51,7 @@ const Provider = (props) => (
 
 However, if you need to access multiple values, they must be passed as an object literal, or using double curly braces (`{{ }}`):
 
-```jsx
+```jsx {15-19}
 import { createContext, createSignal } from "solid-js";
 
 const MyContext = createContext("default value");
@@ -83,7 +83,7 @@ export const Provider = (props) => {
 Once the values are available to all the components in the context's component tree, they can be accessed using the [`useContext`](/reference/component-apis/use-context) utility.
 This utility takes in the context object and returns the value(s) passed to the `Provider`:
 
-```jsx
+```jsx {10}
 import { createContext, useContext } from "solid-js";
 
 const MyContext = createContext();
@@ -107,7 +107,7 @@ export const App = () => (
 When you are passing multiple values into the `Provider`, you can destructure the context object to access the values you need.
 This provides a readable way to access the values you need without having to access the entire context object:
 
-```jsx
+```jsx {26}
 import { createContext, useContext, createSignal } from "solid-js";
 
 const MyContext = createContext();
@@ -119,7 +119,6 @@ const Provider = (props) => {
 		foo: "bar",
 		obj: true,
 	};
-	const [signal, setSignal] = createSignal("example signal");
 	return (
 		<MyContext.Provider
 			value={{
@@ -134,7 +133,7 @@ const Provider = (props) => {
 };
 
 const Child = () => {
-	const { stringVal, numberVal } = useContext(MyContext); // only access the values you need through destructuring
+	const { stringVal, numberVal } = useContext(MyContext);
 	return (
 		<>
 			<h1>{stringVal}</h1>
@@ -218,72 +217,71 @@ export function CounterProvider(props) {
 [Signals](/concepts/signals) offer a way to synchronize and manage data shared across your components using context.
 You can pass a signal directly to the `value` prop of the `Provider` component, and any changes to the signal will be reflected in all components that consume the context.
 
-    	<TabsCodeBlocks>
-    				<div id="App.jsx">
-    				```jsx
-    	import Counter from "./counter";
-    	import { CounterProvider } from "./Context";
-	import { Child } from "./Child";
-
-    	export function App() {
-    		return (
-    			<CounterProvider count={1}>
-    				<h1>Welcome to Counter App</h1>
-    				<Child />
-    			</CounterProvider>
-    		)
-    	}
-    	```
-    				</div>
-    <div id="Context.jsx">
-        	```jsx
-    	import { createSignal, createContext, useContext } from "solid-js";
-
-    	const CounterContext = createContext(); // create context
-
-    	export function CounterProvider(props) {
-    	const [count, setCount] = createSignal(props.count || 0),
-    		counter = [
-    		count,
-    		{
-    			increment() {
-    			setCount(prev => prev + 1);
-    			},
-    			decrement() {
-    			setCount(prev => prev - 1);
-    			}
-    		}
-    		];
-
-    	return (
-    		<CounterContext.Provider value={counter}>
-    			{props.children}
-    		</CounterContext.Provider>
-    		);
-    	}
-
-    	export function useCounter() { return useContext(CounterContext); }
-    	```
-    				</div>
-    <div id="Child.jsx">
-        ```jsx
-    import { useCounter } from "./Context";
-
-    export function Child(props) {
-    const [count, { increment, decrement }] = useCounter();
-
-    return (
-    <>
-    	<div>{count()}</div>
-    	<button onClick={increment}>+</button>
-    	<button onClick={decrement}>-</button>
-    </>
-    );
-    };
-    ```
-    			</div>
-
-    				</TabsCodeBlocks>
+<TabsCodeBlocks>
+<div id="App.jsx">
+```jsx
+import Counter from "./counter";
+import { CounterProvider } from "./Context";
+import { Child } from "./Child";
+
+export function App() {
+	return (
+		<CounterProvider count={1}>
+			<h1>Welcome to Counter App</h1>
+			<Child />
+		</CounterProvider>
+	)
+}
+```
+</div>
+<div id="Context.jsx">
+```jsx
+import { createSignal, createContext, useContext } from "solid-js";
+
+const CounterContext = createContext(); // create context
+
+export function CounterProvider(props) {
+	const [count, setCount] = createSignal(props.count || 0),
+	counter = [
+		count,
+		{
+			increment() {
+			setCount(prev => prev + 1);
+			},
+			decrement() {
+			setCount(prev => prev - 1);
+			}
+		}
+	];
+
+	return (
+		<CounterContext.Provider value={counter}>
+			{props.children}
+		</CounterContext.Provider>
+	);
+}
+
+export function useCounter() { return useContext(CounterContext); }
+```
+</div>
+<div id="Child.jsx">
+```jsx
+import { useCounter } from "./Context";
+
+export function Child(props) {
+	const [count, { increment, decrement }] = useCounter();
+
+	return (
+	<>
+		<div>{count()}</div>
+		<button onClick={increment}>+</button>
+		<button onClick={decrement}>-</button>
+	</>
+	);
+};
+```
+</div>
+</TabsCodeBlocks>
 
 This offers a way to manage state across your components without having to pass props through intermediate elements.
 

src/routes/concepts/effects.mdx

@@ -59,7 +59,7 @@ import { createSignal, createEffect } from "solid-js";
 const [count, setCount] = createSignal(0);
 
 createEffect(() => {
-	console.log(count()); // Logs the current value of count whenever it changes
+	console.log(count()); // Logs current value of count whenever it changes
 });
 ```
 
@@ -87,12 +87,11 @@ setCount(1); // Output: 1, "Hello"
 setMessage("World"); // Output: 1, "World"
 ```
 
-    	<Callout>
-    				When a signal updates, it notifies all of its subscribers sequentially but the
-    *order can vary*. While effects are guaranteed to run when a signal updates,
-    the execution might **not** be instantaneous. This means that the order of
-    execution of effects is *not guaranteed* and should not be relied upon.
-    		</Callout>
+<Callout>
+When a signal updates, it notifies all of its subscribers sequentially but the *order can vary*. 
+While effects are guaranteed to run when a signal updates, the execution might **not** be instantaneous. 
+This means that the order of execution of effects is *not guaranteed* and should not be relied upon.
+</Callout>
 
 ### Nested effects
 

src/routes/concepts/intro-to-reactivity.mdx

@@ -182,8 +182,7 @@ function Counter() {
 
 	return (
 		<div>
-			<span>Count: {count()}</span>{" "}
-			{/* ✅ will update whenever `count()` changes. */}
+			<span>Count: {count()}</span>{/* ✅ will update whenever `count()` changes. */}
 			<button type="button" onClick={increment}>
 				Increment
 			</button>
@@ -216,10 +215,11 @@ const [double, setDouble] = createSignal(0);
 createEffect(() => {
 	setDouble(count() * 2);
 });
-// The `double` signal will always be updated after `count` due to synchronous reactivity.
-// This ensures that `double` is always up-to-date with the latest value of `count`.
 ```
 
+In this example, the `double` signal will always be updated after `count` due to synchronous reactivity.
+This ensures that `double` is always up-to-date with the latest value of `count`.
+
 ### Asynchronous reactivity
 
 [Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous) reactivity is when a system responds to changes in a delayed or non-linear fashion.

src/routes/concepts/refs.mdx

@@ -38,7 +38,7 @@ Solid provides a ref system to access DOM elements directly inside the JSX templ
 
 To use [`ref`](/reference/jsx-attributes/ref), you declare a variable and use it as the `ref` attribute:
 
-```tsx
+```tsx {6}
 function Component() {
 	let myElement;
 
@@ -54,16 +54,17 @@ These assignments occur at _creation time_ prior to the element being added to t
 If access to an element is needed before it is added to the DOM, you can use the callback form of `ref`:
 
 ```jsx
-<p ref={el => {
-	// el is created but not yet added to the DOM
-	myElement = el
-}}>My Element</p>
+<p ref={(el) => {
+	myElement = el // el is created but not yet added to the DOM
+	}}>
+	My Element
+</p>
 ```
 
 <Callout>
-	In TypeScript, you must use a definitive assignment assertion. 
-	Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't
-	confirm it. 
+In TypeScript, you must use a definitive assignment assertion. 
+Since Solid takes care of assigning the variable when the component is rendered, this signals to TypeScript that the variable will be assigned, even if it can't
+confirm it. 
 
 ```tsx
 let myElement!: HTMLDivElement; 
@@ -158,6 +159,7 @@ A directive is essentially a function with a specific signature:
 
 ```typescript
 function directive(element: Element, accessor: () => any): void
+
 ```
 
 - `element`: The DOM element that the directive is applied to.

src/routes/concepts/signals.mdx

@@ -71,8 +71,8 @@ function Counter() {
 }
 ```
 
-    	<Callout>
-    	  A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect)  or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
+<Callout>
+A tracking scope can be created by [`createEffect`](/reference/basic-reactivity/create-effect)  or [`createMemo`](/reference/basic-reactivity/create-memo), which are other Solid primitives.
 
 Both functions subscribe to the signals accessed within them, establishing a dependency relationship.
 Once this relationship is established, the function is notified whenever the signal changes.

src/routes/concepts/stores.mdx

@@ -193,9 +193,9 @@ const App = () => {
 ```
 
 <Callout>
-  Separating the read and write capabilities of a store provides a valuable debugging advantage.
+Separating the read and write capabilities of a store provides a valuable debugging advantage.
 
-	This separation facilitates the tracking and control of the components that are accessing or changing the values.
+This separation facilitates the tracking and control of the components that are accessing or changing the values.
 </Callout>
 
 ## Path syntax flexibility
@@ -358,12 +358,12 @@ When new information needs to be merged into an existing store `reconcile` can b
 ```jsx
 const { createStore, reconcile } from "solid-js/stores"
 
-  const [data, setData] = createStore({
-    animals: ['cat', 'dog', 'bird', 'gorilla']
-    })
+const [data, setData] = createStore({
+	animals: ['cat', 'dog', 'bird', 'gorilla']
+})
 
-  const newData = getNewData() // eg. contains ['cat', 'dog', 'bird', 'gorilla', 'koala']
-  setData('animals', reconcile(newData))
+const newData = getNewData() // eg. contains ['cat', 'dog', 'bird', 'gorilla', 'koala']
+setData('animals', reconcile(newData))
 
 ```
 

src/routes/concepts/understanding-jsx.mdx

@@ -42,13 +42,13 @@ This updates only the necessary parts of the DOM when changes occur in the under
 
 Where HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element.
 
-    	<Callout type="advanced">
-    		When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file.
-    Static elements are processed differently from dynamic ones, which might change based on data or user actions.
-    For dynamic elements, special markers are added for better handling during rendering.
+<Callout type="advanced">
+When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file.
+Static elements are processed differently from dynamic ones, which might change based on data or user actions.
+For dynamic elements, special markers are added for better handling during rendering.
 
-    Having a single root creates a consistent and manageable hierarchy to optimize rendering and updates.
-    		</Callout>
+Having a single root creates a consistent and manageable hierarchy to optimize rendering and updates.
+</Callout>
 
 JSX maintains the familiar nested, tree-like structure found in HTML.
 As a result, parent-child relationships between elements become easier to follow.
@@ -92,14 +92,13 @@ In JSX files, HTML attributes are used much like regular HTML, with a few key di
 
 ```jsx
 <button style={{
-  color: 'red',
-  font-size: '2rem',
-}}>
+	color: 'red',
+	font-size: '2rem',
+	}}>
   Click me!
 </button>
 ```
-
-    	</Callout>
+</Callout>
 
 ### JSX properties (props)
 
@@ -120,12 +119,11 @@ They connect the component with the data it requires, for seamless data flows an
   Props are also used to fill components with data that comes from resources, like [`createResource`](/reference/basic-reactivity/create-resource) calls.
   This results in components that react in real-time to data changes.
 
-      <Callout>
-      	Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*.
-      	This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`.
-
-  When order influences an element's behavior, users must define the expressions in the order that the element is expected.
+<Callout>
+Expressions, whether fixed or dynamic, get applied *in the order defined within the JSX*.
+This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`.
 
-  </Callout>
+When order influences an element's behavior, users must define the expressions in the order that the element is expected.
+</Callout>
 
 For how to use props effectively in Solid, explore the [props page](/concepts/components/props).