markdown 创建js依赖图

Posted 2021-05-06

require 'json'

DOT_GRAPH = "digraph js_dependancy {"
DOT_BASE_SETTINGS = <<~EOF.freeze
graph [
  charset = "UTF-8";
  label = "js dependancy",
  labelloc = "t",
  labeljust = "c",
  bgcolor = "#343434",
  fontcolor = white,
  fontsize = 12,
  style = "filled",
  rankdir = TB,
  margin = 0.2,
  splines = spline,
  ranksep = 1.0,
  nodesep = 0.9,
  layout = "circo"
];

node [
  colorscheme = "rdylgn11"
  style = "solid,filled",
  fontsize = 9,
  fontcolor = 6,
  fontname = "Migu 1M",
  color = 7,
  fixedsize = false,
];

edge [
  style = solid,
  fontsize = 9,
  fontcolor = white,
  fontname = "Migu 1M",
  color = white,
  labelfloat = true,
  labeldistance = 2.5,
  labelangle = 70
];
EOF

class String
  def with_indent num
    gsub /^/, ' ' * num
  end
end

def is_html? str
  str.match? /\.html/
end

def node data
  node_name = data['filePath']
  shape = is_html?(node_name) ? 'box' : 'ellipse'

  [node_name, shape]
end

def edge match
  node_name = match['filePath']
  shape = match["isDir"] ? 'Msquare' : 'ellipse'

  [node_name, shape]
end

