lookbook 2.0.1 → 2.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb6a188223d00db16e3b82a713ef7def725707c8ee410064ba4e6136675405e7
-  data.tar.gz: 3f0e2cb77bfd507d93de8a16a13d2a0031e73f18b866cbd7804580b45451eb94
+  metadata.gz: bcba1f9fc2cf6c48816f0a3bb9779d035271abc06b96de49dfd529af11b1ccab
+  data.tar.gz: 5c8a77ea0591a494c41a6029b53a57401d2541b616091d5eea5437f1f836449a
 SHA512:
-  metadata.gz: 242313e1f2fab8b623cd9abfb813a7ae853ac674ee724bb3bfc3b4ab133994d3cac7100145972194fb9e6ab8400937fe541784ac9bdeddddcc7c34f624096122
-  data.tar.gz: 2027b080e94930ab0df5d0ebb3c608a467acb3b3deccb6c96cfcf31be1f4d62d71092a165d81b079d7e5506d7ff063c4b7144c94931e97313ab7a7f63ba6e4a2
+  metadata.gz: 5479d156972a0f078b3465cc7a53419489aa673dc110578d83263980e8944246be63065fa4f01fb431a0acfaabcd91e4a159573327fb9b504564d124a074d1f4
+  data.tar.gz: 301bf273975e386ee9966b0a34ef943071fb8a4fe68e3165ddc75b0e61a7f180367d3120c5df7cbc81e100e22b1f76636cc3ef28856d3c5fae7f87079fe62794

data/app/components/lookbook/button/component.html.erb

@@ -2,8 +2,8 @@
   id: id,
   icon: icon,
   **button_attrs,
-  "@keydown.esc.stop": "hideDropdown",
-  "@navigation:complete.window": "updateDropdown") do %>
+  "x-on:keydown.esc.stop": "hideDropdown",
+  "x-on:navigation:complete.window": "updateDropdown") do %>
   <%= content %>
 <% end %>
 

data/app/components/lookbook/copy_button/component.html.erb

@@ -2,7 +2,7 @@
   name: "copy-button",
   **button_attrs,
   "x-data": prepare_alpine_data,
-  "@click.prevent": "copyToClipboard" do |button| %>
+  "x-on:click.prevent": "copyToClipboard" do |button| %>
   <% button.with_icon name: icon, size: icon_size, "x-show": "!copied", cloak: true %>
   <% button.with_icon name: :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true %>
   <% if content %>

data/app/components/lookbook/debug_menu/component.html.erb

@@ -6,7 +6,7 @@
           <a href="#"
             class="text-xs flex items-center hover:underline"
             x-data="clipboardComponent"
-            @click.prevent.stop="copyToClipboard('#debug-data')">
+            x-on:click.prevent.stop="copyToClipboard('#debug-data')">
             <span x-show="copied" x-cloak>
               <%= icon :check, size: 2.5, class: "text-green-600" %>
             </span>
@@ -20,7 +20,7 @@
       <li>
         <a href="#"
           class="text-xs flex items-center hover:underline"
-          @click.stop="localStorage.clear(); window.location.reload();">
+          x-on:click.stop="localStorage.clear(); window.location.reload();">
           <%= icon :refresh_cw, size: 2.5 %>
           <span class="ml-2">Reset local storage</span>
         </a>

data/app/components/lookbook/dimensions_display/component.html.erb

@@ -1,9 +1,9 @@
 <%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
   ":class":"{'!opacity-100': resizing}",
-  "@viewport:resize-start.window": "resizing = true",
-  "@viewport:resize-complete.window": "resizing = false",
-  "@dom:update-start.window": "tearDown",
-  "@dom:update-complete.window": "createObserver",
+  "x-on:viewport:resize-start.window": "resizing = true",
+  "x-on:viewport:resize-complete.window": "resizing = false",
+  "x-on:dom:update-start.window": "tearDown",
+  "x-on:dom:update-complete.window": "createObserver",
   "x-show": "target" do %>
     <span x-text="`${width}px`"></span>
     <span class="opacity-70">x</span>

data/app/components/lookbook/embed/inspector/component.html.erb

@@ -52,8 +52,8 @@
       style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; overflow: hidden;"
     <% end %>>
     <div
-      @viewport:resize-progress="resizeIframe"
-      @viewport:resize-complete="resizeIframe"
+      x-on:viewport:resize-progress="resizeIframe"
+      x-on:viewport:resize-complete="resizeIframe"
       x-ref="viewportWrapper"> 
       <%= lookbook_render :viewport,
         iframe_id: "#{id}-viewport",

data/app/components/lookbook/embed/inspector/component.js

@@ -36,6 +36,18 @@ export default function embedInspectorComponent(id, embedStore) {
     onResized({ height }) {
       if (height) {
         this.viewportHeight = height;
+
+        // Notify parent window of height resize so the parent window can implement
+        // its own iframe resize strategy if not using the Lookbook JS script.
+        // Uses Embedly-compatible postMessage format: https://docs.embed.ly/reference/provider-height-resizing
+        window.parent.postMessage(
+          JSON.stringify({
+            src: window.location.toString(),
+            context: "iframe.resize",
+            height,
+          }),
+          "*"
+        );
       }
     },
 

data/app/components/lookbook/embed_code_dropdown/component.css

@@ -1,12 +1,19 @@
 @layer components {
   [data-component="embed-code-dropdown"] {
     & [data-component="code"] {
-      @apply p-0;
+      @apply px-2 py-2 bg-lookbook-base-50 border border-dashed border-lookbook-divider;
     }
 
     & pre.code.highlight {
       @apply overflow-hidden whitespace-normal p-0;
       font-size: 11px;
     }
+
+    .line-clamp-2 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
   }
 }

data/app/components/lookbook/embed_code_dropdown/component.html.erb

@@ -1,22 +1,64 @@
-<%= render_component_tag class:"p-3 w-[320px]" do %>  
-  <h4 class="text-[11px] uppercase tracking-wider mb-2 font-bold">Preview embed code</h4>
+<%= render_component_tag class:"p-3 w-[360px] text-[11px] text-gray-600" do %>  
 
-  <p class="text-xs text-gray-600 mb-3">
-    This code can be used to embed this preview in
-    Lookbook pages<% unless policy == "SAMEORIGIN" %> or on external sites<% end %>.
-  </p>
+  <!-- p class="mb-3">
+    Embed this preview in Lookbook pages or externally using the code or iframe URL below.
+  </!-->
 
-  <div class="border-t border-lookbook-dropdown-divider pt-3 pb-3">
-    <%= code :html do %><%= embed_code %><% end %>
+  <div class="mb-4 space-y-2">
+
+    <header class="flex items-center">
+      <h4 class=" uppercase tracking-wider font-bold">Embed Code</h4>
+      <span class="ml-auto" >
+        <a
+          href="https://lookbook.build/guide/sharing/embeds"
+          target="_blank"
+          title="Help"
+          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
+          what's this?
+        </a>
+      </span>
+    </header>
+
+    <div class="relative group">
+      <%= code :html do %><%= embed_code %><% end %>
+
+      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %>
+          <%= escape_once embed_code %>
+        <% end %>
+      </span>
+    </div>
+    
   </div>
 
-  <%= lookbook_render :text_button, "@click.stop.prevent": "copyEmbedCode", ":disabled": "copied" do |button| %>
-    <% button.with_icon name: :copy, size: 3, "x-show": "!copied", "x-cloak": true %>
-    <% button.with_icon name: :check, size: 3, "x-show": "copied", "x-cloak": true %>
-    <span x-text="copied ? 'Copied!' : 'Copy embed code'"></span>    
-  <% end %>
+  <div class="space-y-2">
+
+    <header class="flex items-center">
+      <h4 class="text-[11px] uppercase tracking-wider font-bold">Embed URL</h4>
+      <span class="ml-auto" >
+        <a
+          href="https://lookbook.build/guide/sharing/embeds#other-services"
+          target="_blank"
+          title="Help"
+          class="text-lookbook-prose underline opacity-70 hover:opacity-100">
+          what's this?
+        </a>
+      </span>
+    </header>
+
+    <div class="relative group">
+      <div class="font-mono bg-lookbook-base-50 px-2 py-2 break-all border border-dashed border-lookbook-divider">
+        <span class="line-clamp-2">
+          <%= embed_url %>
+        </span>
+      </div>
+      
+      <span class="absolute top-px right-px bg-lookbook-base-50 rounded-md transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+        <%= lookbook_render :copy_button, icon: :copy, tooltip: "Copy" do %><%= embed_url %><% end %>
+      </span>
+    </div>
 
-  <div class="hidden" x-ref="copyTarget">
-    <%= escape_once embed_code %>
   </div>
-<% end %>
+      
+
+<% end %>

data/app/components/lookbook/embed_code_dropdown/component.js

@@ -1,26 +1,3 @@
-import { decodeEntities } from "@helpers/string";
-
 export default function embedCodeDropdownComponent() {
-  let copyTimeout = null;
-
-  return {
-    copied: false,
-
-    copyEmbedCode() {
-      this.$nextTick(async () => {
-        const content = decodeEntities(this.$refs.copyTarget.innerHTML.trim());
-
-        await window.navigator.clipboard.writeText(content);
-        this.copied = true;
-
-        if (copyTimeout) {
-          clearTimeout(copyTimeout);
-        }
-
-        copyTimeout = setTimeout(() => {
-          this.copied = false;
-        }, 2000);
-      });
-    },
-  };
+  return {};
 }

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

@@ -33,6 +33,15 @@ module Lookbook
       escape_once embed_tag
     end
 
+    def embed_url
+      props = {
+        preview: preview_name,
+        scenario: target.name,
+        **external_embed_params.transform_keys { |k| k.tr("-", "_") }
+      }.to_json
+      "#{app_path}embed?props=#{CGI.escape(props)}"
+    end
+
     private
 
     def alpine_component

data/app/components/lookbook/filter/component.html.erb

@@ -7,10 +7,10 @@
       x-ref="input"
       x-model="<%= @model %>"
       x-effect="$dispatch('filter:change', { text, filter: this })"
-      @keydown.esc.stop="clear"
-      @keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
-      @keydown.stop>
-      <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
+      x-on:keydown.esc.stop="clear"
+      x-on:keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
+      x-on:keydown.stop>
+      <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" x-on:click="clear" x-bind:class="{hidden: !active}">
         <%= icon  :x, size: 3 %>
       </button>
   </div>

data/app/components/lookbook/header/component.html.erb

@@ -41,14 +41,14 @@
         <% end %>
 
         <% group.with_button icon: :menu,
-          "@click.stop": "toggleSidebar",
+          "x-on:click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
 
         <% group.with_button icon: :x,
-          "@click.stop": "toggleSidebar",
+          "x-on:click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && !sidebarHidden",
-          "@keydown.esc.window": "closeMobileSidebar",
+          "x-on:keydown.esc.window": "closeMobileSidebar",
           class: "!text-lookbook-header-text" %>
       <% end %>    
     <% end %>

data/app/components/lookbook/nav/component.html.erb

@@ -1,5 +1,5 @@
 <%= render_component_tag class: "flex flex-col overflow-hidden h-full",
-  "@filter:change.stop": "filter($event.detail.text)" do %>
+  "x-on:filter:change.stop": "filter($event.detail.text)" do %>
   
   <% if toolbar %>
     <%= toolbar %>

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

@@ -58,7 +58,7 @@ export default function navItemComponent({ id, matchers }) {
 
     bindings: {
       toggle: {
-        ["@click.stop"]: "toggle",
+        ["x-on:click.stop"]: "toggle",
         ["x-ref"]: "toggle",
       },
       link: {

data/app/components/lookbook/params/editor/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag class: "overflow-hidden" do %>
   <div class="bg-lookbook-params-editor-bg border border-lookbook-divider rounded-md overflow-x-auto">
-    <table class="border-collapse w-full" :class="narrow && 'linear'">
+    <table class="border-collapse w-full" x-bind:class="narrow && 'linear'">
       <thead>
         <tr>
           <th class="param-label">Param</th>

data/app/components/lookbook/split_layout/component.html.erb

@@ -3,7 +3,7 @@
     <%= pane %>
     <% if i < panes.size %>
       <div class="split-layout-gutter bg-lookbook-divider relative z-50" x-init="registerGutter">
-        <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
+        <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" x-bind:class="{
           'w-[9px] h-full -translate-x-1/2 cursor-[col-resize] split-layout-gutter-vertical': vertical,
           'h-[9px] w-full -translate-y-1/2 cursor-[row-resize] split-layout-gutter-horizontal': horizontal
         }"></div>

data/app/components/lookbook/tabs/dropdown_tab/component.html.erb

@@ -13,7 +13,7 @@
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     'hidden': visibleTabsCount >= #{@position}
   }",
-  "@click.prevent": "selectTab($el)",
+  "x-on:click.prevent": "selectTab($el)",
   data: {
     disabled: @disabled
   } do %>

data/app/components/lookbook/tabs/tab/component.html.erb

@@ -15,8 +15,8 @@
     '!text-lookbook-tabs-text-disabled': isDisabled($el),
     'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}
   }",
-  "@click.prevent": "selectTab($el)",
-  "@keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
+  "x-on:click.prevent": "selectTab($el)",
+  "x-on:keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
   data: {
     disabled: @disabled
   },

data/app/components/lookbook/viewport/component.html.erb

@@ -28,17 +28,17 @@
       <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
         x-ref="iframe"
         class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
-        :class="{ 'pointer-events-none': reflowing }"
+        x-bind:class="{ 'pointer-events-none': reflowing }"
         style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
         src="<%= @src %>"
         frameborder="0"
-        @load="$dispatch('viewport:loaded', {viewport: this})"
+        x-on:load="$dispatch('viewport:loaded', {viewport: this})"
         title="viewport"></iframe>
         <% if @resize_width %>
           <div
             class="resize-handle border-r border-t border-lookbook-divider cursor-[col-resize] <%= "border-b" unless @resize_height %>"
-            @pointerdown="onResizeWidthStart"
-            @dblclick="toggleFullWidth">
+            x-on:pointerdown="onResizeWidthStart"
+            x-on:dblclick="toggleFullWidth">
             <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>
@@ -47,8 +47,8 @@
         <% if @resize_height %>
           <div
             class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
-            @pointerdown="onResizeHeightStart"
-            @dblclick="toggleFullHeight">
+            x-on:pointerdown="onResizeHeightStart"
+            x-on:dblclick="toggleFullHeight">
             <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>
@@ -57,8 +57,8 @@
         <% if @resize_height && @resize_width %>
           <div
             class="resize-handle border-r border-b border-lookbook-divider cursor-[nwse-resize]"
-            @pointerdown="onResizeStart"
-            @dblclick="toggleFullSize">
+            x-on:pointerdown="onResizeStart"
+            x-on:dblclick="toggleFullSize">
             <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>

data/app/views/layouts/lookbook/application.html.erb

@@ -3,10 +3,10 @@
     id="app"
     x-data="app"
     x-cloak
-    @popstate.window="handleNavigation"
-    @click.document="hijax"
-    @navigation:start="closeMobileSidebar"
-    @dom:update-complete.window="Lookbook.initEmbeds()"
+    x-on:popstate.window="handleNavigation"
+    x-on:click.document="hijax"
+    x-on:navigation:start="closeMobileSidebar"
+    x-on:dom:update-complete.window="Lookbook.initEmbeds()"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
     <%= render "lookbook/partials/user_styles" %>
@@ -29,7 +29,7 @@
             'translate-x-full': $store.layout.mobile && sidebarHidden,
             '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-[1001] border-l border-lookbook-divider': $store.layout.mobile
           }",
-          "@click.outside": "closeMobileSidebar",
+          "x-on:click.outside": "closeMobileSidebar",
           cloak: true do %>
 
           <%= lookbook_render :split_layout,
@@ -50,7 +50,7 @@
                       <%= lookbook_render :button_group, size: :xs do |group| %>
                         <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
-                          "@click": "closeAll" %>
+                          "x-on:click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
@@ -73,7 +73,7 @@
                       <%= lookbook_render :button_group, size: :xs do |group| %>
                         <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
-                          "@click": "closeAll" %>
+                          "x-on:click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
@@ -93,7 +93,7 @@
       </div>
     <% end %>
     
-    <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-[1000]'" data-cloak></div>
+    <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" x-bind:class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-[1000]'" data-cloak></div>
 
     <% if content_for? :dropdowns %>
       <div class="hidden">

data/app/views/layouts/lookbook/embed.html.erb

@@ -3,8 +3,8 @@
     id="app"
     x-data="app"
     x-cloak
-    @popstate.window="handleNavigation"
-    @click.document="hijax"
+    x-on:popstate.window="handleNavigation"
+    x-on:click.document="hijax"
     class="overflow-hidden">
     
     <%= render "lookbook/partials/user_styles" %>

data/app/views/lookbook/inspector/inputs/_color.html.erb

@@ -1,6 +1,6 @@
 <%= text_field_tag(name, value,
   **input_options,
   type: "color",
-  "@change.stop": "",
-  "@blur": "value = $el.value",
+  "x-on:change.stop": "",
+  "x-on:blur": "value = $el.value",
 ) %>

data/app/views/lookbook/inspector/inputs/_text_two_step.html.erb

@@ -1,12 +1,12 @@
 <div x-data="{changed: false, applyChange(){ this.value = this.$refs.input.value; this.changed = false; }}">
 
-  <div @change.stop="changed = ($event.target.value !== value)" class="flex items-center gap-2">
+  <div x-on:change.stop="changed = ($event.target.value !== value)" class="flex items-center gap-2">
     <%= text_field_tag(name, value,
       **input_options,
       type: input,
       class: "flex-grow",
       "x-ref": "input",
-      "@keydown.enter.stop": "applyChange"
+      "x-on:keydown.enter.stop": "applyChange"
     ) %>
 
     <%= lookbook_render :button,
@@ -14,6 +14,6 @@
       tooltip: "Apply changes",
       class: "flex-none !bg-lookbook-button-bg hover:!bg-lookbook-button-bg-hover rounded-md !text-lookbook-button-text",
       "x-show": "changed",
-      "@click": "applyChange" %>
+      "x-on:click": "applyChange" %>
   </div>
 </div>

data/app/views/lookbook/inspector/inputs/_toggle.html.erb

@@ -15,6 +15,6 @@ span_classes = [
   class: class_names(button_classes),
   role: "switch",
   type: "button",
-  "@click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
+  "x-on:click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
   <%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
 <% end %>

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

@@ -1,7 +1,7 @@
 <%= lookbook_render :code, line_numbers: true, full_height: true do -%>
   <% if scenarios.many? -%>
-    <% scenarios.each do |scenario| -%><%== "<!-- #{scenario.label} -->\n#{scenario.output}\n\n" -%><% end %>
+    <% scenarios.each do |scenario| -%><%== "<!-- #{scenario.label} -->\n#{scenario.beautified_output}\n\n" -%><% end %>
   <%- else -%>
-    <%== scenarios.first.output -%>
+    <%== scenarios.first.beautified_output -%>
   <%- end %>
 <% end %>

data/app/views/lookbook/inspector/show.html.erb

@@ -55,7 +55,7 @@
             <% group.with_button id: "refresh-preview-button",
               icon: :refresh_cw,
               tooltip: "Refresh preview",
-              "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
+              "x-on:click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
             <% group.with_button id: "open-preview-button",
               icon: :external_link,
@@ -66,7 +66,7 @@
             <% group.with_button id: "show-drawer-button",
               icon: "sidebar",
               tooltip: "Show drawer",
-              "@click": "$store.inspector.drawer.hidden = false",
+              "x-on:click": "$store.inspector.drawer.hidden = false",
               class: "rotate-180",
               "x-show": "$store.inspector.drawer.hidden && vertical",
               cloak: true %>
@@ -74,7 +74,7 @@
             <% group.with_button id: "show-drawer-button",
               icon: "credit-card",
               tooltip: "Show drawer",
-              "@click": "$store.inspector.drawer.hidden = false",
+              "x-on:click": "$store.inspector.drawer.hidden = false",
               class: "rotate-180",
               "x-show": "$store.inspector.drawer.hidden && !vertical",
               cloak: true %>
@@ -131,7 +131,7 @@
             <% group.with_button id: "drawer-to-right-button",
               icon: :sidebar_open,
               tooltip: "Pin drawer on right",
-              "@click": "switchOrientation",
+              "x-on:click": "switchOrientation",
               "x-show": "horizontal",
               ":class": "{'pointer-events-none opacity-50 !cursor-not-allowed': horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth}",
               cloak: true %>
@@ -139,7 +139,7 @@
             <% group.with_button id: "drawer-to-bottom-button",
               icon: :sidebar_open,
               tooltip: "Pin drawer on bottom",
-              "@click": "switchOrientation",
+              "x-on:click": "switchOrientation",
               "x-show": "vertical",
               class: "rotate-90",
               cloak: true %>
@@ -147,7 +147,7 @@
             <% group.with_button id: "hide-drawer-button",
               icon: :x_circle,
               tooltip: "Hide drawer",
-              "@click": "$store.inspector.drawer.hidden = true",
+              "x-on:click": "$store.inspector.drawer.hidden = true",
               cloak: true %>
           <% end %>
         <% end %>

data/assets/js/lib/lookbook.js

@@ -114,7 +114,9 @@ function guessBasePath() {
   const scriptSrc = script.src;
 
   if (scriptSrc && scriptSrc.includes("lookbook-assets")) {
-    return scriptSrc.replace("lookbook-assets/js/lookbook.js", "lookbook");
+    return scriptSrc
+      .split("?")[0]
+      .replace("lookbook-assets/js/lookbook.js", "lookbook");
   }
 
   return `//${location.host}/lookbook`;

data/lib/lookbook/entities/rendered_scenario_entity.rb

@@ -23,8 +23,13 @@ module Lookbook
     # HTML output of the rendered scenario.
     #
     # @return [String] Rendered output
-    def output
-      @_output ||= CodeBeautifier.call(@output)
+    attr_reader :output
+
+    # 'Beautified' HTML output of the rendered scenario.
+    #
+    # @return [String] Rendered output
+    def beautified_output
+      @_beautified_output ||= CodeBeautifier.call(output)
     end
 
     # @api private

data/lib/lookbook/services/tags/tag_options_parser.rb

@@ -9,19 +9,28 @@ module Lookbook
 
     def initialize(input, resolver_opts = {})
       @input = input.to_s.strip
-      @resolver_opts = resolver_opts
+      @resolve = resolver_opts.fetch(:resolve, true)
+      @resolver_opts = resolver_opts.except(:resolve)
       @fallback = resolver_opts.fetch(:fallback, {})
     end
 
     def call
       options_string, remaining_text = parse_input(@input)
-      resolved_options = resolver(options_string).call(options_string, **@resolver_opts)
-      options = prepare_options(resolved_options)
-      [options, remaining_text]
+      if resolve?
+        resolved_options = resolver(options_string).call(options_string, **@resolver_opts)
+        options = prepare_options(resolved_options)
+        [options, remaining_text]
+      else
+        [options_string, remaining_text]
+      end
     end
 
     protected
 
+    def resolve?
+      !!@resolve
+    end
+
     def resolver(options_string)
       if options_string.present?
         handler = RESOLVERS.find { |r| r.resolveable?(options_string) }