Skip to content

Commit 63a6b00

Browse files
sashamilenkovicsashamilenkovic
committed
fix: adds use client for react pages
1 parent 6b0cfa0 commit 63a6b00

File tree

5 files changed

+159
-133
lines changed

5 files changed

+159
-133
lines changed

frameworks/next/JS/app/custom-overlays/page.tsx renamed to frameworks/next/JS/app/custom-overlays/page.jsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,31 @@ import {
66
loadCustomOverlaysViewer,
77
unloadCustomOverlaysViewer,
88
} from "../../examples/custom-overlays/implementation";
9+
import { loadNutrientViewer } from "../utils/loadNutrientViewer";
910

1011
function CustomOverlaysPage() {
11-
const containerRef = useRef<HTMLDivElement>(null);
12+
const containerRef = useRef(null);
1213

1314
useEffect(() => {
1415
const container = containerRef.current;
15-
const { NutrientViewer } = window;
1616

17-
if (container && NutrientViewer) {
18-
loadCustomOverlaysViewer(NutrientViewer, container);
17+
if (!container) return;
18+
19+
let nutrientViewer = null;
20+
21+
try {
22+
nutrientViewer = loadNutrientViewer();
23+
24+
nutrientViewer.unload(container);
25+
26+
loadCustomOverlaysViewer(nutrientViewer, container);
27+
} catch (error) {
28+
console.error("Failed to load Nutrient Viewer:", error);
1929
}
2030

2131
return () => {
22-
if (NutrientViewer && container) {
23-
unloadCustomOverlaysViewer(NutrientViewer, container);
32+
if (nutrientViewer && container) {
33+
unloadCustomOverlaysViewer(nutrientViewer, container);
2434
}
2535
};
2636
}, []);
@@ -47,9 +57,9 @@ function CustomOverlaysPage() {
4757
>
4858
← Back to Examples
4959
</Link>
50-
<h2 style={{ margin: 0, fontSize: "1.1rem" }}>Custom Overlays</h2>
60+
<h2 style={{ margin: 0, fontSize: "1.1rem" }}>Magazine Mode</h2>
5161
<span style={{ fontSize: "0.9rem", color: "#666" }}>
52-
Interactive overlays that appear on page clicks
62+
Double-page layout with custom toolbar and fullscreen support
5363
</span>
5464
</nav>
5565

@@ -58,4 +68,4 @@ function CustomOverlaysPage() {
5868
);
5969
}
6070

61-
export default CustomOverlaysPage;
71+
export default MagazineModePage;

‎frameworks/next/TS/app/basic-viewer/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import Link from "next/link";
24
import { useEffect, useRef } from "react";
35
import {

‎frameworks/next/TS/app/custom-overlays/page.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,31 @@ import {
66
loadCustomOverlaysViewer,
77
unloadCustomOverlaysViewer,
88
} from "../../examples/custom-overlays/implementation";
9+
import { loadNutrientViewer } from "../utils/loadNutrientViewer";
910

1011
function CustomOverlaysPage() {
1112
const containerRef = useRef<HTMLDivElement>(null);
1213

1314
useEffect(() => {
1415
const container = containerRef.current;
15-
const { NutrientViewer } = window;
1616

17-
if (container && NutrientViewer) {
18-
loadCustomOverlaysViewer(NutrientViewer, container);
17+
if (!container) return;
18+
19+
let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
20+
21+
try {
22+
nutrientViewer = loadNutrientViewer();
23+
24+
nutrientViewer.unload(container);
25+
26+
loadCustomOverlaysViewer(nutrientViewer, container);
27+
} catch (error) {
28+
console.error("Failed to load Nutrient Viewer:", error);
1929
}
2030

2131
return () => {
22-
if (NutrientViewer && container) {
23-
unloadCustomOverlaysViewer(NutrientViewer, container);
32+
if (nutrientViewer && container) {
33+
unloadCustomOverlaysViewer(nutrientViewer, container);
2434
}
2535
};
2636
}, []);
@@ -47,9 +57,9 @@ function CustomOverlaysPage() {
4757
>
4858
← Back to Examples
4959
</Link>
50-
<h2 style={{ margin: 0, fontSize: "1.1rem" }}>Custom Overlays</h2>
60+
<h2 style={{ margin: 0, fontSize: "1.1rem" }}>Magazine Mode</h2>
5161
<span style={{ fontSize: "0.9rem", color: "#666" }}>
52-
Interactive overlays that appear on page clicks
62+
Double-page layout with custom toolbar and fullscreen support
5363
</span>
5464
</nav>
5565

‎frameworks/sveltekit/ts/.svelte-kit/ambient.d.ts‎

Lines changed: 120 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -26,74 +26,76 @@
2626
* ```
2727
*/
2828
declare module '$env/static/private' {
29-
export const NVM_INC: string;
30-
export const TERM_PROGRAM: string;
31-
export const NODE: string;
32-
export const INIT_CWD: string;
33-
export const NVM_CD_FLAGS: string;
34-
export const TERM: string;
35-
export const SHELL: string;
36-
export const HOMEBREW_REPOSITORY: string;
37-
export const TMPDIR: string;
38-
export const npm_config_global_prefix: string;
39-
export const TERM_PROGRAM_VERSION: string;
40-
export const COLOR: string;
41-
export const TERM_SESSION_ID: string;
42-
export const npm_config_noproxy: string;
43-
export const npm_config_local_prefix: string;
44-
export const PNPM_HOME: string;
45-
export const ZSH: string;
46-
export const NVM_DIR: string;
47-
export const USER: string;
48-
export const LS_COLORS: string;
29+
export const COLORFGBG: string;
30+
export const COLORTERM: string;
4931
export const COMMAND_MODE: string;
50-
export const npm_config_globalconfig: string;
51-
export const SSH_AUTH_SOCK: string;
52-
export const __CF_USER_TEXT_ENCODING: string;
53-
export const npm_execpath: string;
54-
export const TERM_FEATURES: string;
55-
export const PAGER: string;
56-
export const LSCOLORS: string;
57-
export const TERMINFO_DIRS: string;
58-
export const PATH: string;
59-
export const npm_package_json: string;
60-
export const _: string;
61-
export const npm_config_userconfig: string;
62-
export const npm_config_init_module: string;
63-
export const __CFBundleIdentifier: string;
64-
export const npm_command: string;
65-
export const PWD: string;
66-
export const npm_lifecycle_event: string;
67-
export const EDITOR: string;
68-
export const npm_package_name: string;
69-
export const LANG: string;
70-
export const ITERM_PROFILE: string;
71-
export const npm_config_npm_version: string;
72-
export const XPC_FLAGS: string;
73-
export const npm_config_node_gyp: string;
74-
export const npm_package_version: string;
75-
export const XPC_SERVICE_NAME: string;
32+
export const ELECTRON_NO_ATTACH_CONSOLE: string;
7633
export const GPG_TTY: string;
77-
export const SHLVL: string;
7834
export const HOME: string;
79-
export const COLORFGBG: string;
80-
export const LC_TERMINAL_VERSION: string;
35+
export const HOMEBREW_CELLAR: string;
8136
export const HOMEBREW_PREFIX: string;
37+
export const HOMEBREW_REPOSITORY: string;
38+
export const INFOPATH: string;
39+
export const ITERM_PROFILE: string;
8240
export const ITERM_SESSION_ID: string;
83-
export const npm_config_cache: string;
41+
export const LANG: string;
42+
export const LC_TERMINAL: string;
43+
export const LC_TERMINAL_VERSION: string;
8444
export const LESS: string;
8545
export const LOGNAME: string;
86-
export const npm_lifecycle_script: string;
46+
export const LSCOLORS: string;
47+
export const LS_COLORS: string;
48+
export const MallocNanoZone: string;
8749
export const NVM_BIN: string;
88-
export const npm_config_user_agent: string;
89-
export const INFOPATH: string;
90-
export const HOMEBREW_CELLAR: string;
91-
export const LC_TERMINAL: string;
50+
export const NVM_CD_FLAGS: string;
51+
export const NVM_DIR: string;
52+
export const NVM_INC: string;
53+
export const ORIGINAL_XDG_CURRENT_DESKTOP: string;
9254
export const OSLogRateLimit: string;
93-
export const npm_node_execpath: string;
94-
export const npm_config_prefix: string;
95-
export const COLORTERM: string;
55+
export const PAGER: string;
56+
export const PATH: string;
57+
export const PNPM_HOME: string;
58+
export const PWD: string;
59+
export const SHELL: string;
60+
export const SHLVL: string;
61+
export const SSH_AUTH_SOCK: string;
62+
export const TERM: string;
63+
export const TERMINFO_DIRS: string;
64+
export const TERM_FEATURES: string;
65+
export const TERM_PROGRAM: string;
66+
export const TERM_PROGRAM_VERSION: string;
67+
export const TERM_SESSION_ID: string;
68+
export const TMPDIR: string;
69+
export const USER: string;
70+
export const VSCODE_CLI: string;
71+
export const VSCODE_CODE_CACHE_PATH: string;
72+
export const VSCODE_CRASH_REPORTER_PROCESS_TYPE: string;
73+
export const VSCODE_CWD: string;
74+
export const VSCODE_ESM_ENTRYPOINT: string;
75+
export const VSCODE_HANDLES_UNCAUGHT_ERRORS: string;
76+
export const VSCODE_IPC_HOOK: string;
77+
export const VSCODE_NLS_CONFIG: string;
78+
export const VSCODE_PID: string;
79+
export const XPC_FLAGS: string;
80+
export const XPC_SERVICE_NAME: string;
81+
export const ZSH: string;
82+
export const __CFBundleIdentifier: string;
83+
export const __CF_USER_TEXT_ENCODING: string;
84+
export const ELECTRON_RUN_AS_NODE: string;
85+
export const VSCODE_L10N_BUNDLE_LOCATION: string;
86+
export const APPLICATION_INSIGHTS_NO_STATSBEAT: string;
87+
export const APPLICATION_INSIGHTS_NO_DIAGNOSTIC_CHANNEL: string;
88+
export const APPLICATIONINSIGHTS_CONFIGURATION_CONTENT: string;
89+
export const VITEST_VSCODE_LOG: string;
90+
export const VITEST_VSCODE: string;
91+
export const TEST: string;
92+
export const VITEST_WS_ADDRESS: string;
93+
export const VITEST: string;
9694
export const NODE_ENV: string;
95+
export const PROD: string;
96+
export const DEV: string;
97+
export const BASE_URL: string;
98+
export const MODE: string;
9799
}
98100

99101
/**
@@ -123,74 +125,76 @@ declare module '$env/static/public' {
123125
*/
124126
declare module '$env/dynamic/private' {
125127
export const env: {
126-
NVM_INC: string;
127-
TERM_PROGRAM: string;
128-
NODE: string;
129-
INIT_CWD: string;
130-
NVM_CD_FLAGS: string;
131-
TERM: string;
132-
SHELL: string;
133-
HOMEBREW_REPOSITORY: string;
134-
TMPDIR: string;
135-
npm_config_global_prefix: string;
136-
TERM_PROGRAM_VERSION: string;
137-
COLOR: string;
138-
TERM_SESSION_ID: string;
139-
npm_config_noproxy: string;
140-
npm_config_local_prefix: string;
141-
PNPM_HOME: string;
142-
ZSH: string;
143-
NVM_DIR: string;
144-
USER: string;
145-
LS_COLORS: string;
128+
COLORFGBG: string;
129+
COLORTERM: string;
146130
COMMAND_MODE: string;
147-
npm_config_globalconfig: string;
148-
SSH_AUTH_SOCK: string;
149-
__CF_USER_TEXT_ENCODING: string;
150-
npm_execpath: string;
151-
TERM_FEATURES: string;
152-
PAGER: string;
153-
LSCOLORS: string;
154-
TERMINFO_DIRS: string;
155-
PATH: string;
156-
npm_package_json: string;
157-
_: string;
158-
npm_config_userconfig: string;
159-
npm_config_init_module: string;
160-
__CFBundleIdentifier: string;
161-
npm_command: string;
162-
PWD: string;
163-
npm_lifecycle_event: string;
164-
EDITOR: string;
165-
npm_package_name: string;
166-
LANG: string;
167-
ITERM_PROFILE: string;
168-
npm_config_npm_version: string;
169-
XPC_FLAGS: string;
170-
npm_config_node_gyp: string;
171-
npm_package_version: string;
172-
XPC_SERVICE_NAME: string;
131+
ELECTRON_NO_ATTACH_CONSOLE: string;
173132
GPG_TTY: string;
174-
SHLVL: string;
175133
HOME: string;
176-
COLORFGBG: string;
177-
LC_TERMINAL_VERSION: string;
134+
HOMEBREW_CELLAR: string;
178135
HOMEBREW_PREFIX: string;
136+
HOMEBREW_REPOSITORY: string;
137+
INFOPATH: string;
138+
ITERM_PROFILE: string;
179139
ITERM_SESSION_ID: string;
180-
npm_config_cache: string;
140+
LANG: string;
141+
LC_TERMINAL: string;
142+
LC_TERMINAL_VERSION: string;
181143
LESS: string;
182144
LOGNAME: string;
183-
npm_lifecycle_script: string;
145+
LSCOLORS: string;
146+
LS_COLORS: string;
147+
MallocNanoZone: string;
184148
NVM_BIN: string;
185-
npm_config_user_agent: string;
186-
INFOPATH: string;
187-
HOMEBREW_CELLAR: string;
188-
LC_TERMINAL: string;
149+
NVM_CD_FLAGS: string;
150+
NVM_DIR: string;
151+
NVM_INC: string;
152+
ORIGINAL_XDG_CURRENT_DESKTOP: string;
189153
OSLogRateLimit: string;
190-
npm_node_execpath: string;
191-
npm_config_prefix: string;
192-
COLORTERM: string;
154+
PAGER: string;
155+
PATH: string;
156+
PNPM_HOME: string;
157+
PWD: string;
158+
SHELL: string;
159+
SHLVL: string;
160+
SSH_AUTH_SOCK: string;
161+
TERM: string;
162+
TERMINFO_DIRS: string;
163+
TERM_FEATURES: string;
164+
TERM_PROGRAM: string;
165+
TERM_PROGRAM_VERSION: string;
166+
TERM_SESSION_ID: string;
167+
TMPDIR: string;
168+
USER: string;
169+
VSCODE_CLI: string;
170+
VSCODE_CODE_CACHE_PATH: string;
171+
VSCODE_CRASH_REPORTER_PROCESS_TYPE: string;
172+
VSCODE_CWD: string;
173+
VSCODE_ESM_ENTRYPOINT: string;
174+
VSCODE_HANDLES_UNCAUGHT_ERRORS: string;
175+
VSCODE_IPC_HOOK: string;
176+
VSCODE_NLS_CONFIG: string;
177+
VSCODE_PID: string;
178+
XPC_FLAGS: string;
179+
XPC_SERVICE_NAME: string;
180+
ZSH: string;
181+
__CFBundleIdentifier: string;
182+
__CF_USER_TEXT_ENCODING: string;
183+
ELECTRON_RUN_AS_NODE: string;
184+
VSCODE_L10N_BUNDLE_LOCATION: string;
185+
APPLICATION_INSIGHTS_NO_STATSBEAT: string;
186+
APPLICATION_INSIGHTS_NO_DIAGNOSTIC_CHANNEL: string;
187+
APPLICATIONINSIGHTS_CONFIGURATION_CONTENT: string;
188+
VITEST_VSCODE_LOG: string;
189+
VITEST_VSCODE: string;
190+
TEST: string;
191+
VITEST_WS_ADDRESS: string;
192+
VITEST: string;
193193
NODE_ENV: string;
194+
PROD: string;
195+
DEV: string;
196+
BASE_URL: string;
197+
MODE: string;
194198
[key: `PUBLIC_${string}`]: undefined;
195199
[key: `${string}`]: string | undefined;
196200
}

‎frameworks/sveltekit/ts/.svelte-kit/generated/server/internal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const options = {
2424
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t<title>Nutrient Web SDK - SvelteKit TypeScript Examples</title>\n\t\t\n\t\t<!-- Nutrient Web SDK CDN -->\n\t\t<script src=\"https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js\"></script>\n\t\t\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">" + body + "</div>\n\t</body>\n</html>",
2525
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
2626
},
27-
version_hash: "1es1klv"
27+
version_hash: "uo0nbm"
2828
};
2929

3030
export async function get_hooks() {

0 commit comments

Comments
 (0)