@owp/core 2.4.1 → 2.5.0

package/vite/owpCoreAssetsPlugin.cjs

@@ -0,0 +1,120 @@
+const { resolve } = require('node:path');
+const {
+  createStaticAssetPlugin,
+  createStylesheetTag,
+  hasAssetReference,
+  normalizeAssetBasePath,
+  resolveAssetUrl,
+} = require('./staticAssetPlugin.cjs');
+const {
+  owpTreeGridAssetsPlugin,
+  resolveOwpCorePackageRoot,
+  resolveOwpTreeGridAssetRoot,
+} = require('./treeGridAssetsPlugin.cjs');
+const {
+  owpCoreFixedImagesPlugin,
+  resolveOwpFixedImageAssetRoot,
+} = require('./owpCoreFixedImagesPlugin.cjs');
+
+const DEFAULT_FONT_ASSET_BASE_PATH = '/assets/fonts';
+const DEFAULT_ICON_ASSET_BASE_PATH = '/assets/icons';
+const FONT_STYLESHEET_RELATIVE_PATHS = [
+  'material-design-icons/MaterialIconsOutlined.css',
+  'pretendard/pretendard-subset.css',
+];
+
+/** 폰트 자산 루트 경로 조회 */
+const resolveOwpFontAssetRoot = (owpCoreRoot) => {
+  return resolve(resolveOwpCorePackageRoot(owpCoreRoot), 'assets/fonts');
+};
+
+/** 아이콘 자산 루트 경로 조회 */
+const resolveOwpIconAssetRoot = (owpCoreRoot) => {
+  return resolve(resolveOwpCorePackageRoot(owpCoreRoot), 'assets/icons');
+};
+
+/** OWP Core 공통 자산 플러그인 */
+const owpCoreAssetsPlugin = ({
+  fontAssetBasePath = DEFAULT_FONT_ASSET_BASE_PATH,
+  fontAssetRoot = resolveOwpFontAssetRoot(),
+  iconAssetBasePath = DEFAULT_ICON_ASSET_BASE_PATH,
+  iconAssetRoot = resolveOwpIconAssetRoot(),
+  injectFontStylesheets = true,
+  includeFixedImages = true,
+  fixedImageAssetBasePath,
+  fixedImageAssetRoot,
+  includeTreeGrid = true,
+  treeGridAssetBasePath,
+  treeGridAssetRoot,
+} = {}) => {
+  const normalizedFontAssetBasePath = normalizeAssetBasePath(fontAssetBasePath);
+  const fontAndIconPlugins = [
+    createStaticAssetPlugin({
+      assetDefinitions: [
+        {
+          assetBasePath: normalizedFontAssetBasePath,
+          assetRoot: fontAssetRoot,
+        },
+        {
+          assetBasePath: normalizeAssetBasePath(iconAssetBasePath),
+          assetRoot: iconAssetRoot,
+        },
+      ],
+      name: 'owp-core-static-assets',
+    }),
+    {
+      name: 'owp-core-font-html',
+      transformIndexHtml(html) {
+        if (!injectFontStylesheets) {
+          return {
+            html,
+            tags: [],
+          };
+        }
+
+        const tags = FONT_STYLESHEET_RELATIVE_PATHS.flatMap((relativeStylesheetPath) => {
+          if (hasAssetReference(html, relativeStylesheetPath)) {
+            return [];
+          }
+
+          return [createStylesheetTag(resolveAssetUrl(normalizedFontAssetBasePath, relativeStylesheetPath))];
+        });
+
+        return {
+          html,
+          tags,
+        };
+      },
+    },
+  ];
+
+  const plugins = [...fontAndIconPlugins];
+
+  if (includeFixedImages) {
+    plugins.push(
+      ...owpCoreFixedImagesPlugin({
+        assetBasePath: fixedImageAssetBasePath,
+        assetRoot: fixedImageAssetRoot ?? resolveOwpFixedImageAssetRoot(),
+      }),
+    );
+  }
+
+  if (includeTreeGrid) {
+    plugins.push(
+      ...owpTreeGridAssetsPlugin({
+        assetBasePath: treeGridAssetBasePath,
+        assetRoot: treeGridAssetRoot ?? resolveOwpTreeGridAssetRoot(),
+      }),
+    );
+  }
+
+  return plugins;
+};
+
+module.exports = {
+  owpCoreAssetsPlugin,
+  resolveOwpFixedImageAssetRoot,
+  resolveOwpFontAssetRoot,
+  resolveOwpIconAssetRoot,
+  resolveOwpTreeGridAssetRoot,
+};

