@vtex/ads-stories 0.0.0-bootstrap.0 → 0.1.0-test.040e2b9

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @vtex/ads-stories
+
+## 0.1.0
+
+### Minor Changes
+
+- First release of `@vtex/ads-stories`: the `<vtex-ads-story>` web component (placeholder), with ESM and CommonJS builds and type declarations.

package/README.md

@@ -1,3 +1,52 @@
 # @vtex/ads-stories
 
-Placeholder publish reserving the package name.
+VTEX Ads Stories web component. Framework-agnostic: works on any HTML5 page,
+including VTEX IO, FastStore and non-VTEX storefronts.
+
+> Work in progress. Currently renders a placeholder.
+
+## npm
+
+```bash
+npm install @vtex/ads-stories
+```
+
+Register the element once, on the client:
+
+```javascript
+import { defineVtexAdsStories } from "@vtex/ads-stories";
+
+defineVtexAdsStories();
+```
+
+```html
+<vtex-ads-story name="VTEX Ads"></vtex-ads-story>
+```
+
+Importing the package has no side effects: nothing is registered until
+`defineVtexAdsStories()` is called. It can be imported during server-side
+rendering, where `defineVtexAdsStories()` does nothing. Both ESM (`import`) and
+CommonJS (`require`) builds are published, with type declarations.
+
+## CDN
+
+WIP: To be defined
+
+## Customization
+
+```css
+vtex-ads-story {
+  --vtex-ads-story-font-family: "Inter", sans-serif;
+  --vtex-ads-story-color-text: #1f1f1f;
+}
+```
+
+## Development
+
+Run from the repository root:
+
+```bash
+pnpm stories:dev
+```
+
+This starts a dev server with `index.html`, reloading on save.

package/dist/cdn/vtex-ads-stories.js

@@ -0,0 +1,8 @@
+"use strict";var VtexAdsStories=(()=>{var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(r,t)=>{for(var e in t)a(r,e,{get:t[e],enumerable:!0})},u=(r,t,e,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of m(t))!h.call(r,s)&&s!==e&&a(r,s,{get:()=>t[s],enumerable:!(d=c(t,s))||d.enumerable});return r};var y=r=>u(a({},"__esModule",{value:!0}),r);var E={};f(E,{TAG_NAME:()=>n,VtexAdsStoryElement:()=>o,defineVtexAdsStories:()=>i});var n="vtex-ads-story",l,p=(l=globalThis.HTMLElement)!=null?l:Object,x=`
+  :host {
+    display: block;
+    font-family: var(--vtex-ads-story-font-family, inherit);
+    color: var(--vtex-ads-story-color-text, inherit);
+  }
+`,A="world",o=class extends p{static get observedAttributes(){return["name"]}get name(){var t,e;return(e=(t=this.getAttribute("name"))==null?void 0:t.trim())!=null?e:""}set name(t){this.setAttribute("name",t)}render(){var e;let t=(e=this.shadowRoot)==null?void 0:e.querySelector("[part='root']");t&&(t.textContent=`Hello ${this.name||A}!`)}connectedCallback(){if(!this.shadowRoot){let t=this.attachShadow({mode:"open"});t.innerHTML=`<style>${x}</style><div part="root"></div>`}this.upgradeProperty("name"),this.render()}upgradeProperty(t){if(!Object.prototype.hasOwnProperty.call(this,t))return;let e=this[t];Reflect.deleteProperty(this,t),this[t]=e}attributeChangedCallback(){this.render()}};function i(){typeof customElements!="undefined"&&(customElements.get(n)||customElements.define(n,o))}i();return y(E);})();
+//# sourceMappingURL=vtex-ads-stories.js.map

