Initial commit

packages/vite-config/lib/build-content-script.ts

@@ -0,0 +1,96 @@
+import { withPageConfig } from './index.js';
+import { IS_DEV } from '@extension/env';
+import { makeEntryPointPlugin } from '@extension/hmr';
+import { build as buildTW } from 'tailwindcss/lib/cli/build';
+import { build } from 'vite';
+import { readdirSync, statSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+interface IContentBuilderProps {
+  matchesDir: string;
+  srcDir: string;
+  rootDir: string;
+  contentName: 'content' | 'content-ui' | 'content-runtime';
+  withTw: boolean;
+}
+
+type BuilderPropsType = Omit<IContentBuilderProps, 'withTw'>;
+
+const getContentScriptEntries = (matchesDir: string) => {
+  const entryPoints: Record<string, string> = {};
+  const entries = readdirSync(matchesDir);
+
+  entries.forEach((folder: string) => {
+    const filePath = resolve(matchesDir, folder);
+    const isFolder = statSync(filePath).isDirectory();
+    const haveIndexTsFile = readdirSync(filePath).includes('config.ts');
+    const haveIndexTsxFile = readdirSync(filePath).includes('index.tsx');
+
+    if (isFolder && !(haveIndexTsFile || haveIndexTsxFile)) {
+      throw new Error(`${folder} in \`matches\` doesn't have index.ts or index.tsx file`);
+    } else {
+      entryPoints[folder] = resolve(filePath, haveIndexTsFile ? 'config.ts' : 'index.tsx');
+    }
+  });
+
+  return entryPoints;
+};
+
+const configsBuilder = ({ matchesDir, srcDir, rootDir, contentName }: BuilderPropsType) =>
+  Object.entries(getContentScriptEntries(matchesDir)).map(([name, entry]) => ({
+    name,
+    config: withPageConfig({
+      mode: IS_DEV ? 'development' : undefined,
+      resolve: {
+        alias: {
+          '@src': srcDir,
+        },
+      },
+      publicDir: resolve(rootDir, 'public'),
+      plugins: [IS_DEV && makeEntryPointPlugin()],
+      build: {
+        lib: {
+          name: name,
+          formats: ['iife'],
+          entry,
+          fileName: name,
+        },
+        outDir: resolve(rootDir, '..', '..', 'dist', contentName),
+      },
+    }),
+  }));
+
+const builds = async ({ srcDir, contentName, rootDir, matchesDir, withTw }: IContentBuilderProps) =>
+  configsBuilder({ matchesDir, srcDir, rootDir, contentName }).map(async ({ name, config }) => {
+    if (withTw) {
+      const folder = resolve(matchesDir, name);
+      const args = {
+        ['--input']: resolve(folder, 'index.css'),
+        ['--output']: resolve(rootDir, 'dist', name, 'index.css'),
+        ['--config']: resolve(rootDir, 'tailwind.config.ts'),
+        ['--watch']: IS_DEV,
+      };
+
+      await buildTW(args);
+    }
+
+    //@ts-expect-error This is hidden property from vite's resolveConfig()
+    config.configFile = false;
+    return build(config);
+  });
+
+// FIXME: USE THIS FOR ALL CONTENT SCRIPTs
+export const contentBuilder = async ({
+  matchesDir,
+  srcDir,
+  rootDir,
+  contentName,
+  withTw = true,
+}: IContentBuilderProps) =>
+  builds({
+    srcDir,
+    contentName,
+    rootDir,
+    matchesDir,
+    withTw,
+  });

packages/vite-config/lib/get-content-script-entires.ts

@@ -0,0 +1,22 @@
+import { readdirSync, statSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+export const getContentScriptEntries = (matchesDir: string) => {
+  const entryPoints: Record<string, string> = {};
+  const entries = readdirSync(matchesDir);
+
+  entries.forEach((folder: string) => {
+    const filePath = resolve(matchesDir, folder);
+    const isFolder = statSync(filePath).isDirectory();
+    const haveIndexTsFile = readdirSync(filePath).includes('index.ts');
+    const haveIndexTsxFile = readdirSync(filePath).includes('index.tsx');
+
+    if (isFolder && !(haveIndexTsFile || haveIndexTsxFile)) {
+      throw new Error(`${folder} in \`matches\` doesn't have index.ts or index.tsx file`);
+    } else {
+      entryPoints[folder] = resolve(filePath, haveIndexTsFile ? 'index.ts' : 'index.tsx');
+    }
+  });
+
+  return entryPoints;
+};

packages/vite-config/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './with-page-config.js';
+export * from './get-content-script-entires.js';

packages/vite-config/lib/with-page-config.ts

@@ -0,0 +1,39 @@
+import env, { IS_DEV, IS_PROD } from '@extension/env';
+import { watchRebuildPlugin } from '@extension/hmr';
+import react from '@vitejs/plugin-react-swc';
+import deepmerge from 'deepmerge';
+import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import type { UserConfig } from 'vite';
+
+export const watchOption = IS_DEV
+  ? {
+      chokidar: {
+        awaitWriteFinish: true,
+      },
+    }
+  : undefined;
+
+export const withPageConfig = (config: UserConfig) =>
+  defineConfig(
+    deepmerge(
+      {
+        define: {
+          'process.env': env,
+        },
+        base: '',
+        plugins: [react(), IS_DEV && watchRebuildPlugin({ refresh: true }), nodePolyfills()],
+        build: {
+          sourcemap: IS_DEV,
+          minify: IS_PROD,
+          reportCompressedSize: IS_PROD,
+          emptyOutDir: IS_PROD,
+          watch: watchOption,
+          rollupOptions: {
+            external: ['chrome'],
+          },
+        },
+      },
+      config,
+    ),
+  );