@viamedici-spc/configurator-framer-host 1.3.0 → 1.5.0-alpha2
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.
- package/README.md +17 -6
- package/dist/index.mjs +29 -25
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,7 +55,7 @@ Below is a minimal example of how to embed a Framer configurator using the `<spc
|
|
|
55
55
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@viamedici-spc/configurator-framer-host@1.0.0"></script>
|
|
56
56
|
</head>
|
|
57
57
|
<body>
|
|
58
|
-
|
|
58
|
+
<spc-embedded-configurator src="https://example.framer.app" isolated="true"/>
|
|
59
59
|
</body>
|
|
60
60
|
</html>
|
|
61
61
|
```
|
|
@@ -64,11 +64,22 @@ Below is a minimal example of how to embed a Framer configurator using the `<spc
|
|
|
64
64
|
|
|
65
65
|
Attributes for `<spc-embedded-configurator>`
|
|
66
66
|
|
|
67
|
-
| Attribute
|
|
68
|
-
|
|
69
|
-
| `src`
|
|
70
|
-
| `isolated`
|
|
71
|
-
| `no-auto-height`
|
|
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
|
+
## Releasing
|
|
74
|
+
|
|
75
|
+
After publishing a new version to npm, jsDelivr may continue to serve the previous version for floating URLs (e.g. `@1`, `@latest`) for up to 12 hours per edge node, because each CDN edge caches the resolved file independently.
|
|
76
|
+
|
|
77
|
+
To make the new version available immediately on all edges and CDN providers, trigger a global purge once npm has accepted the publish:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
curl -fsS "https://purge.jsdelivr.net/npm/@viamedici-spc/configurator-framer-host@1"
|
|
81
|
+
curl -fsS "https://purge.jsdelivr.net/npm/@viamedici-spc/configurator-framer-host@latest"
|
|
82
|
+
```
|
|
72
83
|
|
|
73
84
|
## License
|
|
74
85
|
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function
|
|
1
|
+
function E(s) {
|
|
2
2
|
var e = [];
|
|
3
3
|
if (s.length === 0)
|
|
4
4
|
return "";
|
|
@@ -20,28 +20,28 @@ function x(s) {
|
|
|
20
20
|
var a = n.split("?");
|
|
21
21
|
return n = a.shift() + (a.length > 0 ? "?" : "") + a.join("&"), n;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function w() {
|
|
24
24
|
var s;
|
|
25
|
-
return typeof arguments[0] == "object" ? s = arguments[0] : s = [].slice.call(arguments),
|
|
25
|
+
return typeof arguments[0] == "object" ? s = arguments[0] : s = [].slice.call(arguments), E(s);
|
|
26
26
|
}
|
|
27
|
-
const m = class
|
|
27
|
+
const m = class d extends HTMLElement {
|
|
28
28
|
constructor() {
|
|
29
|
-
super(), this.src = null, this.proxyBaseUrl =
|
|
29
|
+
super(), this.src = null, this.proxyBaseUrl = d.proxyBaseUrl, this.hasConnected = !1;
|
|
30
30
|
}
|
|
31
31
|
static get observedAttributes() {
|
|
32
|
-
return
|
|
32
|
+
return d.attributeNames;
|
|
33
33
|
}
|
|
34
34
|
connectedCallback() {
|
|
35
35
|
this.hasConnected = !0, this.src && (console.log("[Configurator] Web Component connected -> reinitialize the configurator app."), this.bootstrapApp());
|
|
36
36
|
}
|
|
37
37
|
attributeChangedCallback(e, o, t) {
|
|
38
|
-
e === "src" && t !== o ? (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 !== o && (this.proxyBaseUrl = t ??
|
|
38
|
+
e === "src" && t !== o ? (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 !== o && (this.proxyBaseUrl = t ?? d.proxyBaseUrl);
|
|
39
39
|
}
|
|
40
40
|
async bootstrapApp() {
|
|
41
41
|
try {
|
|
42
42
|
let e;
|
|
43
43
|
try {
|
|
44
|
-
const i =
|
|
44
|
+
const i = w(this.proxyBaseUrl, `?url=${this.src}`);
|
|
45
45
|
e = await fetch(i);
|
|
46
46
|
} catch (i) {
|
|
47
47
|
console.error("[Configurator] Failed to bootstrap configurator app: Failed to load index.html.", i);
|
|
@@ -49,23 +49,27 @@ const m = class u extends HTMLElement {
|
|
|
49
49
|
}
|
|
50
50
|
for (; this.firstChild; )
|
|
51
51
|
this.removeChild(this.firstChild);
|
|
52
|
-
const o = await e.text(), t = new DOMParser().parseFromString(o, "text/html"), r = t.querySelector("style[data-framer-css-ssr-minified]") || t.querySelector("style[data-framer-css-ssr]"), n = t.querySelector("style[data-framer-fonts-ssr-minified]") || t.querySelector("style[data-framer-font-css]"), a = t.querySelector("div#main"), l = t.querySelector('script[data-framer-bundle="main"]'),
|
|
52
|
+
const o = await e.text(), t = new DOMParser().parseFromString(o, "text/html"), r = t.querySelector("style[data-framer-css-ssr-minified]") || t.querySelector("style[data-framer-css-ssr]"), n = t.querySelector("style[data-framer-fonts-ssr-minified]") || t.querySelector("style[data-framer-font-css]"), a = t.querySelector("div#main"), l = t.querySelector('script[data-framer-bundle="main"]'), u = t.querySelector('script[type="importmap"][data-framer-importmap]');
|
|
53
53
|
if (r && r.textContent) {
|
|
54
|
-
const i =
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
c
|
|
54
|
+
const i = [
|
|
55
|
+
"html,body,#main",
|
|
56
|
+
"h1,h2,h3,h4,h5,h6,p,figure",
|
|
57
|
+
"body,input,textarea,select,button",
|
|
58
|
+
"*"
|
|
59
|
+
], h = r.textContent.split("}").filter((c) => {
|
|
60
|
+
const x = c.trim().replace(/,\s+/g, ",");
|
|
61
|
+
return !i.some((S) => x.startsWith(S));
|
|
62
|
+
}).map((c) => c.trim()).join(`}
|
|
63
|
+
`), f = document.createElement("style");
|
|
64
|
+
for (const c of r.attributes)
|
|
65
|
+
f.setAttribute(c.name, c.value);
|
|
66
|
+
f.textContent = h, this.appendChild(f);
|
|
63
67
|
} else
|
|
64
68
|
console.warn("[Configurator] Bootstrapping configurator app: Could not find the CSS style element.");
|
|
65
69
|
if (n && n.textContent) {
|
|
66
70
|
const i = document.createElement("style");
|
|
67
|
-
for (const
|
|
68
|
-
i.setAttribute(
|
|
71
|
+
for (const h of n.attributes)
|
|
72
|
+
i.setAttribute(h.name, h.value);
|
|
69
73
|
i.textContent = n.textContent, this.appendChild(i);
|
|
70
74
|
} else
|
|
71
75
|
console.warn("[Configurator] Bootstrapping configurator app: Could not find the fonts style element.");
|
|
@@ -80,9 +84,9 @@ const m = class u extends HTMLElement {
|
|
|
80
84
|
console.error("[Configurator] Script tag found, but no src or content available.");
|
|
81
85
|
else
|
|
82
86
|
console.warn("[Configurator] Bootstrapping configurator app: Could not find the main entry script.");
|
|
83
|
-
if (
|
|
87
|
+
if (u && u.textContent) {
|
|
84
88
|
const i = document.createElement("script");
|
|
85
|
-
i.type = "importmap", i.textContent =
|
|
89
|
+
i.type = "importmap", i.textContent = u.textContent, this.appendChild(i);
|
|
86
90
|
}
|
|
87
91
|
} catch (e) {
|
|
88
92
|
console.error("[Configurator] Failed to bootstrap configurator app", e);
|
|
@@ -172,11 +176,11 @@ const v = class p extends HTMLElement {
|
|
|
172
176
|
}
|
|
173
177
|
};
|
|
174
178
|
v.childAttributes = [...g.attributeNames, ...y.attributeNames];
|
|
175
|
-
let
|
|
176
|
-
customElements.define("spc-embedded-configurator",
|
|
179
|
+
let H = v;
|
|
180
|
+
customElements.define("spc-embedded-configurator", H);
|
|
177
181
|
customElements.define("spc-embedded-configurator-native", g);
|
|
178
182
|
customElements.define("spc-embedded-configurator-iframe", y);
|
|
179
183
|
export {
|
|
180
184
|
g as EmbeddedConfiguratorNative,
|
|
181
|
-
|
|
185
|
+
H as EmbeddedConfiguratorStrategy
|
|
182
186
|
};
|
package/package.json
CHANGED