hcker2000 Comments - Answer Overflow

hcker2000

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

@bigmistqke I made some time to give this a go and it went really smoothly. https://github.com/hcker2000/ttrpg-sounds/commit/17895c095f7c5ee40c6accf786133608546261b0

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

very interesting, im used to php where you have to do some work to make something a signleton. Thats really good to know and much simpler than i figured it would be. Now I will start messing around with them in my app

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

gotch but without the constructor wont the import always get a new instance ?

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

also wanted to get some ideas on where you might keep such a file directory structure wise

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

Obviously not specific to my setup just yet but wanted to make sure thats the general idea before i modify my code base

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

@bigmistqke finally got some time to mess around with this again. This what you were thinking?

import { createStore } from "solid-js/store";

class StoreSingleton {
  // Private static instance
  static #instance;

  // Private constructor to prevent direct instantiation
  constructor() {
    if (StoreSingleton.#instance) {
      throw new Error(
        "Use StoreSingleton.getInstance() to get an instance of this class.",
      );
    }

    // Initialize the Solid.js store with default state
    this.state = createStore({
      user: null,
      todos: [],
    });
  }

  // Public static method to get the singleton instance
  static getInstance() {
    if (!StoreSingleton.#instance) {
      StoreSingleton.#instance = new StoreSingleton();
    }
    return StoreSingleton.#instance;
  }

  // Getter for accessing the Solid store
  getState() {
    return this.state[0];
  }

  // Methods to update the state
  setUser(user) {
    this.state[1]({ user });
  }

  addTodo(todo) {
    this.state[1]("todos", (todos) => [...todos, todo]);
  }

  removeTodo(index) {
    this.state[1]("todos", (todos) => todos.filter((_, i) => i !== index));
  }
}

// Usage
const store = StoreSingleton.getInstance();
store.setUser({ id: 1, name: "John Doe" });
store.addTodo({ id: 1, text: "Learn Solid.js", completed: false });
store.addTodo({ id: 2, text: "Build a project", completed: false });

console.log(store.getState());
// Output:
// {
//   user: { id: 1, name: "John Doe" },
//   todos: [
//     { id: 1, text: "Learn Solid.js", completed: false },
//     { id: 2, text: "Build a project", completed: false }
//   ]
// }

const sameStore = StoreSingleton.getInstance();
sameStore.removeTodo(0);

console.log(sameStore.getState());
// Output:
// {
//   user: { id: 1, name: "John Doe" },
//   todos: [
//     { id: 2, text: "Build a project", completed: false }
//   ]
// }

import { createStore } from "solid-js/store";

class StoreSingleton {
  // Private static instance
  static #instance;

  // Private constructor to prevent direct instantiation
  constructor() {
    if (StoreSingleton.#instance) {
      throw new Error(
        "Use StoreSingleton.getInstance() to get an instance of this class.",
      );
    }

    // Initialize the Solid.js store with default state
    this.state = createStore({
      user: null,
      todos: [],
    });
  }

  // Public static method to get the singleton instance
  static getInstance() {
    if (!StoreSingleton.#instance) {
      StoreSingleton.#instance = new StoreSingleton();
    }
    return StoreSingleton.#instance;
  }

  // Getter for accessing the Solid store
  getState() {
    return this.state[0];
  }

  // Methods to update the state
  setUser(user) {
    this.state[1]({ user });
  }

  addTodo(todo) {
    this.state[1]("todos", (todos) => [...todos, todo]);
  }

  removeTodo(index) {
    this.state[1]("todos", (todos) => todos.filter((_, i) => i !== index));
  }
}

// Usage
const store = StoreSingleton.getInstance();
store.setUser({ id: 1, name: "John Doe" });
store.addTodo({ id: 1, text: "Learn Solid.js", completed: false });
store.addTodo({ id: 2, text: "Build a project", completed: false });

console.log(store.getState());
// Output:
// {
//   user: { id: 1, name: "John Doe" },
//   todos: [
//     { id: 1, text: "Learn Solid.js", completed: false },
//     { id: 2, text: "Build a project", completed: false }
//   ]
// }

const sameStore = StoreSingleton.getInstance();
sameStore.removeTodo(0);

console.log(sameStore.getState());
// Output:
// {
//   user: { id: 1, name: "John Doe" },
//   todos: [
//     { id: 2, text: "Build a project", completed: false }
//   ]
// }

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

ok ill mess around and see if i can come up with a singleton store

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

i think maybe i saw this page https://www.solidjs.com/tutorial/stores_context and got down this track

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

let me see if i can find it in the docs

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

ok then yea maybe a simple example of the singleton store would help

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

all good, does anything that ever references a store get updated by the redering?

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

i guess the only other question too is reactivity on the singleton

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

yea i have no issues with a singleton, the docs just specifically mention using the context providers to handle this. The singleton im assuming would be more vanilla js than solidjs correct? less magic

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

is there anything specifically wrong with how the provider is setup? im always game for learning

71 replies

SSolidJS

•Created by hcker2000 on 12/6/2024 in #support

Error when trying to use provider method

yea and there is ui that goes along with this. in this case there will only ever be one provider in the tree though

71 replies

SSolidJS