diff --git a/examples/example-esbuild/package.json b/examples/example-esbuild/package.json index c47ca35b4..883a48121 100644 --- a/examples/example-esbuild/package.json +++ b/examples/example-esbuild/package.json @@ -5,6 +5,8 @@ "description": "Simple esbuild example for @stylexjs/esbuild-plugin", "main": "src/App.jsx", "scripts": { + "example:dev": "node scripts/build.mjs -w", + "example:preview": "node scripts/build.mjs -s", "example:build": "node scripts/build.mjs", "example:lint": "eslint \"**/*.{js,jsx}\"" }, diff --git a/examples/example-esbuild/scripts/build.mjs b/examples/example-esbuild/scripts/build.mjs index c728a047a..acf56cb4a 100644 --- a/examples/example-esbuild/scripts/build.mjs +++ b/examples/example-esbuild/scripts/build.mjs @@ -21,24 +21,62 @@ const STYLEX_BUNDLE_PATH = path.resolve( `${BUILD_DIR_NAME}/stylex.css`, ); -esbuild - .build({ - entryPoints: [path.resolve(__dirname, '..', 'src/App.jsx')], - bundle: true, - outfile: OUTFILE, - minify: true, - plugins: [ - // See all options in the babel plugin configuration docs: - // https://stylexjs.com/docs/api/configuration/babel-plugin/ - stylexPlugin({ - useCSSLayers: true, - generatedCSSFileName: STYLEX_BUNDLE_PATH, - stylexImports: ['@stylexjs/stylex'], - unstable_moduleResolution: { - type: 'commonJS', - rootDir: path.resolve(__dirname, '../../..'), - }, - }), - ], - }) - .catch(() => process.exit(1)); +const isWatch = ['-w', '--watch'].some(arg => process.argv.includes(arg)); +const isServe = ['--serve', '-s'].some(arg => process.argv.includes(arg)); +const PORT = process.argv.includes('-p') ? process.argv[process.argv.indexOf('-p') + 1] : 5173; + +const buildOptions = { + entryPoints: [path.resolve(__dirname, '..', 'src/App.jsx')], + bundle: true, + outfile: OUTFILE, + minify: true, + plugins: [ + // See all options in the babel plugin configuration docs: + // https://stylexjs.com/docs/api/configuration/babel-plugin/ + stylexPlugin({ + useCSSLayers: true, + generatedCSSFileName: STYLEX_BUNDLE_PATH, + stylexImports: ['@stylexjs/stylex'], + unstable_moduleResolution: { + type: 'commonJS', + rootDir: path.resolve(__dirname, '../../..'), + }, + }), + ], +} + +async function serve() { + const ctx = await esbuild.context(buildOptions); + const { hosts, port } = await ctx.serve({ + port: PORT, + servedir: path.resolve(__dirname, '..', 'public'), + }); + console.log(`Preview: http://${hosts[0]}:${port}`); +} + +async function watch() { + const ctx = await esbuild.context({ + ...buildOptions, + define: { + ...(buildOptions.define || {}), + 'window.IS_DEV': 'true', + } + }); + await ctx.watch(); + const { hosts, port } = await ctx.serve({ + port: PORT, + servedir: path.resolve(__dirname, '..', 'public'), + }); + console.log(`Dev server: http://${hosts[0]}:${port}`); + console.log('Watching for changes...'); +} + +if (isServe) { + serve(); +} else if (isWatch) { + watch(); +} else { + esbuild + .build(buildOptions) + .catch(() => process.exit(1)); +} diff --git a/examples/example-esbuild/src/App.jsx b/examples/example-esbuild/src/App.jsx index 519d63c84..19de64fc9 100644 --- a/examples/example-esbuild/src/App.jsx +++ b/examples/example-esbuild/src/App.jsx @@ -15,6 +15,7 @@ import * as stylex from '@stylexjs/stylex'; import { colors } from '@stylexjs/open-props/lib/colors.stylex'; import { sizes } from '@stylexjs/open-props/lib/sizes.stylex'; import { fonts } from '@stylexjs/open-props/lib/fonts.stylex'; +import './live-reload'; const styles = stylex.create({ main: { diff --git a/examples/example-esbuild/src/live-reload.js b/examples/example-esbuild/src/live-reload.js new file mode 100644 index 000000000..1c732bf4a --- /dev/null +++ b/examples/example-esbuild/src/live-reload.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +if (window.IS_DEV) { + new EventSource('/esbuild').addEventListener('change', () => { + window.location.reload(); + }); +}