@reactivity-vue/filesystem

Reactive filesystem powered by @vue/reactivity

Install

npm install --save-dev @reactivity-vue/filesystem

Usage

Work only in Node.js

Async usage

import { useFile } from '@reactivity-vue/filesystem'

const fileRef = await useFile('messages.txt').waitForReady()

console.log(fileRef.value) // output file content

fileRef.value += 'Hello World' // append to file

fileRef.value = 'Good Morning' // write to file

Callback usage

import { useFile } from '@reactivity-vue/filesystem'

useFile('messages.txt')
  .waitForReady()
  .then((fileRef) => {
    console.log(fileRef.value) // output file content
  })

Watch for file changes (via chokidar)

const fileRef = useFile('messages.txt', { watchFileChanges: true })

useJson

import { useJSON } from '@reactivity-vue/filesystem'

const data = useJSON('data.json', { initialValue: { foo: 'bar' } })

console.log(data.value) // { foo: 'bar' }

data.value = { bar: 'foo' } // write to json file

Custom serializer

import YAML from 'js-yaml'
import { useFileWithSerializer } from  '@reactivity-vue/filesystem'

export function useYAML<T>(path: string, options: JSONSerializerOptions<T> = {}) {
  return useFileWithSerializer<T>(
    path,
    {
      ...options,
      serialize: v => YAML.safeDump(v)
      deserialize: v => YAML.safeLoad(v)
    }
  )
}

License

MIT License © 2023 Elone Hoo