diff --git a/packages/react/src/ssr.js b/packages/react/src/ssr.js index 6012557..5bec4bc 100644 --- a/packages/react/src/ssr.js +++ b/packages/react/src/ssr.js @@ -5,6 +5,12 @@ import ReactDOMServer from '@hot-loader/react-dom/server'; import root from './root'; +const { + NODE_ENV, +} = process.env; + +console.log({NODE_ENV}); + class Ssr extends Transform { constructor(flecks, req) { @@ -24,7 +30,10 @@ class Ssr extends Transform { this.push( string.replace( '
', - `
${output}
`, + ``, ), ); } diff --git a/packages/web/build/fleck.neutrinorc.js b/packages/web/build/fleck.neutrinorc.js index eaa22b4..9efcda7 100644 --- a/packages/web/build/fleck.neutrinorc.js +++ b/packages/web/build/fleck.neutrinorc.js @@ -7,6 +7,7 @@ module.exports = async (flecks) => { // eslint-disable-next-line import/no-extraneous-dependencies, global-require const config = await require('@flecks/fleck/server/build/fleck.neutrinorc')(flecks); config.use.push(({config}) => { + config.entryPoints.delete('server/build/entry'); config.entryPoints.delete('server/build/template'); config.entryPoints.delete('server/build/tests'); config.externals(nodeExternals({ @@ -26,6 +27,10 @@ module.exports = async (flecks) => { copy({ copyUnmodified: true, patterns: [ + { + from: 'src/server/build/entry.js', + to: 'server/build/entry.js', + }, { from: 'src/server/build/template.ejs', to: 'server/build/template.ejs', diff --git a/packages/web/package.json b/packages/web/package.json index a3dc21c..b2999d0 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -21,12 +21,12 @@ "build", "entry.js", "entry.js.map", - "import-loader.js", - "import-loader.js.map", "runtime.js", "runtime.js.map", "server.js", "server.js.map", + "server/build/entry.js", + "server/build/entry.js.map", "server/build/postcss.config.js", "server/build/postcss.config.js.map", "server/build/template.ejs", diff --git a/packages/web/src/entry.js b/packages/web/src/entry.js deleted file mode 100644 index 73b16e7..0000000 --- a/packages/web/src/entry.js +++ /dev/null @@ -1,34 +0,0 @@ -import {D, Flecks} from '@flecks/core'; - -import Progress from './progress'; - -/* global __non_webpack_import__ */ - -const {version} = require('../package.json'); - -const progress = new Progress(window); - -(async () => { - // eslint-disable-next-line no-console - console.log(`flecks client v${version} loading runtime...`); - const config = window[Symbol.for('@flecks/web.config')]; - const debug = D(config['@flecks/core']?.id || 'flecks'); - debug('loading runtime...'); - const {default: loader} = await __non_webpack_import__( - /* @preserve webpackChunkName: "flecks-runtime" */ - '@flecks/web/runtime', - ); - const runtime = await loader(progress.update.bind(progress)); - progress.finish(); - debug('starting client...'); - const flecks = new Flecks(runtime); - window.flecks = flecks; - try { - await flecks.up('@flecks/web/client.up'); - debug('up!'); - } - catch (error) { - // eslint-disable-next-line no-console - console.error(error); - } -})(); diff --git a/packages/web/src/import-loader.js b/packages/web/src/import-loader.js deleted file mode 100644 index 02ba957..0000000 --- a/packages/web/src/import-loader.js +++ /dev/null @@ -1,5 +0,0 @@ -export default (source) => ( - source - .replace('__non_webpack_import__', 'import') - .replace('@preserve ', '') -); diff --git a/packages/web/src/progress.js b/packages/web/src/progress.js deleted file mode 100644 index 45a4172..0000000 --- a/packages/web/src/progress.js +++ /dev/null @@ -1,39 +0,0 @@ -import {D} from '@flecks/core'; - -const debug = D('@flecks/web/progress'); - -export default class Progress { - - constructor(window) { - this.finished = 0; - this.progress = window.document.createElement('div'); - const {style} = this.progress; - style.backgroundColor = '#004488'; - style.border = 0; - style.display = 'none'; - style.height = '0.17em'; - style.left = 0; - style.margin = 0; - style.padding = 0; - style.position = 'absolute'; - style.top = 0; - style.transition = '1s width, 0.5s opacity'; - setTimeout(() => { - style.display = 'block'; - }, 600); - this.progress.style.width = '0%'; - this.progress.value = 0; - window.document.body.prepend(this.progress); - } - - update(total, path) { - this.finished += 1; - debug('loaded %s (%d/%d)', path, this.finished, total); - this.progress.style.width = `${100 * (this.finished / total)}%`; - } - - finish() { - this.progress.style.opacity = 0; - } - -} diff --git a/packages/web/src/server/build/entry.js b/packages/web/src/server/build/entry.js new file mode 100644 index 0000000..085a7fb --- /dev/null +++ b/packages/web/src/server/build/entry.js @@ -0,0 +1,67 @@ +import {D, Flecks} from '@flecks/core'; + +// eslint-disable-next-line import/no-extraneous-dependencies +const {version} = require('@flecks/web/package.json'); + +(async () => { + // eslint-disable-next-line no-console + console.log(`flecks client v${version} loading runtime...`); + const config = window[Symbol.for('@flecks/web.config')]; + const debug = D((config['@flecks/core'] && config['@flecks/core'].id) || 'flecks'); + class Progress { + + constructor(window) { + this.finished = 0; + this.progress = window.document.createElement('div'); + const {style} = this.progress; + style.backgroundColor = '#004488'; + style.border = 0; + style.display = 'none'; + style.height = '0.17em'; + style.left = 0; + style.margin = 0; + style.padding = 0; + style.position = 'absolute'; + style.top = 0; + style.transition = '1s width, 0.5s opacity'; + setTimeout(() => { + style.display = 'block'; + }, 600); + this.progress.style.width = '0%'; + this.progress.value = 0; + window.document.body.prepend(this.progress); + } + + update(total, path) { + this.finished += 1; + debug('loaded %s (%d/%d)', path, this.finished, total); + this.progress.style.width = `${100 * (this.finished / total)}%`; + } + + finish() { + this.progress.style.opacity = 0; + } + + } + const progress = new Progress(window); + debug('loading runtime...'); + // eslint-disable-next-line import/no-extraneous-dependencies + const {default: loader} = await import( + /* webpackChunkName: "flecks-runtime" */ + '@flecks/web/runtime' + ); + const runtime = await loader(progress.update.bind(progress)); + progress.finish(); + debug('starting client...'); + const flecks = new Flecks(runtime); + window.flecks = flecks; + try { + await flecks.up('@flecks/web/client.up'); + window.document.querySelector('#root').style.display = 'block'; + debug('up!'); + } + catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } +})(); diff --git a/packages/web/src/server/build/http.neutrinorc.js b/packages/web/src/server/build/http.neutrinorc.js index b55aafd..e856d25 100644 --- a/packages/web/src/server/build/http.neutrinorc.js +++ b/packages/web/src/server/build/http.neutrinorc.js @@ -20,7 +20,7 @@ module.exports = async (flecks) => { // Build configuration. const build = async () => { const root = await realpath( - dirname(R.resolve(join(flecks.resolve('@flecks/web'), 'entry.js'))), + dirname(R.resolve(join(flecks.resolve('@flecks/web'), 'package.json'))), ); return (neutrino) => { const {config, options} = neutrino; @@ -33,7 +33,7 @@ module.exports = async (flecks) => { }]); // Entrypoints. const {output: originalOutput} = options; - options.mains.index = join(root, 'entry'); + options.mains.index = join(root, 'server', 'build', 'entry'); options.mains.tests = { entry: join(root, 'server', 'build', 'tests'), title: 'Testbed', diff --git a/packages/web/src/server/build/runtime.js b/packages/web/src/server/build/runtime.js index af0dab6..ab9c455 100644 --- a/packages/web/src/server/build/runtime.js +++ b/packages/web/src/server/build/runtime.js @@ -42,9 +42,6 @@ module.exports = async (flecks) => { ) .filter((filename) => !!filename); const runtime = await realpath(R.resolve(join(httpFlecks.resolve('@flecks/web'), 'runtime'))); - const fullresolve = (fleck, path) => realpath(R.resolve(join(httpFlecks.resolve(fleck), path))); - const entry = await fullresolve('@flecks/web', 'entry'); - const importLoader = await fullresolve('@flecks/web', 'import-loader'); const tests = await realpath(R.resolve( join(httpFlecks.resolve('@flecks/web'), 'server', 'build', 'tests'), )); @@ -83,6 +80,7 @@ module.exports = async (flecks) => { source.push('}'); source.push(''); // Create runtime. + console.log(source); config.module .rule(runtime) .test(runtime) @@ -94,12 +92,6 @@ module.exports = async (flecks) => { config.resolve.alias .set('@flecks/web/runtime$', runtime); flecks.runtimeCompiler(httpFlecks.resolver, 'http', neutrino); - // Handle runtime import. - config.module - .rule(entry) - .test(entry) - .use('entry/http') - .loader(importLoader); // Aliases. const aliases = httpFlecks.aliases(); if (Object.keys(aliases).length > 0) {