@wix/origami-transforms 0.1.40 → 0.1.42

package/dist/cssPlugins/svg.d.ts

@@ -15,3 +15,4 @@ export function viewBoxOf({ type, viewBox, bbox }: {
 }): any;
 export function scaleSvg(svg: any, info: any, preserveAspectRatio: any): any;
 export function svgDataUrl(svg: any): string;
+export function sizeSvg(svg: any, width: any, height: any): any;

package/dist/cssPlugins/{wixVectorUrls.d.ts → wixUrls.d.ts}

@@ -1,6 +1,6 @@
 /** @typedef {typeof checks[number]} Check */
 /** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
-export const wixVectorUrlsPlugin: import("../transform/types.js").CssTransformPlugin<Check>;
+export const wixUrlsPlugin: import("../transform/types.js").CssTransformPlugin<Check>;
 export type Check = (typeof checks)[number];
 declare const checks: readonly [];
 export {};

package/dist/wrapperSideEffects.d.ts

@@ -5,7 +5,7 @@ export const COMPANION_APP: "companionApp";
  * app: each service's bundle and the module that registers it, `<package name>/bundle.js` and `<package name>/index.js`. */
 export const VIEWER_SERVICES_FOLDER: "src/site/_generated/viewer-services";
 export function viewerServiceImport(generatedFolder: string, packageName: string): string;
-export function wrapperSideEffectImports(sources: Iterable<string>, catalog: WrapperCatalog, generatedFolder: string): string[];
+export function wrapperSideEffectImports(sources: Iterable<string>, catalog: WrapperCatalog, generatedFolder: string, refElements?: RefElements): string[];
 /**
  * the site's component catalog (`site-component-catalog.json`), by module
  */
@@ -23,3 +23,10 @@ export type WrapperCatalog = {
         };
     };
 };
