Class: Autotype::HtmlDocument

Inherits:
Object
  • Object
show all
Defined in:
lib/autotype/engine.rb

Instance Method Summary collapse

Constructor Details

#initialize(reports, analyzed_files: reports.map(&:first).uniq, parse_errors: {}) ⇒ HtmlDocument

Returns a new instance of HtmlDocument.



3709
3710
3711
3712
3713
3714
3715
# File 'lib/autotype/engine.rb', line 3709

def initialize(reports, analyzed_files: reports.map(&:first).uniq, parse_errors: {})
  @reports = reports
  @grouped = reports.group_by(&:first)
  @analyzed_files = analyzed_files
  @parse_errors = parse_errors
  @helper_registry = reports.first&.last&.helper_registry
end

Instance Method Details

#renderObject



3717
3718
3719
3720
3721
3722
3723
3724
3725
3726
3727
3728
3729
3730
3731
3732
3733
3734
3735
3736
3737
3738
3739
3740
3741
3742
3743
3744
3745
3746
3747
3748
3749
3750
3751
3752
3753
3754
3755
3756
3757
3758
3759
3760
3761
3762
3763
3764
3765
3766
3767
3768
3769
3770
3771
3772
3773
3774
3775
3776
3777
3778
3779
3780
3781
3782
3783
3784
3785
3786
3787
3788
3789
3790
3791
3792
3793
3794
3795
3796
3797
3798
3799
3800
3801
3802
3803
3804
3805
3806
3807
3808
3809
3810
3811
3812
3813
3814
3815
3816
3817
3818
3819
3820
3821
3822
3823
3824
3825
3826
3827
3828
3829
3830
3831
3832
3833
3834
3835
3836
3837
3838
3839
3840
3841
3842
3843
3844
3845
3846
3847
3848
3849
3850
3851
3852
3853
3854
3855
3856
3857
3858
3859
3860
3861
3862
3863
3864
3865
3866
3867
3868
3869
3870
3871
3872
3873
3874
3875
3876
3877
3878
3879
3880
# File 'lib/autotype/engine.rb', line 3717

def render
  method_count = @reports.length
  constraint_count = @reports.sum { |_, renderer| renderer.as_json.fetch(:send_constraint_count) }
  generated_at = Time.now.utc.strftime("%Y-%m-%d %H:%M UTC")

  <<~HTML
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Autotype inferred types</title>
      <style>
        :root {
          color-scheme: light dark;
          --bg: #111318;
          --panel: #181b22;
          --panel-2: #20242d;
          --text: #e8eaf0;
          --muted: #9ba3b4;
          --line: #343a46;
          --accent: #78a9ff;
          --capability: #b6e3a8;
          --code: #f1d18a;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
          margin: 0;
          background: var(--bg);
          color: var(--text);
          font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        a { color: var(--accent); text-decoration: none; }
        a:hover { text-decoration: underline; }
        code {
          font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          overflow-wrap: anywhere;
        }
        .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
        aside {
          position: sticky;
          top: 0;
          height: 100vh;
          overflow: auto;
          border-right: 1px solid var(--line);
          background: var(--panel);
          padding: 20px 16px;
        }
        main { width: min(1100px, 100%); padding: 32px 42px 80px; }
        h1 { margin: 0 0 6px; font-size: 24px; }
        h2 { margin: 42px 0 12px; font-size: 18px; scroll-margin-top: 20px; }
        h3 { margin: 0; font-size: 14px; font-weight: 600; }
        .muted { color: var(--muted); }
        .summary { display: flex; gap: 24px; margin: 18px 0 28px; }
        .summary strong { display: block; font-size: 20px; }
        .summary span { color: var(--muted); font-size: 12px; }
        #search {
          width: 100%;
          margin: 18px 0;
          padding: 9px 10px;
          border: 1px solid var(--line);
          border-radius: 6px;
          background: var(--panel-2);
          color: var(--text);
        }
        nav ul { margin: 0; padding: 0; list-style: none; }
        nav li { margin: 5px 0; }
        nav a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .method {
          margin: 10px 0;
          border: 1px solid var(--line);
          border-radius: 7px;
          background: var(--panel);
          overflow: hidden;
        }
        .method header { padding: 12px 15px; border-bottom: 1px solid var(--line); }
        .line { color: var(--muted); font-size: 12px; }
        .signature {
          display: block;
          padding: 13px 15px;
          color: var(--code);
          background: var(--panel-2);
          white-space: pre-wrap;
          overflow-wrap: anywhere;
        }
        .helpers { padding: 11px 15px 4px; border-top: 1px solid var(--line); }
        .helpers h4 { margin: 0 0 7px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
        .helper { display: block; padding: 5px 0 8px; }
        .helper-name { display: block; color: var(--accent); font-weight: 700; overflow-wrap: anywhere; }
        .helper-definition { display: block; padding-top: 2px; color: var(--capability); overflow-wrap: anywhere; }
        .universal-types { margin: 32px 0 44px; }
        .universal-type { padding: 10px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
        .universal-type code { display: block; }
        .uses { color: var(--muted); font-size: 12px; }
        .constraints { margin: 0; padding: 10px 15px 13px 34px; }
        .constraints li { padding: 2px 0; color: var(--capability); }
        .empty { padding: 10px 15px; color: var(--muted); }
        .warnings { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 7px; }
        .warnings h2 { margin: 0 0 8px; font-size: 15px; }
        .warnings ul { margin: 0; padding-left: 20px; }
        .hidden { display: none; }
        @media (prefers-color-scheme: light) {
          :root {
            --bg: #f7f8fa;
            --panel: #fff;
            --panel-2: #f1f3f6;
            --text: #20242d;
            --muted: #677084;
            --line: #d9dde5;
            --accent: #245fb5;
            --capability: #276738;
            --code: #754f00;
          }
        }
        @media (max-width: 760px) {
          .layout { display: block; }
          aside { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
          main { padding: 24px 18px 60px; }
        }
      </style>
    </head>
    <body>
      <div class="layout">
        <aside>
          <h1>Inferred types</h1>
          <div class="muted">Autotype · #{escape(generated_at)}</div>
          <input id="search" type="search" placeholder="Filter methods or types…" aria-label="Filter methods or types">
          <nav aria-label="Source files">
            <ul>#{navigation}</ul>
          </nav>
        </aside>
        <main>
          <h1>Syntax-less Ruby typedoc</h1>
          <p class="muted">Intraprocedural structural inference from Ruby message sends. Signatures are generalized at each method boundary.</p>
          <div class="summary">
            <div><strong>#{@analyzed_files.length}</strong><span>files analyzed</span></div>
            <div><strong>#{@grouped.length}</strong><span>files with methods</span></div>
            <div><strong>#{method_count}</strong><span>methods</span></div>
            <div><strong>#{constraint_count}</strong><span>send constraints</span></div>
            <div><strong>#{universal_definitions.length}</strong><span>universal types</span></div>
          </div>
          #{parse_failure_section}
          #{universal_type_section}
          #{sections}
        </main>
      </div>
      <script>
        const search = document.querySelector("#search");
        search.addEventListener("input", () => {
          const query = search.value.trim().toLowerCase();
          document.querySelectorAll(".method").forEach((element) => {
            element.classList.toggle("hidden", query && !element.dataset.search.includes(query));
          });
          document.querySelectorAll(".file-section").forEach((section) => {
            const visible = section.querySelector(".method:not(.hidden)");
            section.classList.toggle("hidden", query && !visible);
          });
        });
      </script>
    </body>
    </html>
  HTML
end