wappler-pubsub 1.0.0

package/LICENSE.md

@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2025 Amit Chandi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# wappler_ac_pubsub
+These components provide a simple pub/sub mechanism that allows a partial view to communicate back to its parent page. Instead of tightly coupling partials to the parent’s logic, a partial can publish events, and the parent can subscribe to them and react. This makes partials more modular, reusable, and easier to maintain.
+
+## Components
+- **Publisher**: Publish events to notify subscribers about changes.
+- **Subscriber**: Subscribe to events published by publishers and perform actions based on the received events.
+
+---
+
+### Publisher
+
+#### Properties
+- **ID**: ID of the Publisher
+
+#### Actions
+- **Trigger**: Trigger an event with the given Event Name.
+
+---
+
+### Subscriber
+
+#### Properties
+- **ID**: ID of the Subscriber
+- **Event Name**: The name of the event the component is subscribed to.
+
+#### Events
+- **Event Triggered**: Fired when the event set in Event Name is triggered.
+
+---
+
+## Instructions for Intended Use Case
+You are meant to have 1 Publisher and 1 or more Subscribers. Place the Publisher in your layout so all pages under the layout have visibility of the Publisher.
+1. Place a Publisher component in your layout.
+2. Place a Subscriber component in your content page and set the Event Name the subscriber is listening to.
+3. Under the Subscriber's Dynamic Events, setup the action(s) you would like to perform when the event is triggered.
+4. Setup a trigger for your event from a partial using the Trigger Action of your Publisher component.
+
+
+## License
+The Publisher and Subscriber components are licensed under the MIT License. Please refer to the license file for more details.

package/app_connect/components.hjson

@@ -0,0 +1,122 @@
+{
+	components: [
+		{
+		  type: 'dmx-publisher',
+		  selector : 'dmx-publisher, [is=dmx-publisher]',
+		  groupTitle : 'Chandiman',
+		  groupIcon : 'fas fa-archive',
+		  title : 'Publisher: @@id@@',
+		  icon : 'fa fa-lg fa-upload',
+		  state : 'opened',
+		  anyParent: true,
+		  template: '<dmx-publisher id="@@id@@"></dmx-publisher>',
+		  baseName: 'publisher',
+		  help: 'Publisher',
+		  dataScheme: [
+
+		  ],
+		  outputType: 'object',
+		  dataPick: true,
+		  dataPickObject: true,
+		  properties : [
+  			{
+  				group: 'Publisher Properties',
+  				variables: [
+  					{ name: 'publisherId', attribute: 'id', title: 'ID', type: 'text', defaultValue: '', required: true },
+  				]
+  			}
+		  ],
+			actionsScheme: [
+		    {
+				addTitle: 'Trigger',
+				title : 'Trigger',
+				name : 'trigger',
+				icon : 'fas fa-lg fa-exchange',
+				state : 'opened',
+				help: 'Trigger',
+				properties : [
+					{
+						group: 'Trigger Properties',
+						optionsInObject: true,
+						variables: [
+							{
+								name: 'name', optionName: 'name', title: 'Event Name', type: 'text',
+								dataBindings: true, defaultValue: '',
+								help: 'Enter the event name to trigger'
+							},
+						]
+					}
+				]
+		    },
+		  ],
+	    children: [],
+	    allowed_children: {},
+	    copyFiles: [
+	    	{src: 'includes/dmx-publisher.js', dst: 'js/dmx-publisher.js'},
+	    ],
+	    linkFiles: [
+	    	{src: 'js/dmx-publisher.js', type: 'js', defer: true},
+	    ],
+	    cssOrder: [],
+	    jsOrder: []
+	  },
+	  {
+		type: 'dmx-subscriber',
+		selector : 'dmx-subscriber, [is=dmx-subscriber]',
+		groupTitle : 'Chandiman',
+		groupIcon : 'fas fa-archive',
+		title : 'subscriber: @@id@@',
+		icon : 'fa fa-lg fa-download',
+		state : 'opened',
+		anyParent: true,
+		template: '<dmx-subscriber id="@@id@@"></dmx-subscriber>',
+		baseName: 'subscriber',
+		help: 'Subscriber',
+		dataScheme: [],
+		outputType: 'object',
+		dataPick: true,
+		dataPickObject: true,
+		properties : [
+  			{
+  				group: 'Subscriber Properties',
+  				variables: [
+  					{ name: 'subscriberId', attribute: 'id', title: 'ID', type: 'text', defaultValue: '', required: true },
+					{ name: 'subscriberEventName', attribute: 'eventname', title: 'Event Name', type: 'text', defaultValue: 'event', required: true },
+  				]
+  			}
+		  ],
+		actionsScheme: [],
+	    children: [],
+	    allowed_children: {},
+	    copyFiles: [
+	    	{src: 'includes/dmx-subscriber.js', dst: 'js/dmx-subscriber.js'},
+	    ],
+	    linkFiles: [
+	    	{src: 'js/dmx-subscriber.js', type: 'js', defer: true},
+	    ],
+	    cssOrder: [],
+	    jsOrder: []
+	  }
+	],
+	attributes: [],
+	events: [
+		{
+			name: 'dmx-subscriber-event_triggered', attributeStartsWith: 'dmx-on', attribute: 'eventtriggered', title: 'Event Triggered', type: 'boolean',
+			display: 'fieldset', icon: 'fa fa-lg fa-chevron-right',
+			groupTitle: 'Publisher', groupIcon: 'fa fa-lg fa-archive comp-general',
+			defaultValue: true, show: ['event_triggered_action'], noChangeOnHide: true, groupEnabler: true,
+			children: [
+				{
+					name: 'event_triggered_action', attributeStartsWith: 'dmx-on', attribute: 'eventtriggered', isValue: true, actionsPicker: true,
+					title: 'Action:', type: 'text', help: 'Choose the action to execute.', defaultValue: '', initDisplay: 'none', required: true
+				}
+			],
+			allowedOn: {
+				'dmx-subscriber' : true
+			}
+		},
+	],
+	static_events: [
+
+	]
+}

