diff --git a/src/vs/workbench/contrib/void/browser/react/README.md b/src/vs/workbench/contrib/void/browser/react/README.md new file mode 100644 index 00000000..11b8d253 --- /dev/null +++ b/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). + + diff --git a/src/vs/workbench/contrib/void/browser/react/build.js b/src/vs/workbench/contrib/void/browser/react/build.js index 1fcb5a76..a6c0fb86 100755 --- a/src/vs/workbench/contrib/void/browser/react/build.js +++ b/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') diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx index f0a6c647..bb8ac031 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx +++ b/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() diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarSettings.tsx index acf7056a..bfe4f2a2 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarSettings.tsx +++ b/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 }: diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx index 898f249d..a1ef75c0 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx +++ b/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) => { diff --git a/src/vs/workbench/contrib/void/browser/react/tsup.config.js b/src/vs/workbench/contrib/void/browser/react/tsup.config.js index 6588df04..22c79ea8 100644 --- a/src/vs/workbench/contrib/void/browser/react/tsup.config.js +++ b/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, })