brut 0.9.2 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d6cfb91ae2d42181989cc6956cba68f8d4b9c036173a76c858b3c11e0d8c1fe5
-  data.tar.gz: 6b7b99f6e17b7a648b3dd3ef6091005dae5b44bc6ea80f178b5d6ddb8b81f06e
+  metadata.gz: c8a571939eb22e8583c8c44e8744565ef08cd08930fd3f378bc15ac245bc37da
+  data.tar.gz: 36fae7a408ca4a74d884e5fcc031e68920828bb17414d8b56bf9aff96df8c7e4
 SHA512:
-  metadata.gz: b95fdee9828d978a2acd60298e7994e8cb08f64fdf679afc1fcd87ca38ca26030974b91a4cce00024ee85be215de44cdd8b132093e6818bcc60b7a18a1548ace
-  data.tar.gz: 175bcaa59e739dd35e5452ad41073b52a7c070fe69a3295c6eebf7f8de6707d57781ecb4d5f7015b2bd832929a5511c7fe2ea7346566c4880c15505166857e06
+  metadata.gz: e63645bd0090fb42de67b546b691cf2cf062da716938a8009db7caf556c613d64085fdc424c5d0c8d30f5edecb69aa58d6b273930309a221a56f36f8241cca49
+  data.tar.gz: db7fc64ad5d4b9615bd9217e73536a7c708a46ae1723841bc3fd2dfc524bee7a93b0e666533c4ed9ddbcbe0e86bcf8b6168c7146bed70a09fab32fbf87b59066

data/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Brut CHANGELOG
 
+## v0.11.0 - Aug 27, 2025
+
+* Added `Brut::Instrumentation::Methods` to allow instrumenting existing methods via `instrument`:
+  ```ruby
+  class Widget
+    include Brut::Instrumentation::Methods
+
+    instrument def save
+    end
+  end
+  ```
+  See docs for more options and details.
+* When an exception is caught in a span, the span's status is set to an error.
+
+## v0.10.0 - Aug 15, 2025
+
+* Changed `ConstraintViolations` HTML to indicate if a `<brut-cv>` is server-generated, even if it's generating  client-side constraint. See #56.
+* `<brut-form>` now requires that all `<brut-cv-messages>` have an `input-name`.
+
+
 ## v0.9.2 - Aug 14, 2025
 
 * Updated Docker instructions for installing PostgreSQL client, due to ruby:3.4 image upgrading to Debian Trixie which removed something. See https://github.com/thirdtank/brut/issues/55

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    brut (0.9.2)
+    brut (0.11.0)
       concurrent-ruby
       i18n
       irb
@@ -23,7 +23,7 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (8.0.2)
+    activesupport (8.0.2.1)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -47,26 +47,26 @@ GEM
     dotenv (3.1.8)
     drb (2.2.3)
     erb (5.0.2)
-    factory_bot (6.5.4)
+    factory_bot (6.5.5)
       activesupport (>= 6.1.0)
     faker (3.5.2)
       i18n (>= 1.8.11, < 2)
-    google-protobuf (4.31.1)
+    google-protobuf (4.32.0)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.31.1-aarch64-linux-gnu)
+    google-protobuf (4.32.0-aarch64-linux-gnu)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.31.1-arm64-darwin)
+    google-protobuf (4.32.0-arm64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.31.1-x86-linux-gnu)
+    google-protobuf (4.32.0-x86-linux-gnu)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.31.1-x86_64-darwin)
+    google-protobuf (4.32.0-x86_64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.31.1-x86_64-linux-gnu)
+    google-protobuf (4.32.0-x86_64-linux-gnu)
       bigdecimal
       rake (>= 13)
     googleapis-common-protos-types (1.20.0)
@@ -99,7 +99,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.18.9-x86_64-linux-gnu)
       racc (~> 1.4)
-    opentelemetry-api (1.5.0)
+    opentelemetry-api (1.6.0)
     opentelemetry-common (0.22.0)
       opentelemetry-api (~> 1.0)
     opentelemetry-exporter-otlp (0.30.0)
@@ -111,7 +111,7 @@ GEM
       opentelemetry-semantic_conventions
     opentelemetry-registry (0.4.0)
       opentelemetry-api (~> 1.1)
-    opentelemetry-sdk (1.8.0)
+    opentelemetry-sdk (1.8.1)
       opentelemetry-api (~> 1.1)
       opentelemetry-common (~> 0.20)
       opentelemetry-registry (~> 0.2)
@@ -149,7 +149,7 @@ GEM
     rdoc (6.14.2)
       erb
       psych (>= 4.0.0)
-    regexp_parser (2.11.1)
+    regexp_parser (2.11.2)
     reline (0.6.2)
       io-console (~> 0.5)
     rspec (3.13.1)
@@ -164,8 +164,8 @@ GEM
     rspec-mocks (3.13.5)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-support (3.13.4)
