build: support use as an npm workspace package

Makefile

@@ -1,16 +1,36 @@
-.PHONY: build
-build:
+.PHONY: clean
+clean:
 	rm -rf ./dist
+
+# A full build from scratch. Use this for CI and for publishing.
+.PHONY: build
+build: clean build-incremental
+
+# Rebuilds only the parts whose sources changed. Compiling the stylesheets takes
+# minutes while the JavaScript takes seconds, so a watch rebuild should not
+# redo the stylesheets on every component edit.
+.PHONY: build-incremental
+build-incremental: build-js build-scss
+
+.PHONY: build-js
+build-js:
 	tsc --project tsconfig.build.json
 	rm icons/es5/index.d.ts  # We don't need this; not sure how to tell tsc not to generate it
-	./node_modules/.bin/babel src --config-file ./babel.config.json --out-dir dist --source-maps --ignore **/*.d.ts,**/*.test.jsx,**/*.test.tsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files --extensions ".ts,.tsx,.jsx"
+	babel src --config-file ./babel.config.json --out-dir dist --source-maps --ignore **/*.d.ts,**/*.test.jsx,**/*.test.tsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files --extensions ".ts,.tsx,.jsx"
 	# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	find ./dist -name "tests" -type d -prune -exec rm -rf "{}" \; # delete tests directories
 	find ./dist -name "*.test.*" -delete # delete other tests files that weren't in tests directories
 	find ./dist \( -name "*.md" -o -name "*.mdx" \) -delete # delete markdown file
 	rm -rf dist/**/__snapshots__
 	rm -rf dist/__mocks__
 	rm -rf dist/setupTest.js
+
+THEME_SOURCES := $(shell find styles/scss styles/css src \( -name '*.scss' -o -name '*.css' \))
+
+.PHONY: build-scss
+build-scss: dist/theme-urls.json
+
+dist/theme-urls.json: $(THEME_SOURCES) lib/build-scss.js
 	./bin/paragon-scripts.js build-scss
 
 NPM_TESTS=build i18n_extract lint test

lib/build-scss.js

@@ -90,7 +90,12 @@ const compileAndWriteStyleSheets = ({
         if (!url.startsWith('~')) {
           return null;
         }
-        return new URL(url.substring(1), `${pathToFileURL('node_modules')}/node_modules`);
+        const specifier = url.substring(1);
+        // The package name is an optional '@scope/' prefix followed by one more path segment.
+        const packageName = specifier.match(/^(?:@[^/]+\/)?[^/]+/)[0];
+        const searchPaths = require.resolve.paths(packageName) || [];
+        const dir = searchPaths.find((nodeModules) => fs.existsSync(path.join(nodeModules, packageName)));
+        return dir ? pathToFileURL(path.join(dir, specifier)) : null;
       },
     }],
     // For now we can't resolve these warnings as we need to upgrade our 'bootstrap' dependency to do so:

nodemon.json

@@ -0,0 +1,18 @@
+{
+  "watch": [
+    "src",
+    "styles",
+    "tokens",
+    "lib",
+    "bin"
+  ],
+  "ext": "ts,tsx,js,jsx,json,scss,css",
+  "ignore": [
+    "node_modules/**",
+    ".git/**",
+    "dist/**",
+    "**/*.test.*",
+    "**/__snapshots__/**"
+  ],
+  "delay": 250
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "20.18.1",
+  "version": "0.0.0-dev",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,6 +30,9 @@
   },
   "scripts": {
     "build": "make build",
+    "build-incremental": "make build-incremental",
+    "clean": "make clean",
+    "watch:build": "nodemon -x \"npm run build-incremental\"",
     "build-docs": "make build-docs",
     "commit": "commit",
     "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage",
@@ -133,7 +136,6 @@
     "@types/jest": "^29.5.10",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/react-responsive": "^9.0.0",
     "@types/react-table": "^7.7.19",
     "@types/react-test-renderer": "^18.0.0",
     "@types/uuid": "^9.0.0",
@@ -154,6 +156,7 @@
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "markdown-loader-jest": "^0.1.1",
+    "nodemon": "^3.1.14",
     "react": "^18",
     "react-intl": "^10.1.20",
     "react-test-renderer": "^18",