@iyulab/components 1.9.0 → 1.10.0

package/plugins/vite-plugin-glob-resolve.js

@@ -1,66 +0,0 @@
-import { readFileSync } from 'fs';
-import { resolve, dirname, basename } from 'path';
-import { createHash } from 'crypto';
-const VIRTUAL_PREFIX = '\0glob-assets';
-const SUPPORTED_QUERIES = ['?raw', '?inline', '?url'];
-function shortHash(input) {
-    return createHash('md5').update(input).digest('hex').slice(0, 8);
-}
-/**
- * Rolldown의 preserveModules 모드에서 import.meta.glob의 query 옵션 사용 시
- * 빈 export가 생성되는 문제를 해결하는 플러그인.
- *
- * - `?raw`: 파일 내용을 문자열로 반환
- * - `?inline`: 파일 내용을 문자열로 반환
- * - `?url`: 파일을 asset으로 emit하고 URL을 반환
- *
- * 가상 모듈(\0 prefix)로 변환하여 파일명에 `?`가 포함되는 것을 방지합니다.
- */
-export default function globResolve() {
-    const idToAbsPath = new Map();
-    return {
-        name: 'vite:glob-resolve',
-        enforce: 'pre',
-        resolveId(source, importer) {
-            for (const query of SUPPORTED_QUERIES) {
-                if (source.endsWith(query)) {
-                    const rawPath = source.slice(0, -query.length);
-                    const absPath = importer
-                        ? resolve(dirname(importer), rawPath)
-                        : rawPath;
-                    const name = basename(absPath);
-                    const hash = shortHash(absPath);
-                    const queryName = query.slice(1);
-                    const virtualId = `${VIRTUAL_PREFIX}_${queryName}/${name}.${hash}`;
-                    idToAbsPath.set(virtualId, absPath);
-                    return virtualId;
-                }
-            }
-            return null;
-        },
-        load(id) {
-            if (!id.startsWith(VIRTUAL_PREFIX))
-                return null;
-            const absPath = idToAbsPath.get(id);
-            if (!absPath)
-                return null;
-            // virtualId에서 queryName 추출: "\0glob-assets_{queryName}/..."
-            const queryName = id.slice(VIRTUAL_PREFIX.length + 1).split('/')[0];
-            if (queryName === 'raw' || queryName === 'inline') {
-                const content = readFileSync(absPath, 'utf-8');
-                return `export default ${JSON.stringify(content)};`;
-            }
-            if (queryName === 'url') {
-                const source = readFileSync(absPath);
-                const fileName = basename(absPath);
-                const ref = this.emitFile({
-                    type: 'asset',
-                    name: fileName,
-                    source,
-                });
-                return `export default import.meta.ROLLUP_FILE_URL_${ref};`;
-            }
-            return null;
-        }
-    };
-}

package/plugins/vite-plugin-react-wrapper.d.ts

@@ -1,14 +0,0 @@
-import type { Plugin } from 'vite';
-interface PluginOptions {
-    /** 컴포넌트 소스 디렉토리 경로 (기본값: 'src/components') */
-    input?: string;
-    /** React 래퍼 출력 폴더 - 빌드 outDir 기준 상대 경로 (기본값: 'react') */
-    output?: string;
-    /** 래퍼 생성에서 제외할 glob 패턴 목록 (cwd: 프로젝트 루트) */
-    exclude?: string[];
-}
-/**
- * Lit Element 컴포넌트를 React 래퍼로 자동 생성하는 Vite 플러그인
- */
-export default function reactWrapperPlugin(options: PluginOptions): Plugin;
-export {};

package/plugins/vite-plugin-react-wrapper.js

@@ -1,235 +0,0 @@
-import { resolve, join, relative, dirname, basename } from 'path';
-import { readFileSync, writeFileSync, mkdirSync } from 'fs';
-import { gzipSync } from 'zlib';
-import { globSync } from 'glob';
-/**
- * Lit Element 컴포넌트를 React 래퍼로 자동 생성하는 Vite 플러그인
- */
-export default function reactWrapperPlugin(options) {
-    let rootDir;
-    let buildOutDir;
-    let outDir;
-    return {
-        name: 'vite-plugin-react-wrapper',
-        configResolved(config) {
-            rootDir = config.root;
-            buildOutDir = resolve(rootDir, config.build.outDir);
-            outDir = resolve(buildOutDir, options.output || 'react');
-        },
-        closeBundle() {
-            const log = (msg) => console.log(`\x1b[36m[react-wrapper]\x1b[0m ${msg}`);
-            log('Generating React wrappers...');
-            // 컴포넌트 수집
-            const inputPattern = (options.input || 'src/components') + '/**/*.ts';
-            let files = globSync(inputPattern, { cwd: rootDir, absolute: true });
-            if (options.exclude?.length) {
-                const excluded = new Set(options.exclude.flatMap(p => globSync(p, { cwd: rootDir, absolute: true })));
-                files = files.filter((f) => !excluded.has(f));
-            }
-            const components = files.flatMap((f) => parseComponent(f));
-            if (components.length === 0) {
-                log('No components found.');
-                return;
-            }
-            // 출력 디렉토리 생성
-            mkdirSync(outDir, { recursive: true });
-            // 래퍼 생성
-            const generated = [];
-            for (const comp of components) {
-                generated.push(...writeWrapper(comp, outDir, buildOutDir));
-            }
-            generated.push(...writeIndex(components, outDir, buildOutDir));
-            // 결과 출력
-            generated.sort((a, b) => a.size - b.size);
-            for (const f of generated) {
-                const kb = (f.size / 1024).toFixed(2);
-                const gzKb = (f.gzipSize / 1024).toFixed(2);
-                const pad = ' '.repeat(Math.max(0, 50 - f.path.length));
-                console.log(`${f.path}${pad}${kb.padStart(6)} kB │ gzip: ${gzKb.padStart(6)} kB`);
-            }
-            log(`Generated ${components.length} React wrappers.`);
-        }
-    };
-}
-// --- 컴포넌트 파싱 ---
-function parseComponent(filePath) {
-    const content = readFileSync(filePath, 'utf-8');
-    // @customElement('tag-name') 데코레이터 확인
-    const tagMatch = content.match(/@customElement\s*\(\s*['"]([^'"]+)['"]\s*\)/);
-    if (!tagMatch)
-        return [];
-    // export class ClassName 추출
-    const classMatch = content.match(/export\s+class\s+(\w+)/);
-    if (!classMatch)
-        return [];
-    const events = collectEvents(content);
-    // 이벤트를 발생시키지만(relay/dispatchEvent) 정적으로 이름을 도출할 수 없는 컴포넌트가
-    // @event 태그도 없으면 events 맵이 빈 채로 생성되어 React 소비자가 이벤트를 구독할 수 없다.
-    // (this.fire<T>('name')은 이름이 문자열 리터럴로 잡히므로 이 경고 대상이 아님)
-    if (events.length === 0 && /this\.(relay|dispatchEvent)\s*\(/.test(content)) {
-        console.warn(`\x1b[33m[react-wrapper]\x1b[0m ${classMatch[1]} (${tagMatch[1]}): ` +
-            `이벤트를 발생시키지만(relay/dispatchEvent) @event 태그가 없어 React 래퍼에 이벤트 prop이 노출되지 않습니다. ` +
-            `클래스 JSDoc에 '@event <name>'을 추가하세요.`);
-    }
-    return [{
-            className: classMatch[1],
-            tagName: tagMatch[1],
-            filePath,
-            events,
-        }];
-}
-function collectEvents(content) {
-    // import 구문에서 타입명 → 소스 경로 매핑 수집
-    // 예: import { ShowEventDetail } from '../../events/ShowEvent.js';
-    const typeImportMap = new Map();
-    for (const m of content.matchAll(/import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g)) {
-        const importPath = m[2];
-        for (const name of m[1].split(',')) {
-            const typeName = name.replace(/type\s+/, '').trim();
-            if (typeName)
-                typeImportMap.set(typeName, importPath);
-        }
-    }
-    const eventMap = new Map();
-    // JSDoc @event 패턴: @event eventName
-    for (const m of content.matchAll(/@event\s+([\w-]+)/g)) {
-        if (!eventMap.has(m[1]))
-            eventMap.set(m[1], { detailType: 'unknown', importPath: '' });
-    }
-    // this.fire<DetailType>('eventName') 패턴 - 제네릭 타입 추출
-    for (const m of content.matchAll(/this\.fire\s*(?:<([^>]+)>)?\s*\(\s*['"]([\w-]+)['"]/g)) {
-        const detailType = m[1] || 'unknown';
-        const importPath = typeImportMap.get(detailType) || '';
-        eventMap.set(m[2], { detailType, importPath });
-    }
-    return Array.from(eventMap, ([name, { detailType, importPath }]) => ({
-        name,
-        reactName: toCamelEvent(name),
-        detailType,
-        importPath,
-    }));
-}
-/** kebab-case 이벤트명을 onCamelCase로 변환 (예: shift-start → onShiftStart) */
-function toCamelEvent(name) {
-    return 'on' + name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
-}
-function writeFile(filePath, content, buildOutDir) {
-    writeFileSync(filePath, content, 'utf-8');
-    return {
-        path: relative(buildOutDir, filePath).replace(/\\/g, '/'),
-        size: Buffer.byteLength(content, 'utf-8'),
-        gzipSize: gzipSync(content).length,
-    };
-}
-function computeImportPath(from, to) {
-    let rel = relative(dirname(from), to).replace(/\\/g, '/').replace(/\.ts$/, '');
-    if (!rel.startsWith('.'))
-        rel = './' + rel;
-    return rel;
-}
-function writeWrapper(comp, outDir, buildOutDir) {
-    const { className, tagName, events } = comp;
-    const jsPath = join(outDir, `${className}.js`);
-    const dtsPath = join(outDir, `${className}.d.ts`);
-    // 소스 파일의 빌드 출력 경로 추정 (src/ → 빌드 outDir 매핑)
-    const srcIndex = comp.filePath.replace(/\\/g, '/').indexOf('/src/');
-    const relFromSrc = srcIndex >= 0
-        ? comp.filePath.substring(srcIndex + 5).replace(/\\/g, '/').replace(/\.ts$/, '')
-        : basename(comp.filePath, '.ts');
-    const builtModulePath = resolve(buildOutDir, relFromSrc + '.js');
-    const importPath = computeImportPath(jsPath, builtModulePath);
-    // events 객체 생성
-    const eventsObj = events.length > 0
-        ? `{\n${events.map(e => `    ${e.reactName}: '${e.name}',`).join('\n')}\n  }`
-        : '{}';
-    // .js
-    const js = `import React from 'react';
-import { createComponent } from '@lit/react';
-import { ${className} as ${className}Element } from '${importPath}';
-
-export const ${className} = createComponent({
-  react: React,
-  tagName: '${tagName}',
-  elementClass: ${className}Element,
-  events: ${eventsObj},
-});
-`;
-    // .d.ts - import 구문 생성
-    const dtsImportPath = importPath.replace(/\.js$/, '');
-    const dtsImports = [
-        `import React from 'react';`,
-        `import { ${className} as ${className}Element } from '${dtsImportPath}';`,
-    ];
-    // 이벤트 detail 타입별 import - 소스 원본 경로 기준으로 빌드 경로 계산
-    const srcDir = dirname(comp.filePath);
-    const detailImportMap = new Map(); // 빌드경로 → [타입명]
-    for (const e of events) {
-        if (e.detailType === 'unknown' || !e.importPath)
-            continue;
-        // 소스 상대경로를 절대경로로 변환 후 빌드 경로 계산
-        const absEventSrc = resolve(srcDir, e.importPath).replace(/\\/g, '/');
-        const eventSrcIndex = absEventSrc.indexOf('/src/');
-        const relFromSrc = eventSrcIndex >= 0
-            ? absEventSrc.substring(eventSrcIndex + 5).replace(/\.js$/, '')
-            : '';
-        if (!relFromSrc)
-            continue;
-        const absEventBuilt = resolve(buildOutDir, relFromSrc);
-        const eventImportPath = computeImportPath(dtsPath, absEventBuilt + '.js').replace(/\.js$/, '');
-        const types = detailImportMap.get(eventImportPath) || [];
-        if (!types.includes(e.detailType))
-            types.push(e.detailType);
-        detailImportMap.set(eventImportPath, types);
-    }
-    for (const [path, types] of detailImportMap) {
-        dtsImports.push(`import { type ${types.join(', type ')} } from '${path}';`);
-    }
-    const eventTypes = events.length > 0
-        ? events.map(e => {
-            const type = e.detailType !== 'unknown' ? `CustomEvent<${e.detailType}>` : 'CustomEvent';
-            return `  ${e.reactName}?: (event: ${type}) => void;`;
-        }).join('\n') + '\n'
-        : '';
-    // 래퍼 이벤트 prop(onChange 등)은 React.HTMLAttributes 의 동명 핸들러와 교집합되면
-    // 어떤 시그니처도 대입 불가가 된다. HTMLAttributes 쪽에서 해당 키를 제거해 CustomEvent
-    // 시그니처만 남긴다. 이벤트가 없으면 Omit<…, never> 로 HTMLAttributes 원형 유지.
-    const eventKeyUnion = events.length > 0
-        ? events.map(e => `'${e.reactName}'`).join(' | ')
-        : 'never';
-    // Partial<Element> 은 DOM 프로퍼티(children: HTMLCollection 등)를 포함해 React 의 JSX
-    // children/이벤트/className 등과 충돌한다. keyof React.HTMLAttributes 를 제거해 컴포넌트
-    // 고유 prop만 남기고, React 친화 타입(children: ReactNode 포함)은 HTMLAttributes 가 제공한다.
-    //
-    // `React.RefAttributes` 를 반드시 교집합에 넣는다 — `ForwardRefExoticComponent<P>` 는 P 에
-    // ref 를 자동으로 더해 주지 않는다. @lit/react 의 `ReactWebComponent` 자신이
-    // `PropsWithoutRef<…> & React.RefAttributes<I>` 로 선언돼 있으므로(런타임은 ref 를 전달한다),
-    // 이것을 빠뜨리면 **런타임은 되는데 타입만 거부하는** 괴리가 생긴다.
-    const dts = `${dtsImports.join('\n')}
-
-export declare const ${className}: React.ForwardRefExoticComponent<
-  Omit<Partial<${className}Element>, keyof React.HTMLAttributes<${className}Element>>
-    & Omit<React.HTMLAttributes<${className}Element>, ${eventKeyUnion}>
-    & React.RefAttributes<${className}Element>
-    & {
-${eventTypes}  }
->;
-
-export type ${className}Props = React.ComponentProps<typeof ${className}>;
-`;
-    return [
-        writeFile(jsPath, js, buildOutDir),
-        writeFile(dtsPath, dts, buildOutDir),
-    ];
-}
-function writeIndex(components, outDir, buildOutDir) {
-    const jsExports = components
-        .map(c => `export { ${c.className} } from './${c.className}.js';`)
-        .join('\n');
-    const dtsExports = components
-        .map(c => `export { ${c.className}, ${c.className}Props } from './${c.className}';`)
-        .join('\n');
-    return [
-        writeFile(join(outDir, 'index.js'), jsExports + '\n', buildOutDir),
-        writeFile(join(outDir, 'index.d.ts'), dtsExports + '\n', buildOutDir),
-    ];
-}