package/vite/owpCoreAssetsPlugin.mjs

@@ -0,0 +1,14 @@
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+/** OWP Core 공통 정적 자산 플러그인 ESM 엔트리 */
+export const {
+  owpCoreAssetsPlugin,
+  resolveOwpFixedImageAssetRoot,
+  resolveOwpFontAssetRoot,
+  resolveOwpIconAssetRoot,
+  resolveOwpTreeGridAssetRoot,
+} = require(
+  './owpCoreAssetsPlugin.cjs',
+);

package/vite/owpCoreFixedImagesPlugin.cjs

@@ -0,0 +1,33 @@
+const { resolve } = require('node:path');
+const { createStaticAssetPlugin } = require('./staticAssetPlugin.cjs');
+const { resolveOwpCorePackageRoot } = require('./treeGridAssetsPlugin.cjs');
+
+const DEFAULT_FIXED_IMAGE_ASSET_BASE_PATH = '/assets/images';
+
+/** 고정 이미지 자산 루트 경로 조회 */
+const resolveOwpFixedImageAssetRoot = (owpCoreRoot) => {
+  return resolve(resolveOwpCorePackageRoot(owpCoreRoot), 'fixed-images');
+};
+
+/** OWP Core 고정 이미지 자산 플러그인 */
+const owpCoreFixedImagesPlugin = ({
+  assetBasePath = DEFAULT_FIXED_IMAGE_ASSET_BASE_PATH,
+  assetRoot = resolveOwpFixedImageAssetRoot(),
+} = {}) => {
+  return [
+    createStaticAssetPlugin({
+      assetDefinitions: [
+        {
+          assetBasePath,
+          assetRoot,
+        },
+      ],
+      name: 'owp-core-fixed-images',
+    }),
+  ];
+};
+
+module.exports = {
+  owpCoreFixedImagesPlugin,
+  resolveOwpFixedImageAssetRoot,
+};

package/vite/owpCoreFixedImagesPlugin.mjs

@@ -0,0 +1,11 @@
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+/** OWP Core 고정 이미지 자산 플러그인 ESM 엔트리 */
+export const {
+  owpCoreFixedImagesPlugin,
+  resolveOwpFixedImageAssetRoot,
+} = require(
+  './owpCoreFixedImagesPlugin.cjs',
+);

package/vite/staticAssetPlugin.cjs