-    rubocop (1.79.2)
+    rspec-support (3.13.5)
+    rubocop (1.80.1)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -202,7 +202,7 @@ GEM
       concurrent-ruby (~> 1.0)
     tzinfo-data (1.2025.2)
       tzinfo (>= 1.0.0)
-    unicode-display_width (3.1.4)
+    unicode-display_width (3.1.5)
       unicode-emoji (~> 4.0, >= 4.0.4)
     unicode-emoji (4.0.4)
     uri (1.0.3)

data/bin/new-version

@@ -1,8 +1,8 @@
 set -e
 
+VIM=nvim
 if [ -f /.dockerenv ]; then
-  echo "Do not run this inside Docker"
-  exit 1
+  VIM=vim
 fi
 
-nvim -o lib/brut/version.rb mkbrut/lib/mkbrut/version.rb brut-js/package.json brut-css/package.json CHANGELOG.md
+$VIM -o lib/brut/version.rb mkbrut/lib/mkbrut/version.rb brut-js/package.json brut-css/package.json CHANGELOG.md

data/brut-css/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "brut-css",
-  "version": "0.9.2",
+  "version": "0.11.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "brut-css",
-      "version": "0.9.2",
+      "version": "0.11.0",
       "license": "Hippocratic-2.1",
       "devDependencies": {
         "comment-parser": "^1.4.1",

data/brut-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brut-css",
-  "version": "0.9.2",
+  "version": "0.11.0",
   "description": "Utility CSS Library for Full Stack Developers",
   "keywords": [
     "css"

data/brut-js/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "brut-js",
-  "version": "0.9.2",
+  "version": "0.11.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "brut-js",
-      "version": "0.9.2",
+      "version": "0.11.0",
       "license": "Hippocratic-2.1",
       "devDependencies": {
         "esbuild": "^0.24.0",

data/brut-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brut-js",
-  "version": "0.9.2",
+  "version": "0.11.0",
   "type": "module",
   "keywords": [ "WebComponents", "Custom Elements" ],
   "bugs": {

data/brut-js/specs/ConstraintViolationMessages.spec.js

@@ -18,9 +18,12 @@ describe("<brut-cv-messages>", () => {
 
     element.createMessages({validityState,inputName})
 
-    assert.equal(element.querySelectorAll("brut-cv").length,2)
+    const brutCvElements = element.querySelectorAll("brut-cv")
+    assert.equal(brutCvElements.length, 2)
     assert.match(element.textContent,new RegExp("This field does not match the pattern","m"))
     assert.match(element.textContent,new RegExp("This field is above the range","m"))
+    assert.equal(brutCvElements[0].getAttribute("client-side"),"")
+    assert.equal(brutCvElements[1].getAttribute("client-side"),"")
 
     element.clearClientSideMessages()
     assert.equal(element.textContent,"")

data/brut-js/specs/Form.spec.js

@@ -6,12 +6,12 @@ describe("<brut-form>", () => {
       <form>
         <label>
           <input required type="text" name="text">
-          <brut-cv-messages>
+          <brut-cv-messages input-name="text">
           </brut-cv-messages>
         </label>
         <label>
           <input required type="number" name="number">
-          <brut-cv-messages>
+          <brut-cv-messages input-name="number">
           </brut-cv-messages>
         </label>
         <input type="submit">Save</input>
@@ -134,48 +134,4 @@ describe("<brut-form>", () => {
     assert(gotValid)
     assert(!gotInvalid)
   })
-  withHTML(`
-    <brut-form>
-      <form>
-        <label>
-          <input required type="text" name="text">
-        </label>
-        <brut-cv-messages input-name='text'>
-        </brut-cv-messages>
-        <input type="submit">Save</input>
-      </form>
-    </brut-form>
-  `).test("locates the messages for errors based on name", ({window,document,assert}) => {
-
-    const brutForm         = document.querySelector("brut-form")
-    const form             = brutForm.querySelector("form")
-    const button           = form.querySelector("input[type=submit]")
-    const textFieldLabel   = form.querySelector("label:has(input[type=text])")
-
-    let submitted  = false
-    let gotInvalid = false
-    let gotValid   = false
-
-    form.addEventListener("submit", (event) => {
-      event.preventDefault()
-      submitted = true
-    })
-    brutForm.addEventListener("brut:valid", () => {
-      gotValid = true
-    })
-    brutForm.addEventListener("brut:invalid", () => {
-      gotInvalid = true
-    })
-
-    button.click()
-
-    assert(!submitted)
-    assert(!gotValid)
-    assert(gotInvalid)
-    assert.equal(brutForm.getAttribute("submitted-invalid"),"")
-
-    let error = brutForm.querySelector("brut-cv[input-name='text'][key='cv.cs.valueMissing']")
-    assert(error)
-
-  })
 })

data/brut-js/src/ConstraintViolationMessage.js

@@ -15,9 +15,15 @@ import I18nTranslation from "./I18nTranslation"
  * @property {string} key - the i18n translation key to use.  It must map to the `key` of a `<brut-i18n-translation>` on the page or
  * the element will not render any text.
  * @property {string} input-name - the name of the input, used to insert into the message, e.g. "Title is required".
+ * @property {boolean} server-generated if true, this indicates the element's HTML was generated on the server.
+ *           This means that your CSS can target it for display in all cases.  If this is not present,
+ *           you may want to avoid showing this element if the form has not been submitted yet.
+ *           Does not affect behavior.
  * @property {boolean} server-side if true, this indicates the element contains constraint violation messages
- *                                 from the server.  Currently doesn't affect this element's behavior, however
- *                                 AjaxSubmit will use it to locate where it should insert server-side errors.
+ *           from the server.  Does not affect behavior.
+ * @property {boolean} client-side if true, this indicates the element contains constraint violation messages
+ *           from the client, however they may have been generated from the server, since the server may
+ *           re-evaluate the client-side constraints.  Does not affect behavior of this tag.
  *
  * @see I18nTranslation
  * @see ConstraintViolationMessages
@@ -33,12 +39,15 @@ class ConstraintViolationMessage extends BaseCustomElement {
     "key",
     "input-name",
     "server-side",
+    "client-side",
+    "server-generated",
   ]
 
   static createElement(document,attributes) {
     const element = document.createElement(ConstraintViolationMessage.tagName)
     element.setAttribute("key",this.i18nKey("cs", attributes.key))
     element.setAttribute("input-name",attributes["input-name"])
+    element.setAttribute("client-side","")
     if (Object.hasOwn(attributes,"show-warnings")) {
       element.setAttribute("show-warnings",attributes["show-warnings"])
     }
@@ -85,6 +94,12 @@ class ConstraintViolationMessage extends BaseCustomElement {
   serverSideChangedCallback({newValueAsBoolean}) {
     // attribute listed for documentation purposes only
   }
+  clientSideChangedCallback({newValueAsBoolean}) {
+    // attribute listed for documentation purposes only
+  }
+  serverGeneratedChangedCallback({newValueAsBoolean}) {
+    // attribute listed for documentation purposes only
+  }
 
   update() {
     if (!this.#key) {

data/brut-js/src/Form.js

@@ -15,10 +15,7 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   set `submitted-invalid` on itself when that happens, thus allowing you to target invalid
  *   fields only after a submission attempt.
  * * You may wish to control the messaging of client-side constraint violations
- *   beyond what the browser gives you. Assuming your `INPUT` tags are inside a container
- *   like `LABEL`, a `brut-cv` tag found in that container
- *   (i.e. a sibling of your `INPUT`) will be modified to contain error messages specific
- *   to the {@link external:ValidityState} of the control.
+ *   beyond what the browser gives you. Assuming you have generated a `<brut-cv-messages input-name="«input name»"></brut-cv-messasges>`, it will be populated with `<brut-cv>` elements for each client-side constraint violation, based on the {@link external:ValidityState} of the control.
  *
  * @fires brut:invalid Fired when any element is found to be invalid
  * @fires brut:valid Fired when no element is found to be invalid.  This should be reliable to know
@@ -29,12 +26,12 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   <form ...>
  *     <label>
  *       <input type="text" required name="username">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="username">
  *       </brut-cv-messages>
  *     </label>
  *     <div> <!-- container need not be a label -->
  *       <input type="text" required minlength="4" name="alias">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="alias">
  *       </brut-cv-messages>
  *     </div>
  *     <button>Submit</button>
@@ -45,13 +42,13 @@ import ConstraintViolationMessages from "./ConstraintViolationMessages"
  *   <form ...>
  *     <label>
  *       <input type="text" required name="username">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="username">
  *         <brut-cv>This field is required</brut-cv>
  *       </brut-cv-messages>
  *     </label>
  *     <div> <!-- container need not be a label -->
  *       <input type="text" required minlength="4" name="alias">
- *       <brut-cv-messages>
+ *       <brut-cv-messages input-name="alias">
  *         <brut-cv>This field is required</brut-cv>
  *       </brut-cv-messages>
  *     </div>
@@ -107,28 +104,27 @@ class Form extends BaseCustomElement {
 
   #updateErrorMessages(event) {
     const element = event.target
-    const selector = ConstraintViolationMessages.tagName
-    let errorLabels = element.parentNode.querySelectorAll(selector)
-    if (errorLabels.length == 0) {
-      if (element.name && element.form) {
-        const moreGeneralSelector = `${ConstraintViolationMessages.tagName}[input-name='${element.name}']`
-        errorLabels = element.form.querySelectorAll(moreGeneralSelector)
-        if (errorLabels.length == 0) {
-          this.logger.warn(`Did not find any elements matching ${selector} or ${moreGeneralSelector}, so no error messages will be shown`)
-        }
+    let constraintViolationMessages = []
+    if (element.name && element.form) {
+      const selector = `${ConstraintViolationMessages.tagName}[input-name='${element.name}']`
+      constraintViolationMessages = element.form.querySelectorAll(selector)
+      if (constraintViolationMessages.length == 0) {
+        this.logger.warn(`Did not find any elements matching ${selector}, so no error messages will be shown`)
+      }
+    }
+    else {
+      if (element.name) {
+        this.logger.warn("Element has a name (%s), but is not associated with any form.", element.name)
       }
       else {
-        this.logger.warn("Did not find any elements matching %s and the form element has %s %s",
-          selector,
-          element.name ? "no name" : "a name, but",
-          element.form ? "no form" : "though has a form")
+        this.logger.warn("Element has a form, but has no name, which means we cannot locate %s by input-name", ConstraintViolationMessages.tagName)
       }
     }
-    if (errorLabels.length == 0) {
+    if (constraintViolationMessages.length == 0) {
       return
     }
     let anyErrors = false
-    errorLabels.forEach( (errorLabel) => {
+    constraintViolationMessages.forEach( (errorLabel) => {
       if (element.validity.valid) {
         errorLabel.clearClientSideMessages()
       }

data/brutrb.com/.vitepress/config.mjs

@@ -130,6 +130,7 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: "Migration Basics", link: "/recipes/migrations" },
+          { text: "Styling Form Errors", link: "/recipes/form-errors" },
           { text: "Authentication", link: "/recipes/authentication" },
           { text: "Alternate Layouts", link: "/recipes/alternate-layouts" },
           { text: "Blank Layouts", link: "/recipes/blank-layouts" },

data/brutrb.com/form-constraints.md

@@ -120,7 +120,7 @@ inputs `ValidityState`.  That may look like so:
 ```html {3}
 <input type="text" name="name" required minlength="3">
 <brut-cv-messages input-name="name">
-  <brut-cv input-name="name" key="rangeUnderflow"></brut-cv>
+  <brut-cv input-name="name" client-side key="rangeUnderflow"></brut-cv>
 </brut-cv-messages>
 ```
 
@@ -139,7 +139,7 @@ this HTML:
 ```html {4}
 <input type="text" name="name" required minlength="3">
 <brut-cv-messages input-name="name">
-  <brut-cv input-name="name" key="rangeUnderflow">
+  <brut-cv input-name="name" client-side key="rangeUnderflow">
     This field is too short
   </brut-cv>
 </brut-cv-messages>
@@ -154,13 +154,13 @@ violation, the same general markup is generated:
 ```html {3,4}
 <input type="text" name="name" required minlength="3">
 <brut-cv-messages input-name="name">
-  <brut-cv server-side>
+  <brut-cv server-generated server-side>
     This name has already been taken.
   </brut-cv>
 </brut-cv-messages>
 ```
 
-The `server-side` attribute is set, which can help with CSS targeting.
+The `server-genereted` and `server-side` attributes is set, which can help with CSS targeting.
 
 The *last* piece of this puzzle is a solution for the issue where forms that have
 not yet been submitted are considered to have invalid values by the browser.
@@ -177,7 +177,7 @@ This might lead to HTML like so:
 
     <input type="text" name="name" required minlength="3">
     <brut-cv-messages input-name="name">
-      <brut-cv input-name="name" key="rangeUnderflow">
+      <brut-cv input-name="name" client-side key="rangeUnderflow">
         This field is too short
       </brut-cv>
     </brut-cv-messages>
@@ -199,7 +199,7 @@ brut-cv {
 /* brut-cv inside a submitted-invalid
    OR brut-cv from the server ARE shown */
 brut-form[submitted-invalid] brut-cv,
-brut-cv[server-side] {
+brut-cv[server-generated] {
   display: block;
   color: red; /* e.g. */
 }

data/brutrb.com/getting-started.md

@@ -9,6 +9,7 @@ The simplest way to use `mkbrut` is to use an existing [Docker image](https://hu
 
 ```
 docker run \
+       --pull always \
        -v "$PWD":"$PWD" \
        -w "$PWD" \
        -u $(id -u):$(id -g) \
@@ -33,6 +34,7 @@ For now:
 
 ``` [Docker-based]
 docker run \
+       --pull always \
        -v "$PWD":"$PWD" \
        -w "$PWD" \
        -u $(id -u):$(id -g) \
@@ -55,6 +57,7 @@ To create your app without the demo components:
 
 ``` [Docker-based]
 docker run \
+       --pull always \
        -v "$PWD":"$PWD" \
        -w "$PWD" \
        -u $(id -u):$(id -g) \