Add props to TramOneElements for devtools #198
Conversation
| if (process.env.NODE_ENV === 'development') { | ||
| tagResult[TRAM_TAG_NAME] = tagName; | ||
| tagResult[TRAM_TAG_PROPS] = props; | ||
| tagResult[TRAM_TAG_CHILDREN] = children; | ||
| } |
There was a problem hiding this comment.
these properties are not otherwise on the tag, so we need to add them (but only for development).
tagName here is based on what the parent component used to add this to the registry.
| // setup key queue for global observable stores when resolving mounts | ||
| setupKeyQueue(TRAM_GLOBAL_KEY_QUEUE); |
There was a problem hiding this comment.
not a huge fan of setting up a whole new key queue here, but there really isn't a better way to associate hooks used in the render with their elements.
| // development properties, these are not guarnteed to be on the element | ||
| [TRAM_TAG_NAME]?: string; | ||
| [TRAM_TAG_PROPS]?: Props; | ||
| [TRAM_TAG_CHILDREN]?: Children; | ||
| [TRAM_TAG_GLOBAL_STORE_KEYS]?: string[]; |
There was a problem hiding this comment.
even if the app is running in development mode, some properties (like props or children) could be undefined.
| // if this is development environment, save global store keys to the element | ||
| if (process.env.NODE_ENV === 'development') { | ||
| const existingNewGlobalKeys = tagResult[TRAM_TAG_GLOBAL_STORE_KEYS] || []; | ||
| const newGlobalKeys = getKeyQueue(TRAM_GLOBAL_KEY_QUEUE); | ||
|
|
||
| // store global store keys in the node we just built | ||
| const existingNewAndBrandNewGlobalKeys = existingNewGlobalKeys.concat(newGlobalKeys); | ||
| tagResult[TRAM_TAG_GLOBAL_STORE_KEYS] = existingNewAndBrandNewGlobalKeys; | ||
| } |
There was a problem hiding this comment.
This is mostly a copy-paste of how we handle local stores, so the logic isn't super novel here.
This will hopefully be simplified (or not required) when #189 is completed.
Summary
This PR adds properties to Tram-One elements so that they can expose more details in the Properties sidebar panel in Chrome Devtools. This will eventually power the Tram-One chrome extension, which will look like the following:
Version Bump - Patch
This is just a patch version bump, since it should have no effect on the API, and no significant change in performance / development.
Checklist
Tests(No tests, for now)