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.

Sign up for GitHub

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

Jump to bottom

Add support for web components #1419

Merged
merged 10 commits into from
Jul 11, 2024
Merged

Add support for web components #1419

merged 10 commits into from
Jul 11, 2024

Conversation

marschall
Copy link
Contributor

@marschall marschall commented Jul 6, 2024 •
edited
Loading

This PR includes two changes:

  1. Add support for and
  2. Add support for rendering applications without , and elements. The use case for this is if you want to implement a web component that ends up calling a Seaside application.

    3. Documentation: https://github.com/SeasideSt/Seaside/wiki/WebComponents

    Fixes #1029

@marschall marschall requested a review from jbrichau July 6, 2024 13:08
@codecov Codecov
Copy link

codecov bot commented Jul 6, 2024 •
edited
Loading

Codecov Report

Attention: Patch coverage is 23.93617% with 143 lines in your changes missing coverage. Please review.

Project coverage is 49.10%. Comparing base (1378e9e) to head (07d69e9).

Files Patch % Lines
...tsLibrary.class/instance/seasideWebComponentsJs.st 0.00% 67 Missing ⚠️
...ckage.extension/class/seasideTestsWebComponents.st 0.00% 11 Missing ⚠️
...ackage.extension/class/seasideWebComponentsCore.st 0.00% 11 Missing ⚠️
...ge/WATemplateTag.class/instance/shadowRootMode..st 0.00% 10 Missing ⚠️
...-Canvas.package/WATagBrush.class/instance/slot..st 0.00% 5 Missing ⚠️
...Canvas.package/WAHtmlCanvas.class/instance/slot.st 0.00% 4 Missing ⚠️
...as.package/WAHtmlCanvas.class/instance/template.st 0.00% 4 Missing ⚠️
...e-Canvas.package/WASlotTag.class/instance/name..st 0.00% 4 Missing ⚠️
...ATemplateTag.class/instance/shadowRootClonable..st 0.00% 4 Missing ⚠️
...ateTag.class/instance/shadowRootDelegatesFocus..st 0.00% 4 Missing ⚠️
... and 6 more
Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #1419      +/-   ##
==========================================
- Coverage   49.13%   49.10%   -0.04%     
==========================================
  Files        9118     9143      +25     
  Lines       80357    80545     +188     
==========================================
+ Hits        39485    39553      +68     
- Misses      40872    40992     +120

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@jbrichau
Copy link
Member

jbrichau commented Jul 7, 2024

Interesting. I have not dabbled with Web Components yet... could you include an example on how this would be used?

@marschall
Copy link
Contributor Author

marschall commented Jul 7, 2024 •
edited
Loading

Interesting. I have not dabbled with Web Components yet... could you include an example on how this would be used?

Embedding Seaside components in a non-Seaside page without resorting to frames.

<!DOCTYPE html>
<html>
  <head>
    <!-- -->
    <script src="seaside-components.js" defer></script>
  </head>
  <body>
    <!-- -->
    <wa-component url="/examples/counter">Loading...</wa-component>
    <!-- -->
  </body>
</html>

The components could be ajaxified so they could make use of full page refreshes without reloading the whole page.

I'll work on a demo.

@jbrichau
Copy link
Member

jbrichau commented Jul 7, 2024

Oh ok, I think I get it. The 'seaside-component.js' implementation uses the server-side to render the html contents?

ps: see you tomorrow ;-)

@marschall
Copy link
Contributor Author

The 'seaside-component.js' implementation uses the server-side to render the html contents?

Yeah, exactly. I added some demo code in an additional commit. Still not sture what the ideal way to include custom scripts and styles is.

@marschall marschall marked this pull request as draft July 7, 2024 15:11
@marschall marschall marked this pull request as ready for review July 10, 2024 11:49
@marschall marschall merged commit 44e5bb7 into SeasideSt:master Jul 11, 2024
9 of 13 checks passed
@adriaon
Copy link

adriaon commented Jul 11, 2024

💜

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jbrichau jbrichau jbrichau left review comments

Assignees
No one assigned
Labels
HTML5 Type-Feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add support for <template> and <slot>
3 participants
@marschall @jbrichau @adriaon