klenod-build 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f6f0bd5e9b747b26e394d5c041f30ce22aa9436f8483689172c48ae2219af1b
-  data.tar.gz: 8a11818a46097229cab6c5c2f94515306f9f989c7b2c49eefcb045b46e68a3a8
+  metadata.gz: a3c7b7667bd38de08f8f31ebb2aecf97bcbde81d8e189dae356ac64651dd340b
+  data.tar.gz: 55d2493b7d0047d97f9fb26766f7f6a1ed07867e1b1024c04d92dac3e04088e7
 SHA512:
-  metadata.gz: f10d5c296da38e42bfd54e37366dd28e834bbb21b2ed455ea0ab1b325eb4e43ca2e8dc41b0e0d30b6709db8563441573ed5132a9d85ef1f81d8287459a9c40a0
-  data.tar.gz: ed6f70303f40f60b71147980de86b84482106407d927ac7aa248efccb92c2ee83cff94fdf0baa382e2e18229460e526cad265679383d27b8d80aa2ce8106edde
+  metadata.gz: ce9d72bdc5127d334c72baa154e6d16997081c3e3a7f016074ec41088a16007b4c35c93d4bfb96a220fd950539b0e3496d7b3c9b33439c6777d5760cad2e2715
+  data.tar.gz: 156d7564ff2e42c7831585790e906598510f5b27c74de16378f06870e792baa91f15101abe932212b6669a7a368d5b852c9f1be2cdeae5cc75ffa2f951eff46f

data/lib/klenod/build/plugins/asset_javascript_metadata.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require "json"
+
+require_relative "../asset"
+require_relative "../hashing"
+
+module Klenod
+  module Build
+    module Plugins
+      module AssetJavaScriptMetadata
+        IDENTIFIER_PATTERN = /\A[$A-Z_a-z][$0-9A-Z_a-z]*\z/
+        LOGICAL_NAME = "virtual:klenod/asset-metadata.js"
+        SOURCE = <<~JAVASCRIPT
+          export class ImageBase {
+            constructor({ src, width, height, contentType, aspectRatio }) {
+              this.src = src;
+              this.width = width;
+              this.height = height;
+              this.contentType = contentType;
+              this.aspectRatio = aspectRatio;
+            }
+          }
+
+          export class ImageVariant extends ImageBase {
+            constructor({ src, width, height, contentType, aspectRatio, format, descriptor, quality }) {
+              super({ src, width, height, contentType, aspectRatio });
+              this.format = format;
+              this.descriptor = descriptor;
+              this.quality = quality;
+              Object.freeze(this);
+            }
+          }
+
+          export default class ImageMetadata extends ImageBase {
+            constructor({ src, width, height, contentType, aspectRatio, variants = [] }) {
+              super({ src, width, height, contentType, aspectRatio });
+              this.variants = Object.freeze([...variants]);
+              Object.freeze(this);
+            }
+
+            get srcset() {
+              if (this.variants.length === 0) return null;
+              return this.variants.map((variant) => `${variant.src} ${variant.descriptor}`).join(", ");
+            }
+
+            get sizes() {
+              const variantWidths = this.variants.map((variant) => variant.width).filter(Boolean);
+              const displayWidth = variantWidths.length > 0 ? Math.max(...variantWidths) : this.width;
+              return displayWidth ? `(max-width: ${displayWidth}px) 100vw, ${displayWidth}px` : null;
+            }
+          }
+
+          export class SvgMetadata extends ImageBase {
+            constructor({ src, width, height, contentType, aspectRatio }) {
+              super({ src, width, height, contentType, aspectRatio });
+              Object.freeze(this);
+            }
+          }
+        JAVASCRIPT
+        CONTENT_HASH = Hashing.short(SOURCE)
+        OUTPUT_PATH = "/assets/klenod_asset_metadata.#{CONTENT_HASH}.js"
+
+        module_function
+
+        def object_literal(properties)
+          "{#{properties.map { |key, value| property(key, value) }.join(",")}}"
+        end
+
+        def aspect_ratio(width, height)
+          return nil unless width && height && !height.zero?
+
+          width.to_f / height
+        end
+
+        def property(key, value)
+          name = key.to_s
+          name = JSON.generate(name) unless name.match?(IDENTIFIER_PATTERN)
+          "#{name}:#{JSON.generate(value)}"
+        end
+
+        def asset
+          Asset.new(
+            LOGICAL_NAME,
+            CONTENT_HASH,
+            OUTPUT_PATH,
+            nil,
+            SOURCE,
+            "application/javascript",
+            {type: :javascript, javascript_runtime: :asset_metadata}
+          )
+        end
+      end
+    end
+  end
+end

data/lib/klenod/build/plugins/image_plugin.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "image_size"
-require "json"
 require "rmagick"
 require "uri"
 
