better compile setup for hotreload

Co-authored-by: Brendan Allan <brendonovich@outlook.com>

apps/desktop/package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "@honkhonk/vite-plugin-svgr": "^1.1.0",
     "@tauri-apps/cli": "^1.0.0-rc.8",
     "@types/babel-core": "^6.25.7",
     "@types/byte-size": "^8.1.0",
@@ -32,6 +33,7 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/tailwindcss": "^3.0.10",
+    "@vitejs/plugin-react": "^1.3.1",
     "concurrently": "^7.1.0",
     "prettier": "^2.6.2",
     "sass": "^1.50.0",
@@ -39,7 +41,6 @@
     "vite": "^2.9.1",
     "vite-plugin-filter-replace": "^0.1.9",
     "vite-plugin-react-svg": "^0.2.0",
-    "vite-tsconfig-paths": "^3.4.1",
-    "@vitejs/plugin-react": "^1.3.1"
+    "vite-tsconfig-paths": "^3.4.1"
   }
 }

apps/desktop/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require('@sd/ui/postcss');

apps/desktop/src/index.tsx

@@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
 
 // import Spacedrive interface
 import SpacedriveInterface, { Platform } from '@sd/interface';
-import '@sd/interface/dist/style.css';
 
 // import types from Spacedrive core (TODO: re-export from client would be cleaner)
 import { ClientCommand, ClientQuery, CoreEvent } from '@sd/core';
@@ -13,6 +12,8 @@ import { BaseTransport } from '@sd/client';
 import { dialog, invoke, os } from '@tauri-apps/api';
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 
+import '@sd/ui/style';
+
 // bind state to core via Tauri
 class Transport extends BaseTransport {
   async query(query: ClientQuery) {

apps/desktop/tailwind.config.js

@@ -0,0 +1 @@
+module.exports = require('@sd/ui/tailwind');

apps/desktop/tsconfig.json

@@ -14,8 +14,12 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "outDir": "dist"
+    "outDir": "dist",
+    "baseUrl": "./",
+    "paths": {
+      "@sd/interface": ["../../packages/interface/src/index.ts"],
+      "@sd/ui": ["../../packages/ui/src"]
+    }
   },
   "include": ["src"],
-  "exclude": ["node_modules"]
 }

apps/desktop/vite.config.ts

