Build release bundle with Preconstruct

.nvmrc

@@ -0,0 +1 @@
+18

.parcelrc

@@ -0,0 +1,9 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,mjs,jsx,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

README.md

@@ -34,12 +34,8 @@ function Example({ className }: { className: string }) {
 
 ## FAQs
 
-### Fixing the "_SyntaxError: Unexpected token '.'_" error with Next
-Add this package to the `transpilePackages` array in your Next config, e.g.
+### Why is the context menu not styled?
+CSS styles must be explicitly imported/required for this package:
 ```js
-// next.config.js
-module.exports = {
-  transpilePackages: ["design", "use-context-menu"],
-  // ...
-};
+import "use-context-menu/styles.css";
 ```

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    require.resolve("@babel/preset-react"),
+    [
+      require.resolve("@babel/preset-typescript"),
+      { allExtensions: true, disallowAmbiguousJSXLike: true, isTSX: true },
+    ],
+  ],
+};

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "use-context-menu-repo",
   "private": true,
   "scripts": {
     "clear": "npm run clear:parcel-cache & npm run clear:builds & npm run clear:node_modules",
@@ -7,17 +8,22 @@
     "clear:node_modules": "rm -rf ./node_modules && rm -rf ./packages/*/node_modules",
     "docs": "cd packages/use-context-menu-website && pnpm build",
     "lint": "eslint packages/**/*.{ts,tsx}",
-    "prerelease": "rm -rf ./.parcel-cache && pnpm -r run build",
+    "prerelease": "preconstruct build",
     "prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
     "prettier:ci": "prettier --check \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
     "typescript": "tsc --noEmit",
     "typescript:watch": "tsc --noEmit --watch"
   },
   "devDependencies": {
-    "@parcel/core": "^2.8.3",
-    "@parcel/packager-ts": "^2.8.3",
-    "@parcel/transformer-inline-string": "^2.8.3",
-    "@parcel/transformer-typescript-types": "^2.8.3",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@parcel/config-default": "^2.9.1",
+    "@parcel/core": "^2.9.1",
+    "@parcel/packager-ts": "^2.9.1",
+    "@parcel/transformer-js": "^2.9.1",
+    "@parcel/transformer-react-refresh-wrap": "^2.9.1",
+    "@parcel/transformer-typescript-types": "^2.9.1",
+    "@preconstruct/cli": "^2.6.4",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/jest": "^29.4.0",
     "@types/node": "^18.14.6",
@@ -29,7 +35,7 @@
     "@typescript-eslint/type-utils": "^5.57.0",
     "eslint": "^8.39.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "parcel": "^2.8.3",
+    "parcel": "^2.9.1",
     "path-browserify": "^1.0.0",
     "prettier": "latest",
     "process": "^0.11.10",
@@ -39,5 +45,16 @@
   "workspaces": [
     "packages/use-context-menu",
     "packages/use-context-menu-website"
-  ]
+  ],
+  "preconstruct": {
+    "packages": [
+      "packages/use-context-menu"
+    ],
+    "exports": {
+      "importConditionDefaultExport": "default"
+    },
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "importsConditions": true
+    }
+  }
 }

packages/use-context-menu-website/index.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import "use-context-menu/styles.css";
 
 import ScrollToTop from "./src/components/ScrollToTop";
 import PageNotFoundRoute from "./src/routes/PageNotFound";

packages/use-context-menu-website/package.json

@@ -37,7 +37,7 @@
     "react-router-dom": "latest",
     "react-virtualized-auto-sizer": "latest",
     "sort-by": "latest",
-    "suspense": "^0.0.34",
+    "suspense": "^0.0.38",
     "use-context-menu": "workspace:^"
   }
 }

packages/use-context-menu-website/src/components/ScrollToTop.tsx

