fixture/convert-html.js at dev · conejoRojo/fixture · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const fs = require('fs');
const files = [
  {src: 'inicio.html', dest: 'frontend/src/pages/Inicio.jsx', comp: 'Inicio'},
  {src: 'registro.html', dest: 'frontend/src/pages/Registro.jsx', comp: 'Registro'},
  {src: 'index.html', dest: 'frontend/src/pages/Dashboard.jsx', comp: 'Dashboard'},
  {src: 'torneo.html', dest: 'frontend/src/pages/Torneo.jsx', comp: 'Torneo'},
  {src: 'mi-campeon.html', dest: 'frontend/src/pages/MiCampeon.jsx', comp: 'MiCampeon'},
  {src: 'ranking.html', dest: 'frontend/src/pages/Ranking.jsx', comp: 'Ranking'}
];

files.forEach(f => {
  let content = fs.readFileSync(f.src, 'utf8');
  let match = content.match(/<div class="app-wrapper">([\s\S]*?)<\/div>\s*(?:<script|<\/body>)/) ||
              content.match(/<body>([\s\S]*?)<script/);

  let jsx = match ? match[1].trim() : content;

  // Wrap in app-wrapper if we stripped it
  if (match && match[0].includes('app-wrapper')) {
    jsx = `<div className="app-wrapper">\n${jsx}\n</div>`;
  }

  // Quick fixes for JSX
  jsx = jsx
    .replace(/class=/g, 'className=')
    .replace(/for=/g, 'htmlFor=')
    .replace(/<img(.*?)>/gi, (m, c) =>  c.endsWith('/') ? m : `<img${c} />`)
    .replace(/<input(.*?)>/gi, (m, c) => c.endsWith('/') ? m : `<input${c} />`)
    .replace(/<hr(.*?)>/gi, (m, c) => c.endsWith('/') ? m : `<hr${c} />`)
    .replace(/<br(.*?)>/gi, (m, c) => c.endsWith('/') ? m : `<br${c} />`)
    .replace(/style="([^"]*)"/g, (m, content) => {
        if (!content) return 'style={{}}';
        const stylesStr = content.split(';').filter(x=>x.trim()).map(rule => {
            const parts = rule.split(':');
            if(parts.length < 2) return '';
            const key = parts[0].trim().replace(/-([a-z])/g, g => g[1].toUpperCase());
            const val = parts[1].trim();
            return `${key}: '${val}'`;
        }).filter(Boolean).join(', ');
        return `style={{ ${stylesStr} }}`;
    });

  const compStr = `import React from 'react';
import { useTenantContext } from '../context/TenantContext';

export default function ${f.comp}() {
  const tenant = useTenantContext();
  return (
    <>
      ${jsx}
    </>
  );
}
`;

  fs.writeFileSync(f.dest, compStr);
  console.log('Created ' + f.dest);
});