@simplysm/solid 13.0.38 → 13.0.40

package/src/hooks/usePrint.ts

@@ -1,282 +1,2 @@
-import type { JSX } from "solid-js";
-import { render } from "solid-js/web";
-import { jsPDF } from "jspdf";
-import * as htmlToImage from "html-to-image";
-import { useBusy } from "../components/feedback/busy/BusyContext";
-import {
-  PrintInstanceContext,
-  type PrintInstance,
-} from "../components/feedback/print/PrintInstanceContext";
-
-// --- Types ---
-
-export interface PrintOptions {
-  size?: string;
-  margin?: string;
-}
-
-export interface UsePrintReturn {
-  toPrinter: (factory: () => JSX.Element, options?: PrintOptions) => Promise<void>;
-  toPdf: (factory: () => JSX.Element, options?: PrintOptions) => Promise<Uint8Array>;
-}
-
-// --- Paper size constants (pt) ---
-
-const PAPER_SIZES: Partial<Record<string, [number, number]>> = {
-  a3: [841.89, 1190.55],
-  a4: [595.28, 841.89],
-  a5: [419.53, 595.28],
-  letter: [612, 792],
-  legal: [612, 1008],
-};
-
-// --- Internal helpers ---
-
-function parseDimension(dim: string): number {
-  const num = parseFloat(dim);
-  if (dim.endsWith("mm")) return num * 2.83465;
-  if (dim.endsWith("cm")) return num * 28.3465;
-  if (dim.endsWith("in")) return num * 72;
-  return num; // pt
-}
-
-function parseSize(size?: string): { width: number; height: number; orientation: "p" | "l" } {
-  const s = (size ?? "A4").toLowerCase().trim();
-  const landscape = s.includes("landscape");
-  const cleanSize = s.replace(/\s*(landscape|portrait)\s*/g, "").trim();
-
-  const paperSize = PAPER_SIZES[cleanSize];
-  if (paperSize) {
-    const [w, h] = paperSize;
-    if (landscape) return { width: h, height: w, orientation: "l" };
-    return { width: w, height: h, orientation: "p" };
-  }
-
-  // 커스텀 크기: "210mm 297mm"
-  const parts = cleanSize.split(/\s+/);
-  if (parts.length === 2) {
-    const w = parseDimension(parts[0]);
-    const h = parseDimension(parts[1]);
-    return { width: w, height: h, orientation: w > h ? "l" : "p" };
-  }
-
-  return { width: 595.28, height: 841.89, orientation: "p" };
-}
-
-function waitForImages(container: HTMLElement): Promise<void> {
-  const imgs = Array.from(container.querySelectorAll("img"));
-  return Promise.all(
-    imgs.map((img) =>
-      img.complete
-        ? Promise.resolve()
-        : new Promise<void>((resolve) => {
-            img.addEventListener("load", () => resolve(), { once: true });
-            img.addEventListener("error", () => resolve(), { once: true });
-          }),
-    ),
-  ).then(() => undefined);
-}
-
-async function renderAndWait(
-  factory: () => JSX.Element,
-): Promise<{ container: HTMLElement; dispose: () => void }> {
-  const container = document.createElement("div");
-  container.style.position = "fixed";
-  container.style.left = "-9999px";
-  container.style.top = "0";
-  document.body.appendChild(container);
-
-  let resolveReady: (() => void) | undefined;
-  const state = { readyCalled: false };
-
-  const readyPromise = new Promise<void>((resolve) => {
-    resolveReady = resolve;
-  });
-
-  const instance: PrintInstance = {
-    ready: () => {
-      state.readyCalled = true;
-      resolveReady?.();
-    },
-  };
-
-  const dispose = render(
-    () =>
-      PrintInstanceContext.Provider({
-        value: instance,
-        get children() {
-          return factory();
-        },
-      }),
-    container,
-  );
-
-  // SolidJS 컴포넌트는 동기적으로 마운트됨.
-  // 동기적으로 ready()가 호출되었으면 이미 state.readyCalled=true.
-  // 비동기 ready (onMount 내 async 등)를 위해 rAF 대기 후 확인.
-  await Promise.resolve();
-
-  if (!state.readyCalled) {
-    await new Promise<void>((resolve) => {
-      requestAnimationFrame(() => resolve());
-    });
-  }
-
-  if (state.readyCalled) {
-    await readyPromise;
-  }
-
-  await waitForImages(container);
-
-  return { container, dispose };
-}
-
-// --- Hook ---
-
-export function usePrint(): UsePrintReturn {
-  const busy = useBusy();
-
-  const toPrinter = async (factory: () => JSX.Element, options?: PrintOptions): Promise<void> => {
-    busy.show();
-    let container: HTMLElement | undefined;
-    let dispose: (() => void) | undefined;
-    let styleEl: HTMLStyleElement | undefined;
-
-    try {
-      const result = await renderAndWait(factory);
-      container = result.container;
-      dispose = result.dispose;
-
-      // 인쇄 대상을 visible로 전환
-      container.style.position = "static";
-      container.style.left = "auto";
-      container.classList.add("_sd-print-target");
-
-      // @media print 스타일 주입
-      styleEl = document.createElement("style");
-      styleEl.textContent = `
-        @page {
-          size: ${options?.size ?? "A4"};
-          margin: ${options?.margin ?? "0"};
-        }
-        body > ._sd-print-target { display: none; }
-        @media print {
-          html, body { -webkit-print-color-adjust: exact; background: white; }
-          body > * { display: none !important; }
-          body > ._sd-print-target { display: block !important; }
-        }
-      `;
-      document.head.appendChild(styleEl);
-
-      await new Promise<void>((resolve) => {
-        requestAnimationFrame(() => {
-          window.print();
-          resolve();
-        });
-      });
-    } finally {
-      styleEl?.remove();
-      dispose?.();
-      container?.remove();
-      busy.hide();
-    }
-  };
-
-  const toPdf = async (factory: () => JSX.Element, options?: PrintOptions): Promise<Uint8Array> => {
-    busy.show();
-    let container: HTMLElement | undefined;
-    let dispose: (() => void) | undefined;
-
-    try {
-      const result = await renderAndWait(factory);
-      container = result.container;
-      dispose = result.dispose;
-
-      const { width: pageWidth, height: pageHeight, orientation } = parseSize(options?.size);
-
-      const doc = new jsPDF(orientation, "pt", [pageWidth, pageHeight]);
-      doc.deletePage(1);
-
-      const pages = Array.from(container.querySelectorAll<HTMLElement>("[data-print-page]"));
-
-      if (pages.length > 0) {
-        // 명시적 페이지 분할
-        for (const pageEl of pages) {
-          pageEl.style.width = pageWidth + "pt";
-
-          const canvas = await htmlToImage.toCanvas(pageEl, {
-            backgroundColor: "white",
-            pixelRatio: 4,
-          });
-
-          const imgWidth = pageWidth;
-          const imgHeight = canvas.height * (pageWidth / canvas.width);
-
-          doc.addPage([pageWidth, pageHeight], orientation);
-          doc.addImage({
-            imageData: canvas,
-            x: 0,
-            y: 0,
-            width: imgWidth,
-            height: imgHeight,
-          });
-        }
-      } else {
-        // 자동 분할: 전체 콘텐츠를 페이지 높이 기준으로 슬라이스
-        // container 자체는 off-screen 스타일(position/left)을 가지므로
-        // html-to-image가 클론 시 동일 스타일을 복제하여 빈 캔버스가 생길 수 있음.
-        // 따라서 실제 콘텐츠 요소를 target으로 사용.
-        const target = (container.firstElementChild as HTMLElement | null) ?? container;
-        target.style.width = pageWidth + "pt";
-
-        const canvas = await htmlToImage.toCanvas(target, {
-          backgroundColor: "white",
-          pixelRatio: 4,
-        });
-
-        const scaleFactor = pageWidth / canvas.width;
-        const pageHeightPx = pageHeight / scaleFactor;
-        const totalPages = Math.ceil(canvas.height / pageHeightPx);
-
-        for (let i = 0; i < totalPages; i++) {
-          const sliceCanvas = document.createElement("canvas");
-          sliceCanvas.width = canvas.width;
-          sliceCanvas.height = Math.min(pageHeightPx, canvas.height - i * pageHeightPx);
-
-          const ctx = sliceCanvas.getContext("2d")!;
-          ctx.drawImage(
-            canvas,
-            0,
-            i * pageHeightPx,
-            canvas.width,
-            sliceCanvas.height,
-            0,
-            0,
-            canvas.width,
-            sliceCanvas.height,
-          );
-
-          const imgHeight = sliceCanvas.height * scaleFactor;
-
-          doc.addPage([pageWidth, pageHeight], orientation);
-          doc.addImage({
-            imageData: sliceCanvas,
-            x: 0,
-            y: 0,
-            width: pageWidth,
-            height: imgHeight,
-          });
-        }
-      }
-
-      const arrayBuffer = doc.output("arraybuffer");
-      return new Uint8Array(arrayBuffer);
-    } finally {
-      dispose?.();
-      container?.remove();
-      busy.hide();
-    }
-  };
-
-  return { toPrinter, toPdf };
-}
+export { usePrint } from "../components/feedback/print/PrintContext";
+export type { PrintOptions, PrintContextValue } from "../components/feedback/print/PrintContext";

