refactor: auto root

This commit is contained in:
cha0s 2024-01-10 05:26:42 -06:00
parent 0039fb0f59
commit c001be6647
4 changed files with 16 additions and 19 deletions

View File

@ -20,14 +20,14 @@ class Ssr extends Transform {
async _transform(chunk, encoding, done) {
const string = chunk.toString('utf8');
const {appMountId} = this.flecks.get('@flecks/web/server');
if (-1 !== string.indexOf(`<div id="${appMountId}"></div>`)) {
if (-1 !== string.indexOf(`<div id="${appMountId}">`)) {
try {
const renderedRoot = ReactDOMServer.renderToString(
React.createElement(await root(this.flecks, this.req)),
);
const rendered = string.replaceAll(
`<div id="${appMountId}"></div>`,
`<div id="${appMountId}">${renderedRoot}</div>`,
`<div id="${appMountId}">`,
`<div id="${appMountId}">${renderedRoot}`,
);
this.push(rendered);
}

View File

@ -63,8 +63,8 @@ const {version} = require('@flecks/web/package.json');
try {
await Promise.all(flecks.invokeFlat('@flecks/core.starting'));
await flecks.invokeSequentialAsync('@flecks/web/client.up');
const appMountId = `#${config['@flecks/web/client'].appMountId}`;
window.document.querySelector(appMountId).style.display = 'block';
const appMountContainerId = `#${config['@flecks/web/client'].appMountId}-container`;
window.document.querySelector(appMountContainerId).style.display = 'block';
debug('up!');
}
catch (error) {

View File

@ -11,7 +11,6 @@
<% }); %>
</head>
<body>
<div id="<%= htmlWebpackPlugin.options.appMountId %>"></div>
<%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>

View File

@ -45,20 +45,18 @@ class InlineConfig extends Transform {
async _transform(chunk, encoding, done) {
const string = chunk.toString('utf8');
const {appMountId} = this.flecks.get('@flecks/web/server');
if (-1 !== string.indexOf(`<div id="${appMountId}"></div>`)) {
const rendered = string.replaceAll(
const rendered = string.replaceAll(
'<body>',
[
'<body>',
`<div id="${appMountId}-container">`,
`<script>window.document.querySelector('#${appMountId}-container').style.display = 'none'</script>`,
`<script>${await configSource(this.flecks, this.req)}</script>`,
`<div id="${appMountId}"></div>`,
[
`<div id="${appMountId}"></div>`,
`<script>window.document.querySelector('#${appMountId}').style.display = 'none'</script>`,
`<script>${await configSource(this.flecks, this.req)}</script>`,
].join(''),
);
this.push(rendered);
}
else {
this.push(string);
}
'</div>',
].join(''),
);
this.push(rendered);
done();
}