@rocketsearch/vue-uappi 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,30 @@
-# Temporary Holding Version
+# @rocketsearch/vue-uappi
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Rocket Search (busca, autocomplete, vitrines, banners e analytics) para lojas Uappi em **Vue 3 + Vite + Pinia**.
+Para lojas Uappi em Nuxt 2, use `@rocketsearch/nuxt-uappi`.
+
+```bash
+npm install @rocketsearch/vue-uappi
+```
+
+```js
+// src/main.js — depois do app.use(pinia) e do app.use(router)
+import RocketSearch from '@rocketsearch/vue-uappi';
+
+app.use(RocketSearch, {
+  storeId: 'minha-loja',
+  apiKey: 'pk_live_xxx',
+  uappiUrl: import.meta.env.VITE_REQUEST_URL,
+  uappiDomain: 'www.minhaloja.com.br'
+});
+```
+
+```js
+// vite.config.js — o pacote publica os .vue sem compilar
+optimizeDeps: { exclude: ['@rocketsearch/vue-uappi'] }
+```
+
+Use os componentes em PascalCase (`<RocketSearch>`, `<RocketShowcase position="top">`): o tema pode ter
+`isCustomElement` para tags com hífen.
+
+Documentação completa: https://api.rocketsearch.com.br/sdk/uappi/docs.html

package/index.js

