[Content]: All code examples have erros

[cebulon]

📚 Subject area/topic

/concepts/context.mdx

📋 Page(s) affected (or suggested, for new content)

https://docs.solidjs.com/concepts/context

📋 Description of content that is out-of-date or incorrect

The code examples are inconsistent.
Most (except one or two) will not work like provided on the page.
They lack initialisation lines, are copies of the example above and therefore not working, or have other issues.

There is not one example on the page that explains or shows all the code needed to run contexts.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[amirhhashemi]

Just a quick update: I started working on this a while back but got sidetracked with other issues on that page. Right now I’m focused on other things, so it’s not a priority for me. Eventually, I do plan to completely rewrite that page.

In the meantime, if anyone’s interested in tackling it, I’d be happy to point out some of the issues that should be fixed.

[brenelz]

@amirhhashemi can you maybe point out which issues should be addressed?

[amirhhashemi]

@amirhhashemi can you maybe point out which issues should be addressed?

I think this page needs a complete rewrite. Partial updates won’t fix the underlying problems.

1. Most problems are in the writing itself. Some sentences are redundant or unclear. For example, in the "Customizing Context Utilities" section, the introduction doesn’t explain the problem at all:

   When an application contains multiple context objects, it can be difficult to keep track of which context object is being used. To solve this issue, you can create a custom utility to create a more readable way to access the context values.

   This is a very confusing way to describe reusable utilities.

2. Beyond errors in the examples, there are many formatting inconsistencies. I recommend running Prettier on this file. The code style should also be consistent: sometimes components are written with the function keyword, and other times with arrow functions. I suggest standardizing on the function keyword. There are also several undefined variables that need fixing.

3. Some examples don’t need to be spread across multiple files/tabs. For example, the "Creating context" section could be shown in a single code block.

4. Examples shouldn’t rely on imports or context from previous sections. Each code snippet should make sense on its own, even if the reader skips around.

   For example, instead of importing CounterProvider from a non-existent file, it should be defined in the same block:

   import { CounterProvider } from "./counterProvider";
   
   export function App() {
     return (
       <CounterProvider count={1}>
         <h1>Welcome to Counter</h1>
         <NestedComponents />
       </CounterProvider>
     );
   }

5. Admonitions (:::note) should be used sparingly, only when something truly requires emphasis or distinction. I would remove the note block shown below and fold its content into the preceding paragraph:

   

6. Currently, all examples revolve around a counter. We should use more diverse and practical examples to keep the content engaging.

7. The Debugging with context and Common issues with createContext and useContext sections overlap heavily and end up repeating the same points. These should be merged into a single section.

[LadyBluenotes]

I'm going to be breaking this page up during the rewrite.

It could use more attention, a lot of what @amirhhashemi has mentioned.