@iyulab/router 0.7.2 → 0.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +6 -12
- package/dist/index.js +11 -21
- package/dist/react.d.ts +2 -87
- package/dist/react.js +1 -1
- package/dist/{share-CGlnQ4MD.js → share-CG-3Tbuy.js} +7 -4
- package/package.json +20 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { CSSResult } from 'lit';
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
3
|
import { PropertyValues } from 'lit';
|
|
4
|
-
import {
|
|
5
|
-
import { TemplateResult } from 'lit';
|
|
6
|
-
import { TemplateResult as TemplateResult_2 } from 'lit-html';
|
|
4
|
+
import { TemplateResult } from 'lit-html';
|
|
7
5
|
|
|
8
6
|
/**
|
|
9
7
|
* 공통 라우트 속성
|
|
@@ -48,7 +46,7 @@ declare interface BaseRouteConfig {
|
|
|
48
46
|
* }
|
|
49
47
|
* ```
|
|
50
48
|
*/
|
|
51
|
-
render?: (ctx: RouteContext) => Promise<
|
|
49
|
+
render?: (ctx: RouteContext) => Promise<unknown> | unknown;
|
|
52
50
|
/**
|
|
53
51
|
* 라우터 URL 변경시 렌더링을 강제할지 여부
|
|
54
52
|
* - 기본값으로 children을 가질때 false로 설정되며, children이 없을 경우 true로 설정됩니다.
|
|
@@ -85,8 +83,6 @@ export declare class ContentRenderError extends RouteError {
|
|
|
85
83
|
constructor(original?: Error | any);
|
|
86
84
|
}
|
|
87
85
|
|
|
88
|
-
export declare type FallbackRenderResult = HTMLElement | ReactElement | TemplateResult<1>;
|
|
89
|
-
|
|
90
86
|
export declare interface FallbackRouteConfig {
|
|
91
87
|
/**
|
|
92
88
|
* 브라우저의 타이틀이 설정에 따라 변경됩니다.
|
|
@@ -109,7 +105,7 @@ export declare interface FallbackRouteConfig {
|
|
|
109
105
|
* }
|
|
110
106
|
* ```
|
|
111
107
|
*/
|
|
112
|
-
render?: (ctx: FallbackRouteContext) => Promise<
|
|
108
|
+
render?: (ctx: FallbackRouteContext) => Promise<unknown> | unknown;
|
|
113
109
|
}
|
|
114
110
|
|
|
115
111
|
export declare interface FallbackRouteContext extends RouteContext {
|
|
@@ -161,11 +157,9 @@ declare interface RenderOption {
|
|
|
161
157
|
/** 강제 렌더링 여부 */
|
|
162
158
|
force?: boolean;
|
|
163
159
|
/** 렌더링할 값 */
|
|
164
|
-
value:
|
|
160
|
+
value: unknown;
|
|
165
161
|
}
|
|
166
162
|
|
|
167
|
-
export declare type RenderResult = HTMLElement | ReactElement | TemplateResult<1> | false;
|
|
168
|
-
|
|
169
163
|
/**
|
|
170
164
|
* 라우트 시작 이벤트
|
|
171
165
|
*/
|
|
@@ -415,7 +409,7 @@ export declare class ULink extends LitElement {
|
|
|
415
409
|
connectedCallback(): void;
|
|
416
410
|
disconnectedCallback(): void;
|
|
417
411
|
protected willUpdate(changedProperties: PropertyValues): void;
|
|
418
|
-
render():
|
|
412
|
+
render(): TemplateResult<1>;
|
|
419
413
|
/** a 태그에 주입할 href 값을 계산합니다. */
|
|
420
414
|
private compute;
|
|
421
415
|
/**
|
|
@@ -442,7 +436,7 @@ export declare class UOutlet extends HTMLElement {
|
|
|
442
436
|
/**
|
|
443
437
|
* 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
|
|
444
438
|
*/
|
|
445
|
-
render({ id, value, force }: RenderOption): void
|
|
439
|
+
render({ id, value, force }: RenderOption): Promise<void>;
|
|
446
440
|
/**
|
|
447
441
|
* 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
|
|
448
442
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as absolutePath, i as isExternalUrl, p as parseUrl } from "./share-
|
|
2
|
-
import { U, b } from "./share-
|
|
1
|
+
import { a as absolutePath, i as isExternalUrl, p as parseUrl } from "./share-CG-3Tbuy.js";
|
|
2
|
+
import { U, b } from "./share-CG-3Tbuy.js";
|
|
3
3
|
import { css, LitElement, html } from "lit";
|
|
4
4
|
import { property, customElement } from "lit/decorators.js";
|
|
5
5
|
class RouteError extends Error {
|
|
@@ -102,11 +102,11 @@ let UErrorPage = class extends LitElement {
|
|
|
102
102
|
const codeStr = String(code);
|
|
103
103
|
const numericCode = typeof code === "string" ? parseInt(code) : code;
|
|
104
104
|
switch (codeStr) {
|
|
105
|
-
case "
|
|
105
|
+
case "OUTLET_MISSING":
|
|
106
106
|
return "📦";
|
|
107
107
|
case "CONTENT_LOAD_FAILED":
|
|
108
108
|
return "📡";
|
|
109
|
-
case "
|
|
109
|
+
case "CONTENT_RENDER_FAILED":
|
|
110
110
|
return "🎨";
|
|
111
111
|
}
|
|
112
112
|
switch (numericCode) {
|
|
@@ -189,22 +189,12 @@ function getRandomID() {
|
|
|
189
189
|
return window.isSecureContext ? window.crypto.randomUUID() : window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
|
|
190
190
|
}
|
|
191
191
|
function findOutlet(element) {
|
|
192
|
-
if (!element) return void 0;
|
|
193
192
|
if (element.tagName === "U-OUTLET") return element;
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
outlet = findOutlet(child);
|
|
200
|
-
if (outlet) return outlet;
|
|
201
|
-
}
|
|
202
|
-
} else {
|
|
203
|
-
outlet = element.querySelector("u-outlet");
|
|
204
|
-
if (outlet) return outlet;
|
|
205
|
-
for (const child of Array.from(element.children)) {
|
|
206
|
-
outlet = findOutlet(child);
|
|
207
|
-
if (outlet) return outlet;
|
|
193
|
+
const roots = element.shadowRoot ? [element.shadowRoot, element] : [element];
|
|
194
|
+
for (const root of roots) {
|
|
195
|
+
for (const child of Array.from(root.children)) {
|
|
196
|
+
const result = findOutlet(child);
|
|
197
|
+
if (result) return result;
|
|
208
198
|
}
|
|
209
199
|
}
|
|
210
200
|
return void 0;
|
|
@@ -408,8 +398,8 @@ class Router {
|
|
|
408
398
|
window.dispatchEvent(new RouteDoneEvent(context));
|
|
409
399
|
} catch (error) {
|
|
410
400
|
const routeError = error instanceof RouteError ? error : new RouteError(
|
|
411
|
-
error
|
|
412
|
-
error
|
|
401
|
+
error?.status || error?.code || "UNKNOWN_ERROR",
|
|
402
|
+
error?.message || "An unexpected error occurred",
|
|
413
403
|
error
|
|
414
404
|
);
|
|
415
405
|
window.dispatchEvent(new RouteErrorEvent(context, routeError));
|
package/dist/react.d.ts
CHANGED
|
@@ -1,96 +1,11 @@
|
|
|
1
|
-
import { CSSResult } from 'lit';
|
|
2
|
-
import { LitElement } from 'lit';
|
|
3
|
-
import { PropertyValues } from 'lit';
|
|
4
|
-
import { ReactElement } from 'react';
|
|
5
|
-
import { ReactWebComponent } from '@lit/react';
|
|
6
|
-
import { TemplateResult } from 'lit-html';
|
|
7
|
-
import { TemplateResult as TemplateResult_2 } from 'lit';
|
|
8
|
-
|
|
9
|
-
/** 렌더링 옵션 */
|
|
10
|
-
declare interface RenderOption {
|
|
11
|
-
/** 교차 렌더링 방지 ID */
|
|
12
|
-
id?: string;
|
|
13
|
-
/** 강제 렌더링 여부 */
|
|
14
|
-
force?: boolean;
|
|
15
|
-
/** 렌더링할 값 */
|
|
16
|
-
value: RenderResult;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
declare type RenderResult = HTMLElement | ReactElement | TemplateResult_2<1> | false;
|
|
20
|
-
|
|
21
1
|
/**
|
|
22
2
|
* `u-link` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
|
|
23
3
|
*/
|
|
24
|
-
export declare const ULink:
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* - 클라이언트 라우팅을 지원하는 링크 엘리먼트입니다.
|
|
28
|
-
* - 내부 링크는 클라이언트 라우팅을 수행하고, 외부 링크는 브라우저 기본 네비게이션을 사용합니다.
|
|
29
|
-
* - Ctrl/Meta/Shift/Alt, 중클릭/우클릭 등은 브라우저 기본 동작(새 탭, 컨텍스트 메뉴 등)을 그대로 유지합니다.
|
|
30
|
-
*/
|
|
31
|
-
declare class ULink_2 extends LitElement {
|
|
32
|
-
/** 외부 링크 여부 */
|
|
33
|
-
private isExternal;
|
|
34
|
-
/**
|
|
35
|
-
* 링크 대상 target 속성
|
|
36
|
-
*
|
|
37
|
-
* - `_self`: 현재 창에서 링크 열기 (기본값)
|
|
38
|
-
* - `_blank`: 새 탭/창에서 링크 열기
|
|
39
|
-
* - `_parent`: 부모 프레임에서 링크 열기
|
|
40
|
-
* - `_top`: 최상위 프레임에서 링크 열기
|
|
41
|
-
*/
|
|
42
|
-
target?: string;
|
|
43
|
-
/**
|
|
44
|
-
* 링크 대상 URL, 다음 사항에 따라 SPA 라우팅 또는 브라우저 네비게이션이 결정됩니다.
|
|
45
|
-
*
|
|
46
|
-
* - 속성을 정의하지 않으면 설정에서 지정한 `basepath`로 SPA 라우팅합니다.
|
|
47
|
-
* - http(s)로 시작하면 외부 링크로 간주하고 브라우저 네비게이션을 사용합니다.
|
|
48
|
-
* - 절대경로(/...)의 경우 `basepath`로 시작하면 SPA 라우팅합니다, 이외 브라우저 네비게이션을 사용합니다.
|
|
49
|
-
* - 상대경로는 (basepath + 상대경로)로 결합하여 SPA 라우팅합니다.
|
|
50
|
-
* - ?로 시작하면 현재 경로에 쿼리스트링을 추가하여 SPA 라우팅합니다.
|
|
51
|
-
* - #으로 시작하면 브라우저 기본 동작을 사용합니다.
|
|
52
|
-
*/
|
|
53
|
-
href?: string;
|
|
54
|
-
connectedCallback(): void;
|
|
55
|
-
disconnectedCallback(): void;
|
|
56
|
-
protected willUpdate(changedProperties: PropertyValues): void;
|
|
57
|
-
render(): TemplateResult<1>;
|
|
58
|
-
/** a 태그에 주입할 href 값을 계산합니다. */
|
|
59
|
-
private compute;
|
|
60
|
-
/**
|
|
61
|
-
* 클릭 가로채기 핸들러
|
|
62
|
-
* - 좌클릭(0) + 보조키 없음(ctrl/meta/shift/alt 없음) + target이 _self일 때만 SPA 라우팅 고려
|
|
63
|
-
* - 그 외(중클릭/우클릭/보조키/target=_blank 등)는 브라우저 기본 동작 유지
|
|
64
|
-
*/
|
|
65
|
-
private handleClick;
|
|
66
|
-
/** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
|
|
67
|
-
private dispatchPopstate;
|
|
68
|
-
/** basepath를 state에서 꺼내는 헬퍼 */
|
|
69
|
-
private getBasepath;
|
|
70
|
-
static styles: CSSResult;
|
|
71
|
-
}
|
|
4
|
+
export declare const ULink: any;
|
|
72
5
|
|
|
73
6
|
/**
|
|
74
7
|
* `u-outlet` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
|
|
75
8
|
*/
|
|
76
|
-
export declare const UOutlet:
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* LitElement 또는 React 컴포넌트를 렌더링해주는 웹컴포넌트 입니다.
|
|
80
|
-
*/
|
|
81
|
-
declare class UOutlet_2 extends HTMLElement {
|
|
82
|
-
/** 교차 렌더링 방지 id */
|
|
83
|
-
private routeId?;
|
|
84
|
-
/** 실제 렌더링 컨텐츠 */
|
|
85
|
-
private root?;
|
|
86
|
-
/**
|
|
87
|
-
* 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
|
|
88
|
-
*/
|
|
89
|
-
render({ id, value, force }: RenderOption): void;
|
|
90
|
-
/**
|
|
91
|
-
* 기존 DOM을 삭제하여, 초기 상태로 되돌립니다.
|
|
92
|
-
*/
|
|
93
|
-
reset(): void;
|
|
94
|
-
}
|
|
9
|
+
export declare const UOutlet: any;
|
|
95
10
|
|
|
96
11
|
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { createComponent } from "@lit/react";
|
|
3
|
-
import { U as ULink$1, b as UOutlet$1 } from "./share-
|
|
3
|
+
import { U as ULink$1, b as UOutlet$1 } from "./share-CG-3Tbuy.js";
|
|
4
4
|
const ULink = createComponent({
|
|
5
5
|
react: React,
|
|
6
6
|
tagName: "u-link",
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { render, css, LitElement, html } from "lit";
|
|
2
|
-
import { createRoot } from "react-dom/client";
|
|
3
2
|
import { property, customElement } from "lit/decorators.js";
|
|
4
3
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
5
4
|
class UOutlet extends HTMLElement {
|
|
6
5
|
/**
|
|
7
6
|
* 주어진 렌더링 옵션에 따라 컨텐츠를 렌더링합니다.
|
|
8
7
|
*/
|
|
9
|
-
render({ id, value, force }) {
|
|
8
|
+
async render({ id, value, force }) {
|
|
10
9
|
if (this.routeId === id && force === false) return;
|
|
11
10
|
this.routeId = id;
|
|
12
11
|
this.reset();
|
|
12
|
+
if (value === null) {
|
|
13
|
+
throw new Error("Content is null and cannot be rendered.");
|
|
14
|
+
}
|
|
13
15
|
if (typeof value !== "object") {
|
|
14
16
|
throw new Error("Content is not a valid renderable object.");
|
|
15
17
|
}
|
|
@@ -19,6 +21,7 @@ class UOutlet extends HTMLElement {
|
|
|
19
21
|
} else if ("_$litType$" in value) {
|
|
20
22
|
this.root = render(value, this);
|
|
21
23
|
} else if ("$$typeof" in value) {
|
|
24
|
+
const { createRoot } = await import("react-dom/client");
|
|
22
25
|
this.root = createRoot(this);
|
|
23
26
|
this.root.render(value);
|
|
24
27
|
} else {
|
|
@@ -94,7 +97,7 @@ function catchBasepath(basepath) {
|
|
|
94
97
|
if (match) {
|
|
95
98
|
const rawPath = match.pathname.input;
|
|
96
99
|
const restPath = match.pathname.groups?.["0"];
|
|
97
|
-
return restPath ? rawPath.replace("/" + restPath, "") : rawPath.
|
|
100
|
+
return restPath !== void 0 && restPath !== "" ? rawPath.replace("/" + restPath, "") : rawPath.replace(/\/$/, "");
|
|
98
101
|
}
|
|
99
102
|
pattern = new URLPattern({ pathname: `${basepath}{/}?` });
|
|
100
103
|
match = pattern.exec({ pathname: window.location.pathname });
|
|
@@ -185,7 +188,7 @@ let ULink = class extends LitElement {
|
|
|
185
188
|
}
|
|
186
189
|
/** basepath를 state에서 꺼내는 헬퍼 */
|
|
187
190
|
getBasepath() {
|
|
188
|
-
return window.history.state?.basepath || "";
|
|
191
|
+
return window.history.state?.basepath || "/";
|
|
189
192
|
}
|
|
190
193
|
};
|
|
191
194
|
ULink.styles = css`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iyulab/router",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.4",
|
|
4
4
|
"description": "A modern client-side router for web applications with support for Lit and React components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -40,14 +40,27 @@
|
|
|
40
40
|
"build": "vite build"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"react
|
|
43
|
+
"lit": "^3.3.2"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"@lit/react": ">=1.0.0",
|
|
47
|
+
"react": ">=18.0.0",
|
|
48
|
+
"react-dom": ">=18.0.0"
|
|
49
|
+
},
|
|
50
|
+
"peerDependenciesMeta": {
|
|
51
|
+
"react": {
|
|
52
|
+
"optional": true
|
|
53
|
+
},
|
|
54
|
+
"react-dom": {
|
|
55
|
+
"optional": true
|
|
56
|
+
},
|
|
57
|
+
"@lit/react": {
|
|
58
|
+
"optional": true
|
|
59
|
+
}
|
|
47
60
|
},
|
|
48
61
|
"devDependencies": {
|
|
49
|
-
"@types/node": "^25.
|
|
50
|
-
"@types/react": "^19.2.
|
|
62
|
+
"@types/node": "^25.3.2",
|
|
63
|
+
"@types/react": "^19.2.14",
|
|
51
64
|
"@types/react-dom": "^19.2.3",
|
|
52
65
|
"typescript": "^5.9.3",
|
|
53
66
|
"vite": "^7.3.1",
|