Ocrolus · jbruce1-ocrolus · Nov 2, 2024 · Nov 5, 2024 · Nov 6, 2024
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
@@ -0,0 +1,36 @@
+import esbuild from 'esbuild';
+
+const buildOptions = (entry, outdir) => ({
+  entryPoints: [entry],
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  target: 'esnext',
+  loader: { '.ts': 'ts', '.tsx': 'tsx' },
+  outdir,
+  external: ['react', 'react-dom'], // Prevents bundling React dependencies
+});
+
+async function build() {
+  // Build ocrolus-widget-react package
+  await esbuild.build({
+    ...buildOptions('packages/ocrolus-widget-react/src/index.tsx', 'packages/ocrolus-widget-react/dist'),
+    format: 'cjs',
+    outExtension: { '.js': '.cjs' },
+  });
+
+  await esbuild.build({
+    ...buildOptions('packages/ocrolus-widget-react/src/index.tsx', 'packages/ocrolus-widget-react/dist'),
+    format: 'esm',
+    outExtension: { '.js': '.mjs' },
+  });
+
+  // Build example package
+  await esbuild.build({
+    ...buildOptions('packages/example/src/index.tsx', 'packages/example/dist'),
+    format: 'esm',
+    outExtension: { '.js': '.mjs' },
+  });
+}
+
+build().catch(() => process.exit(1));
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,161 @@
+import typescriptEslint from "typescript-eslint";
+import typescriptParser from "@typescript-eslint/parser";
+import unusedImports from "eslint-plugin-unused-imports";
+import react from "eslint-plugin-react";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import reactHooks from "eslint-plugin-react-hooks";
+import prettier from "eslint-config-prettier";
+import pluginJs from "@eslint/js";
+import globals from "globals";
+import pluginJest from 'eslint-plugin-jest';
+
+export default typescriptEslint.config(
+  ...typescriptEslint.configs.recommended,
+  { files: ["**/*.{js,ts,jsx,tsx}"] },
+  pluginJs.configs.recommended,
+  react.configs.flat.recommended,
+  prettier,
+  {
+    settings: {
+      react: {
+        version: "18.2.0",
+      },
+    },
+    plugins: {
+      "unused-imports": unusedImports,
+      react,
+      "jsx-a11y": jsxA11y,
+      "react-hooks": reactHooks,
+      jest: pluginJest,
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...pluginJest.environments.globals.globals,
+        JSX: "readonly",
+      },
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "react/display-name": "off",
+      "react/prop-types": "off",
+      "react/no-unknown-property": ["error", { ignore: ["css"] }],
+      curly: ["error", "all"],
+      "no-console": "error",
+      "prefer-object-spread": "error",
+      "wrap-iife": "error",
+      "prefer-rest-params": "error",
+      "default-param-last": "off",
+      "@typescript-eslint/default-param-last": "error",
+      "prefer-spread": "error",
+      "operator-linebreak": "error",
+      "no-unused-expressions": ["error", { allowShortCircuit: true }],
+      "no-unused-private-class-members": "error",
+      "array-bracket-newline": ["error", "consistent"],
+      "array-callback-return": "error",
+      "arrow-body-style": ["error", "as-needed"],
+      "arrow-parens": ["error", "as-needed"],
+      "block-scoped-var": "error",
+      camelcase: "off",
+      "class-methods-use-this": "error",
+      "comma-dangle": ["error", "always-multiline"],
+      "comma-spacing": "off", // Prettier handles this
+      "dot-location": ["error", "property"],
+      "dot-notation": "error",
+      "eol-last": "error",
+      eqeqeq: "error",
+      "func-names": "error",
+      "no-alert": "error",
+      "no-caller": "error",
+      "no-constructor-return": "error",
+      "no-div-regex": "error",
+      "no-else-return": "error",
+      "no-empty-function": "off",
+      "no-eq-null": "error",
+      "no-eval": "error",
+      "no-extend-native": "error",
+      "no-extra-bind": "error",
+      "no-extra-label": "error",
+      "no-implied-eval": "error",
+      "no-invalid-this": "off",
+      "no-iterator": "error",
+      "no-labels": "error",
+      "no-lone-blocks": "error",
+      "no-lonely-if": "error",
+      "no-loop-func": "error",
+      "no-multi-assign": "error",
+      "no-negated-condition": "off",
+      "no-new": "error",
+      "no-new-func": "error",
+      "no-new-object": "error",
+      "no-new-wrappers": "error",
+      "no-param-reassign": "error",
+      "no-proto": "error",
+      "no-return-assign": "error",
+      "no-return-await": "error",
+      "no-script-url": "error",
+      "no-self-compare": "error",
+      "no-sequences": "error",
+      "no-shadow": "off",
+      "no-template-curly-in-string": "error",
+      "no-throw-literal": "error",
+      "no-undef-init": "error",
+      "no-undefined": "off",
+      "no-unmodified-loop-condition": "error",
+      "no-unneeded-ternary": "error",
+      "no-unreachable-loop": "error",
+      "no-unsafe-optional-chaining": "error",
+      "no-useless-backreference": "error",
+      "no-useless-call": "error",
+      "no-useless-computed-key": "error",
+      "no-useless-concat": "error",
+      "no-useless-return": "error",
+      "no-var": "error",
+      "no-void": "error",
+      "no-whitespace-before-property": "error",
+      "object-shorthand": "error",
+      "prefer-arrow-callback": "error",
+      "prefer-const": "error",
+      "prefer-destructuring": "error",
+      "no-trailing-spaces": "error",
+      "require-atomic-updates": "error",
+      "jsx-a11y/click-events-have-key-events": "off",
+      "jsx-a11y/no-static-element-interactions": "off",
+      "jsx-a11y/mouse-events-have-key-events": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-empty-interface": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-non-null-assertion": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+      "react-hooks/exhaustive-deps": "error",
+      "jsx-a11y/img-redundant-alt": "off",
+      "jsx-a11y/no-autofocus": "off",
+      "no-duplicate-imports": "off",
+      "no-restricted-imports": ["error", { patterns: [".*"] }],
+    },
+  },
+);
diff --git a/jest.setup.js b/jest.setup.js
@@ -1 +1 @@
-require('@testing-library/jest-dom');
+require('@testing-library/jest-dom');
diff --git a/package.json b/package.json
@@ -1,71 +1,33 @@
 {
-  "name": "ocrolus-widget-react",
-  "version": "1.0.12",
-  "description": "React interface for initializing and rendering the Ocrolus upload widget.",
+  "name": "react-widget-monorepo",
+  "version": "1.0.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "src/types/bundle.d.ts",
   "type": "module",
   "scripts": {
-    "rollup": "rm -rf ./dist && rollup -c --bundleConfigAsCjs",
-    "start": "npm run build && serve .",
-    "test": "jest"
-  },
-  "publishConfig": {
-    "@jbruce1-ocrolus:registry": "https://npm.pkg.github.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Ocrolus/react-widget.git"
-  },
-  "keywords": [
-    "react",
-    "react-component",
-    "ocrolus"
-  ],
-  "tags": [
-    "react",
-    "ocrolus"
-  ],
-  "author": "Jonathan Bruce",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/Ocrolus/react-widget/issues"
-  },
-  "homepage": "https://github.com/Ocrolus/react-widget#readme",
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.2",
-    "react-dom": "^17.0.0 || ^18.0.2"
+    "build": "pnpm -r run build",
+    "start": "pnpm -r run start",
+    "example": "pnpm --filter example run start",
+    "test": "pnpm -r run test",
+    "package": "node esbuild.config.mjs"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.24",
-    "@types/react": "^17.0.75",
-    "@types/react-dom": "^17.0.2",
-    "babel-loader": "^9.1.3",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-fetch-mock": "^3.0.3",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.9.6",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-ts": "^3.4.5",
+    "@esbuild-plugins/tsconfig-paths": "^0.1.2",
+    "@eslint/js": "^9.14.0",
+    "@types/eslint__js": "^8.42.3",
+    "@typescript-eslint/parser": "^8.13.0",
+    "esbuild": "^0.24.0",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^15.12.0",
     "serve": "^14.2.1",
