fix theme loading server component

apps/documentation/src/app/(doc)/layout.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import '@/types/unistyles';
 import { XBox } from '@crossed/ui';
 import { styled } from '@crossed/styled';
 

apps/documentation/src/app/(doc)/primitive/(components)/layout.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/primitive/(components)/templatePrimitive.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import '@/types/unistyles';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
   H1,
@@ -82,7 +81,7 @@
           </Tr>
         </THead>
         <TBody>
           {params.map(({ name, description, type }, i) => {
             return (
               <Tr key={`returnProps-${i}`}>
                 <Td>
@@ -115,7 +114,7 @@
           </Tr>
         </THead>
         <TBody>
           {returnProps.map(({ name, description, type }, i) => {
             return (
               <Tr key={`returnProps-${i}`}>
                 <Td>
@@ -148,7 +147,7 @@
           </Tr>
         </THead>
         <TBody>
           {types.map(({ name, description, type }, i) => {
             return (
               <Tr key={`returnProps-${i}`}>
                 <Td>

apps/documentation/src/app/(doc)/primitive/introduction/layout.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/primitive/introduction/page.tsx

@@ -6,7 +6,6 @@
  */
 
 'use client';
-import '@/types/unistyles';
 import { H1, P, YBox, Kbd } from '@crossed/ui';
 
 export default function Home() {

apps/documentation/src/app/(doc)/primitive/layout.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 import { SideBarLayout } from '@/components/SideBarLayout';
-import '@/types/unistyles';
 import { withDefaultProps } from '@crossed/core';
 
 export default withDefaultProps(SideBarLayout, {

apps/documentation/src/app/(doc)/primitive/setup/layout.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/primitive/setup/page.tsx

@@ -6,7 +6,6 @@
  */
 
 'use client';
-import '@/types/unistyles';
 import { CodeBlock } from '@/components/CodeBlock';
 import { H1, H2, YBox, Tabs } from '@crossed/ui';
 import { useTranslation } from 'react-i18next';

apps/documentation/src/app/(doc)/router/introduction/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/router/layout.tsx

@@ -5,8 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-import '@/types/unistyles';
 import { SideBarLayout } from '@/components/SideBarLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/router/setup/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/styled/concept/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/styled/concept/page.tsx

@@ -5,10 +5,7 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
 import { CodeBlock } from '@/components/CodeBlock';
-import '@/types/unistyles';
 import { H1, H2, H6, Kbd, P, Tabs, YBox } from '@crossed/ui';
 
 export default function UsagePage() {

apps/documentation/src/app/(doc)/styled/introduction/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-// 'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/styled/introduction/page.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import '@/types/unistyles';
 import { Link } from '@/components/Link';
 import { H1, H2, P, Text, YBox, Ul, Li, B, Kbd } from '@crossed/ui';
 import { Trans, useTranslation } from 'react-i18next';

apps/documentation/src/app/(doc)/styled/layout.tsx

@@ -5,8 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-import '@/types/unistyles';
 import { SideBarLayout } from '@/components/SideBarLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/styled/reference/Registry/page.tsx

@@ -5,9 +5,7 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
 import { Text } from '@crossed/ui';
-import '@/types/unistyles';
 
 export default function RegistryPage() {
   return <Text>Registry</Text>;

apps/documentation/src/app/(doc)/styled/reference/styled/layout.tsx

@@ -5,8 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/styled/reference/styled/page.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 import { CodeBlock } from '@/components/CodeBlock';
-import '@/types/unistyles';
 import {
   Code,
   H1,

apps/documentation/src/app/(doc)/styled/setup/layout.tsx

@@ -5,8 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/styled/setup/page.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 import { CodeBlock } from '@/components/CodeBlock';
-import '@/types/unistyles';
 import { withDefaultProps } from '@crossed/core';
 import { styled } from '@crossed/styled';
 import { Alert, Anchor, H1, H2, P, Tabs, Text, YBox } from '@crossed/ui';
@@ -72,7 +71,7 @@
       </P>
 
       <Alert status="warning">
         <YBox space="md" style={{ width: '100%' }}>
           <YBox>
             <Alert.Title>{t('Server side renderer')}</Alert.Title>
             <Alert.Description>

apps/documentation/src/app/(doc)/styled/usage/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/styled/usage/page.tsx

@@ -8,7 +8,6 @@
 'use client';
 
 import { CodeBlock } from '@/components/CodeBlock';
-import '@/types/unistyles';
 import { H1, H2, P, YBox } from '@crossed/ui';
 
 export default function UsagePage() {

apps/documentation/src/app/(doc)/ui/(components)/TemplateDescriptionProps.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root of this projects source tree.
  */
 
+'use client';
+
 import { Link } from '@/components/Link';
 import { P } from '@crossed/ui';
 import { useTranslation } from 'react-i18next';

apps/documentation/src/app/(doc)/ui/(components)/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/ui/(components)/templatePrimitive.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import '@/types/unistyles';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
   H1,
@@ -151,7 +150,7 @@
               </Tr>
             </THead>
             <TBody>
               {returnProps.map(({ name, description, type }, i) => {
                 return (
                   <Tr key={`returnProps-${i}`}>
                     <Td>
@@ -188,7 +187,7 @@
               </Tr>
             </THead>
             <TBody>
               {types.map(({ name, description, type }, i) => {
                 return (
                   <Tr key={`returnProps-${i}`}>
                     <Td>

apps/documentation/src/app/(doc)/ui/introduction/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/ui/layout.tsx

@@ -5,8 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-import '@/types/unistyles';
 import { SideBarLayout } from '@/components/SideBarLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/ui/setup/layout.tsx

@@ -5,9 +5,6 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-'use client';
-
-import '@/types/unistyles';
 import { TOCLayout } from '@/components/TOCLayout';
 import { withDefaultProps } from '@crossed/core';
 

apps/documentation/src/app/(doc)/ui/setup/page.tsx

@@ -6,7 +6,6 @@
  */
 
 'use client';
-import '@/types/unistyles';
 import { CodeBlock } from '@/components/CodeBlock';
 import { H1, H2, YBox, Tabs } from '@crossed/ui';
 import { useTranslation } from 'react-i18next';

apps/documentation/src/app/layout.tsx

@@ -6,7 +6,6 @@
  */
 
 import './globals.css';
-import '@/types/unistyles';
 import type { Metadata } from 'next';
 import { Body } from '@/components/Body';
 import { NavBar } from '@/components/NavBar';
@@ -31,8 +30,8 @@
             <Suspense>
               <ScrollView
                 stickyHeaderIndices={[0]}
                 style={{ height: '100%' }}
                 contentContainerStyle={{ minHeight: '100%' }}
               >
                 <NavBar />
                 {children}

apps/documentation/src/app/not-found.tsx

@@ -8,7 +8,6 @@
 'use client';
 
 import { Link } from '@/components/Link';
-import '@/types/unistyles';
 import { styled } from '@crossed/styled';
 import { Center, H2, P } from '@crossed/ui';
 import { useTranslation } from 'react-i18next';

apps/documentation/src/app/page.tsx

@@ -6,7 +6,6 @@
  */
 
 'use client';
-import '@/types/unistyles';
 import { Logo } from '@/components/Logo';
 import { createStyleSheet, mq, styled, useStyles } from '@crossed/styled';
 import { B, Button, Card, H1, H2, H3, YBox } from '@crossed/ui';

apps/documentation/src/locales/index.ts

@@ -21,7 +21,7 @@ i18n
         common: frCommon,
       },
     },
-    debug: true,
+    debug: false,
 
     lng: 'en', // if you're using a language detector, do not define the lng option
     fallbackLng: 'en',

apps/documentation/src/types/unistyles.ts

@@ -5,9 +5,7 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-// if you defined breakpoints
-
 import 'react-native-unistyles';
-import { setup } from '@crossed/ui/src/theme/index';
+// import { setup } from '@crossed/ui/src/theme/index';
 import '@/locales';
-setup();
+// setup();

packages/styled/__tests__/Registry.spec.tsx

@@ -1,38 +1,36 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
 import { render } from '@crossed/test';
 import { Registry } from '../src/Registry';
 
 jest.mock('next/navigation', () => ({
   useServerInsertedHTML: jest.fn((e) => e()),
 }));
+jest.mock('next/document', () => ({
+  Main: jest.fn(),
+}));
 jest.mock('react-native', () => ({
   AppRegistry: {
     registerComponent: jest.fn(),
     getApplication: jest.fn(() => ({ getStyleElement: jest.fn() })),
   },
 }));
-jest.mock('react', () => {
-  const { ...actual } = jest.requireActual('react');
-  jest.spyOn(actual, 'useRef');
-  return { __esModule: true, ...actual };
-});
 
 describe('Registry', () => {
   test('render', () => {
     const { useServerInsertedHTML } = jest.requireMock('next/navigation');
     const { AppRegistry } = jest.requireMock('react-native');
-    const { useRef } = jest.requireMock('react');
     const getStyleElement = jest.fn();
     AppRegistry.getApplication.mockImplementation(() => ({ getStyleElement }));
-    const { rerender } = render(<Registry />);
+    render(<Registry />);
     expect(useServerInsertedHTML).toBeCalled();
-    expect(useRef).toBeCalledWith(false);
     expect(AppRegistry.registerComponent).toBeCalled();
-    expect(AppRegistry.getApplication).toBeCalledWith('Registry');
+    expect(AppRegistry.getApplication).toBeCalledWith('Main');
     expect(getStyleElement).toBeCalled();
-    rerender(<Registry />);
-    expect(useServerInsertedHTML).toBeCalledTimes(2);
-    expect(AppRegistry.registerComponent).toBeCalledTimes(1);
-    expect(AppRegistry.getApplication).toBeCalledTimes(1);
-    expect(getStyleElement).toBeCalledTimes(1);
   });
 });

packages/styled/src/Registry.tsx

@@ -8,17 +8,15 @@
 'use client';
 
 import { useServerInsertedHTML } from 'next/navigation';
-import { useRef, type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { AppRegistry } from 'react-native';
+import { Main } from 'next/document';
 
 export const Registry = ({ children }: PropsWithChildren) => {
-  const ref = useRef(false);
   useServerInsertedHTML(() => {
-    if (ref.current) return;
-    ref.current = true;
-    AppRegistry.registerComponent('Registry', () => Registry);
+    AppRegistry.registerComponent('Main', () => Main);
 
-    const { getStyleElement } = (AppRegistry as any).getApplication('Registry');
+    const { getStyleElement } = (AppRegistry as any).getApplication('Main');
     return <>{getStyleElement()}</>;
   });
   return children;