stop using prettier only to indent our html
it weighted *a lot* just for that. now we use a tiny function that only break lines between html tags, not as good but the JS weight gain is huge
This commit is contained in:
@@ -8,8 +8,6 @@ import {
|
|||||||
HomepageEmailOrProconnect,
|
HomepageEmailOrProconnect,
|
||||||
HomepageProconnect,
|
HomepageProconnect,
|
||||||
} from "@gouvfr-lasuite/integration"
|
} from "@gouvfr-lasuite/integration"
|
||||||
import * as prettier from "prettier/standalone"
|
|
||||||
import prettierHtml from "prettier/plugins/html"
|
|
||||||
|
|
||||||
const defaultFormData = {
|
const defaultFormData = {
|
||||||
serviceId: "",
|
serviceId: "",
|
||||||
@@ -53,12 +51,6 @@ const homepageTypes = {
|
|||||||
|
|
||||||
export default function HomepageGenerator() {
|
export default function HomepageGenerator() {
|
||||||
const [codeData, setCodeData] = useState<any>(defaultFormData)
|
const [codeData, setCodeData] = useState<any>(defaultFormData)
|
||||||
const [htmlMarkup, setHtmlMarkup] = useState<string>("")
|
|
||||||
useEffect(() => {
|
|
||||||
getHTMLMarkup(codeData).then((html) => {
|
|
||||||
setHtmlMarkup(html)
|
|
||||||
})
|
|
||||||
}, [codeData])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: "1.5rem 0" }}>
|
<div style={{ margin: "1.5rem 0" }}>
|
||||||
@@ -154,7 +146,7 @@ export default function HomepageGenerator() {
|
|||||||
<div>
|
<div>
|
||||||
<h2 style={{ marginTop: "1.5em" }}>Code HTML correspondant</h2>
|
<h2 style={{ marginTop: "1.5em" }}>Code HTML correspondant</h2>
|
||||||
<Code language="html" fixedHeight>
|
<Code language="html" fixedHeight>
|
||||||
{htmlMarkup}
|
{getHTMLMarkup(codeData)}
|
||||||
</Code>
|
</Code>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
@@ -226,12 +218,31 @@ const getHTMLMarkup = (codeData: any) => {
|
|||||||
</Homepage>
|
</Homepage>
|
||||||
)
|
)
|
||||||
const markup = renderToStaticMarkup(Component)
|
const markup = renderToStaticMarkup(Component)
|
||||||
return prettier.format(markup, {
|
if (typeof window === "undefined") {
|
||||||
parser: "html",
|
return markup
|
||||||
plugins: [prettierHtml],
|
}
|
||||||
printWidth: 100,
|
const div = document.createElement("div")
|
||||||
tabWidth: 4,
|
div.innerHTML = markup
|
||||||
bracketSameLine: false,
|
return reIndent(div, 0).innerHTML.trim()
|
||||||
htmlWhitespaceSensitivity: "ignore",
|
}
|
||||||
})
|
|
||||||
|
// https://stackoverflow.com/a/26361620/257559
|
||||||
|
const reIndent = (node: Element, level: number) => {
|
||||||
|
const indentBefore = new Array(level++ + 1).join(" ")
|
||||||
|
const indentAfter = new Array(level - 1).join(" ")
|
||||||
|
let textNode: Text
|
||||||
|
|
||||||
|
for (let i = 0; i < node.children.length; i++) {
|
||||||
|
textNode = document.createTextNode("\n" + indentBefore)
|
||||||
|
node.insertBefore(textNode, node.children[i])
|
||||||
|
|
||||||
|
reIndent(node.children[i], level)
|
||||||
|
|
||||||
|
if (node.lastElementChild == node.children[i]) {
|
||||||
|
textNode = document.createTextNode("\n" + indentAfter)
|
||||||
|
node.appendChild(textNode)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return node
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user