@@ -0,0 +1,189 @@
+/**
+ * Plugin Vue 3 do Rocket Search para lojas Uappi (wap.store) em Vue 3 + Vite + Pinia.
+ *
+ * Port do @rocketsearch/nuxt-uappi (Nuxt 2). O que lá vinha do Vuex e do $axios aqui
+ * vem do Pinia do tema:
+ *   general.currentPageData -> contexto da página (setDadosPageAtual na versão Nuxt)
+ *   user.user               -> login
+ *   cart.add()              -> add_to_cart
+ *
+ * main.js (depois do Pinia e do router):
+ *   app.use(RocketSearch, {
+ *     storeId: 'minha-loja',
+ *     apiKey: 'pk_live_xxx',
+ *     uappiUrl: import.meta.env.VITE_REQUEST_URL,
+ *     uappiDomain: 'www.minhaloja.com.br'
+ *   });
+ */
+import { defineAsyncComponent, inject, shallowRef, watch } from 'vue';
+import { createRocket, sectionFromNivel } from './runtime/rocket.js';
+import { fetchUappiProducts } from './runtime/uappi.js';
+
+export {
+  rocketSearchListing,
+  rocketCategoryListing,
+  rocketCollectionListing,
+  dispatchListingSearch,
+  dispatchListingClick,
+  dispatchDidYouMeanClick,
+  didYouMeanQuery,
+  productIndexFromClick
+} from './runtime/listing.js';
+
+const ROCKET_KEY = Symbol('rocket');
+const TAG = '[RocketSearch]';
+
+const DEFAULTS = {
+  storeId: '',
+  apiKey: '',
+  apiUrl: 'https://api.rocketsearch.com.br/api/v2',
+  // Origem da loja para a Front API (o VITE_REQUEST_URL do tema). Vazio = a própria página.
+  uappiUrl: '',
+  // Trava contra config colada no repo errado: se não bater com o host de uappiUrl, o
+  // plugin não sobe (sem isso, a loja B serviria o catálogo da loja A em silêncio).
+  uappiDomain: '',
+  searchPagePath: '/busca',
+  searchPageParam: 'busca',
+  debug: false
+};
+
+function hostOf (url) {
+  try {
+    return new URL(url).hostname.toLowerCase();
+  }
+  catch (e) {
+    return '';
+  }
+}
+
+// Traduz o `currentPageData` do tema (resposta da Front API da Uappi) para o contexto da
+// página. Página estática do tema (404, landing) não tem `nivel`: fica com o fallback.
+function pageFromState (dados) {
+  const nivel = dados && dados.estrutura && dados.estrutura.nivel;
+  const section = sectionFromNivel(nivel);
+  if (!section) return null;
+  const conteudo = (dados && dados.conteudo) || {};
+  return {
+    section,
+    productId: section === 'pdp' && conteudo.id != null ? String(conteudo.id) : null,
+    // A Front API manda a categoria em `conteudo.categoria` (`conteudo.id` vem null na listagem).
+    categoryId: section === 'category' && conteudo.categoria && conteudo.categoria.id != null ? String(conteudo.categoria.id) : null,
+    product: section === 'pdp' ? conteudo : null
+  };
+}
+
+// null quando o plugin não subiu (sem storeId, trava de domínio). Padrão explícito: sem ele o
+// Vue avisa no console a cada componente que chama, com a Rocket desligada.
+export function useRocket () {
+  return inject(ROCKET_KEY, null);
+}
+
+export default {
+  install (app, options) {
+    const config = Object.assign({}, DEFAULTS, options);
+
+    if (!config.storeId || !config.apiKey) {
+      console.error(TAG, 'storeId e apiKey são obrigatórios — plugin desativado.');
+      return;
+    }
+
+    config.uappiUrl = String(config.uappiUrl || window.location.origin).replace(/\/$/, '');
+    const uappiHost = hostOf(config.uappiUrl);
+    if (config.uappiDomain && uappiHost !== config.uappiDomain.toLowerCase()) {
+      console.error(TAG, `uappiDomain "${config.uappiDomain}" não bate com uappiUrl "${uappiHost}" — plugin desativado.`);
+      return;
+    }
+    config.apiUrl = String(config.apiUrl).replace(/\/$/, '');
+
+    const rocket = createRocket(config);
+    rocket.fetchProducts = ids => fetchUappiProducts(config.uappiUrl, ids);
+    // Reativo: vitrines e banners esperam o contexto da página para buscar.
+    rocket.currentPage = shallowRef(rocket.getPage());
+
+    app.config.globalProperties.$rocket = rocket;
+    app.provide(ROCKET_KEY, rocket);
+    // PascalCase de propósito: tema Uappi Vue costuma ter isCustomElement para tag com hífen.
+    // Async: JS e CSS de cada componente só baixam se o tema usar (quem só troca a fonte
+    // de dados da listagem não carrega nada).
+    app.component('RocketAutocomplete', defineAsyncComponent(() => import('./runtime/components/RocketAutocomplete.vue')));
+    app.component('RocketBanner', defineAsyncComponent(() => import('./runtime/components/RocketBanner.vue')));
+    app.component('RocketSearch', defineAsyncComponent(() => import('./runtime/components/RocketSearch.vue')));
+    app.component('RocketShowcase', defineAsyncComponent(() => import('./runtime/components/RocketShowcase.vue')));
+
+    // Conexão fria + preflight CORS era o grosso da latência do storefront, não a busca.
+    const preconnect = document.createElement('link');
+    preconnect.rel = 'preconnect';
+    preconnect.href = new URL(config.apiUrl).origin;
+    preconnect.crossOrigin = '';
+    document.head.appendChild(preconnect);
+
+    rocket.initDebugFromUrl();
+    rocket.flushPendingCartEvents();
+
+    let pageResolved = false;
+
+    function applyPage (dados) {
+      const page = pageFromState(dados);
+      if (!page) return;
+      pageResolved = true;
+      rocket.setPage(page);
+      rocket.currentPage.value = rocket.getPage();
+      rocket.fireProductView();
+      rocket.firePageViewIfSectionChanged();
+    }
+
+    // Página que não publica dados (rota estática sem Front API) ainda precisa de
+    // page_view — sem isso a jornada ficaria presa na seção anterior.
+    function pageViewFallback () {
+      setTimeout(() => {
+        if (!pageResolved) rocket.firePageViewIfSectionChanged();
+      }, 1500);
+    }
+
+    const pinia = app.config.globalProperties.$pinia;
+    if (pinia) {
+      // pinia.state é reativo e ganha a chave da store quando ela é criada: o watch pega
+      // tanto a primeira página quanto a navegação SPA.
+      watch(() => pinia.state.value.general && pinia.state.value.general.currentPageData, applyPage, { immediate: true });
+      // Retorno de checkout/user (`{ id, logado }`); o tema troca no login e na troca de perfil.
+      watch(() => pinia.state.value.user && pinia.state.value.user.user, (user) => {
+        rocket.trackLogin(user).catch(() => {});
+      }, { immediate: true });
+
+      // Action e não o POST: item já no carrinho vira PUT com a quantidade somada, e o
+      // payload da action traz só o que foi adicionado. after = só add que deu certo.
+      const trackCart = (store) => {
+        store.$onAction(({ name, args, after }) => {
+          if (name === 'add') after(() => rocket.trackAddToCart(args[0]));
+        });
+      };
+      pinia.use(({ store }) => {
+        if (store.$id === 'cart') trackCart(store);
+      });
+      // pinia.use só alcança store criada depois dele.
+      if (pinia._s && pinia._s.has('cart')) trackCart(pinia._s.get('cart'));
+    }
+    else {
+      console.warn(TAG, 'Pinia não encontrado — instale o plugin depois do app.use(pinia). Sem contexto de página, login e add_to_cart.');
+    }
+
+    const router = app.config.globalProperties.$router;
+    if (router) {
+      router.beforeEach((to, from) => {
+        if (to.path !== from.path) {
+          pageResolved = false;
+          rocket.setPage({});
+          rocket.currentPage.value = rocket.getPage();
+        }
+      });
+      router.afterEach((to, from, failure) => {
+        // from sem matched = navegação inicial (START_LOCATION), que também conta.
+        if (failure || (to.path === from.path && from.matched.length)) return;
+        pageViewFallback();
+      });
+    }
+    else {
+      pageViewFallback();
+    }
+  }
+};

