0
0
mirror of https://github.com/PostHog/posthog.git synced 2024-12-01 12:21:02 +01:00
posthog/frontend/build.mjs

90 lines
3.0 KiB
JavaScript
Raw Normal View History

Bundle our frontend via esbuild (#6758) * esbuild package * almost get esbuild working * fix react-virtualized imports * add splitting * fix funny import reorder bug * fix squeakAudio referring to itself * write index.html file * fix some bad imports * update antd paths * remove raw-loader usage, it didn't work anyway * refactor and copy public * build app and toolbar * get toolbar working, but without styles * make toolbar and its styles work * shared dashboards * clean frontend build before rebuilding * add watch mode * reorder tasks * revert js url * incremental builds of app with debounced chokidar watching * common build/watch script * improve logs * watch during firrst build * fix toolbar url * fix wrongly exported scene * create sceneProxyLogic to untangle sceneLogic from all bundles * disconnect sceneLogic and refactor setPageTitle * live reloading server * rename utils file * only wait for /static * fix encoding * simplify * add missing dayjs plugins * fix pathless logics * simplify options * add jsx for webapck * slight delay to catch changes * a type is a type * fix build * esbuild in start * funnelLogic path * include all files with a "." (so .mjs, etc) in /frontend/ to docker * rename to "utils.mjs", make "build.mjs" executable * improve erroring * revert some needless changes * more reverts * change some scripts * remove setuff * clarify function * make "--host 0.0.0.0" work * fix import order issue in webpack * remove webpack css inlining for toolbar to simplify config * make toolbar with external styles work in storybook * move live server injection into django * fix undefined bug * simplify setup to work with injection directly in http://localhost:8000 (no proxying needed on :8234) * add comments * Fix `fse` usage I was getting this otherwise: $ node frontend/build.mjs file:///Users/twixes/Developer/posthog/frontend/utils.mjs:46 fse.copySync(srcDir, destDir, { overwrite: true }, function (err) { ^ TypeError: fse.copySync is not a function at copyPublicFolder (file:///Users/twixes/Developer/posthog/frontend/utils.mjs:46:9) at file:///Users/twixes/Developer/posthog/frontend/build.mjs:5:1 at ModuleJob.run (internal/modules/esm/module_job.js:146:23) at async Loader.import (internal/modules/esm/loader.js:165:24) at async Object.loadESM (internal/process/esm_loader.js:68:5) * Mock `process` for VFile used by ReactMarkdown I was getting this otherwise: core.js:55 Uncaught ReferenceError: process is not defined at new VFile (core.js:55) at VFile (core.js:49) at Function.parse (index.js:273) at ReactMarkdown2 (react-markdown.js:42) at renderWithHooks (react-dom.development.js:14803) at mountIndeterminateComponent (react-dom.development.js:17482) at beginWork (react-dom.development.js:18596) at HTMLUnknownElement.callCallback2 (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) * Mock `process.env` for VFile used by ReactMarkdown I was getting this otherwise: platform.ts:73 Uncaught TypeError: Cannot read properties of undefined (reading 'ENABLE_VSCODE_BROWSER_CODE_LOADING') at platform.ts:73 at platform.ts:79 at Function.r._invokeFactory (loader.js:1118) at r.complete (loader.js:1128) at r._onModuleComplete (loader.js:1754) at r._resolve (loader.js:1714) at r.defineModule (loader.js:1357) at _ (loader.js:1804) at numbers.ts:10 at fake:1 * pass the heavy appScenes to sceneLogic through props via App.tsx * remove sceneProxyLogic * remove exported variables * fix sceneLogic test Co-authored-by: Michael Matloka <dev@twixes.com>
2021-11-03 09:50:24 +01:00
#!/usr/bin/env node
import * as path from 'path'
import { fileURLToPath } from 'url'
import {
copyPublicFolder,
isDev,
startDevServer,
createHashlessEntrypoints,
buildInParallel,
copyIndexHtml,
} from './utils.mjs'
export const __dirname = path.dirname(fileURLToPath(import.meta.url))
startDevServer(__dirname)
copyPublicFolder(path.resolve(__dirname, 'public'), path.resolve(__dirname, 'dist'))
writeIndexHtml()
writeExporterHtml()
const common = {
absWorkingDir: __dirname,
bundle: true,
}
await buildInParallel(
[
{
name: 'PostHog App',
globalName: 'posthogApp',
entryPoints: ['src/index.tsx'],
splitting: true,
format: 'esm',
outdir: path.resolve(__dirname, 'dist'),
...common,
},
{
name: 'Exporter',
globalName: 'posthogExporter',
entryPoints: ['src/exporter/index.tsx'],
format: 'iife',
outfile: path.resolve(__dirname, 'dist', 'exporter.js'),
...common,
},
{
name: 'Toolbar',
globalName: 'posthogToolbar',
entryPoints: ['src/toolbar/index.tsx'],
format: 'iife',
outfile: path.resolve(__dirname, 'dist', 'toolbar.js'),
// make sure we don't link to a global window.define
banner: { js: 'var posthogToolbar = (function () { var define = undefined;' },
footer: { js: 'return posthogToolbar })();' },
// This isn't great but we load some static assets at runtime for the toolbar and we can't sub in
// a variable at runtime it seems...
publicPath: isDev ? '/static/' : 'https://app.posthog.com/static/',
...common,
},
],
{
async onBuildComplete(config, buildResponse) {
const { chunks, entrypoints } = buildResponse
if (config.name === 'PostHog App') {
if (Object.keys(chunks).length === 0) {
throw new Error('Could not get chunk metadata for bundle "PostHog App."')
}
if (!isDev && Object.keys(entrypoints).length === 0) {
throw new Error('Could not get entrypoint for bundle "PostHog App."')
}
writeIndexHtml(chunks, entrypoints)
}
if (config.name === 'Exporter') {
writeExporterHtml(chunks, entrypoints)
}
createHashlessEntrypoints(__dirname, entrypoints)
},
}
)
export function writeIndexHtml(chunks = {}, entrypoints = []) {
copyIndexHtml(__dirname, 'src/index.html', 'dist/index.html', 'index', chunks, entrypoints)
copyIndexHtml(__dirname, 'src/layout.html', 'dist/layout.html', 'index', chunks, entrypoints)
}
export function writeExporterHtml(chunks = {}, entrypoints = []) {
copyIndexHtml(__dirname, 'src/exporter/index.html', 'dist/exporter.html', 'exporter', chunks, entrypoints)
}