Skip to content

ref: add support for skeleton loader, and expanded tile variants #605

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 31, 2025
Merged

ref: add support for skeleton loader, and expanded tile variants #605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6a17017
refactor: Update SDK references to ISdk and enhance widget configurat…
oliverkuchies Oct 31, 2025
76f73ea
refactor: Remove unused expandedTile configuration from widget settings
oliverkuchies Oct 31, 2025
b85189f
fix: Correct background gradient syntax in skeleton-loader styles
oliverkuchies Oct 31, 2025
0e223f6
refactor: Update SDK type references to ISdk and enhance configuratio…
oliverkuchies Oct 31, 2025
3f92aca
Merge remote-tracking branch 'origin/master' into feat/add-support-fo…
oliverkuchies Oct 31, 2025
3066eb1
fix: Ensure default template endpoint returns localhost for unrecogni…
oliverkuchies Oct 31, 2025
5525e01
fix: Update @stackla/widget-utils dependency version to ^4.1.2 in pac…
oliverkuchies Oct 31, 2025
5c5229a
ref: Update subproject commit in widget-utils
oliverkuchies Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions esbuild.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ const getTemplatesEndpoint = () => {
return "https://templates.teaser.stackla.com"
case "development":
return "http://localhost:4003"
default:
return "http://localhost:4003"
}
}

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
"vitest": "^3.2.4"
},
"dependencies": {
"@stackla/widget-utils": "workspace:*",
"@stackla/widget-utils": "^4.1.2",
"apicache": "^1.6.3",
"cookie-parser": "^1.4.7",
"cors": "^2.8.5",
Expand Down
2 changes: 1 addition & 1 deletion packages/widget-utils
Open in desktop
Submodule widget-utils updated 23 files
+0 −5 .changeset/weak-beans-wave.md
+12 −0 CHANGELOG.md
+2 −2 package-lock.json
+1 −1 package.json
+54 −0 src/libs/vertical-expanded-tiles/base.template.tsx
+27 −0 src/libs/vertical-expanded-tiles/config.ts
+131 −0 src/libs/vertical-expanded-tiles/embed-youtube.template.tsx
+558 −0 src/libs/vertical-expanded-tiles/expanded-swiper.loader.tsx
+284 −0 src/libs/vertical-expanded-tiles/expanded-tile-video.tsx
+26 −0 src/libs/vertical-expanded-tiles/inline-products.template.spec.tsx
+146 −0 src/libs/vertical-expanded-tiles/inline-products.template.tsx
+294 −0 src/libs/vertical-expanded-tiles/inline-swiper.tsx
+42 −0 src/libs/vertical-expanded-tiles/products.swiper.ts
+134 −0 src/libs/vertical-expanded-tiles/products.template.tsx
+47 −0 src/libs/vertical-expanded-tiles/tiktok-message.ts
+145 −0 src/libs/vertical-expanded-tiles/tile-content.template.tsx
+191 −0 src/libs/vertical-expanded-tiles/tile.template.tsx
+231 −0 src/libs/vertical-expanded-tiles/video.templates.tsx
+15 −3 src/types/core/sdk.ts
+0 −2 src/types/types.ts
+3 −0 src/types/widgets.ts
+10 −0 src/widget-loader.spec.tsx
+11 −1 src/widget-loader.ts
3 changes: 2 additions & 1 deletion tests/fixtures/widget.options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ const widgetOptions: SharedWidgetOptions["widgetOptions"] & {
show_votes: true,
show_cross_sellers: true,
show_add_to_cart: true,
show_carousel_grouping: false
show_carousel_grouping: false,
expanded_tile_variant: "horizontal"
},
tile_options: {
show_comments: true,
Expand Down
2 changes: 1 addition & 1 deletion types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export { Sdk, SwiperData } from "@stackla/widget-utils/types"
export { ISdk, SwiperData } from "@stackla/widget-utils/types"
export { BaseConfig } from "./IBaseConfig"
export { IWidgetSettings } from "./IWidgetSettings"
3 changes: 2 additions & 1 deletion widgets/blankcanvas/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ export const config: {
// Whether to show the add to cart
show_add_to_cart: true,
// Whether to show the carousel grouping
show_carousel_grouping: true
show_carousel_grouping: true,
expanded_tile_variant: "horizontal"
},
inlineTile: {
// Whether to show the navigation options of the tile
Expand Down
4 changes: 2 additions & 2 deletions widgets/carousel/inline-carousel-swiper.loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Sdk } from "types"
import { ISdk } from "types"
import { initializeInlineSwiper } from "../utils/inline-swiper.loader"

declare const sdk: Sdk
declare const sdk: ISdk

export function initializeInlineSwiperListeners() {
initializeInlineSwiper({
Expand Down
4 changes: 2 additions & 2 deletions widgets/carousel/widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Sdk } from "types"
import { ISdk } from "types"

declare const sdk: Sdk
declare const sdk: ISdk

import { loadWidget } from "@stackla/widget-utils"
import { initializeInlineSwiperListeners } from "./inline-carousel-swiper.loader"
Expand Down
6 changes: 3 additions & 3 deletions widgets/libs/vertical-expanded-tiles/base.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { ISdk } from "@stackla/widget-utils"
import { StoryExpandedTile } from "./tile.template"
import { VerticalExpandedTile } from "./tile.template"
import { createElement } from "@stackla/widget-utils"

export function StoryExpandedTiles(sdk: ISdk) {
Expand All @@ -8,7 +8,7 @@ export function StoryExpandedTiles(sdk: ISdk) {
const navigationArrowsEnabled = show_nav

return (
<div class="expanded-tile-wrapper" variation="story">
<div class="expanded-tile-wrapper" variation="vertical">
<div class="swiper swiper-expanded story-expanded">
<div class="align-center">
<div class="swiper-expanded-button-wrapper">
Expand All @@ -31,7 +31,7 @@ export function StoryExpandedTiles(sdk: ISdk) {
data-id={tile.id}
data-yt-id={tile.youtube_id || ""}
data-tiktok-id={tile.tiktok_id || ""}>
<StoryExpandedTile sdk={sdk} tile={tile} />
<VerticalExpandedTile sdk={sdk} tile={tile} />
</div>
))}
</div>
Expand Down
4 changes: 2 additions & 2 deletions widgets/libs/vertical-expanded-tiles/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Sdk, UserConfig } from "@stackla/widget-utils"
import type { ISdk, UserConfig } from "@stackla/widget-utils"

declare const sdk: Sdk
declare const sdk: ISdk

const tilesLength = sdk.querySelectorAll(".ugc-tile")?.length ?? 0

Expand Down
6 changes: 3 additions & 3 deletions widgets/libs/vertical-expanded-tiles/inline-products.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { createElement, createFragment } from "@stackla/widget-utils/jsx"
import { Sdk, TagExtended, Tile } from "@stackla/widget-utils"
import { ISdk, TagExtended, Tile } from "@stackla/widget-utils"

type SwiperTemplateProps = {
tile: Tile
navArrows: boolean
prevIcon: string
nextIcon: string
sdk: Sdk
sdk: ISdk
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function InlineProductsTemplate(sdk: Sdk, component: any) {
export function InlineProductsTemplate(sdk: ISdk, component: any) {
if (!component.tile) {
return <></>
}
Expand Down
4 changes: 2 additions & 2 deletions widgets/libs/vertical-expanded-tiles/inline-swiper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Sdk } from "types"
import { ISdk } from "types"
import {
initializeSwiper,
refreshSwiper,
Expand All @@ -9,7 +9,7 @@
import type { Swiper } from "swiper"
import { enableTileImages, loadAllUnloadedTiles } from "@stackla/widget-utils/libs"

declare const sdk: Sdk
declare const sdk: ISdk
const ids = new Set<string>()

export function initializeInlineSwiperListeners() {
Expand Down Expand Up @@ -158,7 +158,7 @@
async function generateUserHandleText(tileId: string, retries = 0): Promise<string> {
const tile = sdk.getTileById(tileId)
if (!tile) {
console.info(`Tile with id ${tileId} not found, retrying...`)

Check warning on line 161 in widgets/libs/vertical-expanded-tiles/inline-swiper.tsx

View workflow job for this annotation

GitHub Actions / Build and Test 

Unexpected console statement
if (retries < 5) {
return new Promise(resolve => {
setTimeout(() => resolve(generateUserHandleText(tileId, retries + 1)), 500)
Expand Down Expand Up @@ -203,7 +203,7 @@
if (retries < 5) {
setTimeout(() => disableExpandedTileIfProductsMissing(tile, tileId, shouldDisableInactiveTiles, retries + 1), 100)
} else {
console.error(`Tile with id ${tileId} not found after multiple retries.`)

Check warning on line 206 in widgets/libs/vertical-expanded-tiles/inline-swiper.tsx

View workflow job for this annotation

GitHub Actions / Build and Test 

Unexpected console statement
}

return
Expand Down Expand Up @@ -232,7 +232,7 @@
const id = tile.getAttribute("data-id")
if (id) {
if (ids.has(id)) {
console.info(`Duplicate tile id found: ${id}. Removing duplicate tile.`)

Check warning on line 235 in widgets/libs/vertical-expanded-tiles/inline-swiper.tsx

View workflow job for this annotation

GitHub Actions / Build and Test 

Unexpected console statement
tile.remove()
} else {
ids.add(id)
Expand Down Expand Up @@ -271,7 +271,7 @@
const mutationObserver = new MutationObserver(mutationList => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
const target = mutation.target as HTMLElement

Check warning on line 274 in widgets/libs/vertical-expanded-tiles/inline-swiper.tsx

View workflow job for this annotation

GitHub Actions / Build and Test 

Do not use any type assertions
if (target.classList.contains("user-handle")) {
continue
}
Expand Down
8 changes: 4 additions & 4 deletions widgets/libs/vertical-expanded-tiles/products.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { createElement, createFragment } from "@stackla/widget-utils/jsx"
import type { IProductsComponent, Sdk, TagExtended, Tile, ISdk } from "@stackla/widget-utils/types"
import type { IProductsComponent, TagExtended, Tile, ISdk } from "@stackla/widget-utils/types"

declare const sdk: ISdk

export function ProductCTA({ product }: { sdk: Sdk; product: TagExtended; tile: Tile }) {
export function ProductCTA({ product }: { sdk: ISdk; product: TagExtended; tile: Tile }) {
const { custom_url, target, availability, cta_text = "Buy Now" } = product

return (
Expand All @@ -15,7 +15,7 @@ export function ProductCTA({ product }: { sdk: Sdk; product: TagExtended; tile:
)
}

export function ProductDetails({ sdk, product, tile }: { sdk: Sdk; product: TagExtended; tile: Tile }) {
export function ProductDetails({ sdk, product, tile }: { sdk: ISdk; product: TagExtended; tile: Tile }) {
const selectedProduct = sdk.getSelectedProduct()
const selectedProductId = selectedProduct ? selectedProduct.id : null
const { custom_url, id } = product
Expand Down Expand Up @@ -99,7 +99,7 @@ export function ProductImages({
)
}

export default function ProductsTemplate(sdk: Sdk, component?: IProductsComponent) {
export default function ProductsTemplate(sdk: ISdk, component?: IProductsComponent) {
const tileId = component && component.getTileId()

if (!tileId) {
Expand Down
10 changes: 5 additions & 5 deletions widgets/libs/vertical-expanded-tiles/styles/_expanded-tiles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ html {
background: var(--widget-background);
}

expanded-tiles {
expanded-tiles[variation="story"] {
--expanded-tiles-background: #fff;

@include sicon.shopspot-icon-styles;
Expand Down Expand Up @@ -80,7 +80,7 @@ shopspot-icon {
@include es.swiper-expanded-styles;
}

expanded-tiles:not(:empty) {
expanded-tiles[variation="story"]:not(:empty) {
:host {
transition: ease all 0.5s;
}
Expand Down Expand Up @@ -883,11 +883,10 @@ expanded-tiles:not(:empty) {
}

@include media-queries.breakpoint(mobile) {
expanded-tiles:not(:empty) {
expanded-tiles[variation="story"]:not(:empty) {
height: 100dvh !important;
}

iframe {
iframe {
z-index: 9 !important;
}

Expand Down Expand Up @@ -929,4 +928,5 @@ expanded-tiles:not(:empty) {
height: 100dvh;
width: 100vw;
}
}
}
4 changes: 2 additions & 2 deletions widgets/libs/vertical-expanded-tiles/tile-content.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { createElement, createFragment } from "@stackla/widget-utils/jsx"
import { ISdk, Sdk, Tile } from "@stackla/widget-utils"
import { ISdk, Tile } from "@stackla/widget-utils"

type RenderConfig = {
renderUserInfo: boolean
Expand All @@ -19,7 +19,7 @@ type UserInfoTemplateProps = {
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function TileContentTemplate(sdk: Sdk, component: any) {
export function TileContentTemplate(sdk: ISdk, component: any) {
const tileId = component.getTileId()
const tile = sdk.getTileById(tileId)
const renderConfig = component.renderConfig
Expand Down
2 changes: 1 addition & 1 deletion widgets/libs/vertical-expanded-tiles/tile.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function StoryControls({ video }: { video: boolean }) {
)
}

export function StoryExpandedTile({ tile }: ExpandedTileProps) {
export function VerticalExpandedTile({ tile }: ExpandedTileProps) {
const { show_shopspots, show_products, show_timestamp } = sdk.getExpandedTileConfig()

const shopspotEnabled = sdk.isComponentLoaded("shopspots") && show_shopspots && !!tile.hotspots?.length
Expand Down
8 changes: 4 additions & 4 deletions widgets/nightfall/products.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Sdk, TagExtended, IProductsComponent, Tile } from "@stackla/widget-utils"
import type { ISdk, TagExtended, IProductsComponent, Tile } from "@stackla/widget-utils"
import { createElement, createFragment } from "@stackla/widget-utils/jsx"

export function ProductHeader({ product }: { product: TagExtended }) {
Expand Down Expand Up @@ -26,7 +26,7 @@ export function ProductHeader({ product }: { product: TagExtended }) {
)
}

export function ProductCTA({ sdk, product, tile }: { sdk: Sdk; product: TagExtended; tile: Tile }) {
export function ProductCTA({ sdk, product, tile }: { sdk: ISdk; product: TagExtended; tile: Tile }) {
const { custom_url, target, availability, cta_text = "Buy Now", currency, id } = product
const addToCart = sdk.getLoadedComponents().includes("add-to-cart")
const parentNodeId = sdk.getNodeId()
Expand Down Expand Up @@ -55,7 +55,7 @@ export function ProductCTA({ sdk, product, tile }: { sdk: Sdk; product: TagExten
)
}

export function ProductDetails({ sdk, product, tile }: { sdk: Sdk; product: TagExtended; tile: Tile }) {
export function ProductDetails({ sdk, product, tile }: { sdk: ISdk; product: TagExtended; tile: Tile }) {
const selectedProduct = sdk.getSelectedProduct()
const selectedProductId = selectedProduct ? selectedProduct.id : null
const { custom_url, description = "Buy Now", id } = product
Expand Down Expand Up @@ -143,7 +143,7 @@ export function ProductImages({
)
}

export default function ProductsTemplate(sdk: Sdk, component?: IProductsComponent) {
export default function ProductsTemplate(sdk: ISdk, component?: IProductsComponent) {
if (!component) {
throw new Error("Products component incorrectly passed.")
}
Expand Down
4 changes: 2 additions & 2 deletions widgets/nightfall/widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { loadWidget, Sdk } from "@stackla/widget-utils"
import { loadWidget, ISdk } from "@stackla/widget-utils"
import { loadWaterfallLayout } from "../waterfall/waterfall.lib"
import ProductsTemplate from "./products.template"

declare const sdk: Sdk
declare const sdk: ISdk

loadWidget(sdk, {
callbacks: {
Expand Down
8 changes: 4 additions & 4 deletions widgets/samples/products.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Sdk, TagExtended, IProductsComponent, Tile } from "@stackla/widget-utils"
import type { ISdk, TagExtended, IProductsComponent, Tile } from "@stackla/widget-utils"
import { createElement, createFragment } from "@stackla/widget-utils/jsx"

export function ProductHeader({ product }: { product: TagExtended }) {
Expand Down Expand Up @@ -26,7 +26,7 @@ export function ProductHeader({ product }: { product: TagExtended }) {
)
}

export function ProductCTA({ sdk, product, tile }: { sdk: Sdk; product: TagExtended; tile: Tile }) {
export function ProductCTA({ sdk, product, tile }: { sdk: ISdk; product: TagExtended; tile: Tile }) {
const { custom_url, target, availability, cta_text = "Buy Now", currency, id } = product
const addToCart = sdk.getLoadedComponents().includes("add-to-cart")
const parentNodeId = sdk.getNodeId()
Expand Down Expand Up @@ -54,7 +54,7 @@ export function ProductCTA({ sdk, product, tile }: { sdk: Sdk; product: TagExten
)
}

export function ProductDetails({ sdk, product, tile }: { sdk: Sdk; product: TagExtended; tile: Tile }) {
export function ProductDetails({ sdk, product, tile }: { sdk: ISdk; product: TagExtended; tile: Tile }) {
const selectedProduct = sdk.getSelectedProduct()
const selectedProductId = selectedProduct ? selectedProduct.id : null
const { custom_url, description = "Buy Now", id } = product
Expand Down Expand Up @@ -135,7 +135,7 @@ export function ProductImages({
)
}

export default function ProductsTemplate(sdk: Sdk, component: IProductsComponent) {
export default function ProductsTemplate(sdk: ISdk, component: IProductsComponent) {
const tileId = component.getTileId()
const tile = sdk.getTileById(tileId)
const selectedProductState = sdk.getSelectedProduct()
Expand Down
4 changes: 2 additions & 2 deletions widgets/samples/tile-content.template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Sdk, Tile, ITileContentComponent, ISdk } from "@stackla/widget-utils"
import type { ISdk, Tile, ITileContentComponent } from "@stackla/widget-utils"
import { createElement, createFragment } from "@stackla/widget-utils/jsx"

type RenderConfig = {
Expand All @@ -20,7 +20,7 @@ type UserInfoTemplateProps = {

declare const sdk: ISdk

export function TileContentTemplate(sdk: Sdk, component: ITileContentComponent) {
export function TileContentTemplate(sdk: ISdk, component: ITileContentComponent) {
const tileId = component.getTileId()
const tile = sdk.getTileById(tileId)
const renderConfig = component.renderConfig
Expand Down
24 changes: 3 additions & 21 deletions widgets/shortvideo/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,5 @@
@forward "pkg:swiper/swiper-bundle.css";
@use "@styles/partials/fonts";
@forward "@styles/partials/icons";
@forward "@styles/partials/loading";
@forward "inline-tile";
@forward "@styles/partials/tile-overlay";
@forward "@styles/templates/swiper-overrides";
@use "@styles/partials/inline";
@use "@styles/templates/tile-content" as tc;
@use "@styles/templates/shopspot-icon" as sicon;
@use "@styles/templates/time-phrase" as tphrase;
@use "@styles/templates/share-menu" as smenu;
@use "@styles/partials/common-widget-styles" as common;
@use "icon-sections-override";
@use "tile-content-override";
@use "@styles/templates/tags";

// Custom styles for shortvideo - note: uses overrides instead of standard icon-sections and tile-content
.shortvideo-inline {
@include sicon.shopspot-icon-styles;
@include tphrase.time-phrase-styles;
@include smenu.share-menu-styles;
@include tags.tile-tags-styles;
}
@forward "inline-tile";
@include common.apply-common-styles('.shortvideo-inline');
4 changes: 2 additions & 2 deletions widgets/shortvideo/inline-shortvideo-swiper.loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Sdk } from "types"
import { ISdk } from "types"
import { initializeInlineSwiper } from "../utils/inline-swiper.loader"

declare const sdk: Sdk
declare const sdk: ISdk

export function initializeInlineSwiperListeners() {
initializeInlineSwiper({
Expand Down
Loading
Loading