From ee50e50689f194819234244a35e9722a2d5fcd96 Mon Sep 17 00:00:00 2001 From: Nick Strayer Date: Thu, 7 Dec 2023 11:11:44 -0500 Subject: [PATCH 1/6] Remove unneccesary typescript syntax that made code harder to read for non-typescript users --- .../templates/package-templates/js-react/srcts/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/shiny/templates/package-templates/js-react/srcts/index.tsx b/shiny/templates/package-templates/js-react/srcts/index.tsx index 606038896..86d3975f7 100644 --- a/shiny/templates/package-templates/js-react/srcts/index.tsx +++ b/shiny/templates/package-templates/js-react/srcts/index.tsx @@ -1,5 +1,4 @@ import { SketchPicker } from "react-color"; -import type { ColorResult } from "react-color"; import React from "react"; import { makeReactInput } from "@shiny-helpers/react"; @@ -9,9 +8,9 @@ import { makeReactInput } from "@shiny-helpers/react"; makeReactInput({ tagName: "custom-component", initialValue: "#fff", - renderComp: ({ onNewValue }) => ( + renderComp: ({ initialValue, onNewValue }) => ( onNewValue(color)} /> ), @@ -25,12 +24,12 @@ function ColorPickerReact({ initialValue: string; onNewValue: (x: string) => void; }) { - const [currentColor, setCurrentColor] = React.useState(initialValue); + const [currentColor, setCurrentColor] = React.useState(initialValue); return ( { + onChange={(color) => { setCurrentColor(color.hex); onNewValue(color.hex); }} From a2435191ca6988e75bc5379642b4fda7e9e2a0fb Mon Sep 17 00:00:00 2001 From: Nick Strayer Date: Thu, 7 Dec 2023 11:58:04 -0500 Subject: [PATCH 2/6] Update npm packages to new posit-dev namespaced versions --- .../js-input/custom_component/distjs/index.js | 89 +++++++++++-------- .../js-input/package-lock.json | 16 ++-- .../package-templates/js-input/package.json | 4 +- .../package-templates/js-input/srcts/index.ts | 4 +- .../js-output/package-lock.json | 16 ++-- .../package-templates/js-output/package.json | 4 +- .../js-output/srcts/index.ts | 2 +- .../js-react/package-lock.json | 44 +++++---- .../package-templates/js-react/package.json | 4 +- .../js-react/srcts/index.tsx | 2 +- 10 files changed, 100 insertions(+), 85 deletions(-) diff --git a/shiny/templates/package-templates/js-input/custom_component/distjs/index.js b/shiny/templates/package-templates/js-input/custom_component/distjs/index.js index adf9f6c5e..620c5999a 100644 --- a/shiny/templates/package-templates/js-input/custom_component/distjs/index.js +++ b/shiny/templates/package-templates/js-input/custom_component/distjs/index.js @@ -177,15 +177,15 @@ super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev(); } _$Ev() { - this._$Eg = new Promise((t4) => this.enableUpdating = t4), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t4) => t4(this)); + this._$Eg = new Promise((t4) => this.enableUpdating = t4), this._$AL = /* @__PURE__ */ new Map(), this._$ES(), this.requestUpdate(), this.constructor.l?.forEach((t4) => t4(this)); } addController(t4) { - (this._$ES ??= []).push(t4), void 0 !== this.renderRoot && this.isConnected && t4.hostConnected?.(); + (this._$E_ ??= /* @__PURE__ */ new Set()).add(t4), void 0 !== this.renderRoot && this.isConnected && t4.hostConnected?.(); } removeController(t4) { - this._$ES?.splice(this._$ES.indexOf(t4) >>> 0, 1); + this._$E_?.delete(t4); } - _$E_() { + _$ES() { const t4 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties; for (const i4 of s4.keys()) this.hasOwnProperty(i4) && (t4.set(i4, this[i4]), delete this[i4]); @@ -196,12 +196,12 @@ return S(t4, this.constructor.elementStyles), t4; } connectedCallback() { - this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$ES?.forEach((t4) => t4.hostConnected?.()); + this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$E_?.forEach((t4) => t4.hostConnected?.()); } enableUpdating(t4) { } disconnectedCallback() { - this._$ES?.forEach((t4) => t4.hostDisconnected?.()); + this._$E_?.forEach((t4) => t4.hostDisconnected?.()); } attributeChangedCallback(t4, s4, i4) { this._$AK(t4, i4); @@ -248,7 +248,7 @@ if (!this.isUpdatePending) return; if (!this.hasUpdated) { - if (this._$Ep) { + if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) { for (const [t6, s5] of this._$Ep) this[t6] = s5; this._$Ep = void 0; @@ -261,7 +261,7 @@ let t4 = false; const s4 = this._$AL; try { - t4 = this.shouldUpdate(s4), t4 ? (this.willUpdate(s4), this._$ES?.forEach((t5) => t5.hostUpdate?.()), this.update(s4)) : this._$ET(); + t4 = this.shouldUpdate(s4), t4 ? (this.willUpdate(s4), this._$E_?.forEach((t5) => t5.hostUpdate?.()), this.update(s4)) : this._$ET(); } catch (s5) { throw t4 = false, this._$ET(), s5; } @@ -270,7 +270,7 @@ willUpdate(t4) { } _$AE(t4) { - this._$ES?.forEach((t5) => t5.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t4)), this.updated(t4); + this._$E_?.forEach((t5) => t5.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t4)), this.updated(t4); } _$ET() { this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false; @@ -292,7 +292,7 @@ firstUpdated(t4) { } }; - 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"); + 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"); // node_modules/lit-html/lit-html.js var t2 = globalThis; @@ -551,7 +551,7 @@ } }; var Z = t2.litHtmlPolyfillSupport; - Z?.(V, M), (t2.litHtmlVersions ??= []).push("3.0.2"); + Z?.(V, M), (t2.litHtmlVersions ??= []).push("3.1.0"); var j = (t4, i4, s4) => { const e5 = s4?.renderBefore ?? i4; let h3 = e5._$litPart$; @@ -588,7 +588,7 @@ s3._$litElement$ = true, s3["finalized", "finalized"] = true, globalThis.litElementHydrateSupport?.({ LitElement: s3 }); var r4 = globalThis.litElementPolyfillSupport; r4?.({ LitElement: s3 }); - (globalThis.litElementVersions ??= []).push("4.0.1"); + (globalThis.litElementVersions ??= []).push("4.0.2"); // node_modules/@lit/reactive-element/decorators/custom-element.js var t3 = (t4) => (e5, o5) => { @@ -627,9 +627,41 @@ })(t4, e5, o5); } + // node_modules/@posit-dev/shiny-bindings-core/dist/OptionalShiny.js + var Shiny = window.Shiny; + + // node_modules/@posit-dev/shiny-bindings-core/dist/makeInputBinding.js + function makeInputBinding(tagName, { type = null } = {}) { + if (!Shiny) { + return; + } + class NewCustomBinding extends Shiny["InputBinding"] { + constructor() { + super(); + } + find(scope) { + return $(scope).find(tagName); + } + getValue(el) { + return el.value; + } + getType(_2) { + return type; + } + subscribe(el, callback) { + el.notifyBindingOfChange = (ad) => callback(ad ?? false); + } + unsubscribe(el) { + el.notifyBindingOfChange = (_2) => { + }; + } + } + Shiny.inputBindings.register(new NewCustomBinding(), `${tagName}-Binding`); + } + // srcts/index.ts - var customInputTag = "shiny-custom-input"; - var ShinyCustomInput = class extends s3 { + var customInputTag = "custom-component"; + var CustomComponentEl = class extends s3 { constructor() { super(...arguments); this.value = 0; @@ -638,14 +670,15 @@ * This alerts Shiny that the value has changed and it should check for the * latest value. This is set by the input binding. */ - this.onChangeCallback = null; + this.notifyBindingOfChange = () => { + }; } /** * Function to run when the increment button is clicked. */ onIncrement() { this.value++; - this.onChangeCallback?.(true); + this.notifyBindingOfChange(true); } render() { return x` @@ -655,7 +688,7 @@ `; } }; - ShinyCustomInput.styles = i` + CustomComponentEl.styles = i` :host { display: block; border: solid 1px gray; @@ -666,25 +699,11 @@ `; __decorateClass([ n4({ type: Number }) - ], ShinyCustomInput.prototype, "value", 2); - ShinyCustomInput = __decorateClass([ + ], CustomComponentEl.prototype, "value", 2); + CustomComponentEl = __decorateClass([ t3(customInputTag) - ], ShinyCustomInput); - var CustomInputBinding = class extends Shiny.InputBinding { - constructor() { - super(); - } - find(scope) { - return $(scope).find(customInputTag); - } - getValue(el) { - return el.value; - } - subscribe(el, callback) { - el.onChangeCallback = callback; - } - }; - Shiny.inputBindings.register(new CustomInputBinding(), customInputTag); + ], CustomComponentEl); + makeInputBinding(customInputTag); })(); /*! Bundled license information: diff --git a/shiny/templates/package-templates/js-input/package-lock.json b/shiny/templates/package-templates/js-input/package-lock.json index cd7fbe350..a5ceffd8d 100644 --- a/shiny/templates/package-templates/js-input/package-lock.json +++ b/shiny/templates/package-templates/js-input/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@shiny-helpers/main": "0.0.13", + "@posit-dev/shiny-bindings-core": "^0.0.2", "lit": "^3.0.2" }, "devDependencies": { @@ -382,10 +382,10 @@ "@lit-labs/ssr-dom-shim": "^1.1.2" } }, - "node_modules/@shiny-helpers/main": { - "version": "0.0.13", - "resolved": "https://registry.npmjs.org/@shiny-helpers/main/-/main-0.0.13.tgz", - "integrity": "sha512-N53oFskuOxKlE2o0/5vI+7I87p4MRNB8Q5LA/vCWQP35nBCIA2ymePCPWVG5P58CFqeKpvBdmUhdN1FlGdf1fA==" + "node_modules/@posit-dev/shiny-bindings-core": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-core/-/shiny-bindings-core-0.0.2.tgz", + "integrity": "sha512-uJ1cUAjtIZVFqU7bXqjZm8HX72FrM3BVfCtReppTUrtqE2SJnOQNlUZpc+xkV+3WkPeqnpn0NS7SH880mkcrPQ==" }, "node_modules/@types/trusted-types": { "version": "2.0.7", @@ -458,9 +458,9 @@ } }, "node_modules/typescript": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz", - "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/shiny/templates/package-templates/js-input/package.json b/shiny/templates/package-templates/js-input/package.json index 6ca6d3887..4115779e0 100644 --- a/shiny/templates/package-templates/js-input/package.json +++ b/shiny/templates/package-templates/js-input/package.json @@ -14,7 +14,7 @@ "typescript": "^5.2.2" }, "dependencies": { - "lit": "^3.0.2", - "@shiny-helpers/main": "0.0.18" + "@posit-dev/shiny-bindings-core": "^0.0.2", + "lit": "^3.0.2" } } diff --git a/shiny/templates/package-templates/js-input/srcts/index.ts b/shiny/templates/package-templates/js-input/srcts/index.ts index 70b716a69..4e6b47532 100644 --- a/shiny/templates/package-templates/js-input/srcts/index.ts +++ b/shiny/templates/package-templates/js-input/srcts/index.ts @@ -1,7 +1,7 @@ import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; -import type { CustomElementInput } from "@shiny-helpers/main"; -import { makeInputBinding } from "@shiny-helpers/main"; +import type { CustomElementInput } from "@posit-dev/shiny-bindings-core"; +import { makeInputBinding } from "@posit-dev/shiny-bindings-core"; const customInputTag = "custom-component"; /** diff --git a/shiny/templates/package-templates/js-output/package-lock.json b/shiny/templates/package-templates/js-output/package-lock.json index e3f727ac9..a5ceffd8d 100644 --- a/shiny/templates/package-templates/js-output/package-lock.json +++ b/shiny/templates/package-templates/js-output/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@shiny-helpers/main": "^0.0.18", + "@posit-dev/shiny-bindings-core": "^0.0.2", "lit": "^3.0.2" }, "devDependencies": { @@ -382,10 +382,10 @@ "@lit-labs/ssr-dom-shim": "^1.1.2" } }, - "node_modules/@shiny-helpers/main": { - "version": "0.0.18", - "resolved": "https://registry.npmjs.org/@shiny-helpers/main/-/main-0.0.18.tgz", - "integrity": "sha512-+qyE2+wD8JCTNltNGmYe5DZy/lE++RUfl100IjMgz1VJqf5mTD4cghYb0NsCCHc8AF+YpyDOAmmZVx3aIyffuA==" + "node_modules/@posit-dev/shiny-bindings-core": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-core/-/shiny-bindings-core-0.0.2.tgz", + "integrity": "sha512-uJ1cUAjtIZVFqU7bXqjZm8HX72FrM3BVfCtReppTUrtqE2SJnOQNlUZpc+xkV+3WkPeqnpn0NS7SH880mkcrPQ==" }, "node_modules/@types/trusted-types": { "version": "2.0.7", @@ -458,9 +458,9 @@ } }, "node_modules/typescript": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz", - "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/shiny/templates/package-templates/js-output/package.json b/shiny/templates/package-templates/js-output/package.json index 1e35952f6..4115779e0 100644 --- a/shiny/templates/package-templates/js-output/package.json +++ b/shiny/templates/package-templates/js-output/package.json @@ -14,7 +14,7 @@ "typescript": "^5.2.2" }, "dependencies": { - "lit": "^3.0.2", - "@shiny-helpers/main": "^0.0.18" + "@posit-dev/shiny-bindings-core": "^0.0.2", + "lit": "^3.0.2" } } diff --git a/shiny/templates/package-templates/js-output/srcts/index.ts b/shiny/templates/package-templates/js-output/srcts/index.ts index 722dd8ce8..6e0c00b97 100644 --- a/shiny/templates/package-templates/js-output/srcts/index.ts +++ b/shiny/templates/package-templates/js-output/srcts/index.ts @@ -1,7 +1,7 @@ import { LitElement, html, css } from "lit"; import { property } from "lit/decorators.js"; -import { makeOutputBinding } from "@shiny-helpers/main"; +import { makeOutputBinding } from "@posit-dev/shiny-bindings-core"; // What the server-side output binding will send to the client. It's important // to make sure this matches what the python code is sending. diff --git a/shiny/templates/package-templates/js-react/package-lock.json b/shiny/templates/package-templates/js-react/package-lock.json index e07e883b8..4ecf3686c 100644 --- a/shiny/templates/package-templates/js-react/package-lock.json +++ b/shiny/templates/package-templates/js-react/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@shiny-helpers/react": "^0.0.13", + "@posit-dev/shiny-bindings-react": "^0.0.2", "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0" @@ -381,16 +381,21 @@ "react": "*" } }, - "node_modules/@shiny-helpers/react": { - "version": "0.0.13", - "resolved": "https://registry.npmjs.org/@shiny-helpers/react/-/react-0.0.13.tgz", - "integrity": "sha512-4vzXoCglKl1OoVYRqcrxc4JI684kGY1oyEjrE6K4L1ITEeNiV3CtXTn4Qsks7HBm/5oCyv9TigQnFheubirSuw==", + "node_modules/@posit-dev/shiny-bindings-core": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-core/-/shiny-bindings-core-0.0.2.tgz", + "integrity": "sha512-uJ1cUAjtIZVFqU7bXqjZm8HX72FrM3BVfCtReppTUrtqE2SJnOQNlUZpc+xkV+3WkPeqnpn0NS7SH880mkcrPQ==" + }, + "node_modules/@posit-dev/shiny-bindings-react": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-react/-/shiny-bindings-react-0.0.2.tgz", + "integrity": "sha512-lpwiU34iGAF0e6lGMwkskLgYPwyA5UtEvpP4bVQUwVsUtJuFZPU+CmOh0P3uJZwbgO+JaKKhLrUHAZ3EzgMzNw==", "dependencies": { + "@posit-dev/shiny-bindings-core": "*", "@types/react": "^18.2.38", "@types/react-dom": "^18.2.16", "react": "^18.2.0", "react-dom": "^18.2.0", - "shiny-helpers": "*", "typescript": "^5.2.2" }, "peerDependencies": { @@ -404,9 +409,9 @@ "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { - "version": "18.2.39", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz", - "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==", + "version": "18.2.42", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz", + "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -446,9 +451,9 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/esbuild": { "version": "0.19.5", @@ -597,24 +602,15 @@ "loose-envify": "^1.1.0" } }, - "node_modules/shiny-helpers": { - "version": "0.0.12", - "resolved": "https://registry.npmjs.org/shiny-helpers/-/shiny-helpers-0.0.12.tgz", - "integrity": "sha512-8S99ig6OP/fsi/dzhstjw/4eHegY6tksUJE4821gqIGCu6DP9FlJGYZIt4hJqSEWdWpC2HlnFNLdd2PFkIThTw==", - "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - } - }, "node_modules/tinycolor2": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" }, "node_modules/typescript": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz", - "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/shiny/templates/package-templates/js-react/package.json b/shiny/templates/package-templates/js-react/package.json index 5a799590f..84bf237a4 100644 --- a/shiny/templates/package-templates/js-react/package.json +++ b/shiny/templates/package-templates/js-react/package.json @@ -16,9 +16,9 @@ "typescript": "^5.2.2" }, "dependencies": { + "@posit-dev/shiny-bindings-react": "^0.0.2", "react": "^18.2.0", "react-color": "^2.19.3", - "react-dom": "^18.2.0", - "@shiny-helpers/react": "^0.0.13" + "react-dom": "^18.2.0" } } diff --git a/shiny/templates/package-templates/js-react/srcts/index.tsx b/shiny/templates/package-templates/js-react/srcts/index.tsx index 86d3975f7..bc87655e0 100644 --- a/shiny/templates/package-templates/js-react/srcts/index.tsx +++ b/shiny/templates/package-templates/js-react/srcts/index.tsx @@ -1,7 +1,7 @@ import { SketchPicker } from "react-color"; import React from "react"; -import { makeReactInput } from "@shiny-helpers/react"; +import { makeReactInput } from "@posit-dev/shiny-bindings-react"; // Generates a new input binding that renders the supplied react component // into the root of the webcomponent. From 0befa3a53f83502c845ceb700f9f937f8607008c Mon Sep 17 00:00:00 2001 From: Nick Strayer Date: Thu, 7 Dec 2023 11:15:53 -0500 Subject: [PATCH 3/6] Fix bad paths in tsconfig --- .../package-templates/js-input/tsconfig.json | 4 ++-- .../package-templates/js-output/tsconfig.json | 4 ++-- .../package-templates/js-react/tsconfig.json | 12 +++--------- 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/shiny/templates/package-templates/js-input/tsconfig.json b/shiny/templates/package-templates/js-input/tsconfig.json index 3ed0398b3..fcac5bbd6 100644 --- a/shiny/templates/package-templates/js-input/tsconfig.json +++ b/shiny/templates/package-templates/js-input/tsconfig.json @@ -11,8 +11,8 @@ "checkJs": false, "skipLibCheck": true, "isolatedModules": true, - "outDir": "dist", - "rootDir": "./src", + "outDir": "custom_component/distjs", + "rootDir": "srcts", "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, diff --git a/shiny/templates/package-templates/js-output/tsconfig.json b/shiny/templates/package-templates/js-output/tsconfig.json index 3ed0398b3..fcac5bbd6 100644 --- a/shiny/templates/package-templates/js-output/tsconfig.json +++ b/shiny/templates/package-templates/js-output/tsconfig.json @@ -11,8 +11,8 @@ "checkJs": false, "skipLibCheck": true, "isolatedModules": true, - "outDir": "dist", - "rootDir": "./src", + "outDir": "custom_component/distjs", + "rootDir": "srcts", "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, diff --git a/shiny/templates/package-templates/js-react/tsconfig.json b/shiny/templates/package-templates/js-react/tsconfig.json index 3f5645b52..b0c09e394 100644 --- a/shiny/templates/package-templates/js-react/tsconfig.json +++ b/shiny/templates/package-templates/js-react/tsconfig.json @@ -11,8 +11,8 @@ "checkJs": false, "skipLibCheck": true, "isolatedModules": true, - "outDir": "dist", - "rootDir": "./src", + "outDir": "custom_component/distjs", + "rootDir": "srcts", "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, @@ -25,13 +25,7 @@ "noImplicitOverride": true, "esModuleInterop": true, "strict": true, - "jsx": "react-jsx", - "plugins": [ - { - "name": "ts-lit-plugin", - "strict": true - } - ] + "jsx": "react-jsx" }, "include": ["srcts/**/*.ts", "srcts/index.tsx"], "exclude": [] From 515a248a4d6543a7165df335fe2da8ef6388a5d3 Mon Sep 17 00:00:00 2001 From: Nick Strayer Date: Thu, 7 Dec 2023 16:18:10 -0500 Subject: [PATCH 4/6] Fix out-of-date comment in output component template --- .../js-output/custom_component/custom_component.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shiny/templates/package-templates/js-output/custom_component/custom_component.py b/shiny/templates/package-templates/js-output/custom_component/custom_component.py index 39cdea547..789e73371 100644 --- a/shiny/templates/package-templates/js-output/custom_component/custom_component.py +++ b/shiny/templates/package-templates/js-output/custom_component/custom_component.py @@ -35,7 +35,7 @@ async def render_custom_component( return None if not isinstance(res, int): - # Throw an error if the value is not a dataframe + # Throw an error if the value is not an integer. raise TypeError(f"Expected a integer, got {type(res)}. ") # Send the results to the client. Make sure that this is a serializable From 0fe07d5646cb87fb1f25b381849eefb9f2cc088b Mon Sep 17 00:00:00 2001 From: Nick Strayer Date: Tue, 12 Dec 2023 16:03:49 -0500 Subject: [PATCH 5/6] Fine vscode, I'll update to "explicit" --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index d2d06aa89..07dbac4c2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -29,7 +29,7 @@ "editor.formatOnSave": true, "editor.tabSize": 4, "editor.codeActionsOnSave": { - "source.organizeImports": true + "source.organizeImports": "explicit" } }, "isort.args": ["--profile", "black"], From 5af774154752018012c40f0abbdf4e5071c8d3ca Mon Sep 17 00:00:00 2001 From: Nick Strayer Date: Tue, 12 Dec 2023 16:25:30 -0500 Subject: [PATCH 6/6] Update the templates to use simpler input definition syntax and v0.0.3 of the bindings packages --- .../package-templates/js-input/package-lock.json | 8 ++++---- shiny/templates/package-templates/js-input/package.json | 2 +- shiny/templates/package-templates/js-input/srcts/index.ts | 8 ++++---- .../package-templates/js-output/package-lock.json | 8 ++++---- shiny/templates/package-templates/js-output/package.json | 2 +- .../package-templates/js-react/package-lock.json | 8 ++++---- shiny/templates/package-templates/js-react/package.json | 2 +- 7 files changed, 19 insertions(+), 19 deletions(-) diff --git a/shiny/templates/package-templates/js-input/package-lock.json b/shiny/templates/package-templates/js-input/package-lock.json index a5ceffd8d..b14fe37f3 100644 --- a/shiny/templates/package-templates/js-input/package-lock.json +++ b/shiny/templates/package-templates/js-input/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@posit-dev/shiny-bindings-core": "^0.0.2", + "@posit-dev/shiny-bindings-core": "^0.0.3", "lit": "^3.0.2" }, "devDependencies": { @@ -383,9 +383,9 @@ } }, "node_modules/@posit-dev/shiny-bindings-core": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-core/-/shiny-bindings-core-0.0.2.tgz", - "integrity": "sha512-uJ1cUAjtIZVFqU7bXqjZm8HX72FrM3BVfCtReppTUrtqE2SJnOQNlUZpc+xkV+3WkPeqnpn0NS7SH880mkcrPQ==" + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-core/-/shiny-bindings-core-0.0.3.tgz", + "integrity": "sha512-G4Zd916Y9YkvuQHRJtRceQBwJD51pBsEyYZFpkIwHiyR56nGGbX0POqHSE39ZQMxa+ewhiBhd4FvK5RgGOoVCA==" }, "node_modules/@types/trusted-types": { "version": "2.0.7", diff --git a/shiny/templates/package-templates/js-input/package.json b/shiny/templates/package-templates/js-input/package.json index 4115779e0..a3cf5f842 100644 --- a/shiny/templates/package-templates/js-input/package.json +++ b/shiny/templates/package-templates/js-input/package.json @@ -14,7 +14,7 @@ "typescript": "^5.2.2" }, "dependencies": { - "@posit-dev/shiny-bindings-core": "^0.0.2", + "@posit-dev/shiny-bindings-core": "^0.0.3", "lit": "^3.0.2" } } diff --git a/shiny/templates/package-templates/js-input/srcts/index.ts b/shiny/templates/package-templates/js-input/srcts/index.ts index 4e6b47532..5edc92d89 100644 --- a/shiny/templates/package-templates/js-input/srcts/index.ts +++ b/shiny/templates/package-templates/js-input/srcts/index.ts @@ -1,16 +1,14 @@ import { LitElement, html, css } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { property } from "lit/decorators.js"; import type { CustomElementInput } from "@posit-dev/shiny-bindings-core"; import { makeInputBinding } from "@posit-dev/shiny-bindings-core"; -const customInputTag = "custom-component"; /** * An example element. * * @csspart button - The button that increments the value * @csspart display - The span containing the value */ -@customElement(customInputTag) export class CustomComponentEl extends LitElement implements CustomElementInput @@ -53,4 +51,6 @@ export class CustomComponentEl } // Setup the input binding -makeInputBinding(customInputTag); +makeInputBinding("custom-component", CustomComponentEl, { + registerElement: true, +}); diff --git a/shiny/templates/package-templates/js-output/package-lock.json b/shiny/templates/package-templates/js-output/package-lock.json index a5ceffd8d..b14fe37f3 100644 --- a/shiny/templates/package-templates/js-output/package-lock.json +++ b/shiny/templates/package-templates/js-output/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@posit-dev/shiny-bindings-core": "^0.0.2", + "@posit-dev/shiny-bindings-core": "^0.0.3", "lit": "^3.0.2" }, "devDependencies": { @@ -383,9 +383,9 @@ } }, "node_modules/@posit-dev/shiny-bindings-core": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-core/-/shiny-bindings-core-0.0.2.tgz", - "integrity": "sha512-uJ1cUAjtIZVFqU7bXqjZm8HX72FrM3BVfCtReppTUrtqE2SJnOQNlUZpc+xkV+3WkPeqnpn0NS7SH880mkcrPQ==" + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-core/-/shiny-bindings-core-0.0.3.tgz", + "integrity": "sha512-G4Zd916Y9YkvuQHRJtRceQBwJD51pBsEyYZFpkIwHiyR56nGGbX0POqHSE39ZQMxa+ewhiBhd4FvK5RgGOoVCA==" }, "node_modules/@types/trusted-types": { "version": "2.0.7", diff --git a/shiny/templates/package-templates/js-output/package.json b/shiny/templates/package-templates/js-output/package.json index 4115779e0..a3cf5f842 100644 --- a/shiny/templates/package-templates/js-output/package.json +++ b/shiny/templates/package-templates/js-output/package.json @@ -14,7 +14,7 @@ "typescript": "^5.2.2" }, "dependencies": { - "@posit-dev/shiny-bindings-core": "^0.0.2", + "@posit-dev/shiny-bindings-core": "^0.0.3", "lit": "^3.0.2" } } diff --git a/shiny/templates/package-templates/js-react/package-lock.json b/shiny/templates/package-templates/js-react/package-lock.json index 4ecf3686c..dc7eb9191 100644 --- a/shiny/templates/package-templates/js-react/package-lock.json +++ b/shiny/templates/package-templates/js-react/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@posit-dev/shiny-bindings-react": "^0.0.2", + "@posit-dev/shiny-bindings-react": "^0.0.3", "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0" @@ -387,9 +387,9 @@ "integrity": "sha512-uJ1cUAjtIZVFqU7bXqjZm8HX72FrM3BVfCtReppTUrtqE2SJnOQNlUZpc+xkV+3WkPeqnpn0NS7SH880mkcrPQ==" }, "node_modules/@posit-dev/shiny-bindings-react": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-react/-/shiny-bindings-react-0.0.2.tgz", - "integrity": "sha512-lpwiU34iGAF0e6lGMwkskLgYPwyA5UtEvpP4bVQUwVsUtJuFZPU+CmOh0P3uJZwbgO+JaKKhLrUHAZ3EzgMzNw==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@posit-dev/shiny-bindings-react/-/shiny-bindings-react-0.0.3.tgz", + "integrity": "sha512-zarfRZ3/dUFBf11Vc2fUM4grpp6xaJQAkqZRj9W/Xbtax3LJ4PElzPzjZicN9PdDBL72cux8XJ+U+0G3b6G8Nw==", "dependencies": { "@posit-dev/shiny-bindings-core": "*", "@types/react": "^18.2.38", diff --git a/shiny/templates/package-templates/js-react/package.json b/shiny/templates/package-templates/js-react/package.json index 84bf237a4..6ac2fbb2c 100644 --- a/shiny/templates/package-templates/js-react/package.json +++ b/shiny/templates/package-templates/js-react/package.json @@ -16,7 +16,7 @@ "typescript": "^5.2.2" }, "dependencies": { - "@posit-dev/shiny-bindings-react": "^0.0.2", + "@posit-dev/shiny-bindings-react": "^0.0.3", "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0"