package/includes/dmx-publisher.js

@@ -0,0 +1,32 @@
+// JavaScript Document
+
+dmx.Component('publisher', {
+  initialData: {},
+
+  attributes: {},
+
+  render: false,
+
+  methods: {
+    trigger: function (name) {
+      this._trigger(name);
+    }
+  },
+
+  events: {
+    updated: Event,
+  },
+
+  init: function () {
+
+  },
+
+  preformUpdate: function (updatedProps) {
+
+  },
+
+  _trigger: function (props) {
+    let customEvent = new CustomEvent(props.name);
+    document.dispatchEvent(customEvent);
+  },
+});

package/includes/dmx-subscriber.js

@@ -0,0 +1,47 @@
+// JavaScript Document
+
+dmx.Component('subscriber', {
+    initialData: {
+        eventname: ''
+    },
+
+    attributes: {
+        eventname: {
+            type: String,
+            default: 'event'
+        },
+    },
+
+    render: false,
+    methods: {},
+
+    events: {
+        updated: Event,
+        eventtriggered: Event,
+    },
+
+    init: function () {
+        this.set('eventname', this.props.eventname);
+        this.handler = () => this._eventtriggered();
+        document.addEventListener(this.props.eventname, this.handler);
+        this.dispatchEvent("eventtriggered");
+    },
+
+    destroy: function () {
+        document.removeEventListener(this.get('eventname'), this.handler);
+    },
+
+    preformUpdate: function (updatedProps) {
+        if (updatedProps.has('eventname')) {
+            this.set('eventname', this.props.eventname);
+
+            dmx.nextTick(function () {
+                this.dispatchEvent('updated');
+            }, this);
+        }
+    },
+
+    _eventtriggered: function () {
+        this.dispatchEvent("eventtriggered");
+    },
+});

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "wappler-pubsub",
+  "version": "1.0.0",
+  "description": "A set of publisher/subscriber App Connect components for Wappler",
+  "keywords": [
+    "wappler-extension",
+    "app-connect",
+    "pub/sub"
+  ],
+  "author": {
+    "name": "Amit Chandi",
+    "url": "https://github.com/amitchandi"
+  },
+  "license": "MIT"
+}