-    "ts-jest": "^29.1.2",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.13.0"
   }
-}
+}
diff --git a/packages/example/esbuild.config.mjs b/packages/example/esbuild.config.mjs
@@ -0,0 +1,66 @@
+import esbuild from "esbuild";
+import { copyFile, access, mkdir } from "fs/promises";
+import { constants } from "fs";
+import { TsconfigPathsPlugin } from "@esbuild-plugins/tsconfig-paths";
+import path from "path";
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const tsconfigPath = path.resolve(__dirname, "./tsconfig.json");
+const tsconfig = JSON.parse(readFileSync(tsconfigPath, "utf8"));
+const distDir = path.resolve(__dirname, "dist");
+const publicDir = path.resolve(__dirname, "public");
+
+console.log("tsconfigPath:", tsconfigPath);
+console.log("distDir:", distDir);
+console.log("publicDir:", publicDir);
+
+const ctx = await esbuild
+  .context({
+    entryPoints: ["src/index.tsx"],
+    bundle: true,
+    outdir: "dist",
+    sourcemap: true,
+    target: "esnext",
+    loader: { ".tsx": "tsx", ".ts": "ts" },
+    plugins: [TsconfigPathsPlugin({ tsconfig })],
+    define: { "process.env.NODE_ENV": '"development"' },
+  })
+  .then(async ctx => {
+    const srcFile = path.join(publicDir, "index.html");
+    const destFile = path.join(distDir, "index.html");
+
+    console.log("srcFile:", srcFile);
+    console.log("destFile:", destFile);
+
+    try {
+      await access(srcFile, constants.F_OK);
+      console.log('accesses');
+
+      // Ensure the destination directory exists
+      await mkdir(distDir, { recursive: true });
+
+      await copyFile(srcFile, destFile);
+      console.log("File copied successfully.");
+    } catch (err) {
+      console.error("Error accessing or copying file:", err);
+      process.exit(1);
+    }
+
+    return ctx;
+  })
+  .catch(err => {
+    console.error(err);
+    process.exit(1);
+  });
+
+console.log(ctx);
+
+const server = await ctx.serve({
+  servedir: distDir,
+  port: 3000
+});
+console.log(`Server started on http://${server.host}:${server.port}`);
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "node esbuild.config.mjs",
+    "serve": "node serve.js",
+    "start": "pnpm run build && pnpm run serve"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@mui/icons-material": "^6.1.6",
+    "@mui/material": "^6.1.6",
+    "ocrolus-widget-react": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@emotion/styled": "^11.13.0",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "18.2.0",
+    "typescript": "^5.6.3"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		require('@testing-library/jest-dom');
		require('@testing-library/jest-dom');