make all component SSR compatible #9187

pngwn · 2024-08-23T18:33:45Z

description

closes #9111 closes #9112

Makes all component SSR compatible.

Removes any bare references to browser only APIs, or hide them behind on Mount hooks or actions we know can only occur when we are in the browser and fully loaded
Stop using location.origin and instead use the root url value that we have access to.
Added some sensible defaults to avoid things jumping around too much when hydrated in the browser
Use empty value for certain components until we are in the browser, things like native plots or model 3d don't make much sense in a server context. We can improve this later if needed.
Added an SSR-able test app with some example values.
Switch to an isomophic (server + browser compatible) version of dompurify.

to test

pnpm i
cd js/component-test
pnpm dev

While running the app. I would recommend doping the following to see how things behave:

Visit every link at the top and hard refresh the browser (with dev tools closed to you get cached fonts). This is Server Side Rendering + Client Side Rendering (hydration).
Try with JS disabled:
- Go into chrome dev tools
- Click the cog in the top right
- scroll down to "Debugger"
- Click "Disable JavaScript"
- Keep dev tools open and revisit all links + refresh, this is SSR only.

gradio-pr-bot · 2024-08-23T18:34:18Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/c440b0d45a2a0501dc54f02e64330e966964c848/gradio-4.42.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@c440b0d45a2a0501dc54f02e64330e966964c848#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/c440b0d45a2a0501dc54f02e64330e966964c848/gradio-client-1.5.1.tgz