package/dist/cdn/vtex-ads-stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/cdn.ts","../../src/story/story.ts"],"sourcesContent":["import { defineVtexAdsStories } from \"./story\";\n\ndefineVtexAdsStories();\n\nexport { VtexAdsStoryElement, defineVtexAdsStories, TAG_NAME } from \"./story\";\n","export const TAG_NAME = \"vtex-ads-story\";\n\n// Keeps the module importable where HTMLElement doesn't exist (SSR, Node).\nconst BaseElement: typeof HTMLElement = globalThis.HTMLElement ?? Object;\n\nconst styles = `\n  :host {\n    display: block;\n    font-family: var(--vtex-ads-story-font-family, inherit);\n    color: var(--vtex-ads-story-color-text, inherit);\n  }\n`;\n\nconst DEFAULT_NAME = \"world\";\n\nexport class VtexAdsStoryElement extends BaseElement {\n  static get observedAttributes() {\n    return [\"name\"];\n  }\n\n  get name(): string {\n    return this.getAttribute(\"name\")?.trim() ?? \"\";\n  }\n\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n\n  private render() {\n    const container = this.shadowRoot?.querySelector(\"[part='root']\");\n    if (!container) return;\n\n    // textContent keeps the name as plain text (no HTML injection).\n    container.textContent = `Hello ${this.name || DEFAULT_NAME}!`;\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot) {\n      const root = this.attachShadow({ mode: \"open\" });\n      root.innerHTML = `<style>${styles}</style><div part=\"root\"></div>`;\n    }\n\n    this.upgradeProperty(\"name\");\n    this.render();\n  }\n\n  // A property set before the element is defined (e.g. while the CDN script\n  // loads) becomes an own property that shadows the class getter/setter.\n  // Remove it and set it again so it goes through the setter.\n  private upgradeProperty(prop: \"name\") {\n    if (!Object.prototype.hasOwnProperty.call(this, prop)) return;\n\n    const value = this[prop];\n    Reflect.deleteProperty(this, prop);\n    this[prop] = value;\n  }\n\n  attributeChangedCallback() {\n    this.render();\n  }\n}\n\nexport function defineVtexAdsStories() {\n  if (typeof customElements === \"undefined\") return;\n  if (customElements.get(TAG_NAME)) return;\n\n  customElements.define(TAG_NAME, VtexAdsStoryElement);\n}\n"],"mappings":"kcAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,EAAA,wBAAAC,EAAA,yBAAAC,ICAO,IAAMC,EAAW,iBAAxBC,EAGMC,GAAkCD,EAAA,WAAW,cAAX,KAAAA,EAA0B,OAE5DE,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQTC,EAAe,QAERC,EAAN,cAAkCH,CAAY,CACnD,WAAW,oBAAqB,CAC9B,MAAO,CAAC,MAAM,CAChB,CAEA,IAAI,MAAe,CApBrB,IAAAD,EAAAK,EAqBI,OAAOA,GAAAL,EAAA,KAAK,aAAa,MAAM,IAAxB,YAAAA,EAA2B,SAA3B,KAAAK,EAAqC,EAC9C,CAEA,IAAI,KAAKC,EAAe,CACtB,KAAK,aAAa,OAAQA,CAAK,CACjC,CAEQ,QAAS,CA5BnB,IAAAN,EA6BI,IAAMO,GAAYP,EAAA,KAAK,aAAL,YAAAA,EAAiB,cAAc,iBAC5CO,IAGLA,EAAU,YAAc,SAAS,KAAK,MAAQJ,CAAY,IAC5D,CAEA,mBAAoB,CAClB,GAAI,CAAC,KAAK,WAAY,CACpB,IAAMK,EAAO,KAAK,aAAa,CAAE,KAAM,MAAO,CAAC,EAC/CA,EAAK,UAAY,UAAUN,CAAM,iCACnC,CAEA,KAAK,gBAAgB,MAAM,EAC3B,KAAK,OAAO,CACd,CAKQ,gBAAgBO,EAAc,CACpC,GAAI,CAAC,OAAO,UAAU,eAAe,KAAK,KAAMA,CAAI,EAAG,OAEvD,IAAMH,EAAQ,KAAKG,CAAI,EACvB,QAAQ,eAAe,KAAMA,CAAI,EACjC,KAAKA,CAAI,EAAIH,CACf,CAEA,0BAA2B,CACzB,KAAK,OAAO,CACd,CACF,EAEO,SAASI,GAAuB,CACjC,OAAO,gBAAmB,cAC1B,eAAe,IAAIX,CAAQ,GAE/B,eAAe,OAAOA,EAAUK,CAAmB,EACrD,CDjEAO,EAAqB","names":["cdn_exports","__export","TAG_NAME","VtexAdsStoryElement","defineVtexAdsStories","TAG_NAME","_a","BaseElement","styles","DEFAULT_NAME","VtexAdsStoryElement","_b","value","container","root","prop","defineVtexAdsStories","defineVtexAdsStories"]}

