lookbook 2.0.0.beta.8 → 2.0.0.beta.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfcdb2b51f339e4449f640d3dc59e1dcacee5f8c9e009627d7e7680bc75c4f5f
-  data.tar.gz: 27a547cf8a89a2b7bac979e20e5e25efb89863b29c7c362df6a118fb18773df4
+  metadata.gz: c56294755ec1cadc843570567334d0b03ca5c2f462a8b2f78a8732b8829b63d8
+  data.tar.gz: 7acecdcc7dee2ba4a1110da91f204d75a05a04c28c7578c425c9bcc00e946623
 SHA512:
-  metadata.gz: 5de1e882509fedeef207ec7cf38c51e8e98470c34dfd08a1e6b27f6c6f4f3b56b72405bb4c138dcbf42effaebf79584ea48f23f3235cc46a81909b7ded762e1c
-  data.tar.gz: 0b27df206efbfc0469ea73026ea57055cbca2600939f350d238dce0f2bc758bb16353945f13d7bda196129b14a5e2c7355917a6d4d02a1a3ae9dac9b42d4c61a
+  metadata.gz: 6c1aec7589afd938ef941d112c478756a0d2838458245752e0605333a2c68d94efea2a7dda06a60951b7a760850f62c69efe2d393a17773632e5fcbfd707b2d0
+  data.tar.gz: f5cd4fbf4ad04f6dc8d99038cd6f5d8058e4463e0ec7844d89bef51c2200412890ef3be51315d42a01141fb8b46be895ecd4b5b6059c0723cc7de72398859421

data/app/controllers/concerns/lookbook/targetable_concern.rb

@@ -96,7 +96,7 @@ module Lookbook
 
       scenarios = @target ? @target.scenarios : []
       rendered_scenarios = scenarios.map do |scenario|
-        output = preview_controller.process(:render_scenario_to_string, @preview, scenario.name)
+        output = preview_controller.process(:render_scenario_to_string, @preview, scenario)
         RenderedScenarioEntity.new(scenario, output, preview_controller.params)
       end
 

data/app/views/lookbook/inspector/panels/_preview.html.erb

@@ -1,6 +1,6 @@
 <div class="overflow-hidden h-full w-full">
   <%= lookbook_render :viewport,
-    key: (lookbook_preview_path(request.query_parameters).parameterize unless Rails.env.test?),
+    key: (lookbook_preview_path(request.query_parameters).force_encoding('UTF-8').parameterize unless Rails.env.test?),
     iframe_id: "preview-iframe",
     src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
     alpine_data: "$store.inspector.main",

data/config/tags.yml

@@ -38,3 +38,7 @@ shared:
   source:
     label: Source file
     opts: {}
+
+  after_render:
+    label: After render
+    opts: {}

data/lib/lookbook/engine.rb

@@ -57,6 +57,8 @@ module Lookbook
         if vc_config.view_component_path.present?
           opts.component_paths << vc_config.view_component_path
         end
+
+        ViewComponent::Preview.extend(Lookbook::PreviewAfterRender)
       end
 
       opts.reload_on_change = host_config.reload_classes_only_on_change if opts.reload_on_change.nil?

data/lib/lookbook/entities/preview_entity.rb

@@ -7,7 +7,7 @@ module Lookbook
     include LocatableEntity
     include NavigableEntity
 
-    delegate :render_args, to: :preview_class
+    delegate :after_render, :render_args, to: :preview_class
 
     # @api private
     attr_reader :preview_class
@@ -158,6 +158,11 @@ module Lookbook
       global_options.deep_merge(fetch_config(:display_options, {}))
     end
 
+    # @api private
+    def after_render_method
+      fetch_config(:after_render)
+    end
+
     # @api private
     def layout
       preview_class.instance_variable_get(:@layout)

data/lib/lookbook/entities/scenario_entity.rb

@@ -110,6 +110,11 @@ module Lookbook
 
     # @!endgroup
 
+    # @api private
+    def after_render_method
+      fetch_config(:after_render) || parent.after_render_method
+    end
+
     # @api private
     def scenarios
       [self]

data/lib/lookbook/preview.rb

@@ -2,6 +2,7 @@ module Lookbook
   class Preview
     include ActionView::Helpers::TagHelper
     include ActionView::Helpers::AssetTagHelper
+    extend PreviewAfterRender
 
     def render(component = nil, **args, &block)
       if component.nil?

data/lib/lookbook/preview_after_render.rb

@@ -0,0 +1,13 @@
+module Lookbook
+  # Shared module that both Lookbook::Preview and ViewComponent::Preview are extended with
+  module PreviewAfterRender
+    def after_render(method:, html:, context:)
+      instance = new
+      if instance.method(method).arity > 1
+        instance.send(method, html, context)
+      else
+        instance.send(method, html)
+      end.html_safe
+    end
+  end
+end

data/lib/lookbook/preview_controller_actions.rb

@@ -6,12 +6,12 @@ module Lookbook
       helper PreviewHelper
       prepend_view_path Engine.root.join("app/views")
 
-      def render_scenario_to_string(preview, scenario_name)
+      def render_scenario_to_string(preview, scenario)
         prepend_application_view_paths
         prepend_preview_examples_view_path
 
         @preview = preview
-        @scenario_name = scenario_name
+        @scenario_name = scenario.name
         @render_args = @preview.render_args(@scenario_name, params: params.permit!)
         template = @render_args[:template]
         locals = @render_args[:locals]
@@ -19,8 +19,19 @@ module Lookbook
         opts[:layout] = nil
         opts[:locals] = locals if locals.present?
 
+        rendered = render_to_string(template, **opts)
+
+        if scenario.after_render_method.present?
+          render_context = Store.new({
+            preview: preview,
+            scenario: scenario,
+            params: user_request_parameters
+          })
+          rendered = @preview.after_render(method: scenario.after_render_method, html: rendered, context: render_context)
+        end
+
         with_optional_action_view_annotations do
-          render html: render_to_string(template, **opts)
+          render html: rendered
         end
       end
 
@@ -40,6 +51,10 @@ module Lookbook
         disable = Lookbook.config.preview_disable_action_view_annotations
         ActionViewAnnotationsHandler.call(disable_annotations: disable, &block)
       end
+
+      def user_request_parameters
+        request.query_parameters.to_h.filter { |k, v| !k.start_with?("_") }
+      end
     end
   end
 end

data/lib/lookbook/tags/after_render_tag.rb

@@ -0,0 +1,7 @@
+module Lookbook
+  class AfterRenderTag < YardTag
+    def value
+      text.sub(/\A:/, "")
+    end
+  end
+end

data/lib/lookbook/tags/param_tag.rb

@@ -28,7 +28,7 @@ module Lookbook
     def value_default
       default_value_parts = object.parameters.find { |parts| parts[0].chomp(":") == name }
       if default_value_parts
-        object.instance_eval(default_value_parts[1])
+        host_class_instance.instance_eval(default_value_parts[1])
       else
         raise ParserError.new "Unknown method parameter '#{name}'"
       end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.0.beta.8"
+  VERSION = "2.0.0.beta.9"
 end

data/public/lookbook-assets/js/index.js

@@ -7815,7 +7815,7 @@ function $12b7aa006b8a97e1$var$toCamel(s) {
 }
 
 
-var $52abf2efa3492135$exports = {};
+var $d9c79682b7f8e136$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11356,6 +11356,39 @@ function $99486586f6691564$export$2e2bcd8739ae039() {
 }
 
 
+var $e398acaded942bbe$exports = {};
+
+$parcel$defineInteropFlag($e398acaded942bbe$exports);
+
+$parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
+
+function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
+    return {
+        width: 0,
+        height: 0,
+        resizing: false,
+        target: null,
+        init () {
+            this.target = document.querySelector(targetSelector);
+            if (this.target) {
+                this.width = Math.round(this.target.clientWidth);
+                this.height = Math.round(this.target.clientHeight);
+                this.createObserver();
+            }
+        },
+        createObserver () {
+            if (this.target) this.observer = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.target, ({ width: width , height: height  })=>{
+                this.width = width;
+                this.height = height;
+            });
+        },
+        tearDown () {
+            if (this.observer) this.observer.disconnect();
+        }
+    };
+}
+
+
 var $47a1c62621be0c54$exports = {};
 
 $parcel$defineInteropFlag($47a1c62621be0c54$exports);
@@ -11412,39 +11445,6 @@ function $47a1c62621be0c54$export$2e2bcd8739ae039() {
 }
 
 
-var $e398acaded942bbe$exports = {};
-
-$parcel$defineInteropFlag($e398acaded942bbe$exports);
-
-$parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
-
-function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
-    return {
-        width: 0,
-        height: 0,
-        resizing: false,
-        target: null,
-        init () {
-            this.target = document.querySelector(targetSelector);
-            if (this.target) {
-                this.width = Math.round(this.target.clientWidth);
-                this.height = Math.round(this.target.clientHeight);
-                this.createObserver();
-            }
-        },
-        createObserver () {
-            if (this.target) this.observer = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.target, ({ width: width , height: height  })=>{
-                this.width = width;
-                this.height = height;
-            });
-        },
-        tearDown () {
-            if (this.observer) this.observer.disconnect();
-        }
-    };
-}
-
-
 var $216ef7001f59f21d$exports = {};
 
 $parcel$defineInteropFlag($216ef7001f59f21d$exports);
@@ -12116,99 +12116,6 @@ function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
 }
 
 
-var $0db07828cadc68e0$exports = {};
-
-$parcel$defineInteropFlag($0db07828cadc68e0$exports);
-
-$parcel$export($0db07828cadc68e0$exports, "default", () => $0db07828cadc68e0$export$2e2bcd8739ae039);
-
-
-
-
-function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
-    const initial = store ? store.activeTab : null;
-    let dropdown = null;
-    return {
-        visibleTabsCount: 0,
-        triggerLeft: 0,
-        get store () {
-            return store || this;
-        },
-        get tabs () {
-            return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
-        },
-        get dropdownTabs () {
-            return Array.from(this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []);
-        },
-        get tabWidths () {
-            return this.tabs.map((tab)=>(0, $490552754c23ef6f$export$bdf7e699b242f476)(tab, {
-                    includeMargins: true
-                }).width);
-        },
-        init () {
-            this.$nextTick(()=>{
-                if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) this.visibleTabsCount = this.tabs.length;
-                dropdown = (0, $789b7d27a7c715a6$export$2e2bcd8739ae039)(this.$refs.dropdownTrigger, {
-                    content: this.$refs.tabsDropdown,
-                    theme: "menu",
-                    interactive: true,
-                    trigger: "click",
-                    placement: "bottom",
-                    appendTo: this.$root
-                });
-                const initialTab = initial ? this.tabs.find((t)=>this._getRef(t) === initial) : this.tabs[0];
-                this.selectTab(initialTab || this.tabs[0], true);
-                this.parentObserver = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$root.parentElement, (0, $c5d017602d25d050$export$61fc7d43ac8f84b0)(10, this.handleResize.bind(this)));
-                this.$watch("visibleTabsCount", (value)=>{
-                    this.debug(`'#${this.$root.id}' visible tabs count:`, value);
-                });
-            });
-        },
-        handleResize ({ width: width  }) {
-            if (width === this._lastMeasuredWidth) return;
-            if (width === this.$root.offsetWidth) {
-                this.visibleTabsCount = this.tabs.length;
-                return;
-            }
-            let sumTabWidths = 60;
-            let triggerLeft = 20;
-            let visibleTabsCount = 0;
-            this.tabWidths.forEach((tabWidth)=>{
-                sumTabWidths += tabWidth;
-                if (sumTabWidths < width) {
-                    triggerLeft += tabWidth;
-                    visibleTabsCount++;
-                }
-            });
-            this.visibleTabsCount = visibleTabsCount;
-            this.triggerLeft = triggerLeft;
-            this._lastMeasuredWidth = width;
-        },
-        selectTab (el, initial = false) {
-            this.store.activeTab = this._getRef(el);
-            dropdown.hide();
-            if (!initial) this.$dispatch("tabs:change", {
-                tabs: this
-            });
-        },
-        isSelected (el) {
-            return this.store.activeTab === this._getRef(el);
-        },
-        isDisabled (el) {
-            return el.getAttribute("data-disabled") == "true";
-        },
-        hasHiddenTabs () {
-            return this.visibleTabsCount < this.tabs.length;
-        },
-        // protected
-        _lastMeasuredWidth: 0,
-        _getRef (el) {
-            return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
-        }
-    };
-}
-
-
 var $6d64716f0b34fdf4$exports = {};
 
 $parcel$defineInteropFlag($6d64716f0b34fdf4$exports);