@@ -11,6 +10,7 @@ require_relative "../hashing"
 require_relative "../load_result"
 require_relative "../plugin"
 require_relative "../transform_result"
+require_relative "asset_javascript_metadata"
 
 module Klenod
   module Build
@@ -52,7 +52,7 @@ module Klenod
             asset = default_image_asset(module_id, source_path, source_hash, dimensions, image_options, context.asset_generation_queue)
             variant_assets = generate_variant_assets(module_id, source_path, source_hash, dimensions, image_options, context.asset_generation_queue)
             javascript_asset = javascript_image_asset(module_id, asset, variant_assets)
-            assets = [asset, *variant_assets, javascript_asset]
+            assets = [asset, *variant_assets]
             image_runtime_dependency =
               Dependency
                 .create(
@@ -69,7 +69,7 @@ module Klenod
                 nil,
                 assets,
                 [],
-                {image_javascript_asset_path: javascript_asset.output_path}
+                {image_javascript_asset: javascript_asset}
               )
             LoadResult.new(
               image_source(module_id),
@@ -185,8 +185,12 @@ module Klenod
 
           def image_runtime_source
             <<~RUBY
-              Image =
-                Data.define(:src, :width, :height, :content_type, :variants) do
+              ImageMetadata =
+                Data.define(:src, :width, :height, :content_type, :aspect_ratio, :variants) do
+                  def initialize(src:, width:, height:, content_type:, aspect_ratio:, variants:)
+                    super(src:, width:, height:, content_type:, aspect_ratio:, variants: variants.dup.freeze)
+                  end
+
                   def srcset
                     return nil if variants.empty?
 
@@ -201,7 +205,7 @@ module Klenod
                   end
                 end
 
-              ImageVariant = Data.define(:src, :width, :height, :content_type, :format, :descriptor, :metadata)
+              ImageVariant = Data.define(:src, :width, :height, :content_type, :aspect_ratio, :format, :descriptor, :quality)
             RUBY
           end
 
@@ -216,11 +220,12 @@ module Klenod
             <<~RUBY
               ImageRuntime = __klenod_import__(#{image_runtime_dependency.id.inspect})
               Default =
-                ImageRuntime::Image.new(
+                ImageRuntime::ImageMetadata.new(
                   src: #{asset.output_path.inspect},
                   width: #{asset.metadata[:width].inspect},
                   height: #{asset.metadata[:height].inspect},
                   content_type: #{asset.content_type.inspect},
+                  aspect_ratio: #{AssetJavaScriptMetadata.aspect_ratio(asset.metadata[:width], asset.metadata[:height]).inspect},
                   variants: [
                     #{variants.join(",\n    ")}
                   ]
@@ -236,9 +241,10 @@ module Klenod
                 width: #{asset.metadata[:width].inspect},
                 height: #{asset.metadata[:height].inspect},
                 content_type: #{asset.content_type.inspect},
+                aspect_ratio: #{AssetJavaScriptMetadata.aspect_ratio(asset.metadata[:width], asset.metadata[:height]).inspect},
                 format: #{asset.metadata[:format].inspect},
                 descriptor: #{asset.metadata[:descriptor].inspect},
-                metadata: #{asset.metadata.inspect}
+                quality: #{asset.metadata[:quality].inspect}
               )
             RUBY
           end
@@ -249,7 +255,7 @@ module Klenod
             Asset.new(
               module_id.path,
               hash,
-              "#{asset.output_path}.js",
+              "/assets/#{asset_name(module_id)}.#{hash}#{module_id.extname}.js",
               nil,
               code,
               "application/javascript",
@@ -258,21 +264,20 @@ module Klenod
           end
 
           def javascript_image_module_source(asset, variant_assets)
-            variants = variant_assets.map { |variant_asset| javascript_image_variant(variant_asset) }
-            srcset = variant_assets.empty? ? nil : variant_assets.map { "#{it.output_path} #{it.metadata[:descriptor]}" }.join(", ")
-            display_width = variant_assets.filter_map { it.metadata[:width] }.max || asset.metadata[:width]
-            sizes = display_width ? "(max-width: #{display_width}px) 100vw, #{display_width}px" : nil
-            metadata = {
+            variants = variant_assets.map { "new ImageVariant(#{AssetJavaScriptMetadata.object_literal(javascript_image_variant(it))})" }
+            properties = {
               src: asset.output_path,
               width: asset.metadata[:width],
               height: asset.metadata[:height],
               contentType: asset.content_type,
-              variants: variants,
-              srcset: srcset,
-              sizes: sizes
-            }
-
-            "export default #{JSON.generate(metadata)};\n"
+              aspectRatio: AssetJavaScriptMetadata.aspect_ratio(asset.metadata[:width], asset.metadata[:height])
+            }.map { |key, value| AssetJavaScriptMetadata.property(key, value) }
+            properties << %(variants:[#{variants.join(",")}])
+
+            <<~JAVASCRIPT
+              import ImageMetadata, { ImageVariant } from #{AssetJavaScriptMetadata::OUTPUT_PATH.inspect};
+              export default new ImageMetadata({#{properties.join(",")}});
+            JAVASCRIPT
           end
 
           def javascript_image_variant(asset)
@@ -281,10 +286,11 @@ module Klenod
               width: asset.metadata[:width],
               height: asset.metadata[:height],
               contentType: asset.content_type,
+              aspectRatio: AssetJavaScriptMetadata.aspect_ratio(asset.metadata[:width], asset.metadata[:height]),
               format: asset.metadata[:format],
               descriptor: asset.metadata[:descriptor],
-              metadata: asset.metadata
-            }
+              quality: asset.metadata[:quality]
+            }.compact
           end
 
           def image_asset(assets)
@@ -334,8 +340,7 @@ module Klenod
               width: width,
               height: scaled_height(dimensions, width),
               format: format.to_sym,
-              descriptor: descriptor,
-              source_width: width
+              descriptor: descriptor
             }
             metadata[:quality] = quality if quality
 

data/lib/klenod/build/plugins/svg_plugin.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "json"
-
 require_relative "../asset"
 require_relative "../dependency"
 require_relative "../errors"
@@ -9,6 +7,7 @@ require_relative "../hashing"
 require_relative "../module_id"
 require_relative "../plugin"
 require_relative "../transform_result"
+require_relative "asset_javascript_metadata"
 
 module Klenod
   module Build
@@ -71,9 +70,9 @@ module Klenod
               svg_module_source(asset, svg_runtime_dependency),
               [svg_runtime_dependency],
               nil,
-              [asset, javascript_asset],
+              [asset],
               [],
-              {asset_bytes: code, svg_javascript_asset_path: javascript_asset.output_path}
+              {asset_bytes: code, svg_javascript_asset: javascript_asset}
             )
           end
 
@@ -95,7 +94,7 @@ module Klenod
 
           def svg_runtime_source
             <<~RUBY
-              Svg = Data.define(:src, :width, :height, :content_type)
+              SvgMetadata = Data.define(:src, :width, :height, :content_type, :aspect_ratio)
             RUBY
           end
 
@@ -103,11 +102,12 @@ module Klenod
             <<~RUBY
               SvgRuntime = __klenod_import__(#{svg_runtime_dependency.id.inspect})
               Default =
-                SvgRuntime::Svg.new(
+                SvgRuntime::SvgMetadata.new(
                   src: #{asset.output_path.inspect},
                   width: #{asset.metadata[:width].inspect},
                   height: #{asset.metadata[:height].inspect},
-                  content_type: #{asset.content_type.inspect}
+                  content_type: #{asset.content_type.inspect},
+                  aspect_ratio: #{AssetJavaScriptMetadata.aspect_ratio(asset.metadata[:width], asset.metadata[:height]).inspect}
                 )
 
             RUBY
@@ -119,7 +119,7 @@ module Klenod
             Asset.new(
               module_id.path,
               hash,
-              "#{asset.output_path}.js",
+              "/assets/#{asset_name(module_id)}.#{hash}#{module_id.extname}.js",
               nil,
               code,
               "application/javascript",
@@ -132,10 +132,14 @@ module Klenod
               src: asset.output_path,
               width: asset.metadata[:width],
               height: asset.metadata[:height],
-              contentType: asset.content_type
+              contentType: asset.content_type,
+              aspectRatio: AssetJavaScriptMetadata.aspect_ratio(asset.metadata[:width], asset.metadata[:height])
             }
 
-            "export default #{JSON.generate(metadata)};\n"
+            <<~JAVASCRIPT
+              import { SvgMetadata } from #{AssetJavaScriptMetadata::OUTPUT_PATH.inspect};
+              export default new SvgMetadata(#{AssetJavaScriptMetadata.object_literal(metadata)});
+            JAVASCRIPT
           end
 
           def svg_dimensions(code)

data/lib/klenod/build/version.rb

@@ -2,6 +2,6 @@
 
 module Klenod
   module Build
-    VERSION = "0.0.2"
+    VERSION = "0.0.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: klenod-build
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Andrés Alin
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.2
+        version: 0.0.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.2
+        version: 0.0.3
 - !ruby/object:Gem::Dependency
   name: async
   requirement: !ruby/object:Gem::Requirement
@@ -249,6 +249,7 @@ files:
 - lib/klenod/build/module_record.rb
 - lib/klenod/build/plugin.rb
 - lib/klenod/build/plugins.rb
+- lib/klenod/build/plugins/asset_javascript_metadata.rb
 - lib/klenod/build/plugins/class_names_runtime.rb
 - lib/klenod/build/plugins/component_defaults.rb
 - lib/klenod/build/plugins/data_plugin.rb