-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add props to TramOneElements for devtools #198
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
import { TRAM_EFFECT_STORE, TRAM_EFFECT_QUEUE, TRAM_KEY_QUEUE } from './engine-names'; | ||
import { TRAM_TAG_NEW_EFFECTS, TRAM_TAG_STORE_KEYS } from './node-names'; | ||
import { TRAM_EFFECT_STORE, TRAM_EFFECT_QUEUE, TRAM_KEY_QUEUE, TRAM_GLOBAL_KEY_QUEUE } from './engine-names'; | ||
import { TRAM_TAG_GLOBAL_STORE_KEYS, TRAM_TAG_NEW_EFFECTS, TRAM_TAG_STORE_KEYS } from './node-names'; | ||
import { getEffectStore, clearEffectStore, restoreEffectStore } from './effect-store'; | ||
import { TramOneElement } from './types'; | ||
import { clearKeyQueue, getKeyQueue, restoreKeyQueue } from './key-queue'; | ||
|
@@ -20,6 +20,7 @@ export default (tagFunction: () => TramOneElement) => { | |
// clear the queues (so we can get just new effects and keys) | ||
clearEffectStore(TRAM_EFFECT_QUEUE); | ||
clearKeyQueue(TRAM_KEY_QUEUE); | ||
clearKeyQueue(TRAM_GLOBAL_KEY_QUEUE); | ||
|
||
// create the component, which will save new effects to the effect queue | ||
const tagResult = tagFunction(); | ||
|
@@ -48,6 +49,16 @@ export default (tagFunction: () => TramOneElement) => { | |
const existingNewAndBrandNewKeys = existingNewKeys.concat(newKeys); | ||
tagResult[TRAM_TAG_STORE_KEYS] = existingNewAndBrandNewKeys; | ||
|
||
// 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; | ||
} | ||
Comment on lines
+52
to
+60
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. |
||
|
||
// restore the effect and key queues to what they were before we started | ||
restoreEffectStore(TRAM_EFFECT_QUEUE, existingQueuedEffects); | ||
restoreKeyQueue(TRAM_KEY_QUEUE, existingQueuedKeys); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,6 +8,7 @@ import { | |
TRAM_MUTATION_OBSERVER, | ||
TRAM_KEY_QUEUE, | ||
TRAM_KEY_STORE, | ||
TRAM_GLOBAL_KEY_QUEUE, | ||
} from './engine-names'; | ||
import { setupTramOneSpace } from './namespace'; | ||
import { setupEffectStore } from './effect-store'; | ||
|
@@ -59,6 +60,9 @@ export default (component: RootTramOneComponent, target: ElementOrSelector) => { | |
// setup key queue for new observable stores when resolving mounts | ||
setupKeyQueue(TRAM_KEY_QUEUE); | ||
|
||
// setup key queue for global observable stores when resolving mounts | ||
setupKeyQueue(TRAM_GLOBAL_KEY_QUEUE); | ||
Comment on lines
+63
to
+64
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. |
||
|
||
// setup a mutation observer for cleaning up removed elements and triggering effects | ||
setupMutationObserver(TRAM_MUTATION_OBSERVER); | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,6 +4,10 @@ import { | |
TRAM_TAG_NEW_EFFECTS, | ||
TRAM_TAG_CLEANUP_EFFECTS, | ||
TRAM_TAG_STORE_KEYS, | ||
TRAM_TAG_NAME, | ||
TRAM_TAG_PROPS, | ||
TRAM_TAG_GLOBAL_STORE_KEYS, | ||
TRAM_TAG_CHILDREN, | ||
} from './node-names'; | ||
|
||
/* ============= PUBLIC TYPES ======================================== | ||
|
@@ -106,6 +110,12 @@ export interface TramOneElement extends Element { | |
[TRAM_TAG_NEW_EFFECTS]: Effect[]; | ||
[TRAM_TAG_CLEANUP_EFFECTS]: CleanupEffect[]; | ||
[TRAM_TAG_STORE_KEYS]: string[]; | ||
|
||
// 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[]; | ||
Comment on lines
+114
to
+118
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. even if the app is running in development mode, some properties (like props or children) could be undefined. |
||
} | ||
|
||
export type TramOneHTMLElement = TramOneElement & HTMLElement; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.