{"_id":"@bj.pyeon/lite-state","name":"@bj.pyeon/lite-state","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bj.pyeon/lite-state","private":false,"version":"0.1.0","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"module":"dist/lite-react.es.js","exports":{".":{"import":"./dist/lite-react.es.js"}},"devDependencies":{"vite":"^7.2.4"},"gitHead":"08da4bb4163db3311f86da093ca0b1720825ef7a","_id":"@bj.pyeon/lite-state@0.1.0","description":"가벼운 커스텀 엘리먼트 / 상태 관리 / 라우터를 제공하는 **lite_react**를 CDN으로 배포하고 사용하는 방법을 정리한 문서입니다.","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-QvMY/ukchBhahIJsNCq3bFbjwjFm8lSJ88fkua+rori2O8XHe3w/AiIOJJ1EwH1h3bDSGiE3YBdleFFXYjJjmA==","shasum":"1d9eaac3471063b99dcfb38abda216fd38e107f9","tarball":"https://registry.npmjs.org/@bj.pyeon/lite-state/-/lite-state-0.1.0.tgz","fileCount":5,"unpackedSize":29028,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC5XedrxhKrQ6aZ+qDwnZV1uHErgJVOGFSsPWuBWU+m2AiBgF9CKfh5KwH+sTuAKyBlY23tXlXPbcULWVsnFZo7FKQ=="}]},"_npmUser":{"name":"bj.pyeon","email":"ehdfkd941209@gmail.com"},"directories":{},"maintainers":[{"name":"bj.pyeon","email":"ehdfkd941209@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lite-state_0.1.0_1764199749340_0.7184093267123255"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-26T23:29:09.232Z","0.1.0":"2025-11-26T23:29:09.554Z","modified":"2025-11-26T23:29:09.870Z"},"maintainers":[{"name":"bj.pyeon","email":"ehdfkd941209@gmail.com"}],"description":"가벼운 커스텀 엘리먼트 / 상태 관리 / 라우터를 제공하는 **lite_react**를 CDN으로 배포하고 사용하는 방법을 정리한 문서입니다.","readme":"# lite_react CDN 사용 가이드\n\n가벼운 커스텀 엘리먼트 / 상태 관리 / 라우터를 제공하는 **lite_react**를\nCDN으로 배포하고 사용하는 방법을 정리한 문서입니다.\n\n- 빌드 도구: Vite (library mode)\n- 출력 형식:\n - ESM: `dist/lite-react.es.js`\n - UMD: `dist/lite-react.umd.js`\n\n---\n\n## 1. 빌드하기\n\n먼저 라이브러리를 한 번 빌드합니다.\n\n```bash\ncd lite_react\nnpm install\nnpm run build\n```\n\n빌드가 끝나면 `lite_react/dist` 안에 다음 파일들이 생성됩니다.\n\n- `dist/lite-react.es.js` (ESM 번들)\n- `dist/lite-react.umd.js` (UMD 번들, 전역 변수 사용 가능)\n\n라이브러리의 공개 엔트리 포인트는 `src/index.js`이며,\n여기서 다음 API들을 export 합니다.\n\n- `BaseComponent`\n- `getStateComponent`\n- `connectDB`\n- `createHashRouter`\n\n---\n\n## 2. npm에 배포해서 CDN으로 쓰기 (권장)\n\n`package.json`은 이미 npm 배포와 CDN 사용을 고려해 설정되어 있습니다.\n\n- `\"private\": false`\n- `\"main\": \"dist/lite-react.umd.cjs\"`\n- `\"module\": \"dist/lite-react.es.js\"`\n- `\"exports\"` 에 ESM/CJS 설정\n- `\"files\": [\"dist\"]`\n\n### 2-1. 패키지 이름/버전 확인\n\n`lite_react/package.json`에서 이름과 버전을 원하는 값으로 바꿉니다.\n예시:\n\n```jsonc\n{\n \"name\": \"lite_react\",\n \"version\": \"0.1.0\"\n}\n```\n\n### 2-2. npm publish\n\n```bash\ncd lite_react\nnpm login # 처음 한 번만\nnpm publish\n```\n\n성공하면 jsDelivr, unpkg 같은 npm 기반 CDN에서 자동으로 제공됩니다.\n\n---\n\n## 3. CDN에서 사용하기\n\n아래 예시에서는 패키지 이름을 `lite_react`, 버전을 `0.1.0`이라고 가정합니다.\n\n### 3-1. ESM (jsDelivr 예시)\n\n```html\n\n\n \n \n lite_react CDN ESM 예제\n \n \n \n\n \n \n \n```\n\n### 3-2. UMD + 전역 변수 (LiteReact)\n\nVite 라이브러리 설정에서 `name: \"LiteReact\"`로 지정되어 있으므로,\nUMD 번들을 불러오면 전역 객체 `LiteReact`를 사용할 수 있습니다.\n\n```html\n\n\n \n \n lite_react CDN UMD 예제\n \n \n \n\n \n \n \n \n```\n\n---\n\n## 4. npm 없이 직접 CDN/스토리지에 올리기\n\nnpm을 쓰지 않고도, 빌드된 결과물을 직접 원하는 CDN/스토리지에 업로드해서 사용할 수 있습니다.\n\n1. 먼저 빌드:\n\n ```bash\n cd lite_react\n npm run build\n ```\n\n2. 생성된 파일 업로드:\n\n - `dist/lite-react.es.js`\n - `dist/lite-react.umd.js`\n\n3. 업로드 후 제공되는 URL을 HTML에서 그대로 사용:\n\n ```html\n \n ```\n\n혹은:\n\n```html\n\n\n```\n\n---\n\n## 5. 공개 API 정리\n\n`lite_react/src/index.js`에서 노출하는 기본 API는 다음과 같습니다.\n\n```js\nexport { BaseComponent, getStateComponent, connectDB } from \"./core/core.js\";\nexport { createHashRouter } from \"./core/router.js\";\n```\n\n- `BaseComponent`: 상태 관리와 템플릿 로딩을 담당하는 기본 컴포넌트\n- `getStateComponent(idOrRoot)`: 등록된 컴포넌트 레코드를 조회\n- `connectDB(root, targetId)`: 다른 컴포넌트의 상태 저장소에 현재 루트를 연결\n- `createHashRouter(options)`: `#/path` 기반의 간단한 해시 라우터 생성\n\n이 네 가지를 기준으로, CDN 환경에서도 충분히 앱을 구성할 수 있습니다.\n\n# LiteState\n","readmeFilename":"README.md","_rev":"1-b856e411b2db12b14306971cea4e1153"}