fix: read hydrated permissions on first Solid, Svelte, and Vue render

permix/src/solid/components.test.tsx

@@ -41,6 +41,43 @@ describe('components', () => {
     expect(container.firstChild).toHaveTextContent('true')
   })
 
+  it('uses dehydrated rules on the first render', () => {
+    const permixServer = createPermix<{
+      post: ['create', 'read']
+    }>()
+
+    permixServer.setup({
+      post: {
+        create: true,
+        read: false,
+      },
+    })
+
+    const dehydrated = permixServer.dehydrate()
+    const permixClient = createPermix<{
+      post: ['create', 'read']
+    }>()
+
+    const TestComponent = () => {
+      const { check, isReady } = usePermix(permixClient)
+      return (
+        <div>
+          {check('post.create').toString()}:{isReady().toString()}
+        </div>
+      )
+    }
+
+    const { container } = render(() => (
+      <PermixProvider permix={permixClient}>
+        <PermixHydrate state={dehydrated}>
+          <TestComponent />
+        </PermixHydrate>
+      </PermixProvider>
+    ))
+
+    expect(container.firstChild).toHaveTextContent('true:false')
+  })
+
   it('should work with Check component', () => {
     const permix = createPermix<{
       post: ['create']

permix/src/solid/components.tsx

@@ -1,10 +1,5 @@
 import type { JSX } from 'solid-js'
-import {
-  createEffect,
-  createMemo,
-  createRenderEffect,
-  onCleanup,
-} from 'solid-js'
+import { createMemo, createRenderEffect, onCleanup } from 'solid-js'
 import { createStore } from 'solid-js/store'
 
 import type {
@@ -33,7 +28,7 @@ export function PermixProvider<D extends Definition>(props: {
     rules: props.permix.getRules(),
   })
 
-  createEffect(() => {
+  createRenderEffect(() => {
     const setup = props.permix.hook('setup', () => {
       setContext('rules', props.permix.getRules())
     })

permix/src/solid/hooks.test.tsx

@@ -30,6 +30,35 @@ describe('permix solid', () => {
     expect(result.check('post.read')).toBe(false)
   })
 
+  it('reads ready state on the first render when setup ran before subscribe', () => {
+    const permix = createPermix<{
+      post: ['create']
+    }>()
+
+    permix.setup({
+      post: {
+        create: true,
+      },
+    })
+
+    const TestComponent = () => {
+      const { isReady, check } = usePermix(permix)
+      return (
+        <div>
+          {isReady().toString()}:{check('post.create').toString()}
+        </div>
+      )
+    }
+
+    const { container } = render(() => <TestComponent />, {
+      wrapper: (props) => (
+        <PermixProvider permix={permix}>{props.children}</PermixProvider>
+      ),
+    })
+
+    expect(container.firstChild).toHaveTextContent('true:true')
+  })
+
   it('should work with DOM rerender', async () => {
     const permix = createPermix<{
       post: [{ name: 'create'; type: { id: string } }, 'read']

permix/src/svelte/__fixtures__/HydrateConsumer.svelte

@@ -9,3 +9,4 @@ const permissions = usePermix(permix)
 </script>
 
 <div data-testid="create">{permissions.check('post.create').toString()}</div>
+<div data-testid="ready">{permissions.isReady.toString()}</div>

permix/src/svelte/components.test.ts

@@ -35,6 +35,31 @@ describe('components', () => {
     expect(getByTestId('create')).toHaveTextContent('true')
   })
 
+  it('uses dehydrated rules on the first render', () => {
+    const permixServer = createPermix<{
+      post: ['create', 'read']
+    }>()
+
+    permixServer.setup({
+      post: {
+        create: true,
+        read: false,
+      },
+    })
+
+    const dehydrated = permixServer.dehydrate()
+    const permixClient = createPermix<{
+      post: ['create', 'read']
+    }>()
+
+    const { getByTestId } = render(HydrateApp, {
+      props: { permix: permixClient, state: dehydrated },
+    })
+
+    expect(getByTestId('create')).toHaveTextContent('true')
+    expect(getByTestId('ready')).toHaveTextContent('false')
+  })
+
   it('should work with Check component', () => {
     const permix = createPermix<{
       post: ['create']

permix/src/svelte/context.svelte.ts

@@ -1,4 +1,4 @@
-import { getContext, setContext } from 'svelte'
+import { getContext, onDestroy, setContext } from 'svelte'
 
 import type { Definition, Permix, Rules } from '../core'
 import { createCheck } from '../core'
@@ -27,18 +27,16 @@ export function providePermix<T extends Definition>(permix: Permix<T>): void {
 
   setContext(PERMIX_CONTEXT_KEY, context)
 
-  $effect(() => {
-    const setup = permix.hook('setup', () => {
-      context.rules = permix.getRules()
-    })
-    const ready = permix.hook('ready', () => {
-      context.isReady = permix.isReady()
-    })
+  const setup = permix.hook('setup', () => {
+    context.rules = permix.getRules()
+  })
+  const ready = permix.hook('ready', () => {
+    context.isReady = permix.isReady()
+  })
 
-    return () => {
-      setup()
-      ready()
-    }
+  onDestroy(() => {
+    setup()
+    ready()
   })
 }
 

permix/src/svelte/hooks.test.ts

@@ -25,6 +25,24 @@ describe('permix svelte', () => {
     expect(getByTestId('read')).toHaveTextContent('false')
   })
 
+  it('reads ready state on the first render when setup ran before subscribe', () => {
+    const permix = createPermix<{
+      post: [{ name: 'create'; type: { id: string } }, 'read']
+    }>()
+
+    permix.setup({
+      post: {
+        create: () => true,
+        read: true,
+      },
+    })
+
+    const { getByTestId } = render(HookApp, { props: { permix } })
+
+    expect(getByTestId('ready')).toHaveTextContent('true')
+    expect(getByTestId('read')).toHaveTextContent('true')
+  })
+
   it('should work with DOM rerender', async () => {
     const permix = createPermix<{
       post: [{ name: 'create'; type: { id: string } }, 'read']

permix/src/vue/components.test.ts

@@ -50,6 +50,48 @@ describe('components', () => {
     expect(wrapper.text()).toBe('true')
   })
 
+  it('uses dehydrated rules on the first render', () => {
+    const permixServer = createPermix<{
+      post: ['create', 'read']
+    }>()
+
+    permixServer.setup({
+      post: {
+        create: true,
+        read: false,
+      },
+    })
+
+    const dehydrated = permixServer.dehydrate()
+    const permixClient = createPermix<{
+      post: ['create', 'read']
+    }>()
+
+    const TestComponent = {
+      template: "<div>{{ check('post.create') }}:{{ isReady }}</div>",
+      setup() {
+        const { check, isReady } = usePermix(permixClient)
+        return { check, isReady }
+      },
+    }
+
+    const wrapper = mount({
+      template: `
+        <PermixProvider :permix="permix">
+          <PermixHydrate :state="dehydrated">
+            <TestComponent />
+          </PermixHydrate>
+        </PermixProvider>
+      `,
+      components: { PermixProvider, PermixHydrate, TestComponent },
+      setup() {
+        return { permix: permixClient, dehydrated }
+      },
+    })
+
+    expect(wrapper.text()).toBe('true:false')
+  })
+
   it('should work with Check component', () => {
     const permix = createPermix<{
       post: ['create']

permix/src/vue/composables.test.ts

@@ -56,6 +56,30 @@ describe('composables', () => {
     expect(wrapper.get('[data-testid="read"]').text()).toBe('false')
   })
 
+  it('reads ready state on the first render when setup ran before subscribe', () => {
+    const permix = createPermix<{
+      post: ['create']
+    }>()
+
+    permix.setup({
+      post: {
+        create: true,
+      },
+    })
+
+    const TestWrapper = defineComponent({
+      template: '<div>{{ isReady }}:{{ check("post.create") }}</div>',
+      setup() {
+        const { check, isReady } = usePermix(permix)
+        return { check, isReady }
+      },
+    })
+
+    const wrapper = mountWithPermix(TestWrapper, permix)
+
+    expect(wrapper.get('div').text()).toBe('true:true')
+  })
+
   it('should work with DOM rerender', async () => {
     const permix = createPermix<{
       post: [{ name: 'create'; type: { id: string } }, 'read']