gradio-pr-bot · 2024-08-23T18:34:29Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/annotatedimage`	`patch`
`@gradio/audio`	`patch`
`@gradio/chatbot`	`patch`
`@gradio/code`	`patch`
`@gradio/dataframe`	`patch`
`@gradio/dataset`	`patch`
`@gradio/dropdown`	`patch`
`@gradio/file`	`patch`
`@gradio/imageeditor`	`patch`
`@gradio/markdown`	`patch`
`@gradio/model3d`	`patch`
`@gradio/nativeplot`	`patch`
`@gradio/paramviewer`	`patch`
`@gradio/utils`	`patch`
`@gradio/wasm`	`patch`
`@self/component-test`	`patch`
`gradio`	`patch`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

make all component SSR compatible

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

js/imageeditor/shared/ImageEditor.svelte

pngwn · 2024-08-27T20:09:47Z

js/imageeditor/shared/ImageEditor.svelte

@@ -84,13 +84,13 @@

 	let editor_box: EditorContext["editor_box"] = writable({
 		parent_width: 0,
-		parent_height: 0,
+		parent_height: 400,


use provided height value if it is passed

pngwn · 2024-08-27T20:14:23Z

js/markdown/package.json

@@ -31,6 +31,7 @@
 		"@types/prismjs": "1.26.4",
 		"dompurify": "^3.0.3",


pngwn · 2024-08-27T20:17:59Z

js/markdown/shared/MarkdownCode.svelte

+		DOMPurify.addHook("afterSanitizeAttributes", function (node) {
+			if ("target" in node) {
+				if (is_external_url(node.getAttribute("href"))) {
+					node.setAttribute("target", "_blank");
+					node.setAttribute("rel", "noopener noreferrer");
+				}
+			}
+		});
+		const is_browser = typeof window !== "undefined";


Does this need to be moved?

Do we need the browser var?

pngwn · 2024-08-27T20:20:35Z

js/wasm/svelte/DownloadLink.svelte

@@ -64,9 +64,14 @@
 				is_downloading = false;
 			});
 	}
+
+	let should_proxy = false;
+	onMount(() => {


hannahblair · 2024-08-28T11:39:02Z

Thanks for going through the changes! Have done a test and can't see any issues. Once those comments are sorted lgtm :)

dawoodkhan82 · 2024-08-28T18:16:12Z

@pngwn was reviewing the components yesterday and it looked good to me. But now I'm getting "SSR Module" errors when running the demo. Could just be me tho.

abidlabs · 2024-08-28T19:45:36Z

@pngwn was reviewing the components yesterday and it looked good to me. But now I'm getting "SSR Module" errors when running the demo. Could just be me tho.

Locally or on the Deployed PR Space @dawoodkhan82?

dawoodkhan82 · 2024-08-29T16:45:30Z

@abidlabs locally

abidlabs · 2024-08-29T19:10:32Z

I can't repro that @dawoodkhan82. I checked out this branch, rebuilt the frontend, and ran some demos (like kitchen_sink) and they worked fine for me. I do have Node v18 installed in case that makes any difference

dawoodkhan82 · 2024-08-29T20:27:45Z

@abidlabs did you try with disabled JS from the dev tools?

The components-test demo looks good to me, but once I disable JS (SSR only) then I get 500 internal server errors when clicking through the components.

abidlabs · 2024-08-29T20:37:18Z

Ah yeah sorry missed those testing instructions. I'm seeing 500 errors as well. The web app looks like this:

Partial stack trace:

1:36:25 PM [vite] Error when evaluating SSR module /@fs/Users/abidlabs/dev/gradio-repos/gradio/js/atoms/src/ShareButton.svelte: failed to import "@gradio/utils"
|- Error: Failed to resolve entry for package "@gradio/utils". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48264:17)
    at resolvePackageEntry (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48261:5)
    at tryNodeResolve (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48039:20)
    at nodeImport (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55087:26)
    at ssrImport (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:30)
    at eval (/Users/abidlabs/dev/gradio-repos/gradio/js/atoms/src/ShareButton.svelte:7:37)
    at async instantiateModule (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

1:36:25 PM [vite] Error when evaluating SSR module /@fs/Users/abidlabs/dev/gradio-repos/gradio/js/atoms/src/index.ts: failed to import "/@fs/Users/abidlabs/dev/gradio-repos/gradio/js/atoms/src/ShareButton.svelte"
|- Error: Failed to resolve entry for package "@gradio/utils". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48264:17)
    at resolvePackageEntry (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48261:5)
    at tryNodeResolve (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48039:20)
    at nodeImport (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55087:26)
    at ssrImport (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:30)
    at eval (/Users/abidlabs/dev/gradio-repos/gradio/js/atoms/src/ShareButton.svelte:7:37)
    at async instantiateModule (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

1:36:25 PM [vite] Error when evaluating SSR module /@fs/Users/abidlabs/dev/gradio-repos/gradio/js/multimodaltextbox/shared/MultimodalTextbox.svelte: failed to import "/@fs/Users/abidlabs/dev/gradio-repos/gradio/js/atoms/src/index.ts"
|- Error: Failed to resolve entry for package "@gradio/utils". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48264:17)
    at resolvePackageEntry (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48261:5)
    at tryNodeResolve (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:48039:20)
    at nodeImport (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55087:26)
    at ssrImport (file:///Users/abidlabs/dev/gradio-repos/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:30)

pngwn · 2024-08-29T21:04:32Z

I'll take a look at this. Seems to just be the utils package that is causing issues.

pngwn · 2024-08-30T15:48:32Z

@abidlabs @dawoodkhan82 I left something out of my instructions which doesn't affect other packages but apparently does affect the utils package for some reason.

You need to run pnpm packages from the root first. That should fix the issue you were seeing.

abidlabs · 2024-08-30T16:50:37Z

Ok working for me now, but noticing a few small things. Let me comment as I find them:

(1) i18n strings are not rendering correctly, e.g.

(2) Audio player is not coloring the rendered audio appropriately. You can see here that its hiding the played audio instead of coloring it orange:

Screen.Recording.2024-08-30.at.9.50.23.AM.mov

abidlabs · 2024-08-30T16:54:33Z

(3) Nothing is shown for gr.Dataset -- I assume that's just because the value is set to null, but flagging just in case:

(4) Uploading audio isn't working. I noticed the same for the Interactive Gallery. I think all Upload is broken.

Screen.Recording.2024-08-30.at.9.53.51.AM.mov

abidlabs · 2024-08-30T16:57:23Z

(5) Issue #4 is preventing me from being able to fully test gr.ImageEditor, but it looks like the bottom of the component is cut off:

and also when I click on the draw tool, its very laggy and colors the canvas at the wrong spot when clicked

abidlabs · 2024-08-30T16:59:12Z

(6) Clicking on the Native Plots tabs causes the whole app to crash, with this appearing in the console:

Those are the issues I noticed, happy to give this another review afterwards as needed!

pngwn · 2024-08-30T17:21:07Z

Okay, almost all of those are expected. The main purpose of this test app is to test the initial rendering (i.e. will the component initialise on the server) not the full functionality. This test app lacks the business logic of the gradio app to do that properly.

there is no i18n just an identity fn, so it is returning whatever is passed in, this is expected.
I have broken audio in several ways, working on a fix.
This is correct, the way we load examples is weird and the test app cannot do it.
Uploading doesn't work in the test app as there is no server, only a frontend, so we have nowhere to upload files to.
I broke the image height, also fixing.
This shouldn't happen, native plots should render anything in SSR.

So 1, 3, 4 are expected. I'll take care of the others.

For 1, 3, 4 specifically, as long as they work in gradio proper, then they are working as expected.

pngwn · 2024-08-30T18:33:12Z

Fixed everything but can't reproduce #4.

Screen.Recording.2024-08-31.at.02.31.18.mov

abidlabs · 2024-08-30T19:04:08Z

Fixed everything but can't reproduce #4.

Can't repro it anymore either!

abidlabs · 2024-08-30T19:07:41Z

Ok went through and tested everything with and without JS, everything works great @pngwn with one exception: native plots don't work if you start with a different component and then switch to the native plots tab. If you hard refresh, then they work. Recording:

Screen.Recording.2024-08-30.at.12.06.44.PM.mov

pngwn · 2024-08-30T19:51:53Z

Oh interesting.

pngwn · 2024-08-31T06:08:41Z

Okay fixed!

Gonna merge this in so I can continue but feel free to make any additional comments and i'll fix in a follow up!

pngwn added 5 commits August 22, 2024 19:52

asd

eb5942e

fixes

44d5fdf

make all components ssr compatible

94775d4

Merge branch 'main' into ssr-components

9110cfc

remove files

027e851

add changeset

b3cfe7f

pngwn requested review from dawoodkhan82 and hannahblair August 23, 2024 18:34

pngwn added the v: patch A change that requires a patch release label Aug 23, 2024

add changeset

4798b8c

pngwn commented Aug 26, 2024

View reviewed changes

js/imageeditor/shared/ImageEditor.svelte Outdated Show resolved Hide resolved

pngwn added 2 commits August 27, 2024 15:16

review

2b74791

format

9e562bd

pngwn commented Aug 27, 2024

View reviewed changes

pngwn and others added 4 commits August 30, 2024 23:24

clean

5b6e8d9

address comments

eb9b6d9

tweaks utils

05a27d1

add changeset

10f9723

Merge branch 'main' into ssr-components

32a31a1

fix plot and audio

63f48f8

format

576e1ab

fix nativeplot

b7c47bf

Merge branch 'main' into ssr-components

c440b0d

pngwn enabled auto-merge (squash) August 31, 2024 06:08

pngwn merged commit 5bf00b7 into main Aug 31, 2024
21 of 22 checks passed

pngwn deleted the ssr-components branch August 31, 2024 06:19

This was referenced Aug 31, 2024

chore: update versions #9168

Merged

chore: update versions (beta) #9262

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

make all component SSR compatible #9187

make all component SSR compatible #9187

pngwn commented Aug 23, 2024 •

edited

Loading

gradio-pr-bot commented Aug 23, 2024 •

edited

Loading

gradio-pr-bot commented Aug 23, 2024 •

edited

Loading

Something isn't right?

pngwn Aug 27, 2024

pngwn Aug 27, 2024

pngwn Aug 27, 2024

pngwn Aug 27, 2024

hannahblair commented Aug 28, 2024

dawoodkhan82 commented Aug 28, 2024

abidlabs commented Aug 28, 2024

dawoodkhan82 commented Aug 29, 2024

abidlabs commented Aug 29, 2024

dawoodkhan82 commented Aug 29, 2024 •

edited

Loading

abidlabs commented Aug 29, 2024 •

edited

Loading

pngwn commented Aug 29, 2024

pngwn commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

pngwn commented Aug 30, 2024

pngwn commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

pngwn commented Aug 30, 2024

pngwn commented Aug 31, 2024

		@@ -31,6 +31,7 @@
		"@types/prismjs": "1.26.4",
		"dompurify": "^3.0.3",

make all component SSR compatible #9187

make all component SSR compatible #9187

Conversation

pngwn commented Aug 23, 2024 • edited Loading

gradio-pr-bot commented Aug 23, 2024 • edited Loading

🪼 branch checks and previews

gradio-pr-bot commented Aug 23, 2024 • edited Loading

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

pngwn Aug 27, 2024

Choose a reason for hiding this comment

pngwn Aug 27, 2024

Choose a reason for hiding this comment

pngwn Aug 27, 2024

Choose a reason for hiding this comment

pngwn Aug 27, 2024

Choose a reason for hiding this comment

hannahblair commented Aug 28, 2024

dawoodkhan82 commented Aug 28, 2024

abidlabs commented Aug 28, 2024

dawoodkhan82 commented Aug 29, 2024

abidlabs commented Aug 29, 2024

dawoodkhan82 commented Aug 29, 2024 • edited Loading

abidlabs commented Aug 29, 2024 • edited Loading

pngwn commented Aug 29, 2024

pngwn commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

pngwn commented Aug 30, 2024

pngwn commented Aug 30, 2024

abidlabs commented Aug 30, 2024

abidlabs commented Aug 30, 2024

pngwn commented Aug 30, 2024

pngwn commented Aug 31, 2024

pngwn commented Aug 23, 2024 •

edited

Loading

gradio-pr-bot commented Aug 23, 2024 •

edited

Loading

gradio-pr-bot commented Aug 23, 2024 •

edited

Loading

dawoodkhan82 commented Aug 29, 2024 •

edited

Loading

abidlabs commented Aug 29, 2024 •

edited

Loading