+/**
+ * each wrapper component's ref element types, by
+ * its type, as its wrapper package's `origami.refElements` lists them
+ */
+export type RefElements = {
+    readonly [type: string]: readonly string[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -19,6 +19,7 @@
     "@babel/core": "^7.26.0",
     "@babel/parser": "^7.25.0",
     "@babel/types": "^7.25.2",
+    "@wix/sdk": "^1.21.13",
     "@wix/origami-fonts": "1.0.4",
     "@wix/origami-system-components": "1.10.10",
     "postcss": "^8.5.3",
@@ -75,5 +76,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "dd0925692f100321bf7450675a2f46b1a81d620bf90847233608e7c8"
+  "falconPackageHash": "a93543b10c8156d2dd51f02d94e447a5aaf82374b5c26370c547c8ba"
 }

package/src/cssPlugins/index.js

@@ -12,8 +12,8 @@
 // and layout move declarations out of the instance's rule. fonts appends the `@font-face` rules that load the Wix fonts
 // the stylesheet names from Wix's CDN.
 // component-position runs after mixins, so a position a mixin body sets is kept, and before layout compiles the rules.
-// shape-dividers and wix-vector-urls run last: they load the SVGs a stylesheet names from Wix's CDN in `prepare`, and
-// write them in as data URIs.
+// shape-dividers and wix-urls run last: they load the SVGs a stylesheet names from Wix's CDN in `prepare`, and write
+// them in as data URIs; wix-urls links a regular image a `wix:image` url names from Wix's media service, resized.
 //
 // `@layer` needs no plugin: cascade layers have been in every browser since March 2022.
 
@@ -28,7 +28,7 @@ import { layoutPlugin } from './layout/index.js'
 import { spxPlugin } from './spx/index.js'
 import { spxThemeVariablesPlugin } from './spxThemeVariables/index.js'
 import { stackChildrenPlugin } from './stackChildren.js'
-import { wixVectorUrlsPlugin } from './wixVectorUrls.js'
+import { wixUrlsPlugin } from './wixUrls.js'
 
 /** @type {readonly import('../transform/types.js').CssTransformPlugin<string>[]} */
 export const cssPlugins = Object.freeze([
@@ -43,5 +43,5 @@ export const cssPlugins = Object.freeze([
     spxThemeVariablesPlugin,
     spxPlugin,
     shapeDividersPlugin,
-    wixVectorUrlsPlugin,
+    wixUrlsPlugin,
 ])

package/src/cssPlugins/shapeDividers.js

@@ -108,7 +108,7 @@ const checks = /** @type {const} */ ([])
 export const shapeDividersPlugin = {
     checks,
     name: 'shape-dividers',
-    // Last, with wix-vector-urls: it only adds rules, which no other plugin needs to see, and it reads only `--height` as
+    // Last, with wix-urls: it only adds rules, which no other plugin needs to see, and it reads only `--height` as
     // `var(--height)`, so spx converts that var's `--spx()` where it is declared.
     order: 25,
     prepare(root) {

package/src/cssPlugins/svg.js

@@ -88,3 +88,14 @@ export const svgDataUrl = svg => {
         .replace(URL_SYMBOLS, encodeURIComponent)
     return `url("data:image/svg+xml,${escaped}")`
 }
+
+const SIZE = /\s(?:width|height)="[^"]*"/g
+
+/** The SVG drawn at `width` × `height` pixels, its drawing box stretched to that size: what a cursor image, which a
+ * browser draws at the image's own size, needs. */
+export const sizeSvg = (svg, width, height) => {
+    const scaled = scaleSvg(svg, svgInfo(svg), 'none')
+    const tag = scaled.match(SVG_TAG)?.[0]
+    if (tag === undefined) return scaled
+    return scaled.replace(tag, tag.replace(SIZE, '').replace(/<svg/, `<svg width="${width}" height="${height}"`))
+}

package/src/cssPlugins/wixUrls.js

@@ -0,0 +1,90 @@
+// Rewrites the urls a value names with Wix's own url schemes, which no browser can load:
+//
+// - `url(wix:vector://v1/<id>.svg)`: vector art, Image's `--maskImage` for one. A live Wix site writes it as a data
+//   URI of the SVG stretched to its drawing's box (Thunderbolt's `replaceWixUrl` and `createSvgCssVar`); this writes
+//   the same data URI in its place.
+// - `url("wix:image://v1/<id>/<name>#originWidth=<w>&originHeight=<h>")`: an image at the size it's displayed at, a
+//   component's `cursor` for one (css-codec/style/cursor.ts). A browser draws a cursor at the image's pixel size, so
+//   the image is requested at that size: a regular image resized by Wix's media service, through @wix/sdk's media
+//   helpers, an SVG shape inlined as a data URI with that width and height (the media service doesn't resize an SVG).
+//
+// Only the url is rewritten: a cursor's hotspot and `auto` fallback stay as written. So does a url that can't be
+// rewritten, with a warning. And only the CSS this stage renders is rewritten, never the stored bundle: an https
+// cursor in style.css would be read back as plain CSS, not as the component's cursor.
+
+import { getImageUrl, getScaledToFillImageUrl } from '@wix/sdk/media'
+import { loadedSvg, loadSvgs, scaleSvg, sizeSvg, svgDataUrl, svgInfo } from './svg.js'
+
+// A quoted url runs to its closing quote: a file name encoded with encodeURIComponent keeps `(`, `)` and `'`.
+const WIX_URL = /url\(\s*(['"]?)(wix:(vector|image):\/\/v1\/(.+?))\1\s*\)/gi
+const HAS_WIX_URL = /wix:(?:vector|image):\/\//i
+
+const isSvg = id => id.endsWith('.svg')
+
+/** Every wix url in the stylesheet: its scheme, its path after `v1/`, and the url itself. */
+const wixUrls = root => {
+    const urls = []
+    root.walkDecls(declaration => {
+        for (const [, , wixUrl, scheme, path] of declaration.value.matchAll(WIX_URL)) urls.push({ scheme: scheme.toLowerCase(), path, wixUrl })
+    })
+    return urls
+}
+
+/** The ids of the SVGs the stylesheet's wix urls name. */
+const svgIdsIn = root => {
+    const ids = new Set()
+    for (const { scheme, path, wixUrl } of wixUrls(root)) {
+        if (scheme === 'vector') ids.add(path)
+        else {
+            const { id, width, height } = getImageUrl(wixUrl)
+            if (isSvg(id) && width && height) ids.add(id)
+        }
+    }
+    return ids
+}
+
+/** The `wix:vector` url `id` as a data URI, or `url` as written when its SVG isn't loaded. */
+const vectorUrl = (url, id, declaration, context) => {
+    const svg = loadedSvg(id)
+    if (svg === undefined) {
+        context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
+        return url
+    }
+    return svgDataUrl(scaleSvg(svg, svgInfo(svg), 'none'))
+}
+
+/** The `wix:image` url `wixUrl` as a loadable url at its size, or `url` as written when it can't be. */
+const imageUrl = (url, wixUrl, declaration, context) => {
+    const { id, width, height } = getImageUrl(wixUrl)
+    if (!width || !height) {
+        context.warn?.(declaration, `The image ${id} has no size: ${url} doesn't end in #originWidth=<w>&originHeight=<h>, so it stays as written`)
+        return url
+    }
+    if (!isSvg(id)) return `url("${getScaledToFillImageUrl(wixUrl, width, height, {})}")`
+    const svg = loadedSvg(id)
+    if (svg === undefined) {
+        context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
+        return url
+    }
+    return svgDataUrl(sizeSvg(svg, width, height))
+}
+
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
+export const wixUrlsPlugin = {
+    checks,
+    name: 'wix-urls',
+    // Last, so a url a mixin or preset copies elsewhere is rewritten wherever it ends up.
+    order: 25,
+    prepare: root => loadSvgs(svgIdsIn(root)),
+    transform(root, context) {
+        root.walkDecls(declaration => {
+            if (!HAS_WIX_URL.test(declaration.value)) return
+            declaration.value = declaration.value.replace(WIX_URL, (url, _quote, wixUrl, scheme, path) =>
+                scheme.toLowerCase() === 'vector' ? vectorUrl(url, path, declaration, context) : imageUrl(url, wixUrl, declaration, context)
+            )
+        })
+    },
+}

package/src/wrapperSideEffects.js

@@ -1,7 +1,8 @@
 // What an item's `_generated` entry imports before its structure, for the wrappers the structure imports: each
-// component's defaults sheet, and the registration of each viewer service a companion app provider needs. The export
-// writes these lines, and `yarn dev` and `yarn build` rewrite them when the structure changes, so both follow one rule.
-// Kept free of dependencies, like `wrapperImport.js`, so the generator's bundle doesn't take the transforms with it.
+// component's defaults sheet and its ref element types', and the registration of each viewer service a companion app
+// provider needs. The export writes these lines, and `yarn dev` and `yarn build` rewrite them when the structure
+// changes, so both follow one rule. Kept free of dependencies, like `wrapperImport.js`, so the generator's bundle
+// doesn't take the transforms with it.
 import { posix } from 'node:path'
 import { moduleFromWrapperEntry, wrapperImport } from './wrapperImport.js'
 
@@ -20,6 +21,11 @@ export const VIEWER_SERVICES_FOLDER = 'src/site/_generated/viewer-services'
  * } } }} WrapperCatalog the site's component catalog (`site-component-catalog.json`), by module
  */
 
+/**
+ * @typedef {{ readonly [type: string]: readonly string[] }} RefElements each wrapper component's ref element types, by
+ * its type, as its wrapper package's `origami.refElements` lists them
+ */
+
 /**
  * The module that registers a viewer service, as an item's `_generated` folder imports it.
  * @param {string} generatedFolder the item's `_generated` folder, relative to the site app
@@ -30,26 +36,54 @@ export const viewerServiceImport = (generatedFolder, packageName) => {
     return path.startsWith('.') ? path : `./${path}`
 }
 
+/**
+ * The `/css` of a component and of its ref elements' types, which its raw component renders itself (FastGallery its
+ * ExpandedGallery) and no structure imports: each ref type's before the component's, at any depth, so a ref type's
+ * sheet never comes after the sheet of the component that styles it. A ref type the catalog doesn't have (its app isn't
+ * on the site) brings nothing.
+ * @param {WrapperCatalog} catalog
+ * @param {RefElements} refElements
+ * @param {string} module
+ * @param {string} symbol
+ * @param {Set<string>} imports where the imports go, in order
+ * @param {Set<string>} seen the types already walked, so a cycle ends
+ */
+const addComponentCss = (catalog, refElements, module, symbol, imports, seen) => {
+    const type = `${module}.${symbol}`
+    if (!catalog[module]?.entries.components?.[symbol] || seen.has(type)) return
+    seen.add(type)
+    for (const refType of refElements[type] ?? []) {
+        const separator = refType.indexOf('.')
+        if (separator > 0) addComponentCss(catalog, refElements, refType.slice(0, separator), refType.slice(separator + 1), imports, seen)
+    }
+    imports.add(`${wrapperImport({ module, symbol })}/css`)
+}
+
 /**
  * The side-effect imports of the wrappers an item's structure imports from, once each, in the structure's order: a
- * component folder's `<folder>/css`, and a companion app provider folder's viewer service registrations. A folder is the
- * catalog symbol whose `wrapperImport` it is; a function library's folder, or one the catalog doesn't have, brings
- * nothing.
+ * component folder's `<folder>/css`, after its ref types' (`addComponentCss`), and a companion app provider folder's
+ * viewer service registrations. A folder is the catalog symbol whose `wrapperImport` it is; a function library's
+ * folder, or one the catalog doesn't have, brings nothing.
  * @param {Iterable<string>} sources the structure's import sources
  * @param {WrapperCatalog} catalog
  * @param {string} generatedFolder the item's `_generated` folder, relative to the site app
+ * @param {RefElements} [refElements] the ref element types off the installed wrapper packages; the export, which runs
+ * before they are installed, has none
  * @returns {string[]}
  */
-export const wrapperSideEffectImports = (sources, catalog, generatedFolder) => {
+export const wrapperSideEffectImports = (sources, catalog, generatedFolder, refElements = {}) => {
     /** @type {Set<string>} */
     const imports = new Set()
+    /** @type {Set<string>} */
+    const seen = new Set()
     for (const source of sources) {
         const module = moduleFromWrapperEntry(source)
         if (!module) continue
         const { components = {}, contextProviders = {} } = catalog[module]?.entries ?? {}
         /** @param {string} name */
         const isFolder = name => wrapperImport({ module, symbol: name }) === source
-        if (Object.keys(components).some(isFolder)) imports.add(`${source}/css`)
+        const symbol = Object.keys(components).find(isFolder)
+        if (symbol) addComponentCss(catalog, refElements, module, symbol, imports, seen)
         if (module !== COMPANION_APP) continue
         const provider = Object.keys(contextProviders).find(isFolder)
         for (const service of (provider && contextProviders[provider].services) ?? []) {

package/src/cssPlugins/wixVectorUrls.js

@@ -1,43 +0,0 @@
-// Inlines the vector art a value names with Wix's own url scheme, `url(wix:vector://v1/<id>.svg)`, which no browser
-// can load: Image's `--maskImage`, for one. A live Wix site writes it as a data URI of the SVG stretched to its
-// drawing's box (Thunderbolt's `replaceWixUrl` and `createSvgCssVar`); this writes the same data URI in its place.
-// An SVG that can't be loaded stays as written, with a warning.
-
-import { loadedSvg, loadSvgs, scaleSvg, svgDataUrl, svgInfo } from './svg.js'
-
-const WIX_VECTOR_URL = /url\(\s*(['"]?)wix:vector:\/\/v1\/([^'")\s]+)\1\s*\)/gi
-const HAS_WIX_VECTOR_URL = /wix:vector:\/\//i
-
-/** The ids every `wix:vector` url in the stylesheet names. */
-const idsIn = root => {
-    const ids = new Set()
-    root.walkDecls(declaration => {
-        for (const [, , id] of declaration.value.matchAll(WIX_VECTOR_URL)) ids.add(id)
-    })
-    return ids
-}
-
-const checks = /** @type {const} */ ([])
-/** @typedef {typeof checks[number]} Check */
-
-/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
-export const wixVectorUrlsPlugin = {
-    checks,
-    name: 'wix-vector-urls',
-    // Last, so a url a mixin or preset copies elsewhere is inlined wherever it ends up.
-    order: 25,
-    prepare: root => loadSvgs(idsIn(root)),
-    transform(root, context) {
-        root.walkDecls(declaration => {
-            if (!HAS_WIX_VECTOR_URL.test(declaration.value)) return
-            declaration.value = declaration.value.replace(WIX_VECTOR_URL, (url, _quote, id) => {
-                const svg = loadedSvg(id)
-                if (svg === undefined) {
-                    context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
-                    return url
-                }
-                return svgDataUrl(scaleSvg(svg, svgInfo(svg), 'none'))
-            })
-        })
-    },
-}