Chevalier
/
chat-ts-sdk


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							/* eslint-disable no-use-before-define */
// 待渲染完整的页面
// 这里的页面建议以最简形式,如果需要复杂的头设定使用react-helmet组件

/**
 * @function 生成同构直出的HTML界面模板
 * @param html
 * @param initialState
 * @param scripts
 * @param styles
 * @return {string}
 */
export default (html, initialState = {}, scripts = [], styles = []) => {
  return `
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        ${styleMapper(styles)}
      </head>
      <body>
        <div id="root">${html}</div>        
      </body>
      <script>
        window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
      </script>
      ${scriptMapper(scripts)}
    </html>
  `;
};

/**
 * @function 将输入的样式文件路径转化为Link标签
 * @param styles
 * @return {*}
 */
const styleMapper = styles => {
  return styles.map(style => {
    return `<link href="${style}" media="screen, projection" rel="stylesheet" type="text/css" charSet="UTF-8"/>`;
  });
};

const scriptMapper = scripts => {
  const scriptTags = [];

  for (let i = 0; i < scripts.length; i = i + 1) {
    scriptTags.push(`<script src=${scripts[i]}></script>`);
  }

  return scriptTags;
};