@flourish/sdk 5.1.0 → 5.2.1

package/RELEASE_NOTES.md

@@ -1,3 +1,11 @@
+# 5.2.1
+* Fixes crash in SDK dev-server when locale contains non-ASCII characters.
+  `Last-Modified` header is now sent as RFC-1123 ASCII.
+
+# 5.2.0
+* Fixes issue publishing templates with complex settings
+* Improves html sanitation in template publishing workflow
+
 # 5.1.0
 * Revoke SDK token on logout
   this improves on the previous behaviour where logging out would only purge tokens locally.

package/bin/flourish.js

@@ -11,7 +11,7 @@ const OPTS = {
 		"help", "build", "open", "debug", "full", "force",
 
 		// Options for 'publish'
-		"prerelease", "patch", "release", "local-testing"
+		"prerelease", "patch", "release", "local-testing",
 	],
 	string: [
 		"host", "listen", "port", "user", "password",
@@ -35,7 +35,7 @@ const OPTS = {
 		build: true,
 		open: false,
 
-		env: "development"
+		env: "development",
 	},
 
 	alias: {
@@ -48,7 +48,7 @@ const OPTS = {
 		if (unknown_option.startsWith("-")) {
 			log.die("Unknown option: " + unknown_option);
 		}
-	}
+	},
 };
 
 // Unhandled rejections indicate an error in the app
