React + JQuery + Bootstrap -Code -Injektion auf Squarespace ⇐ JavaScript

[Anonymous]

Ich habe eine React 16-App geerbt, die mit Create-Create-App erstellt wurde und auf Github-Seiten mit einem Workflow erstellt und eingesetzt wurde, der den Hauptzweig beobachtet. Meine Mission ist es, es von Netlify auf seine neue Homepage auf Squarespace zu bewegen. Ich würde es vorziehen, große Veränderungen zu vermeiden, z. Auswerfen von CRA, zumindest bis die App auf die neue Homepage geladen wird. Ich konnte die App auf Squarespace laden, indem ich Folgendes in einen Codeblock einfügte: < /p>

Code: Select all

Insert app here





< /code>
Das [url=viewtopic.php?t=20324]Problem[/url] mit diesem Ansatz ist, dass die Site nach unten sinkt, wenn sich die Dateinamen ändern. Ich kann Squarespace ziemlich schnell aktualisieren, aber es ist fehleranfällig und langweilig. Ich habe mich untersucht, um das Hashing -Verhalten zu deaktivieren, aber die Lösungen, die ich gefunden habe, mochte nicht, z. CRA auswerfen. Außerdem gehe ich davon aus, dass es einen guten Grund dafür gibt.  Ich habe das folgende Skript nach dem Build-Schritt im Workflow hinzugefügt: < /p>
import { JSDOM } from 'jsdom';
import { open } from 'node:fs/promises';

const inPath = 'build/index.html';
const dom = await JSDOM.fromFile(inPath);

const outPath = 'build/embed-snippet.html';
const outFile = await open(outPath, 'w');
const outStream = outFile.createWriteStream();

const links = dom.window.document.querySelectorAll('link[rel=stylesheet]');

for (const link of links) {
outStream.write(link.outerHTML + '\n');
}

outStream.write('Insert app here\n');

const scripts = dom.window.document.querySelectorAll('script');

for (const script of scripts) {
outStream.write(script.outerHTML + '\n');
}
< /code>
Dann habe ich den Inhalt des Codeblocks auf Squarespace ersetzt: < /p>
Insert app here


const url = 'https://my-org.github.io/my-repo/embed-snippet.html';
const response = await fetch(url, {cache: 'no-cache'});
document.getElementById('root-host').innerHTML = await response.text();

Dies funktioniert nicht, da Skripte mit Innerhtml nicht ausführen.

Code: Select all

import { JSDOM } from 'jsdom';
import { open } from 'node:fs/promises';

const inPath = 'build/index.html';
const document = (await JSDOM.fromFile(inPath)).window.document;

const outPath = 'build/embed.js';
const outFile = await open(outPath, 'w');
const outStream = outFile.createWriteStream();

const links = [...document.querySelectorAll('link[rel=stylesheet]')].map(el => {
return {
href: el.hasAttribute('href') ? el.getAttribute('href') : undefined,
integrity: el.hasAttribute('integrity') ? el.getAttribute('integrity') : undefined,
crossOrigin: el.hasAttribute('crossOrigin') ? el.getAttribute('crossOrigin') : undefined,
};
});

const scripts = [...document.querySelectorAll('script')].map(el =>  {
return {
src: el.hasAttribute('src') ? el.getAttribute('src') : undefined,
integrity: el.hasAttribute('integrity') ? el.getAttribute('integrity') : undefined,
crossOrigin: el.hasAttribute('crossOrigin') ? el.getAttribute('crossOrigin') : undefined,
defer: el.hasAttribute('defer') ? true : undefined,
async: el.hasAttribute('async') ? true : undefined,
};
});

