@liner-fe/illust 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @liner-fe/illust
 
+## 0.1.4
+
+### Patch Changes
+
+- e5cfc5c: ESM으로 전부 마이그레이션
+
 ## 0.1.3
 
 ### Patch Changes

package/config/tsup/tsup.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'tsup';
+import { nodeExternalsPlugin } from 'esbuild-node-externals';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  outDir: 'lib',
+  // 이거는 무슨 옵션일까?
+  // splitting: false,
+  format: 'esm',
+  bundle: true,
+  minify: false,
+  keepNames: true,
+  jsxFactory: 'React.createElement',
+  jsxFragment: 'Fragment',
+  tsconfig: './tsconfig.build.json',
+  platform: 'neutral',
+  dts: true,
+  esbuildPlugins: [nodeExternalsPlugin()],
+});

package/lib/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import { Property } from 'csstype';
+
+declare const illustNames: readonly ["hero-gift", "hero-search", "mini-approve", "mini-documents-2", "mini-documents-3", "mini-documents-4", "mini-documents-5", "mini-documents", "mini-egg", "mini-empty-message", "mini-empty", "mini-gift", "mini-graduation_hat", "mini-not-search", "mini-not-ticket-2", "mini-private", "mini-search", "mini-ticket", "mini-ticket-3", "mini-window", "spot-catch_star", "spot-clap", "spot-empty", "spot-gift", "spot-no_search", "spot-search-2", "spot-search-3", "spot-search-4", "spot-search-5", "spot-search", "spot-sign_up", "spot-team", "spot-write", "mini-sign", "mini-pots", "mini-erase", "mini-rocket"];
+declare const darkIllustNames: readonly ["hero-gift", "hero-search", "mini-approve", "mini-documents-2", "mini-documents-3", "mini-documents-4", "mini-documents-5", "mini-documents", "mini-egg", "mini-empty-message", "mini-empty", "mini-gift", "mini-graduation_hat", "mini-not-search", "mini-not-ticket-2", "mini-private", "mini-search", "mini-ticket", "mini-ticket-3", "mini-window", "spot-catch_star", "spot-clap", "spot-empty", "spot-gift", "spot-no_search", "spot-search-2", "spot-search-3", "spot-search-4", "spot-search-5", "spot-search", "spot-sign_up", "spot-team", "spot-write", "mini-sign", "mini-pots", "mini-erase", "mini-rocket"];
+
+type LightIllustType = (typeof illustNames)[number];
+type DarkIllustType = (typeof darkIllustNames)[number];
+type IllustType = DarkIllustType | LightIllustType;
+
+interface Source<T extends false | true = true> {
+    name: IllustType;
+    inverse?: T;
+}
+interface IllustProps extends Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> {
+    width: number;
+    src: {
+        light: Source<false>;
+        dark?: Source;
+    };
+    margin?: Property.Margin<string>;
+}
+declare const Illust: (props: IllustProps) => react_jsx_runtime.JSX.Element;
+
+declare const prefetchIllust: ({ name, isDark, }: {
+    name: IllustType;
+    isDark?: boolean;
+}) => Promise<Response>;
+
+export { Illust, type IllustProps, type Source, prefetchIllust };

package/lib/index.js

