WebComponents demo code

SeasideSt · Jul 7, 2024 · f334edb · f334edb
1 parent b9ae89a
commit f334edb
Show file tree

Hide file tree

Showing 21 changed files with 178 additions and 0 deletions.
diff --git a/repository/Seaside-WebComponents-Core.package/.filetree b/repository/Seaside-WebComponents-Core.package/.filetree
@@ -0,0 +1,5 @@
+{
+	"separateMethodMetaAndSource" : false,
+	"noMethodMetaData" : true,
+	"useCypressPropertiesFile" : true
+}
diff --git a/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/README.md b/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/README.md
diff --git a/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/class/canBeRoot.st b/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/class/canBeRoot.st
@@ -0,0 +1,3 @@
+testing
+canBeRoot
+	^ true
diff --git a/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/class/initialize.st b/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/class/initialize.st
@@ -0,0 +1,8 @@
+initialization
+initialize
+	| application |
+	application := WAAdmin register: WAApplication at: 'examples/headless-counter' in: WAAdmin defaultDispatcher.
+	application configuration addParent: WARenderLoopConfiguration instance.
+	application rootClass: self;
+		preferenceAt: #renderPhaseContinuationClass put: WAFragmentRenderPhaseContinuation;
+		yourself
diff --git a/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/instance/children.st b/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/instance/children.st
@@ -0,0 +1,3 @@
+hooks
+children
+	^ Array with: counter
diff --git a/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/instance/initialize.st b/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/instance/initialize.st
@@ -0,0 +1,4 @@
+initialization
+initialize
+	super initialize.
+	counter := WACounter new
diff --git a/...y/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/instance/renderContentOn..st b/...y/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/instance/renderContentOn..st
@@ -0,0 +1,3 @@
+rendering
+renderContentOn: html
+	html render: counter
diff --git a/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/properties.json b/repository/Seaside-WebComponents-Core.package/WAHeadlessCounter.class/properties.json
@@ -0,0 +1,13 @@
+{
+	"commentStamp" : "",
+	"super" : "WAHeadlessComponent",
+	"category" : "Seaside-WebComponents-Core",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [
+		"counter"
+	],
+	"name" : "WAHeadlessCounter",
+	"type" : "normal"
+}
diff --git a/...aside-WebComponents-Core.package/WAWebComponentsDemoApplication.class/README.md b/...aside-WebComponents-Core.package/WAWebComponentsDemoApplication.class/README.md
diff --git a/...easide-WebComponents-Core.package/WAWebComponentsDemoApplication.class/class/canBeRoot.st b/...easide-WebComponents-Core.package/WAWebComponentsDemoApplication.class/class/canBeRoot.st
@@ -0,0 +1,3 @@
+testing
+canBeRoot
+	^ true
diff --git a/...aside-WebComponents-Core.package/WAWebComponentsDemoApplication.class/class/initialize.st b/...aside-WebComponents-Core.package/WAWebComponentsDemoApplication.class/class/initialize.st
@@ -0,0 +1,4 @@
+initialization
+initialize
+	(WAAdmin register: self asApplicationAt: 'examples/web-components')
+		scriptGeneratorClass: WANullScriptGenerator
diff --git a/...Components-Core.package/WAWebComponentsDemoApplication.class/instance/renderContentOn..st b/...Components-Core.package/WAWebComponentsDemoApplication.class/instance/renderContentOn..st
@@ -0,0 +1,7 @@
+rendering
+renderContentOn: html
+	html heading: 'Seaside WebComponents Demo'.
+	(html tag: 'seaside-component')
+		attributeAt: 'url' put: '/examples/headless-counter';
+		attributeAt: 'ajaxify' put: 'true';
+		with: 'Loading...'
diff --git a/...e-WebComponents-Core.package/WAWebComponentsDemoApplication.class/instance/updateRoot..st b/...e-WebComponents-Core.package/WAWebComponentsDemoApplication.class/instance/updateRoot..st
@@ -0,0 +1,5 @@
+updating
+updateRoot: aRoot
+	super updateRoot: aRoot.
+	aRoot title: 'Seaside WebComponents Demo'.
+	aRoot script url: WAWebComponentsLibrary / #seasideWebComponentsJs
diff --git a/...y/Seaside-WebComponents-Core.package/WAWebComponentsDemoApplication.class/properties.json b/...y/Seaside-WebComponents-Core.package/WAWebComponentsDemoApplication.class/properties.json
@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "",
+	"super" : "WAComponent",
+	"category" : "Seaside-WebComponents-Core",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WAWebComponentsDemoApplication",
+	"type" : "normal"
+}
diff --git a/...itory/Seaside-WebComponents-Core.package/WAWebComponentsLibrary.class/README.md b/...itory/Seaside-WebComponents-Core.package/WAWebComponentsLibrary.class/README.md
@@ -0,0 +1,28 @@
+I am a WebComponent library that allows users to embed Seaside components into existing web pages.
+
+
+# Usage
+
+To use this library 
+
+```language=HTML
+<html>
+  <head>
+    <!-- -->
+    <script src="seaside-components.js" defer></script>
+  </head>
+  <body>
+    <!-- -->
+    <seaside-component url="/examples/headless-counter">Loading...</seaside-component>
+    <!-- -->
+  </body>
+</html>
+```
+
+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>
+```
diff --git a/...ebComponents-Core.package/WAWebComponentsLibrary.class/instance/seasideWebComponentsJs.st b/...ebComponents-Core.package/WAWebComponentsLibrary.class/instance/seasideWebComponentsJs.st
@@ -0,0 +1,67 @@
+scripts
+seasideWebComponentsJs
+	^ '"use strict";
+(function() {
+  class SeasideComponent extends HTMLElement {
+    #shadowRoot;
+    constructor() {
+      super();
+      this.#shadowRoot = this.attachShadow({mode: "closed"});
+    }
+
+    #ajaxify() {
+      this.#shadowRoot.addEventListener("click", (event) => {
+		
+        // links
+        const anchor = event.target.closest("a");
+        if (anchor !== null) {
+          this.#load("GET", anchor.getAttribute("href"), null);
+          event.preventDefault();
+          return;
+        }
+
+        // submit
+        const submit = event.target.closest("input[type=submit], button[type=submit]");
+        if (submit !== null) {
+          const form = submit.closest("form");
+          if (form !== null) {
+            const formData = new FormData(form);
+            formData.append(submit.getAttribute("name"), "");
+            this.#load("POST", form.getAttribute("action"), formData);
+            event.preventDefault();
+          }
+        }
+      });
+    }
+
+    #load(method, url, data) {
+      const xhr = new XMLHttpRequest();
+
+      xhr.responseType = "text";  // we do not stirp anyhing, just use innerHtml
+      xhr.addEventListener("load", (event) => {
+        if (xhr.status === 200) {
+          this.#shadowRoot.innerHTML = xhr.response;
+        }
+      });
+		
+      xhr.open(method, url);
+
+      // WAActionCallback per default are disabled for AJAX requests
+      // Detection happens with X-Requested-With so we override it 
+      xhr.setRequestHeader("X-Requested-With", "Seaside-WebComponents");
+      xhr.send(data);
+    }
+
+    connectedCallback() {
+      const componentUrl = this.getAttribute("url");
+      const ajaxify = this.getAttribute("ajaxify");
+      if (ajaxify === "true") {
+        this.#ajaxify();
+      }
+      this.#load("GET", componentUrl, null);
+    }
+  }
+
+  customElements.define("seaside-component", SeasideComponent);
+})();
+'
diff --git a/repository/Seaside-WebComponents-Core.package/WAWebComponentsLibrary.class/properties.json b/repository/Seaside-WebComponents-Core.package/WAWebComponentsLibrary.class/properties.json
@@ -0,0 +1,11 @@
+{
+	"commentStamp" : "xxx 7/7/2024 16:54",
+	"super" : "WAFileLibrary",
+	"category" : "Seaside-WebComponents-Core",
+	"classinstvars" : [ ],
+	"pools" : [ ],
+	"classvars" : [ ],
+	"instvars" : [ ],
+	"name" : "WAWebComponentsLibrary",
+	"type" : "normal"
+}
diff --git a/repository/Seaside-WebComponents-Core.package/monticello.meta/categories.st b/repository/Seaside-WebComponents-Core.package/monticello.meta/categories.st
@@ -0,0 +1 @@
+self packageOrganizer ensurePackage: #'Seaside-WebComponents-Core' withTags: #()!
diff --git a/repository/Seaside-WebComponents-Core.package/monticello.meta/initializers.st b/repository/Seaside-WebComponents-Core.package/monticello.meta/initializers.st
diff --git a/repository/Seaside-WebComponents-Core.package/monticello.meta/package b/repository/Seaside-WebComponents-Core.package/monticello.meta/package
@@ -0,0 +1 @@
+(name 'Seaside-WebComponents-Core')
diff --git a/repository/Seaside-WebComponents-Core.package/properties.json b/repository/Seaside-WebComponents-Core.package/properties.json
@@ -0,0 +1 @@
+{ }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		self packageOrganizer ensurePackage: #'Seaside-WebComponents-Core' withTags: #()!