diff --git a/package.json b/package.json index a4bb4624..e4d193e2 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,6 @@ "babel-plugin-transform-flow-strip-types": "^6.22.0", "bolt-check": "^0.2.0", "command-line-args": "^5.0.2", - "ejs": "^2.6.2", "emotion": "^9.1.3", "emotion-server": "^9.2.12", "eslint-plugin-emotion": "^10.0.7", @@ -187,4 +186,4 @@ "ts-loader": "^5.3.3", "tti-polyfill": "^0.2.2" } -} \ No newline at end of file +} diff --git a/packages/website/index.html b/packages/website/index.html new file mode 100644 index 00000000..2ecb0fac --- /dev/null +++ b/packages/website/index.html @@ -0,0 +1,11 @@ + + + + + + Basic webpage + + diff --git a/packages/website/src/_app.js b/packages/website/src/_app.js deleted file mode 100644 index b10cd419..00000000 --- a/packages/website/src/_app.js +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-env browser */ -/* global parcelRequire, __BRISK_ENTRY_ASSET_ID */ - -import React from 'react'; -import ReactDOM from 'react-dom'; -import Meta, { metadata } from './components/meta-context'; - -const pageEntryModule = parcelRequire(__BRISK_ENTRY_ASSET_ID); -const PageEntryComponent = - typeof pageEntryModule.default !== 'undefined' - ? pageEntryModule.default - : pageEntryModule; - -// eslint-disable-next-line react/prefer-stateless-function -class App extends React.Component { - render() { - return ( - - - - ); - } -} - -ReactDOM.render(, document.getElementById('app')); diff --git a/packages/website/src/bin/parcel-server.js b/packages/website/src/bin/parcel-server.js index dad9941d..3be6894a 100644 --- a/packages/website/src/bin/parcel-server.js +++ b/packages/website/src/bin/parcel-server.js @@ -1,10 +1,6 @@ -/* eslint-disable no-restricted-syntax */ const Parcel = require('@parcel/core').default; const express = require('express'); const path = require('path'); -const fs = require('fs').promises; - -const extensions = ['.tsx', '.ts', '.js']; const configPath = require.resolve('@parcel/config-default'); const defaultConfig = { @@ -14,116 +10,45 @@ const defaultConfig = { }; const DIST_DIR = path.resolve('.dist'); - -// Resolve ourselves since we need to quickly determine whether the page exists -async function resolve(pagesRoot, request) { - const base = path.resolve( - pagesRoot, - request.slice(1), // remove the leading `/` - ); - if (!base.startsWith(pagesRoot)) { - // Do not resolve anything outside the pages root. - return; - } - - for (const basename of [base, path.join(base, 'index')]) { - for (const extension of extensions) { - const filePath = basename + extension; - try { - // eslint-disable-next-line no-await-in-loop - await fs.stat(filePath); - // eslint-disable-next-line consistent-return - return filePath; - } catch (e) { - // continue - } - } - } -} +const builtEntryPage = path.resolve(DIST_DIR, 'index.html'); module.exports = async function createParcelServer({ port, pagesRoot, staticRoot, }) { + const parcelWatchSubscription = await new Parcel({ + entries: [path.resolve(__dirname, '..', '..', 'index.html')], + defaultConfig, + killWorkers: false, + sourceMaps: false, + targets: { + main: { + distDir: DIST_DIR, + engines: { + browsers: ['last 1 Chrome version'], + }, + publicUrl: '/', + }, + }, + }).watch(); + const app = express(); app.set('view engine', 'ejs'); app.use(express.static(DIST_DIR)); app.use('/static', express.static(staticRoot)); - const pageToBundles = new Map(); - - app.get('*', async (req, res) => { - const pagePath = await resolve(pagesRoot, req.url); - if (pagePath == null) { - res.sendStatus(404); - return; - } - - let bundlePaths = pageToBundles.get(pagePath); - if (bundlePaths == null) { - // TODO: Handle multiple concurrent parcels during multiple requests - const bundleGraph = await new Parcel({ - entries: [pagePath, path.resolve(__dirname, '../_app.js')], - defaultConfig, - killWorkers: false, - sourceMaps: false, - targets: { - main: { - distDir: DIST_DIR, - engines: { - browsers: ['last 1 Chrome version'], - }, - publicUrl: '/', - }, - }, - }).run(); - - const bundles = bundleGraph.getBundles(); - const pageBundle = bundles.find(b => b.isEntry && b.type === 'js'); - - // TODO: Currently Pacel creates shared bundles for entry points, and the resulting - // bundles are not entries but belong to the same bundle group as entries. - const otherEntryBundles = bundleGraph - .getBundlesInBundleGroup( - bundleGraph.getBundleGroupsContainingBundle(pageBundle)[0], - ) - .filter(b => b.id !== pageBundle.id); - - const entries = otherEntryBundles.concat( - bundleGraph.getBundles().filter(b => b.isEntry && b.type === 'js'), - ); - - if (entries.length < 2) { - throw new Error('Expected page entry and app'); - } - - bundlePaths = { - pageEntryAsset: pageBundle.getEntryAssets()[0].id, - scripts: entries.map(e => e.filePath), - stylesheets: bundles - .filter(b => b.isEntry && b.type === 'css') - .map(b => b.filePath), - }; - pageToBundles.set(pagePath, bundlePaths); - } - res.render('page', { - pageEntryAsset: bundlePaths.pageEntryAsset, - scripts: bundlePaths.scripts.map( - bundlePath => `/${path.posix.relative(DIST_DIR, bundlePath)}`, - ), - stylesheets: bundlePaths.stylesheets.map( - bundlePath => `/${path.posix.relative(DIST_DIR, bundlePath)}`, - ), - }); + app.get('*', async (_, res) => { + res.sendFile(builtEntryPage); }); const server = app.listen(port != null ? port : 3001); return { - dispose() { + async dispose() { // `close` is on the returned server object, not on `app`. // https://stackoverflow.com/questions/8659011/how-do-i-programmatically-shut-down-an-instance-of-expressjs-for-testing server.close(); + await parcelWatchSubscription.unsubscribe(); }, }; }; diff --git a/packages/website/views/page.ejs b/packages/website/views/page.ejs deleted file mode 100644 index 12155707..00000000 --- a/packages/website/views/page.ejs +++ /dev/null @@ -1,17 +0,0 @@ - - - - - <% for (const script of scripts) { %> - - <% } %> - <% for (const stylesheet of stylesheets) { %> - - <% } %> - - -
- -