Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use MWC for search input #1422

Open
wants to merge 6 commits into
base: import-page
Choose a base branch
from
Open

Conversation

justinfagnani
Copy link
Collaborator

@justinfagnani justinfagnani commented Jan 18, 2023

This does the minimum I can see to get MWC components working in Lit SSR:

  • Exclude them from server rendering with a custom renderer that wraps and conditionally disables LitElementRenderer
  • Add a FallbackRenderer that doesn't render a shadow root
  • Patch globalThis with dummy classes that MWC uses in decorator metadata

@github-actions
Copy link

A live preview of this PR will be available at the URL below and will update on each commit. =
The build takes ~5-10 minutes, and will 404 until finished.

https://pr1422---site-khswqo4xea-wl.a.run.app/

Warning
Until our Cloud Run project is public, only authorized users can view the above URL.
The easiest way to view it authenticated is to run the following proxy command and visit http://localhost:5453

(gcloud beta run services proxy --project=webcomponents-org-test --region=us-west2 --tag=pr1422 --port=5453 site \
& gcloud beta run services proxy --project=webcomponents-org-test --region=us-west2 --tag=pr1422 --port=6453 catalog)

@justinfagnani justinfagnani marked this pull request as draft January 18, 2023 16:37
@justinfagnani justinfagnani marked this pull request as ready for review January 18, 2023 18:08
// Excludes the given tag names from being handled by the given renderer.
// Returns a subclass of the renderer that returns `false` for matches()
// for any element in the list of tag names.
const excludeElements = (
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @kevinpschaaf @augustjk we might want this utility in lit-ssr

@@ -87,6 +87,7 @@
},
"dependencies": {
"@lit-labs/task": "^2.0.0",
"@material/web": "^1.0.0-pre.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need = here, because we could get a breaking change at any time while we're on pre, right?

tagName: string,
attributes: Map<string, string>
) {
console.log('matchesClass', tagName, !excludedTagNames.includes(tagName));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove log

// Excludes the given tag names from being handled by the given renderer.
// Returns a subclass of the renderer that returns `false` for matches()
// for any element in the list of tag names.
const excludeElements = (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we move this SSR utility stuff to another module?

const result = await response.text();

// If the page SSR's, we'll have declarative shadow roots in it.
assert.match(result, '<template shadowroot="open">');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we do more in the test? Like test some functionality?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants