lookbook 1.0.3 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 741dcc6296e79ba365a64945fb70b7ba7e8b8df2eee9e83e72ef4e32c619b2fc
-  data.tar.gz: aa5d6647abc755e54b37837847f5929803eba7545272e6c33b887f2f7c5ef54e
+  metadata.gz: fd24f301fb1e05131ba58a2d236b15155f38b372c52ada4823ea6f76111dc0b1
+  data.tar.gz: 8675198f147aa93461a89964ad2b28461facdd672088b3edfe0880ea1b293545
 SHA512:
-  metadata.gz: d19a7567121be4be2c010f61d9c7d62ecff33d53d034a138124516883cbb190102aa0f8c9e9457a0aaf1d33c6d9d5250d3a60ad507af9973348f3c08c03c26bb
-  data.tar.gz: 8cc77046623125e88550cfd7ff4dd626a2deda064fee6cf3171d5a5cd59bed8ec2277e8091d48d995763db7b3fe66c730e99bde1380a4e5703986e7cc0808ff4
+  metadata.gz: 5a9e80161cf8880083c2138144304dfc5427478c8114073f9409e3fb883eddf9abe7e055aea33b16625316c15be15fd139b8ab3607d808ff90419b5ad95b4eab
+  data.tar.gz: 1e1836fdad458167f63e3736d3d99107b1a0346da530fe57f9be03eb188c029d5891c8534999475673aa78fd02c645c37edb181b5960165316172bcf5cded59b

data/app/components/lookbook/base_component.rb

@@ -31,11 +31,19 @@ module Lookbook
       nil
     end
 
+    def alpine_encode(data)
+      if data.is_a? String
+        "\'#{json_escape data}\'"
+      else
+        json_escape data.to_json.tr("\"", "\'")
+      end
+    end
+
     def prepare_alpine_data(x_data = nil)
       alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
-        args = Array.wrap(alpine_data)
-        args.any? ? "#{alpine_component_name}(#{safe_join(args)})" : alpine_component_name
+        args = Array.wrap(alpine_data).compact
+        args.any? ? "#{alpine_component_name}(#{args.join(",")})" : alpine_component_name
       end
     end
   end

data/app/components/lookbook/copy_button/component.rb

@@ -13,7 +13,7 @@ module Lookbook
     protected
 
     def alpine_data
-      content ? nil : @target.to_json
+      content ? nil : alpine_encode(@target)
     end
 
     def alpine_component

data/app/components/lookbook/dimensions_display/component.rb

@@ -2,15 +2,12 @@ module Lookbook
   class DimensionsDisplay::Component < Lookbook::BaseComponent
     def initialize(target:, **html_attrs)
       @target = target
+      @alpine_data = alpine_encode(@target)
       super(**html_attrs)
     end
 
     protected
 
-    def alpine_data
-      @target.to_json
-    end
-
     def alpine_component
       "dimensionsDisplayComponent"
     end

data/app/components/lookbook/embed/component.rb

@@ -20,7 +20,7 @@ module Lookbook
     end
 
     def alpine_data
-      [@id.to_json, "$store.pages.embeds"].join(",")
+      [alpine_encode(@id), "$store.pages.embeds"].join(",")
     end
 
     def alpine_component

data/app/components/lookbook/icon/component.rb

@@ -1,7 +1,7 @@
 module Lookbook
   class Icon::Component < Lookbook::BaseComponent
     def initialize(name:, size: 4, **html_attrs)
-      @icon_name = name.is_a?(Symbol) ? name.to_s.tr("_", "-").to_json : name
+      @alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
       @size = size || 4
       super(**html_attrs)
     end
@@ -12,10 +12,6 @@ module Lookbook
 
     protected
 
-    def alpine_data
-      @icon_name
-    end
-
     def alpine_component
       "iconComponent"
     end

data/app/components/lookbook/nav/item/component.rb

@@ -78,10 +78,10 @@ module Lookbook
     protected
 
     def alpine_data
-      {
+      alpine_encode({
         id: @item.id,
         matchers: item.is_a?(Lookbook::Collection) ? nil : item.matchers
-      }.to_json
+      })
     end
 
     def alpine_component

data/app/components/lookbook/params_editor/field/component.rb

@@ -33,7 +33,7 @@ module Lookbook
     protected
 
     def alpine_data
-      escaped_value = helpers.raw json_escape(value.to_json)
+      escaped_value = json_escape(value.to_json)
       "{name: '#{name}', value: #{escaped_value}}"
     end
 

data/app/helpers/lookbook/component_helper.rb

@@ -6,7 +6,8 @@ module Lookbook
       render Lookbook::Icon::Component.new(name: name, **attrs)
     end
 
-    def code(**attrs, &block)
+    def code(language = :html, **attrs, &block)
+      attrs[:language] = language
       render Lookbook::Code::Component.new(**attrs), &block
     end
 

data/lib/lookbook/engine.rb

@@ -171,7 +171,7 @@ module Lookbook
       def websocket
         config = Lookbook.config
         return @websocket unless @websocket.nil?
-        return unless config.auto_refresh == true
+        return unless config.auto_refresh == true && !Rails.env.test?
         Lookbook.logger.info "Initializing websocket"
 
         cable = ActionCable::Server::Configuration.new

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.3"
+  VERSION = "1.0.4"
 end

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

@@ -7701,7 +7701,7 @@ function $5439cede634b2921$var$toCamel(s) {
 }
 
 
-var $6d30a58562f349fe$exports = {};
+var $d865a31e17cd1079$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11364,57 +11364,34 @@ function $99486586f6691564$export$2e2bcd8739ae039() {
 }
 
 
-var $47a1c62621be0c54$exports = {};
-
-$parcel$defineInteropFlag($47a1c62621be0c54$exports);
-
-$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
-var $122263eab94cad08$exports = {};
-
-$parcel$defineInteropFlag($122263eab94cad08$exports);
-
-$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
-$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
-
-function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
-    let copyTimeout = null;
-    return Object.assign(context, {
-        copied: false,
-        async copyToClipboard (target = null) {
-            let targetEl;
-            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
-            else if (typeof target === "string") targetEl = document.querySelector(target);
-            if (!targetEl) {
-                this.warn("Could not find copy target");
-                return false;
-            }
-            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerHTML.trim());
-            await window.navigator.clipboard.writeText(content);
-            this.copied = true;
-            if (copyTimeout) clearTimeout(copyTimeout);
-            copyTimeout = setTimeout(()=>{
-                this.copied = false;
-                this.onCopyComplete();
-            }, 1000);
-            return content;
-        },
-        onCopyComplete () {}
-    });
-}
-function $122263eab94cad08$export$2e2bcd8739ae039() {
-    return $122263eab94cad08$export$c6684e6159b21de3({});
-}
+var $e398acaded942bbe$exports = {};
 
+$parcel$defineInteropFlag($e398acaded942bbe$exports);
 
+$parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
 
-function $47a1c62621be0c54$export$2e2bcd8739ae039() {
-    const button = (0, $cbd28b10fa9798c7$export$2e2bcd8739ae039)();
+function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
     return {
-        ...button,
-        copied: false,
+        width: 0,
+        height: 0,
+        resizing: false,
+        target: null,
         init () {
-            button.init.bind(this)();
-            (0, $122263eab94cad08$export$c6684e6159b21de3)(this);
+            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, $9930d46698775b42$export$a2214cc2adb2dc44)(document.querySelector(targetSelector), ({ width: width , height: height  })=>{
+                this.width = width;
+                this.height = height;
+            });
+        },
+        tearDown () {
+            if (this.observer) this.observer.disconnect();
         }
     };
 }
@@ -12285,39 +12262,6 @@ function $e1f51f020443edd4$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
-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, $9930d46698775b42$export$a2214cc2adb2dc44)(document.querySelector(targetSelector), ({ width: width , height: height  })=>{
-                this.width = width;
-                this.height = height;
-            });
-        },
-        tearDown () {
-            if (this.observer) this.observer.disconnect();
-        }
-    };
-}
-
-
 var $e9904a14dabf652d$exports = {};
 
 $parcel$defineInteropFlag($e9904a14dabf652d$exports);
@@ -12343,6 +12287,62 @@ function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
 }
 
 
+var $47a1c62621be0c54$exports = {};
+
+$parcel$defineInteropFlag($47a1c62621be0c54$exports);
+
+$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
+var $122263eab94cad08$exports = {};
+
+$parcel$defineInteropFlag($122263eab94cad08$exports);
+
+$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
+$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
+
+function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
+    let copyTimeout = null;
+    return Object.assign(context, {
+        copied: false,
+        async copyToClipboard (target = null) {
+            let targetEl;
+            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
+            else if (typeof target === "string") targetEl = document.querySelector(target);
+            if (!targetEl) {
+                this.warn("Could not find copy target");
+                return false;
+            }
+            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerHTML.trim());
+            await window.navigator.clipboard.writeText(content);
+            this.copied = true;
+            if (copyTimeout) clearTimeout(copyTimeout);
+            copyTimeout = setTimeout(()=>{
+                this.copied = false;
+                this.onCopyComplete();
+            }, 1000);
+            return content;
+        },
+        onCopyComplete () {}
+    });
+}
+function $122263eab94cad08$export$2e2bcd8739ae039() {
+    return $122263eab94cad08$export$c6684e6159b21de3({});
+}
+
+
+
+function $47a1c62621be0c54$export$2e2bcd8739ae039() {
+    const button = (0, $cbd28b10fa9798c7$export$2e2bcd8739ae039)();
+    return {
+        ...button,
+        copied: false,
+        init () {
+            button.init.bind(this)();
+            (0, $122263eab94cad08$export$c6684e6159b21de3)(this);
+        }
+    };
+}
+
+
 var $36506012e0c6e9e3$exports = {};
 
 $parcel$defineInteropFlag($36506012e0c6e9e3$exports);
@@ -12964,33 +12964,6 @@ function $506dabb2bf255b38$var$sizeSplits(sizes) {
 }
 
 
-var $a87dacf5139b5e2f$exports = {};
-
-$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
-
-$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
-function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
-    return {
-        get store () {
-            return store || this;
-        },
-        get id () {
-            return this.$root.id;
-        },
-        get panels () {
-            return Array.from(this.$refs.panels.children);
-        },
-        isActive (el) {
-            return this.store.activeTab === this._getRef(el);
-        },
-        // protected
-        _getRef (el) {
-            return el.getAttribute("x-ref");
-        }
-    };
-}
-
-
 var $0db07828cadc68e0$exports = {};
 
 $parcel$defineInteropFlag($0db07828cadc68e0$exports);
@@ -13083,6 +13056,33 @@ function $0db07828cadc68e0$export$2e2bcd8739ae039(store) {
 }
 
 
+var $a87dacf5139b5e2f$exports = {};
+
+$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
+
+$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
+function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
+    return {
+        get store () {
+            return store || this;
+        },
+        get id () {
+            return this.$root.id;
+        },
+        get panels () {
+            return Array.from(this.$refs.panels.children);
+        },
+        isActive (el) {
+            return this.store.activeTab === this._getRef(el);
+        },
+        // protected
+        _getRef (el) {
+            return el.getAttribute("x-ref");
+        }
+    };
+}
+
+
 var $6d64716f0b34fdf4$exports = {};
 
 $parcel$defineInteropFlag($6d64716f0b34fdf4$exports);
@@ -13210,19 +13210,19 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$6d30a58562f349fe$exports = {
+$d865a31e17cd1079$exports = {
     "button": $cbd28b10fa9798c7$exports,
     "code": $99486586f6691564$exports,
-    "copy_button": $47a1c62621be0c54$exports,
-    "embed": $e1f51f020443edd4$exports,
     "dimensions_display": $e398acaded942bbe$exports,
+    "embed": $e1f51f020443edd4$exports,
     "filter": $e9904a14dabf652d$exports,
+    "copy_button": $47a1c62621be0c54$exports,
     "icon": $36506012e0c6e9e3$exports,
     "nav": $d92d9d5253f84566$exports,
     "params_editor": $b63b9c6d236b3f65$exports,
     "split_layout": $506dabb2bf255b38$exports,
-    "tab_panels": $a87dacf5139b5e2f$exports,
     "tabs": $0db07828cadc68e0$exports,
+    "tab_panels": $a87dacf5139b5e2f$exports,
     "viewport": $6d64716f0b34fdf4$exports
 };
 
@@ -13367,7 +13367,7 @@ const $d73574cc5e9b9e72$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $d709d0f4027033b2$export$2e2bcd8739ae039));
 [
-    $6d30a58562f349fe$exports,
+    $d865a31e17cd1079$exports,
     $e4eab7529959b73b$exports,
     $4979d2d897a1c01f$exports
 ].forEach((scripts)=>{