lookbook 0.3.4 → 0.4.0.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 64f02e35ce90b1e27249752c3ea536ead68b7f6dba3a6bb0991dff8f29f63d92
-  data.tar.gz: effca06a618749eb6be51880929f417d0de03fe180d60e3df026065a7d0718ee
+  metadata.gz: 870ef6a17d84bca0a9fbbc421e27c2d6d682965d96c646f44d3db817e5a5e4f2
+  data.tar.gz: 669ce3b709792be5bdf46ac806efdca269d694349e74f759b0997cbbb456792e
 SHA512:
-  metadata.gz: 3323004e8ea85985c687adfe184b0519b3b168676df1640cdb5ada335ffef304a1266e6ad239e62968261e2c043c98b23589dd28ed3913e22c620500fc76cdde
-  data.tar.gz: a60ed3e4b295875fcac660f560d75dc4ac9ecff3cf26a410c30837326c84e26e8e2cea4ad183879ee94049836ab68fb81b3d59c0aab6c081d239744184cfc374
+  metadata.gz: b0293806f0d57b130c07ae84b5d30fad2625df0cbf2477303d924dddfd42ece6e49b10f15fc0b395fa65adfca3de3ab1096e72565a175bdab14df2af1ba57050
+  data.tar.gz: 2e5ad4ca7957d2684dc367b3a7d89d9922024cfc01cdbcd2567d30b830fe891b815924d64f5b7048783efd42736f41924354255f847850498fd596ba1c25e977

data/README.md