@@ -19,7 +19,7 @@ export default function ScrollToTop(): null {
     if (hash) {
       let element = document.querySelector(hash);
       if (element) {
-        element.scrollIntoView({ block: "start", behavior: "smooth" });
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
       }
     } else {
       window.scrollTo(0, 0);

packages/use-context-menu-website/src/examples/guides/custom-css/customStyles.css

@@ -0,0 +1,23 @@
+.useContextMenu_Backdrop {
+  /* Transparent backdrop behind an active menu */
+}
+
+.useContextMenu_ContextMenu {
+  /* Root menu container */
+}
+
+.useContextMenu_ContextMenuCategory {
+  /* Category header */
+}
+
+.useContextMenu_Divider {
+  /* Menu divider */
+}
+
+.useContextMenu_ContextMenuItem {
+  /* Menu item */
+}
+
+.useContextMenu_ContextMenuItemDisabled {
+  /* Disabled menu item */
+}

packages/use-context-menu-website/src/examples/index.ts

@@ -14,6 +14,12 @@ export const examples = {
       "utf8"
     )
   ),
+  customStyles: processExample(
+    readFileSync(
+      join(__dirname, "guides", "custom-css", "customStyles.css"),
+      "utf8"
+    )
+  ),
   leftClick: processExample(
     readFileSync(join(__dirname, "guides", "left-click", "index.tsx"), "utf8")
   ),

packages/use-context-menu-website/src/routes/examples/guides/CustomCss/index.tsx

@@ -13,19 +13,30 @@ export default function CustomCssRoute() {
       </Block>
       <Block>
         <p>
-          The following{" "}
+          The recommended way to customize styles for this package is to use{" "}
           <ExternalLink to="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
             CSS variables
-          </ExternalLink>{" "}
-          can be used to customize context menu styles:
+          </ExternalLink>
+          :
         </p>
         <Code code={examples.cssVariables} language="css" />
         <p>
           Default values are provided for any variables that are not defined.
         </p>
       </Block>
       <Block>
-        <p>Data attribute selectors can also be used to customize styles:</p>
+        <p>
+          You can also bypass the included{" "}
+          <code>use-context-menu/styles.css</code> file and define your own
+          styles:
+        </p>
+        <Code code={examples.customStyles} language="css" />
+      </Block>
+      <Block>
+        <p>
+          Lastly, data attribute selectors can be used to customize styles
+          (although these are primarily intended for e2e testing purposes):
+        </p>
         <Code code={examples.cssDataSelectors} language="css" />
       </Block>
     </Container>

packages/use-context-menu/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.4.8
+* Build release bundles with Preconstruct (smaller, more readable)
+* Replaced CSS modules (which required special bundler configuration to support) with single `styles.css` file which can be imported anywhere in the app (even if no bundler is used); this should support more bundlers/frameworks/environments
+
 ## 0.4.7
 * Use `position: fixed` (rather than `position: absolute`) to avoid effecting body scroll position for context menus rendered near the edge of the viewport
 * Better handle edge cases for context menu positioning (e.g. a context menu that is larger than the viewport)

packages/use-context-menu/package.json

@@ -9,9 +9,21 @@
     "url": "git+https://github.com/bvaughn/use-context-menu.git"
   },
   "source": "src/index.ts",
-  "main": "dist/use-context-menu.js",
-  "module": "dist/use-context-menu.module.js",
-  "types": "dist/use-context-menu.d.ts",
+  "main": "dist/use-context-menu.cjs.js",
+  "module": "dist/use-context-menu.esm.js",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/use-context-menu.cjs.mjs",
+        "default": "./dist/use-context-menu.cjs.js"
+      },
+      "module": "./dist/use-context-menu.esm.js",
+      "import": "./dist/use-context-menu.cjs.mjs",
+      "default": "./dist/use-context-menu.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "dist/use-context-menu.cjs.d.ts",
   "scripts": {
     "build": "parcel build",
     "test": "jest --config=jest.config.js",

packages/use-context-menu/src/components/ContextMenu.tsx

@@ -12,7 +12,6 @@ import { ContextMenuContext } from "../ContextMenuContext";
 import { useModalDismissSignal } from "../hooks/useModalDismissSignal";
 import { AlignTo } from "../types";
 import classNames from "../utils/classNames";
-import styles from "./ContextMenu.module.css";
 
 export function ContextMenu({
   alignTo,
@@ -136,12 +135,12 @@ export function ContextMenu({
 
   return createPortal(
     <div
-      className={styles.Backdrop}
+      className="useContextMenu_Backdrop"
       onClick={onClick}
       onMouseMove={onMouseMove}
     >
       <div
-        className={classNames(styles.ContextMenu, className)}
+        className={classNames("useContextMenu_ContextMenu", className)}
         data-context-menu
         data-test-id={dataTestId}
         data-test-name={dataTestName}

packages/use-context-menu/src/components/ContextMenuCategory.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties, MouseEvent, PropsWithChildren } from "react";
 
 import classNames from "../utils/classNames";
-import styles from "./ContextMenuCategory.module.css";
 
 export function ContextMenuCategory({
   children,
@@ -15,7 +14,7 @@ export function ContextMenuCategory({
 
   return (
     <div
-      className={classNames(styles.ContextMenuCategory, className)}
+      className={classNames("useContextMenu_ContextMenuCategory", className)}
       data-context-menu-category
       onClick={onClick}
       style={style}

packages/use-context-menu/src/components/ContextMenuDivider.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties, MouseEvent } from "react";
 
 import classNames from "../utils/classNames";
-import styles from "./ContextMenuDivider.module.css";
 
 export function ContextMenuDivider({
   className,
@@ -17,7 +16,7 @@ export function ContextMenuDivider({
 
   return (
     <div
-      className={classNames(styles.Divider, className)}
+      className={classNames("useContextMenu_Divider", className)}
       data-context-menu-divider
       onClick={onClick}
       style={style}