Skip to content

Commit 7602eb6

Browse files
authored
Custom component template updates (#874)
1 parent 5b11186 commit 7602eb6

File tree

14 files changed

+116
-108
lines changed

14 files changed

+116
-108
lines changed

shiny/templates/package-templates/js-input/custom_component/distjs/index.js

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -177,15 +177,15 @@
177177
super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
178178
}
179179
_$Ev() {
180-
this._$Eg = new Promise((t4) => this.enableUpdating = t4), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t4) => t4(this));
180+
this._$Eg = new Promise((t4) => this.enableUpdating = t4), this._$AL = /* @__PURE__ */ new Map(), this._$ES(), this.requestUpdate(), this.constructor.l?.forEach((t4) => t4(this));
181181
}
182182
addController(t4) {
183-
(this._$ES ??= []).push(t4), void 0 !== this.renderRoot && this.isConnected && t4.hostConnected?.();
183+
(this._$E_ ??= /* @__PURE__ */ new Set()).add(t4), void 0 !== this.renderRoot && this.isConnected && t4.hostConnected?.();
184184
}
185185
removeController(t4) {
186-
this._$ES?.splice(this._$ES.indexOf(t4) >>> 0, 1);
186+
this._$E_?.delete(t4);
187187
}
188-
_$E_() {
188+
_$ES() {
189189
const t4 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties;
190190
for (const i4 of s4.keys())
191191
this.hasOwnProperty(i4) && (t4.set(i4, this[i4]), delete this[i4]);
@@ -196,12 +196,12 @@
196196
return S(t4, this.constructor.elementStyles), t4;
197197
}
198198
connectedCallback() {
199-
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$ES?.forEach((t4) => t4.hostConnected?.());
199+
this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$E_?.forEach((t4) => t4.hostConnected?.());
200200
}
201201
enableUpdating(t4) {
202202
}
203203
disconnectedCallback() {
204-
this._$ES?.forEach((t4) => t4.hostDisconnected?.());
204+
this._$E_?.forEach((t4) => t4.hostDisconnected?.());
205205
}
206206
attributeChangedCallback(t4, s4, i4) {
207207
this._$AK(t4, i4);
@@ -248,7 +248,7 @@
248248
if (!this.isUpdatePending)
249249
return;
250250
if (!this.hasUpdated) {
251-
if (this._$Ep) {
251+
if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
252252
for (const [t6, s5] of this._$Ep)
253253
this[t6] = s5;
254254
this._$Ep = void 0;
@@ -261,7 +261,7 @@
261261
let t4 = false;
262262
const s4 = this._$AL;
263263
try {
264-
t4 = this.shouldUpdate(s4), t4 ? (this.willUpdate(s4), this._$ES?.forEach((t5) => t5.hostUpdate?.()), this.update(s4)) : this._$ET();
264+
t4 = this.shouldUpdate(s4), t4 ? (this.willUpdate(s4), this._$E_?.forEach((t5) => t5.hostUpdate?.()), this.update(s4)) : this._$ET();
265265
} catch (s5) {
266266
throw t4 = false, this._$ET(), s5;
267267
}
@@ -270,7 +270,7 @@
270270
willUpdate(t4) {
271271
}
272272
_$AE(t4) {
273-
this._$ES?.forEach((t5) => t5.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t4)), this.updated(t4);
273+
this._$E_?.forEach((t5) => t5.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t4)), this.updated(t4);
274274
}
275275
_$ET() {
276276
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
@@ -292,7 +292,7 @@
292292
firstUpdated(t4) {
293293
}
294294
};
295-
b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d("elementProperties")] = /* @__PURE__ */ new Map(), b[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: b }), (a.reactiveElementVersions ??= []).push("2.0.1");
295+
b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d("elementProperties")] = /* @__PURE__ */ new Map(), b[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: b }), (a.reactiveElementVersions ??= []).push("2.0.2");
296296