@@ -73,7 +73,7 @@ const COMMANDS = [
 	"delete",
 	"upgrade",
 	"list",
-	"history"
+	"history",
 ];
 
 function main() {
@@ -88,8 +88,8 @@ function main() {
 	args._ = args._.map(String);
 
 	let [command] = args._;
-	if (args.version) command = "version";
-	else if (args.help) command = "help";
+	if (args.version) { command = "version"; }
+	else if (args.help) { command = "help"; }
 
 	if (!command) {
 		return log.die("No command specified. Type ‘flourish help’ for help.");

package/common/embed/credit.js

@@ -35,12 +35,13 @@ function getLocalizedCreditTextAndUrl(lang, credit_key) {
     lang = lang || "en", credit_key = credit_key || "";
     credit_text = localizations_1.default[lang].credits[credit_key] || localizations_1.default.en.credits[credit_key] || localizations_1.default.en.credits.default;
     if (typeof credit_text == "object") {
-        if (credit_text.url)
+        if (credit_text.url) {
             credit_url = credit_text.url;
+        }
         credit_text = credit_text.text;
     }
     return {
         credit_text: credit_text,
-        credit_url: credit_url
+        credit_url: credit_url,
     };
 }

package/common/embed/customer_analytics.js

@@ -32,17 +32,20 @@ function getLocationData() {
     return data;
 }
 function sendCustomerAnalyticsMessage(message) {
-    if (!enabled)
+    if (!enabled) {
         return;
-    if (window.top === window.self)
+    }
+    if (window.top === window.self) {
         return;
+    }
     var embedded_window = window;
-    if (embedded_window.location.pathname === "srcdoc")
+    if (embedded_window.location.pathname === "srcdoc") {
         embedded_window = embedded_window.parent;
+    }
     var location_data = getLocationData();
     var message_with_metadata = {
         sender: "Flourish",
-        method: "customerAnalytics"
+        method: "customerAnalytics",
     };
     for (var key in location_data) {
         if (location_data.hasOwnProperty(key)) {
@@ -73,8 +76,9 @@ function removeAnalyticsListener(callback) {
 function dispatchAnalyticsEvent(message) {
     // If the window.Flourish object hasn't been created by the customer, they
     // can't be listening for analytics events
-    if (!window.Flourish)
+    if (!window.Flourish) {
         return;
+    }
     window.Flourish._analytics_listeners.forEach(function (listener) {
         listener(message);
     });
@@ -85,28 +89,28 @@ function initCustomerAnalytics() {
         {
             event_name: "click",
             action_name: "click",
-            use_capture: true
+            use_capture: true,
         },
         {
             event_name: "keydown",
             action_name: "key_down",
-            use_capture: true
+            use_capture: true,
         },
         {
             event_name: "mouseenter",
             action_name: "mouse_enter",
-            use_capture: false
+            use_capture: false,
         },
         {
             event_name: "mouseleave",
             action_name: "mouse_leave",
-            use_capture: false
-        }
+            use_capture: false,
+        },
     ];
     events.forEach(function (event) {
         document.body.addEventListener(event.event_name, function () {
             sendCustomerAnalyticsMessage({
-                action: event.action_name
+                action: event.action_name,
             });
         }, event.use_capture);
     });

package/common/embed/embedding.d.ts

@@ -18,7 +18,7 @@ declare function getHeightForBreakpoint(width: any): 650 | 575 | 400;
 declare function startEventListeners(callback: any, allowed_methods: any, embed_domain: any): void;
 declare function notifyParentWindow(height: any, opts: any): void;
 declare function initScrolly(opts: any): void;
-declare function createScrolly(iframe: any, captions: any): void;
+declare function createScrolly(iframe: any, captions: any, hasScrollyTransformFix: any): void;
 declare function isSafari(): boolean;
 import { initCustomerAnalytics } from "./customer_analytics";
 import { addAnalyticsListener } from "./customer_analytics";

package/common/embed/embedding.js

@@ -14,42 +14,52 @@ function isFixedHeight() {
         var params = (0, parse_query_params_1.default)();
         // "referrer" in params implies this is an Embedly embed
         // Check whether embedding site is known to support dynamic resizing
-        if ("referrer" in params)
+        if ("referrer" in params) {
             is_fixed_height = /^https:\/\/medium.com\//.test(params.referrer);
-        else
+        }
+        else {
             is_fixed_height = !("auto" in params);
+        }
     }
     return is_fixed_height;
 }
 function getHeightForBreakpoint(width) {
     var breakpoint_width = width || window.innerWidth;
-    if (breakpoint_width > 999)
+    if (breakpoint_width > 999) {
         return 650;
-    if (breakpoint_width > 599)
+    }
+    if (breakpoint_width > 599) {
         return 575;
+    }
     return 400;
 }
 function initScrolly(opts) {
-    if (!opts)
+    if (!opts) {
         return;
-    if (window.top === window.self)
+    }
+    if (window.top === window.self) {
         return;
+    }
     var embedded_window = window;
-    if (embedded_window.location.pathname == "srcdoc")
+    if (embedded_window.location.pathname == "srcdoc") {
         embedded_window = embedded_window.parent;
+    }
     var message = {
         sender: "Flourish",
         method: "scrolly",
-        captions: opts.captions
+        captions: opts.captions,
+        hasScrollyTransformFix: opts.hasScrollyTransformFix,
     };
     embedded_window.parent.postMessage(JSON.stringify(message), "*");
 }
 function notifyParentWindow(height, opts) {
-    if (window.top === window.self)
+    if (window.top === window.self) {
         return;
+    }
     var embedded_window = window;
-    if (embedded_window.location.pathname == "srcdoc")
+    if (embedded_window.location.pathname == "srcdoc") {
         embedded_window = embedded_window.parent;
+    }
     if (is_amp) {
         // Message is not stringified for AMP
         height = parseInt(height, 10);
@@ -68,8 +78,9 @@ function notifyParentWindow(height, opts) {
         src: embedded_window.location.toString(),
     };
     if (opts) {
-        for (var name in opts)
+        for (var name in opts) {
             message[name] = opts[name];
+        }
     }
     embedded_window.parent.postMessage(JSON.stringify(message), "*");
 }
@@ -100,10 +111,12 @@ function validateWarnMessage(message) {
         console.warn("BUG: validateWarnMessage called for method" + message.method);
         return false;
     }
-    if ((message.message != null) && !isString(message.message))
+    if ((message.message != null) && !isString(message.message)) {
         return false;
-    if ((message.explanation != null) && !isString(message.explanation))
+    }
+    if ((message.explanation != null) && !isString(message.explanation)) {
         return false;
+    }
     return true;
 }
 function validateResizeMessage(message) {
@@ -111,12 +124,15 @@ function validateResizeMessage(message) {
         console.warn("BUG: validateResizeMessage called for method" + message.method);
         return false;
     }
-    if (!isString(message.src))
+    if (!isString(message.src)) {
         return false;
-    if (!isString(message.context))
+    }
+    if (!isString(message.context)) {
         return false;
-    if (!isPossibleHeight(message.height))
+    }
+    if (!isPossibleHeight(message.height)) {
         return false;
+    }
     return true;
 }
 function validateSetSettingMessage(_message) {
@@ -127,8 +143,9 @@ function validateScrolly(message) {
         console.warn("BUG: validateScrolly called for method" + message.method);
         return false;
     }
-    if (!Array.isArray(message.captions))
+    if (!Array.isArray(message.captions)) {
         return false;
+    }
     return true;
 }
 function validateCustomerAnalyticsMessage(message) {
@@ -148,10 +165,12 @@ function validateRequestUpload(message) {
     }
     // FIXME: when adding validation for setSetting (see above) we should
     // also validate that this is a valid setting name of appropriate type
-    if (!isString(message.name))
+    if (!isString(message.name)) {
         return false;
-    if (!(message.accept == null || isString(message.accept)))
+    }
+    if (!(message.accept == null || isString(message.accept))) {
         return false;
+    }
     return true;
 }
 function getMessageValidators(methods) {
@@ -161,7 +180,7 @@ function getMessageValidators(methods) {
         "setSetting": validateSetSettingMessage,
         "customerAnalytics": validateCustomerAnalyticsMessage,
         "request-upload": validateRequestUpload,
-        "scrolly": validateScrolly
+        "scrolly": validateScrolly,
     };
     var validators = {};
     for (var i = 0; i < methods.length; i++) {
@@ -187,11 +206,13 @@ function startEventListeners(callback, allowed_methods, embed_domain) {
                 const origin = event.origin.toLowerCase();
                 embed_domain = embed_domain.toLowerCase();
                 // Allow the domain itself…
-                if (origin.endsWith("//" + embed_domain))
+                if (origin.endsWith("//" + embed_domain)) {
                     return true;
+                }
                 // and subdomains
-                if (origin.endsWith("." + embed_domain))
+                if (origin.endsWith("." + embed_domain)) {
                     return true;
+                }
             }
             if (event.origin.match(/\/\/localhost:\d+$|\/\/(?:public|app)\.flourish.devlocal$|\/\/flourish-api\.com$|\.flourish\.(?:local(:\d+)?|net|rocks|studio)$|\.uri\.sh$|\/\/flourish-user-templates\.com$/)) {
                 return true;
@@ -200,10 +221,12 @@ function startEventListeners(callback, allowed_methods, embed_domain) {
         })();
         // event.source is null when the message is sent by an extension
         // https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Using_window.postMessage_in_extensions
-        if (event.source == null)
+        if (event.source == null) {
             return;
-        if (!is_accepted_event_origin)
+        }
+        if (!is_accepted_event_origin) {
             return;
+        }
         var message;
         try {
             message = typeof event.data === "object" ? event.data : JSON.parse(event.data);
@@ -212,8 +235,9 @@ function startEventListeners(callback, allowed_methods, embed_domain) {
             console.warn("Unexpected non-JSON message: " + JSON.stringify(event.data));
             return;
         }
-        if (message.sender !== "Flourish")
+        if (message.sender !== "Flourish") {
             return;
+        }
         if (!message.method) {
             console.warn("The 'method' property was missing from message", message);
             return;
@@ -245,19 +269,21 @@ function onSafariWindowResize() {
     var containers = document.querySelectorAll(".flourish-embed");
     for (var i = 0; i < containers.length; i++) {
         var container = containers[i];
-        if (container.getAttribute("data-width"))
+        if (container.getAttribute("data-width")) {
             continue;
+        }
         var iframe = container.querySelector("iframe");
         // When embeds are dynamically loaded, we might have a container without a
         // loaded iframe yet
-        if (!iframe)
+        if (!iframe) {
             continue;
+        }
         var computed_style = window.getComputedStyle(container);
         var width = container.offsetWidth - parseFloat(computed_style.paddingLeft) - parseFloat(computed_style.paddingRight);
         iframe.style.width = width + "px";
     }
 }
-function createScrolly(iframe, captions) {
+function createScrolly(iframe, captions, hasScrollyTransformFix) {
     var parent = iframe.parentNode;
     // Fallback to avoid any situation where the scrolly gets initialised twice
     if (parent.classList.contains("fl-scrolly-wrapper")) {
@@ -268,6 +294,27 @@ function createScrolly(iframe, captions) {
     parent.style.position = "relative";
     parent.style.paddingBottom = "1px";
     parent.style.transform = "translate3d(0, 0, 0)"; // Workaround for Safari https://stackoverflow.com/questions/50224855/not-respecting-z-index-on-safari-with-position-sticky
+    // On Windows + Chromium, there is a bug where dropdowns open in the wrong
+    // place in scrollies that is related to the sticky position of the iframe.
+    // This workaround retriggers the transform to fix the dropdown positioning
+    // (specifically, the transform is toggled between 0 and 1).
+    // More context here: https://canvadev.atlassian.net/browse/FLOURISH-2379
+    const is_windows = navigator.platform.indexOf("Win") > -1;
+    const is_chromium = !!window.chrome &&
+        (navigator.userAgent.indexOf("Chrome") > -1 ||
+            navigator.userAgent.indexOf("Edg") > -1 ||
+            navigator.userAgent.indexOf("OPR") > -1);
+    if (is_windows && is_chromium && hasScrollyTransformFix) {
+        let scroll_timeout;
+        let transform = 0;
+        window.addEventListener("scroll", function () {
+            clearTimeout(scroll_timeout);
+            scroll_timeout = setTimeout(() => {
+                transform = transform === 0 ? 1 : 0;
+                parent.style.transform = `translateZ(${transform}px)`;
+            }, 100);
+        });
+    }
     iframe.style.position = "sticky";
     var h = parent.getAttribute("data-height") || null;
     if (!h) { // Scrollies require fixed height to work well, so if not height set …
@@ -295,6 +342,7 @@ function createScrolly(iframe, captions) {
         step.style.marginLeft = "auto";
         step.style.marginRight = "auto";
         var caption = document.createElement("div");
+        // eslint-disable-next-line flourish-security/dompurify
         caption.innerHTML = dompurify_1.default.sanitize(d, { ADD_ATTR: ["target"] });
         caption.style.visibility = has_content ? "" : "hidden";
         caption.style.display = "inline-block";
@@ -320,8 +368,9 @@ function initIntersection(container) {
         entries.forEach(function (entry) {
             if (entry.isIntersecting) {
                 var iframe = container.querySelector("iframe");
-                if (iframe)
+                if (iframe) {
                     iframe.src = iframe.src.replace(/#slide-.*/, "") + "#slide-" + entry.target.getAttribute("data-slide");
+                }
             }
         });
     }, { rootMargin: "0px 0px -" + t + " 0px" });
@@ -361,7 +410,7 @@ function createEmbedIframe(embed_url, container, width, height, play_on_load) {
             iframe: iframe,
             width: width,
             height: height,
-            play_on_load: play_on_load
+            play_on_load: play_on_load,
         };
         // If this is the first embed on the page which is isn't displayed, set up a
         // list of hidden iframes to poll
@@ -411,22 +460,28 @@ function setIframeContent(embed_url, container, iframe, width, height, play_on_l
     else if (width && width.match(/^[ \t\r\n\f]*([+-]?\d+|\d*\.\d+(?:[eE][+-]?\d+)?)(?:\\?[Pp]|\\0{0,4}[57]0(?:\r\n|[ \t\r\n\f])?)(?:\\?[Xx]|\\0{0,4}[57]8(?:\r\n|[ \t\r\n\f])?)[ \t\r\n\f]*$/)) {
         width_in_px = parseFloat(width);
     }
-    if (height && typeof height === "number")
+    if (height && typeof height === "number") {
         height = "" + height + "px";
+    }
     // Odd design decision in Safari means need to set fixed width rather than %
     // as will try and size iframe to content otherwise. Must also set scrolling=no
-    if (width)
+    if (width) {
         iframe.style.width = width;
-    else if (isSafari())
+    }
+    else if (isSafari()) {
         iframe.style.width = container.offsetWidth + "px";
-    else
+    }
+    else {
         iframe.style.width = "100%";
+    }
     var fixed_height = !!height;
     if (!fixed_height) {
-        if (embed_url.match(/\?/))
+        if (embed_url.match(/\?/)) {
             embed_url += "&auto=1";
-        else
+        }
+        else {
             embed_url += "?auto=1";
+        }
         // For initial height, use our standard breakpoints, based on the explicit
         // pixel width if we know it, or the iframe's measured width if not.
         height = getHeightForBreakpoint(width_in_px || iframe.offsetWidth) + "px";
@@ -453,7 +508,7 @@ function initEmbedding() {
         isSafari: isSafari,
         initCustomerAnalytics: customer_analytics_1.initCustomerAnalytics,
         addAnalyticsListener: customer_analytics_1.addAnalyticsListener,
-        sendCustomerAnalyticsMessage: customer_analytics_1.sendCustomerAnalyticsMessage
+        sendCustomerAnalyticsMessage: customer_analytics_1.sendCustomerAnalyticsMessage,
     };
 }
 exports.default = initEmbedding;

package/common/embed/localizations.js

@@ -45,7 +45,7 @@ exports.default = {
             "text-annotator": { text: "Interactive content by Flourish", url: "https://flourish.studio/blog/text-annotator-template/" },
             "tournament": { text: "Interactive content by Flourish", url: "https://flourish.studio/visualisations/tournament-chart/" },
             "word-cloud": { text: "A Flourish data visualization", url: "https://flourish.studio/blog/online-wordcloud-custom-fonts/" },
-        }
+        },
     },
     "es": {
         credits: {
@@ -66,7 +66,7 @@ exports.default = {
             "default": "Creato con Flourish",
             "bar_race": { text: "Creato con Flourish", url: "https://flourish.studio/visualisations/bar-chart-race/" },
             "bar-chart-race": { text: "Creato con Flourish", url: "https://flourish.studio/visualisations/bar-chart-race/" },
-        }
+        },
     },
     "mi": {
         credits: {
@@ -85,6 +85,6 @@ exports.default = {
     "pt": {
         "default": "Feito com Flourish",
         "bar_race": { text: "Feito com Flourish", url: "https://flourish.studio/visualisations/bar-chart-race/" },
-        "bar-chart-race": { text: "Feito com Flourish", url: "https://flourish.studio/visualisations/bar-chart-race/" }
-    }
+        "bar-chart-race": { text: "Feito com Flourish", url: "https://flourish.studio/visualisations/bar-chart-race/" },
+    },
 };

package/common/embed/parse_query_params.js

@@ -6,8 +6,9 @@ function parseQueryParams() {
     var location = window.location;
     // We use srcdoc to load the decrypted content for password-protected projects,
     // which creates a nested window.
-    if (location.href == "about:srcdoc")
+    if (location.href == "about:srcdoc") {
         location = window.parent.location;
+    }
     var params = {};
     (function (query, re, match) {
         while (match = re.exec(query)) {

package/common/package.json

@@ -2,16 +2,22 @@
     "name": "@flourish/common",
     "description": "Common shared utilities",
     "scripts": {
-        "test": "jest"
+        "test": "jest",
+        "test:ci": "jest --config jest.config.ci.mjs"
     },
     "dependencies": {
         "@adobe/css-tools": "^4.3.3",
-        "@flourish/interpreter": "^8.5.0",
-        "dompurify": "^3.1.4"
+        "@flourish/interpreter": "^9.1.1",
+        "dompurify": "^3.2.4"
     },
     "devDependencies": {
         "@types/jest": "^29.5.12",
         "jest": "^29.7.0",
+        "jest-junit": "^16.0.0",
         "ts-jest": "^29.1.5"
+    },
+    "engines": {
+        "node": "20.19.x",
+        "npm": "10.8.2"
     }
 }