mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-02 11:13:29 +00:00
standardise vite configs (#662)
* standardise vite configs * remove storybook from @sd/ui * update pnpm lock
This commit is contained in:
Brendan Allan
GitHub
parent
fc830ff922
commit
3aac6254bb
|
|
@ -1,52 +1,24 @@
|
|||
import { relativeAliasResolver } from '@sd/config/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
import { createHtmlPlugin } from 'vite-plugin-html';
|
||||
import svg from 'vite-plugin-svgr';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
import { name, version } from './package.json';
|
||||
import { Plugin, mergeConfig } from 'vite';
|
||||
import baseConfig from '../../packages/config/vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
const devtoolsPlugin: Plugin = {
|
||||
name: 'devtools-plugin',
|
||||
transformIndexHtml(html) {
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
if (isDev) {
|
||||
const devtoolsScript = `<script src="http://localhost:8097"></script>`;
|
||||
const headTagIndex = html.indexOf('</head>');
|
||||
if (headTagIndex > -1) {
|
||||
return html.slice(0, headTagIndex) + devtoolsScript + html.slice(headTagIndex);
|
||||
}
|
||||
}
|
||||
return html;
|
||||
}
|
||||
};
|
||||
|
||||
export default mergeConfig(baseConfig, {
|
||||
server: {
|
||||
port: 8001
|
||||
},
|
||||
plugins: [
|
||||
tsconfigPaths(),
|
||||
react(),
|
||||
svg({ svgrOptions: { icon: true } }),
|
||||
{
|
||||
name: 'devtools-plugin',
|
||||
transformIndexHtml(html) {
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
if (isDev) {
|
||||
const devtoolsScript = `<script src="http://localhost:8097"></script>`;
|
||||
const headTagIndex = html.indexOf('</head>');
|
||||
if (headTagIndex > -1) {
|
||||
return html.slice(0, headTagIndex) + devtoolsScript + html.slice(headTagIndex);
|
||||
}
|
||||
}
|
||||
return html;
|
||||
}
|
||||
},
|
||||
createHtmlPlugin({
|
||||
minify: true
|
||||
})
|
||||
],
|
||||
css: {
|
||||
modules: {
|
||||
localsConvention: 'camelCaseOnly'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: [relativeAliasResolver]
|
||||
},
|
||||
root: 'src',
|
||||
define: {
|
||||
pkgJson: { name, version }
|
||||
},
|
||||
build: {
|
||||
outDir: '../dist',
|
||||
assetsDir: '.'
|
||||
}
|
||||
plugins: [devtoolsPlugin]
|
||||
});
|
||||
|
|
|
|||
24
apps/storybook/.gitignore
vendored
Normal file
24
apps/storybook/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -1,7 +1,18 @@
|
|||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
stories: [
|
||||
{
|
||||
directory: '../../../packages/ui/src/**',
|
||||
titlePrefix: 'UI',
|
||||
files: '*.stories.*'
|
||||
},
|
||||
{
|
||||
directory: '../../../interface/app/**',
|
||||
titlePrefix: 'Interface',
|
||||
files: '*.stories.*'
|
||||
}
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import type { Preview } from '@storybook/react';
|
||||
import '../style/style.scss';
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
13
apps/storybook/index.html
Normal file
13
apps/storybook/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
31
apps/storybook/package.json
Normal file
31
apps/storybook/package.json
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "@sd/storybook",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-essentials": "^7.0.0-rc.10",
|
||||
"@storybook/addon-interactions": "^7.0.0-rc.10",
|
||||
"@storybook/addon-links": "^7.0.0-rc.10",
|
||||
"@storybook/blocks": "^7.0.0-rc.10",
|
||||
"@storybook/react": "^7.0.0-rc.10",
|
||||
"@storybook/react-vite": "^7.0.0-rc.10",
|
||||
"@storybook/testing-library": "^0.0.14-next.1",
|
||||
"@sd/config": "workspace:*",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"storybook": "^7.0.0-rc.10",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.2.0"
|
||||
}
|
||||
}
|
||||
1
apps/storybook/public/vite.svg
Normal file
1
apps/storybook/public/vite.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
19
apps/storybook/tsconfig.json
Normal file
19
apps/storybook/tsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
}
|
||||
}
|
||||
4
apps/storybook/vite.config.ts
Normal file
4
apps/storybook/vite.config.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import baseConfig from '../../packages/config/vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default baseConfig;
|
||||
|
|
@ -3,7 +3,6 @@ import React, { Suspense } from 'react';
|
|||
import ReactDOM from 'react-dom/client';
|
||||
import '@sd/ui/style';
|
||||
import '~/patches';
|
||||
import '~/patches';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
|
||||
|
|
|
|||
|
|
@ -1,43 +1,15 @@
|
|||
import { relativeAliasResolver } from '@sd/config/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
import { defineConfig } from 'vite';
|
||||
import { createHtmlPlugin } from 'vite-plugin-html';
|
||||
import svg from 'vite-plugin-svgr';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
import { name, version } from './package.json';
|
||||
import { mergeConfig } from 'vite';
|
||||
import baseConfig from '../../packages/config/vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
export default mergeConfig(baseConfig, {
|
||||
server: {
|
||||
port: 8002
|
||||
},
|
||||
plugins: [
|
||||
tsconfigPaths(),
|
||||
react(),
|
||||
svg({ svgrOptions: { icon: true } }),
|
||||
createHtmlPlugin({
|
||||
minify: true
|
||||
}),
|
||||
visualizer({
|
||||
gzipSize: true,
|
||||
brotliSize: true
|
||||
})
|
||||
],
|
||||
css: {
|
||||
modules: {
|
||||
localsConvention: 'camelCaseOnly'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: [relativeAliasResolver]
|
||||
},
|
||||
root: 'src',
|
||||
define: {
|
||||
pkgJson: { name, version }
|
||||
},
|
||||
build: {
|
||||
outDir: '../dist',
|
||||
assetsDir: '.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"license": "GPL-3.0-only",
|
||||
"exports": {
|
||||
"./*": "./*",
|
||||
"./vite": "./vite/index.js"
|
||||
"./vite": "./vite"
|
||||
},
|
||||
"files": [
|
||||
"eslint-react.js"
|
||||
|
|
@ -17,6 +17,8 @@
|
|||
"eslint-config-turbo": "^0.0.7",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-tailwindcss": "^3.8.3"
|
||||
"eslint-plugin-tailwindcss": "^3.8.3",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-svgr": "^2.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
packages/config/vite/index.d.ts
vendored
4
packages/config/vite/index.d.ts
vendored
|
|
@ -1,4 +0,0 @@
|
|||
import type { Alias } from 'vite';
|
||||
|
||||
// should technically be const but Prettier somehow dislikes parsing this file that way
|
||||
export let relativeAliasResolver: Alias;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
const fs = require('fs/promises');
|
||||
const path = require('path');
|
||||
|
||||
let pkgJsonCache = new Map();
|
||||
|
||||
// only supports files rn
|
||||
module.exports = {
|
||||
relativeAliasResolver: {
|
||||
find: /^(~\/.+)/,
|
||||
replacement: '$1',
|
||||
async customResolver(source, importer) {
|
||||
let root = null;
|
||||
|
||||
const [_, sourcePath] = source.split('~/');
|
||||
|
||||
if (importer.includes('/src/')) {
|
||||
const [pkg] = importer.split('/src/');
|
||||
|
||||
root = `${pkg}/src`;
|
||||
} else {
|
||||
let parent = importer;
|
||||
|
||||
while (parent !== '/') {
|
||||
parent = path.dirname(parent);
|
||||
|
||||
let hasPkgJson = pkgJsonCache.get(parent);
|
||||
|
||||
if (hasPkgJson === undefined)
|
||||
try {
|
||||
await fs.stat(`${parent}/package.json`);
|
||||
pkgJsonCache.set(parent, (hasPkgJson = true));
|
||||
} catch {
|
||||
pkgJsonCache.set(parent, (hasPkgJson = false));
|
||||
}
|
||||
|
||||
if (hasPkgJson) {
|
||||
root = parent;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (root === null)
|
||||
throw new Error(`Failed to resolve import path ${source} in file ${importer}`);
|
||||
}
|
||||
|
||||
const absolutePath = `${root}/${sourcePath}`;
|
||||
|
||||
const folderItems = await fs.readdir(path.join(absolutePath, '../'));
|
||||
|
||||
const item = folderItems.find((i) => i.startsWith(sourcePath.split('/').at(-1)));
|
||||
|
||||
const fullPath = absolutePath + path.extname(item);
|
||||
|
||||
const stats = await fs.stat(fullPath);
|
||||
|
||||
if (stats.isDirectory()) {
|
||||
const directoryItems = await fs.readdir(absolutePath + path.extname(item));
|
||||
|
||||
const indexFile = directoryItems.find((i) => i.startsWith('index'));
|
||||
|
||||
return `${absolutePath}/${indexFile}`;
|
||||
} else {
|
||||
return fullPath;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
31
packages/config/vite/index.ts
Normal file
31
packages/config/vite/index.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import react from '@vitejs/plugin-react';
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
import { defineConfig } from 'vite';
|
||||
import { createHtmlPlugin } from 'vite-plugin-html';
|
||||
import svg from 'vite-plugin-svgr';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
import relativeAliasResolver from './relativeAliasResolver';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
tsconfigPaths(),
|
||||
react(),
|
||||
svg({ svgrOptions: { icon: true } }),
|
||||
createHtmlPlugin({
|
||||
minify: true
|
||||
})
|
||||
],
|
||||
css: {
|
||||
modules: {
|
||||
localsConvention: 'camelCaseOnly'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: [relativeAliasResolver]
|
||||
},
|
||||
root: 'src',
|
||||
build: {
|
||||
outDir: '../dist',
|
||||
assetsDir: '.'
|
||||
}
|
||||
});
|
||||
67
packages/config/vite/relativeAliasResolver.ts
Normal file
67
packages/config/vite/relativeAliasResolver.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
import { Alias } from 'vite';
|
||||
|
||||
let pkgJsonCache = new Map();
|
||||
|
||||
const resolver: Alias = {
|
||||
find: /^(~\/.+)/,
|
||||
replacement: '$1',
|
||||
async customResolver(source, importer) {
|
||||
let root: null | string = null;
|
||||
|
||||
const [_, sourcePath] = source.split('~/');
|
||||
|
||||
if (importer!.includes('/src/')) {
|
||||
const [pkg] = importer!.split('/src/');
|
||||
|
||||
root = `${pkg!}/src`;
|
||||
} else {
|
||||
let parent = importer!;
|
||||
|
||||
while (parent !== '/') {
|
||||
parent = path.dirname(parent);
|
||||
|
||||
let hasPkgJson = pkgJsonCache.get(parent);
|
||||
|
||||
if (hasPkgJson === undefined)
|
||||
try {
|
||||
await fs.stat(`${parent}/package.json`);
|
||||
pkgJsonCache.set(parent, (hasPkgJson = true));
|
||||
} catch {
|
||||
pkgJsonCache.set(parent, (hasPkgJson = false));
|
||||
}
|
||||
|
||||
if (hasPkgJson) {
|
||||
root = parent;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (root === null)
|
||||
throw new Error(`Failed to resolve import path ${source} in file ${importer}`);
|
||||
}
|
||||
|
||||
const absolutePath = `${root}/${sourcePath}`;
|
||||
|
||||
const folderItems = await fs.readdir(path.join(absolutePath, '../'));
|
||||
|
||||
const item = folderItems.find((i) => i.startsWith(sourcePath.split('/').at(-1)!))!;
|
||||
|
||||
const fullPath = absolutePath + path.extname(item);
|
||||
|
||||
const stats = await fs.stat(fullPath);
|
||||
|
||||
if (stats.isDirectory()) {
|
||||
const directoryItems = await fs.readdir(absolutePath + path.extname(item));
|
||||
|
||||
const indexFile = directoryItems.find((i) => i.startsWith('index'));
|
||||
|
||||
return `${absolutePath}/${indexFile}`;
|
||||
} else {
|
||||
return fullPath;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default resolver;
|
||||
|
|
@ -14,11 +14,9 @@
|
|||
"./package.json": "./package.json"
|
||||
},
|
||||
"scripts": {
|
||||
"storybook:build": "build-storybook",
|
||||
"lint": "eslint src",
|
||||
"typecheck": "tsc -b",
|
||||
"build": "tsc",
|
||||
"build-storybook": "storybook build"
|
||||
"build": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.3",
|
||||
|
|
@ -48,11 +46,6 @@
|
|||
"devDependencies": {
|
||||
"@babel/core": "^7.19.3",
|
||||
"@sd/config": "workspace:*",
|
||||
"@storybook/addon-essentials": "^7.0.0-rc.9",
|
||||
"@storybook/addon-interactions": "^7.0.0-rc.9",
|
||||
"@storybook/addon-links": "^7.0.0-rc.9",
|
||||
"@storybook/blocks": "^7.0.0-rc.9",
|
||||
"@storybook/react-vite": "^7.0.0-rc.9",
|
||||
"@tailwindcss/line-clamp": "^0.4.2",
|
||||
"@tailwindcss/typography": "^0.5.7",
|
||||
"@types/node": "^18.15.1",
|
||||
|
|
@ -60,13 +53,8 @@
|
|||
"@types/react-dom": "^18.0.6",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"babel-loader": "^8.2.5",
|
||||
"css-loader": "^6.7.1",
|
||||
"postcss-loader": "^7.0.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"sass": "^1.55.0",
|
||||
"sass-loader": "^13.0.2",
|
||||
"storybook": "^7.0.0-rc.9",
|
||||
"storybook-tailwind-dark-mode": "^1.0.15",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.1.8",
|
||||
"tailwindcss-animate": "^1.0.5",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/react';
|
|||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
title: 'UI/Button',
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {},
|
||||
parameters: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|||
import { Root } from './Dropdown';
|
||||
|
||||
export default {
|
||||
title: 'UI/Dropdown',
|
||||
title: 'Dropdown',
|
||||
component: Root,
|
||||
argTypes: {},
|
||||
parameters: {
|
||||
|
|
|
|||
3505
pnpm-lock.yaml
3505
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue