build: refactor all to use clean-package (chakra-ui#462)

.changeset/lemon-islands-dress.md

@@ -0,0 +1,52 @@
+---
+"@zag-js/anatomy": patch
+"@zag-js/core": patch
+"@zag-js/react": patch
+"@zag-js/solid": patch
+"@zag-js/svelte": patch
+"@zag-js/vue": patch
+"@zag-js/accordion": patch
+"@zag-js/checkbox": patch
+"@zag-js/combobox": patch
+"@zag-js/dialog": patch
+"@zag-js/editable": patch
+"@zag-js/hover-card": patch
+"@zag-js/menu": patch
+"@zag-js/number-input": patch
+"@zag-js/pagination": patch
+"@zag-js/pin-input": patch
+"@zag-js/popover": patch
+"@zag-js/pressable": patch
+"@zag-js/radio-group": patch
+"@zag-js/range-slider": patch
+"@zag-js/rating-group": patch
+"@zag-js/select": patch
+"@zag-js/slider": patch
+"@zag-js/splitter": patch
+"@zag-js/tabs": patch
+"@zag-js/tags-input": patch
+"@zag-js/toast": patch
+"@zag-js/toggle": patch
+"@zag-js/tooltip": patch
+"@zag-js/store": patch
+"@zag-js/types": patch
+"@zag-js/aria-hidden": patch
+"@zag-js/auto-resize": patch
+"@zag-js/utils": patch
+"@zag-js/dismissable": patch
+"@zag-js/dom-utils": patch
+"@zag-js/dom-query": patch
+"@zag-js/element-rect": patch
+"@zag-js/element-size": patch
+"@zag-js/focus-scope": patch
+"@zag-js/focus-visible": patch
+"@zag-js/form-utils": patch
+"@zag-js/interact-outside": patch
+"@zag-js/live-region": patch
+"@zag-js/number-utils": patch
+"@zag-js/popper": patch
+"@zag-js/rect-utils": patch
+"@zag-js/remove-scroll": patch
+---
+
+Update packages to use explicit `exports` field in `package.json`

clean-package.config.json

@@ -0,0 +1,15 @@
+{
+  "replace": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.mjs",
+        "require": "./dist/index.js"
+      },
+      "./package.json": "./package.json"
+    }
+  }
+}

examples/next-ts/package.json

@@ -56,16 +56,16 @@
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "form-serialize": "0.7.2",
-    "next": "12.3.1",
+    "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-spinners": "0.13.7"
   },
   "devDependencies": {
     "@types/form-serialize": "0.7.2",
-    "@types/node": "18.11.13",
+    "@types/node": "18.11.18",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "18.0.10",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
     "typescript": "4.9.4"

examples/next-ts/pages/_app.tsx

@@ -19,8 +19,8 @@ export default function App({ Component, pageProps, router }: AppProps) {
           .map((route) => {
             const active = router.pathname === route.path
             return (
-              <Link href={route.path} key={route.label} passHref>
-                <a data-active={dataAttr(active)}>{route.label}</a>
+              <Link data-active={dataAttr(active)} href={route.path} key={route.label} passHref>
+                {route.label}
               </Link>
             )
           })}

examples/next-ts/tsconfig.json

@@ -17,10 +17,7 @@
     "skipLibCheck": true,
     "strict": false,
     "target": "esnext",
-    "incremental": true,
-    "paths": {
-      "@zag-js/*": ["../../node_modules/@zag-js/*"]
-    }
+    "incremental": true
   },
   "exclude": ["node_modules"],
   "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]

examples/solid-ts/package.json

@@ -13,7 +13,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/form-serialize": "0.7.2",
-    "vite": "3.1.7",
+    "vite": "4.0.3",
     "vite-plugin-solid": "2.5.0"
   },
   "dependencies": {
@@ -65,6 +65,6 @@
     "@zag-js/utils": "workspace:*",
     "form-serialize": "0.7.2",
     "solid-app-router": "0.4.2",
-    "solid-js": "1.6.4"
+    "solid-js": "1.6.6"
   }
 }

examples/solid-ts/vite.config.ts

@@ -1,18 +1,9 @@
 import { defineConfig } from "vite"
 import solid from "vite-plugin-solid"
-import path from "path"
 
 export default defineConfig({
   plugins: [solid()],
   build: {
     target: "esnext",
   },
-  resolve: {
-    alias: [
-      {
-        find: /^@zag-js\/(.*)$/,
-        replacement: path.resolve("./node_modules/@zag-js/$1/src"),
-      },
-    ],
-  },
 })

examples/vue-ts/package.json

@@ -58,23 +58,23 @@
     "@zag-js/vue": "workspace:*",
     "epic-spinners": "2.0.0",
     "form-serialize": "0.7.2",
-    "vite": "3.1.7",
+    "vite": "4.0.3",
     "vue": "3.2.45",
     "vue-router": "4.1.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/form-serialize": "0.7.2",
-    "@types/node": "18.11.13",
-    "@vitejs/plugin-vue": "3.1.2",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@types/node": "18.11.18",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.29.0",
+    "eslint": "^8.30.0",
     "eslint-plugin-vue": "9.8.0",
     "typescript": "4.9.4",
-    "vue-tsc": "1.0.13"
+    "vue-tsc": "1.0.18"
   },
   "license": "MIT"
 }

examples/vue-ts/vite.config.ts

@@ -1,17 +1,8 @@
 import vue from "@vitejs/plugin-vue"
 import vueJsx from "@vitejs/plugin-vue-jsx"
-import path from "path"
 import { defineConfig } from "vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  resolve: {
-    alias: [
-      {
-        find: /^@zag-js\/(.*)$/,
-        replacement: path.resolve("./node_modules/@zag-js/$1/src"),
-      },
-    ],
-  },
   plugins: [vue(), vueJsx()],
 })

package.json

@@ -14,7 +14,7 @@
     "start": "pnpm packages -- start",
     "prepare": "husky install",
     "sync-pkgs": "tsx scripts/sync-packages.ts",
-    "clean-pkgs": "pnpm -r exec rm -rf dist .turbo .swc *.log",
+    "clean-pkgs": "pnpm -r exec rm -rf dist .swc *.log",
     "clean": "pnpm clean-pkgs && rm -rf node_modules",
     "react": "pnpm --filter \"./examples/next-ts\"",
     "vue": "pnpm --filter \"./examples/vue-ts\"",
@@ -30,7 +30,7 @@
     "e2e-solid": "FRAMEWORK=solid playwright test",
     "generate-machine": "plop machine && pnpm sync-pkgs",
     "generate-util": "plop utility && pnpm sync-pkgs",
-    "typecheck": "turbo run typecheck --filter=./packages/**/*",
+    "typecheck": "pnpm packages -- typecheck",
     "prettier": "prettier --check packages/**/*",
     "prettier-fix": "prettier --write packages/**/*",
     "lint": "eslint packages --ext .ts",
@@ -68,6 +68,7 @@
     "@swc-node/jest": "1.5.5",
     "@swc/core": "1.3.22",
     "@types/jest": "29.2.4",
+    "@types/node": "^18.11.18",
     "@types/signale": "1.4.4",
     "@typescript-eslint/eslint-plugin": "5.46.0",
     "@typescript-eslint/parser": "5.46.0",
@@ -90,7 +91,6 @@
     "signale": "1.4.0",
     "tsup": "6.5.0",
     "tsx": "3.12.1",
-    "turbo": "1.6.3",
     "typescript": "4.9.4"
   }
 }

packages/anatomy/package.json

