#!/usr/bin/python
# coding: utf-8
""" bind.py
.cssと.jsを読み込み、.htmlに流し込みインライン化した.htmlを生成するスクリプト
以下のファイル構造を想定：

/app
+ /dist
 + index.html 事前に作成済のHTMLファイル。ここにスタイルとスクリプトを流し込む
+ /src
 + style.css  流し込むスタイルシート。webpackでlessなどから生成されていることを想定。  
 + bundle.js  流し込むスクリプトファイル。webpackでreactなどから生成されていることを想定。
 + index.html 生成するhtmlファイル。
"""
import os,re

# 各フォルダへの絶対パスを取得
src_folder_path = os.getcwd() + '/src'
dist_folder_path = os.getcwd() + '/dist'

# 絶対パスによる各ファイルへのパスを取得
# スタイルとスクリプトはwebpack後のものを参照するためdist/から
# htmlはバンドル前なのでsrc/のものを参照し、dist/に出力する
css_file_path = dist_folder_path + '/style.css'
js_file_path = dist_folder_path + '/bundle.js'
html_file_path = src_folder_path + '/index.html'
output_file_path = dist_folder_path + '/index.html'


def replaceTag(pattern, tag, html):
  """
  html内でpatternに一致する箇所をtagと置き換える。
  re.subはスクリプトに含まれる改行コード(\n)を勝手に解釈し改行に変換してしまうので
  使用していない。

  Args:
    pattern (string) tagと置き換えるHTML内のDOM要素に一致する正規表現
    tag     (string) 流し込むスタイル/スクリプトを含むDOM要素
    html    (string) 流し込む対象となるHTMLファイルの中身
  """
  match_obj = re.search(pattern, html)
  [start, end] = match_obj.span()
  html = html[:start] + tag + html[end:]
  return html

if __name__ == '__main__':
  # style, script, htmlを読み取る。style, scriptはタグで挟んでおく
  with open(css_file_path, encoding='utf_8') as f:
    style = f.read()
    style_tag = '<style>' + style + '</style>'

  with open(js_file_path, encoding='utf_8') as f:
    script = f.read()
    script_tag = '<script>' + script + '</script>'

  with open(html_file_path, encoding='utf_8') as f:
    html = f.read()

  # <link rel="stylesheet">をstyle.cssをインライン化したstyle要素で置換
  pattern = r'<link rel="stylesheet".+?>'
  html = replaceTag(pattern, style_tag, html)
  # <script></script>をbundle.jsをインライン化したscript要素で置換
  pattern = r'<script.+?/script>'
  html = replaceTag(pattern, script_tag, html)

  # インライン化したHTMLを書き出す
  with open(output_file_path, encoding='utf_8', mode='w') as f:
    f.write(html)

//省略
"scripts": {
  //省略
  "build": "webpack & python ./bind.py & clasp push;"
},
//省略