297297
// node_modules/lit-html/lit-html.js
298298
var t2 = globalThis;
@@ -551,7 +551,7 @@
551551
}
552552
};
553553
var Z = t2.litHtmlPolyfillSupport;
554-
Z?.(V, M), (t2.litHtmlVersions ??= []).push("3.0.2");
554+
Z?.(V, M), (t2.litHtmlVersions ??= []).push("3.1.0");
555555
var j = (t4, i4, s4) => {
556556
const e5 = s4?.renderBefore ?? i4;
557557
let h3 = e5._$litPart$;
@@ -588,7 +588,7 @@
588588
s3._$litElement$ = true, s3["finalized", "finalized"] = true, globalThis.litElementHydrateSupport?.({ LitElement: s3 });
589589
var r4 = globalThis.litElementPolyfillSupport;
590590
r4?.({ LitElement: s3 });
591-
(globalThis.litElementVersions ??= []).push("4.0.1");
591+
(globalThis.litElementVersions ??= []).push("4.0.2");
592592

593593
// node_modules/@lit/reactive-element/decorators/custom-element.js
594594
var t3 = (t4) => (e5, o5) => {
@@ -627,9 +627,41 @@
627627
})(t4, e5, o5);
628628
}
629629

630+
// node_modules/@posit-dev/shiny-bindings-core/dist/OptionalShiny.js
631+
var Shiny = window.Shiny;
632+
633+
// node_modules/@posit-dev/shiny-bindings-core/dist/makeInputBinding.js
634+
function makeInputBinding(tagName, { type = null } = {}) {
635+
if (!Shiny) {
636+
return;
637+
}
638+
class NewCustomBinding extends Shiny["InputBinding"] {
639+
constructor() {
640+
super();
641+
}
642+
find(scope) {
643+
return $(scope).find(tagName);
644+
}
645+
getValue(el) {
646+
return el.value;
647+
}
648+
getType(_2) {
649+
return type;
650+
}
651+
subscribe(el, callback) {
652+
el.notifyBindingOfChange = (ad) => callback(ad ?? false);
653+
}
654+
unsubscribe(el) {
655+
el.notifyBindingOfChange = (_2) => {
656+
};
657+
}
658+
}
659+
Shiny.inputBindings.register(new NewCustomBinding(), `${tagName}-Binding`);
660+
}
661+
630662
// srcts/index.ts
631-
var customInputTag = "shiny-custom-input";
632-
var ShinyCustomInput = class extends s3 {
663+
var customInputTag = "custom-component";
664+
var CustomComponentEl = class extends s3 {
633665
constructor() {
634666
super(...arguments);
635667
this.value = 0;
@@ -638,14 +670,15 @@
638670
* This alerts Shiny that the value has changed and it should check for the
639671
* latest value. This is set by the input binding.
640672
*/
641-
this.onChangeCallback = null;
673+
this.notifyBindingOfChange = () => {
674+
};
642675
}
643676
/**
644677
* Function to run when the increment button is clicked.
645678
*/
646679
onIncrement() {
647680
this.value++;
648-
this.onChangeCallback?.(true);
681+
this.notifyBindingOfChange(true);
649682
}
650683
render() {
651684
return x`
@@ -655,7 +688,7 @@
655688
`;
656689
}
657690
};
658-
ShinyCustomInput.styles = i`
691+
CustomComponentEl.styles = i`
659692
:host {
660693
display: block;
661694
border: solid 1px gray;
@@ -666,25 +699,11 @@
666699
`;
667700
__decorateClass([
668701
n4({ type: Number })
669-
], ShinyCustomInput.prototype, "value", 2);
670-
ShinyCustomInput = __decorateClass([
702+
], CustomComponentEl.prototype, "value", 2);
703+
CustomComponentEl = __decorateClass([
671704
t3(customInputTag)
672-
], ShinyCustomInput);
673-
var CustomInputBinding = class extends Shiny.InputBinding {
674-
constructor() {
675-
super();
676-
}
677-
find(scope) {
678-
return $(scope).find(customInputTag);
679-
}
680-
getValue(el) {
681-
return el.value;
682-
}
683-
subscribe(el, callback) {
684-
el.onChangeCallback = callback;
685-
}
686-
};
687-
Shiny.inputBindings.register(new CustomInputBinding(), customInputTag);
705+
], CustomComponentEl);
706+
makeInputBinding(customInputTag);
688707
})();
689708
/*! Bundled license information:
690709

shiny/templates/package-templates/js-input/package-lock.json

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

shiny/templates/package-templates/js-input/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"typescript": "^5.2.2"
1515
},
1616
"dependencies": {
17-
"lit": "^3.0.2",
18-
"@shiny-helpers/main": "0.0.18"
17+
"@posit-dev/shiny-bindings-core": "^0.0.3",
18+
"lit": "^3.0.2"
1919
}
2020
}

shiny/templates/package-templates/js-input/srcts/index.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import { LitElement, html, css } from "lit";
2-
import { customElement, property } from "lit/decorators.js";
3-
import type { CustomElementInput } from "@shiny-helpers/main";
4-
import { makeInputBinding } from "@shiny-helpers/main";
2+
import { property } from "lit/decorators.js";
3+
import type { CustomElementInput } from "@posit-dev/shiny-bindings-core";
4+
import { makeInputBinding } from "@posit-dev/shiny-bindings-core";
55

6-
const customInputTag = "custom-component";
76
/**
87
* An example element.
98
*
109
* @csspart button - The button that increments the value
1110
* @csspart display - The span containing the value
1211
*/
13-
@customElement(customInputTag)
1412
export class CustomComponentEl
1513
extends LitElement
1614
implements CustomElementInput<number>
@@ -53,4 +51,6 @@ export class CustomComponentEl
5351
}
5452

5553
// Setup the input binding
56-
makeInputBinding<CustomComponentEl>(customInputTag);
54+
makeInputBinding("custom-component", CustomComponentEl, {
55+
registerElement: true,
56+
});

shiny/templates/package-templates/js-input/tsconfig.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"checkJs": false,
1212
"skipLibCheck": true,
1313
"isolatedModules": true,
14-
"outDir": "dist",
15-
"rootDir": "./src",
14+
"outDir": "custom_component/distjs",
15+
"rootDir": "srcts",
1616
"noUnusedLocals": true,
1717
"noUnusedParameters": true,
1818
"noImplicitReturns": true,

shiny/templates/package-templates/js-output/custom_component/custom_component.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ async def render_custom_component(
3535
return None
3636

3737
if not isinstance(res, int):
38-
# Throw an error if the value is not a dataframe
38+
# Throw an error if the value is not an integer.
3939
raise TypeError(f"Expected a integer, got {type(res)}. ")
4040

4141
# Send the results to the client. Make sure that this is a serializable

shiny/templates/package-templates/js-output/package-lock.json

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

shiny/templates/package-templates/js-output/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"typescript": "^5.2.2"
1515
},
1616
"dependencies": {
17-
"lit": "^3.0.2",
18-
"@shiny-helpers/main": "^0.0.18"
17+
"@posit-dev/shiny-bindings-core": "^0.0.3",
18+
"lit": "^3.0.2"
1919
}
2020
}

shiny/templates/package-templates/js-output/srcts/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { LitElement, html, css } from "lit";
22
import { property } from "lit/decorators.js";
33

4-
import { makeOutputBinding } from "@shiny-helpers/main";
4+
import { makeOutputBinding } from "@posit-dev/shiny-bindings-core";
55

66
// What the server-side output binding will send to the client. It's important
77
// to make sure this matches what the python code is sending.

shiny/templates/package-templates/js-output/tsconfig.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"checkJs": false,
1212
"skipLibCheck": true,
1313
"isolatedModules": true,
14-
"outDir": "dist",
15-
"rootDir": "./src",
14+
"outDir": "custom_component/distjs",
15+
"rootDir": "srcts",
1616
"noUnusedLocals": true,
1717
"noUnusedParameters": true,
1818
"noImplicitReturns": true,

0 commit comments

Comments
 (0)