@@ -1,9 +1,6 @@
 {
   "name": "@zag-js/anatomy",
   "version": "0.1.2",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "keywords": [
     "ui-machines",
     "state-machines",
@@ -21,19 +18,26 @@
     "dist/**/*"
   ],
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "build-fast": "tsup src",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build": "tsup src --dts",
     "test": "jest --config ../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand",
     "test-watch": "pnpm test --watch -u",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
   },
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "clean-package": "../../clean-package.config.json",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "clean-package": "2.2.0"
   }
 }

packages/anatomy/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src", "index.ts"],
+  "include": ["src"],
   "compilerOptions": {
     "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
   }

packages/core/package.json

@@ -2,9 +2,6 @@
   "name": "@zag-js/core",
   "version": "0.2.3",
   "description": "A minimal implementation of xstate fsm for UI machines",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
   "keywords": [
     "ui-machines",
     "state-machines",
@@ -22,14 +19,16 @@
     "dist/**/*"
   ],
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "build-fast": "tsup src",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build": "tsup src --dts",
     "test": "jest --config ../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand",
     "test-watch": "pnpm test --watch -u",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
   },
   "publishConfig": {
     "access": "public"
@@ -42,6 +41,9 @@
     "klona": "2.0.5"
   },
   "devDependencies": {
-    "@zag-js/utils": "workspace:*"
-  }
+    "@zag-js/utils": "workspace:*",
+    "clean-package": "2.2.0"
+  },
+  "clean-package": "../../clean-package.config.json",
+  "main": "src/index.ts"
 }

packages/core/src/machine.ts

@@ -13,14 +13,13 @@ import {
   uuid,
   warn,
 } from "@zag-js/utils"
-import { deepMerge } from "./deep-merge"
-import { klona } from "klona/json"
 import { createProxy } from "./create-proxy"
+import { deepMerge } from "./deep-merge"
 import { determineDelayFn } from "./delay-utils"
 import { determineActionsFn, determineGuardFn } from "./guard-utils"
 import { determineTransitionFn } from "./transition-utils"
 import { ActionTypes, Dict, MachineStatus, MachineType, StateMachine as S, VoidFunction, Writable } from "./types"
-import { subscribeKey, toArray, toEvent } from "./utils"
+import { cloneFull, cloneJson, subscribeKey, toArray, toEvent } from "./utils"
 
 export class Machine<
   TContext extends Dict,
@@ -67,8 +66,8 @@ export class Machine<
   // Let's get started!
   constructor(config: S.MachineConfig<TContext, TState, TEvent>, options?: S.MachineOptions<TContext, TState, TEvent>) {
     // clone the config and options
-    this.config = klona(config)
-    this.options = klona(options ?? {})
+    this.config = cloneFull(config)
+    this.options = cloneFull(options ?? {})
 
     this.id = this.config.id ?? `machine-${uuid()}`
 
@@ -93,7 +92,7 @@ export class Machine<
   }
 
   public getState(): S.State<TContext, TState, TEvent> {
-    return klona(this.stateSnapshot)
+    return cloneJson(this.stateSnapshot)
   }
 
   // immutable context value

packages/core/src/utils.ts

@@ -1,7 +1,17 @@
-import { isArray, isObject, isString } from "@zag-js/utils"
 import { snapshot, subscribe } from "@zag-js/store"
+import { isArray, isObject, isString } from "@zag-js/utils"
+import { klona as klonaFull } from "klona/full"
+import { klona as klonaJson } from "klona/json"
 import type { CompareFn, Dict, StateMachine as S } from "./types"
 
+export function cloneJson<T>(v: T): T {
+  return klonaJson(v)
+}
+
+export function cloneFull<T>(v: T): T {
+  return klonaFull(v)
+}
+
 export function toEvent<T extends S.EventObject>(event: S.Event<T>): T {
   const obj = isString(event) ? { type: event } : event
   return obj as T

packages/core/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src", "index.ts"],
+  "include": ["src"],
   "compilerOptions": {
     "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
   }