shadcn_view_component 0.3.3

data/lib/shadcn_view_component/version.rb

@@ -0,0 +1,3 @@
+module ShadcnViewComponent
+  VERSION = "0.3.3"
+end

data/lib/shadcn_view_component.rb

@@ -0,0 +1,82 @@
+require "concurrent/map"
+require "view_component"
+require "view_component_contrib"
+require "tailwind_merge"
+
+require "shadcn_view_component/version"
+require "shadcn_view_component/icon_registry"
+require "shadcn_view_component/icons"
+require "shadcn_view_component/themes"
+require "shadcn_view_component/engine" if defined?(Rails::Engine)
+
+module ShadcnViewComponent
+  # `tailwind_merge` defaults to a 500-entry LRU. That is small for a page built
+  # from these components: the library's own default variants already occupy
+  # around a hundred entries, and a caller-computed class (`w-[#{percent}%]` in a
+  # long table, say) adds one per distinct value. Once the working set of a page
+  # exceeds the cache, a Rails render is the LRU's worst case — it cycles the
+  # same keys every request, so the hit rate collapses and stays collapsed.
+  #
+  # The measured difference is roughly 0.6µs per merge on a hit against ~100µs on
+  # a miss, and nothing in a stack trace would point here. So: a bigger default,
+  # and a knob for apps that need more.
+  DEFAULT_CACHE_SIZE = 10_000
+
+  class << self
+    attr_writer :cache_size
+
+    def cache_size
+      @cache_size ||= DEFAULT_CACHE_SIZE
+    end
+
+    # Shared TailwindMerge instance used by ApplicationViewComponent#cn.
+    # This is the Ruby equivalent of shadcn's `cn()` helper
+    # (clsx + tailwind-merge): later classes win over conflicting earlier ones.
+    #
+    # Built eagerly by the engine, because constructing it costs a few
+    # milliseconds and two Puma threads racing on `||=` would each build one and
+    # throw a warm cache away.
+    def merger
+      @merger ||= build_merger
+    end
+
+    def build_merger
+      @merger = TailwindMerge::Merger.new(config: { cache_size: cache_size })
+    end
+
+    # `cn(...)` — flattens, compacts and merges Tailwind classes.
+    def cn(*args)
+      merger.merge(flatten_classes(args))
+    end
+
+    # Resets both the merger and the memoised component classes. For tests and
+    # for `config.to_prepare` in development, where the style blocks are
+    # redefined on every reload.
+    def reset!
+      @merger = nil
+      class_cache.clear
+    end
+
+    # Compiled class strings for components rendered without caller classes,
+    # which is the overwhelming majority of call sites. The result is a pure
+    # function of the component class and its variants, and the style blocks are
+    # static once loaded — so this both saves the merge and, more importantly,
+    # keeps the library's own strings out of the LRU, leaving the whole budget to
+    # what callers actually vary.
+    def class_cache
+      @class_cache ||= Concurrent::Map.new
+    end
+
+    private
+
+    def flatten_classes(args)
+      args.flatten.filter_map do |arg|
+        case arg
+        when nil, false, true then nil
+        when Hash then arg.filter_map { |key, value| key.to_s if value }.join(" ")
+        else arg.to_s
+        end
+      end.reject(&:empty?).join(" ")
+    end
+  end
+end

