@ahnseungchan/webviewkit 1.3.0 → 2.0.0

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.
Files changed (54) hide show
  1. package/README.md +68 -61
  2. package/dist/index.d.mts +451 -0
  3. package/dist/index.d.ts +451 -11
  4. package/dist/index.js +1631 -45
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +1546 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +26 -6
  9. package/dist/bridge/WebViewBridgeProvider.d.ts +0 -18
  10. package/dist/bridge/WebViewBridgeProvider.d.ts.map +0 -1
  11. package/dist/bridge/WebViewBridgeProvider.js +0 -26
  12. package/dist/bridge/client.d.ts +0 -20
  13. package/dist/bridge/client.d.ts.map +0 -1
  14. package/dist/bridge/client.js +0 -48
  15. package/dist/bridge/detect-host.d.ts +0 -4
  16. package/dist/bridge/detect-host.d.ts.map +0 -1
  17. package/dist/bridge/detect-host.js +0 -19
  18. package/dist/bridge/host.d.ts +0 -31
  19. package/dist/bridge/host.d.ts.map +0 -1
  20. package/dist/bridge/host.js +0 -77
  21. package/dist/bridge/index.d.ts +0 -10
  22. package/dist/bridge/index.d.ts.map +0 -1
  23. package/dist/bridge/index.js +0 -33
  24. package/dist/bridge/protocol.d.ts +0 -51
  25. package/dist/bridge/protocol.d.ts.map +0 -1
  26. package/dist/bridge/protocol.js +0 -65
  27. package/dist/bridge/stack-router-bridge.d.ts +0 -17
  28. package/dist/bridge/stack-router-bridge.d.ts.map +0 -1
  29. package/dist/bridge/stack-router-bridge.js +0 -38
  30. package/dist/bridge/transport.d.ts +0 -11
  31. package/dist/bridge/transport.d.ts.map +0 -1
  32. package/dist/bridge/transport.js +0 -65
  33. package/dist/constants.d.ts +0 -3
  34. package/dist/constants.d.ts.map +0 -1
  35. package/dist/constants.js +0 -5
  36. package/dist/history.d.ts +0 -11
  37. package/dist/history.d.ts.map +0 -1
  38. package/dist/history.js +0 -91
  39. package/dist/index.d.ts.map +0 -1
  40. package/dist/stack-dev/stack-dev-roadmap.d.ts +0 -15
  41. package/dist/stack-dev/stack-dev-roadmap.d.ts.map +0 -1
  42. package/dist/stack-dev/stack-dev-roadmap.js +0 -66
  43. package/dist/stack-router/_components/back-router.d.ts +0 -3
  44. package/dist/stack-router/_components/back-router.d.ts.map +0 -1
  45. package/dist/stack-router/_components/back-router.js +0 -39
  46. package/dist/stack-router/_components/header.d.ts +0 -3
  47. package/dist/stack-router/_components/header.d.ts.map +0 -1
  48. package/dist/stack-router/_components/header.js +0 -42
  49. package/dist/stack-router/stack-router-provider.d.ts +0 -27
  50. package/dist/stack-router/stack-router-provider.d.ts.map +0 -1
  51. package/dist/stack-router/stack-router-provider.js +0 -227
  52. package/dist/type.d.ts +0 -37
  53. package/dist/type.d.ts.map +0 -1
  54. package/dist/type.js +0 -14
