const buildReactBody = ({ js, css, version, hyperformulaVersion, themeName, preset, sandbox, lang }) => {
const addReduxDependencies = preset.includes('redux')
? `
"redux": "^4.0.0",
"react-redux": "^7.2.4",`
: '';
const addAdvancedDependencies = preset.includes('advanced')
? `"redux": "^4.0.0",
"react-redux": "^7.2.4",
"react-colorful": "5.6.1",
"react-star-rating-component": "1.4.1",`
: '';
const tsconfig = lang === 'tsx' ? {
'tsconfig.json': {
content: `{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"noResolve": false,
"noImplicitAny": false,
"allowJs": true,
"jsx": "react",
"skipLibCheck": true,
"lib": [
"dom",
"es2020"
]
},
"exclude": [
"./node_modules/**/*"
]
}`
}
} : {};
if (sandbox === 'stackblitz') {
return {
files: {
'package.json': {
content: `{
"name": "handsontable",
"version": "1.0.0",
"description": "",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",${addReduxDependencies}${addAdvancedDependencies}
"hyperformula": "${hyperformulaVersion}",
"handsontable": "${version}",
"@handsontable/react-wrapper": "${version}"${lang === 'tsx' ? `,
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"typescript": "5.5.2"` : ''
}
},
${lang === 'tsx' ?
`"devDependencies": {
"react-scripts-ts": "latest"
},` : ''
}
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}`
},
'public/index.html': {
content: `
Handsontable
`
},
'src/styles.css': {
content: css
},
[`src/index.${lang === 'jsx' ? 'js' : 'tsx'}`]: {
content: `import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
);`
},
[`src/ExampleComponent.${lang}`]: {
content: `import React from "react";
${js}`
},
...tsconfig
}
};
}
return {
files: {
'package.json': {
content: `{
"name": "handsontable",
"version": "1.0.0",
"description": "",
"main": "src/index.${lang}",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",${addReduxDependencies}${addAdvancedDependencies}
"handsontable": "${version}",
"@handsontable/react-wrapper": "${version}"${lang === 'tsx' ? `,
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"typescript": "5.5.2"` : ''
}
},
"devDependencies": {
"react-scripts": "^5.0.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}`
},
'public/index.html': {
content: `
Handsontable
${js.includes('import { HyperFormula } from \'hyperformula\';')
? ''
: ''}
`
},
'src/styles.css': {
content: css
},
[`src/index.${lang}`]: {
content: `import * as React from "react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import ExampleComponent from "./ExampleComponent";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
);`
},
[`src/ExampleComponent.${lang}`]: {
content: `import * as React from "react";
${js.replace('import { HyperFormula } from \'hyperformula\';', '')}`
},
...tsconfig
}
};
};
module.exports = { buildReactBody };