package/dist/cjs/index.cjs

@@ -0,0 +1,90 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TAG_NAME: () => TAG_NAME,
+  VtexAdsStoryElement: () => VtexAdsStoryElement,
+  defineVtexAdsStories: () => defineVtexAdsStories
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/story/story.ts
+var TAG_NAME = "vtex-ads-story";
+var _a;
+var BaseElement = (_a = globalThis.HTMLElement) != null ? _a : Object;
+var styles = `
+  :host {
+    display: block;
+    font-family: var(--vtex-ads-story-font-family, inherit);
+    color: var(--vtex-ads-story-color-text, inherit);
+  }
+`;
+var DEFAULT_NAME = "world";
+var VtexAdsStoryElement = class extends BaseElement {
+  static get observedAttributes() {
+    return ["name"];
+  }
+  get name() {
+    var _a2, _b;
+    return (_b = (_a2 = this.getAttribute("name")) == null ? void 0 : _a2.trim()) != null ? _b : "";
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  render() {
+    var _a2;
+    const container = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("[part='root']");
+    if (!container) return;
+    container.textContent = `Hello ${this.name || DEFAULT_NAME}!`;
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = `<style>${styles}</style><div part="root"></div>`;
+    }
+    this.upgradeProperty("name");
+    this.render();
+  }
+  // A property set before the element is defined (e.g. while the CDN script
+  // loads) becomes an own property that shadows the class getter/setter.
+  // Remove it and set it again so it goes through the setter.
+  upgradeProperty(prop) {
+    if (!Object.prototype.hasOwnProperty.call(this, prop)) return;
+    const value = this[prop];
+    Reflect.deleteProperty(this, prop);
+    this[prop] = value;
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+};
+function defineVtexAdsStories() {
+  if (typeof customElements === "undefined") return;
+  if (customElements.get(TAG_NAME)) return;
+  customElements.define(TAG_NAME, VtexAdsStoryElement);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TAG_NAME,
+  VtexAdsStoryElement,
+  defineVtexAdsStories
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/story/story.ts"],"sourcesContent":["export { VtexAdsStoryElement, defineVtexAdsStories, TAG_NAME } from \"./story\";\n","export const TAG_NAME = \"vtex-ads-story\";\n\n// Keeps the module importable where HTMLElement doesn't exist (SSR, Node).\nconst BaseElement: typeof HTMLElement = globalThis.HTMLElement ?? Object;\n\nconst styles = `\n  :host {\n    display: block;\n    font-family: var(--vtex-ads-story-font-family, inherit);\n    color: var(--vtex-ads-story-color-text, inherit);\n  }\n`;\n\nconst DEFAULT_NAME = \"world\";\n\nexport class VtexAdsStoryElement extends BaseElement {\n  static get observedAttributes() {\n    return [\"name\"];\n  }\n\n  get name(): string {\n    return this.getAttribute(\"name\")?.trim() ?? \"\";\n  }\n\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n\n  private render() {\n    const container = this.shadowRoot?.querySelector(\"[part='root']\");\n    if (!container) return;\n\n    // textContent keeps the name as plain text (no HTML injection).\n    container.textContent = `Hello ${this.name || DEFAULT_NAME}!`;\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot) {\n      const root = this.attachShadow({ mode: \"open\" });\n      root.innerHTML = `<style>${styles}</style><div part=\"root\"></div>`;\n    }\n\n    this.upgradeProperty(\"name\");\n    this.render();\n  }\n\n  // A property set before the element is defined (e.g. while the CDN script\n  // loads) becomes an own property that shadows the class getter/setter.\n  // Remove it and set it again so it goes through the setter.\n  private upgradeProperty(prop: \"name\") {\n    if (!Object.prototype.hasOwnProperty.call(this, prop)) return;\n\n    const value = this[prop];\n    Reflect.deleteProperty(this, prop);\n    this[prop] = value;\n  }\n\n  attributeChangedCallback() {\n    this.render();\n  }\n}\n\nexport function defineVtexAdsStories() {\n  if (typeof customElements === \"undefined\") return;\n  if (customElements.get(TAG_NAME)) return;\n\n  customElements.define(TAG_NAME, VtexAdsStoryElement);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,WAAW;AAAxB;AAGA,IAAM,eAAkC,gBAAW,gBAAX,YAA0B;AAElE,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQf,IAAM,eAAe;AAEd,IAAM,sBAAN,cAAkC,YAAY;AAAA,EACnD,WAAW,qBAAqB;AAC9B,WAAO,CAAC,MAAM;AAAA,EAChB;AAAA,EAEA,IAAI,OAAe;AApBrB,QAAAA,KAAA;AAqBI,YAAO,MAAAA,MAAA,KAAK,aAAa,MAAM,MAAxB,gBAAAA,IAA2B,WAA3B,YAAqC;AAAA,EAC9C;AAAA,EAEA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEQ,SAAS;AA5BnB,QAAAA;AA6BI,UAAM,aAAYA,MAAA,KAAK,eAAL,gBAAAA,IAAiB,cAAc;AACjD,QAAI,CAAC,UAAW;AAGhB,cAAU,cAAc,SAAS,KAAK,QAAQ,YAAY;AAAA,EAC5D;AAAA,EAEA,oBAAoB;AAClB,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,OAAO,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC/C,WAAK,YAAY,UAAU,MAAM;AAAA,IACnC;AAEA,SAAK,gBAAgB,MAAM;AAC3B,SAAK,OAAO;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKQ,gBAAgB,MAAc;AACpC,QAAI,CAAC,OAAO,UAAU,eAAe,KAAK,MAAM,IAAI,EAAG;AAEvD,UAAM,QAAQ,KAAK,IAAI;AACvB,YAAQ,eAAe,MAAM,IAAI;AACjC,SAAK,IAAI,IAAI;AAAA,EACf;AAAA,EAEA,2BAA2B;AACzB,SAAK,OAAO;AAAA,EACd;AACF;AAEO,SAAS,uBAAuB;AACrC,MAAI,OAAO,mBAAmB,YAAa;AAC3C,MAAI,eAAe,IAAI,QAAQ,EAAG;AAElC,iBAAe,OAAO,UAAU,mBAAmB;AACrD;","names":["_a"]}

package/dist/cjs/index.d.cts

@@ -0,0 +1,14 @@
+declare const TAG_NAME = "vtex-ads-story";
+declare const BaseElement: typeof HTMLElement;
+declare class VtexAdsStoryElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get name(): string;
+    set name(value: string);
+    private render;
+    connectedCallback(): void;
+    private upgradeProperty;
+    attributeChangedCallback(): void;
+}
+declare function defineVtexAdsStories(): void;
+
+export { TAG_NAME, VtexAdsStoryElement, defineVtexAdsStories };

