Merge branch 'main' into fix-missing-dynamic-tailwind-margins-in-the-…

…CSS-bundle
versini-org · Nov 14, 2023 · b9e3043 · b9e3043
2 parents bc343e3 + 26ca39f
commit b9e3043
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 4 deletions.
diff --git a/bundlemon.config.cjs b/bundlemon.config.cjs
@@ -1,18 +1,18 @@
 module.exports = {
 	reportOutput: ["github"],
-	baseDir: "./packages/documentation/dist",
+	baseDir: "./packages/bundlesize/dist",
 	defaultCompression: "gzip",
 	files: [
 		{
 			path: "index.html",
 			maxSize: "2kb",
 		},
 		{
-			path: "assets/index-<hash>.js",
+			path: "assets/index.js",
 			maxSize: "60kb",
 		},
 		{
-			path: "assets/index-<hash>.css",
+			path: "assets/style.css",
 			maxSize: "3kb",
 		},
 		{

diff --git a/packages/bundlesize/.eslintrc.cjs b/packages/bundlesize/.eslintrc.cjs
@@ -0,0 +1,25 @@
+module.exports = {
+	root: true,
+	env: { browser: true, es2020: true },
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react-hooks/recommended",
+		"prettier",
+		"../../configuration/eslint-rules/best-practices.cjs",
+		"../../configuration/eslint-rules/possible-errors.cjs",
+		"../../configuration/eslint-rules/variables.cjs",
+	],
+	ignorePatterns: ["dist", ".eslintrc.cjs"],
+	parser: "@typescript-eslint/parser",
+	plugins: ["react-refresh", "simple-import-sort"],
+	rules: {
+		"@typescript-eslint/no-explicit-any": "off",
+		"react-refresh/only-export-components": [
+			"warn",
+			{ allowConstantExport: true },
+		],
+		"simple-import-sort/imports": "error",
+		"simple-import-sort/exports": "error",
+	},
+};
diff --git a/packages/bundlesize/index.html b/packages/bundlesize/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#64748b">
+  <link rel="icon" type="image/png" href="/favicon.ico?v=2">
+
+  <title>UI Components</title>
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/packages/bundlesize/package.json b/packages/bundlesize/package.json
@@ -0,0 +1,20 @@
+{
+	"name": "@versini/bundlesize",
+	"version": "1.0.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"bundlesize": "bundlemon",
+		"clean": "rimraf dist",
+		"build": "yarn run clean && vite build",
+		"test": "echo \"WARNING: no test specified\" && exit 0",
+		"test:coverage": "echo \"WARNING: no test specified\" && exit 0"
+	},
+	"dependencies": {
+		"@versini/ui-components": "*",
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	}
+}
diff --git a/packages/bundlesize/src/main.tsx b/packages/bundlesize/src/main.tsx
@@ -0,0 +1,18 @@
+import "@versini/ui-components/dist/style.css";
+
+import * as UI from "@versini/ui-components";
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+Object.keys(UI).forEach(() => {
+	/**
+	 * This is simply to loop through all components
+	 * and trick rollup into bundling them (instead of
+	 * simply tree-shaking anything that is imported but
+	 * not used...)
+	 */
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>hello</React.StrictMode>,
+);
diff --git a/packages/bundlesize/src/vite-env.d.ts b/packages/bundlesize/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/bundlesize/tsconfig.json b/packages/bundlesize/tsconfig.json
@@ -0,0 +1,26 @@
+{
+	"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" }]
+}
diff --git a/packages/bundlesize/tsconfig.node.json b/packages/bundlesize/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["./vite.config.ts", "./vitest.setup.ts"]
+}
diff --git a/packages/bundlesize/vite.config.ts b/packages/bundlesize/vite.config.ts
@@ -0,0 +1,45 @@
+import fs from "fs-extra";
+import { defineConfig } from "vite";
+
+const packageJson = fs.readJSONSync("package.json");
+
+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, "");
+
+export default defineConfig({
+	esbuild: {
+		supported: {
+			"top-level-await": true, //browsers can handle top-level-await features
+		},
+	},
+	build: {
+		rollupOptions: {
+			external: [
+				"@floating-ui/react",
+				"@tailwindcss/typography",
+				"react",
+				"react/jsx-runtime",
+				"react-dom",
+				"tailwindcss",
+			],
+			output: {
+				assetFileNames: "assets/style[extname]",
+				entryFileNames: "assets/[name].js",
+			},
+		},
+	},
+	define: {
+		"import.meta.env.BUILDTIME": JSON.stringify(buildTime),
+		"import.meta.env.BUILDVERSION": JSON.stringify(packageJson.version),
+	},
+	plugins: [],
+});
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -8,7 +8,6 @@
 	"scripts": {
 		"build:storybook": "storybook build -o dist",
 		"build": "npm-run-all --serial clean build:storybook",
-		"bundlesize": "bundlemon",
 		"clean": "rimraf dist",
 		"dev": "storybook dev -p 6006 --no-open",
 		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",

diff --git a/yarn.lock b/yarn.lock
@@ -5225,6 +5225,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@versini/bundlesize@workspace:packages/bundlesize":
+  version: 0.0.0-use.local
+  resolution: "@versini/bundlesize@workspace:packages/bundlesize"
+  dependencies:
+    "@versini/ui-components": "npm:*"
+    react: "npm:18.2.0"
+    react-dom: "npm:18.2.0"
+  languageName: unknown
+  linkType: soft
+
 "@versini/dev-dependencies-client@npm:1.2.1":
   version: 1.2.1
   resolution: "@versini/dev-dependencies-client@npm:1.2.1"