@@ -0,0 +1,187 @@
+const { createReadStream, promises: fs } = require('node:fs');
+const { extname, posix, relative, resolve, sep } = require('node:path');
+
+const MIME_TYPE_BY_EXTENSION = {
+  '.css': 'text/css; charset=utf-8',
+  '.cur': 'image/x-icon',
+  '.gif': 'image/gif',
+  '.html': 'text/html; charset=utf-8',
+  '.jpeg': 'image/jpeg',
+  '.jpg': 'image/jpeg',
+  '.js': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.ttf': 'font/ttf',
+  '.txt': 'text/plain; charset=utf-8',
+  '.wav': 'audio/wav',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.xml': 'application/xml; charset=utf-8',
+};
+
+/** 정적 자산 base path 정규화 */
+const normalizeAssetBasePath = (assetBasePath) => {
+  const trimmedPath = assetBasePath.trim();
+  const normalizedPath = trimmedPath.startsWith('/') ? trimmedPath : `/${trimmedPath}`;
+
+  return normalizedPath.replace(/\/+$/, '');
+};
+
+/** 정적 자산 파일 목록 수집 */
+const collectAssetFiles = async (rootPath) => {
+  let entries;
+
+  try {
+    entries = await fs.readdir(rootPath, {
+      withFileTypes: true,
+    });
+  } catch (error) {
+    if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') {
+      return [];
+    }
+
+    throw error;
+  }
+
+  const assetFiles = await Promise.all(
+    entries.map(async (entry) => {
+      const entryPath = resolve(rootPath, entry.name);
+
+      if (entry.isDirectory()) {
+        return collectAssetFiles(entryPath);
+      }
+
+      return [entryPath];
+    }),
+  );
+
+  return assetFiles.flat().sort();
+};
+
+/** 정적 자산 응답 경로 보호 */
+const resolveSafeAssetFilePath = (assetRootPath, relativePath) => {
+  const resolvedPath = resolve(assetRootPath, relativePath);
+
+  if (resolvedPath === assetRootPath || resolvedPath.startsWith(`${assetRootPath}${sep}`)) {
+    return resolvedPath;
+  }
+
+  return undefined;
+};
+
+/** 정적 자산 MIME 타입 조회 */
+const getAssetMimeType = (assetFilePath) => {
+  return MIME_TYPE_BY_EXTENSION[extname(assetFilePath).toLowerCase()] ?? 'application/octet-stream';
+};
+
+/** 정적 자산 URL 생성 */
+const resolveAssetUrl = (assetBasePath, assetPath) => {
+  return `${assetBasePath}/${assetPath.replace(/^\/+/, '')}`;
+};
+
+/** 정적 자산 참조 여부 */
+const hasAssetReference = (html, assetPath) => {
+  return html.includes(assetPath);
+};
+
+/** 정적 스타일시트 링크 태그 */
+const createStylesheetTag = (href) => {
+  return {
+    attrs: {
+      href,
+      rel: 'stylesheet',
+    },
+    injectTo: 'head-prepend',
+    tag: 'link',
+  };
+};
+
+/** 정적 자산 서빙 및 emit 플러그인 */
+const createStaticAssetPlugin = ({ assetDefinitions, name }) => {
+  const normalizedAssetDefinitions = assetDefinitions.map(({ assetBasePath, assetRoot }) => ({
+    assetBasePath: normalizeAssetBasePath(assetBasePath),
+    assetRoot: resolve(assetRoot),
+  }));
+
+  return {
+    name,
+    async buildStart() {
+      for (const { assetBasePath, assetRoot } of normalizedAssetDefinitions) {
+        const assetFiles = await collectAssetFiles(assetRoot);
+
+        for (const assetFilePath of assetFiles) {
+          const relativeAssetPath = relative(assetRoot, assetFilePath).split(sep).join('/');
+          const source = await fs.readFile(assetFilePath);
+
+          this.emitFile({
+            fileName: posix.join(assetBasePath.replace(/^\/+/, ''), relativeAssetPath),
+            source,
+            type: 'asset',
+          });
+        }
+      }
+    },
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) {
+          next();
+          return;
+        }
+
+        const requestUrl = new URL(req.url, 'http://localhost');
+        const matchedAssetDefinition = normalizedAssetDefinitions.find(({ assetBasePath }) => {
+          return requestUrl.pathname.startsWith(`${assetBasePath}/`);
+        });
+
+        if (!matchedAssetDefinition) {
+          next();
+          return;
+        }
+
+        const relativeAssetPath = decodeURIComponent(
+          requestUrl.pathname.slice(`${matchedAssetDefinition.assetBasePath}/`.length),
+        );
+        const assetFilePath = resolveSafeAssetFilePath(
+          matchedAssetDefinition.assetRoot,
+          relativeAssetPath,
+        );
+
+        if (!assetFilePath) {
+          res.statusCode = 403;
+          res.end();
+          return;
+        }
+
+        try {
+          const assetStat = await fs.stat(assetFilePath);
+
+          if (!assetStat.isFile()) {
+            next();
+            return;
+          }
+
+          res.setHeader('Content-Length', assetStat.size);
+          res.setHeader('Content-Type', getAssetMimeType(assetFilePath));
+          createReadStream(assetFilePath).pipe(res);
+        } catch (error) {
+          if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') {
+            next();
+            return;
+          }
+
+          next(error);
+        }
+      });
+    },
+  };
+};
+
+module.exports = {
+  collectAssetFiles,
+  createStaticAssetPlugin,
+  createStylesheetTag,
+  hasAssetReference,
+  normalizeAssetBasePath,
+  resolveAssetUrl,
+};

