Merge branch 'main' into docs/parameters-grid-table

posit-dev · Dec 13, 2023 · 9d1d012 · 9d1d012
2 parents fc4aa67 + 3ffb7d5
commit 9d1d012
Show file tree

Hide file tree

Showing 22 changed files with 249 additions and 190 deletions.
diff --git a/shiny/api-examples/layout_column_wrap/app.py b/shiny/api-examples/layout_column_wrap/app.py
@@ -7,7 +7,7 @@
     ui.layout_column_wrap(y, y, y, width=1 / 2),
     ui.hr(),
     # Has three columns when viewport is wider than 750px
-    ui.layout_column_wrap(y, y, y, width="250%"),
+    ui.layout_column_wrap(y, y, y, width="250px"),
 )
 
 

diff --git a/shiny/templates/app-templates/dashboard/app.py b/shiny/templates/app-templates/dashboard/app.py
@@ -30,13 +30,12 @@ def make_value_box(penguin):
         ),
     ),
     ui.row(
-        ui.layout_column_wrap(
+        ui.layout_columns(
             *[make_value_box(penguin) for penguin in species],
-            width=1 / 3,
         )
     ),
     ui.row(
-        ui.layout_column_wrap(
+        ui.layout_columns(
             ui.card(
                 ui.card_header("Summary statistics"),
                 ui.output_data_frame("summary_statistics"),
@@ -45,7 +44,6 @@ def make_value_box(penguin):
                 ui.card_header("Penguin bills"),
                 ui.output_plot("length_depth"),
             ),
-            width=1 / 2,
         ),
     ),
 )

diff --git a/shiny/templates/app-templates/multi-page/modules.py b/shiny/templates/app-templates/multi-page/modules.py
@@ -10,22 +10,19 @@
 def training_ui():
     return ui.nav(
         "Training Dashboard",
-        ui.row(
-            ui.layout_column_wrap(
-                ui.card(
-                    ui.card_header("Model Metrics"),
-                    ui.output_plot("metric"),
-                    ui.input_select(
-                        "metric",
-                        "Metric",
-                        choices=["ROC Curve", "Precision-Recall"],
-                    ),
+        ui.layout_columns(
+            ui.card(
+                ui.card_header("Model Metrics"),
+                ui.output_plot("metric"),
+                ui.input_select(
+                    "metric",
+                    "Metric",
+                    choices=["ROC Curve", "Precision-Recall"],
                 ),
-                ui.card(
-                    ui.card_header("Training Scores"),
-                    ui.output_plot("score_dist"),
-                ),
-                width=1 / 2,
+            ),
+            ui.card(
+                ui.card_header("Training Scores"),
+                ui.output_plot("score_dist"),
             ),
         ),
     )
@@ -54,22 +51,23 @@ def metric():
 def data_view_ui():
     return ui.nav(
         "View Data",
-        ui.row(
-            ui.layout_column_wrap(
-                ui.value_box(
-                    title="Row count",
-                    value=ui.output_text("row_count"),
-                    theme="primary",
-                ),
-                ui.value_box(
-                    title="Mean score",
-                    value=ui.output_text("mean_score"),
-                    theme="bg-green",
-                ),
-                width=1 / 2,
+        ui.layout_columns(
+            ui.value_box(
+                title="Row count",
+                value=ui.output_text("row_count"),
+                theme="primary",
+            ),
+            ui.value_box(
+                title="Mean score",
+                value=ui.output_text("mean_score"),
+                theme="bg-green",
             ),
+            gap="20px",
+        ),
+        ui.layout_columns(
+            ui.card(ui.output_data_frame("data")),
+            style="margin-top: 20px;",
         ),
-        ui.card(ui.output_data_frame("data")),
     )
 
 

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
@@ -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
diff --git 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.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
@@ -1,16 +1,14 @@
 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 { 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<number>
@@ -53,4 +51,6 @@ export class CustomComponentEl
 }
 
 // Setup the input binding
-makeInputBinding<CustomComponentEl>(customInputTag);
+makeInputBinding("custom-component", CustomComponentEl, {
+  registerElement: true,
+});
diff --git 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/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