outStream.write(`const links = ${JSON.stringify(links)};

for (const link of links) {
const el = document.createElement('link');
el.rel = 'stylesheet';
el.href = link.href;
if (link.integrity) el.integrity = link.integrity;
if (link.crossOrigin) el.crossOrigin = link.crossOrigin;
document.head.appendChild(el);
}

const scripts = ${JSON.stringify(scripts)};

for (const script of scripts) {
const el = document.createElement('script');
el.src = script.src;
if (script.integrity) el.integrity = script.integrity;
if (script.crossOrigin) el.crossOrigin = script.crossOrigin;
if (script.defer) el.defer = true;
if (script.async) el.async = true;
document.body.appendChild(el);
}`);
< /code>
Die resultierenden Embed.js sieht so aus: < /p>
const links = [{
"href": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css",
"integrity": "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
"crossOrigin": "anonymous"
}, {
"href": "https://use.fontawesome.com/releases/v5.7.2/css/all.css",
"integrity": "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr",
"crossOrigin": "anonymous"
},
{
"href": "https://my-org.github.io/my-repo/static/css/main.a8d72baf.css"
}];

for (const link of links) {
const el = document.createElement('link');
el.rel = 'stylesheet';
el.href = link.href;
if (link.integrity) el.integrity = link.integrity;
if (link.crossOrigin) el.crossOrigin = link.crossOrigin;
document.head.appendChild(el);
}

const scripts = [{
"src": "https://my-org.github.io/my-repo/static/js/main.9ca04874.js",
"defer": true
}, {
"src": "https://code.jquery.com/jquery-3.3.1.slim.min.js",
"integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js",
"integrity": "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js",
"integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",
"crossOrigin": "anonymous"
}];

for (const script of scripts) {
const el = document.createElement('script');
el.src = script.src;
if (script.integrity) el.integrity = script.integrity;
if (script.crossOrigin) el.crossOrigin = script.crossOrigin;
if (script.defer) el.defer = true;
if (script.async) el.async = true;
document.body.appendChild(el);
}
< /code>
Hier ist der neue Inhalt des Codeblocks auf Squarespace: < /p>
Insert app here

< /code>
Das [url=viewtopic.php?t=20324]Problem[/url] ist jetzt, dass die App nur etwa die Hälfte der Zeit lädt. Die andere Hälfte der Zeit bekomme ich einen solchen Fehler: < /p>
Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
at util.js:55:5
at bootstrap.min.js:6:200
at bootstrap.min.js:6:246

Uncaught TypeError: window.$(...).tooltip is not a function
at Header.js:18:29
< /code>
Der erste Fehler schlägt vor, dass Bootstrap vor jQuery geladen wird, aber die Skripte werden gemäß den BS4 -Dokumenten ordnungsgemäß bestellt.  Ich habe versucht, die Reihenfolge der Skripte wie SO zu ändern: < /p>
const scripts = [{
"src": "https://code.jquery.com/jquery-3.3.1.slim.min.js",
"integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js",
"integrity": "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js",
"integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",
"crossOrigin": "anonymous"
}, {
"src": "https://my-org.github.io/my-repo/static/js/main.9ca04874.js",
"defer": true
}];
< /code>
Aber das [url=viewtopic.php?t=20324]Problem[/url] bleibt bestehen. Ich habe auch versucht, alle Skripte auf Defer 

hinzuzufügen, aber das hat auch nicht funktioniert. Dies ist wirklich rätselhaft, denn gemäß MDN:

Skripte, die mit dem Defer -Attribut geladen werden, wird in der Reihenfolge geladen. class = "Lang-JS PrettyPrint-Override">

Code: Select all

import React, { useRef, useState , useEffect} from 'react';

const Header = (props) => {
const myRef = useRef(null);

useEffect(() => {
window.$(myRef.current).tooltip();
}, []);

Ich habe irgendwo gelesen, dass der Haken nach dem Laden des DOM ausgeführt wird, ähnlich wie $ (Dokument). Selbst wenn das nicht stimmt, würde das den ersten Fehler nicht erklären, oder würde es in der ungefähr bereit sind, meine Hände hochzuwerfen und zu akzeptieren, dass ich (oder wer dieses Projekts als nächstes erbt) Squarespace zum richtigen richtigen Moment nach jeder Bereitstellung manuell aktualisieren muss. Aber es muss einen besseren Weg geben, oder?