Add support for web components

- add support for template element
- add support for slot element
- add support for slot attribute
- add examples for web components

repository/BaselineOfSeaside3.package/BaselineOfSeaside3.class/instance/baselinecommon..st

@@ -59,6 +59,10 @@ baselinecommon: spec
 				spec requires: #('Seaside-Core' 'Seaside-Component' 'Seaside-RenderLoop' 'Seaside-Session' ). ];
 			package: 'Seaside-Tools-Web' with: [
 				spec requires: #('Seaside-Tools-Core' 'Seaside-RenderLoop' 'Seaside-Widgets' ) ];
+			package: 'Seaside-WebComponents-Core' with: [
+				spec requires: #('Seaside-Core' 'Seaside-Canvas' 'Seaside-Component' 'Seaside-RenderLoop') ];
+			package: 'Seaside-WebComponents-Examples' with: [
+				spec requires: #('Seaside-WebComponents-Core' 'Seaside-Examples') ];
 			package: 'Seaside-Widgets' with: [
 				spec requires: #('Seaside-Component' 'Seaside-Canvas' ) ];
 			package: 'Seaside-HotwireTurbo-Core' with: [
@@ -93,6 +97,8 @@ baselinecommon: spec
 				spec requires: #('Seaside-Tools-Web' 'Seaside-Tests-Environment' ). ];
 			package: 'Seaside-Tests-UTF8' with: [
 				spec requires: #('Seaside-Tests-Core' ) ];
+			package: 'Seaside-Tests-WebComponents' with: [
+				spec requires: #('Seaside-WebComponents-Core' 'Seaside-Tests-Core' 'Seaside-Session' 'Seaside-Examples'). ];
 			package: 'Seaside-Tests-Parasol' with: [
 				spec requires: #('Parasol' 'Seaside-Tests-Functional' 'Seaside-Tools-Core') ].
 		spec
@@ -102,9 +108,9 @@ baselinecommon: spec
 			group: 'All' with: #('Tests' 'Development Tests');
 
 			group: 'Core' with: #('Seaside-Core' 'Seaside-Continuation' 'Seaside-Canvas' 'Seaside-Session' 'Seaside-Component' 'Seaside-RenderLoop' 'Seaside-Tools-Core' 'Seaside-Flow' 'Seaside-Environment' 'Seaside-Widgets' );
-			group: 'Tests' with: #('Core' 'Seaside-Tests-Core' 'Seaside-Tests-Canvas' 'Seaside-Tests-Session' 'Seaside-Tests-Component' 'Seaside-Tests-RenderLoop' 'Seaside-Tests-Environment' 'Seaside-Tests-Flow' 'Seaside-Tests-UTF8' 'Seaside-Tests-InternetExplorer' 'Seaside-Tests-Email' 'Seaside-Tests-Examples' 'RSS Tests' 'Welcome Tests' 'REST Tests' 'Swagger Tests' 'Seaside-Tests-Parasol');
+			group: 'Tests' with: #('Core' 'Seaside-Tests-Core' 'Seaside-Tests-Canvas' 'Seaside-Tests-Session' 'Seaside-Tests-Component' 'Seaside-Tests-RenderLoop' 'Seaside-Tests-Environment' 'Seaside-Tests-Flow' 'Seaside-Tests-UTF8' 'Seaside-Tests-InternetExplorer' 'Seaside-Tests-Email' 'Seaside-Tests-Examples' 'Seaside-Tests-WebComponents' 'RSS Tests' 'Welcome Tests' 'REST Tests' 'Swagger Tests' 'Seaside-Tests-Parasol');
 			group: 'Hotwired' with: #('Seaside-HotwireTurbo-Core');
 			group: 'Development' with: #('Core' 'Seaside-Development');
 			group: 'Development Tests' with: #('Development' 'Core' 'Seaside-Tests-Development');
 			group: 'Email' with: #('Seaside-Email');
-			group: 'Examples' with: #('Core' 'Seaside-Examples' 'Seaside-REST-Examples' 'Seaside-HotwireTurbo-Examples') ].
+			group: 'Examples' with: #('Core' 'Seaside-Examples' 'Seaside-REST-Examples' 'Seaside-HotwireTurbo-Examples' 'Seaside-WebComponents-Examples') ].

repository/Seaside-Canvas.package/WAHtmlCanvas.class/instance/slot..st

@@ -0,0 +1,3 @@
+tags-web-components
+slot: aBlock
+	self slot with: aBlock

repository/Seaside-Canvas.package/WAHtmlCanvas.class/instance/slot.st

@@ -0,0 +1,4 @@
+tags-web-components
+slot
+
+	^ self brush: WASlotTag new

repository/Seaside-Canvas.package/WAHtmlCanvas.class/instance/template..st

@@ -0,0 +1,3 @@
+tags-web-components
+template: aBlock
+	self template with: aBlock

repository/Seaside-Canvas.package/WAHtmlCanvas.class/instance/template.st

@@ -0,0 +1,4 @@
+tags-web-components
+template
+
+	^ self brush: WATemplateTag new

repository/Seaside-Canvas.package/WASlotTag.class/README.md

@@ -0,0 +1 @@
+The slot HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

repository/Seaside-Canvas.package/WASlotTag.class/instance/name..st

@@ -0,0 +1,4 @@
+attributes
+name: aSring
+	"The slot's name."
+	self attributeAt: 'name' put: aSring

repository/Seaside-Canvas.package/WASlotTag.class/instance/tag.st

@@ -0,0 +1,3 @@
+accessing
+tag
+	^ 'slot'

repository/Seaside-Canvas.package/WASlotTag.class/properties.json

@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "Anonymous 7/6/2024 14:52",
+	"super" : "WATagBrush",
+	"category" : "Seaside-Canvas-Tags",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WASlotTag",
+	"type" : "normal"
+}

repository/Seaside-Canvas.package/WATagBrush.class/instance/slot..st

@@ -0,0 +1,5 @@
+attributes-webcomponents
+slot: aString
+	"The slot global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value."
+
+	self attributes at: 'slot' put: aString

repository/Seaside-Canvas.package/WATemplateTag.class/README.md

@@ -0,0 +1 @@
+The template HTML element serves as a mechanism for holding HTML fragments, which can either be used later via JavaScript or generated immediately into shadow DOM.

repository/Seaside-Canvas.package/WATemplateTag.class/instance/shadowRootClonable..st

@@ -0,0 +1,4 @@
+attributes
+shadowRootClonable: aBoolean
+	"Sets the value of the clonable property of a ShadowRoot created using this element to true. If set, a clone of the shadow host (the parent element of this <template>) created with Node.cloneNode() or Document.importNode() will include a shadow root in the copy."
+	self attributeAt: 'shadowrootclonable' put: aBoolean

repository/Seaside-Canvas.package/WATemplateTag.class/instance/shadowRootDelegatesFocus..st

@@ -0,0 +1,4 @@
+attributes
+shadowRootDelegatesFocus: aBoolean
+	"Sets the value of the delegatesFocus property of a ShadowRoot created using this element to true. If this is set and a non-focusable element in the shadow tree is selected, then focus is delegated to the first focusable element in the tree. The value defaults to false."
+	self attributeAt: 'shadowrootdelegatesfocus' put: aBoolean

repository/Seaside-Canvas.package/WATemplateTag.class/instance/shadowRootMode..st

@@ -0,0 +1,10 @@
+attributes
+shadowRootMode: aString
+	"Creates a shadow root for the parent element. It is a declarative version of the Element.attachShadow() method and accepts the same enumerated values.
+	
+	open
+		Exposes the internal shadow root DOM for JavaScript (recommended for most use cases).
+		
+	closed
+		Hides the internal shadow root DOM from JavaScript."
+	self attributeAt: 'shadowrootmode' put: aString

repository/Seaside-Canvas.package/WATemplateTag.class/instance/shadowRootSerializable..st

@@ -0,0 +1,4 @@
+attributes
+shadowRootSerializable: aBoolean
+	"Sets the value of the serializable property of a ShadowRoot created using this element to true. If set, the shadow root may be serialized by calling the Element.getHTML() or ShadowRoot.getHTML() methods with the options.serializableShadowRoots parameter set true. The value defaults to false."
+	self attributeAt: 'shadowrootserializable' put: aBoolean

repository/Seaside-Canvas.package/WATemplateTag.class/instance/tag.st

@@ -0,0 +1,3 @@
+accessing
+tag
+	^ 'template'

repository/Seaside-Canvas.package/WATemplateTag.class/properties.json

@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "Anonymous 7/6/2024 14:40",
+	"super" : "WATagBrush",
+	"category" : "Seaside-Canvas-Tags",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WATemplateTag",
+	"type" : "normal"
+}

repository/Seaside-Canvas.package/monticello.meta/categories.st

@@ -1,4 +1 @@
-SystemOrganization addCategory: #'Seaside-Canvas'!
-SystemOrganization addCategory: #'Seaside-Canvas-Base'!
-SystemOrganization addCategory: #'Seaside-Canvas-Canvas'!
-SystemOrganization addCategory: #'Seaside-Canvas-Tags'!
+self packageOrganizer ensurePackage: #'Seaside-Canvas' withTags: #(#Base #Canvas #Tags)!

repository/Seaside-Component.package/monticello.meta/categories.st

@@ -1,5 +1 @@
-SystemOrganization addCategory: #'Seaside-Component'!
-SystemOrganization addCategory: #'Seaside-Component-Base'!
-SystemOrganization addCategory: #'Seaside-Component-Exceptions'!
-SystemOrganization addCategory: #'Seaside-Component-Tasks'!
-SystemOrganization addCategory: #'Seaside-Component-Visitors'!
+self packageOrganizer ensurePackage: #'Seaside-Component' withTags: #(#Base #Exceptions #Tasks #Visitors)!

repository/Seaside-RenderLoop.package/monticello.meta/categories.st

@@ -1,4 +1 @@
-SystemOrganization addCategory: #'Seaside-RenderLoop'!
-SystemOrganization addCategory: #'Seaside-RenderLoop-Base'!
-SystemOrganization addCategory: #'Seaside-RenderLoop-Continuations'!
-SystemOrganization addCategory: #'Seaside-RenderLoop-Errors'!
+self packageOrganizer ensurePackage: #'Seaside-RenderLoop' withTags: #(#Base #Continuations #Errors)!

repository/Seaside-Tests-Session.package/monticello.meta/categories.st

@@ -1 +1 @@
-SystemOrganization addCategory: #'Seaside-Tests-Session'!
+self packageOrganizer ensurePackage: #'Seaside-Tests-Session' withTags: #()!

repository/Seaside-Tests-WebComponents.package/.filetree

@@ -0,0 +1,5 @@
+{
+	"separateMethodMetaAndSource" : false,
+	"noMethodMetaData" : true,
+	"useCypressPropertiesFile" : true
+}

repository/Seaside-Tests-WebComponents.package/GRPackage.extension/class/seasideTestsWebComponents.st

@@ -0,0 +1,11 @@
+*Seaside-Tests-WebComponents
+seasideTestsWebComponents
+	^ self new
+		name: 'Seaside-WebComponents-Examples';
+		description: 'Tests for Seaside-WebComponents';
+		addDependency: 'Seaside-WebComponents-Core';
+		addDependency: 'Seaside-Tests-Core';
+		addDependency: 'Seaside-Session';
+		addDependency: 'Seaside-Examples';
+		url: #seasideUrl;
+		yourself

repository/Seaside-Tests-WebComponents.package/GRPackage.extension/properties.json

@@ -0,0 +1,3 @@
+{
+	"name" : "GRPackage"
+}

repository/Seaside-Tests-WebComponents.package/WAFragmentRenderingTest.class/class/shouldInheritSelectors.st

@@ -0,0 +1,3 @@
+testing
+shouldInheritSelectors
+	^ false

repository/Seaside-Tests-WebComponents.package/WAFragmentRenderingTest.class/instance/newHandler.st

@@ -0,0 +1,10 @@
+private
+newHandler
+	| application |
+	application := WAApplication new.
+	application configuration
+		addParent: WARenderLoopConfiguration instance.
+	^ application
+		rootClass: WACounter;
+		preferenceAt: #renderPhaseContinuationClass put: WAFragmentRenderPhaseContinuation;
+		yourself

repository/Seaside-Tests-WebComponents.package/WAFragmentRenderingTest.class/instance/requestWithMethod..st

@@ -0,0 +1,5 @@
+running
+requestWithMethod: aString
+	^ WARequest
+		method: aString
+		uri: '/app/oneo'

repository/Seaside-Tests-WebComponents.package/WAFragmentRenderingTest.class/instance/testRendering.st

@@ -0,0 +1,12 @@
+tests
+testRendering
+	| context request responseContents |
+	request := self requestWithMethod: 'GET'.
+	context := WARequestContext request: request response: WABufferedResponse new.
+	[ handler handle: context ]
+		on: WAResponseNotification
+		do: [ :notification | ].
+	self assert: context response status = 200.
+	responseContents := context response contents.
+	self assert: (responseContents beginsWith: '<h1>').
+	self assert: (responseContents endsWith: '</a>')

repository/Seaside-Tests-WebComponents.package/WAFragmentRenderingTest.class/properties.json

@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "",
+	"super" : "WARequestHandlerTest",
+	"category" : "Seaside-Tests-WebComponents",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WAFragmentRenderingTest",
+	"type" : "normal"
+}

repository/Seaside-Tests-WebComponents.package/monticello.meta/categories.st

@@ -0,0 +1 @@
+self packageOrganizer ensurePackage: #'Seaside-Tests-WebComponents' withTags: #()!

repository/Seaside-Tests-WebComponents.package/monticello.meta/package

@@ -0,0 +1 @@
+(name 'Seaside-Tests-WebComponents')

repository/Seaside-Tests-WebComponents.package/properties.json

@@ -0,0 +1 @@
+{ }

repository/Seaside-WebComponents-Core.package/.filetree

@@ -0,0 +1,5 @@
+{
+	"separateMethodMetaAndSource" : false,
+	"noMethodMetaData" : true,
+	"useCypressPropertiesFile" : true
+}

repository/Seaside-WebComponents-Core.package/GRPackage.extension/class/seasideWebComponentsCore.st

@@ -0,0 +1,11 @@
+*Seaside-WebComponents-Core
+seasideWebComponentsCore
+	^ self new
+		name: 'Seaside-WebComponents-Core';
+		description: 'Allows embedding Seaside components as Web Components';
+		addDependency: 'Seaside-Core';
+		addDependency: 'Seaside-Canvas';
+		addDependency: 'Seaside-Component';
+		addDependency: 'Seaside-RenderLoop';
+		url: #seasideUrl;
+		yourself

repository/Seaside-WebComponents-Core.package/GRPackage.extension/properties.json

@@ -0,0 +1,3 @@
+{
+	"name" : "GRPackage"
+}

repository/Seaside-WebComponents-Core.package/WAFragmentRenderPhaseContinuation.class/README.md

@@ -0,0 +1 @@
+I am a render phase continuation that only renders a fragment of a web page, without a head or body.

repository/Seaside-WebComponents-Core.package/WAFragmentRenderPhaseContinuation.class/instance/createHtmlRootWithContext..st

@@ -0,0 +1,3 @@
+private
+createHtmlRootWithContext: aRenderContext
+	^ WANilHtmlRoot new

repository/Seaside-WebComponents-Core.package/WAFragmentRenderPhaseContinuation.class/instance/toPresenterSendRoot..st

@@ -0,0 +1,3 @@
+updating
+toPresenterSendRoot: anHtmlRoot
+	"intentionally empty"

repository/Seaside-WebComponents-Core.package/WAFragmentRenderPhaseContinuation.class/instance/updateRoot..st

@@ -0,0 +1,3 @@
+updating
+updateRoot: anHtmlRoot
+	"intentionally empty"

repository/Seaside-WebComponents-Core.package/WAFragmentRenderPhaseContinuation.class/properties.json

@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "Anonymous 7/6/2024 13:05",
+	"super" : "WARenderPhaseContinuation",
+	"category" : "Seaside-WebComponents-Core",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WAFragmentRenderPhaseContinuation",
+	"type" : "normal"
+}

repository/Seaside-WebComponents-Core.package/WAHeadlessComponent.class/README.md

@@ -0,0 +1,3 @@
+I am a component that is used to render a web page without <html>, <head> or <body> elements.
+
+I do not add any functionality, I only prevent components from being used in pages that have <html>, <head> or <body> elements. It is therefore not required that components subclass me.

repository/Seaside-WebComponents-Core.package/WAHeadlessComponent.class/instance/updateRoot..st

@@ -0,0 +1,3 @@
+updating
+updateRoot: anHtmlRoot
+	self shouldNotImplement

repository/Seaside-WebComponents-Core.package/WAHeadlessComponent.class/properties.json

@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "xxx 7/10/2024 09:34",
+	"super" : "WAComponent",
+	"category" : "Seaside-WebComponents-Core",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WAHeadlessComponent",
+	"type" : "normal"
+}

repository/Seaside-WebComponents-Core.package/WANilHtmlRoot.class/README.md

@@ -0,0 +1 @@
+I am a stand in for an HTML root to render a web page without head or body.

repository/Seaside-WebComponents-Core.package/WANilHtmlRoot.class/instance/closeOn..st

@@ -0,0 +1,3 @@
+writing
+closeOn: aDocument
+	"intentionally empty"

repository/Seaside-WebComponents-Core.package/WANilHtmlRoot.class/instance/openOn..st

@@ -0,0 +1,3 @@
+writing
+openOn: aDocument
+	"intentionally empty"

repository/Seaside-WebComponents-Core.package/WANilHtmlRoot.class/properties.json

@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "Anonymous 7/6/2024 13:07",
+	"super" : "WAObject",
+	"category" : "Seaside-WebComponents-Core",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WANilHtmlRoot",
+	"type" : "normal"
+}

repository/Seaside-WebComponents-Core.package/WAWebComponentsLibrary.class/README.md

@@ -0,0 +1,35 @@
+I am a WebComponent library that allows users to embed Seaside components into existing web pages.
+
+Usually I would not be used directly a Seaside application, instead I would be handed off to a different application or web page that wants to embed Seaside components.
+
+# Usage
+
+To use this library 
+
+```language=HTML
+<html>
+  <head>
+    <!-- -->
+    <script src="seaside-components.js" defer></script>
+  </head>
+  <body>
+    <!-- -->
+    <wa-component url="/examples/headless-counter">Loading...</wa-component>
+    <!-- -->
+  </body>
+</html>
+```
+
+# Page Refreshes
+
+When an embeded component does a full page refresh a full page refresh of the containing page will result. If this is not wanted then the component needs to use Ajax or opt-in to ajaxification.
+
+# Ajaxification
+
+Per default no ajaxification will happen so you have to make sure your component does not perform full page requests.
+
+You can opt in to ajaxification using
+
+```language=HTML
+<seaside-component url="/examples/headless-counter" ajaxify="true">Loading...</seaside-component>
+```