@logux/client - npm Package Compare versions

Comparing version 0.12.0 to 0.12.1

define-sync-map/index.d.ts

@@ -216,3 +216,3 @@ import { MapBuilder, MapStore } from 'nanostores'
  * showLoader()
- * deleteSyncMapById(client, User, 'user:4hs2jd83mf')
+ * await deleteSyncMapById(client, User, 'user:4hs2jd83mf')
  * ```
@@ -236,6 +236,6 @@ *
  * ```js
- * import { deleteSyncMapById } from '@logux/client'
+ * import { deleteSyncMap } from '@logux/client'
  *
  * showLoader()
- * deleteSyncMapById(client, User, 'user:4hs2jd83mf')
+ * await deleteSyncMap(User)
  * ```
@@ -242,0 +242,0 @@ *

package.json

 {
   "name": "@logux/client",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Logux base components to build web client",
@@ -34,3 +34,4 @@ "keywords": [
     "react": ">=16.8.0",
-    "vue": ">=3.0.11"
+    "react-dom": ">=16.8.0",
+    "vue": ">=3.1.1"
   },
@@ -44,2 +45,5 @@ "peerDependenciesMeta": {
     },
+    "react-dom": {
+      "optional": true
+    },
     "vue": {
@@ -46,0 +50,0 @@ "optional": true

preact/index.d.ts

@@ -40,5 +40,11 @@ import { Context as PreactContext, Component, ComponentType } from 'preact'
  * ```js
