update imports and tsup

src/vs/workbench/contrib/void/browser/react/README.md

@@ -0,0 +1,10 @@
+
+Run `node build.js` to compile the React into `out/`.
+
+A couple things to remember:
+
+- Make sure to add .js at the end of any external imports used in here.
+
+- src/ needs to be shallow so the detection of externals works properly (see tsup.config.js).
+
+

src/vs/workbench/contrib/void/browser/react/build.js

@@ -1,7 +1,7 @@
 import { execSync } from 'child_process';
 
 // tsup to build all react to out/
-execSync('npx scope-tailwind ./sidebar-tsx -c ')
+execSync('npx scope-tailwind ./sidebar-tsx -c styles.css')
 
 // build tailwind -> styles.css
 execSync('tsup')

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx

@@ -3,10 +3,12 @@ import { mountFnGenerator } from '../util/mountFnGenerator'
 
 import { SidebarSettings } from './SidebarSettings.js';
 import { useServices } from '../util/contextForServices.js';
-import { IVoidSidebarStateService, VoidSidebarState } from '../../registerSidebar.js';
+import { IVoidSidebarStateService, VoidSidebarState } from '../../../registerSidebar.js';
 // import { SidebarThreadSelector } from './SidebarThreadSelector.js';
 // import { SidebarChat } from './SidebarChat.js';
 
+import '../styles.css'
+
 const Sidebar = () => {
 	// state should come from sidebarStateService
 	const { sidebarStateService } = useServices()

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarSettings.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useServices } from '../util/contextForServices.js';
-import { IVoidConfigStateService, nonDefaultConfigFields, PartialVoidConfig, VoidConfig, VoidConfigField, VoidConfigInfo, SetFieldFnType, ConfigState } from '../../../browser/registerConfig.js';
+import { IVoidConfigStateService, nonDefaultConfigFields, PartialVoidConfig, VoidConfig, VoidConfigField, VoidConfigInfo, SetFieldFnType, ConfigState } from '../../../registerConfig.js';
 
 
 const SettingOfFieldAndParam = ({ field, param, configState, configStateService }:

src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom/client'
 import { AccessorProvider } from './contextForServices';
-import { ReactServicesType } from '../../registerSidebar';
+import { ReactServicesType } from '../../../registerSidebar.js';
 
 
 export const mountFnGenerator = (Component: React.FC) => (rootElement: HTMLElement, services: ReactServicesType) => {

src/vs/workbench/contrib/void/browser/react/tsup.config.js

@@ -1,7 +1,9 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-	entry: ['./sidebar-tsx/Sidebar.tsx'],  // You'll need to create this index file
+	entry: [
+		'./sidebar-tsx/Sidebar.tsx'
+	],
 	outDir: './out',
 	format: ['esm'],
 	// dts: true,
@@ -13,6 +15,10 @@ export default defineConfig({
 	outExtension: () => ({ js: '.js' }),
 	// default behavior is to take local files and make them internal (bundle them) and take imports like 'react' and leave them external (don't bundle them), we want the opposite in many ways
 	noExternal: ['react', 'react-dom'], // noExternal means we should take these things and make them not external (bundle them into the output file)
-	external: [/\.\.\/\.\.\/.*/], // these imports should be kept external ../../ are external (this is just an optimization so the output file doesn't re-implement functions)
+	external: [ // these imports should be kept external ../../../ are external (this is just an optimization so the output file doesn't re-implement functions)
+		new RegExp('../../../*'
+			.replaceAll('.', '\\.')
+			.replaceAll('*', '.*'))
+	],
 	treeshake: true,
 })