Repository: posva/vue-reactive-refs
Branch: master
Commit: 44c6a65c0340
Files: 22
Total size: 21.8 KB
Directory structure:
gitextract_srlkjowc/
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── funding.yml
│ └── settings.yml
├── .gitignore
├── LICENSE
├── README.md
├── __tests__/
│ ├── tsconfig.json
│ ├── with-proxy-array.spec.ts
│ ├── with-proxy.spec.ts
│ ├── without-proxy-array.spec.ts
│ └── without-proxy.spec.ts
├── circle.yml
├── jest.config.js
├── package.json
├── rollup.config.js
├── src/
│ ├── index.ts
│ ├── no-proxy.ts
│ └── proxy.ts
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# Contributor Code of Conduct
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing
Contributions are welcome and will be fully credited!
We accept contributions via Pull Requests on [Github](https://github.com/{{ githubAccount }}/{{ name }}).
## Pull Requests
Here are some guidelines to make the process smoother:
- **Add a test** - New features and bugfixes need tests. If you find it difficult to test, please tell us in the pull request and we will try to help you!
- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
- **Run `npm test` locally** - This will allow you to go faster
- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
- **Send coherent history** - Make sure your commits message means something
- **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option.
## Creating issues
### Bug reports
Always try to provide as much information as possible. If you are reporting a bug, try to provide a repro on jsfiddle.net (or anything else) or a stacktrace at the very least. This will help us check the problem quicker.
### Feature requests
Lay out the reasoning behind it and propose an API for it. Ideally, you should have a practical example to prove the utility of the feature you're requesting.
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
<!--
IMPORTANT: Please provide as much information as possible:
- Reporting a bug: if possible provide a repro on jsfiddle.net or a stacktrace at the very least
- Feature request: lay out the reasoning behind it and propose an API for it
-->
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
Please make sure to read the Pull Request Guidelines:
https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#Pull-Request
-->
<!-- PULL REQUEST TEMPLATE -->
<!-- (Update "[ ]" to "[x]" to check a box) -->
**What kind of change does this PR introduce?** (check at least one)
- [ ] Bugfix
- [ ] Feature
- [ ] Code style update
- [ ] Refactor
- [ ] Build-related changes
- [ ] Other, please describe:
**Does this PR introduce a breaking change?** (check one)
- [ ] Yes
- [ ] No
If yes, please describe the impact and migration path for existing applications:
**The PR fulfills these requirements:**
- [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number)
- [ ] All tests are passing
- [ ] New/updated tests are included
If adding a **new feature**, the PR's description includes:
- [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)
**Other information:**
================================================
FILE: .github/funding.yml
================================================
github: posva
custom: https://www.paypal.me/posva
================================================
FILE: .github/settings.yml
================================================
labels:
- name: bug
color: ee0701
- name: contribution welcome
color: 0e8a16
- name: discussion
color: 4935ad
- name: docs
color: 8be281
- name: enhancement
color: a2eeef
- name: good first issue
color: 7057ff
- name: help wanted
color: 008672
- name: question
color: d876e3
- name: wontfix
color: ffffff
- name: WIP
color: ffffff
- name: need repro
color: c9581c
- name: feature request
color: fbca04
================================================
FILE: .gitignore
================================================
node_modules
coverage
npm-debug.log
yarn-error.log
.nyc_output
coverage.lcov
dist
package-lock.json
.DS_Store
.rpt2_cache
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2019 Eduardo San Martin Morote
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.
================================================
FILE: README.md
================================================
# vue-reactive-refs [](https://circleci.com/gh/posva/vue-reactive-refs) [](https://www.npmjs.com/package/vue-reactive-refs) [](https://codecov.io/github/posva/vue-reactive-refs) [](https://github.com/posva/thanks)
> Make \$refs reactive so they can be used in computed properties and watchers
**Vue 2 only** as you don't need this in Vue 3
Extremely Light < 0.2kb 🗜
## Installation
```sh
npm install vue-reactive-refs
```
## Usage
This library exposes two different plugins: `ReactiveRefs` and
`DynamicReactiveRefs` and you should **only use one of them**
### `ReactiveRefs`
Supports all browsers but requires you to manually declare `refs` in component
options.
```js
import { ReactiveRefs } from 'vue-reactive-refs'
import Vue from 'vue'
Vue.use(ReactiveRefs)
```
MyComponent.vue
```vue
<template>
<div>
<input ref="input" />
<button v-for="button in actions" ref="buttons">{{ action }}</button>
</div>
</template>
<script>
export default {
// this is necessary
refs: ['input', 'buttons'],
computed: {
// NOTE: this is definitely not what you should use this lib for, but it's
// the easiest example
inputValue() {
return this.$refs.input && this.$refs.input.value
},
// Same for this example. It's ALWAYS better to mapping your data (the source of truth)
// and avoid at all cost mapping information to the DOM
buttonsText() {
return this.$refs.buttons && this.$refs.buttons.map(b => b.innerText)
},
},
}
</script>
```
### `DynamicReactiveRefs`
Supports modern browsers (not IE) [that support
`Proxy`](https://caniuse.com/#search=proxy) and works out of the box:
```js
import { DynamicReactiveRefs } from 'vue-reactive-refs'
import Vue from 'vue'
Vue.use(DynamicReactiveRefs)
```
MyComponent.vue
```vue
<template>
<div>
<input ref="input" />
<button v-for="button in actions" ref="buttons">{{ action }}</button>
</div>
</template>
<script>
export default {
computed: {
// NOTE: this is definitely not what you should use this lib for, but it's
// the easiest example
inputValue() {
return this.$refs.input && this.$refs.input.value
},
// Same for this example. It's ALWAYS better to mapping your data (the source of truth)
// and avoid at all cost mapping information to the DOM
buttonsText() {
return this.$refs.buttons && this.$refs.buttons.map(b => b.innerText)
},
},
}
</script>
```
## Related
- Vue.js issue: https://github.com/vuejs/vue/issues/3842
## License
[MIT](http://opensource.org/licenses/MIT)
================================================
FILE: __tests__/tsconfig.json
================================================
{
"extends": "../tsconfig.json",
"include": ["../src", "."]
}
================================================
FILE: __tests__/with-proxy-array.spec.ts
================================================
import { mount, createLocalVue } from '@vue/test-utils'
import { DynamicReactiveRefs } from '../src'
const localVue = createLocalVue()
localVue.use(DynamicReactiveRefs)
describe('Reactive Refs with Proxy', () => {
// for some reason this fails when run along other tests but works when run alone
it('it works with arrays', async () => {
const spy = jest.fn()
const wrapper = mount(
{
template: `
<div>
<p v-for="i in n" ref="buttons" :key="i">Hey</p>
</div>
`,
data: () => ({ n: 5 }),
computed: {
buttonsRef() {
// @ts-ignore
return this.$refs.buttons
},
},
mounted() {
// @ts-ignore
this.$watch('$refs.buttons', spy)
},
},
{ localVue }
)
expect(wrapper.vm.$refs.buttons).toHaveLength(5)
// @ts-ignore
expect(wrapper.vm.buttonsRef).toHaveLength(5)
expect(spy).toHaveBeenCalledTimes(0)
// @ts-ignore
wrapper.vm.n = 3
await wrapper.vm.$nextTick()
expect(wrapper.vm.$refs.buttons).toHaveLength(3)
// @ts-ignore
expect(wrapper.vm.buttonsRef).toHaveLength(3)
expect(spy).toHaveBeenCalledTimes(1)
})
})
================================================
FILE: __tests__/with-proxy.spec.ts
================================================
import { mount, createLocalVue } from '@vue/test-utils'
import { DynamicReactiveRefs } from '../src'
const localVue = createLocalVue()
localVue.use(DynamicReactiveRefs)
describe('Reactive Refs with Proxy', () => {
it('is reactive for a simple ref', () => {
const spy = jest.fn()
const wrapper = mount(
{
template: `
<div>
<button ref="button" :key="n">Hey</button>
</div>
`,
data: () => ({ n: 0 }),
computed: {
buttonRef() {
// @ts-ignore
return this.$refs.button
},
},
mounted() {
// @ts-ignore
this.$watch('$refs.button', spy)
},
},
{ localVue }
)
expect(wrapper.vm.$refs.button).toBeTruthy()
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(wrapper.vm.$refs.button)
expect(spy).toHaveBeenCalledTimes(0)
// @ts-ignore
wrapper.vm.n++
expect(wrapper.vm.$refs.button).toBeTruthy()
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(wrapper.vm.$refs.button)
expect(spy).toHaveBeenCalledTimes(1)
})
it('works when reading the ref before it is setted', () => {
const spy = jest.fn()
const wrapper = mount(
{
template: `
<div>
<button v-if="n > 0" ref="button" :key="n">Hey</button>
</div>
`,
data: () => ({ n: 0 }),
computed: {
buttonRef() {
// @ts-ignore
return this.$refs.button
},
},
mounted() {
// @ts-ignore
this.$watch('$refs.button', spy)
},
},
{ localVue }
)
expect(wrapper.vm.$refs.button).toEqual(undefined)
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(undefined)
expect(spy).toHaveBeenCalledTimes(0)
// @ts-ignore
wrapper.vm.n++
expect(wrapper.vm.$refs.button).toBeTruthy()
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(wrapper.vm.$refs.button)
expect(spy).toHaveBeenCalledTimes(1)
})
})
================================================
FILE: __tests__/without-proxy-array.spec.ts
================================================
import { mount, createLocalVue } from '@vue/test-utils'
import { ReactiveRefs } from '../src'
const localVue = createLocalVue()
localVue.use(ReactiveRefs)
describe('Reactive Refs with Proxy', () => {
// for some reason this fails when run along other tests but works when run alone
it('it works with arrays', async () => {
const spy = jest.fn()
const wrapper = mount(
{
template: `
<div>
<p v-for="i in n" ref="buttons" :key="i">Hey</p>
</div>
`,
data: () => ({ n: 5 }),
refs: ['buttons'],
computed: {
buttonsRef() {
// @ts-ignore
return this.$refs.buttons
},
},
mounted() {
// @ts-ignore
this.$watch('$refs.buttons', spy)
},
},
{ localVue }
)
expect(wrapper.vm.$refs.buttons).toHaveLength(5)
// @ts-ignore
expect(wrapper.vm.buttonsRef).toHaveLength(5)
expect(spy).toHaveBeenCalledTimes(0)
// @ts-ignore
wrapper.vm.n = 3
await wrapper.vm.$nextTick()
expect(wrapper.vm.$refs.buttons).toHaveLength(3)
// @ts-ignore
expect(wrapper.vm.buttonsRef).toHaveLength(3)
expect(spy).toHaveBeenCalledTimes(1)
})
})
================================================
FILE: __tests__/without-proxy.spec.ts
================================================
import { mount, createLocalVue } from '@vue/test-utils'
import { ReactiveRefs } from '../src'
const localVue = createLocalVue()
localVue.use(ReactiveRefs)
describe('Reactive Refs with Proxy', () => {
it('is reactive for a simple ref', () => {
const spy = jest.fn()
const wrapper = mount(
{
template: `
<div>
<button ref="button" :key="n">Hey</button>
</div>
`,
data: () => ({ n: 0 }),
refs: ['button'],
computed: {
buttonRef() {
// @ts-ignore
return this.$refs.button
},
},
mounted() {
// @ts-ignore
this.$watch('$refs.button', spy)
},
},
{ localVue }
)
expect(wrapper.vm.$refs.button).toBeTruthy()
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(
wrapper.find({ ref: 'button' }).element
)
expect(spy).toHaveBeenCalledTimes(0)
// @ts-ignore
wrapper.vm.n++
expect(wrapper.vm.$refs.button).toBeTruthy()
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(wrapper.vm.$refs.button)
expect(spy).toHaveBeenCalledTimes(1)
})
it('works when reading the ref before it is setted', () => {
const spy = jest.fn()
const wrapper = mount(
{
template: `
<div>
<button v-if="n > 0" ref="button" :key="n">Hey</button>
</div>
`,
data: () => ({ n: 0 }),
refs: ['button'],
computed: {
buttonRef() {
// @ts-ignore
return this.$refs.button
},
},
mounted() {
// @ts-ignore
this.$watch('$refs.button', spy)
},
},
{ localVue }
)
expect(wrapper.vm.$refs.button).toEqual(undefined)
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(undefined)
expect(spy).toHaveBeenCalledTimes(0)
// @ts-ignore
wrapper.vm.n++
expect(wrapper.vm.$refs.button).toBeTruthy()
// @ts-ignore
expect(wrapper.vm.buttonRef).toEqual(wrapper.vm.$refs.button)
expect(spy).toHaveBeenCalledTimes(1)
})
})
================================================
FILE: circle.yml
================================================
version: 2
jobs:
build:
docker:
- image: circleci/node:10
working_directory: ~/repo
steps:
- checkout
- restore_cache:
keys:
- dependencies-cache-{{ checksum "yarn.lock" }}
- dependencies-cache-
- run: yarn install
- save_cache:
paths:
- node_modules
key: dependencies-cache-{{ checksum "yarn.lock" }}
- run: yarn run test
- run:
name: Send code coverage
command: yarn run codecov
================================================
FILE: jest.config.js
================================================
module.exports = {
preset: 'ts-jest',
collectCoverage: true,
collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
testMatch: ['<rootDir>/__tests__/**/*.spec.ts'],
globals: {
'ts-jest': {
diagnostics: {
warnOnly: true,
},
},
},
testURL: 'http://localhost/',
}
================================================
FILE: package.json
================================================
{
"name": "vue-reactive-refs",
"version": "0.0.2",
"description": "Make $refs reactive so they can be used in computed properties and watchers",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"browser": "dist/index.browser.esm.js",
"unpkg": "dist/index.umd.js",
"jsdelivr": "dist/index.umd.js",
"types": "dist/index.d.ts",
"sideEffects": false,
"author": {
"name": "Eduardo San Martin Morote",
"email": "posva13@gmail.com"
},
"scripts": {
"build": "rollup -c rollup.config.js",
"unit": "jest",
"test": "npm run build && npm run unit",
"prepublishOnly": "yarn run build"
},
"files": [
"dist",
"README.md"
],
"keywords": [
"refs",
"vue",
"$refs",
"computed",
"watch",
"reactive"
],
"license": "MIT",
"devDependencies": {
"@types/jest": "^26.0.0",
"@vue/test-utils": "^1.0.0-beta.29",
"codecov": "^3.5.0",
"jest": "^25.1.0",
"rollup": "^2.1.0",
"rollup-plugin-alias": "^2.0.0",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-terser": "^7.0.0",
"rollup-plugin-typescript2": "^0.30.0",
"ts-jest": "^25.0.0",
"typescript": "^3.5.3",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"repository": {
"type": "git",
"url": "git+https://github.com/posva/vue-reactive-refs.git"
},
"bugs": {
"url": "https://github.com/posva/vue-reactive-refs/issues"
},
"homepage": "https://github.com/posva/vue-reactive-refs#readme"
}
================================================
FILE: rollup.config.js
================================================
import replace from 'rollup-plugin-replace'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import ts from 'rollup-plugin-typescript2'
import alias from 'rollup-plugin-alias'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'
const banner = `/*!
* ${pkg.name} v${pkg.version}
* (c) ${new Date().getFullYear()} Eduardo San Martin Morote
* @license MIT
*/`
const exportName = 'FocusTrapVue'
const defaultExternals = ['focus-trap']
function createEntry(
{
format, // Rollup format (iife, umd, cjs, es)
external, // Rollup external option
input = 'src/index.ts', // entry point
env = 'development', // NODE_ENV variable
minify = false,
isBrowser = false, // produce a browser module version or not
} = {
input: 'src/index.ts',
env: 'development',
minify: false,
isBrowser: false,
}
) {
// force production mode when minifying
if (minify) env = 'production'
external = external || defaultExternals
const config = {
input,
plugins: [
replace({
__VERSION__: pkg.version,
'process.env.NODE_ENV': `'${env}'`,
}),
alias({
resolve: ['ts'],
}),
resolve(),
commonjs(),
],
output: {
banner,
file: 'dist/index.other.js',
format,
},
external,
}
if (format === 'iife') {
// config.input = 'src/entries/iife.ts'
config.output.file = pkg.unpkg
config.output.name = exportName
} else if (format === 'es') {
config.output.file = isBrowser ? pkg.browser : pkg.module
} else if (format === 'cjs') {
config.output.file = pkg.main
}
config.plugins.push(
ts({
// only check once, during the es version with browser (it includes external libs)
check: format === 'es' && isBrowser && !minify,
tsconfigOverride: {
compilerOptions: {
// same for d.ts files
declaration: format === 'es' && isBrowser && !minify,
module: 'esnext', // we need to override it because mocha requires this value to be commonjs
target: format === 'es' && !isBrowser ? 'esnext' : 'es5',
},
},
})
)
if (minify) {
config.plugins.push(
terser({
module: format === 'es',
output: {
preamble: banner,
},
})
)
config.output.file = config.output.file.replace(/\.js$/i, '.min.js')
}
return config
}
export default [
// browser-friendly UMD build
createEntry({ format: 'iife', external: [] }),
createEntry({ format: 'iife', minify: true, external: [] }),
createEntry({ format: 'cjs' }),
createEntry({ format: 'es' }),
createEntry({ format: 'es', isBrowser: true, external: [] }),
createEntry({ format: 'es', isBrowser: true, minify: true, external: [] }),
]
================================================
FILE: src/index.ts
================================================
export { ReactiveRefs } from './no-proxy'
export { DynamicReactiveRefs } from './proxy'
================================================
FILE: src/no-proxy.ts
================================================
import Vue, { PluginFunction } from 'vue'
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
refs?: string[]
}
}
export const ReactiveRefs: PluginFunction<never> = _Vue => {
_Vue.mixin({
beforeCreate() {
const { refs } = this.$options
if (!refs) return
// @ts-ignore
this.$refs = _Vue.observable(
refs.reduce(
($refs, key) => {
$refs[key] = undefined
return $refs
},
{} as Record<string, Vue | Element | Vue[] | Element[] | undefined>
)
)
},
})
}
================================================
FILE: src/proxy.ts
================================================
/**
* Because this version uses a Proxy, it will fail on any browser that does not
* support it
*/
import { PluginFunction } from 'vue'
export const DynamicReactiveRefs: PluginFunction<never> = _Vue => {
_Vue.mixin({
beforeCreate() {
const $refs = _Vue.observable({})
// @ts-ignore
this.$refs = new Proxy($refs, {
set(target, key, value) {
if (!(key in target)) _Vue.set($refs, key as string, value)
return Reflect.set(target, key, value)
},
get(target, key) {
if (!(key in target)) _Vue.set($refs, key as string, undefined)
return Reflect.get(target, key)
},
})
},
})
}
================================================
FILE: tsconfig.json
================================================
{
"include": ["src"],
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"declaration": true,
"outDir": "./dist",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"noImplicitReturns": true,
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true
}
}
gitextract_srlkjowc/ ├── .github/ │ ├── CODE_OF_CONDUCT.md │ ├── CONTRIBUTING.md │ ├── ISSUE_TEMPLATE.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── funding.yml │ └── settings.yml ├── .gitignore ├── LICENSE ├── README.md ├── __tests__/ │ ├── tsconfig.json │ ├── with-proxy-array.spec.ts │ ├── with-proxy.spec.ts │ ├── without-proxy-array.spec.ts │ └── without-proxy.spec.ts ├── circle.yml ├── jest.config.js ├── package.json ├── rollup.config.js ├── src/ │ ├── index.ts │ ├── no-proxy.ts │ └── proxy.ts └── tsconfig.json
SYMBOL INDEX (16 symbols across 7 files)
FILE: __tests__/with-proxy-array.spec.ts
method buttonsRef (line 20) | buttonsRef() {
method mounted (line 26) | mounted() {
FILE: __tests__/with-proxy.spec.ts
method buttonRef (line 19) | buttonRef() {
method mounted (line 25) | mounted() {
method buttonRef (line 60) | buttonRef() {
method mounted (line 66) | mounted() {
FILE: __tests__/without-proxy-array.spec.ts
method buttonsRef (line 21) | buttonsRef() {
method mounted (line 27) | mounted() {
FILE: __tests__/without-proxy.spec.ts
method buttonRef (line 20) | buttonRef() {
method mounted (line 26) | mounted() {
method buttonRef (line 64) | buttonRef() {
method mounted (line 70) | mounted() {
FILE: rollup.config.js
function createEntry (line 18) | function createEntry(
FILE: src/no-proxy.ts
type ComponentOptions (line 4) | interface ComponentOptions<V extends Vue> {
method beforeCreate (line 11) | beforeCreate() {
FILE: src/proxy.ts
method beforeCreate (line 10) | beforeCreate() {
Condensed preview — 22 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (24K chars).
[
{
"path": ".github/CODE_OF_CONDUCT.md",
"chars": 1423,
"preview": "# Contributor Code of Conduct\n\nAs contributors and maintainers of this project, we pledge to respect all people who cont"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 1356,
"preview": "# Contributing\n\nContributions are welcome and will be fully credited!\n\nWe accept contributions via Pull Requests on [Git"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 253,
"preview": "<!--\nIMPORTANT: Please provide as much information as possible:\n\n - Reporting a bug: if possible provide a repro on j"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 1064,
"preview": "<!--\nPlease make sure to read the Pull Request Guidelines:\nhttps://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md"
},
{
"path": ".github/funding.yml",
"chars": 50,
"preview": "github: posva\ncustom: https://www.paypal.me/posva\n"
},
{
"path": ".github/settings.yml",
"chars": 474,
"preview": "labels:\n - name: bug\n color: ee0701\n - name: contribution welcome\n color: 0e8a16\n - name: discussion\n color:"
},
{
"path": ".gitignore",
"chars": 122,
"preview": "node_modules\ncoverage\nnpm-debug.log\nyarn-error.log\n.nyc_output\ncoverage.lcov\ndist\npackage-lock.json\n.DS_Store\n.rpt2_cach"
},
{
"path": "LICENSE",
"chars": 1092,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2019 Eduardo San Martin Morote\n\nPermission is hereby granted, free of charge, to an"
},
{
"path": "README.md",
"chars": 2815,
"preview": "# vue-reactive-refs [](https://circleci.com/g"
},
{
"path": "__tests__/tsconfig.json",
"chars": 66,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"include\": [\"../src\", \".\"]\n}\n"
},
{
"path": "__tests__/with-proxy-array.spec.ts",
"chars": 1216,
"preview": "import { mount, createLocalVue } from '@vue/test-utils'\nimport { DynamicReactiveRefs } from '../src'\n\nconst localVue = c"
},
{
"path": "__tests__/with-proxy.spec.ts",
"chars": 2031,
"preview": "import { mount, createLocalVue } from '@vue/test-utils'\nimport { DynamicReactiveRefs } from '../src'\n\nconst localVue = c"
},
{
"path": "__tests__/without-proxy-array.spec.ts",
"chars": 1229,
"preview": "import { mount, createLocalVue } from '@vue/test-utils'\nimport { ReactiveRefs } from '../src'\n\nconst localVue = createLo"
},
{
"path": "__tests__/without-proxy.spec.ts",
"chars": 2097,
"preview": "import { mount, createLocalVue } from '@vue/test-utils'\nimport { ReactiveRefs } from '../src'\n\nconst localVue = createLo"
},
{
"path": "circle.yml",
"chars": 531,
"preview": "version: 2\n\njobs:\n build:\n docker:\n - image: circleci/node:10\n\n working_directory: ~/repo\n\n steps:\n "
},
{
"path": "jest.config.js",
"chars": 296,
"preview": "module.exports = {\n preset: 'ts-jest',\n collectCoverage: true,\n collectCoverageFrom: ['<rootDir>/src/**/*.ts'],\n tes"
},
{
"path": "package.json",
"chars": 1584,
"preview": "{\n \"name\": \"vue-reactive-refs\",\n \"version\": \"0.0.2\",\n \"description\": \"Make $refs reactive so they can be used in comp"
},
{
"path": "rollup.config.js",
"chars": 2842,
"preview": "import replace from 'rollup-plugin-replace'\nimport resolve from 'rollup-plugin-node-resolve'\nimport commonjs from 'rollu"
},
{
"path": "src/index.ts",
"chars": 88,
"preview": "export { ReactiveRefs } from './no-proxy'\nexport { DynamicReactiveRefs } from './proxy'\n"
},
{
"path": "src/no-proxy.ts",
"chars": 599,
"preview": "import Vue, { PluginFunction } from 'vue'\n\ndeclare module 'vue/types/options' {\n interface ComponentOptions<V extends V"
},
{
"path": "src/proxy.ts",
"chars": 684,
"preview": "/**\n * Because this version uses a Proxy, it will fail on any browser that does not\n * support it\n */\n\nimport { PluginFu"
},
{
"path": "tsconfig.json",
"chars": 386,
"preview": "{\n \"include\": [\"src\"],\n \"compilerOptions\": {\n \"target\": \"esnext\",\n \"module\": \"esnext\",\n \"declaration\": true,\n"
}
]
About this extraction
This page contains the full source code of the posva/vue-reactive-refs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 22 files (21.8 KB), approximately 6.3k tokens, and a symbol index with 16 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.