package/dist/esm/index.d.ts

@@ -0,0 +1,14 @@
+declare const TAG_NAME = "vtex-ads-story";
+declare const BaseElement: typeof HTMLElement;
+declare class VtexAdsStoryElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get name(): string;
+    set name(value: string);
+    private render;
+    connectedCallback(): void;
+    private upgradeProperty;
+    attributeChangedCallback(): void;
+}
+declare function defineVtexAdsStories(): void;
+
+export { TAG_NAME, VtexAdsStoryElement, defineVtexAdsStories };

package/dist/esm/index.js

@@ -0,0 +1,61 @@
+// src/story/story.ts
+var TAG_NAME = "vtex-ads-story";
+var _a;
+var BaseElement = (_a = globalThis.HTMLElement) != null ? _a : Object;
+var styles = `
+  :host {
+    display: block;
+    font-family: var(--vtex-ads-story-font-family, inherit);
+    color: var(--vtex-ads-story-color-text, inherit);
+  }
+`;
+var DEFAULT_NAME = "world";
+var VtexAdsStoryElement = class extends BaseElement {
+  static get observedAttributes() {
+    return ["name"];
+  }
+  get name() {
+    var _a2, _b;
+    return (_b = (_a2 = this.getAttribute("name")) == null ? void 0 : _a2.trim()) != null ? _b : "";
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  render() {
+    var _a2;
+    const container = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("[part='root']");
+    if (!container) return;
+    container.textContent = `Hello ${this.name || DEFAULT_NAME}!`;
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = `<style>${styles}</style><div part="root"></div>`;
+    }
+    this.upgradeProperty("name");
+    this.render();
+  }
+  // A property set before the element is defined (e.g. while the CDN script
+  // loads) becomes an own property that shadows the class getter/setter.
+  // Remove it and set it again so it goes through the setter.
+  upgradeProperty(prop) {
+    if (!Object.prototype.hasOwnProperty.call(this, prop)) return;
+    const value = this[prop];
+    Reflect.deleteProperty(this, prop);
+    this[prop] = value;
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+};
+function defineVtexAdsStories() {
+  if (typeof customElements === "undefined") return;
+  if (customElements.get(TAG_NAME)) return;
+  customElements.define(TAG_NAME, VtexAdsStoryElement);
+}
+export {
+  TAG_NAME,
+  VtexAdsStoryElement,
+  defineVtexAdsStories
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/story/story.ts"],"sourcesContent":["export const TAG_NAME = \"vtex-ads-story\";\n\n// Keeps the module importable where HTMLElement doesn't exist (SSR, Node).\nconst BaseElement: typeof HTMLElement = globalThis.HTMLElement ?? Object;\n\nconst styles = `\n  :host {\n    display: block;\n    font-family: var(--vtex-ads-story-font-family, inherit);\n    color: var(--vtex-ads-story-color-text, inherit);\n  }\n`;\n\nconst DEFAULT_NAME = \"world\";\n\nexport class VtexAdsStoryElement extends BaseElement {\n  static get observedAttributes() {\n    return [\"name\"];\n  }\n\n  get name(): string {\n    return this.getAttribute(\"name\")?.trim() ?? \"\";\n  }\n\n  set name(value: string) {\n    this.setAttribute(\"name\", value);\n  }\n\n  private render() {\n    const container = this.shadowRoot?.querySelector(\"[part='root']\");\n    if (!container) return;\n\n    // textContent keeps the name as plain text (no HTML injection).\n    container.textContent = `Hello ${this.name || DEFAULT_NAME}!`;\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot) {\n      const root = this.attachShadow({ mode: \"open\" });\n      root.innerHTML = `<style>${styles}</style><div part=\"root\"></div>`;\n    }\n\n    this.upgradeProperty(\"name\");\n    this.render();\n  }\n\n  // A property set before the element is defined (e.g. while the CDN script\n  // loads) becomes an own property that shadows the class getter/setter.\n  // Remove it and set it again so it goes through the setter.\n  private upgradeProperty(prop: \"name\") {\n    if (!Object.prototype.hasOwnProperty.call(this, prop)) return;\n\n    const value = this[prop];\n    Reflect.deleteProperty(this, prop);\n    this[prop] = value;\n  }\n\n  attributeChangedCallback() {\n    this.render();\n  }\n}\n\nexport function defineVtexAdsStories() {\n  if (typeof customElements === \"undefined\") return;\n  if (customElements.get(TAG_NAME)) return;\n\n  customElements.define(TAG_NAME, VtexAdsStoryElement);\n}\n"],"mappings":";AAAO,IAAM,WAAW;AAAxB;AAGA,IAAM,eAAkC,gBAAW,gBAAX,YAA0B;AAElE,IAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQf,IAAM,eAAe;AAEd,IAAM,sBAAN,cAAkC,YAAY;AAAA,EACnD,WAAW,qBAAqB;AAC9B,WAAO,CAAC,MAAM;AAAA,EAChB;AAAA,EAEA,IAAI,OAAe;AApBrB,QAAAA,KAAA;AAqBI,YAAO,MAAAA,MAAA,KAAK,aAAa,MAAM,MAAxB,gBAAAA,IAA2B,WAA3B,YAAqC;AAAA,EAC9C;AAAA,EAEA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEQ,SAAS;AA5BnB,QAAAA;AA6BI,UAAM,aAAYA,MAAA,KAAK,eAAL,gBAAAA,IAAiB,cAAc;AACjD,QAAI,CAAC,UAAW;AAGhB,cAAU,cAAc,SAAS,KAAK,QAAQ,YAAY;AAAA,EAC5D;AAAA,EAEA,oBAAoB;AAClB,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,OAAO,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC/C,WAAK,YAAY,UAAU,MAAM;AAAA,IACnC;AAEA,SAAK,gBAAgB,MAAM;AAC3B,SAAK,OAAO;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKQ,gBAAgB,MAAc;AACpC,QAAI,CAAC,OAAO,UAAU,eAAe,KAAK,MAAM,IAAI,EAAG;AAEvD,UAAM,QAAQ,KAAK,IAAI;AACvB,YAAQ,eAAe,MAAM,IAAI;AACjC,SAAK,IAAI,IAAI;AAAA,EACf;AAAA,EAEA,2BAA2B;AACzB,SAAK,OAAO;AAAA,EACd;AACF;AAEO,SAAS,uBAAuB;AACrC,MAAI,OAAO,mBAAmB,YAAa;AAC3C,MAAI,eAAe,IAAI,QAAQ,EAAG;AAElC,iBAAe,OAAO,UAAU,mBAAmB;AACrD;","names":["_a"]}

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@vtex/ads-stories",
-  "version": "0.0.0-bootstrap.0",
-  "description": "VTEX Ads Stories web component (placeholder; real versions ship from CI)",
-  "license": "UNLICENSED"
+  "type": "module",
+  "version": "0.1.0-test.040e2b9",
+  "description": "VTEX Ads Stories web component",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./cdn": "./dist/cdn/vtex-ads-stories.js"
+  },
+  "sideEffects": [
+    "./dist/cdn/*"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "prepack": "node ../../scripts/ensure-publish-auth.mjs",
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "clean": "rimraf dist",
+    "dev": "vite",
+    "preview:cdn": "tsup && vite --open /?cdn",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest --coverage.enabled=false"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vtex/ads-js.git",
+    "directory": "packages/ads-stories"
+  },
+  "homepage": "https://github.com/vtex/ads-js/tree/main/packages/ads-stories#readme",
+  "devDependencies": {
+    "@types/node": "^22.15.21",
+    "tsup": "^8.5.0",
+    "vite": "^5.0.0"
+  }
 }

