class TsAssets::Generators::ReactGenerator

Attributes

es_module_interop[R]

@return [Boolean]

mapping[R]

@return [Hash]

Public Class Methods

new(mapping, es_module_interop: false) click to toggle source

@param [Hash] mapping

# File lib/ts_assets/generators/react_generator.rb, line 16
def initialize(mapping, es_module_interop: false)
  @mapping = merge_mapping_with_same_descriptors(mapping)
  @es_module_interop = es_module_interop
end

Public Instance Methods

generate() click to toggle source

@return [TsAssets::Models::Content]

# File lib/ts_assets/generators/react_generator.rb, line 22
def generate
  components = mapping.map { |path, asset_meta_infos| reactify(path, asset_meta_infos) }
  TsAssets::Models::Content.new(header: header, body: components.join("\n"))
end

Private Instance Methods

build_component_name(asset_path) click to toggle source

@param [String] asset_path @return [String]

# File lib/ts_assets/generators/react_generator.rb, line 88
def build_component_name(asset_path)
  "Image#{asset_path.gsub(/[^a-zA-Z0-9_]/, '_').camelize}"
end
build_src_set(asset_meta_infos) click to toggle source

@param [Array<AssetMetaInfo>] asset_meta_infos @return [String]

# File lib/ts_assets/generators/react_generator.rb, line 94
def build_src_set(asset_meta_infos)
  src_set = asset_meta_infos.map do |meta_info|
    "${#{meta_info.normalised_path}} #{meta_info.descriptor}"
  end.join(',')
  "`#{src_set}`"
end
header() click to toggle source

@return [String]

# File lib/ts_assets/generators/react_generator.rb, line 48
      def header
        if es_module_interop
          <<~TYPESCRIPT
            import React from "react";
          TYPESCRIPT
        else
          <<~TYPESCRIPT
            import * as React from "react";
          TYPESCRIPT
        end
      end
merge_mapping_with_same_descriptors(mapping) click to toggle source

@param [Hash<String, TsAssets::Models::AssetMetaInfo>] mapping @return [Hash<String, [TsAssets::Models::AssetMetaInfo]>]

# File lib/ts_assets/generators/react_generator.rb, line 31
def merge_mapping_with_same_descriptors(mapping)
  new_mapping = {}

  mapping.map do |full_path, asset_meta_info|
    path = asset_meta_info.asset_path_without_descriptor

    if new_mapping[path].nil?
      new_mapping[path] = [asset_meta_info]
    else
      new_mapping[path] << asset_meta_info
    end
  end

  new_mapping
end
reactify(path, asset_meta_infos) click to toggle source

@param [String] path @param [Array<AssetMetaInfo>] asset_meta_infos @return [String]

# File lib/ts_assets/generators/react_generator.rb, line 63
      def reactify(path, asset_meta_infos)
        component_name = build_component_name(path)

        alt = File.basename(path)
        width = asset_meta_infos.first.width
        height = asset_meta_infos.first.height
        src = asset_meta_infos.first.normalised_path
        src_set = build_src_set(asset_meta_infos)

        <<~TS
          /** #{path} */
          export function #{component_name}(props?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>) {
              return <img alt="#{alt}"
                          width={#{width}}
                          height={#{height}}
                          src={#{src}}
                          srcSet={#{src_set}}
                          {...props}
                          />;
          }
        TS
      end