Separate build process for npm publishing (#238)

Co-authored-by: Chris Anderson <hi@chrisanderson.io>

apps/ui/.gitignore

@@ -83,6 +83,7 @@ typings/
 .nuxt
 dist
 build
+lib
 
 # Gatsby files
 .cache/

apps/ui/package.json

@@ -9,11 +9,7 @@
     "@monaco-editor/react": "^4.4.6",
     "@popperjs/core": "^2.11.6",
     "@rehookify/datepicker": "^3.2.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
     "@textea/json-viewer": "2.16.2",
-    "@types/jest": "^27.5.2",
     "@types/node": "^16.11.41",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
@@ -25,7 +21,6 @@
     "date-fns-tz": "^1.3.8",
     "grapesjs": "^0.21.1",
     "grapesjs-mjml": "^1.0.4",
-    "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-charts": "^3.0.0-beta.54",
     "react-dom": "^18.2.0",
@@ -33,9 +28,7 @@
     "react-hot-toast": "^2.4.0",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
     "reactflow": "11.7.2",
-    "source-map-explorer": "2.5.3",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
@@ -47,8 +40,14 @@
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "docker:build": "docker buildx build -f ./Dockerfile -t ghcr.io/parcelvoy/ui:latest -t ghcr.io/parcelvoy/ui:$npm_config_tag ../../",
     "docker:build:push": "npm run docker:build -- --push",
-    "package:publish": "npm run build && npm version $npm_config_tag --no-git-tag-version && npm pack && npm publish --tag=latest"
+    "package:build": "rimraf lib/ && npm run package:build:esm && npm run package:build:cjs",
+    "package:build:esm":  "tsc --project ./tsconfig.lib.json && copyfiles -u 1 src/**/*.css lib/esm/",
+    "package:build:cjs": "tsc --project ./tsconfig.lib.json --module commonjs --outDir lib/cjs && copyfiles -u 1 src/**/*.css lib/cjs/",
+    "package:publish": "npm run package:build && npm version $npm_config_tag --no-git-tag-version && npm pack && npm publish --tag=latest"
   },
+  "main": "./lib/cjs/mod.js",
+  "module": "./lib/esm/mod.js",
+  "types": "./lib/esm/mod.d.ts",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -62,14 +61,23 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "copyfiles": "2.4.1",
     "eslint": "^8.28.0",
     "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.31.11",
+    "http-proxy-middleware": "^2.0.6",
+    "react-scripts": "5.0.1",
+    "rimraf": "5.0.1",
+    "source-map-explorer": "2.5.3",
     "typescript": "^4.9.3"
   },
-  "files": [ "/build" ]
+  "files": ["lib"]
 }

apps/ui/src/App.tsx

@@ -1,9 +1,17 @@
+import { useMemo } from 'react'
 import { Toaster } from 'react-hot-toast'
-import { RouterProvider } from 'react-router-dom'
+import { RouteObject, RouterProvider } from 'react-router-dom'
 import { PreferencesProvider } from './ui/PreferencesContext'
-import { router } from './views/router'
+import { createRouter } from './views/router'
+
+interface AppProps {
+    additionalRoutes?: RouteObject[] // be sure to memoize this
+}
+
+export default function App({ additionalRoutes }: AppProps) {
+
+    const router = useMemo(() => createRouter(additionalRoutes), [additionalRoutes])
 
-export default function App() {
     return (
         <PreferencesProvider>
             <RouterProvider router={router} />

apps/ui/src/api.ts

@@ -8,7 +8,7 @@ function appendValue(params: URLSearchParams, name: string, value: unknown) {
     params.append(name, value + '')
 }
 
-const client = Axios.create({
+export const client = Axios.create({
     ...env.api,
     paramsSerializer: params => {
         const s = new URLSearchParams()

apps/ui/src/mod.ts

@@ -0,0 +1,7 @@
+export { default as ParcelvoyUI } from './App'
+export { default as parcelvoyApi, client as parcelvoyClient } from './api'
+export * from './contexts'
+export * from './hooks'
+export * from './ui'
+export { createStatefulRoute } from './views/createStatefulRoute'
+export { LoaderContextProvider, StatefulLoaderContextProvider } from './views/LoaderContextProvider'

apps/ui/src/ui/index.ts

@@ -0,0 +1,23 @@
+// TODO: review this export list
+export { default as Alert } from './Alert'
+export { default as Button, LinkButton } from './Button'
+export { default as ButtonGroup } from './ButtonGroup'
+export { Column, Columns } from './Columns'
+export { DataTable } from './DataTable'
+export { default as Dialog } from './Dialog'
+export { default as Heading } from './Heading'
+export * as Icons from './icons'
+export { InfoTable } from './InfoTable'
+export { default as JsonPreview } from './JsonPreview'
+export { default as Menu, MenuItem } from './Menu'
+export { default as Modal } from './Modal'
+export { default as NavLink } from './NavLink'
+export { default as PageContent } from './PageContent'
+export { SearchTable } from './SearchTable'
+export { default as Sidebar } from './Sidebar'
+export { default as Stack } from './Stack'
+export { default as Tabs, NavigationTabs } from './Tabs'
+export { default as Tag, TagGroup } from './Tag'
+export { default as Text } from './Text'
+export { default as Tile, TileGrid } from './Tile'
+export * as uiUtils from './utils'

apps/ui/src/views/router.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, Outlet, redirect, useNavigate, useParams } from 'react-router-dom'
+import { createBrowserRouter, Outlet, redirect, RouteObject, useNavigate, useParams } from 'react-router-dom'
 import api from '../api'
 
 import ErrorPage from './ErrorPage'
@@ -55,7 +55,7 @@ export const useRoute = (includeProject = true) => {
     }
 }
 
-export const router = createBrowserRouter([
+export const createRouter = (additionalRoutes?: RouteObject[]) => createBrowserRouter([
     {
         path: '/login',
         element: <Login />,
@@ -334,6 +334,7 @@ export const router = createBrowserRouter([
                     },
                 ],
             },
+            ...additionalRoutes ?? [],
         ],
     },
 ])

apps/ui/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+    "include": [
+        "src"
+    ],
+    "compilerOptions": {
+        "downlevelIteration": true,
+        "moduleResolution": "Node",
+        "lib": ["dom", "esnext"],
+        "importHelpers": true,
+        "declaration": true,
+        "sourceMap": true,
+        "rootDir": "src",
+        "outDir": "lib/esm",
+        "strict": true,
+        "jsx": "react-jsx",
+        "esModuleInterop": true,
+        "skipLibCheck": true
+    }
+}