// rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import postcss from 'rollup-plugin-postcss'
import staticSite from 'rollup-plugin-static-site'
import { uglify } from 'rollup-plugin-uglify'


export default {
  input: "src/js/main.js",
  output: {
    file: "dist/bundle.js",
    format: "iife"
  },
  plugins: [
     babel({
      exclude: "node_modules/**" // only transpile our source code
    })
    resolve({
      browser: true, // axios 같이 서버 코드랑 브라우저 코드가 다 들어있는 모듈일때 package.json 보고 브라우저 관련 코드만 가져온다.
    }),
    commonjs(),
    postcss(), // css 도 번들 포함
    uglify(), 
    staticSite({
      dir: `dist/${context}`,
      filename: 'index.html',
      template: { path: `src/public/index.html` },
    }),
    
  ]
};

"scripts": {
    "start": "rollup -c ./rollup.config.dev.js --watch"
  },

import common from "./rollup.config";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import * as path from "path";

export default {
  input: "src/js/main.js",
  output: {
    file: "dist/bundle.dev.js",
    format: "iife"
  },
  plugins: [
    ...common.plugins,
    serve({
      open: true,
      contentBase: path.join(process.cwd(), "/dist"),
      host: "localhost",
      port: 9000
    }),
    livereload("dist")
  ]
};

npm install --save-dev @babel/preset-env

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `(${this.x}, ${this.y})`;
    }
}

npm install core-js@3 --save

# or

npm install core-js@2 --save

# and

npm istall regenerator-runtime --save

import "core-js/es/array";
import "core-js/proposals/math-extensions";

// first file:
var set = new Set([1, 2, 3]);

// second file:
var array = Array.of(1, 2, 3);

require("core-js/modules/web.dom.iterable");
require("core-js/modules/es6.array.iterator");
require("core-js/modules/es6.object.to-string");
require("core-js/modules/es6.string.iterator");
require("core-js/modules/es6.set");
// first file:
var set = new Set([1, 2, 3]);

require("core-js/modules/es6.array.of");
// second file:
var array = Array.of(1, 2, 3);

{
  "presets": [[
    "@babel/preset-env",
    {
      "targets": {
        "ie" : "10"
      },
      "useBuiltIns": "entry",
      "corejs": 3
    }
  ]]
}

import common from "./rollup.config";
import serve from "rollup-plugin-serve-proxy";
import livereload from "rollup-plugin-livereload";
import htmlTemplate from "rollup-plugin-generate-html-template";
import * as path from "path";

import setting from "./setting.json";
import Proxy from "./proxy/Proxy";

const proxy = new Proxy({
  targetHost: setting.target_host,
  port: setting.port,
  bundleJs: setting.bundle_js
});
proxy.listen(); // proxy 서버를 띄웁니다.

export default {
  input: common.input,
  output: {
    file: "dist/bundle.dev.js",
    format: "iife"
  },
  plugins: [
    ...common.plugins,
    htmlTemplate({
      template: "index.html",
      target: "dist/index.html"
    }),
    serve({
      open: true,
      contentBase: path.join(process.cwd(), "/dist"),
      host: "localhost",
      port: 9000,
      proxy: {
        dev: "http://localhost:1234" // /dev url로 들어오는 요청은 localhost:1234 서버가 대신 응답해 줍니다.
      }
    }),
    livereload("dist")
  ]
};

const getHtml = async (host, path) => {
  try {
    return await axios.get(`${host}${path}`);
  } catch (error) {
    console.error(error);
  }
};

const url = req.url
getHtml(this._targetHost, url).then(... )

{
  "target_host" : "http://merlin.com/test",
  "bundle_js" : "bundle.dev.js",
  "port" : 1234
}

// DevController.js
const axios = require("axios");
const cheerio = require("cheerio");

const HTTP_REG = /^((http(s?))\:\/\/)/;
const ROOT_REG = /^(\/)/;
const REL_REG = /^(\.(\.?))/;
const isHttpUrl = url => {
  return HTTP_REG.test(url);
};

