SolidJS•17mo ago

useContext from function dynamically imported

I'm building a keyboard shortcut management system and wanted to be able to dynamically import the action associated with a keybinding. Some of these keybindings may use a context so I've intentionally put the keyboard shortcut manager provider inside of all other providers.

action: () => import("../actions/switchColorScheme")

action: () => import("../actions/switchColorScheme")

and in my index file:

<I18nProvider>
  <ColorSchemeProvider>
    <KeyboardShortcutManagerProvider>
      <Router root={App}>{routes}</Router>
    </KeyboardShortcutManagerProvider>
  </ColorSchemeProvider>
</I18nProvider>

<I18nProvider>
  <ColorSchemeProvider>
    <KeyboardShortcutManagerProvider>
      <Router root={App}>{routes}</Router>
    </KeyboardShortcutManagerProvider>
  </ColorSchemeProvider>
</I18nProvider>

I'm getting an error when trying to

useContext()

useContext()

in the action file's default function. Is that expected or is there a correct way of doing this? I thought that intentionally nesting the contexts where they'd normally work would be fine.

flippyflopsOP•8/4/24, 4:47 PM

For reference, this is the function I'm trying to execute:

flippyflopsOP•8/4/24, 4:47 PM

I have also verified works in components, as well as the

flippyflopsOP•8/4/24, 5:06 PM

Also trying this with a normal function attached to the action ends up with the same error so maybe this is just a bad pattern?

Brendonovich•8/4/24, 5:06 PM

it depends where you're calling the function, you need to be doing so in a place that has access to the context

Brendonovich•8/4/24, 5:06 PM

like in a component body

flippyflopsOP•8/4/24, 5:07 PM

ah, I thought as long as the call site was within the context it would work

flippyflopsOP•8/4/24, 5:07 PM

SomeContext -> KeyboardContext -> calls action() -> action impl -> useSomeContextContext

Brendonovich•8/4/24, 5:08 PM

depends how the context calls it

flippyflopsOP•8/4/24, 5:08 PM

hmm, could you elaborate please?

Brendonovich•8/4/24, 5:09 PM

can you show how calls ?

Madaxen86•8/4/24, 5:09 PM

And: What’s the error message?

flippyflopsOP•8/4/24, 5:09 PM

there is some business logic in here but essentially it will find the appropriate action based on the keys that are down in the event

flippyflopsOP•8/4/24, 5:10 PM

this is inside of a provider, which is nested under the context that it needs to use within the action

Fflippyflops ``` function onKeyDown(e: KeyboardEvent) { if (e.repeat) return; const u...

Brendonovich•8/4/24, 5:10 PM

this is calling inside an event handler, which is executed outside of the ownership scope

Brendonovich•8/4/24, 5:10 PM

even though the handler is defined inside a context, it depends where it's called

flippyflopsOP•8/4/24, 5:11 PM

ah, so can i bind the scope with an arrow function in this situation?

Brendonovich•8/4/24, 5:12 PM

nah the equivalent would be getting the of the context component with and using so the handler has access to the context, but personally i'd try find a way to not have to do that

flippyflopsOP•8/4/24, 5:12 PM

@Madaxen86 FWIW this is the error

flippyflopsOP•8/4/24, 5:13 PM

I guess I'll need to think on this a bit more but I was trying to decouple the impl of action from the keyboard shortcut provider

Brendonovich•8/4/24, 5:15 PM

i'd probably just pass the values into the action handler

flippyflopsOP•8/4/24, 5:15 PM

the value of ?

flippyflopsOP•8/4/24, 5:16 PM

this works fine but idk if it is "proper" so to speak

Brendonovich•8/4/24, 5:16 PM

nah i'd just put the result of into the arguments of itself

flippyflopsOP•8/4/24, 5:17 PM

I was thinking about something like that but then I'm in the position of the keyboard shortcut provider having to know about every possible context/arg of each action

flippyflopsOP•8/4/24, 5:19 PM

For some additional context I have things laid out like this atm:

This naming is probs not great but I'm drawing inspriation from Unreal Engine's Enhanced Input System so

idk for now.

flippyflopsOP•8/4/24, 5:19 PM

the is just a binding between the user's keyboard inputs and the InputMappingContext (again probs a bad name for JS world)

flippyflopsOP•8/4/24, 5:22 PM

I guess I'm just not seeing how I could call any of the actions which may or may not use any context within the app from the keyboard shortcut provider without somehow coupling every argument type to the provider

flippyflopsOP•8/4/24, 5:23 PM

Maybe basing this loosely on game development practices was a bad idea too lol

REEEEE•8/4/24, 5:23 PM

I have something like this for my project and I just made a global shortcut manager

flippyflopsOP•8/4/24, 5:23 PM

Would you mind sharing your implementation or some details?

flippyflopsOP•8/4/24, 5:24 PM

Or if you're up for it I could hop into a call and share what I have too

REEEEE•8/4/24, 5:25 PM

I'm just exporting my manager from a file like this

REEEEE•8/4/24, 5:25 PM

then I can just do

flippyflopsOP•8/4/24, 5:26 PM

And are you able to use other contexts in the function without issue?

flippyflopsOP•8/4/24, 5:26 PM

I'm not familiar with using multiple s yet as I'm pretty new to solid

flippyflopsOP•8/4/24, 5:27 PM

REEEEE•8/4/24, 5:27 PM

hmm I haven't tested it but in general doing inside an event handler doesn't work :P

REEEEE•8/4/24, 5:27 PM

let me test

REEEEE•8/4/24, 5:27 PM

nope

REEEEE•8/4/24, 5:28 PM

does not work

flippyflopsOP•8/4/24, 5:28 PM

That's what @Brendonovich was saying which makes sense after his explanation but now it is forcing me to rethink everything or couple things tightly

flippyflopsOP•8/4/24, 5:28 PM

TL;DR; I want to run arbitrary code within the shortcut manager and have access to any of the contexts

REEEEE•8/4/24, 5:29 PM

Hmm

flippyflopsOP•8/4/24, 5:30 PM

Thanks to @Brendonovich for bringing up the concept of owners, this is now working but IDK if it is "proper" or "best practice" to do something like this

REEEEE•8/4/24, 5:31 PM

Yeah just tested it by adding something similar

REEEEE•8/4/24, 5:31 PM

I'm doing the as part of the

REEEEE•8/4/24, 5:31 PM

except I'm reading outside

REEEEE•8/4/24, 5:32 PM

so like