@sellmate/design-system-react 0.0.9 → 0.0.11

package/dist/hydrate.d.ts

@@ -0,0 +1,2 @@
+export declare function renderStencilToString(html: string): Promise<string>;
+export declare function registerStencilForNextjs(): void;

package/dist/hydrate.js

@@ -0,0 +1,44 @@
+import { hydrateDocument, } from '@sellmate/design-system/hydrate';
+// -------------------------------
+// SSR용 서버사이드 렌더링 함수
+// -------------------------------
+export async function renderStencilToString(html) {
+    try {
+        const results = await hydrateDocument(html, {
+            staticComponents: [
+                'sd-button',
+                'sd-input',
+                'sd-select',
+                'sd-table',
+                'sd-icon',
+                'sd-checkbox',
+                'sd-tag',
+                'sd-pagination',
+                'sd-tooltip',
+                'sd-popover',
+                'sd-guide',
+                'sd-date-picker',
+                'sd-date-range-picker',
+                'sd-date-box',
+                'sd-portal',
+                'sd-tooltip-portal',
+            ],
+        });
+        return results.html;
+    }
+    catch (error) {
+        console.warn('Stencil SSR failed, falling back to client-side rendering:', error);
+        return html;
+    }
+}
+// ----------------------------------------------
+//  클라이언트 사이드 등록 함수
+// ----------------------------------------------
+export function registerStencilForNextjs() {
+    if (typeof window === 'undefined')
+        return;
+    // router 변경 시에도 재등록
+    import('@sellmate/design-system/loader').then(({ defineCustomElements }) => {
+        defineCustomElements(window);
+    });
+}

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export * from './components/components';
-export { defineCustomElements } from '@sellmate/design-system/loader';
+export { registerStencil } from './registerStencil';
 export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, } from '@sellmate/design-system';
-export { WithNextjsSSR, ClientOnly, CLIENT_ONLY_COMPONENTS, isClientOnlyComponent, } from './nextjs-utils';

package/dist/index.js

@@ -1,5 +1,4 @@
 'use strict';
 export * from './components/components';
-export { defineCustomElements } from '@sellmate/design-system/loader';
-// Export Next.js utilities
-export { WithNextjsSSR, ClientOnly, CLIENT_ONLY_COMPONENTS, isClientOnlyComponent, } from './nextjs-utils';
+// Optional manual registration (not automatically called)
+export { registerStencil } from './registerStencil';

package/dist/registerStencil.d.ts

@@ -0,0 +1 @@
+export declare function registerStencil(): void;

package/dist/registerStencil.js

@@ -0,0 +1,8 @@
+import { defineCustomElements } from '@sellmate/design-system/loader';
+let initialized = false;
+export function registerStencil() {
+    if (typeof window === 'undefined' || initialized)
+        return;
+    defineCustomElements(window);
+    initialized = true;
+}

package/lib/hydrate.ts

@@ -0,0 +1,52 @@
+import {
+ renderToString,
+ hydrateDocument,
+} from '@sellmate/design-system/hydrate';
+
+// -------------------------------
+// SSR용 서버사이드 렌더링 함수
+// -------------------------------
+export async function renderStencilToString(html: string) {
+ try {
+  const results = await hydrateDocument(html, {
+   staticComponents: [
+    'sd-button',
+    'sd-input',
+    'sd-select',
+    'sd-table',
+    'sd-icon',
+    'sd-checkbox',
+    'sd-tag',
+    'sd-pagination',
+    'sd-tooltip',
+    'sd-popover',
+    'sd-guide',
+    'sd-date-picker',
+    'sd-date-range-picker',
+    'sd-date-box',
+    'sd-portal',
+    'sd-tooltip-portal',
+   ],
+  });
+
+  return results.html;
+ } catch (error) {
+  console.warn(
+   'Stencil SSR failed, falling back to client-side rendering:',
+   error
+  );
+  return html;
+ }
+}
+
+// ----------------------------------------------
+//  클라이언트 사이드 등록 함수
+// ----------------------------------------------
+export function registerStencilForNextjs() {
+ if (typeof window === 'undefined') return;
+
+ // router 변경 시에도 재등록
+ import('@sellmate/design-system/loader').then(({ defineCustomElements }) => {
+  defineCustomElements(window);
+ });
+}

package/lib/index.ts

@@ -1,7 +1,9 @@
 'use strict';
 
 export * from './components/components';