data/lib/tasks/icons.rake

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require_relative "../shadcn_view_component/icon_registry"
+
+# Constants *and* methods declared in a rake namespace land on Object, and
+# `themes.rake` is already there with `ROOT`, `registry` and friends — so
+# everything here carries a name of its own. Called `registry`, this file's
+# generator was shadowed by the theme one and the first run built a theme
+# registry out of icons.
+namespace :icons do
+  ICONS_BANNER = <<~TEXT
+    Generated from the vendored lucide SVGs (`vendor/lucide/icons`, taken from
+    lucide-static at the version in `vendor/lucide/REVISION`) — do not edit by
+    hand, run `rake icons:build`.
+  TEXT
+
+  desc "Regenerate the icon drawings from the vendored lucide SVGs"
+  task :build do
+    root = Pathname(__dir__).join("../..").expand_path
+    files = Dir.glob(root.join("vendor/lucide/icons/*.svg")).sort
+
+    raise "no SVGs in vendor/lucide/icons" if files.empty?
+
+    drawings = files.to_h do |file|
+      [ File.basename(file, ".svg"), ShadcnViewComponent::IconRegistry.drawing(File.read(file)) ]
+    end
+
+    root.join("lib/shadcn_view_component/icons.rb").write(icons_registry(drawings))
+
+    puts "Wrote #{drawings.size} icons."
+  end
+
+  # One entry a line, however long the line: this file is read as a diff — a
+  # drawing that changed, an icon that arrived — and a string broken across
+  # continuations is a diff nobody can read. Rubocop skips it for the same
+  # reason it skips the theme registry: the generator is the thing to lint.
+  def self.icons_registry(drawings)
+    entries = drawings.map { |name, drawing| %(      "#{name}" => %(#{drawing})) }
+
+    <<~RUBY
+      # frozen_string_literal: true
+
+      #{ICONS_BANNER.strip.gsub(/^/, '# ').gsub(/^# $/, '#')}
+      module ShadcnViewComponent
+        module Icons
+          PATHS = {
+      #{entries.join(",\n")}
+          }.freeze
+        end
+      end
+    RUBY
+  end
+end

data/lib/tasks/themes.rake

@@ -0,0 +1,171 @@
+# frozen_string_literal: true
+
+require "json"
+
+namespace :themes do
+  ROOT = Pathname(__dir__).join("../..").expand_path
+  DATA = ROOT.join("vendor/shadcn/themes.json")
+
+  # Base colours come first in the upstream registry; the rest are accent
+  # palettes. Mirrors `apps/v4/registry/base-colors.ts`.
+  BASE_COLORS = %w[neutral stone zinc mauve olive mist taupe].freeze
+
+  BANNER = <<~TEXT
+    Generated from the shadcn/ui registry (`vendor/shadcn/themes.json`, taken
+    from `apps/v4/registry/themes.ts` at the revision in
+    `vendor/shadcn/REVISION`) — do not edit by hand, run `rake themes:build`.
+  TEXT
+
+  DEFAULT_THEME = "neutral"
+
+  TOKENS_BEGIN = "/* shadcn-tokens:begin"
+  TOKENS_END = "/* shadcn-tokens:end */"
+
+  desc "Regenerate the theme stylesheet, the default tokens and the Ruby registry"
+  task :build do
+    themes = JSON.parse(DATA.read)
+
+    ROOT.join("app/assets/stylesheets/shadcn-themes.css").write(stylesheet(themes))
+    ROOT.join("lib/shadcn_view_component/themes.rb").write(registry(themes))
+    write_default_tokens(themes)
+
+    puts "Wrote #{themes.size} themes."
+  end
+
+  # `:root` and `.dark` in shadcn.css are the default palette, so they are
+  # generated from the same JSON as everything else. Hand-maintaining them let
+  # them drift: the default look was not actually `theme-neutral`.
+  def self.write_default_tokens(themes)
+    path = ROOT.join("app/assets/stylesheets/shadcn.css")
+    css = path.read
+    first = css.index(TOKENS_BEGIN)
+    last = css.index(TOKENS_END)
+
+    raise "shadcn.css is missing its shadcn-tokens markers" unless first && last
+
+    path.write(css[0...first] + default_tokens(themes) + css[(last + TOKENS_END.length)..])
+  end
+
+  def self.default_tokens(themes)
+    theme = themes.find { |candidate| candidate["name"] == DEFAULT_THEME }
+    raise "no #{DEFAULT_THEME} theme in #{DATA}" unless theme
+
+    <<~CSS.chomp
+      #{TOKENS_BEGIN} — generated by `rake themes:build`, do not edit.
+       * The default palette is #{DEFAULT_THEME}; `.theme-*` in shadcn-themes.css
+       * overrides these. */
+
+      #{css_block(":root", theme.dig("cssVars", "light"))}
+
+      #{css_block(".dark", theme.dig("cssVars", "dark"))}
+
+      #{TOKENS_END}
+    CSS
+  end
+
+  def self.stylesheet(themes)
+    body = themes.flat_map do |theme|
+      name = theme["name"]
+
+      [
+        "/* #{theme['title']} */",
+        css_block(
+          [ ".theme-#{name}", %([data-shadcn-theme="#{name}"]) ],
+          theme.dig("cssVars", "light")
+        ),
+        css_block(
+          [ ".dark .theme-#{name}", %(.dark[data-shadcn-theme="#{name}"]) ],
+          theme.dig("cssVars", "dark")
+        )
+      ]
+    end
+
+    <<~CSS
+      /*
+       * shadcn/ui colour themes.
+       *
+      #{BANNER.strip.gsub(/^/, " * ")}
+       *
+       * Each theme is a `.theme-<name>` class holding the same token set as
+       * `:root`, plus a `.dark .theme-<name>` override — the way shadcn's own
+       * site swaps palettes. Put the class on <body>, or on any container to
+       * scope a palette to part of the page: custom properties inherit, so
+       * everything inside picks them up.
+       *
+       * The `[data-shadcn-theme]` twin exists so the inline no-flash script can
+       * set the palette on <html> before <body> is parsed.
+       *
+       * Import it after `shadcn.css`. These selectors have the same specificity
+       * as `:root`, so source order is what decides.
+       */
+
+      #{body.join("\n\n")}
+    CSS
+  end
+
+  def self.css_block(selectors, vars)
+    declarations = vars.map { |name, value| "  --#{name}: #{value};" }
+    "#{Array(selectors).join(",\n")} {\n#{declarations.join("\n")}\n}"
+  end
+
+  def self.registry(themes)
+    entries = themes.map { |theme| registry_entry(theme) }
+
+    <<~RUBY
+      # frozen_string_literal: true
+
+      module ShadcnViewComponent
+        # The shadcn/ui colour themes.
+        #
+      #{BANNER.strip.gsub(/^/, "  # ")}
+        #
+        # Every entry carries the token values for both modes. The matching CSS
+        # lives in `app/assets/stylesheets/shadcn-themes.css`; this registry is
+        # what `Shadcn::ThemeSelector::Component` reads to build its list.
+        module Themes
+          ALL = [
+      #{entries.join(",\n")}
+          ].freeze
+
+          # The neutral greys shadcn offers as a project's base colour.
+          BASE_COLORS = ALL.select { |theme| theme[:base_color] }.freeze
+
+          # The accent palettes.
+          ACCENTS = ALL.reject { |theme| theme[:base_color] }.freeze
+
+          DEFAULT = "neutral"
+
+          class << self
+            def names = ALL.map { |theme| theme[:name] }
+
+            def find(name) = ALL.find { |theme| theme[:name] == name.to_s }
+
+            def exists?(name) = names.include?(name.to_s)
+          end
+        end
+      end
+    RUBY
+  end
+
+  def self.registry_entry(theme)
+    <<~RUBY.chomp.gsub(/^/, "      ")
+      {
+        name: "#{theme['name']}",
+        title: "#{theme['title']}",
+        base_color: #{BASE_COLORS.include?(theme['name'])},
+        light: {
+      #{ruby_hash(theme.dig('cssVars', 'light'))}
+        }.freeze,
+        dark: {
+      #{ruby_hash(theme.dig('cssVars', 'dark'))}
+        }.freeze
+      }.freeze
+    RUBY
+  end
+
+  # Four spaces here plus the six `registry_entry` adds lands the pairs one
+  # level inside their `light:` / `dark:` key.
+  def self.ruby_hash(vars)
+    vars.map { |name, value| %(    "#{name}" => "#{value}") }.join(",\n")
+  end
+end