Refactor to improve vite configs and Streams constructor

.github/workflows/bundle.yaml

@@ -0,0 +1,42 @@
+name: Bundle
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  DO_NOT_TRACK: 1
+  SHELL: /bin/bash
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+      - name: Install dependencies
+        uses: stateful/runme-action@v2
+        with:
+          workflows: |
+            configure
+            setup
+      - name: 📦 Bundle
+        uses: stateful/runme-action@v2
+        with:
+          workflows: build

README.md

@@ -7,6 +7,12 @@ This project is structured as an npm monorepo with two packages:
 
 ## Getting Started
 
+Set up NPM to use Buf registry:
+
+```sh {"name":"configure","terminalRows":"5"}
+npm config set @buf:registry https://buf.build/gen/npm/v1
+```
+
 Install all dependencies (hoisted to the root):
 
 ```sh {"name":"setup"}
@@ -39,6 +45,7 @@ npm run clean
 Start the development server for sample app using the components:
 
 ```sh {"name":"dev"}
+npm run build:console
 npm run dev
 ```
 

packages/react-components/src/contexts/SettingsContext.tsx

@@ -123,16 +123,18 @@ export const SettingsProvider = ({
     // reset runner error
     setRunnerError(null)
 
-    const stream = new Streams(
-      { knownID: `check_${ulid()}`, runID: genRunID(), sequence: 0 },
-      {
+    const stream = new Streams({
+      knownID: `check_${ulid()}`,
+      runID: genRunID(),
+      sequence: 0,
+      options: {
         runnerEndpoint: settings.webApp.runner,
         authorization: {
           bearerToken: getSessionToken(),
         },
-        autoReconnect: false, // let it fail, we're interested in the error
-      }
-    )
+        autoReconnect: false, // let it fail, the user is interested in the error
+      },
+    })
 
     const subs: Subscription[] = []
     subs.push(

packages/react-components/vite.config.ts

@@ -1,50 +1,10 @@
-import tailwindcss from '@tailwindcss/vite'
-import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
-import path from 'path'
-import { defineConfig } from 'vite'
 
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      react: path.resolve('./node_modules/react'),
-      'react-dom': path.resolve('./node_modules/react-dom'),
-      'react-router-dom': path.resolve('./node_modules/react-router-dom'),
-      'react-router': path.resolve('./node_modules/react-router'),
-    },
-  },
-  build: {
-    outDir: 'dist',
-    emptyOutDir: false,
-    lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'RunmeComponents',
-      formats: ['es', 'cjs'],
-      fileName: (format) =>
-        format === 'es' ? 'react-components.mjs' : 'react-components.cjs',
-    },
-    rollupOptions: {
-      external: [
-        'react',
-        'react-dom',
-        'react/jsx-runtime',
-        '@radix-ui/react-dropdown-menu',
-        '@radix-ui/react-icons',
-        '@radix-ui/themes',
-        '@monaco-editor/react',
-        'react-markdown',
-        'react-router',
-        'react-router-dom',
-      ],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react/jsx-runtime': 'React',
-        },
-      },
-    },
-  },
+import { createSharedConfig } from '../vite.common'
+
+export default createSharedConfig({
+  entry: resolve(__dirname, 'src/index.tsx'),
+  name: 'RunmeComponents',
+  fileName: (format) =>
+    format === 'es' ? 'react-components.mjs' : 'react-components.cjs',
 })

packages/react-console/src/components/Console.tsx

@@ -73,14 +73,16 @@ function Console({
     }
 
     console.log('Creating stream', blockID, runID, runner.endpoint)
-    return new Streams(
-      { knownID: blockID, runID, sequence },
-      {
+    return new Streams({
+      knownID: blockID,
+      runID,
+      sequence,
+      options: {
         runnerEndpoint: runner.endpoint,
         authorization: runner.authorization,
         autoReconnect: runner.reconnect,
-      }
-    )
+      },
+    })
   }, [blockID, runID, sequence, runner])
 
   useEffect(() => {

packages/react-console/src/streams.ts

@@ -70,6 +70,17 @@ type Latency = {
   updatedAt: bigint
 }
 
+type StreamsProps = {
+  knownID: string
+  runID: string
+  sequence: number
+  options: {
+    runnerEndpoint: string
+    authorization: Authorization
+    autoReconnect: boolean
+  }
+}
+
 class Streams {
   private callback: VSCodeEvent<any> | undefined
 
@@ -156,35 +167,16 @@ class Streams {
   private readonly authorization: Authorization
   private readonly autoReconnect: boolean
 
-  constructor(
-    {
-      knownID,
-      runID,
-      sequence,
-    }: {
-      knownID: string
-      runID: string
-      sequence: number
-    },
-    {
-      runnerEndpoint,
-      authorization,
-      autoReconnect,
-    }: {
-      runnerEndpoint: string
-      authorization: Authorization
-      autoReconnect: boolean
-    }
-  ) {
+  constructor({ knownID, runID, sequence, options }: StreamsProps) {
     // Set the identifiers
     this.knownID = knownID
     this.runID = runID
     this.sequence = sequence
 
     // Assign configuration
-    this.runnerEndpoint = runnerEndpoint
-    this.authorization = authorization
-    this.autoReconnect = autoReconnect
+    this.runnerEndpoint = options.runnerEndpoint
+    this.authorization = options.authorization
+    this.autoReconnect = options.autoReconnect
 
     // Turn the connectables into hot observables
     this._latenciesConnectable.connect()

packages/react-console/vite.config.ts

@@ -1,50 +1,10 @@
-import tailwindcss from '@tailwindcss/vite'
-import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
-import path from 'path'
-import { defineConfig } from 'vite'
 
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      react: path.resolve('./node_modules/react'),
-      'react-dom': path.resolve('./node_modules/react-dom'),
-      'react-router-dom': path.resolve('./node_modules/react-router-dom'),
-      'react-router': path.resolve('./node_modules/react-router'),
-    },
-  },
-  build: {
-    outDir: 'dist',
-    emptyOutDir: false,
-    lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'RunmeConsole',
-      formats: ['es', 'cjs'],
-      fileName: (format) =>
-        format === 'es' ? 'react-console.mjs' : 'react-console.cjs',
-    },
-    rollupOptions: {
-      external: [
-        'react',
-        'react-dom',
-        'react/jsx-runtime',
-        '@radix-ui/react-dropdown-menu',
-        '@radix-ui/react-icons',
-        '@radix-ui/themes',
-        '@monaco-editor/react',
-        'react-markdown',
-        'react-router',
-        'react-router-dom',
-      ],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react/jsx-runtime': 'React',
-        },
-      },
-    },
-  },
+import { createSharedConfig } from '../vite.common'
+
+export default createSharedConfig({
+  entry: resolve(__dirname, 'src/index.tsx'),
+  name: 'RunmeConsole',
+  fileName: (format) =>
+    format === 'es' ? 'react-console.mjs' : 'react-console.cjs',
 })

packages/vite.common.ts

@@ -0,0 +1,54 @@
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import { defineConfig } from 'vite'
+
+export function createSharedConfig({ entry, name, fileName }) {
+  return defineConfig({
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        react: path.resolve('./node_modules/react'),
+        'react-dom': path.resolve('./node_modules/react-dom'),
+        'react-router-dom': path.resolve('./node_modules/react-router-dom'),
+        'react-router': path.resolve('./node_modules/react-router'),
+      },
+    },
+    build: {
+      outDir: 'dist',
+      emptyOutDir: false,
+      lib: {
+        entry,
+        name,
+        formats: ['es', 'cjs'],
+        fileName,
+      },
+      rollupOptions: {
+        external: [
+          '@buf/bufbuild_protovalidate.bufbuild_es',
+          '@buf/googleapis_googleapis.bufbuild_es',
+          '@bufbuild/protobuf',
+          '@bufbuild/protobuf/codegenv1',
+          '@bufbuild/protobuf/wkt',
+          'react',
+          'react-dom',
+          'react/jsx-runtime',
+          '@radix-ui/react-dropdown-menu',
+          '@radix-ui/react-icons',
+          '@radix-ui/themes',
+          '@monaco-editor/react',
+          'react-markdown',
+          'react-router',
+          'react-router-dom',
+        ],
+        output: {
+          globals: {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+            'react/jsx-runtime': 'React',
+          },
+        },
+      },
+    },
+  })
+}