@@ -1,7 +1,12 @@
 import { defineConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
 import react from '@vitejs/plugin-react';
+import { name, version } from './package.json';
+import * as path from 'path';
+import svgr from '@honkhonk/vite-plugin-svgr';
 
+function resolvePackage(name: string) {
+  return path.resolve(require.resolve(`${name}/package.json`), '../src');
+}
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
@@ -10,10 +15,22 @@ export default defineConfig({
   plugins: [
     react({
       jsxRuntime: 'classic'
-    })
+    }),
+    svgr()
   ],
   root: 'src',
   publicDir: '../../packages/interface/src/assets',
+  define: {
+    pkgJson: { name, version }
+  },
+  optimizeDeps: {
+    include: ['@sd/interface', '@sd/ui', '@sd/client']
+  },
+  resolve: {
+    alias: {
+      '@sd/interface': resolvePackage('@sd/interface')
+    }
+  },
   build: {
     outDir: '../dist',
     assetsDir: '.'

apps/web/package.json

@@ -8,26 +8,34 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@sd/interface": "*",
-    "@sd/core": "*",
     "@sd/client": "*",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^16.11.27",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
+    "@sd/core": "*",
+    "@sd/interface": "*",
+    "@sd/ui": "*",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.6.3",
-    "web-vitals": "^2.1.4"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "vite": "^2.9.1",
+    "typescript": "^4.6.3",
+    "@honkhonk/vite-plugin-svgr": "^1.1.0",
+    "@types/babel-core": "^6.25.7",
+    "@types/byte-size": "^8.1.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^16.11.27",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "@types/tailwindcss": "^3.0.10",
     "@vitejs/plugin-react": "^1.3.1",
-    "vite-plugin-react-svg": "^0.2.0"
+    "concurrently": "^7.1.0",
+    "prettier": "^2.6.2",
+    "sass": "^1.50.0",
+    "vite": "^2.9.1",
+    "vite-plugin-filter-replace": "^0.1.9",
+    "vite-plugin-react-svg": "^0.2.0",
+    "vite-tsconfig-paths": "^3.4.1"
   },
   "eslintConfig": {
     "extends": [

apps/web/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require('@sd/ui/postcss');

apps/web/src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import SpacedriveInterface from '@sd/interface';
-import '@sd/interface/dist/style.css';
+import '@sd/ui/style';
 
 import { ClientCommand, ClientQuery } from '@sd/core';
 import { BaseTransport } from '@sd/client';

apps/web/src/index.html

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

apps/web/tailwind.config.js

@@ -0,0 +1 @@
+module.exports = require('@sd/ui/tailwind');

apps/web/tsconfig.json

@@ -1,26 +1,24 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react",
+    "baseUrl": "./",
+    "paths": {
+      "@sd/interface": ["../../packages/interface/src/index.ts"],
+      "@sd/ui": ["../../packages/ui/src"]
+    }
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
 }

apps/web/vite.config.ts

@@ -1,6 +1,12 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { name, version } from './package.json';
+import * as path from 'path';
+import svgr from '@honkhonk/vite-plugin-svgr';
 
+function resolvePackage(name: string) {
+  return path.resolve(require.resolve(`${name}/package.json`), '../src');
+}
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
@@ -9,11 +15,24 @@ export default defineConfig({
   plugins: [
     react({
       jsxRuntime: 'classic'
-    })
+    }),
+    svgr()
   ],
-  publicDir: 'public',
+  root: 'src',
+  publicDir: '../../packages/interface/src/assets',
+  define: {
+    pkgJson: { name, version }
+  },
+  optimizeDeps: {
+    include: ['@sd/interface', '@sd/ui', '@sd/client']
+  },
+  resolve: {
+    alias: {
+      '@sd/interface': resolvePackage('@sd/interface')
+    }
+  },
   build: {
-    outDir: 'build',
+    outDir: '../dist',
     assetsDir: '.'
   }
 });

package.json

@@ -6,9 +6,6 @@
     "prep": "pnpm db:gen && pnpm core codegen && pnpm build-packages",
     "build-packages": "pnpm client build && pnpm ui build && pnpm interface build",
     "build": "turbo run build",
-    "dev:desktop": "turbo run dev --parallel --filter=@sd/desktop --filter=@sd/client --filter=@sd/ui && pnpm interface dev:build",
-    "dev:ui": "turbo run dev --parallel --filter=@sd/client --filter=@sd/ui --filter=@sd/interface",
-    "dev:landing": "turbo run dev --parallel --filter=@sd/client --filter=@sd/ui --filter=@sd/web --filter=@sd/landing && pnpm interface dev:build",
     "db:migrate": "pnpm core prisma migrate dev",
     "db:gen": "pnpm core prisma generate",
     "lint": "turbo run lint",

packages/interface/package.json

@@ -1,19 +1,6 @@
 {
   "name": "@sd/interface",
   "version": "1.0.0",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.es.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    },