package/package.json

@@ -1,6 +1,25 @@
 {
   "name": "@rocketsearch/vue-uappi",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Rocket Search para storefronts Uappi em Vue 3 + Vite + Pinia: busca, autocomplete, vitrines, banners e eventos",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "runtime",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "vue-router": "^4.0.0",
+    "pinia": "^2.0.0 || ^3.0.0"
+  },
+  "license": "UNLICENSED",
+  "homepage": "https://api.rocketsearch.com.br/sdk/uappi/docs.html",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/runtime/banner.js

@@ -0,0 +1,171 @@
+/**
+ * Banners — port das partes puras de linxecommerce/2.0.0/src/js/rs-banner.js
+ * (URL de resize, proporção, estilos, contrato dos eventos). DOM/observer ficam
+ * no RocketBannerItem.vue.
+ *
+ * Contrato (alinhado às vitrines, incrementa showcases.metrics):
+ *   view  + meta.type = 'showcase_impression' + showcaseId
+ *   click + meta.type = 'banner_click' + showcaseId (sem productId)
+ */
+
+// Larguras do srcset — o BE guarda 1 master (até 3840px) e o CF gera as variantes.
+export const SRCSET_WIDTHS = [360, 480, 768, 1024, 1366, 1600, 1920, 2560];
+export const VIEW_MILESTONES = [0.25, 0.5, 0.75];
+export const MOBILE_MEDIA = '(max-width: 768px)';
+// Sem proporção conhecida, reserva 3:1 (hero típico) para não haver CLS.
+const DEFAULT_ASPECT_RATIO = '3 / 1';
+// Cada largura distinta é uma variante nova no cache da CF: arredonda num passo.
+const WIDTH_STEP = 100;
+const MAX_EXACT_WIDTH = 3840;
+// ROC-690: entrega sem perda: format=webp + quality=100 = WebP lossless na CF (com format=auto
+// o navegador com AVIF recebe AVIF, que é sempre com perda). Mesmo valor em linxecommerce/2.0.0/src/js/rs-banner.js.
+const CDN_RESIZE_OPTS = ',format=webp,quality=100,fit=scale-down';
+
+export function clamp01 (n) {
+  if (typeof n !== 'number' || isNaN(n)) return undefined;
+  if (n < 0) return 0;
+  if (n > 1) return 1;
+  return Math.round(n * 10000) / 10000;
+}
+
+export function highestMilestone (ratio) {
+  let best = 0;
+  VIEW_MILESTONES.forEach((m) => {
+    if (ratio >= m) best = m;
+  });
+  return best;
+}
+
+/**
+ * Cloudflare Image Resizing na origem da própria imagem (o /cdn-cgi/image/ só existe
+ * na zona que a serve). ⚠️ Sem o recurso na zona, responde 404 e o banner some —
+ * por isso dá para desligar (prop imageResizing=false).
+ */
+export function cdnResize (url, width, enabled) {
+  if (!url || enabled === false) return url;
+  if (/\/cdn-cgi\/image\//.test(url) || /^data:/i.test(url)) return url;
+  try {
+    const abs = new URL(url);
+    if (abs.protocol !== 'https:' && abs.protocol !== 'http:') return url;
+    return abs.origin + '/cdn-cgi/image/width=' + width + CDN_RESIZE_OPTS + abs.pathname + abs.search;
+  }
+  catch (e) {
+    return url;
+  }
+}
+
+export function buildSrcset (url, enabled) {
+  if (!url || enabled === false) return '';
+  return SRCSET_WIDTHS.map(w => cdnResize(url, w, enabled) + ' ' + w + 'w').join(', ');
+}
+
+// Largura a pedir à CF: slot × DPR (teto 2), arredondada para cima no passo.
+export function exactWidth (cssWidth, dpr) {
+  if (!cssWidth) return 0;
+  const ratio = Math.min(Math.max(dpr || 1, 1), 2);
+  return Math.min(Math.ceil((cssWidth * ratio) / WIDTH_STEP) * WIDTH_STEP, MAX_EXACT_WIDTH);
+}
+
+// Aceita "16/9", "16:9" ou número. Sem valor, o placeholder anti-CLS.
+export function resolveAspectRatio (styles, fallback) {
+  const raw = styles && (styles.aspectRatio || styles.aspect_ratio);
+  if (raw == null || raw === '') return fallback || DEFAULT_ASPECT_RATIO;
+  return String(raw).trim().replace(':', ' / ') || fallback || DEFAULT_ASPECT_RATIO;
+}
+
+export function hasExplicitAspectRatio (styles, fallback) {
+  const raw = styles && (styles.aspectRatio || styles.aspect_ratio);
+  return (raw != null && raw !== '') || !!fallback;
+}
+
+// Só deixa passar chave CSS conhecida — o JSON de styles vem do dashboard.
+const ALLOWED_STYLE_KEYS = {
+  backgroundColor: 'backgroundColor',
+  textColor: 'color',
+  borderRadius: 'borderRadius',
+  objectFit: 'objectFit',
+  objectPosition: 'objectPosition',
+  minHeight: 'minHeight',
+  maxWidth: 'maxWidth',
+  padding: 'padding',
+  margin: 'margin'
+};
+
+export function pickStyles (styles, keys) {
+  const out = {};
+  if (!styles) return out;
+  keys.forEach((key) => {
+    const value = styles[key];
+    if (ALLOWED_STYLE_KEYS[key] && value != null && value !== '') out[ALLOWED_STYLE_KEYS[key]] = String(value);
+  });
+  return out;
+}
+
+export function isHeroSlot (position) {
+  return /^(hero|fullbanner|header|top)$/i.test(String(position || ''));
+}
+
+/** True para banner autônomo vindo de /showcases/context (type='banner', ou sem produtos + imagem). */
+export function isBannerItem (item) {
+  if (!item) return false;
+  if (item.type === 'banner') return true;
+  const hasProducts = Array.isArray(item.products) && item.products.length > 0;
+  const content = item.banner || {};
+  return !hasProducts && !!(content.imageUrl || content.mobileImageUrl);
+}
+
+/**
+ * Quem medir (contrato ROC-26):
+ * - autônomo → o próprio id (já é o showcaseId do banner);
+ * - embutido em vitrine → showcaseId da VITRINE + bannerId do criativo.
+ */
+export function bannerTracking (item, opts) {
+  const o = opts || {};
+  const embedded = item.type !== 'banner' && item.bannerId != null && item.bannerId !== '';
+  const ownId = item.bannerId != null && item.bannerId !== '' ? item.bannerId : item.id;
+  const tracking = {
+    id: embedded ? item.id : ownId,
+    slot: (item.placement && item.placement.position) || item.position || o.slot || '',
+    slideIndex: o.slideIndex
+  };
+  if (embedded) tracking.bannerId = item.bannerId;
+  if (item.experiment) {
+    tracking.experimentId = item.experiment.experimentId;
+    tracking.variantId = item.experiment.variantId;
+  }
+  return tracking;
+}
+
+function baseData (t, meta) {
+  const data = { vitrine: t.id, showcaseId: t.id, meta };
+  if (t.slot) meta.slot = String(t.slot);
+  if (t.imageVariant) meta.imageVariant = t.imageVariant;
+  if (t.bannerId != null) {
+    data.bannerId = t.bannerId;
+    meta.bannerId = t.bannerId;
+  }
+  if (t.slideIndex != null && t.slideIndex !== '') {
+    data.position = Number(t.slideIndex) || 0;
+    meta.slideIndex = data.position;
+  }
+  if (t.experimentId) data.experimentId = t.experimentId;
+  if (t.variantId) data.variantId = t.variantId;
+  return data;
+}
+
+export function bannerViewData (t, visibleRatio, milestone) {
+  const meta = { type: 'showcase_impression', source: 'showcase:' + t.id };
+  const vr = clamp01(visibleRatio);
+  if (vr) meta.visibleRatio = vr;
+  if (milestone > 0) meta.visibleThreshold = milestone;
+  return baseData(t, meta);
+}
+
+export function bannerClickData (t, clickX, clickY) {
+  const data = baseData(t, { source: 'showcase:' + t.id, type: 'banner_click' });
+  const cx = clamp01(clickX);
+  const cy = clamp01(clickY);
+  if (cx != null) data.clickX = data.meta.clickX = cx;
+  if (cy != null) data.clickY = data.meta.clickY = cy;
+  return data;
+}