chore: refactor individual components with common configuration (#641)

configuration/tailwind.common.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+
+import { twPlugin } from "@versini/ui-styles";
+
+export const commonTailwindConfigForComponent = () => {
+	return twPlugin.merge({
+		content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+	});
+};

configuration/tsconfig.common.json

@@ -1,68 +1,24 @@
 {
-	"$schema": "https://json.schemastore.org/tsconfig",
-	"ts-node": {
-		"swc": true
-	},
 	"compilerOptions": {
-		/** Allow JavaScript files to be imported inside your project,
-		 * instead of just .ts and .tsx files.
-		 */
-		"allowJs": true,
-		/**
-		 * Allow default imports from modules with no default export.
-		 */
-		"allowSyntheticDefaultImports": true,
-		/**
-		 * Generate .d.ts files for every TypeScript or JavaScript file
-		 * inside your project.
-		 */
-		"declaration": true,
-		/**
-		 * Only output d.ts files and not JavaScript files.
-		 */
-		"emitDeclarationOnly": true,
-		/**
-		 * Emit additional JavaScript to ease support for importing
-		 * CommonJS modules.
-		 */
-		"esModuleInterop": false,
-		/**
-		 * Ensure that each file can be safely transpiled without
-		 * relying on other imports.
-		 */
-		"isolatedModules": true,
-		/**
-		 * Specify a set of bundled library declaration files that
-		 * describe the target runtime environment.
-		 */
-		"lib": ["ESNext"],
-		/**
-		 * Specify what module code is generated.
-		 */
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
 		"module": "ESNext",
-		/**
-		 * Specify the module resolution strategy:
-		 * - 'node' for Node.js’ CommonJS implementation
-		 * - 'node16' or 'nodenext' for Node.js’ ECMAScript Module Support
-		 *   from TypeScript 4.7 onwards
-		 */
-		"moduleResolution": "nodenext",
-		/**
-		 * Enable importing .json files
-		 */
-		"resolveJsonModule": true,
-		/**
-		 * Skip type checking of all declaration files (*.d.ts).
-		 */
 		"skipLibCheck": true,
-		/**
-		 * Enable all strict type checking options.
-		 */
-		"strict": false,
-		/**
-		 * Set the JavaScript language version for emitted JavaScript
-		 * and include compatible library declarations.
-		 */
-		"target": "ESNext"
+		"types": ["vitest/globals", "@testing-library/jest-dom"],
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
 	}
 }

configuration/tsup.common.js

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export const commonTsupConfig = defineConfig({
+	format: "esm",
+	entry: {
+		index: "src/components/index.ts",
+	},
+	outDir: "dist",
+	dts: {
+		only: true,
+	},
+});

configuration/vite.common.js

@@ -1,3 +1,10 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import fs from "fs-extra";
+import { glob } from "glob";
+import { defineConfig } from "vite";
+
 export const externalDependencies = [
 	"@floating-ui/react",
 	"@tailwindcss/typography",
@@ -8,3 +15,112 @@ export const externalDependencies = [
 	"react-dom/server",
 	"tailwindcss",
 ];
+
+export const commonViteConfigForComponent = ({
+	globalComponentName,
+	globalLibraryName,
+}) => {
+	const cwd = process.cwd();
+	const packageJson = fs.readJSONSync(path.join(cwd, "package.json"));
+	const copyrightYear = new Date(Date.now()).getFullYear();
+	const buildTime = new Date()
+		.toLocaleString("en-US", {
+			timeZone: "America/New_York",
+			timeZoneName: "short",
+			year: "numeric",
+			month: "2-digit",
+			day: "2-digit",
+			hour: "2-digit",
+			minute: "2-digit",
+		})
+		.replace(/,/g, "");
+	const banner = `/*!
+  ${packageJson.name} v${packageJson.version}
+  © ${copyrightYear} gizmette.com
+*/
+try {
+  if (!window.${globalComponentName}) {
+    window.${globalComponentName} = {
+      version: "${packageJson.version}",
+			buildTime: "${buildTime}",
+			homepage: "${packageJson.homepage}",
+			license: "${packageJson.license}",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
+}
+`;
+	return defineConfig(({ mode }) => {
+		const isDev = mode === "development";
+		/**
+		 * Build a list of public files, which means all files in the
+		 * src/components/ComponentName folders.
+		 * Everything else will be moved to the chunk folder.
+		 */
+		const input = isDev
+			? {}
+			: Object.fromEntries(
+					glob
+						.sync(path.join(cwd, "src/**/*.{ts,tsx}"))
+						.filter((file) => {
+							return file.match(
+								/src\/components\/[A-Z][a-zA-Z]*\/[A-Z][a-zA-Z]*\.tsx/,
+							)
+								? file
+								: null;
+						})
+						.map((file) => {
+							return [
+								// This remove `src/` as well as the file extension from each
+								// file, so e.g. src/nested/foo.js becomes nested/foo
+								path.relative(
+									path.join(cwd, "src"),
+									file.slice(0, file.length - path.extname(file).length),
+								),
+								// This expands the relative paths to absolute paths, so e.g.
+								// src/nested/foo becomes /project/src/nested/foo.js
+								fileURLToPath(new URL(file, import.meta.url)),
+							];
+						}),
+				);
+
+		return {
+			build: {
+				copyPublicDir: false,
+				lib: {
+					entry: path.join(cwd, "src/components/index.ts"),
+					formats: ["es"],
+					name: globalLibraryName,
+				},
+				rollupOptions: {
+					input: {
+						index: path.join(cwd, "src/components/index.ts"),
+						style: path.join(cwd, "src/style.ts"),
+						...input,
+					},
+					treeshake: "smallest",
+					external: externalDependencies,
+					output: {
+						compact: true,
+						minifyInternalExports: false,
+						assetFileNames: "style[extname]",
+						entryFileNames: "[name].js",
+						chunkFileNames: "chunks/[name].[hash].js",
+						banner: (module) => {
+							if (module?.facadeModuleId?.endsWith("src/components/index.ts")) {
+								return banner;
+							}
+						},
+					},
+				},
+			},
+			esbuild: {
+				supported: {
+					"top-level-await": true,
+				},
+			},
+			plugins: [],
+		};
+	});
+};

configuration/vitestconfig.common.ts

@@ -0,0 +1,29 @@
+/// <reference types="vitest" />
+
+import path from "node:path";
+import { defineConfig, mergeConfig } from "vitest/config";
+
+export const commonVitestConfig = (viteConfig) => {
+	return defineConfig((configEnv) =>
+		mergeConfig(
+			viteConfig(configEnv),
+			defineConfig({
+				test: {
+					globals: true,
+					setupFiles: [path.join(__dirname, "./vitest.setup.ts")],
+					environment: "happy-dom",
+					coverage: {
+						include: ["src/**/*.ts", "src/**/*.tsx", "!src/style.ts"],
+						provider: "v8",
+						thresholds: {
+							statements: 100,
+							branches: 100,
+							functions: 100,
+							lines: 100,
+						},
+					},
+				},
+			}),
+		),
+	);
+};

packages/ui-anchor/tailwind.config.js

@@ -1,7 +1,2 @@
-/** @type {import('tailwindcss').Config} */
-
-import { twPlugin } from "@versini/ui-styles";
-
-export default twPlugin.merge({
-	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-});
+import { commonTailwindConfigForComponent } from "../../configuration/tailwind.common";
+export default commonTailwindConfigForComponent();

packages/ui-anchor/tsconfig.json

@@ -1,26 +1,4 @@
 {
-	"compilerOptions": {
-		"target": "ES2020",
-		"useDefineForClassFields": true,
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
-		"skipLibCheck": true,
-		"types": ["vitest/globals", "@testing-library/jest-dom"],
-
-		/* Bundler mode */
-		"moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"noEmit": true,
-		"jsx": "react-jsx",
-
-		/* Linting */
-		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
-	},
-	"include": ["src"],
-	"references": [{ "path": "./tsconfig.node.json" }]
+	"extends": "../../configuration/tsconfig.common.json",
+	"include": ["src"]
 }

packages/ui-anchor/tsup.config.ts

@@ -1,12 +1,2 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-	format: "esm",
-	entry: {
-		index: "src/components/index.ts",
-	},
-	outDir: "dist",
-	dts: {
-		only: true,
-	},
-});
+import { commonTsupConfig } from "../../configuration/tsup.common";
+export default commonTsupConfig;