Skip to content

Add Shiny Event classes for custom events #3815

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

Draft
wants to merge 21 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
01fd8fa
Remove `el` from ShinyEventCommon, value is `any`
gadenbuie Apr 26, 2023
90c0523
Allow any-typed arguments in exported functions
gadenbuie Apr 26, 2023
8d12ae7
Remove `value`, add `el` to ShinyEventInputChanged
gadenbuie Apr 26, 2023
0e2d040
Implement `EventCommon` and `EventInputChanged` classes
gadenbuie Apr 26, 2023
e2d19b9
Use `EventInputChanged()` to emit file upload input event
gadenbuie Apr 26, 2023
60f074d
Make the `EventCommon` class work more like an `Event`
gadenbuie Apr 26, 2023
54fa857
Use `EventInputChanged` in `InputEventDecorator`
gadenbuie Apr 26, 2023
63427a7
Go back to using `EvtFn()` to extend jquery event handler
gadenbuie Apr 26, 2023
651b768
Implement one lower-level event class `EventBase` and use `event` rat…
gadenbuie Apr 26, 2023
922d16d
Implement `EventUpdateInput` for `shiny:updateinput`
gadenbuie Apr 26, 2023
2740be1
Implement `EventValue` for `shiny:value`
gadenbuie Apr 26, 2023
b5c6561
Implement `EventError` for `shiny:error` events
gadenbuie Apr 26, 2023
a66ef6d
Implement `EventMessage` for `shiny:message`
gadenbuie Apr 26, 2023
08ced6b
Use `@babel/plugin-transform-typescript`
gadenbuie Apr 27, 2023
4f50796
import $ from jquery
gadenbuie Apr 27, 2023
ce4961f
`EventBase.triggerOn()` now accepts jquery html elements
gadenbuie Apr 27, 2023
0adeb4b
DRY properties and type definitions
gadenbuie Apr 27, 2023
4648423
Use more descriptive names for events, not `evt`
gadenbuie Apr 27, 2023
eddb0d9
Add more context in comments
gadenbuie Apr 27, 2023
064da3a
yarn build
gadenbuie Apr 27, 2023
10c2398
Add jsdoc strings to shinyEvents.ts
gadenbuie May 1, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use more descriptive names for events, not evt
  • Loading branch information
