Accessing internal state of CP from command handlers. #39

Activity

1. rouilj commented on Feb 11, 2023

   

   rouilj

   on Feb 11, 2023

   Last edited by rouilj

   ContributorAuthor

   More actions

   I have a new way to do this that should replace #28 (issue #25) as well as expose internal state.

   In main.js:

   appInternalInfo: object = { focusedElement: null; displayPalette: null, ...};
   
   class CommandPal {
   ...
     start () {
        this.app = new App({ ...,
             props: { ...
                exposeInternals: appInternalInfo,
            } });
   
     displayPalette(state) { appInternalInfo.displayPalette(state) }
   
      /* use setter/getter on (virtual) focusedElement property of CommandPal  */
     get focusedElement() {
       return appInternalInfo.focusedElement && appInternalInfo.focusedElement()
     }
   
     set focusedElement(newElement) {
       return appInternalInfo.focusedElement(newElement)
     }

   in App.svelte:

   ...
     export let exposeInternals: any; // should be object, but without creating an
                                      // interface here and needing to keep it in sync
                                      // with appInternalInfo in main.js any will do;
   
     let focusedElement: HTMLElement | null = null;  // also requires casting all
                                                 // <HTMLElement>document.activeElement
      exposeInternals.focusedElement = (newValue) => (
          newValue ? focusedElement=newValue : focusedElement )
   
     exposeInternals.displayPalette = async active_state => {
        if (! showModal) {focusedElement = <HTMLElement>document.activeElement}
        if (active_state === undefined) {
          showModal = !showModal;
       } else if ([true, false].includes(active_state)) {
          showModal = active_state;
       } else {
          throw("Non-boolean: " + active_state +
                " - passed to displayPalette")
       }
     }
   
     onMount(() => { ... }

   This removed the need for an entire file and functions used to pass the displayPalette method.
   For read only props, you could use:

   $: exposeInternals.read_me = showModal

   Plus you can expose both hotkey.js and Fuse that are bundled into command-pal to the
   web page so they don't have to load those libraries and can piggyback off the bundled ones.

   // in shortcuts.js use
   export hk = hotkey;
   
   // in App.svelte
   import hk from "./shortcuts";
   exposeInternals.Fuse = Fuse
   exposeInternals.hotkey = hk

   Thoughts?
2. rouilj

   added a commit that references this issue on Feb 13, 2023

   create appApi for dynamic access to internal props of CommandPal

   ...

   b693488