[example] add dev and preview for esbuild example

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}\""
   },

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));
+}

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: {

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();
+  });
+}