cha0s/flecks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: auto root

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react/src/ssr.js
View File

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

4
packages/web/src/server/build/entry.js
View File

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

1
packages/web/src/server/build/template.ejs
View File

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

24
packages/web/src/server/config.js
View File

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