package/src/cdn.ts

@@ -0,0 +1,5 @@
+import { defineVtexAdsStories } from "./story";
+
+defineVtexAdsStories();
+
+export { VtexAdsStoryElement, defineVtexAdsStories, TAG_NAME } from "./story";

package/src/index.ts

@@ -0,0 +1 @@
+export { VtexAdsStoryElement, defineVtexAdsStories, TAG_NAME } from "./story";

package/src/story/index.ts

@@ -0,0 +1 @@
+export { VtexAdsStoryElement, defineVtexAdsStories, TAG_NAME } from "./story";

package/src/story/story.ts

@@ -0,0 +1,68 @@
+export const TAG_NAME = "vtex-ads-story";
+
+// Keeps the module importable where HTMLElement doesn't exist (SSR, Node).
+const BaseElement: typeof HTMLElement = globalThis.HTMLElement ?? Object;
+
+const styles = `
+  :host {
+    display: block;
+    font-family: var(--vtex-ads-story-font-family, inherit);
+    color: var(--vtex-ads-story-color-text, inherit);
+  }
+`;
+
+const DEFAULT_NAME = "world";
+
+export class VtexAdsStoryElement extends BaseElement {
+  static get observedAttributes() {
+    return ["name"];
+  }
+
+  get name(): string {
+    return this.getAttribute("name")?.trim() ?? "";
+  }
+
+  set name(value: string) {
+    this.setAttribute("name", value);
+  }
+
+  private render() {
+    const container = this.shadowRoot?.querySelector("[part='root']");
+    if (!container) return;
+
+    // textContent keeps the name as plain text (no HTML injection).
+    container.textContent = `Hello ${this.name || DEFAULT_NAME}!`;
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = `<style>${styles}</style><div part="root"></div>`;
+    }
+
+    this.upgradeProperty("name");
+    this.render();
+  }
+
+  // A property set before the element is defined (e.g. while the CDN script
+  // loads) becomes an own property that shadows the class getter/setter.
+  // Remove it and set it again so it goes through the setter.
+  private upgradeProperty(prop: "name") {
+    if (!Object.prototype.hasOwnProperty.call(this, prop)) return;
+
+    const value = this[prop];
+    Reflect.deleteProperty(this, prop);
+    this[prop] = value;
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+}
+
+export function defineVtexAdsStories() {
+  if (typeof customElements === "undefined") return;
+  if (customElements.get(TAG_NAME)) return;
+
+  customElements.define(TAG_NAME, VtexAdsStoryElement);
+}