-export { defineCustomElements } from '@sellmate/design-system/loader';
+
+// Optional manual registration (not automatically called)
+export { registerStencil } from './registerStencil';
 
 // Export sd-table types for React usage
 export type {
@@ -9,11 +11,3 @@ export type {
  SdTableColumn,
  Row as SdTableRow,
 } from '@sellmate/design-system';
-
-// Export Next.js utilities
-export {
- WithNextjsSSR,
- ClientOnly,
- CLIENT_ONLY_COMPONENTS,
- isClientOnlyComponent,
-} from './nextjs-utils';

package/lib/registerStencil.ts

@@ -0,0 +1,9 @@
+import { defineCustomElements } from '@sellmate/design-system/loader';
+
+let initialized = false;
+
+export function registerStencil() {
+ if (typeof window === 'undefined' || initialized) return;
+ defineCustomElements(window);
+ initialized = true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-react",
- "version": "0.0.9",
+ "version": "0.0.11",
  "description": "Design System - React Component Wrappers",
  "keywords": [
   "react",
@@ -24,6 +24,18 @@
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
+ "exports": {
+  ".": {
+   "types": "./dist/index.d.ts",
+   "import": "./dist/index.js",
+   "require": "./dist/index.js"
+  },
+  "./hydrate": {
+   "types": "./dist/hydrate.d.ts",
+   "import": "./dist/hydrate.js",
+   "require": "./dist/hydrate.js"
+  }
+ },
  "directories": {
   "lib": "lib",
   "test": "__tests__"
@@ -42,7 +54,7 @@
   "dev": "tsc --watch"
  },
  "dependencies": {
-  "@sellmate/design-system": "^0.0.8",
+  "@sellmate/design-system": "^0.0.9",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {
@@ -56,5 +68,5 @@
   "rimraf": "^6.0.1",
   "typescript": "^5.9.3"
  },
- "gitHead": "9236856fa7c2a368ebd0972b685598cad95e4de2"
+ "gitHead": "8406a77cacf86efd489f6b4a42e362176fe81d7b"
 }

package/dist/nextjs-utils.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-interface WithNextjsSSRProps {
-    children: React.ReactElement;
-    fallback?: React.ReactNode;
-    suppressHydrationWarning?: boolean;
-}
-/**
- * Next.js에서 Stencil 기반 React 컴포넌트의 hydration 오류를 방지하는 HOC
- */
-export declare const WithNextjsSSR: React.FC<WithNextjsSSRProps>;
-/**
- * Next.js에서 클라이언트 사이드에서만 렌더링되는 컴포넌트
- */
-export declare const ClientOnly: React.FC<{
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-}>;
-/**
- * 클라이언트 전용으로 렌더링해야 하는 컴포넌트들
- */
-export declare const CLIENT_ONLY_COMPONENTS: readonly ["SdDatePicker", "SdDateRangePicker"];
-/**
- * 컴포넌트가 클라이언트 전용인지 확인
- */
-export declare const isClientOnlyComponent: (componentName: string) => boolean;
-export {};

package/dist/nextjs-utils.js

@@ -1,37 +0,0 @@
-import React, { useEffect, useState } from 'react';
-/**
- * Next.js에서 Stencil 기반 React 컴포넌트의 hydration 오류를 방지하는 HOC
- */
-export const WithNextjsSSR = ({ children, fallback = null, suppressHydrationWarning = true }) => {
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    if (!mounted) {
-        return (React.createElement("div", { suppressHydrationWarning: suppressHydrationWarning }, fallback));
-    }
-    return children;
-};
-/**
- * Next.js에서 클라이언트 사이드에서만 렌더링되는 컴포넌트
- */
-export const ClientOnly = ({ children, fallback = null }) => {
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    return mounted ? React.createElement(React.Fragment, null, children) : React.createElement(React.Fragment, null, fallback);
-};
-/**
- * 클라이언트 전용으로 렌더링해야 하는 컴포넌트들
- */
-export const CLIENT_ONLY_COMPONENTS = [
-    'SdDatePicker',
-    'SdDateRangePicker',
-];
-/**
- * 컴포넌트가 클라이언트 전용인지 확인
- */
-export const isClientOnlyComponent = (componentName) => {
-    return CLIENT_ONLY_COMPONENTS.includes(componentName);
-};

package/lib/nextjs-utils.tsx

@@ -1,63 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-interface WithNextjsSSRProps {
-  children: React.ReactElement;
-  fallback?: React.ReactNode;
-  suppressHydrationWarning?: boolean;
-}
-
-/**
- * Next.js에서 Stencil 기반 React 컴포넌트의 hydration 오류를 방지하는 HOC
- */
-export const WithNextjsSSR: React.FC<WithNextjsSSRProps> = ({ 
-  children, 
-  fallback = null,
-  suppressHydrationWarning = true 
-}) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return (
-      <div suppressHydrationWarning={suppressHydrationWarning}>
-        {fallback}
-      </div>
-    );
-  }
-
-  return children;
-};
-
-/**
- * Next.js에서 클라이언트 사이드에서만 렌더링되는 컴포넌트
- */
-export const ClientOnly: React.FC<{ children: React.ReactNode; fallback?: React.ReactNode }> = ({ 
-  children, 
-  fallback = null 
-}) => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  return mounted ? <>{children}</> : <>{fallback}</>;
-};
-
-/**
- * 클라이언트 전용으로 렌더링해야 하는 컴포넌트들
- */
-export const CLIENT_ONLY_COMPONENTS = [
-  'SdDatePicker',
-  'SdDateRangePicker',
-] as const;
-
-/**
- * 컴포넌트가 클라이언트 전용인지 확인
- */
-export const isClientOnlyComponent = (componentName: string): boolean => {
-  return CLIENT_ONLY_COMPONENTS.includes(componentName as any);
-};

package/lib/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components/components';
-export { defineCustomElements } from '@sellmate/design-system/loader';