@@ -12336,22 +12243,115 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$52abf2efa3492135$exports = {
+var $0db07828cadc68e0$exports = {};
+
+$parcel$defineInteropFlag($0db07828cadc68e0$exports);
+
+$parcel$export($0db07828cadc68e0$exports, "default", () => $0db07828cadc68e0$export$2e2bcd8739ae039);
+
+
+
+
+function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
+    const initial = store ? store.activeTab : null;
+    let dropdown = null;
+    return {
+        visibleTabsCount: 0,
+        triggerLeft: 0,
+        get store () {
+            return store || this;
+        },
+        get tabs () {
+            return this.$refs.tabs ? Array.from(this.$refs.tabs.children) : [];
+        },
+        get dropdownTabs () {
+            return Array.from(this.$refs.tabsDropdown ? this.$refs.tabsDropdown.children : []);
+        },
+        get tabWidths () {
+            return this.tabs.map((tab)=>(0, $490552754c23ef6f$export$bdf7e699b242f476)(tab, {
+                    includeMargins: true
+                }).width);
+        },
+        init () {
+            this.$nextTick(()=>{
+                if (this.$root.parentElement.offsetWidth === this.$root.offsetWidth) this.visibleTabsCount = this.tabs.length;
+                dropdown = (0, $789b7d27a7c715a6$export$2e2bcd8739ae039)(this.$refs.dropdownTrigger, {
+                    content: this.$refs.tabsDropdown,
+                    theme: "menu",
+                    interactive: true,
+                    trigger: "click",
+                    placement: "bottom",
+                    appendTo: this.$root
+                });
+                const initialTab = initial ? this.tabs.find((t)=>this._getRef(t) === initial) : this.tabs[0];
+                this.selectTab(initialTab || this.tabs[0], true);
+                this.parentObserver = (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$root.parentElement, (0, $c5d017602d25d050$export$61fc7d43ac8f84b0)(10, this.handleResize.bind(this)));
+                this.$watch("visibleTabsCount", (value)=>{
+                    this.debug(`'#${this.$root.id}' visible tabs count:`, value);
+                });
+            });
+        },
+        handleResize ({ width: width  }) {
+            if (width === this._lastMeasuredWidth) return;
+            if (width === this.$root.offsetWidth) {
+                this.visibleTabsCount = this.tabs.length;
+                return;
+            }
+            let sumTabWidths = 60;
+            let triggerLeft = 20;
+            let visibleTabsCount = 0;
+            this.tabWidths.forEach((tabWidth)=>{
+                sumTabWidths += tabWidth;
+                if (sumTabWidths < width) {
+                    triggerLeft += tabWidth;
+                    visibleTabsCount++;
+                }
+            });
+            this.visibleTabsCount = visibleTabsCount;
+            this.triggerLeft = triggerLeft;
+            this._lastMeasuredWidth = width;
+        },
+        selectTab (el, initial = false) {
+            this.store.activeTab = this._getRef(el);
+            dropdown.hide();
+            if (!initial) this.$dispatch("tabs:change", {
+                tabs: this
+            });
+        },
+        isSelected (el) {
+            return this.store.activeTab === this._getRef(el);
+        },
+        isDisabled (el) {
+            return el.getAttribute("data-disabled") == "true";
+        },
+        hasHiddenTabs () {
+            return this.visibleTabsCount < this.tabs.length;
+        },
+        // protected
+        _lastMeasuredWidth: 0,
+        _getRef (el) {
+            return el ? el.getAttribute("x-ref").replace("dropdown-", "") : null;
+        }
+    };
+}
+
+
+$d9c79682b7f8e136$exports = {
     "button": $cbd28b10fa9798c7$exports,
     "code": $99486586f6691564$exports,
-    "copy_button": $47a1c62621be0c54$exports,
     "dimensions_display": $e398acaded942bbe$exports,
+    "copy_button": $47a1c62621be0c54$exports,
     "embed_code_dropdown": $216ef7001f59f21d$exports,
     "filter": $e9904a14dabf652d$exports,
     "nav": $d92d9d5253f84566$exports,
     "split_layout": $506dabb2bf255b38$exports,
     "tab_panels": $a87dacf5139b5e2f$exports,
-    "tabs": $0db07828cadc68e0$exports,
-    "viewport": $6d64716f0b34fdf4$exports
+    "viewport": $6d64716f0b34fdf4$exports,
+    "tabs": $0db07828cadc68e0$exports
 };
 
 
-var $234342a379d83f20$exports = {};
+var $f3e1e32f4a1bd6da$exports = {};
 var $6a9b69d9cc7f810f$exports = {};
 
 $parcel$defineInteropFlag($6a9b69d9cc7f810f$exports);
@@ -13352,38 +13352,6 @@ function $c299e36fa9e271bc$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
-var $1a7a7298eec5b755$exports = {};
-
-$parcel$defineInteropFlag($1a7a7298eec5b755$exports);
-
-$parcel$export($1a7a7298eec5b755$exports, "default", () => $1a7a7298eec5b755$export$2e2bcd8739ae039);
-
-function $1a7a7298eec5b755$export$2e2bcd8739ae039() {
-    return {
-        narrow: false,
-        init () {
-            (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$el, ({ width: width  })=>{
-                this.narrow = width < 500;
-            });
-        }
-    };
-}
-
-
-var $e773f8ef556b41ff$exports = {};
-
-$parcel$defineInteropFlag($e773f8ef556b41ff$exports);
-
-$parcel$export($e773f8ef556b41ff$exports, "default", () => $e773f8ef556b41ff$export$2e2bcd8739ae039);
-function $e773f8ef556b41ff$export$2e2bcd8739ae039() {
-    return {
-        get isNarrowLayout () {
-            return this.narrow || false;
-        }
-    };
-}
-
-
 var $9b24cbeb3a465447$exports = {};
 
 $parcel$defineInteropFlag($9b24cbeb3a465447$exports);
@@ -13441,19 +13409,51 @@ function $9b24cbeb3a465447$export$2e2bcd8739ae039({ id: id , matchers: matchers
 }
 
 
-$234342a379d83f20$exports = {
+var $1a7a7298eec5b755$exports = {};
+
+$parcel$defineInteropFlag($1a7a7298eec5b755$exports);
+
+$parcel$export($1a7a7298eec5b755$exports, "default", () => $1a7a7298eec5b755$export$2e2bcd8739ae039);
+
+function $1a7a7298eec5b755$export$2e2bcd8739ae039() {
+    return {
+        narrow: false,
+        init () {
+            (0, $7ecd1fc3a6b35e5c$export$a2214cc2adb2dc44)(this.$el, ({ width: width  })=>{
+                this.narrow = width < 500;
+            });
+        }
+    };
+}
+
+
+var $e773f8ef556b41ff$exports = {};
+
+$parcel$defineInteropFlag($e773f8ef556b41ff$exports);
+
+$parcel$export($e773f8ef556b41ff$exports, "default", () => $e773f8ef556b41ff$export$2e2bcd8739ae039);
+function $e773f8ef556b41ff$export$2e2bcd8739ae039() {
+    return {
+        get isNarrowLayout () {
+            return this.narrow || false;
+        }
+    };
+}
+
+
+$f3e1e32f4a1bd6da$exports = {
     "display_options": {
         "field": $6a9b69d9cc7f810f$exports
     },
     "embed": {
         "inspector": $c299e36fa9e271bc$exports
     },
+    "nav": {
+        "item": $9b24cbeb3a465447$exports
+    },
     "params": {
         "editor": $1a7a7298eec5b755$exports,
         "field": $e773f8ef556b41ff$exports
-    },
-    "nav": {
-        "item": $9b24cbeb3a465447$exports
     }
 };
 
@@ -13521,8 +13521,8 @@ const $22969b543678f572$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $5792afa4170ed552$export$2e2bcd8739ae039));
 [
-    $52abf2efa3492135$exports,
-    $234342a379d83f20$exports,
+    $d9c79682b7f8e136$exports,
+    $f3e1e32f4a1bd6da$exports,
     $338da9a25bc5c332$exports
 ].forEach((scripts)=>{
     const components = (0, $12b7aa006b8a97e1$export$4e811121b221213b)(scripts);