package/src/index.ts

@@ -82,6 +82,7 @@ export * from "./components/disclosure/Dropdown";
 export * from "./components/disclosure/Dialog";
 export * from "./components/disclosure/DialogContext";
 export * from "./components/disclosure/DialogInstanceContext";
+export * from "./components/disclosure/DialogProvider";
 export * from "./components/disclosure/Tabs";
 
 //#endregion
@@ -98,6 +99,8 @@ export * from "./components/feedback/busy/BusyContext";
 export * from "./components/feedback/busy/BusyContainer";
 
 // Print
+export * from "./components/feedback/print/PrintContext";
+export * from "./components/feedback/print/PrintProvider";
 export * from "./components/feedback/print/Print";
 export * from "./components/feedback/print/PrintInstanceContext";
 export * from "./components/feedback/Progress";
@@ -140,8 +143,8 @@ export type {
 export { SharedDataContext, useSharedData } from "./providers/shared-data/SharedDataContext";
 export * from "./providers/shared-data/SharedDataChangeEvent";
 
-// InitializeProvider (only exported provider)
-export * from "./providers/InitializeProvider";
+// SystemProvider
+export * from "./providers/SystemProvider";
 
 //#endregion
 
@@ -150,7 +153,6 @@ export * from "./providers/InitializeProvider";
 export * from "./hooks/useLocalStorage";
 export * from "./hooks/useSyncConfig";
 export * from "./hooks/useLogger";
-export * from "./hooks/usePrint";
 export { createControllableSignal } from "./hooks/createControllableSignal";
 export { createIMEHandler } from "./hooks/createIMEHandler";
 export { createMountTransition } from "./hooks/createMountTransition";

package/src/providers/{InitializeProvider.tsx → SystemProvider.tsx}

@@ -11,37 +11,11 @@ import { ThemeProvider } from "./ThemeContext";
 import { ServiceClientProvider } from "./ServiceClientProvider";
 import { SharedDataProvider } from "./shared-data/SharedDataProvider";
 import { BusyProvider } from "../components/feedback/busy/BusyProvider";
-import { DialogProvider } from "../components/disclosure/DialogProvider";
 import type { BusyVariant } from "../components/feedback/busy/BusyContext";
 
 export type { BusyVariant };
 
-/**
- * @simplysm/solid 메인 Provider
- *
- * @remarks
- * - 모든 개별 Provider를 올바른 의존성 순서로 네스팅
- * - `clientName`만 prop으로 전달하고, 나머지 설정은 각 hook의 `configure()`로 주입
- * - 개별 Provider를 직접 조합할 필요 없이 이 Provider 하나로 앱을 감싸면 됨
- *
- * @example
- * ```tsx
- * <InitializeProvider clientName="my-app">
- *   <AppRoot />
- * </InitializeProvider>
- *
- * function AppRoot() {
- *   const serviceClient = useServiceClient();
- *   onMount(async () => {
- *     await serviceClient.connect("main", { port: 3000 });
- *     useSyncStorage()!.configure((origin) => myStorageAdapter);
- *     useLogger().configure((origin) => myLogAdapter);
- *     useSharedData().configure((origin) => definitions);
- *   });
- * }
- * ```
- */
-export const InitializeProvider: ParentComponent<{
+export const SystemProvider: ParentComponent<{
   clientName: string;
   busyVariant?: BusyVariant;
 }> = (props) => {
@@ -57,9 +31,7 @@ export const InitializeProvider: ParentComponent<{
                   <ThemeProvider>
                     <ServiceClientProvider>
                       <SharedDataProvider>
-                        <BusyProvider variant={props.busyVariant}>
-                          <DialogProvider>{props.children}</DialogProvider>
-                        </BusyProvider>
+                        <BusyProvider variant={props.busyVariant}>{props.children}</BusyProvider>
                       </SharedDataProvider>
                     </ServiceClientProvider>
                   </ThemeProvider>

package/tailwind.config.ts

@@ -1,12 +1,11 @@
+import { fileURLToPath } from "url";
 import colors from "tailwindcss/colors";
 import defaultTheme from "tailwindcss/defaultTheme";
 
 const lh = defaultTheme.lineHeight.normal; // "1.5"
 const sp = defaultTheme.spacing;
 
-const __dirname = new URL(".", import.meta.url).pathname
-  .replace(/^\/[^/]+\/@fs/, "") // Vite 가상 경로 제거
-  .replace(/index\.ts$/, ""); // re-export 시 index.ts 경로 제거
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 // export const tailwindContent = [`${__dirname}**/*.tsx`];
 

package/dist/providers/InitializeProvider.d.ts

@@ -1,33 +0,0 @@
-import { type ParentComponent } from "solid-js";
-import type { BusyVariant } from "../components/feedback/busy/BusyContext";
-export type { BusyVariant };
-/**
- * @simplysm/solid 메인 Provider
- *
- * @remarks
- * - 모든 개별 Provider를 올바른 의존성 순서로 네스팅
- * - `clientName`만 prop으로 전달하고, 나머지 설정은 각 hook의 `configure()`로 주입
- * - 개별 Provider를 직접 조합할 필요 없이 이 Provider 하나로 앱을 감싸면 됨
- *
- * @example
- * ```tsx
- * <InitializeProvider clientName="my-app">
- *   <AppRoot />
- * </InitializeProvider>
- *
- * function AppRoot() {
- *   const serviceClient = useServiceClient();
- *   onMount(async () => {
- *     await serviceClient.connect("main", { port: 3000 });
- *     useSyncStorage()!.configure((origin) => myStorageAdapter);
- *     useLogger().configure((origin) => myLogAdapter);
- *     useSharedData().configure((origin) => definitions);
- *   });
- * }
- * ```
- */
-export declare const InitializeProvider: ParentComponent<{
-    clientName: string;
-    busyVariant?: BusyVariant;
-}>;
-//# sourceMappingURL=InitializeProvider.d.ts.map

package/dist/providers/InitializeProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InitializeProvider.d.ts","sourceRoot":"","sources":["../../src/providers/InitializeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAchD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAE3E,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CA2BA,CAAC"}

package/dist/providers/InitializeProvider.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/providers/InitializeProvider.tsx"],
-  "mappings": ";AACA,SAASA,sBAAsB;AAC/B,SAASC,2BAA2B;AACpC,SAASC,sBAAsB;AAC/B,SAASC,4BAA4B;AACrC,SAASC,0BAA0B;AACnC,SAASC,2BAA2B;AACpC,SAASC,yBAAyB;AAClC,SAASC,yBAAyB;AAClC,SAASC,qBAAqB;AAC9B,SAASC,6BAA6B;AACtC,SAASC,0BAA0B;AACnC,SAASC,oBAAoB;AAC7B,SAASC,sBAAsB;AA8BxB,MAAMC,qBAGPC,WAAU;AACd,SAAAC,kBACGf,gBAAc;IAAA,IAACgB,aAAU;AAAA,aAAEF,MAAME;IAAU;IAAA,IAAAC,WAAA;AAAA,aAAAF,kBACzCd,qBAAmB;QAAA,IAAAgB,WAAA;AAAA,iBAAAF,kBACjBb,gBAAc;YAAA,IAAAe,WAAA;AAAA,qBAAAF,kBACZZ,sBAAoB;gBAAA,IAAAc,WAAA;AAAA,yBAAA,CAAAF,kBAClBX,oBAAkB,CAAA,CAAA,GAAAW,kBAClBV,qBAAmB;oBAAA,IAAAY,WAAA;AAAA,6BAAAF,kBACjBT,mBAAiB;wBAAA,IAAAW,WAAA;AAAA,iCAAAF,kBACfR,mBAAiB;4BAAA,IAAAU,WAAA;AAAA,qCAAAF,kBACfP,eAAa;gCAAA,IAAAS,WAAA;AAAA,yCAAAF,kBACXN,uBAAqB;oCAAA,IAAAQ,WAAA;AAAA,6CAAAF,kBACnBL,oBAAkB;wCAAA,IAAAO,WAAA;AAAA,iDAAAF,kBAChBJ,cAAY;4CAAA,IAACO,UAAO;AAAA,qDAAEJ,MAAMK;4CAAW;4CAAA,IAAAF,WAAA;AAAA,qDAAAF,kBACrCH,gBAAc;gDAAA,IAAAK,WAAA;AAAA,yDAAEH,MAAMG;gDAAQ;8CAAA,CAAA;4CAAA;0CAAA,CAAA;wCAAA;sCAAA,CAAA;oCAAA;kCAAA,CAAA;gCAAA;8BAAA,CAAA;4BAAA;0BAAA,CAAA;wBAAA;sBAAA,CAAA;oBAAA;kBAAA,CAAA,CAAA;gBAAA;cAAA,CAAA;YAAA;UAAA,CAAA;QAAA;MAAA,CAAA;IAAA;EAAA,CAAA;AAazD;",
-  "names": ["ConfigProvider", "SyncStorageProvider", "LoggerProvider", "NotificationProvider", "NotificationBanner", "ErrorLoggerProvider", "PwaUpdateProvider", "ClipboardProvider", "ThemeProvider", "ServiceClientProvider", "SharedDataProvider", "BusyProvider", "DialogProvider", "InitializeProvider", "props", "_$createComponent", "clientName", "children", "variant", "busyVariant"]
-}