-    "./dist/style.css": "./dist/style.css"
-  },
-  "types": "./src/index.ts",
   "license": "MIT",
   "private": true,
   "scripts": {

packages/interface/src/components/primitive/Tag.tsx

@@ -1,19 +1,30 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { DefaultProps } from './types';
 
 export interface TagProps extends DefaultProps {
+  children: ReactNode;
   color: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'pink';
 }
 
 export const Tag: React.FC<TagProps> = (props) => {
-  return <div className={clsx('rounded px-1.5 py-1 text-xs font-medium inline-block cursor-default', {
-    'bg-red-500 hover:bg-red-400': props.color === 'red',
-    'bg-orange-500 hover:bg-orange-400': props.color === 'orange',
-    'bg-yellow-500 hover:bg-yellow-400': props.color === 'yellow',
-    'bg-green-500 hover:bg-green-400': props.color === 'green',
-    'bg-blue-500 hover:bg-blue-400': props.color === 'blue',
-    'bg-purple-500 hover:bg-purple-400': props.color === 'purple',
-    'bg-pink-500 hover:bg-pink-400': props.color === 'pink',
-  }, props.className)}>{props.children}</div>;
+  return (
+    <div
+      className={clsx(
+        'rounded px-1.5 py-1 text-xs font-medium inline-block cursor-default',
+        {
+          'bg-red-500 hover:bg-red-400': props.color === 'red',
+          'bg-orange-500 hover:bg-orange-400': props.color === 'orange',
+          'bg-yellow-500 hover:bg-yellow-400': props.color === 'yellow',
+          'bg-green-500 hover:bg-green-400': props.color === 'green',
+          'bg-blue-500 hover:bg-blue-400': props.color === 'blue',
+          'bg-purple-500 hover:bg-purple-400': props.color === 'purple',
+          'bg-pink-500 hover:bg-pink-400': props.color === 'pink'
+        },
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  );
 };

packages/interface/src/dev.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './style.scss';
-import App from './App';
-import { ClientCommand, ClientQuery, CoreEvent } from '@sd/core';
-import { BaseTransport } from '@sd/client';
-
-// bind state to core via Tauri
-class Transport extends BaseTransport {
-  async query(query: ClientQuery) {
-    // return await invoke('client_query_transport', { data: query });
-  }
-  async command(query: ClientCommand) {
-    // return await invoke('client_command_transport', { data: query });
-  }
-}
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(
-  <React.StrictMode>
-    <App
-      transport={new Transport()}
-      onCoreEvent={function (event: CoreEvent): void {}}
-      platform={'browser'}
-      convertFileSrc={function (url: string): string {
-        return url;
-      }}
-      openDialog={function (options: {
-        directory?: boolean | undefined;
-      }): Promise<string | string[]> {
-        return Promise.resolve('');
-      }}
-    />
-  </React.StrictMode>
-);

packages/interface/src/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Spacedrive Interface [For Development Only]</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="dev.tsx"></script>
-  </body>
-</html>

packages/interface/src/index.ts

@@ -1,8 +1,6 @@
 import App from './App';
 import { AppProps, Platform } from './App';
 
-import './style.scss';
-
 export type { AppProps, Platform };
 
 export default App;

packages/interface/tsconfig.json

@@ -19,5 +19,4 @@
     "types": [ "@honkhonk/vite-plugin-svgr/client" ]
   },
   "include": ["src"],
-  "exclude": ["node_modules"]
 }

packages/ui/package.json

@@ -3,7 +3,14 @@
   "version": "0.0.0",
   "main": "./dist/index.d.ts",
   "types": "./dist/index.js",
+  "sass": "./style/style.scss",
   "license": "MIT",
+  "exports": {
+    ".": "./src",
+    "./postcss": "./style/postcss.config.js",
+    "./tailwind": "./style/tailwind.config.js",
+    "./style": "./style/index.ts"
+  },
   "scripts": {
     "build": "tsc"
   },

packages/ui/src/index.ts

@@ -1,4 +1,3 @@
 import * as React from 'react';
 
 export * from './primitive';
-// export * from "./screens";

packages/ui/style/index.ts

@@ -0,0 +1 @@
+import './style.scss';

packages/ui/style/style.scss

@@ -14,8 +14,4 @@ button {
 .backdrop-blur {
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
-}
-
-.faggot {
-  display:none;
 }

packages/ui/style/tailwind.config.js

@@ -3,7 +3,7 @@
 // const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  content: ['./src/index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: ['../../{apps,packages}/*/src/**/*.{js,ts,jsx,tsx,html}'],
   darkMode: 'media',
   mode: 'jit',
   theme: {