@@ -16,19 +16,17 @@
 
 It uses (and extends) the native [ViewComponent preview functionality](https://viewcomponent.org/guide/previews.html), so you don't need to learn a new DSL or create any extra files to get up and running.
 
-Lookbook uses [RDoc/Yard-style comment tags](https://rubydoc.info/gems/yard/file/docs/Tags.md) to extend the capabilities of ViewComponent's previews whilst maintaining compatability with the standard preview class format, so you can add or remove Lookbook at any time without having to rework your code.
+Lookbook uses [RDoc/Yard-style comment tags](#annotating-preview-files) to extend the capabilities of ViewComponent's previews whilst maintaining compatability with the standard preview class format, so you can add or remove Lookbook at any time without having to rework your code.
 
 ![Lookbook UI](.github/assets/lookbook_screenshot.png)
 
 ### Features
 
-- Tree-style navigation menu
-- Live nav search/filter
+- Tree-style navigation menu with live search/filter
 - Resizable preview window for responsive testing
 - Highlighted preview source code and HTML output
-- Add notes via comments in the preview file (markdown supported)
 - Auto-updating UI when component or preview files are updated _(Rails v6.0+ only)_
-- Hide, group and rename preview examples using comment tags
+- Use comment tag annotations for granular customisation of the preview experience
 - Fully compatible with standard the ViewComponent preview system
 
 ## Lookbook demo
@@ -39,8 +37,6 @@ The [demo app repo](https://github.com/allmarkedup/lookbook-demo) contains instr
 
 ## Installing
 
-> ⚠️ **Please note:** Lookbook is still in the early stages of development and has not yet been well tested across a wide range of Rails/ViewComponent versions and setups. If you run into any problems please [open an issue](issues) with as much detail as possible. Thanks! ⚠️
-
 ### 1. Add as a dependency
 
 Add Lookbook to your `Gemfile` somewhere **after** the ViewComponent gem. For example:
@@ -74,12 +70,13 @@ You don't need to do anything special to see your ViewComponent previews and exa
 
 > If you are new to ViewComponent development, checkout the ViewComponent [documentation](https://viewcomponent.org/guide/) on how to get started developing your components and [creating previews](https://viewcomponent.org/guide/previews.html).
 
-### Annotating preview files
+## Annotating preview files
 
 Lookbook parses [Yard-style comment tags](https://rubydoc.info/gems/yard/file/docs/Tags.md) in your preview classes to customise and extend the standard ViewComponent preview experience:
 
 ```ruby
 # @label Basic Button
+# @display bg_color: "#fff"
 class ButtonComponentPreview < ViewComponent::Preview
 
   # Primary button
@@ -93,11 +90,13 @@ class ButtonComponentPreview < ViewComponent::Preview
     end
   end
 
-  # Secondary button
+  # Inverted button
   # ---------------
-  # This should be used for less important actions.
+  # For light-on-dark screens
+  #
+  # @display bg_color: "#000"
   def secondary
-    render ButtonComponent.new(style: :secondary) do
+    render ButtonComponent.new(style: :inverted) do
       "Click me"
     end
   end
@@ -142,7 +141,12 @@ end
 
 The following Lookbook-specific tags are available for use:
 
-#### `@label <text>`
+* `@label <label>` -[Customise navigation labels](#-label-text)
+* `@hidden` - [Prevent items displaying in the navigation](#-hidden)
+* `@display <key>:<value>` - [Specify params to pass into the preview template](#-display-key-value)
+* `@!group <name> ... @!endgroup` - [Render examples in a group on the same page](#-group-name--endgroup)
+
+### 🔖 `@label <text>`
 
 Used to replace the auto-generated navigation label for the item with `<text>`.
 
@@ -158,7 +162,7 @@ class FooComponentPreview < ViewComponent::Preview
 end
 ```
 
-#### `@hidden`
+### 🔖 `@hidden`
 
 Used to temporarily exclude an item from the Lookbook navigation. The item will still be accessible via it's URL.
 
@@ -176,7 +180,91 @@ class FooComponentPreview < ViewComponent::Preview
 end
 ```
 
-#### `@!group <name> ... @!endgroup`
+### 🔖 `@display <key>: <value>`
+
+The `@display` tag lets you pass custom parameters to your preview layout so that the component preview can be customised on a per-example basis.
+
+```ruby
+# @display bg_color: "#eee"
+class FooComponentPreview < ViewComponent::Preview
+
+  # @display max_width: "500px"
+  # @display wrapper: true
+  def default
+  end
+end
+```
+
+The `@display` tag can be applied at the preview (class) or at the example (method) level, and takes the following format:
+
+```ruby
+# @display <key>: <value>
+```
+
+- `<key>` must be a valid Ruby hash key name, without quotes or spaces
+- `<value>` must be a valid JSON-parsable value. It can be a string (surrounded by **double** quotes), a boolean or an integer.
+
+> [See below for some examples](#some-display-value-examples) of valid and invalid `@display` values.
+
+These display parameters can then be accessed via the `params` hash in your preview layout using `params[:lookbook][:display][<key>]`:
+
+```html
+<!DOCTYPE html>
+<html style="background-color: <%= params[:lookbook][:display][:bg_color] %>">
+  <head>
+    <title>Preview Layout</title>
+  </head>
+  <body>
+    <div style="max-width: <%= params[:lookbook][:display][:max_width] || '100%' %>">
+      <% if params[:lookbook][:display][:wrapper] == true %>
+        <div class="wrapper"><%= yield %></div>
+      <% else %>
+        <%= yield %>
+      <% end %>
+    </div>
+  </body>
+</html>
+```
+
+> By default ViewComponent will use your default application layout for displaying the rendered example. However it's often better to create a seperate layout that you can customise and use specifically for previewing your components. See the  ViewComponent [preview docs](https://viewcomponent.org/guide/previews.html) for instructions on how to set that up.
+
+Any `@display` params set at the preview (class) level with be merged with those set on individual example methods.
+
+#### Global display params
+
+Global (fallback) display params can be defined via a configuration option:
+
+```ruby
+# config/application.rb
+config.lookbook.preview_display_params = {
+  bg_color: "#fff",
+  max_width: "100%"
+}
+```
+
+Globally defined display params will be available to all previews. Any preview or example-level `@display` values with the same name will take precedence and override a globally-set one.
+
+#### Some `@display` value examples:
+
+Valid:
+
+```ruby
+# @display body_classes: "bg-red border border-4 border-green"
+# @display wrap_in_container: true
+# @display emojis_to_show: 4
+# @display page_title: "Special example title"
+```
+
+Invalid:
+
+```ruby
+# @display body_classes: 'bg-red border border-4 border-green' [❌ single quotes]
+# @display wrap_in_container: should_wrap [❌ unquoted string, perhaps trying to call a method]
+# @display page title: "Special example title" [❌ space in key]
+# @display bg_color: #fff [❌ colors need quotes around them, it's not CSS!]
+```
+
+### 🔖 `@!group <name> ... @!endgroup`
 
 For smaller components, it can often make sense to render a set of preview examples in a single window, rather than representing them as individual items in the navigation which can start to look a bit cluttered.
 
@@ -222,7 +310,7 @@ The example above would display the `Sizes` examples grouped together on a singl
 
 You can have as many groups as you like within a single preview class, but each example can only belong to one group.
 
-#### Adding notes
+### Adding notes
 
 All comment text other than tags will be treated as markdown and rendered in the **Notes** panel for that example in the Lookbook UI.
 

data/app/assets/lookbook/js/nav/node.js

@@ -14,6 +14,17 @@ export default function navNode() {
         ? Array.from(this.$refs.items.querySelectorAll(":scope > li"))
         : [];
     },
+    navigateToFirstChild() {
+      if (this.open()) {
+        const child = this.firstVisibleChild();
+        if (child) {
+          const link = child.querySelector(":scope > a.nav-link");
+          if (link) {
+            this.navigate(link.getAttribute("href"));
+          }
+        }
+      }
+    },
     filter() {
       this.hidden = true;
       this.getChildren().forEach((child) => {
@@ -27,5 +38,12 @@ export default function navNode() {
     toggle() {
       this.$store.nav.open[this.id] = !this.$store.nav.open[this.id];
     },
+    firstVisibleChild() {
+      return this.getChildren().find((child) => {
+        return child._x_dataStack
+          ? child._x_dataStack[0].hidden === false
+          : false;
+      });
+    },
   };
 }

data/app/controllers/lookbook/app_controller.rb

@@ -95,14 +95,29 @@ module Lookbook
             html: preview_controller.render_example_to_string(@preview, example.name)
           }
         end
+        set_params
         joined = render_to_string "lookbook/preview_group", locals: {examples: examples}, layout: nil
-        preview_controller.render_in_layout_to_string(joined, @preview.lookbook_layout)
+        preview_controller.render_in_layout_to_string(joined, @preview.lookbook_layout || current_layout)
       else
-        preview_controller.request.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
+        set_params(@example)
+        preview_controller.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
         preview_controller.process(:previews)
       end
     end
 
+    def set_params(example = nil)
+      example_params = @preview.lookbook_display_params.deep_merge(example ? example.lookbook_display_params : {})
+      preview_controller.params.merge!({
+        lookbook: {
+          display: Lookbook.config.preview_display_params.deep_merge(example_params)
+        }
+      })
+    end
+
+    def current_layout
+      preview_controller.send :_layout, preview_controller.lookup_context, [:html]
+    end
+
     def assign_inspector
       @inspector = {
         panes: {

data/app/views/lookbook/nav/_leaf.html.erb

@@ -5,7 +5,7 @@ label ||= leaf.label
 %>
 <li x-data="navLeaf" :class="{hidden}" x-init="matchers = <%= leaf.matchers.to_json %>; path = '<%= path %>'; setActive()" @popstate.window="setActive">
   <a href="<%= path %>"
-    class="pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
+    class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
     style="<%= nav_padding_style(depth) %>"
     :class="{'!bg-indigo-100':active}"
     @click.stop.prevent="navigate"

data/app/views/lookbook/nav/_node.html.erb

@@ -8,7 +8,7 @@
       <svg class="feather h-3.5 w-3.5 mr-1.5 flex-none text-indigo-500">
         <use xlink:href="/lookbook-assets/feather-sprite.svg#<%= node.type == :preview ? 'layers' : 'folder' %>" />
       </svg>
-      <div class="truncate w-full whitespace-nowrap text-left <%= "font-bold" if node.type == :preview %>" @click.stop="toggle(); if (open()) { <%= "navigate('#{path}')" if defined?(path) %>}">
+      <div class="truncate w-full whitespace-nowrap text-left <%= "font-bold" if node.type == :preview %>" @click.stop="toggle(); navigateToFirstChild();">
         <%= node.label %>
       </div>
     </div>

data/lib/lookbook/engine.rb

@@ -30,6 +30,7 @@ module Lookbook
 
       options.preview_controller = vc_options.preview_controller if options.preview_controller.nil?
       options.preview_srcdoc = true if options.preview_srcdoc.nil?
+      options.preview_display_params ||= {}
 
       options.listen_paths = options.listen_paths.map(&:to_s)
       options.listen_paths += options.preview_paths

data/lib/lookbook/parser.rb

@@ -27,6 +27,7 @@ module Lookbook
       def define_tags
         YARD::Tags::Library.define_tag("Hidden status", :hidden)
         YARD::Tags::Library.define_tag("Label", :label)
+        YARD::Tags::Library.define_tag("Display", :display)
       end
     end
   end

data/lib/lookbook/taggable.rb

@@ -20,6 +20,23 @@ module Lookbook
       code_object&.group
     end
 
+    def lookbook_display_params
+      display_params = {}
+      if code_object&.tags(:display).present?
+        code_object.tags(:display).each do |tag|
+          parts = tag.text.match(/^\s?([^:]*)\s?:\s?(.*)\s?$/)
+          if parts.present?
+            begin
+              display_params[parts[1]] = JSON.parse parts[2]
+            rescue JSON::ParserError => err
+              Rails.logger.error("\n👀 [Lookbook] Invalid JSON in @display tag.\n👀 [Lookbook] (#{err.to_s})\n")
+            end
+          end
+        end
+      end
+      display_params
+    end
+
     # private
 
     def code_object

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "0.3.4"
+  VERSION = "0.4.0.beta.1"
 end

data/public/lookbook-assets/app.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.2.17 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
@@ -475,6 +475,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+  outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }
@@ -627,6 +639,7 @@ video {
   padding-left: 0.75rem;
   font-size: 1rem;
   line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
 }
 
 [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
@@ -638,7 +651,7 @@ video {
   --tw-ring-color: #2563eb;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   border-color: #2563eb;
 }
 
@@ -706,6 +719,7 @@ select {
   background-color: #fff;
   border-color: #6b7280;
   border-width: 1px;
+  --tw-shadow: 0 0 #0000;
 }
 
 [type='checkbox'] {
@@ -725,7 +739,7 @@ select {
   --tw-ring-color: #2563eb;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
 [type='checkbox']:checked,[type='radio']:checked {
@@ -2023,6 +2037,7 @@ pre[class*="language-"] {
   border-radius:4px;
   font-size:14px;
   line-height:1.4;
+  white-space:normal;
   outline:0;
   transition-property:transform,visibility,opacity
 }

data/public/lookbook-assets/app.js

@@ -1,7 +1,9 @@
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
+  var __defProps = Object.defineProperties;
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
   var __getOwnPropNames = Object.getOwnPropertyNames;
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __getProtoOf = Object.getPrototypeOf;
@@ -19,6 +21,7 @@
       }
     return a;
   };
+  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
   var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[Object.keys(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
@@ -710,7 +713,11 @@
     const type = (element.getAttribute("type") || "").toLowerCase();
     return name === "select" || name === "textarea" || name === "input" && type !== "submit" && type !== "reset" && type !== "checkbox" && type !== "radio" || element.isContentEditable;
   }
-  function fireDeterminedAction(el) {
+  function fireDeterminedAction(el, path2) {
+    const delegateEvent = new CustomEvent("hotkey-fire", { cancelable: true, detail: { path: path2 } });
+    const cancelled = !el.dispatchEvent(delegateEvent);
+    if (cancelled)
+      return;
     if (isFormField(el)) {
       el.focus();
     } else {
@@ -728,15 +735,24 @@
   var elementsLeaves = new WeakMap();
   var currentTriePosition = hotkeyRadixTrie;
   var resetTriePositionTimer = null;
+  var path = [];
   function resetTriePosition() {
+    path = [];
     resetTriePositionTimer = null;
     currentTriePosition = hotkeyRadixTrie;
   }
   function keyDownHandler(event) {
     if (event.defaultPrevented)
       return;
-    if (event.target instanceof Node && isFormField(event.target))
+    if (!(event.target instanceof Node))
       return;
+    if (isFormField(event.target)) {
+      const target = event.target;
+      if (!target.id)
+        return;
+      if (!target.ownerDocument.querySelector(`[data-hotkey-scope=${target.id}]`))
+        return;
+    }
     if (resetTriePositionTimer != null) {
       window.clearTimeout(resetTriePositionTimer);
     }
@@ -746,12 +762,26 @@
       resetTriePosition();
       return;
     }
+    path.push(hotkey(event));
     currentTriePosition = newTriePosition;
     if (newTriePosition instanceof Leaf) {
-      fireDeterminedAction(newTriePosition.children[newTriePosition.children.length - 1]);
-      event.preventDefault();
+      const target = event.target;
+      let shouldFire = false;
+      let elementToFire;
+      const formField = isFormField(target);
+      for (let i = newTriePosition.children.length - 1; i >= 0; i -= 1) {
+        elementToFire = newTriePosition.children[i];
+        const scope = elementToFire.getAttribute("data-hotkey-scope");
+        if (!formField && !scope || formField && target.id === scope) {
+          shouldFire = true;
+          break;
+        }
+      }
+      if (elementToFire && shouldFire) {
+        fireDeterminedAction(elementToFire, path);
+        event.preventDefault();
+      }
       resetTriePosition();
-      return;
     }
   }
   function install(element, hotkey2) {
@@ -2108,8 +2138,10 @@
     if (!el._x_attributeCleanups)
       return;
     Object.entries(el._x_attributeCleanups).forEach(([name, value]) => {
-      (names === void 0 || names.includes(name)) && value.forEach((i) => i());
-      delete el._x_attributeCleanups[name];
+      if (names === void 0 || names.includes(name)) {
+        value.forEach((i) => i());
+        delete el._x_attributeCleanups[name];
+      }
     });
   }
   var observer = new MutationObserver(onMutate);
@@ -2119,6 +2151,7 @@
     currentlyObserving = true;
   }
   function stopObservingMutations() {
+    flushObserver();
     observer.disconnect();
     currentlyObserving = false;
   }
@@ -2141,13 +2174,26 @@
   function mutateDom(callback) {
     if (!currentlyObserving)
       return callback();
-    flushObserver();
     stopObservingMutations();
     let result = callback();
     startObservingMutations();
     return result;
   }
+  var isCollecting = false;
+  var deferredMutations = [];
+  function deferMutations() {
+    isCollecting = true;
+  }
+  function flushAndStopDeferringMutations() {
+    isCollecting = false;
+    onMutate(deferredMutations);
+    deferredMutations = [];
+  }
   function onMutate(mutations) {
+    if (isCollecting) {
+      deferredMutations = deferredMutations.concat(mutations);
+      return;
+    }
     let addedNodes = [];
     let removedNodes = [];
     let addedAttributes = new Map();
@@ -2219,7 +2265,7 @@
   function closestDataStack(node) {
     if (node._x_dataStack)
       return node._x_dataStack;
-    if (node instanceof ShadowRoot) {
+    if (typeof ShadowRoot === "function" && node instanceof ShadowRoot) {
       return closestDataStack(node.host);
     }
     if (!node.parentNode) {
@@ -2228,7 +2274,7 @@
     return closestDataStack(node.parentNode);
   }
   function mergeProxies(objects) {
-    return new Proxy({}, {
+    let thisProxy = new Proxy({}, {
       ownKeys: () => {
         return Array.from(new Set(objects.flatMap((i) => Object.keys(i))));
       },
@@ -2236,7 +2282,31 @@
         return objects.some((obj) => obj.hasOwnProperty(name));
       },
       get: (target, name) => {
-        return (objects.find((obj) => obj.hasOwnProperty(name)) || {})[name];
+        return (objects.find((obj) => {
+          if (obj.hasOwnProperty(name)) {
+            let descriptor = Object.getOwnPropertyDescriptor(obj, name);
+            if (descriptor.get && descriptor.get._x_alreadyBound || descriptor.set && descriptor.set._x_alreadyBound) {
+              return true;
+            }
+            if ((descriptor.get || descriptor.set) && descriptor.enumerable) {
+              let getter = descriptor.get;
+              let setter = descriptor.set;
+              let property = descriptor;
+              getter = getter && getter.bind(thisProxy);
+              setter = setter && setter.bind(thisProxy);
+              if (getter)
+                getter._x_alreadyBound = true;
+              if (setter)
+                setter._x_alreadyBound = true;
+              Object.defineProperty(obj, name, __spreadProps(__spreadValues({}, property), {
+                get: getter,
+                set: setter
+              }));
+            }
+            return true;
+          }
+          return false;
+        }) || {})[name];
       },
       set: (target, name, value) => {
         let closestObjectWithKey = objects.find((obj) => obj.hasOwnProperty(name));
@@ -2248,17 +2318,18 @@
         return true;
       }
     });
+    return thisProxy;
   }
   function initInterceptors(data2) {
     let isObject = (val) => typeof val === "object" && !Array.isArray(val) && val !== null;
     let recurse = (obj, basePath = "") => {
       Object.entries(obj).forEach(([key, value]) => {
-        let path = basePath === "" ? key : `${basePath}.${key}`;
+        let path2 = basePath === "" ? key : `${basePath}.${key}`;
         if (typeof value === "object" && value !== null && value._x_interceptor) {
-          obj[key] = value.initialize(data2, path, key);
+          obj[key] = value.initialize(data2, path2, key);
         } else {
           if (isObject(value) && value !== obj && !(value instanceof Element)) {
-            recurse(value, path);
+            recurse(value, path2);
           }
         }
       });
@@ -2270,18 +2341,18 @@
     let obj = {
       initialValue: void 0,
       _x_interceptor: true,
-      initialize(data2, path, key) {
-        return callback(this.initialValue, () => get(data2, path), (value) => set(data2, path, value), path, key);
+      initialize(data2, path2, key) {
+        return callback(this.initialValue, () => get(data2, path2), (value) => set(data2, path2, value), path2, key);
       }
     };
     mutateObj(obj);
     return (initialValue) => {
       if (typeof initialValue === "object" && initialValue !== null && initialValue._x_interceptor) {
         let initialize = obj.initialize.bind(obj);
-        obj.initialize = (data2, path, key) => {
-          let innerValue = initialValue.initialize(data2, path, key);
+        obj.initialize = (data2, path2, key) => {
+          let innerValue = initialValue.initialize(data2, path2, key);
           obj.initialValue = innerValue;
-          return initialize(data2, path, key);
+          return initialize(data2, path2, key);
         };
       } else {
         obj.initialValue = initialValue;
@@ -2289,22 +2360,22 @@
       return obj;
     };
   }
-  function get(obj, path) {
-    return path.split(".").reduce((carry, segment) => carry[segment], obj);
+  function get(obj, path2) {
+    return path2.split(".").reduce((carry, segment) => carry[segment], obj);
   }
-  function set(obj, path, value) {
-    if (typeof path === "string")
-      path = path.split(".");
-    if (path.length === 1)
-      obj[path[0]] = value;
-    else if (path.length === 0)
+  function set(obj, path2, value) {
+    if (typeof path2 === "string")
+      path2 = path2.split(".");
+    if (path2.length === 1)
+      obj[path2[0]] = value;
+    else if (path2.length === 0)
       throw error;
     else {
-      if (obj[path[0]])
-        return set(obj[path[0]], path.slice(1), value);
+      if (obj[path2[0]])
+        return set(obj[path2[0]], path2.slice(1), value);
       else {
-        obj[path[0]] = {};
-        return set(obj[path[0]], path.slice(1), value);
+        obj[path2[0]] = {};
+        return set(obj[path2[0]], path2.slice(1), value);
       }
     }
   }
@@ -2425,6 +2496,9 @@ Expression: "${expression}"
       return getDirectiveHandler(el, directive2);
     });
   }
+  function attributesOnly(attributes) {
+    return Array.from(attributes).map(toTransformedAttributes()).filter((attr) => !outNonAlpineAttributes(attr));
+  }
   var isDeferringHandlers = false;
   var directiveHandlerStacks = new Map();
   var currentHandlerStackKey = Symbol();
@@ -2478,7 +2552,8 @@ Expression: "${expression}"
     return { name, value };
   };
   var into = (i) => i;
-  function toTransformedAttributes(callback) {
+  function toTransformedAttributes(callback = () => {
+  }) {
     return ({ name, value }) => {
       let { name: newName, value: newValue } = attributeTransformers.reduce((carry, transform) => {
         return transform(carry);
@@ -2558,7 +2633,7 @@ Expression: "${expression}"
     isHolding = true;
   }
   function walk(el, callback) {
-    if (el instanceof ShadowRoot) {
+    if (typeof ShadowRoot === "function" && el instanceof ShadowRoot) {
       Array.from(el.children).forEach((el2) => walk(el2, callback));
       return;
     }
@@ -2586,7 +2661,7 @@ Expression: "${expression}"
     onAttributesAdded((el, attrs) => {
       directives(el, attrs).forEach((handle) => handle());
     });
-    let outNestedComponents = (el) => !closestRoot(el.parentElement);
+    let outNestedComponents = (el) => !closestRoot(el.parentElement, true);
     Array.from(document.querySelectorAll(allSelectors())).filter(outNestedComponents).forEach((el) => {
       initTree(el);
     });
@@ -2606,14 +2681,15 @@ Expression: "${expression}"
   function addInitSelector(selectorCallback) {
     initSelectorCallbacks.push(selectorCallback);
   }
-  function closestRoot(el) {
+  function closestRoot(el, includeInitSelectors = false) {
     if (!el)
       return;
-    if (rootSelectors().some((selector) => el.matches(selector)))
+    const selectors = includeInitSelectors ? allSelectors() : rootSelectors();
+    if (selectors.some((selector) => el.matches(selector)))
       return el;
     if (!el.parentElement)
       return;
-    return closestRoot(el.parentElement);
+    return closestRoot(el.parentElement, includeInitSelectors);
   }
   function isRoot(el) {
     return rootSelectors().some((selector) => el.matches(selector));
@@ -2629,139 +2705,6 @@ Expression: "${expression}"
   function destroyTree(root) {
     walk(root, (el) => cleanupAttributes(el));
   }
-  function plugin(callback) {
-    callback(alpine_default);
-  }
-  var stores = {};
-  var isReactive = false;
-  function store(name, value) {
-    if (!isReactive) {
-      stores = reactive(stores);
-      isReactive = true;
-    }
-    if (value === void 0) {
-      return stores[name];
-    }
-    stores[name] = value;
-    if (typeof value === "object" && value !== null && value.hasOwnProperty("init") && typeof value.init === "function") {
-      stores[name].init();
-    }
-  }
-  function getStores() {
-    return stores;
-  }
-  var isCloning = false;
-  function skipDuringClone(callback) {
-    return (...args) => isCloning || callback(...args);
-  }
-  function clone(oldEl, newEl) {
-    newEl._x_dataStack = oldEl._x_dataStack;
-    isCloning = true;
-    dontRegisterReactiveSideEffects(() => {
-      cloneTree(newEl);
-    });
-    isCloning = false;
-  }
-  function cloneTree(el) {
-    let hasRunThroughFirstEl = false;
-    let shallowWalker = (el2, callback) => {
-      walk(el2, (el3, skip) => {
-        if (hasRunThroughFirstEl && isRoot(el3))
-          return skip();
-        hasRunThroughFirstEl = true;
-        callback(el3, skip);
-      });
-    };
-    initTree(el, shallowWalker);
-  }
-  function dontRegisterReactiveSideEffects(callback) {
-    let cache = effect;
-    overrideEffect((callback2, el) => {
-      let storedEffect = cache(callback2);
-      release(storedEffect);
-      return () => {
-      };
-    });
-    callback();
-    overrideEffect(cache);
-  }
-  var datas = {};
-  function data(name, callback) {
-    datas[name] = callback;
-  }
-  function injectDataProviders(obj, context) {
-    Object.entries(datas).forEach(([name, callback]) => {
-      Object.defineProperty(obj, name, {
-        get() {
-          return (...args) => {
-            return callback.bind(context)(...args);
-          };
-        },
-        enumerable: false
-      });
-    });
-    return obj;
-  }
-  var Alpine2 = {
-    get reactive() {
-      return reactive;
-    },
-    get release() {
-      return release;
-    },
-    get effect() {
-      return effect;
-    },
-    get raw() {
-      return raw;
-    },
-    version: "3.2.4",
-    disableEffectScheduling,
-    setReactivityEngine,
-    addRootSelector,
-    mapAttributes,
-    evaluateLater,
-    setEvaluator,
-    closestRoot,
-    interceptor,
-    mutateDom,
-    directive,
-    evaluate,
-    initTree,
-    nextTick,
-    prefix: setPrefix,
-    plugin,
-    magic,
-    store,
-    start,
-    clone,
-    data
-  };
-  var alpine_default = Alpine2;
-  var import_reactivity9 = __toModule2(require_reactivity());
-  magic("nextTick", () => nextTick);
-  magic("dispatch", (el) => dispatch.bind(dispatch, el));
-  magic("watch", (el) => (key, callback) => {
-    let evaluate2 = evaluateLater(el, key);
-    let firstTime = true;
-    let oldValue;
-    effect(() => evaluate2((value) => {
-      let div = document.createElement("div");
-      div.dataset.throwAway = value;
-      if (!firstTime) {
-        queueMicrotask(() => {
-          callback(value, oldValue);
-          oldValue = value;
-        });
-      } else {
-        oldValue = value;
-      }
-      firstTime = false;
-    }));
-  });
-  magic("store", getStores);
-  magic("refs", (el) => closestRoot(el)._x_refs || {});
-  magic("el", (el) => el);
   function setClasses(el, value) {
     if (Array.isArray(value)) {
       return setClassesFromString(el, value.join(" "));
@@ -2951,8 +2894,7 @@ Expression: "${expression}"
           transition(el, setFunction, {
             during: this.enter.during,
             start: this.enter.start,
-            end: this.enter.end,
-            entering: true
+            end: this.enter.end
           }, before, after);
         },
         out(before = () => {
@@ -2961,14 +2903,15 @@ Expression: "${expression}"
           transition(el, setFunction, {
             during: this.leave.during,
             start: this.leave.start,
-            end: this.leave.end,
-            entering: false
+            end: this.leave.end
           }, before, after);
         }
       };
   }
   window.Element.prototype._x_toggleAndCascadeWithTransitions = function(el, value, show, hide) {
-    let clickAwayCompatibleShow = () => requestAnimationFrame(show);
+    let clickAwayCompatibleShow = () => {
+      document.visibilityState === "visible" ? requestAnimationFrame(show) : setTimeout(show);
+    };
     if (value) {
       el._x_transition ? el._x_transition.in(show) : clickAwayCompatibleShow();
       return;
@@ -3009,7 +2952,7 @@ Expression: "${expression}"
       return;
     return parent._x_hidePromise ? parent : closestHide(parent);
   }
-  function transition(el, setFunction, { during, start: start2, end, entering } = {}, before = () => {
+  function transition(el, setFunction, { during, start: start2, end } = {}, before = () => {
   }, after = () => {
   }) {
     if (el._x_transitioning)
@@ -3037,9 +2980,9 @@ Expression: "${expression}"
         undoDuring();
         undoEnd();
       }
-    }, entering);
+    });
   }
-  function performTransition(el, stages, entering) {
+  function performTransition(el, stages) {
     let interrupted, reachedBefore, reachedEnd;
     let finish = once(() => {
       mutateDom(() => {
@@ -3068,8 +3011,7 @@ Expression: "${expression}"
         ;
         finish();
       }),
-      finish,
-      entering
+      finish
     };
     mutateDom(() => {
       stages.start();
@@ -3121,6 +3063,184 @@ Expression: "${expression}"
     }
     return rawValue;
   }
+  function debounce(func, wait) {
+    var timeout;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        func.apply(context, args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }
+  function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+      let context = this, args = arguments;
+      if (!inThrottle) {
+        func.apply(context, args);
+        inThrottle = true;
+        setTimeout(() => inThrottle = false, limit);
+      }
+    };
+  }
+  function plugin(callback) {
+    callback(alpine_default);
+  }
+  var stores = {};
+  var isReactive = false;
+  function store(name, value) {
+    if (!isReactive) {
+      stores = reactive(stores);
+      isReactive = true;
+    }
+    if (value === void 0) {
+      return stores[name];
+    }
+    stores[name] = value;
+    if (typeof value === "object" && value !== null && value.hasOwnProperty("init") && typeof value.init === "function") {
+      stores[name].init();
+    }
+  }
+  function getStores() {
+    return stores;
+  }
+  var isCloning = false;
+  function skipDuringClone(callback) {
+    return (...args) => isCloning || callback(...args);
+  }
+  function clone(oldEl, newEl) {
+    newEl._x_dataStack = oldEl._x_dataStack;
+    isCloning = true;
+    dontRegisterReactiveSideEffects(() => {
+      cloneTree(newEl);
+    });
+    isCloning = false;
+  }
+  function cloneTree(el) {
+    let hasRunThroughFirstEl = false;
+    let shallowWalker = (el2, callback) => {
+      walk(el2, (el3, skip) => {
+        if (hasRunThroughFirstEl && isRoot(el3))
+          return skip();
+        hasRunThroughFirstEl = true;
+        callback(el3, skip);
+      });
+    };
+    initTree(el, shallowWalker);
+  }
+  function dontRegisterReactiveSideEffects(callback) {
+    let cache = effect;
+    overrideEffect((callback2, el) => {
+      let storedEffect = cache(callback2);
+      release(storedEffect);
+      return () => {
+      };
+    });
+    callback();
+    overrideEffect(cache);
+  }
+  var datas = {};
+  function data(name, callback) {
+    datas[name] = callback;
+  }
+  function injectDataProviders(obj, context) {
+    Object.entries(datas).forEach(([name, callback]) => {
+      Object.defineProperty(obj, name, {
+        get() {
+          return (...args) => {
+            return callback.bind(context)(...args);
+          };
+        },
+        enumerable: false
+      });
+    });
+    return obj;
+  }
+  var Alpine2 = {
+    get reactive() {
+      return reactive;
+    },
+    get release() {
+      return release;
+    },
+    get effect() {
+      return effect;
+    },
+    get raw() {
+      return raw;
+    },
+    version: "3.4.2",
+    flushAndStopDeferringMutations,
+    disableEffectScheduling,
+    setReactivityEngine,
+    addRootSelector,
+    deferMutations,
+    mapAttributes,
+    evaluateLater,
+    setEvaluator,
+    closestRoot,
+    interceptor,
+    transition,
+    setStyles,
+    mutateDom,
+    directive,
+    throttle,
+    debounce,
+    evaluate,
+    initTree,
+    nextTick,
+    prefix: setPrefix,
+    plugin,
+    magic,
+    store,
+    start,
+    clone,
+    data
+  };
+  var alpine_default = Alpine2;
+  var import_reactivity9 = __toModule2(require_reactivity());
+  magic("nextTick", () => nextTick);
+  magic("dispatch", (el) => dispatch.bind(dispatch, el));
+  magic("watch", (el) => (key, callback) => {
+    let evaluate2 = evaluateLater(el, key);
+    let firstTime = true;
+    let oldValue;
+    effect(() => evaluate2((value) => {
+      let div = document.createElement("div");
+      div.dataset.throwAway = value;
+      if (!firstTime) {
+        queueMicrotask(() => {
+          callback(value, oldValue);
+          oldValue = value;
+        });
+      } else {
+        oldValue = value;
+      }
+      firstTime = false;
+    }));
+  });
+  magic("store", getStores);
+  magic("root", (el) => closestRoot(el));
+  magic("refs", (el) => {
+    if (el._x_refs_proxy)
+      return el._x_refs_proxy;
+    el._x_refs_proxy = mergeProxies(getArrayOfRefObject(el));
+    return el._x_refs_proxy;
+  });
+  function getArrayOfRefObject(el) {
+    let refObjects = [];
+    let currentEl = el;
+    while (currentEl) {
+      if (currentEl._x_refs)
+        refObjects.push(currentEl._x_refs);
+      currentEl = currentEl.parentNode;
+    }
+    return refObjects;
+  }
+  magic("el", (el) => el);
   var handler = () => {
   };
   handler.inline = (el, { modifiers }, { cleanup: cleanup2 }) => {
@@ -3248,7 +3368,7 @@ Expression: "${expression}"
     return booleanAttributes.includes(attrName);
   }
   function attributeShouldntBePreservedIfFalsy(name) {
-    return !["aria-pressed", "aria-checked"].includes(name);
+    return !["aria-pressed", "aria-checked", "aria-expanded"].includes(name);
   }
   function on(el, event, modifiers, callback) {
     let listenerTarget = el;
@@ -3261,6 +3381,8 @@ Expression: "${expression}"
       event = camelCase2(event);
     if (modifiers.includes("passive"))
       options.passive = true;
+    if (modifiers.includes("capture"))
+      options.capture = true;
     if (modifiers.includes("window"))
       listenerTarget = window;
     if (modifiers.includes("document"))
@@ -3300,12 +3422,12 @@ Expression: "${expression}"
     if (modifiers.includes("debounce")) {
       let nextModifier = modifiers[modifiers.indexOf("debounce") + 1] || "invalid-wait";
       let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
-      handler3 = debounce(handler3, wait, this);
+      handler3 = debounce(handler3, wait);
     }
     if (modifiers.includes("throttle")) {
       let nextModifier = modifiers[modifiers.indexOf("throttle") + 1] || "invalid-wait";
       let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
-      handler3 = throttle(handler3, wait, this);
+      handler3 = throttle(handler3, wait);
     }
     if (modifiers.includes("once")) {
       handler3 = wrapHandler(handler3, (next, e) => {
@@ -3324,29 +3446,6 @@ Expression: "${expression}"
   function camelCase2(subject) {
     return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase());
   }
-  function debounce(func, wait) {
-    var timeout;
-    return function() {
-      var context = this, args = arguments;
-      var later = function() {
-        timeout = null;
-        func.apply(context, args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  }
-  function throttle(func, limit) {
-    let inThrottle;
-    return function() {
-      let context = this, args = arguments;
-      if (!inThrottle) {
-        func.apply(context, args);
-        inThrottle = true;
-        setTimeout(() => inThrottle = false, limit);
-      }
-    };
-  }
   function isNumeric(subject) {
     return !Array.isArray(subject) && !isNaN(subject);
   }
@@ -3398,7 +3497,9 @@ Expression: "${expression}"
       up: "arrow-up",
       down: "arrow-down",
       left: "arrow-left",
-      right: "arrow-right"
+      right: "arrow-right",
+      period: ".",
+      equal: "="
     };
     modifierToKeyMap[key] = key;
     return Object.keys(modifierToKeyMap).map((modifier) => {
@@ -3479,7 +3580,12 @@ Expression: "${expression}"
   }
   directive("cloak", (el) => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix("cloak")))));
   addInitSelector(() => `[${prefix("init")}]`);
-  directive("init", skipDuringClone((el, { expression }) => evaluate(el, expression, {}, false)));
+  directive("init", skipDuringClone((el, { expression }) => {
+    if (typeof expression === "string") {
+      return !!expression.trim() && evaluate(el, expression, {}, false);
+    }
+    return evaluate(el, expression, {}, false);
+  }));
   directive("text", (el, { expression }, { effect: effect3, evaluateLater: evaluateLater2 }) => {
     let evaluate2 = evaluateLater2(expression);
     effect3(() => {
@@ -3519,6 +3625,12 @@ Expression: "${expression}"
         cleanupRunners.pop()();
       getBindings((bindings) => {
         let attributes = Object.entries(bindings).map(([name, value]) => ({ name, value }));
+        attributesOnly(attributes).forEach(({ name, value }, index2) => {
+          attributes[index2] = {
+            name: `x-bind:${name}`,
+            value: `"${value}"`
+          };
+        });
         directives(el, attributes, original).map((handle) => {
           cleanupRunners.push(handle.runCleanups);
           handle();
@@ -3718,6 +3830,11 @@ Expression: "${expression}"
       names.forEach((name, i) => {
         scopeVariables[name] = item[i];
       });
+    } else if (/^\{.*\}$/.test(iteratorNames.item) && !Array.isArray(item) && typeof item === "object") {
+      let names = iteratorNames.item.replace("{", "").replace("}", "").split(",").map((i) => i.trim());
+      names.forEach((name) => {
+        scopeVariables[name] = item[name];
+      });
     } else {
       scopeVariables[iteratorNames.item] = item;
     }
@@ -8374,11 +8491,11 @@ Expression: "${expression}"
           this.$dispatch("nav:updated");
         });
       },
-      navigate(path) {
-        if (path instanceof Event) {
-          path = path.currentTarget.href;
+      navigate(path2) {
+        if (path2 instanceof Event) {
+          path2 = path2.currentTarget.href;
         }
-        history.pushState({}, null, path);
+        history.pushState({}, null, path2);
         this.$dispatch("popstate");
       },
       focusFilter() {
@@ -8406,6 +8523,17 @@ Expression: "${expression}"
       getChildren() {
         return this.$refs.items ? Array.from(this.$refs.items.querySelectorAll(":scope > li")) : [];
       },
+      navigateToFirstChild() {
+        if (this.open()) {
+          const child = this.firstVisibleChild();
+          if (child) {
+            const link = child.querySelector(":scope > a.nav-link");
+            if (link) {
+              this.navigate(link.getAttribute("href"));
+            }
+          }
+        }
+      },
       filter() {
         this.hidden = true;
         this.getChildren().forEach((child) => {
@@ -8418,6 +8546,11 @@ Expression: "${expression}"
       },
       toggle() {
         this.$store.nav.open[this.id] = !this.$store.nav.open[this.id];
+      },
+      firstVisibleChild() {
+        return this.getChildren().find((child) => {
+          return child._x_dataStack ? child._x_dataStack[0].hidden === false : false;
+        });
       }
     };
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lookbook
 version: !ruby/object:Gem::Version
-  version: 0.3.4
+  version: 0.4.0.beta.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-18 00:00:00.000000000 Z
+date: 2021-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -259,9 +259,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.2
 signing_key: