Inject script in footer if theme is using theming v2 api

lib/zendesk_apps_tools/theme.rb

@@ -90,38 +90,66 @@ def generate_payload
           identifier = template.match(IDENTIFIER_REGEX)['identifier'].to_s
           templates_payload[identifier] = File.read(template)
         end
+        script_location = 'document_head'
+        style_location = 'document_head'
+        livereload_location = 'document_head'
+
+        #theming_v2 based theme should have script.js
+        # injected at the end of the page
+        if metadata_hash['api_version'] == 2
+          script_location = 'footer'
+        end
+
         payload['templates'] = templates_payload
-        payload['templates']['document_head'] = inject_external_tags(payload['templates']['document_head'])
+        #inject tag in either document_head (theming_v1 based themes), or footer (theming_v2 based themes)
+        payload['templates'][script_location] = inject_external_tags(payload['templates'][script_location],
+                                                                     js_tag_hash['html'])
+        payload['templates'][style_location] = inject_external_tags(payload['templates'][style_location],
+                                                                    css_tag_hash['html'], true)
+        payload['templates'][livereload_location] = inject_external_tags(payload['templates'][livereload_location],
+                                                                         live_reload_script_tag_hash['html'])
         payload['templates']['css'] = ''
         payload['templates']['js'] = ''
-        payload['templates']['assets'] = assets
-        payload['templates']['variables'] = settings_hash
+        payload['templates']['assets'] = assets(base_url)
+        payload['templates']['variables'] = settings_hash(base_url)
         payload['templates']['metadata'] = metadata_hash
         payload
       end
 
-      def inject_external_tags(head_template)
-        live_reload_script_tag = <<-html
+      def base_url
+        "http://localhost:#{options[:port]}"
+      end
+
+      def live_reload_script_tag_hash
+        { 'html' => <<-html
           <script type="text/javascript">
-            RACK_LIVERELOAD_PORT = 4567;
+            RACK_LIVERELOAD_PORT = #{options[:port]};
           </script>
-          <script src="http://localhost:4567/__rack/livereload.js?host=localhost"></script>
-        html
-
-        js_tag = <<-html
-          <script src="http://localhost:4567/guide/script.js"></script>
-        html
-
-        css_tag = <<-html
-          <link rel="stylesheet" type="text/css" href="http://localhost:4567/guide/style.css">
-        html
-
-        template = StringIO.new
-        template << css_tag
-        template << head_template
-        template << js_tag
-        template << live_reload_script_tag
-        template.string
+          <script src="#{base_url}/__rack/livereload.js?host=localhost"></script>
+          html
+        }
+      end
+
+      def js_tag_hash
+        { 'html' => <<-html
+          <script src="#{base_url}/guide/script.js"></script>
+          html
+        }
+      end
+
+      def css_tag_hash
+        { 'html' => <<-html
+          <link rel="stylesheet" type="text/css" href="#{base_url}/guide/style.css">
+          html
+        }
+      end
+
+      def inject_external_tags(template, tag_html, top=false)
+        _template = StringIO.new
+        _template << tag_html if top
+        _template << template
+        _template << tag_html unless top
+        _template.string
       end
 
       alias_method :ensure_manifest!, :manifest
@@ -140,9 +168,10 @@ def start_server(callbacks_after_upload)
           server.set :root, app_dir
           server.set :public_folder, app_dir
           server.set :livereload, options[:livereload]
+          server.set :base_url, base_url
           server.set :callbacks_after_load, callbacks_after_upload
           server.set :callback_map, {}
-          server.use Rack::LiveReload, live_reload_port: 4567 if options[:livereload]
+          server.use Rack::LiveReload, live_reload_port: options[:port] if options[:livereload]
           server.run!
         end
       end

lib/zendesk_apps_tools/theming/common.rb

@@ -5,26 +5,26 @@ def theme_package_path(*file)
         File.expand_path(File.join(app_dir, *file))
       end
 
-      def url_for(package_file)
+      def path_for(package_file)
         relative_path = relative_path_for(package_file)
         path_parts = recursive_pathname_split(relative_path)
         path_parts.shift
-        "http://localhost:4567/guide/#{path_parts.join('/')}"
+        "/guide/#{path_parts.join('/')}"
       end
 
       def relative_path_for(filename)
         Pathname.new(filename).relative_path_from(Pathname.new(File.expand_path(app_dir))).cleanpath
       end
 
-      def assets
+      def assets(base_url)
         assets = Dir.glob(theme_package_path('assets', '*'))
         assets.each_with_object({}) do |asset, asset_payload|
-          asset_payload[File.basename(asset)] = url_for(asset)
+          asset_payload[File.basename(asset)] = "#{base_url}#{path_for(asset)}"
         end
       end
 
-      def assets_hash
-        assets.each_with_object({}) do |(k,v), h|
+      def assets_hash(base_url)
+        assets(base_url).each_with_object({}) do |(k,v), h|
           parametrized = k.gsub(/[^a-z0-9\-_]+/, '-')
           h["assets-#{parametrized}"] = v
         end
@@ -39,22 +39,22 @@ def manifest
         say_error_and_exit "The manifest file is invalid at #{full_manifest_path}"
       end
 
-      def settings_hash
+      def settings_hash(base_url)
         manifest['settings'].flat_map { |setting_group| setting_group['variables'] }.each_with_object({}) do |variable, result|
-          result[variable.fetch('identifier')] = value_for_setting(variable)
+          value = value_for_setting(variable)
+          value = "#{base_url}#{path_for(value)}" if variable.fetch('type') == 'file'
+          result[variable.fetch('identifier')] = value
         end
       end
 
       def metadata_hash
         { 'api_version' => manifest['api_version'] }
       end
 
-      def value_for_setting(variable)
+      def value_for_setting(variable, base_url='')
         return variable.fetch('value') unless variable.fetch('type') == 'file'
-
         files = Dir.glob(theme_package_path('settings', '*.*'))
-        file = files.find { |f| File.basename(f, '.*') == variable.fetch('identifier') }
-        url_for(file)
+        files.find { |f| File.basename(f, '.*') == variable.fetch('identifier') }
       end
 
       def recursive_pathname_split(relative_path)
@@ -63,6 +63,7 @@ def recursive_pathname_split(relative_path)
         return split_path if split_path[0] == joined_directories.split[0]
         [*recursive_pathname_split(joined_directories), split_path[1]]
       end
+
     end
   end
 end

lib/zendesk_apps_tools/theming/server.rb

@@ -57,7 +57,7 @@ class Server < Sinatra::Base
         raise Sinatra::NotFound unless File.exist?(style_css)
         zass_source = File.read(style_css)
         require 'zendesk_apps_tools/theming/zass_formatter'
-        response = ZassFormatter.format(zass_source, settings_hash.merge(assets_hash))
+        response = ZassFormatter.format(zass_source, settings_hash(settings.base_url).merge(assets_hash(settings.base_url)))
         response
       end