@freeseller/wappler-server-data 0.1.0

package/README.md

@@ -0,0 +1,30 @@
+# @freeseller/wappler-server-data
+
+Wappler App Connect component for exposing server-side rendered JSON to App Connect as `component.data`.
+
+## Component
+
+Use the component in your page markup like this:
+
+`<dmx-server-data id="serverData"><script type="application/json"><%- JSON.stringify(typeof server_data !== 'undefined' ? server_data : null) %></script></dmx-server-data>`
+
+Then access the data in App Connect as:
+
+- `serverData.data`
+- `serverData.data.uuid`
+- `serverData.data.title`
+
+## Included files
+
+- `app_connect/components.hjson`
+- `includes/dmx-server-data.js`
+
+## Publish
+
+Package name:
+
+`@freeseller/wappler-server-data`
+
+## Notes
+
+This component reads JSON only from an embedded `script[type="application/json"]` block.

package/app_connect/components.hjson

@@ -0,0 +1,55 @@
+{
+  components: [
+    {
+      type: 'dmx-server-data',
+      selector: 'dmx-server-data',
+      groupTitle: 'Data',
+      groupIcon: 'fa-solid fa-database',
+      title: 'Server Data',
+      icon: 'fa-solid fa-server',
+      state: 'opened',
+      anyParent: true,
+      template: '<dmx-server-data id="server_data" servervar="my_server_var"><script type="application/json"><%- JSON.stringify(typeof my_server_var !== \'undefined\' ? my_server_var : null) %></script></dmx-server-data>',
+      baseName: 'serverData',
+      help: 'Expose server-side rendered JSON to App Connect as component.data.',
+      dataScheme: [
+        { name: 'loaded', type: 'boolean' },
+        { name: 'data', type: 'object' }
+      ],
+      outputType: 'object',
+      dataPick: true,
+      properties: [
+        {
+          group: 'Server Data Properties',
+          variables: [
+            { name: 'id', attribute: 'id', title: 'ID', type: 'text', defaultValue: '', required: true },
+            { name: 'servervar', attribute: 'servervar', title: 'Server Variable', type: 'text', defaultValue: 'my_server_var', required: false }
+          ]
+        }
+      ],
+      actionsScheme: [
+        {
+          addTitle: 'Refresh',
+          title: 'Refresh',
+          name: 'refresh',
+          icon: 'fa fa-lg fa-refresh',
+          state: 'opened',
+          help: 'Re-read the embedded or attribute JSON and update component.data.',
+          properties: []
+        }
+      ],
+      children: [],
+      allowed_children: {},
+      copyFiles: [
+        { src: 'includes/dmx-server-data.js', dst: 'js/dmx-server-data.js' }
+      ],
+      linkFiles: [
+        { src: 'js/dmx-server-data.js', type: 'js', defer: true }
+      ],
+      cssOrder: [],
+      jsOrder: []
+    }
+  ],
+  attributes: [],
+  events: []
+}

package/includes/dmx-server-data.js

@@ -0,0 +1,56 @@
+dmx.Component('server-data', {
+    initialData: {
+        loaded: false,
+        data: null
+    },
+
+    attributes: {
+    },
+
+    render(node) {
+        this._sourceNode = node;
+        this._applyServerValue(this._readServerValue());
+        node.innerHTML = '';
+    },
+
+    performUpdate(props) {
+        if (props.size) {
+            this._applyServerValue(this._readServerValue());
+        }
+    },
+
+    methods: {
+        refresh() {
+            this._applyServerValue(this._readServerValue());
+        }
+    },
+
+    _readServerValue() {
+        const node = this._sourceNode || this.$node;
+        if (!node) return null;
+
+        const script = node.querySelector('script[type="application/json"]');
+        if (script && script.textContent.trim()) {
+            return this._parseJson(script.textContent);
+        }
+
+        const text = node.textContent.trim();
+        return text ? this._parseJson(text) : null;
+    },
+
+    _parseJson(json) {
+        try {
+            return JSON.parse(json);
+        } catch (error) {
+            console.warn('dmx-server-data: invalid JSON for', this.$node.id, error);
+            return null;
+        }
+    },
+
+    _applyServerValue(value) {
+        this.set({
+            data: value,
+            loaded: true
+        });
+    }
+});

package/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@freeseller/wappler-server-data",
+    "version": "0.1.0",
+    "description": "Wappler App Connect server-side rendered JSON data component.",
+    "author": {
+        "name": "Vladimir Busov"
+    },
+    "keywords": [
+        "wappler-extension"
+    ],
+    "engines": {
+        "node": ">=12.0.0"
+    },
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "app_connect/",
+        "includes/"
+    ]
+}