gadenbuie committed Apr 27, 2023
commit 4648423c5438fd3844d9a40c0e40e87a9d441116
6 changes: 3 additions & 3 deletions srcts/src/file/fileProcessor.ts
Original file line number Diff line number Diff line change
@@ -227,14 +227,14 @@ class FileUploader extends FileProcessor {
// Trigger shiny:inputchanged. Unlike a normal shiny:inputchanged event,
// it's not possible to modify the information before the values get
// sent to the server.
const evt = new EventInputChanged({
const inputChangedEvent = new EventInputChanged({
name: this.id,
value: fileInfo,
el: this.el,
binding: getFileInputBinding(),
inputType: "shiny.fileupload",
});
evt.triggerOn(document);
inputChangedEvent.triggerOn(document);

this.makeRequest(
"uploadEnd",
@@ -245,7 +245,7 @@ class FileUploader extends FileProcessor {
this.$bar().text("Upload complete");
// Reset the file input's value to "". This allows the same file to be
// uploaded again. https://stackoverflow.com/a/22521275
$(evt.el as HTMLElement).val("");
$(inputChangedEvent.el as HTMLElement).val("");
},
(error) => {
this.onError(error);
15 changes: 9 additions & 6 deletions srcts/src/inputPolicies/inputEventDecorator.ts
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ class InputEventDecorator implements InputPolicy {
setInput(nameType: string, value: unknown, opts: InputPolicyOpts): void {
const input = splitInputNameType(nameType);

const evt = new EventInputChanged({
const inputChangedEvent = new EventInputChanged({
name: input.name,
value,
el: opts.el || null,
@@ -25,16 +25,19 @@ class InputEventDecorator implements InputPolicy {
// input element instead of `document`. Existing event listeners bound to
// `document` will still detect the event due to event bubbling. #2446
// If no `el` exists, use `document` instead. #3584
evt.triggerOn(opts.el || window.document);
inputChangedEvent.triggerOn(opts.el || window.document);

if (!evt.isDefaultPrevented()) {
let name = evt.name;
if (!inputChangedEvent.isDefaultPrevented()) {
let name = inputChangedEvent.name;

if (evt.inputType !== "") name += ":" + evt.inputType;
if (inputChangedEvent.inputType !== "")
name += ":" + inputChangedEvent.inputType;

// Most opts aren't passed along to lower levels in the input decorator
// stack.
this.target.setInput(name, evt.value, { priority: opts.priority });
this.target.setInput(name, inputChangedEvent.value, {
priority: opts.priority,
});
}
}
}
38 changes: 19 additions & 19 deletions srcts/src/shiny/shinyapp.ts
Original file line number Diff line number Diff line change
@@ -472,30 +472,30 @@ class ShinyApp {

const binding = this.$bindings[name];

const evt = new EventError({ name, error, binding });
evt.triggerOn(binding?.el);
const errorEvent = new EventError({ name, error, binding });
errorEvent.triggerOn(binding?.el);

if (!evt.isDefaultPrevented() && binding && binding.onValueError) {
binding.onValueError(evt.error);
if (!errorEvent.isDefaultPrevented() && binding && binding.onValueError) {
binding.onValueError(errorEvent.error);
}
}

async receiveOutput<T>(name: string, value: T): Promise<T | undefined> {
const binding = this.$bindings[name];
const evt = new EventValue({ name, value, binding });
const valueEvent = new EventValue({ name, value, binding });

if (this.$values[name] === value) {
evt.triggerOn(binding?.el);
valueEvent.triggerOn(binding?.el);
return undefined;
}

this.$values[name] = value;
delete this.$errors[name];

evt.triggerOn(binding?.el);
valueEvent.triggerOn(binding?.el);

if (!evt.isDefaultPrevented() && binding) {
await binding.onValueChange(evt.value);
if (!valueEvent.isDefaultPrevented() && binding) {
await binding.onValueChange(valueEvent.value);
}

return value;
@@ -637,13 +637,13 @@ class ShinyApp {
msgObj.custom[type] = data;
}

const evt = new EventMessage({ message: msgObj });
evt.triggerOn(document);
if (evt.isDefaultPrevented()) return;
const messageEvent = new EventMessage({ message: msgObj });
messageEvent.triggerOn(document);
if (messageEvent.isDefaultPrevented()) return;

// Send msgObj.foo and msgObj.bar to appropriate handlers
await this._sendMessagesToHandlers(
evt.message,
messageEvent.message,
messageHandlers,
messageHandlerOrder
);
@@ -712,13 +712,13 @@ class ShinyApp {
if ($obj.length > 0) {
if (!$obj.attr("aria-live")) $obj.attr("aria-live", "polite");
const el = $obj[0];
const evt = new EventUpdateInput({
const updateInputEvent = new EventUpdateInput({
message: message[i].message,
binding: inputBinding,
});
evt.triggerOn(el);
if (!evt.isDefaultPrevented())
inputBinding.receiveMessage(el, evt.message);
updateInputEvent.triggerOn(el);
if (!updateInputEvent.isDefaultPrevented())
inputBinding.receiveMessage(el, updateInputEvent.message);
}
}
}
@@ -1217,10 +1217,10 @@ class ShinyApp {
// value for the tabset gets updated (i.e. input$tabsetId
// should be null if there are no tabs).
const destTabValue = getFirstTab($tabset);
const evt = new EventUpdateInput({
const updateInputEvent = new EventUpdateInput({
binding: inputBinding,
});
$tabset.trigger(evt.event);
updateInputEvent.triggerOn($tabset);
inputBinding.setValue($tabset[0], destTabValue);
}
}