@wix/origami-site-runtime 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-runtime",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Vite development and build helpers for wix-import static sites",
   "main": "./src/index.js",
   "files": [
@@ -19,7 +19,7 @@
     "@babel/types": "^7.25.2",
     "@wix/builder-error-pages": "^1.1.6",
     "@wix/builder-piler-components": "^1.6.7",
-    "@wix/origami-runtime": "0.9.0",
+    "@wix/origami-runtime": "0.10.0",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1",
     "react": "^18.3.1",
@@ -64,5 +64,5 @@
     "./default-error-404": "./src/default-error-404.jsx"
   },
   "type": "module",
-  "falconPackageHash": "85b492ce3a05b09e7ef072ed40132bd25eb8316f3c6e7549596f550d"
+  "falconPackageHash": "203443429f6ecbdef5a36d850631bd595d5680e2a7b26e65f97fbe5a"
 }

package/src/jsxPlugins/index.js

@@ -2,8 +2,9 @@
 // `order`. A descriptor needs a `name`, an `order`, and `transform(program, context)`, where
 // `program` is the Babel Program path for the module; see `../transform/types.js`.
 
+import { mediaValidationPlugin } from './mediaValidation/index.js'
 import { origamiCompatibilityPlugin } from './origamiCompatibility/index.js'
 import { layoutValidationPlugin } from './validation/index.js'
 
 /** @type {readonly import('../transform/types.js').JsxTransformPlugin[]} */
-export const jsxPlugins = Object.freeze([layoutValidationPlugin, origamiCompatibilityPlugin])
+export const jsxPlugins = Object.freeze([layoutValidationPlugin, mediaValidationPlugin, origamiCompatibilityPlugin])

package/src/jsxPlugins/mediaValidation/index.js

@@ -0,0 +1,49 @@
+// Fails the build on an Image whose `uri` is not a Wix media ID, such as a web URL or a local file.
+// The Wix import accepts such a `uri` but the image is broken on the site; `origami upload-media`
+// uploads it and points the Image at the uploaded file. `yarn dev` only warns, so the page still
+// previews. Like the layout rules, Image is identified by its JSX tag name, and a computed `uri` is
+// not checked.
+
+import { basename } from 'node:path'
+import { LayoutError } from '../../transform/layoutError.js'
+
+const STRUCTURE_FILES = new Set(['structure.tsx', 'structure.jsx'])
+
+// `117a96_1cff23187eeb4050a2a691bcdcad6502~mv2.jpg`: an account prefix, an underscore and a file name.
+const WIX_MEDIA_ID = /^[A-Za-z0-9]+_[A-Za-z0-9_~.-]+\.[A-Za-z0-9]+$/
+
+/** @type {import('../../transform/types.js').JsxTransformPlugin} */
+export const mediaValidationPlugin = {
+    name: 'wix-import-media-validation',
+    // Alongside the layout rules: before anything rewrites the tree.
+    order: -100,
+    appliesTo: context => STRUCTURE_FILES.has(basename(context.filePath)),
+
+    transform: (program, context) => {
+        const file = context.relativePath ?? context.filePath
+        const violations = []
+        let first
+        program.traverse({
+            JSXOpeningElement({ node }) {
+                if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'Image') return
+                const attributes = node.attributes.filter(attribute => attribute.type === 'JSXAttribute')
+                const image = attributes.find(attribute => attribute.name.name === 'image')?.value?.expression
+                const uri = image?.type === 'ObjectExpression' &&
+                    image.properties.find(property => property.key?.name === 'uri' || property.key?.value === 'uri')
+                if (uri?.value.type !== 'StringLiteral' || WIX_MEDIA_ID.test(uri.value.value)) return
+                const id = attributes.find(attribute => attribute.name.name === 'id')?.value?.value
+                const line = uri.loc?.start.line
+                violations.push(
+                    `${file}${line ? `:${line}` : ''} <Image${id ? ` id="${id}"` : ''}> image.uri "${uri.value.value}" is not a Wix media ID. Run \`origami upload-media\` to upload it.`
+                )
+                first ??= { file: context.filePath, line, column: uri.loc?.start.column }
+            },
+        })
+        if (violations.length === 0) return
+        if (context.command === 'serve') {
+            for (const violation of violations) console.warn(`[origami] ${violation}`)
+            return
+        }
+        throw new LayoutError(violations, first)
+    },
+}