const isRootUrl = url => {
  return ROOT_REG.test(url);
};

const isRelativeUrl = url => {
  return REL_REG.test(url);
};

const getHtml = async (host, path) => {
  try {
    return await axios.get(`${host}${path}`);
  } catch (error) {
    console.error(error);
  }
};

const stringifyScriptTag = src => {
  return `<script type="text/javascript" src="${src}"></script>`;
};

// ./css/path/aaa
// ../css/path/ccc
// /insure-2019/apt/css/path/bbb
// css/path/aaa => ./css/path/aaa

const convertAbsolutePath = (hostUrl, pathname, attrPath) => {
  if (isRootUrl(attrPath)) {
    return `${hostUrl.substring(0, hostUrl.lastIndexOf("/"))}${attrPath}`;
  }

  if (isRelativeUrl(attrPath)) {
    return `${hostUrl}${pathname}/${attrPath}`;
  }

  return `${hostUrl}/${attrPath}`;
};

const convertCssPath = ($, host, pathname) => {
  const $link = $("link");

  $link.each((index, cssLink) => {
    const $cssLink = $(cssLink);
    const cssHref = $cssLink.attr("href");

    if (cssHref && !isHttpUrl(cssHref)) {
      // 경로가 있고 http로 시작하지 않는 경로만 바꿔준다.
      const absolutePath = convertAbsolutePath(host, pathname, cssHref);
      $cssLink.attr("href", absolutePath);
    }
  });
};

const convertScriptPath = ($, host, pathname) => {
  const $script = $("script");
  const scriptSrc = $script.attr("src");

  if (scriptSrc && !isHttpUrl(scriptSrc)) {
    $script.each((index, scriptLink) => {
      const $scriptLink = $(scriptLink);
      const absolutePath = convertAbsolutePath(host, pathname, scriptSrc);
      $scriptLink.attr("src", absolutePath);
    });
  }
};

const convertImagePath = ($, host, pathname) => {
  const $img = $("img");
  const imgSrc = $img.attr("src");

  if (imgSrc && !isHttpUrl(imgSrc)) {
    $img.each((index, imgLink) => {
      const $imgLink = $(imgLink);
      const absolutePath = convertAbsolutePath(host, pathname, imgSrc);
      $imgLink.attr("src", absolutePath);
    });
  }
};

const appendBundleScript = ($, jsfile) => {
  $("body").append(stringifyScriptTag(`/${jsfile}`));
};

class DevController {
  constructor({ targetHost, bundleJs }) {
    this._targetHost = targetHost;
    this._bundleJs = bundleJs;
  }

  getCrawlingHtml(req, res) {
    const url = req.url;
    const pathname = url.substring(0, url.lastIndexOf("/"));

    getHtml(this._targetHost, url)
      .then(html => {
        const $ = cheerio.load(html.data);
        convertCssPath($, this._targetHost, pathname);
        convertScriptPath($, this._targetHost, pathname);
        convertImagePath($, this._targetHost, pathname);
        appendBundleScript($, this._bundleJs);

        return $.html();
      })
      .then(data => res.send(data));
  }
}

export default DevController;

// devRouter.js
const express = require("express");
const devRouter = express.Router();

export function devRouting(app, controller) {
  app.use("/dev", devRouter);

  devRouter.get("/*", (req, res, nex) => {
    controller.getCrawlingHtml(req, res);
  });
}

// Proxy.js
// require
const express = require("express");
const app = express();
import DevController from "./DevController";
import { devRouting } from "./devRouter";

class Proxy {
  constructor({ targetHost, port = 1234, bundleJs }) {
    this._targetHost = targetHost;
    this._port = port;
    this._bundleJs = bundleJs;
    this._devController = new DevController({ targetHost, bundleJs });
    this.routing();
  }

  routing() {
    devRouting(app, this._devController);
  }

  listen() {
    app.listen(this._port, () => {
      console.log(`${this._port}번 port에 proxy server를 띄웠습니다.`);
    });
  }
}

export default Proxy;