@@ -0,0 +1,97 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/constants/size.ts
+var ratio = {
+  "4:3": { width: 180, height: 135 },
+  "1:1": { width: 250, height: 250 }
+};
+var illustSize = {
+  "hero-gift": ratio["1:1"],
+  "hero-search": ratio["1:1"],
+  "mini-documents-2": ratio["1:1"],
+  "mini-documents-3": ratio["1:1"],
+  "mini-documents-4": ratio["1:1"],
+  "mini-documents-5": ratio["1:1"],
+  "mini-documents": ratio["1:1"],
+  "mini-egg": ratio["1:1"],
+  "mini-gift": ratio["1:1"],
+  "mini-graduation_hat": ratio["1:1"],
+  "mini-search": ratio["1:1"],
+  "mini-ticket": ratio["1:1"],
+  "mini-window": ratio["1:1"],
+  "spot-catch_star": ratio["4:3"],
+  "spot-clap": ratio["4:3"],
+  "spot-empty": ratio["4:3"],
+  "spot-no_search": ratio["4:3"],
+  "spot-search-2": ratio["4:3"],
+  "spot-search-3": ratio["4:3"],
+  "spot-search-4": ratio["4:3"],
+  "spot-search-5": ratio["4:3"],
+  "spot-search": ratio["4:3"],
+  "spot-write": ratio["4:3"],
+  "spot-gift": ratio["4:3"],
+  "mini-empty": ratio["1:1"],
+  "spot-team": ratio["4:3"]
+};
+
+// src/constants/path.ts
+var ILLUST = "https://assets.getliner.com/common/illust";
+var DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
+var LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;
+
+// src/hooks/useIllust.ts
+import { useDarkTheme } from "@liner-fe/design-token";
+var useIllust = /* @__PURE__ */ __name(({ darkSrc, src }) => {
+  const { isDarkMode } = useDarkTheme();
+  const sourcePrefix = (() => {
+    if (isDarkMode) {
+      if (darkSrc?.inverse) {
+        return LIGHT_MODE_ILLUST_PREFIX;
+      }
+      return DARK_MODE_ILLUST_PREFIX;
+    }
+    if (src.inverse === false) {
+      return DARK_MODE_ILLUST_PREFIX;
+    }
+    return LIGHT_MODE_ILLUST_PREFIX;
+  })();
+  const currentSourceByColorTheme = isDarkMode ? darkSrc?.name || src.name : src.name;
+  return { sourcePrefix, currentSourceByColorTheme, isDarkMode };
+}, "useIllust");
+
+// src/components/index.tsx
+import { jsx } from "react/jsx-runtime";
+var Illust = /* @__PURE__ */ __name((props) => {
+  const { src, width, margin } = props;
+  const { sourcePrefix, currentSourceByColorTheme } = useIllust({
+    darkSrc: src.dark,
+    src: src.light
+  });
+  const aspectRatio = illustSize[currentSourceByColorTheme] ? illustSize[currentSourceByColorTheme].width / illustSize[currentSourceByColorTheme].height : void 0;
+  const css = {
+    width,
+    margin
+  };
+  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;
+  return /* @__PURE__ */ jsx("div", { style: css, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...props,
+      alt: currentSourceByColorTheme,
+      src: source,
+      width,
+      height: aspectRatio ? width / aspectRatio : width
+    }
+  ) });
+}, "Illust");
+
+// src/utils/illust.ts
+var prefetchIllust = /* @__PURE__ */ __name(async ({
+  name,
+  isDark = false
+}) => await fetch(`${ILLUST}${isDark ? "/dark/" : "/light/"}${name}.webp`), "prefetchIllust");
+export {
+  Illust,
+  prefetchIllust
+};

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@liner-fe/illust",
-  "version": "0.1.3",
+  "version": "0.1.4",
+  "type": "module",
   "scripts": {
-    "build": ""
+    "build": "yarn tsup --config ./config/tsup/tsup.config.ts"
   },
-  "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "main": "./lib/index.js"
   },
   "files": [
     "*"
   ],
-  "main": "./src/index.ts",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "dependencies": {
     "@liner-fe/design-token": "workspace:^",
     "react": "^18.2.0",

package/src/components/index.tsx

@@ -1,6 +1,5 @@
 import { illustSize } from '../constants/size';
-import Image, { ImageProps } from 'next/image';
-import { CSSProperties } from 'react';
+import { CSSProperties, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
 import { useIllust } from '../hooks/useIllust';
 import { IllustType } from '../types/illust';
 import { Property } from 'csstype';
@@ -10,7 +9,8 @@ export interface Source<T extends false | true = true> {
   inverse?: T;
 }
 
-export interface IllustProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill' | 'src'> {
+export interface IllustProps
+  extends Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> {
   width: number;
   src: { light: Source<false>; dark?: Source };
   margin?: Property.Margin<string>;
@@ -36,13 +36,12 @@ export const Illust = (props: IllustProps) => {
 
   return (
     <div style={css}>
-      <Image
+      <img
         {...props}
         alt={currentSourceByColorTheme}
         src={source}
         width={width}
         height={aspectRatio ? width / aspectRatio : width}
-        unoptimized
       />
     </div>
   );