@@ -1 +0,0 @@
1
- {"version":3,"file":"stack-router-provider.d.ts","sourceRoot":"","sources":["../../src/stack-router/stack-router-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAMvF,OAAO,EAEL,YAAY,EAGZ,wBAAwB,EAEzB,MAAM,SAAS,CAAC;AAEjB,UAAU,uBAAuB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IACzD,eAAe,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC;IAC5D,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;CAC5D;AAID,eAAO,MAAM,cAAc,+BAM1B,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,4DAK1B,wBAAwB,qDAiI1B,CAAC;AAEF,eAAe,mBAAmB,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
@@ -1,227 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.StackRouterProvider = exports.useStackRouter = void 0;
7
- const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
8
- const react_1 = require("react");
9
- const history_1 = require("../history");
10
- const styled_1 = __importDefault(require("@emotion/styled"));
11
- const react_2 = require("@emotion/react");
12
- const constants_1 = require("../constants");
13
- const stack_dev_roadmap_1 = require("../stack-dev/stack-dev-roadmap");
14
- const type_1 = require("../type");
15
- const StackRouterContext = (0, react_1.createContext)(null);
16
- const useStackRouter = () => {
17
- const context = (0, react_1.useContext)(StackRouterContext);
18
- if (!context) {
19
- throw new Error("useStackRouter must be used within a StackRouterProvider");
20
- }
21
- return context;
22
- };
23
- exports.useStackRouter = useStackRouter;
24
- const StackRouterProvider = ({ maxWidth = "600px", Activities = [], initialActivity, enableDevTools, }) => {
25
- const showDevTools = (0, react_1.useMemo)(() => {
26
- var _a;
27
- if (enableDevTools !== undefined)
28
- return enableDevTools;
29
- return typeof process !== "undefined" && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === "development";
30
- }, [enableDevTools]);
31
- const [currentPath, setCurrentPath] = (0, react_1.useState)(history_1.history.getCurrentState().path);
32
- const [currentState, setCurrentState] = (0, react_1.useState)(history_1.history.getCurrentState());
33
- const [isTransitioning, setIsTransitioning] = (0, react_1.useState)(false);
34
- const [direction, setDirection] = (0, react_1.useState)(type_1.Direction.FORWARD);
35
- const [visiblePages, setVisiblePages] = (0, react_1.useState)([]);
36
- // initialize visible pages
37
- (0, react_1.useEffect)(() => {
38
- setVisiblePages([
39
- {
40
- path: initialActivity.path,
41
- element: initialActivity.element,
42
- isEntering: true,
43
- },
44
- ]);
45
- }, [initialActivity]);
46
- // listen to history changes
47
- (0, react_1.useEffect)(() => {
48
- const removeListener = history_1.history.addListener((state) => {
49
- if (!isTransitioning || direction !== type_1.Direction.BACKWARD) {
50
- setCurrentPath(state === null || state === void 0 ? void 0 : state.path);
51
- setCurrentState(state);
52
- }
53
- setIsTransitioning(true);
54
- setDirection((state === null || state === void 0 ? void 0 : state.action) === type_1.HistoryAction.POP
55
- ? type_1.Direction.BACKWARD
56
- : type_1.Direction.FORWARD);
57
- });
58
- return () => {
59
- removeListener();
60
- };
61
- }, [isTransitioning, direction]);
62
- // handle back
63
- const handleBack = () => {
64
- setIsTransitioning(true);
65
- setDirection(type_1.Direction.BACKWARD);
66
- setTimeout(() => {
67
- setVisiblePages((prev) => prev.slice(0, -1));
68
- }, constants_1.STACK_TRANSITION_MS);
69
- history_1.history.back();
70
- };
71
- // update current path
72
- (0, react_1.useEffect)(() => {
73
- if (visiblePages.length > 0) {
74
- setCurrentPath(visiblePages[visiblePages.length - 1].path);
75
- }
76
- }, [visiblePages]);
77
- // handle push
78
- const handlePush = (path, data) => {
79
- setIsTransitioning(true);
80
- setDirection(type_1.Direction.FORWARD);
81
- const currentActivity = Activities.find((a) => a.path === path);
82
- if (currentActivity) {
83
- setVisiblePages((prev) => {
84
- const existingIndex = prev.findIndex((a) => a.path === path);
85
- if (existingIndex !== -1) {
86
- const newActivities = [...prev];
87
- const [removed] = newActivities.splice(existingIndex, 1);
88
- return [...newActivities, { ...removed, isExiting: true }];
89
- }
90
- return [
91
- ...prev,
92
- { path, element: currentActivity.element, isExiting: true },
93
- ];
94
- });
95
- setTimeout(() => {
96
- setCurrentPath(path);
97
- }, constants_1.STACK_TRANSITION_MS);
98
- }
99
- history_1.history.push(path, data);
100
- };
101
- const value = {
102
- currentPath,
103
- currentState,
104
- initialActivity,
105
- Activities,
106
- visiblePages,
107
- push: handlePush,
108
- replace: history_1.history.replace,
109
- back: handleBack,
110
- forward: history_1.history.forward,
111
- };
112
- return ((0, jsx_runtime_1.jsxs)(StackRouterContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(LayoutContainer, { children: (0, jsx_runtime_1.jsx)(Layout, { maxWidth: maxWidth, as: "div", "data-testid": "layout", children: (0, jsx_runtime_1.jsx)(PageContainer, { children: visiblePages.map((page, index) => ((0, jsx_runtime_1.jsx)(PageWrapper, { isTransitioning: isTransitioning, direction: direction, currentPage: index === visiblePages.length - 1, isEntering: page.isEntering, isExiting: page.isExiting, zIndex: index, children: page.element }, `${page.path}-${index}`))) }) }) }), (0, jsx_runtime_1.jsx)(stack_dev_roadmap_1.StackDevRoadmap, { visible: showDevTools, pages: visiblePages.map((p) => ({ path: p.path })), currentPath: currentPath })] }));
113
- };
114
- exports.StackRouterProvider = StackRouterProvider;
115
- exports.default = StackRouterProvider;
116
- /**styles */
117
- const LayoutContainer = styled_1.default.div `
118
- width: 100%;
119
- height: 100vh;
120
- display: flex;
121
- justify-content: center;
122
- background: white;
123
- `;
124
- const Layout = styled_1.default.div `
125
- width: 100%;
126
- max-width: ${({ maxWidth }) => maxWidth};
127
- height: 100%;
128
- position: relative;
129
- overflow: hidden;
130
- `;
131
- const PageContainer = styled_1.default.div `
132
- position: relative;
133
- width: 100%;
134
- height: 100%;
135
- overflow: hidden;
136
- background: white;
137
- `;
138
- const slideInRight = (0, react_2.keyframes) `
139
- from {
140
- transform: translateX(100%);
141
- opacity: 0.2;
142
- }
143
- to {
144
- transform: translateX(0);
145
- opacity: 1;
146
- }
147
- `;
148
- const slideOutLeft = (0, react_2.keyframes) `
149
- from {
150
- transform: translateX(0);
151
- opacity: 1;
152
- }
153
- to {
154
- transform: translateX(-30%);
155
- opacity: 0.2;
156
- }
157
- `;
158
- const slideInLeft = (0, react_2.keyframes) `
159
- from {
160
- transform: translateX(-30%);
161
- opacity: 0.2;
162
- }
163
- to {
164
- transform: translateX(0);
165
- opacity: 1;
166
- }
167
- `;
168
- const slideOutRight = (0, react_2.keyframes) `
169
- from {
170
- transform: translateX(0);
171
- opacity: 1;
172
- }
173
- to {
174
- transform: translateX(100%);
175
- opacity: 0.2;
176
- }
177
- `;
178
- const PageWrapper = styled_1.default.div `
179
- position: absolute;
180
- top: 0;
181
- left: 0;
182
- width: 100%;
183
- height: 100%;
184
- background: white;
185
- cursor: grab;
186
- user-select: none;
187
- -webkit-user-select: none;
188
- -webkit-touch-callout: none;
189
- -webkit-tap-highlight-color: transparent;
190
- z-index: ${({ zIndex }) => zIndex};
191
- will-change: transform, opacity;
192
- transform: translate3d(0, 0, 0);
193
- animation: ${({ isTransitioning, direction, currentPage, isEntering, isExiting, }) => {
194
- if (!isTransitioning)
195
- return "none";
196
- if (direction === "forward") {
197
- if (isExiting) {
198
- return (0, react_2.css) `
199
- ${slideInRight} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
200
- `;
201
- }
202
- if (isEntering) {
203
- return (0, react_2.css) `
204
- ${slideOutLeft} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
205
- `;
206
- }
207
- }
208
- else {
209
- if (isExiting) {
210
- return (0, react_2.css) `
211
- ${slideOutRight} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
212
- `;
213
- }
214
- if (isEntering) {
215
- return (0, react_2.css) `
216
- ${slideInLeft} ${constants_1.STACK_TRANSITION_MS}ms ease-in-out forwards
217
- `;
218
- }
219
- }
220
- return "none";
221
- }};
222
- animation-fill-mode: forwards;
223
-
224
- &:active {
225
- cursor: grabbing;
226
- }
227
- `;
package/dist/type.d.ts DELETED
@@ -1,37 +0,0 @@
1
- export interface StackRouterProviderProps {
2
- maxWidth?: string;
3
- isShowHeader?: boolean;
4
- Activities?: {
5
- path: string;
6
- element: React.ReactNode;
7
- }[];
8
- initialActivity: {
9
- path: string;
10
- element: React.ReactNode;
11
- };
12
- /** 개발 시 스택 로드맵 오버레이 (기본: NODE_ENV === "development") */
13
- enableDevTools?: boolean;
14
- }
15
- export interface VisiblePage {
16
- path: string;
17
- element: React.ReactNode;
18
- isEntering?: boolean;
19
- isExiting?: boolean;
20
- }
21
- export declare enum Direction {
22
- FORWARD = "forward",
23
- BACKWARD = "backward"
24
- }
25
- export type DirectionType = Direction.FORWARD | Direction.BACKWARD;
26
- export declare enum HistoryAction {
27
- PUSH = "PUSH",
28
- POP = "POP",
29
- REPLACE = "REPLACE"
30
- }
31
- export interface HistoryState {
32
- path: string;
33
- data?: any;
34
- action?: HistoryAction.PUSH | HistoryAction.POP | HistoryAction.REPLACE;
35
- }
36
- export type HistoryListener = (state: HistoryState) => void;
37
- //# sourceMappingURL=type.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../src/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IAC1D,eAAe,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC;IAC5D,wDAAwD;IACxD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC;AAEnE,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,GAAG,GAAG,aAAa,CAAC,OAAO,CAAC;CACzE;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC"}
package/dist/type.js DELETED
@@ -1,14 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.HistoryAction = exports.Direction = void 0;
4
- var Direction;
5
- (function (Direction) {
6
- Direction["FORWARD"] = "forward";
7
- Direction["BACKWARD"] = "backward";
8
- })(Direction || (exports.Direction = Direction = {}));
9
- var HistoryAction;
10
- (function (HistoryAction) {
11
- HistoryAction["PUSH"] = "PUSH";
12
- HistoryAction["POP"] = "POP";
13
- HistoryAction["REPLACE"] = "REPLACE";
14
- })(HistoryAction || (exports.HistoryAction = HistoryAction = {}));