package/vite/treeGridAssetsPlugin.cjs

@@ -0,0 +1,88 @@
+const { dirname, resolve } = require('node:path');
+const {
+  createStaticAssetPlugin,
+  normalizeAssetBasePath,
+  resolveAssetUrl,
+} = require('./staticAssetPlugin.cjs');
+
+const DEFAULT_TREE_GRID_ASSET_BASE_PATH = '/assets/vendors/Grid';
+const TREE_GRID_ASSET_BASE_PATH_GLOBAL_KEY = '__OWP_TREE_GRID_ASSET_BASE_PATH__';
+
+/** OWP Core 패키지 루트 경로 조회 */
+const resolveOwpCorePackageRoot = (owpCoreRoot) => {
+  return owpCoreRoot ?? resolve(dirname(__dirname));
+};
+
+/** TreeGrid 자산 루트 경로 조회 */
+const resolveOwpTreeGridAssetRoot = (owpCoreRoot) => {
+  return resolve(resolveOwpCorePackageRoot(owpCoreRoot), 'treegrid');
+};
+
+/** TreeGrid 스크립트 참조 여부 */
+const hasTreeGridScriptReference = (html) => {
+  return html.includes('GridE.js');
+};
+
+/** TreeGrid base path 설정 스크립트 */
+const createTreeGridRuntimeConfigTag = (assetBasePath) => {
+  return {
+    attrs: {
+      'data-owp-tree-grid-config': '',
+    },
+    children: `window.${TREE_GRID_ASSET_BASE_PATH_GLOBAL_KEY} = ${JSON.stringify(assetBasePath)};`,
+    injectTo: 'body-prepend',
+    tag: 'script',
+  };
+};
+
+/** TreeGrid 런타임 스크립트 태그 */
+const createTreeGridRuntimeScriptTag = (assetBasePath) => {
+  return {
+    attrs: {
+      src: resolveAssetUrl(assetBasePath, 'GridE.js'),
+    },
+    injectTo: 'body-prepend',
+    tag: 'script',
+  };
+};
+
+/** TreeGrid 정적 자산 플러그인 */
+const owpTreeGridAssetsPlugin = ({
+  assetBasePath = DEFAULT_TREE_GRID_ASSET_BASE_PATH,
+  assetRoot = resolveOwpTreeGridAssetRoot(),
+} = {}) => {
+  const normalizedTreeGridAssetBasePath = normalizeAssetBasePath(assetBasePath);
+
+  return [
+    createStaticAssetPlugin({
+      assetDefinitions: [
+        {
+          assetBasePath: normalizedTreeGridAssetBasePath,
+          assetRoot,
+        },
+      ],
+      name: 'owp-tree-grid-assets',
+    }),
+    {
+      name: 'owp-tree-grid-html',
+      transformIndexHtml(html) {
+        const tags = [createTreeGridRuntimeConfigTag(normalizedTreeGridAssetBasePath)];
+
+        if (!hasTreeGridScriptReference(html)) {
+          tags.push(createTreeGridRuntimeScriptTag(normalizedTreeGridAssetBasePath));
+        }
+
+        return {
+          html,
+          tags,
+        };
+      },
+    },
+  ];
+};
+
+module.exports = {
+  owpTreeGridAssetsPlugin,
+  resolveOwpCorePackageRoot,
+  resolveOwpTreeGridAssetRoot,
+};

package/vite/treeGridAssetsPlugin.mjs

@@ -0,0 +1,12 @@
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+/** TreeGrid Vite 정적 자산 플러그인 ESM 엔트리 */
+export const {
+  owpTreeGridAssetsPlugin,
+  resolveOwpCorePackageRoot,
+  resolveOwpTreeGridAssetRoot,
+} = require(
+  './treeGridAssetsPlugin.cjs',
+);