@viamedici-spc/configurator-framer-host 0.1.0-alpha0001

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +75 -0
  3. package/dist/index.d.ts +26 -0
  4. package/dist/index.mjs +171 -0
  5. package/package.json +57 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Viamedici Software GmbH
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,75 @@
1
+ <div >
2
+ <strong>Viamedici SPC</strong>
3
+ </div>
4
+
5
+ # Host Component for Framer Configurators
6
+
7
+ [![npm version](https://img.shields.io/npm/v/@viamedici-spc/configurator-framer-host)](https://www.npmjs.com/package/@viamedici-spc/configurator-framer-host)
8
+ [![license](https://img.shields.io/npm/l/@viamedici-spc/configurator-framer-host)](https://github.com/viamedici-spc/configurator-framer-host/blob/main/LICENSE)
9
+ [![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/viamedici-spc/configurator-framer-host/main.yml?branch=main)](https://github.com/viamedici-spc/configurator-framer-host/actions/workflows/main.yml?query=branch%3Amain)
10
+
11
+ ## Introduction
12
+
13
+ This package provides a Web Component that allows host applications to embed a Framer-based Viamedici SPC configurator.
14
+
15
+ It is designed to be used in any modern web environment (e.g. plain HTML, React, Vue, etc.) and enables seamless integration to provide the best user experience.
16
+
17
+ ## Modes
18
+
19
+ ### Native Mode
20
+
21
+ In native mode, the configurator is embedded directly into the host application DOM without an iframe. This allows for tight visual and layout integration, resulting in a more seamless user experience. However, since the configurator shares the same document context as the host, styling or DOM
22
+ conflicts can arise. Use this mode only when full control over the host environment is ensured.
23
+
24
+ ### Isolated Mode
25
+
26
+ The isolated mode, enabled via `isolated="true"`, embeds the configurator within a sandboxed iframe. This ensures that both host and configurator remain fully decoupled, preventing style or JavaScript interference. To provide a native-feeling height behavior, the iframe automatically resizes based
27
+ on its content. This behavior can be disabled using the attribute: `no-auto-height`
28
+
29
+ ## Installation
30
+
31
+ You can install the package via npm:
32
+
33
+ ```bash
34
+ npm install @viamedici-spc/configurator-framer-host
35
+ ```
36
+
37
+ Or use it directly via a CDN (e.g. jsDelivr):
38
+
39
+ ```html
40
+
41
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@viamedici-spc/configurator-framer-host@1.0.0"></script>
42
+ ```
43
+
44
+ ## Getting Started
45
+
46
+ Below is a minimal example of how to embed a Framer configurator using the `<spc-embedded-configurator>` Web Component:
47
+
48
+ ### index.html
49
+
50
+ ```html
51
+ <!DOCTYPE html>
52
+ <html lang="en">
53
+ <head>
54
+ <meta charset="UTF-8"/>
55
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@viamedici-spc/configurator-framer-host@1.0.0"></script>
56
+ </head>
57
+ <body>
58
+ <spc-embedded-configurator src="https://example.framer.app" isolated="true"/>
59
+ </body>
60
+ </html>
61
+ ```
62
+
63
+ ## Attributes
64
+
65
+ Attributes for `<spc-embedded-configurator>`
66
+
67
+ | Attribute | Type | Description | Example |
68
+ |-----------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------|
69
+ | `src` | `string` | URL of the Framer-based configurator to embed.
70
+ | `isolated` | `boolean` | If `true`, the configurator runs in sandboxed iframe mode.<br/>Default: `false` | `true`, `false` or `undefined` |
71
+ | `no-auto-height` | `boolean` | if true, it disables automatic resizing of the iframe to match the configurator's content height. Only applicable when `isolated` mode is enabled.<br/>Default: `false` | `true`, `false` or `undefined` |
72
+
73
+ ## License
74
+
75
+ This project is licensed under the MIT License - see the LICENSE file for details.
package/dist/index.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ export declare class EmbeddedConfiguratorNative extends HTMLElement {
2
+ static readonly proxyBaseUrl = "https://spc.cloud.ceventis.de/framer/host-proxy";
3
+ static readonly attributeNames: string[];
4
+ static get observedAttributes(): string[];
5
+ private src;
6
+ private proxyBaseUrl;
7
+ private hasConnected;
8
+ constructor();
9
+ connectedCallback(): void;
10
+ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
11
+ private bootstrapApp;
12
+ }
13
+
14
+ export declare class EmbeddedConfiguratorStrategy extends HTMLElement {
15
+ static childAttributes: string[];
16
+ static get observedAttributes(): string[];
17
+ private child;
18
+ private isIsolated;
19
+ constructor();
20
+ connectedCallback(): void;
21
+ disconnectedCallback(): void;
22
+ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
23
+ private initialize;
24
+ }
25
+
26
+ export { }
package/dist/index.mjs ADDED
@@ -0,0 +1,171 @@
1
+ function y(r) {
2
+ var e = [];
3
+ if (r.length === 0)
4
+ return "";
5
+ if (typeof r[0] != "string")
6
+ throw new TypeError("Url must be a string. Received " + r[0]);
7
+ if (r[0].match(/^[^/:]+:\/*$/) && r.length > 1) {
8
+ var s = r.shift();
9
+ r[0] = s + r[0];
10
+ }
11
+ r[0].match(/^file:\/\/\//) ? r[0] = r[0].replace(/^([^/:]+):\/*/, "$1:///") : r[0] = r[0].replace(/^([^/:]+):\/*/, "$1://");
12
+ for (var t = 0; t < r.length; t++) {
13
+ var i = r[t];
14
+ if (typeof i != "string")
15
+ throw new TypeError("Url must be a string. Received " + i);
16
+ i !== "" && (t > 0 && (i = i.replace(/^[\/]+/, "")), t < r.length - 1 ? i = i.replace(/[\/]+$/, "") : i = i.replace(/[\/]+$/, "/"), e.push(i));
17
+ }
18
+ var o = e.join("/");
19
+ o = o.replace(/\/(\?|&|#[^!])/g, "$1");
20
+ var n = o.split("?");
21
+ return o = n.shift() + (n.length > 0 ? "?" : "") + n.join("&"), o;
22
+ }
23
+ function E() {
24
+ var r;
25
+ return typeof arguments[0] == "object" ? r = arguments[0] : r = [].slice.call(arguments), y(r);
26
+ }
27
+ const f = class h extends HTMLElement {
28
+ constructor() {
29
+ super(), this.src = null, this.proxyBaseUrl = h.proxyBaseUrl, this.hasConnected = !1;
30
+ }
31
+ static get observedAttributes() {
32
+ return h.attributeNames;
33
+ }
34
+ connectedCallback() {
35
+ this.hasConnected = !0, this.src && (console.log("[Configurator] Web Component connected -> reinitialize the configurator app."), this.bootstrapApp());
36
+ }
37
+ attributeChangedCallback(e, s, t) {
38
+ e === "src" && t !== s ? (this.src = t, this.hasConnected && this.isConnected && this.src && (console.log("[Configurator] The URL was changed -> reinitialize the configurator app."), this.bootstrapApp())) : e === "proxy-base-url" && t !== s && (this.proxyBaseUrl = t ?? h.proxyBaseUrl);
39
+ }
40
+ async bootstrapApp() {
41
+ try {
42
+ let e;
43
+ try {
44
+ const a = E(this.proxyBaseUrl, `?url=${this.src}`);
45
+ e = await fetch(a);
46
+ } catch (a) {
47
+ console.error("[Configurator] Failed to bootstrap configurator app: Failed to load index.html.", a);
48
+ return;
49
+ }
50
+ for (; this.firstChild; )
51
+ this.removeChild(this.firstChild);
52
+ const s = await e.text(), t = new DOMParser().parseFromString(s, "text/html"), i = t.querySelector("style[data-framer-css-ssr-minified]"), o = t.querySelector("div#main"), n = t.querySelector('script[data-framer-bundle="main"]');
53
+ if (!i || !i.textContent) {
54
+ console.error("[Configurator] Failed to bootstrap configurator app: Could not find the style element.");
55
+ return;
56
+ }
57
+ if (!o) {
58
+ console.error("[Configurator] Failed to bootstrap configurator app: Could not find the main div.");
59
+ return;
60
+ }
61
+ if (!n || !(n instanceof HTMLScriptElement)) {
62
+ console.error("[Configurator] Failed to bootstrap configurator app: Could not find the entry script.");
63
+ return;
64
+ }
65
+ const v = i.textContent.split("}").filter((a) => {
66
+ const d = a.trim();
67
+ return !// Remove some rules that may interfere too much with the host
68
+ (d.startsWith("html,body,#main") || d.startsWith("h1,h2,h3,h4,h5,h6,p,figure") || d.startsWith("body,input,textarea,select,button"));
69
+ }).map((a) => a.trim()).join(`}
70
+ `), c = document.createElement("style");
71
+ for (const a of i.attributes)
72
+ c.setAttribute(a.name, a.value);
73
+ c.textContent = v, this.appendChild(c), this.appendChild(o.cloneNode());
74
+ const l = document.createElement("script");
75
+ l.type = "module", l.src = n.src, l.setAttribute("async", ""), this.appendChild(l);
76
+ } catch (e) {
77
+ console.error("[Configurator] Failed to bootstrap configurator app", e);
78
+ }
79
+ }
80
+ };
81
+ f.proxyBaseUrl = "https://spc.cloud.ceventis.de/framer/host-proxy";
82
+ f.attributeNames = ["src", "proxy-base-url"];
83
+ let g = f;
84
+ const p = class m extends HTMLElement {
85
+ constructor() {
86
+ super(), this.src = null, this.hasConnected = !1, this.iframe = null, this.autoHeightHandler = null, this.allowedOrigin = null;
87
+ }
88
+ static get observedAttributes() {
89
+ return m.attributeNames;
90
+ }
91
+ connectedCallback() {
92
+ this.hasConnected = !0, this.src && (console.log("[Configurator] Web Component connected -> reinitialize the configurator app."), this.bootstrapApp());
93
+ }
94
+ disconnectedCallback() {
95
+ this.removeAutoHeightSync();
96
+ }
97
+ attributeChangedCallback(e, s, t) {
98
+ e === "src" && t !== s && (this.src = t, this.hasConnected && this.isConnected && this.src && (console.log("[Configurator] The src was changed -> reinitialize the configurator app."), this.iframe ? this.iframe.src = this.src : this.bootstrapApp()));
99
+ }
100
+ bootstrapApp() {
101
+ if (!this.src) {
102
+ console.error("[Configurator] Cannot bootstrap iframe: src is missing.");
103
+ return;
104
+ }
105
+ for (this.removeAutoHeightSync(); this.firstChild; )
106
+ this.removeChild(this.firstChild);
107
+ this.iframe = document.createElement("iframe"), this.iframe.src = this.src;
108
+ try {
109
+ this.allowedOrigin = new URL(this.src).origin;
110
+ } catch {
111
+ console.warn("[Configurator] Invalid src URL provided, cannot derive allowed origin. Height synchronisation is disabled."), this.allowedOrigin = null;
112
+ }
113
+ this.iframe.width = "100%", this.iframe.height = "100%", this.iframe.style.border = "none", this.appendChild(this.iframe), this.getAttribute("no-auto-height") != null && this.getAttribute("no-auto-height") != "false" || this.useAutoHeightSync();
114
+ }
115
+ useAutoHeightSync() {
116
+ this.autoHeightHandler = (e) => {
117
+ var s;
118
+ this.allowedOrigin && e.origin !== this.allowedOrigin || ((s = e.data) == null ? void 0 : s.type) !== "spc.configurator.height" || typeof e.data.height != "number" || (console.log("[Configurator] Received new height from iFrame -> Apply", e.data.height), this.iframe.style.height = `${e.data.height + 10}px`);
119
+ }, window.addEventListener("message", this.autoHeightHandler);
120
+ }
121
+ removeAutoHeightSync() {
122
+ this.autoHeightHandler && (window.removeEventListener("message", this.autoHeightHandler), this.autoHeightHandler = null);
123
+ }
124
+ };
125
+ p.attributeNames = ["src", "no-auto-height"];
126
+ let b = p;
127
+ const C = class u extends HTMLElement {
128
+ constructor() {
129
+ super(), this.child = null, this.isIsolated = !1;
130
+ }
131
+ static get observedAttributes() {
132
+ return ["isolated", ...u.childAttributes];
133
+ }
134
+ connectedCallback() {
135
+ this.initialize();
136
+ }
137
+ disconnectedCallback() {
138
+ this.child && this.contains(this.child) && this.removeChild(this.child), this.child = null;
139
+ }
140
+ attributeChangedCallback(e, s, t) {
141
+ if (e === "isolated") {
142
+ const i = t !== null && t !== "false";
143
+ if (i !== this.isIsolated) {
144
+ console.log("[Configurator] The isolation mode was changed -> reinitialize the configurator app."), this.isIsolated = i, this.initialize();
145
+ return;
146
+ }
147
+ }
148
+ this.child && s !== t && (t === null ? this.child.removeAttribute(e) : this.child.setAttribute(e, t));
149
+ }
150
+ initialize() {
151
+ const e = this.getAttribute("isolated");
152
+ this.isIsolated = e !== null && e !== "false";
153
+ const s = this.isIsolated ? "spc-embedded-configurator-iframe" : "spc-embedded-configurator-native";
154
+ if (this.child && this.child.tagName.toLowerCase() === s)
155
+ return;
156
+ this.child && this.removeChild(this.child);
157
+ const t = document.createElement(s);
158
+ for (const { name: i, value: o } of Array.from(this.attributes))
159
+ u.childAttributes.some((n) => n === i) && o !== null && t.setAttribute(i, o);
160
+ this.appendChild(t), this.child = t;
161
+ }
162
+ };
163
+ C.childAttributes = [...g.attributeNames, ...b.attributeNames];
164
+ let H = C;
165
+ customElements.define("spc-embedded-configurator", H);
166
+ customElements.define("spc-embedded-configurator-native", g);
167
+ customElements.define("spc-embedded-configurator-iframe", b);
168
+ export {
169
+ g as EmbeddedConfiguratorNative,
170
+ H as EmbeddedConfiguratorStrategy
171
+ };
package/package.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "name": "@viamedici-spc/configurator-framer-host",
3
+ "version": "0.1.0-alpha0001",
4
+ "description": "Provides a Web Component for host applications to embed a Framer based Viamedici SPC configurator.",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/viamedici-spc/configurator-framer-host.git"
8
+ },
9
+ "publishConfig": {
10
+ "access": "public"
11
+ },
12
+ "sideEffects": false,
13
+ "files": [
14
+ "dist"
15
+ ],
16
+ "module": "dist/index.mjs",
17
+ "types": "dist/index.d.ts",
18
+ "exports": {
19
+ ".": {
20
+ "types": "./dist/index.d.ts",
21
+ "import": "./dist/index.mjs"
22
+ }
23
+ },
24
+ "scripts": {
25
+ "build": "vite build",
26
+ "dev": "vite build --watch --mode development & vite preview",
27
+ "typecheck": "tsc --noEmit"
28
+ },
29
+ "keywords": [
30
+ "spc",
31
+ "hca",
32
+ "csp",
33
+ "constraint",
34
+ "satisfaction",
35
+ "problem",
36
+ "solver",
37
+ "viamedici",
38
+ "webcomponent",
39
+ "configurator",
40
+ "product configuration",
41
+ "embedding",
42
+ "host",
43
+ "framer"
44
+ ],
45
+ "author": "Viamedici Software GmbH",
46
+ "license": "MIT",
47
+ "devDependencies": {
48
+ "npm-sort": "^0.0.4",
49
+ "typescript": "^5.1.6",
50
+ "vite": "^4.4.8",
51
+ "vite-plugin-checker": "^0.6.1",
52
+ "vite-plugin-dts": "^3.5.0"
53
+ },
54
+ "dependencies": {
55
+ "url-join": "^5.0.0"
56
+ }
57
+ }