- * let client = useClient()
- * let onAdd = data => {
- *   Post.create(client, data)
+ * import { useClient } from '@logux/client/preact'
+ *
+ * import { User } from '../stores/user'
+ *
+ * export const NewUserForm = () => {
+ *   let client = useClient()
+ *   let onAdd = data => {
+ *     User.create(client, data)
+ *   }
  * }
@@ -82,3 +88,3 @@ * ```
  *
- * import { User } from '../store'
+ * import { User } from '../stores/user'
  *
@@ -116,3 +122,3 @@ * export const UserPage: FC = ({ id }) => {
  *
- * import { User } from '../store'
+ * import { User } from '../stores/user'
  *
@@ -119,0 +125,0 @@ * export const Users = ({ projectId }) => {

preact/index.js

@@ -1,2 +0,2 @@
-import { useState, useContext, useEffect } from 'preact/hooks'
+import { useState, useContext, useEffect, useRef } from 'preact/hooks'
 import { createContext, h, Component } from 'preact'
@@ -142,3 +142,6 @@ import { useStore } from 'nanostores/preact'
 export function useAuth() {
-  return useStore(createAuth(useClient()))
+  let client = useClient()
+  let authRef = useRef()
+  if (!authRef.current) authRef.current = createAuth(client)
+  return useStore(authRef.current)
 }

react/index.d.ts

@@ -40,5 +40,11 @@ import { Context as ReactContext, Component, ComponentType } from 'react'
  * ```js
- * let client = useClient()
- * let onAdd = data => {
- *   Post.create(client, data)
+ * import { useClient } from '@logux/client/react'
+ *
+ * import { User } from '../stores/user'
+ *
+ * export const NewUserForm = () => {
+ *   let client = useClient()
+ *   let onAdd = data => {
+ *     User.create(client, data)
+ *   }
  * }
@@ -82,3 +88,3 @@ * ```
  *
- * import { User } from '../store'
+ * import { User } from '../stores/user'
  *
@@ -116,3 +122,3 @@ * export const UserPage: FC = ({ id }) => {
  *
- * import { User } from '../store'
+ * import { User } from '../stores/user'
  *
@@ -119,0 +125,0 @@ * export const Users = ({ projectId }) => {

react/index.js

@@ -0,1 +1,2 @@
+import { unstable_batchedUpdates } from 'react-dom'
 import { useStore } from 'nanostores/react'
@@ -49,8 +50,4 @@ import { getValue } from 'nanostores'
   React.useEffect(() => {
-    let batching
     let unbind = store.listen(() => {
-      if (batching) return
-      batching = 1
-      setTimeout(() => {
-        batching = undefined
+      unstable_batchedUpdates(() => {
         forceRender({})
@@ -147,3 +144,6 @@ })
 export function useAuth() {
-  return useStore(createAuth(useClient()))
+  let client = useClient()
+  let authRef = React.useRef()
+  if (!authRef.current) authRef.current = createAuth(client)
+  return useStore(authRef.current)
 }

vue/index.d.ts

@@ -43,7 +43,13 @@ import {
  *
- * ```js
+ * ```html
+ * <script>
+ * import { useClient } from '@logux/client/vue'
+ *
+ * import { User } from '../stores/user'
+ *
  * let client = useClient()
  * let onAdd = data => {
- *   Post.create(client, data)
+ *   User.create(client, data)
  * }
+ * </script>
  * ```
@@ -65,3 +71,3 @@ */
  *
- * import { User } from '../store'
+ * import { User } from '../stores/user'
  *
@@ -105,3 +111,3 @@ * export default {
  *
- * import { User } from '../store'
+ * import { User } from '../stores/user'
  *
@@ -160,3 +166,3 @@ * export default {
   } | null>
-  code: ReadonlyRef<number | null>
+  code: ReadonlyRef<number | undefined>
 }
@@ -163,0 +169,0 @@

vue/index.js

@@ -5,3 +5,2 @@ import {
   onErrorCaptured,
-  watchEffect,
   triggerRef,
@@ -40,10 +39,7 @@ reactive,
 function checkErrorProcessor() {
-  if (process.env.NODE_ENV !== 'production') {
-    let errorProcessor = getCurrentInstance() && inject(ErrorsKey, null)
-    if (!errorProcessor) {
-      throw new Error(
-        'Wrap components in Logux ' +
-          '<channel-errors v-slot="{ code, error }">'
-      )
-    }
+  let processor = getCurrentInstance() && inject(ErrorsKey, null)
+  if (!processor) {
+    throw new Error(
+      'Wrap components in Logux <channel-errors v-slot="{ code, error }">'
+    )
   }
@@ -54,3 +50,3 @@ }
   let error = ref(null)
-  let state = ref(null)
+  let state = ref()
   let unsubscribe
@@ -81,4 +77,4 @@
   if (store.loading) {
-    watchEffect(() => {
-      if (error.value) throw error.value
+    watch(error, () => {
+      throw error.value
     })
@@ -106,14 +102,13 @@ store.loading.catch(e => {
 
+  if (process.env.NODE_ENV !== 'production') {
+    checkErrorProcessor()
+  }
+
   let client = useClient()
-  checkErrorProcessor()
+  let state = reactive({})
 
-  let state = reactive({ value: null })
-  let readonlyState = readonly(toRef(state, 'value'))
-  let store
-
   watch(
     id,
     () => {
-      store = Builder(id.value, client, ...builderArgs)
-      state.value = useSyncStore(store)
+      state.value = useSyncStore(Builder(id.value, client, ...builderArgs))
     },
@@ -123,3 +118,6 @@ { immediate: true }
 
-  return readonlyState
+  if (process.env.NODE_ENV !== 'production') {
+    return readonly(toRef(state, 'value'))
+  }
+  return toRef(state, 'value')
 }
@@ -131,14 +129,15 @@
 
+  if (process.env.NODE_ENV !== 'production') {
+    checkErrorProcessor()
+  }
+
   let client = useClient()
-  checkErrorProcessor()
+  let state = reactive({})
 
-  let store
-  let state = reactive({ value: null })
-  let readonlyState = readonly(toRef(state, 'value'))
-
   watch(
     [filter, opts],
     () => {
-      store = createFilter(client, Builder, filter.value, opts.value)
-      state.value = useSyncStore(store)
+      state.value = useSyncStore(
+        createFilter(client, Builder, filter.value, opts.value)
+      )
     },
@@ -148,3 +147,6 @@ { deep: true, immediate: true }
 
-  return readonlyState
+  if (process.env.NODE_ENV !== 'production') {
+    return readonly(toRef(state, 'value'))
+  }
+  return toRef(state, 'value')
 }
@@ -158,3 +160,3 @@
       if (!error.value) {
-        return null
+        return undefined
       } else {
@@ -184,5 +186,3 @@ let { action, name } = error.value.data
 
-    return () => {
-      return slots.default ? slots.default({ code, error }) : null
-    }
+    return () => slots.default({ code, error }) || null
   }
@@ -192,4 +192,3 @@ }
 export function useAuth(client) {
-  client = client || useClient()
-  let auth = useStore(createAuth(client))
+  let auth = useStore(createAuth(client || useClient()))
   return {
@@ -196,0 +195,0 @@ userId: computed(() => auth.value.userId),

vue/production.test.js

@@ -5,7 +5,7 @@ import VueTesting from '@testing-library/vue'
 import '../test/set-production.js'
-import { loguxPlugin, useSync, ChannelErrors } from './index.js'
+import { loguxPlugin, useSync, ChannelErrors, useFilter } from './index.js'
 import { defineSyncMap, TestClient } from '../index.js'
 
+let { defineComponent, h, isReadonly, nextTick } = Vue
 let { render, screen } = VueTesting
-let { defineComponent, h, nextTick } = Vue
 
@@ -35,2 +35,20 @@ let Store = defineSyncMap('test')
 
+it('does not return readonly state in production mode', () => {
+  let client = new TestClient('10')
+  render(
+    defineComponent(() => {
+      let state = useSync(Store, 'ID')
+      let list = useFilter(Store)
+      expect(isReadonly(state)).toEqual(false)
+      expect(isReadonly(list)).toEqual(false)
+      return () => null
+    }),
+    {
+      global: {
+        plugins: [[loguxPlugin, client]]
+      }
+    }
+  )
+})
+
 it('does not have ChannelErrors check in production mode', async () => {
@@ -37,0 +55,0 @@ expect(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

146795

increased by0.76%

Lines of code

4924

increased by0.76%

Worsened metrics

Dependency count

11

increased by10%

Number of low supply chain risk alerts

22

increased by15.79%

No dependency changes