@guidelytech/guide-runtime 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -36,9 +36,9 @@ __export(src_exports, {
   generateSelectors: () => generateSelectors,
   highlightSelectors: () => highlightSelectors,
   isAnchoredStep: () => isAnchoredStep,
-  isChecklistComplete: () => isChecklistComplete,
+  isChecklistComplete: () => import_runtime4.isChecklistComplete,
   isGuidelyElement: () => isGuidelyElement,
-  isQuestionVisible: () => isQuestionVisible,
+  isQuestionVisible: () => import_runtime5.isQuestionVisible,
   isStableId: () => isStableId,
   isVisible: () => isVisible,
   normalizeText: () => normalizeText,
@@ -165,6 +165,10 @@ function querySelectorStrategy(strategy, root) {
       const id = value.startsWith("#") ? value.slice(1) : value;
       return safeQueryAll(root, `#${escapeCss(id)}`);
     }
+    case "guidely-id": {
+      const id = value.startsWith("#") ? value.slice(1) : value;
+      return safeQueryAll(root, attrSelector("data-guidely-id", id));
+    }
     case "data-attr":
     case "aria":
     case "css":
@@ -226,7 +230,7 @@ function waitForTarget(target, options = {}) {
     const observeRoot = root.nodeType === 9 ? root.documentElement : root;
     if (typeof MutationObserver !== "undefined" && observeRoot) {
       observer = new MutationObserver(check);
-      observer.observe(observeRoot, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "id", "data-tour", "aria-label"] });
+      observer.observe(observeRoot, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "id", "data-tour", "data-guidely-id", "aria-label"] });
     }
     timer = setInterval(check, pollMs);
     if (timeoutMs > 0) {
@@ -240,7 +244,7 @@ function waitForTarget(target, options = {}) {
 var GENERATED_ID = /(\d{4,}|:r[0-9a-z]+:|^radix-|^headlessui-|^mui-|^ember\d|^react-|^\w*-\d+$|__|^[a-f0-9]{8,}$|^svelte-)/i;
 var GENERATED_CLASS = /(^css-|^sc-|^jss\d|^svelte-|^emotion-|^chakra-|^Mui|^_|[0-9a-f]{6,}|^\w{1,2}$|^[a-z]+-\d+$|[:[\]/])/;
 var PREFERRED_DATA_ATTRS = ["data-testid", "data-tour", "data-test", "data-test-id", "data-cy", "data-qa", "data-id", "data-name", "data-guidely"];
-var IGNORED_DATA_ATTRS = /^data-(state|v-|reactid|react|radix|headlessui|svelte|hydrated|orientation|highlighted|focus|key|index|rbd|dnd|rk-|sveltekit)/i;
+var IGNORED_DATA_ATTRS = /^data-(guidely-id|state|v-|reactid|react|radix|headlessui|svelte|hydrated|orientation|highlighted|focus|key|index|rbd|dnd|rk-|sveltekit)/i;
 function isStableId(id) {
   return !!id && /^[A-Za-z][\w-]*$/.test(id) && !GENERATED_ID.test(id);
 }
@@ -298,6 +302,8 @@ function generateSelectors(el2) {
     }
   };
   const tag = el2.tagName.toLowerCase();
+  const guidelyId = el2.getAttribute("data-guidely-id");
+  if (guidelyId && uniqueIn(doc, attrSelector("data-guidely-id", guidelyId), el2)) push({ kind: "guidely-id", value: guidelyId, label: `Guidely id ${guidelyId}` });
   if (isStableId(el2.id) && uniqueIn(doc, `#${escapeCss(el2.id)}`, el2)) push({ kind: "id", value: `#${el2.id}`, label: `id ${el2.id}` });
   const dataAttrs = Array.from(el2.attributes).filter((a) => a.name.startsWith("data-") && !IGNORED_DATA_ATTRS.test(a.name) && a.value && a.value.length <= 120 && !/\d{5,}/.test(a.value));
   dataAttrs.sort((a, b) => {
@@ -1489,10 +1495,7 @@ function runGuide(guide, options = {}) {
 }
 
 // src/checklist.ts
-function isChecklistComplete(config, progress) {
-  const done = new Set(progress.completedTaskIds);
-  return config.tasks.filter((t) => t.required).every((t) => done.has(t.id));
-}
+var import_runtime4 = require("@guidelytech/shared/runtime");
 function renderChecklist(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -1567,7 +1570,7 @@ function renderChecklist(options) {
     bar.setAttribute("aria-valuemax", "100");
     body.textContent = "";
     foot.textContent = "";
-    const complete = isChecklistComplete(config, progress);
+    const complete = (0, import_runtime4.isChecklistComplete)(config, progress);
     if (complete) {
       const wrap = doc.createElement("div");
       wrap.className = "g-complete";
@@ -1655,26 +1658,7 @@ function renderChecklist(options) {
 }
 
 // src/survey.ts
-function isQuestionVisible(q, answers) {
-  if (!q.showWhen) return true;
-  const actual = answers[q.showWhen.questionId];
-  if (actual === void 0) return false;
-  const expected = q.showWhen.value;
-  switch (q.showWhen.op) {
-    case "equals":
-      return Array.isArray(actual) ? actual.includes(String(expected)) : String(actual) === String(expected);
-    case "lte":
-      return Number(actual) <= Number(expected);
-    case "gte":
-      return Number(actual) >= Number(expected);
-    case "in": {
-      const list = Array.isArray(expected) ? expected : [String(expected)];
-      return Array.isArray(actual) ? actual.some((a) => list.includes(a)) : list.includes(String(actual));
-    }
-    default:
-      return false;
-  }
-}
+var import_runtime5 = require("@guidelytech/shared/runtime");
 function renderSurvey(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -1866,14 +1850,14 @@ function renderSurvey(options) {
     config.questions.forEach((q) => {
       const el2 = questionEls.get(q.id);
       if (!el2) return;
-      const visible = isQuestionVisible(q, answers);
+      const visible = (0, import_runtime5.isQuestionVisible)(q, answers);
       el2.hidden = !visible;
       if (!visible && answers[q.id] !== void 0) delete answers[q.id];
     });
   }
   form.addEventListener("submit", (e) => {
     e.preventDefault();
-    const missing = config.questions.filter((q) => q.required && isQuestionVisible(q, answers) && answers[q.id] === void 0);
+    const missing = config.questions.filter((q) => q.required && (0, import_runtime5.isQuestionVisible)(q, answers) && answers[q.id] === void 0);
     if (missing.length) {
       errorEl.textContent = `Please answer: ${missing.map((q) => q.title).join(", ")}`;
       questionEls.get(missing[0].id)?.querySelector("button,textarea")?.focus();
@@ -2349,7 +2333,7 @@ function previewStep(step, theme, options = {}) {
     name: "Preview",
     kind: "flow",
     version: 0,
-    config: { steps: [previewStepConfig], targeting: { id: "root", op: "and", rules: [] }, trigger: { type: "manual", delayMs: 0 }, frequency: { mode: "every_time", cooldownHours: 0, priority: 0, mutuallyExclusiveWith: [], reshowAfterDismiss: true }, appearance: options.appearance ?? { theme: "auto", animation: "fade" }, urlPatterns: [] }
+    config: { steps: [previewStepConfig], targeting: { id: "root", op: "and", rules: [] }, trigger: { type: "manual", delayMs: 0 }, frequency: { mode: "every_time", cooldownHours: 0, priority: 0, mutuallyExclusiveWith: [], reshowAfterDismiss: true }, appearance: options.appearance ?? { theme: "auto", animation: "fade" }, urlPatterns: [], platforms: ["web"] }
   };
   const controller = runGuide(guide, { theme, doc: options.doc, onEnd: () => options.onEnd?.(), onNavigate: () => {
   }, onAction: () => {