vue-use-forward-ref 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present, REFINIST
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,104 @@
+# vue-forwardref
+
+[![npm](https://img.shields.io/npm/v/vue-forwardref.svg?colorA=42b883&colorB=35495e)](https://npmjs.com/package/vue-forwardref) [![Unit Test](https://img.shields.io/github/actions/workflow/status/refinist/vue-forwardref/unit-test.yml?colorA=42b883&colorB=35495e&label=Unit%20Test)](https://github.com/refinist/vue-forwardref/actions/workflows/unit-test.yml) [![codecov](https://img.shields.io/codecov/c/github/refinist/vue-forwardref?colorA=42b883&colorB=35495e)](https://codecov.io/github/refinist/vue-forwardref) [![size](https://img.badgesize.io/https://unpkg.com/vue-forwardref?compression=gzip&labelColor=42b883&color=35495e)](https://unpkg.com/vue-forwardref)
+
+A lightweight Vue 3 composable to forward component ref and merge the child's exposed API onto the parent instance. Parent's ref then exposes both the child's `expose()` and optional extra fields in one place.
+
+## ✨ Features
+
+- **Lightweight** – Zero dependencies, minimal footprint
+- **Type Safe** – Full TypeScript support
+- **Simple API** – `useForwardRef(ext?)` returns `{ forwardRef }`, pass it to child's `ref`
+- **Merge with ext** – Optionally merge extra fields onto the parent's exposed object
+
+## 📦 Installation
+
+```bash
+# npm
+npm install vue-forwardref
+
+# yarn
+yarn add vue-forwardref
+
+# pnpm
+pnpm add vue-forwardref
+
+# bun
+bun add vue-forwardref
+```
+
+## 🚀 Basic Usage
+
+### Forward child ref to parent
+
+Use `forwardRef` as the child's `ref`. The parent's ref (e.g. from a grandparent) will then receive the child's exposed API.
+
+```vue
+<template>
+  <Child ref="forwardRef" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useForwardRef } from 'vue-forwardref';
+import Child from './Child.vue';
+
+const { forwardRef } = useForwardRef();
+</script>
+```
+
+When a parent mounts this component with `<Wrapper ref="parentRef" />`, `parentRef` will expose the same API as `Child` (whatever `Child` passed to `expose()`).
+
+### Merge extra fields with `useForwardRef(ext)`
+
+You can merge additional fields onto the exposed object so the parent ref sees both the child's API and your extra data.
+
+```vue
+<template>
+  <Child ref="forwardRef" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useForwardRef } from 'vue-forwardref';
+import Child from './Child.vue';
+
+const count = ref(0);
+const { forwardRef } = useForwardRef({
+  count,
+  reset: () => {
+    count.value = 0;
+  }
+});
+</script>
+```
+
+The parent's ref will then have both `Child`'s exposed API and `count` / `reset`.
+
+## 📚 API
+
+### `useForwardRef<E>(ext?: E)`
+
+Must be called in a component's `setup()` (uses `getCurrentInstance()`).
+
+**Parameters:**
+
+- `ext` (optional) – Object to merge onto the current component's `exposed` / `exposeProxy`. When the ref callback runs (child mounted), both the child instance (or element) and `ext` are assigned onto the current instance's exposed object.
+
+**Returns:**
+
+```ts
+{ forwardRef: (originRef: OriginRef) => void }
+```
+
+- `forwardRef` – Ref callback. Use it as the child's `ref` (e.g. `ref="forwardRef"` or `:ref="forwardRef"`). When the child is mounted, `originRef` is the child instance or DOM element; when unmounted, it is `null`. The current component's exposed object is updated so that the parent's ref sees the merged API.
+
+**Types:**
+
+- `OriginRef = Element | ComponentPublicInstance | null`
+
+## 📄 License
+
+[MIT](./LICENSE)
+
+Copyright (c) 2025-present REFINIST

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import { ComponentPublicInstance } from "vue";
+
+//#region src/types.d.ts
+type OriginRef = Element | ComponentPublicInstance | null;
+//#endregion
+//#region src/index.d.ts
+declare function useForwardRef<E extends Record<string, any>>(ext?: E): {
+  forwardRef: (originRef: OriginRef) => void;
+};
+//#endregion
+export { useForwardRef };

package/dist/index.mjs

@@ -0,0 +1 @@
+import{getCurrentInstance as e}from"vue";function t(t){let n=e();function r(e){n.exposed=Object.assign(e||{},t),n.exposeProxy=Object.assign(e||{},t)}return{forwardRef:r}}export{t as useForwardRef};

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "vue-use-forward-ref",
+  "type": "module",
+  "version": "0.0.0",
+  "packageManager": "pnpm@10.30.3",
+  "description": "A lightweight Vue 3 composable to forward component ref and merge child exposed API onto parent instance",
+  "author": "REFINIST",
+  "license": "MIT",
+  "homepage": "https://github.com/refinist/vue-forwardref#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/refinist/vue-forwardref.git"
+  },
+  "bugs": {
+    "url": "https://github.com/refinist/vue-forwardref/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "composable",
+    "forward-ref",
+    "ref-forwarding",
+    "expose",
+    "composition-api",
+    "typescript",
+    "component-ref"
+  ],
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint --cache .",
+    "lint:fix": "pnpm run lint --fix",
+    "format": "prettier --cache --write .",
+    "prepublishOnly": "pnpm run build",
+    "release": "bumpp && pnpm publish",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsgo --noEmit"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  },
+  "devDependencies": {
+    "@refinist/eslint-config": "^1.2.0",
+    "@refinist/prettier-config": "^1.1.1",
+    "@typescript/native-preview": "7.0.0-dev.20260228.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.4",
+    "@vitest/coverage-istanbul": "3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "bumpp": "^10.4.1",
+    "eslint": "^9.39.3",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.8.1",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.21"
+  },
+  "prettier": "@refinist/prettier-config",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}