feat: v0.1.0

Author: surmon-china

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -1,7 +1,12 @@
 module.exports = {
-  extends: ['prettier'],
-  plugins: ['prettier'],
+  extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
+  plugins: ['@typescript-eslint', 'prettier'],
   rules: {
-    'prettier/prettier': ['error'],
+    'prettier/prettier': 'error',
+    'prefer-const': 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/ban-types': 0,
   },
 }

.gitignore

@@ -3,7 +3,6 @@
 node_modules
 *.log
 .idea
-.vscode
 package-lock.json
 npm-debug.log
 

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.detectIndentation": false,
+  "editor.formatOnSave": true,
+  "editor.formatOnType": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": ["Registrator", "Unmount", "libundler", "surmon", "veact"]
+}

README.md

@@ -1,14 +1,14 @@
 # Veact
 
-![veact](https://img.shields.io/badge/MADE%20WITH-VEACT-42a97a?style=for-the-badge&labelColor=35495d)
+[![veact](https://img.shields.io/badge/MADE%20WITH-VEACT-42a97a?style=for-the-badge&labelColor=35495d)](https://github.com/veactjs/veact)
 [![GitHub stars](https://img.shields.io/github/stars/veactjs/veact.svg?style=for-the-badge)](https://github.com/veactjs/veact/stargazers)
 [![GitHub issues](https://img.shields.io/github/issues-raw/veactjs/veact.svg?style=for-the-badge)](https://github.com/veactjs/veact/issues)
 [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/veactjs/veact/Deploy?label=deploy&style=for-the-badge)](https://github.com/veactjs/veact/actions?query=workflow:%22Deploy%22)
 [![GitHub license](https://img.shields.io/github/license/veactjs/veact.svg?style=for-the-badge)](https://github.com/veactjs/veact/blob/master/LICENSE)
 
-> Mutable state enhancer library for [`React`](https://github.com/facebook/react) by [`@vuejs/reactivity`](https://github.com/vuejs/vue-next).
+> Mutable state enhancer library for [`React`](https://github.com/facebook/react) by [`@vue/reactivity`](https://github.com/vuejs/vue-next).
 
-> 适用于 [`React`](https://github.com/facebook/react) 的可变式状态管理库，基于 [`@vuejs/reactivity`](https://github.com/vuejs/vue-next) 进行开发。
+> 适用于 [`React`](https://github.com/facebook/react) 的可变式状态管理库，基于 [`@vue/reactivity`](https://github.com/vuejs/vue-next) 进行开发。
 
 **🔥 Who is using this library**
 

libundler.config.js

@@ -0,0 +1,14 @@
+/** @type {import('@surmon-china/libundler/lib/interface').LibundlerConfigObject} */
+module.exports = {
+  libName: 'veact',
+  outFileName: 'veact',
+  entry: './src/index.ts',
+  outDir: './dist',
+  eslint: false,
+  external: ['react', 'react-dom', '@vue/reactivity'],
+  globals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    '@vue/reactivity': 'Vue',
+  },
+}

package.json

@@ -1,38 +1,46 @@
 {
   "name": "veact",
-  "description": "Vue Composition API for React",
-  "version": "0.1.0",
-  "license": "MIT",
-  "author": {
-    "name": "Surmon",
-    "email": "[email protected]",
-    "url": "https://surmon.me"
-  },
+  "description": "Mutable state enhancer library for @react by @vue/reactivity",
   "keywords": [
     "React mutable state lib",
     "React vue state",
     "React composition API",
     "React state library"
   ],
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Surmon",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/veactjs/veact.git"
+  },
   "files": [
     "dist",
     "src"
   ],
+  "sideEffects": false,
+  "main": "dist/veact.umd.js",
+  "module": "dist/veact.esm.js",
+  "browser": "dist/veact.umd.js",
+  "types": "dist/veact.esm.d.ts",
   "scripts": {
     "lint": "eslint --ext .ts src/**",
     "format": "prettier --write --parser typescript \"src/**/*.ts\"",
     "build": "libundler"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": "^16.8",
+    "react-dom": "^16.8"
   },
   "dependencies": {
     "@vue/reactivity": "^3.2.0-beta.5"
   },
   "devDependencies": {
+    "@surmon-china/libundler": "../../NPM/libundler",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.28.4",
+    "@typescript-eslint/parser": "^4.28.4",
     "eslint": "^7.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",

src/enhancer.ts

@@ -3,6 +3,6 @@
  * @author Surmon <https://github.com/surmon-china>
  */
 
-import { unstable_batchedUpdates } from 'react-dom';
+import { unstable_batchedUpdates } from 'react-dom'
 
-export const batchedUpdates = unstable_batchedUpdates;
+export const batchedUpdates = unstable_batchedUpdates

src/hooks.ts

@@ -3,63 +3,62 @@
  * @author Surmon <https://github.com/surmon-china>
  */
 
-import { useState as useReactState } from 'react';
-import { useWatch } from './watch';
-import { useForceUpdate } from './utils';
+import { useState as useReactState } from 'react'
+import { useWatch } from './watch'
+import { useForceUpdate } from './utils'
 import {
   ref as vRef,
   shallowRef as vShallowRef,
   reactive as vReactive,
   shallowReactive as vShallowReactive,
   computed as vComputed,
   ComputedGetter,
-} from './reactivity';
+} from './reactivity'
 
 /** ref hook */
 export function useRef<T>(initValue: T) {
-  const [value] = useReactState(() => vRef(initValue));
-  const forceUpdate = useForceUpdate();
-  useWatch(value, forceUpdate);
-  return value;
+  const [value] = useReactState(() => vRef(initValue))
+  const forceUpdate = useForceUpdate()
+  useWatch(value, forceUpdate)
+  return value
 }
 
 /** shallowRef hook */
 export function useShallowRef<T extends object>(initValue: T) {
-  const [value] = useReactState(() => vShallowRef(initValue));
-  const forceUpdate = useForceUpdate();
-  useWatch(value, forceUpdate);
-  return value;
+  const [value] = useReactState(() => vShallowRef(initValue))
+  const forceUpdate = useForceUpdate()
+  useWatch(value, forceUpdate)
+  return value
 }
 
 /** reactive hook */
 export function useReactive<T extends object>(target: T) {
-  const [value] = useReactState(() => vReactive(target));
-  const forceUpdate = useForceUpdate();
-  useWatch(value, forceUpdate);
-  return value;
+  const [value] = useReactState(() => vReactive(target))
+  const forceUpdate = useForceUpdate()
+  useWatch(value, forceUpdate)
+  return value
 }
 
 /** shallowReactive hook */
 export function useShallowReactive<T extends object>(target: T) {
-  const [value] = useReactState(() => vShallowReactive(target));
-  const forceUpdate = useForceUpdate();
-  useWatch(value, forceUpdate);
-  return value;
+  const [value] = useReactState(() => vShallowReactive(target))
+  const forceUpdate = useForceUpdate()
+  useWatch(value, forceUpdate)
+  return value
 }
 
 /** computed hook */
 export function useComputed<T>(getter: ComputedGetter<T>) {
-  const [value] = useReactState(() => vComputed(getter));
-  const forceUpdate = useForceUpdate();
-  useWatch(value, forceUpdate);
-  return value;
+  const [value] = useReactState(() => vComputed(getter))
+  const forceUpdate = useForceUpdate()
+  useWatch(value, forceUpdate)
+  return value
 }
 
 /** any data to reactivity */
-type ReactivityHookFn<T> = () => T;
-export function useReactivity<T = any>(getter: ReactivityHookFn<T>) {
-  const forceUpdate = useForceUpdate();
-  // deep > watch > traverse(getter()) > ref | array | set | map | plain object(reactive) > forch update
-  useWatch(() => getter(), forceUpdate, { deep: true });
-  return getter();
+export function useReactivity<T = any>(getter: () => T) {
+  const forceUpdate = useForceUpdate()
+  // deep > watch > traverse(getter()) > ref | array | set | map | plain object(reactive) > force update
+  useWatch(() => getter(), forceUpdate, { deep: true })
+  return getter()
 }

src/index.ts

@@ -1,10 +1,10 @@
-/**
- * @module veact
- * @author Surmon <https://github.com/surmon-china>
- */
-
-export * from './reactivity';
-export * from './watch';
-export * from './hooks';
-export * from './enhancer';
-export * from './lifecycle';
+/**
+ * @module veact
+ * @author Surmon <https://github.com/surmon-china>
+ */
+
+export * from './reactivity'
+export * from './watch'
+export * from './hooks'
+export * from './enhancer'
+export * from './lifecycle'

src/lifecycle.ts

@@ -3,25 +3,24 @@
  * @author Surmon <https://github.com/surmon-china>
  */
 
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useEffect } from 'react';
+import { useEffect } from 'react'
 
 export function onMounted(callback: () => any) {
   useEffect(() => {
-    callback();
-  }, []);
+    callback()
+  }, [])
 }
 
 export function onBeforeUnmount(callback: () => void) {
   useEffect(() => {
     return () => {
-      callback();
-    };
-  }, []);
+      callback()
+    }
+  }, [])
 }
 
 export function onUpdated(callback: () => void) {
   useEffect(() => {
-    callback();
-  });
+    callback()
+  })
 }

src/logger.ts

@@ -3,37 +3,37 @@
  * @author Surmon <https://github.com/surmon-china>
  */
 
-import { isFunction, isPromise } from './utils';
+import { isFunction, isPromise } from './utils'
 
-const VEACT_NAME = 'veact';
-const LOGGER_PREFIX = `[${VEACT_NAME}]`;
+const VEACT_NAME = 'veact'
+const LOGGER_PREFIX = `[${VEACT_NAME}]`
 
 export const logger: Console = {
   ...console,
   log(...args: any) {
-    console.log(LOGGER_PREFIX, ...args);
+    console.log(LOGGER_PREFIX, ...args)
   },
   warn(...args: any) {
-    console.warn(LOGGER_PREFIX, ...args);
+    console.warn(LOGGER_PREFIX, ...args)
   },
   error(...args: any) {
-    console.error(LOGGER_PREFIX, ...args);
+    console.error(LOGGER_PREFIX, ...args)
   },
-};
+}
 
 // fork from: https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/errorHandling.ts
 export function callWithErrorHandling(
   fn: Function,
   errorString: string,
   args?: unknown[]
 ) {
-  let result;
+  let result
   try {
-    result = args ? fn(...args) : fn();
+    result = args ? fn(...args) : fn()
   } catch (error) {
-    logger.error(error, errorString);
+    logger.error(error, errorString)
   }
-  return result;
+  return result
 }
 
 export function callWithAsyncErrorHandling(
@@ -42,18 +42,18 @@ export function callWithAsyncErrorHandling(
   args?: unknown[]
 ): any[] {
   if (isFunction(fn)) {
-    const result = callWithErrorHandling(fn, errorString, args);
+    const result = callWithErrorHandling(fn, errorString, args)
     if (result && isPromise(result)) {
       result.catch((error) => {
-        logger.error(error, errorString);
-      });
+        logger.error(error, errorString)
+      })
     }
-    return result;
+    return result
   }
 
-  const values = [];
+  const values = []
   for (let i = 0; i < fn.length; i++) {
-    values.push(callWithAsyncErrorHandling(fn[i], errorString, args));
+    values.push(callWithAsyncErrorHandling(fn[i], errorString, args))
   }
-  return values;
+  return values
 }

src/reactivity.ts

@@ -32,7 +32,7 @@ export {
   triggerRef,
   unref,
   ReactiveEffect,
-} from '@vue/reactivity';
+} from '@vue/reactivity'
 
 export type {
   EffectScheduler,
@@ -50,4 +50,4 @@ export type {
   UnwrapRef,
   WritableComputedOptions,
   WritableComputedRef,
-} from '@vue/reactivity';
+} from '@vue/reactivity'