def dot_nodes_and_edges_settings json, src, dst
  nodes = []
  results = []
  results << "// TIMESTAMP: #{json['timestanp']}"
  json['data'].each do |data|
    p_node_name, p_shape = node(data)

    data['matches'].each do |match|
      c_node_name, c_shape = edge(match)

      if src.include?("all") || dst.any? { |d| c_node_name.match? "#{d}$" }
        unless nodes.include? p_node_name
          results << %Q("#{p_node_name}" [shape = #{p_shape}, fillcolor = 11])
          nodes << p_node_name
        end
      elsif src.any? { |s| p_node_name.match? "#{s}$" }
        unless nodes.include? p_node_name
          results << %Q("#{p_node_name}" [shape = #{p_shape}, fillcolor = blue])
          nodes << p_node_name
        end
      end

      if dst.include?("all") || src.any? { |s| p_node_name.match? "#{s}$" }
        unless nodes.include? c_node_name
          results << %Q("#{c_node_name}" [shape = #{c_shape}, fillcolor = 11])
          nodes << c_node_name
        end
        results << %Q("#{p_node_name}" -> "#{c_node_name}")
      elsif dst.any? { |d| c_node_name.match? "#{d}$" }
        unless nodes.include? c_node_name
          results << %Q("#{c_node_name}" [shape = #{c_shape}, fillcolor = 2])
          nodes << c_node_name
        end
        results << %Q("#{p_node_name}" -> "#{c_node_name}")
      end
    end
  end

  results.join("\n")
end

def src_and_dst array
  src = []
  dst = []
  array.each do |str|
    if str =~ /\Asrc=/
      src = str.match(/\Asrc=(.*)/)[1].split(',')
    elsif str =~ /\Adst=/
      dst = str.match(/\Adst=(.*)/)[1].split(',')
    end
  end

  [src, dst]
end

src, dst = src_and_dst ARGV

json = JSON.parse(STDIN.read)

puts DOT_GRAPH.with_indent 0
puts DOT_BASE_SETTINGS.with_indent 2
puts dot_nodes_and_edges_settings(json, src, dst).with_indent 2
puts "}".with_indent 0

require 'json'
require 'pathname'

TIMESTAMP = '2017-12-12 c31b1308c'.freeze
FILE_PATH1 = './search1.json'.freeze
FILE_PATH2 = './search2.json'.freeze
JS_ASSETS_PATH = 'app/assets/javascripts'.freeze

# "    = javascript_include_tag 'foo/application.js'" => 'foo/application'
def extract_file_path1 str
  str
    .match(/javascript_include_tag ('.+'|".+"|:.+)/)[1]
    .gsub(/"|'|:/, '')
    .gsub(/\.js|\.es6/, '')
end

# "//= require_tree ./creator_audition/templates" => './creator_audition/templates'
def extract_file_path2_by_dir str
  str.match(%r%//= require_tree (.+)%)[1]
end

# "//= require jquery.fs.boxer" => 'jquery.fs.boxer'
def extract_file_path2_by_file str
  str
    .match(%r%//= require (.+)%)[1]
    .gsub(/\.js|\.es6/, '')
end

# 'foo/hoge.js.es6' => 'hoge'
def extract_file_name str
  File.basename(str).gsub(/\.js|\.es6/, '')
end

project_name = ARGV[0]

result = {
  timestanp: TIMESTAMP,
  data: [],
}

File.open FILE_PATH1 do |f|
  result[:data] += JSON.load(f).map do |data|
    file_path = data['filePath'].gsub %r|.*/#{project_name}/|, ''
    file_name = extract_file_name file_path
    matches = data['matches'].map do |match|
      m_file_path = File.join(JS_ASSETS_PATH, extract_file_path1(match))
      m_file_name = extract_file_name m_file_path
      {
        isDir: false,
        filePath: m_file_path,
        fileName: m_file_name,
      }
    end

    {
      filePath: file_path,
      fileName: file_name,
      matches: matches,
    }
  end
end

File.open FILE_PATH2 do |f|
  result[:data] += JSON.load(f).map do |data|
    file_path = data['filePath'].gsub(%r|.*/#{project_name}/|, '').gsub(/\.js|\.es6/, '')
    dir_pathname = Pathname(file_path).dirname
    file_name = extract_file_name file_path
    matches = data['matches'].map do |match|
      if match =~ /require_self/
        next
      elsif match =~ /require_tree/
        is_dir = true
        m_file_path = extract_file_path2_by_dir match
        m_file_path = Pathname("#{dir_pathname}/#{m_file_path}").cleanpath.to_s if m_file_path =~ /^\./
      elsif match =~ /require/
        is_dir = false
        m_file_path = extract_file_path2_by_file match
        m_file_path = Pathname("#{dir_pathname}/#{m_file_path}").cleanpath.to_s if m_file_path =~ /^\./
      end
      m_file_name = extract_file_name m_file_path
      {
        isDir: is_dir,
        filePath: m_file_path,
        fileName: m_file_name,
      }
    end.compact

    {
      filePath: file_path,
      fileName: file_name,
      matches: matches,
    }
  end
end

puts JSON.pretty_generate(result)

# Usage

## 準備

```sh
$ brew install graphviz
```

## json作成

atomで以下でプロジェクト検索

```
word: = javascript_include_tag
File/directory pattern: *.html*
```

コンソールを開いて以下を実行。

```js
pack = atom.packages.getActivePackage('find-and-replace');
results = pack.mainModule.resultsModel.results;
hoge = Object.values(results).map((result) => { return {filePath: result.filePath, matches: result.matches.map((match) => { return match.lineText })} });
copy(hoge); // => `search1.json`
```

同じく、atomで以下でプロジェクト検索

```
word: //= require

File/directory pattern: *.js*
```

コンソールを開いて以下を実行。

```js
pack = atom.packages.getActivePackage('find-and-replace');
results = pack.mainModule.resultsModel.results;
hoge = Object.values(results).map((result) => { return {filePath: result.filePath, matches: result.matches.map((match) => { return match.lineText })} });
copy(hoge); // => `search2.json`
```

## グラフ作成

```sh
$ export PROJECT_NAME=hoge
$ export SRC=""
$ export DST="moment"
$ ruby convert_search.rb $PROJECT_NAME | ruby create_dot.rb src=$SRC dst=$DST | dot -Tpng -o js_dependancy.png && open js_dependancy.png
```

**パスが違う同名のファイルには対応できていないので注意** -> ある程度対応しました。