@wix/origami-lint 1.34.40 → 1.34.41

package/README.md

@@ -14,7 +14,8 @@ dependencies and a `lint` script (`origami-lint`). It also writes the root `.git
 git doesn't ignore) and runs `git init` at the end (the lint keeps the last passing version in the site's repository).
 
 The lint runs only from the site's root: the folder it starts in is the site, and it stops unless that folder's
-`package.json` has `@wix/origami-lint` and the folder holds the git repository.
+`package.json` has `@wix/origami-lint`, the folder holds the git repository, and `packages/site-app/site-component-catalog.json`
+(which the export writes: what each imported tag is, a component or a context provider) is there and is JSON.
 
 ```bash
 yarn install                       # at the site's root

package/dist/rules/site-app/layout-design-notes.js

@@ -38,9 +38,11 @@ function checkElementLayout(input) {
         checkBox(component, input);
     if (type === 'innerElement')
         checkInternalContainer(component, input);
-    if (rulesApi.getRoot() === component)
+    if (isTopElement(node, rulesApi))
         checkMobileRules(input);
 }
+/** The page's top element: the root, or the element under the wrappers at the top (`<Remove>`, a context provider around `<Page>`). */
+const isTopElement = (node, rulesApi) => !rulesApi.isWrapper(node) && getHolders(node, rulesApi).length === 0;
 // ── a section and its canvas (KIT-sectionStack) ──
 /** A section, or a section's canvas, with `display: flex`. */
 function checkSectionIsGrid(component, what, input) {

package/dist/rules/site-app/page-structure.js

@@ -17,16 +17,18 @@
 // - an <InternalContainer>'s backgroundLayer / pinnedLayer, and a <Page>'s backgroundLayer / viewportLayer, is an array of elements
 //   (CONV-parseJsx.ts:1630);
 // - a <PinnedToScreen> takes no props and holds one section, header or footer, in its <Page> slot: a child of the <Page>, or its
-//   header / footer. A pinned section is never in the viewportLayer, which holds the page's other pinned components.
-// Wrappers are transparent for the tree, as they are for the import: a section wrapped in <Remove> or <PinnedToScreen> is still the
-// page's child.
+//   header / footer. A pinned section is never in the viewportLayer, which holds the page's other pinned components;
+// - a context provider (a tag the site's component catalog lists under an app's contextProviders, converter 0.68) holds exactly one
+//   component element (CONV-parseJsx.ts:1028), sits outside <Remove> (CONV-parseJsx.ts:1237), and isn't inside a tag of the same
+//   provider: the component it wraps already has that context (CONV-parseJsx.ts:1176; converter 0.98 parseJsx.ts:1707, :1720).
+// Wrappers are transparent for the tree, as they are for the import: a section wrapped in <Remove>, <PinnedToScreen> or a context
+// provider is still the page's child, and a global component's section in a provider is still its top element.
 // <Interaction> is no wrapper since converter 0.80 (interactions live in servicesConfigs/interactions.ts): allowed-imports
-// reports the tag, and it stays transparent here so the elements inside it aren't reported too. Context-provider wrappers join
-// once the page model lists the providers.
+// reports the tag, and it stays transparent here so the elements inside it aren't reported too.
 import { FILE_START } from "../../page-model/index.js";
 import { getName, GLOBAL_SECTIONS, LAYER_ATTRIBUTES, SECTIONS, WRAPPERS } from "../../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
-const CHECKS = ['missing_root', 'invalid_global_root', 'missing_root_id', 'invalid_page_root', 'non_element_child', 'invalid_section_container', 'nested_page', 'landmark_inside_container', 'invalid_wrapper_children', 'nested_remove', 'invalid_element_array', 'invalid_landmark_section', 'invalid_pinned_child', 'invalid_pinned_placement', 'pinned_wrapper_props', 'section_in_viewport_layer'];
+const CHECKS = ['missing_root', 'invalid_global_root', 'missing_root_id', 'invalid_page_root', 'non_element_child', 'invalid_section_container', 'nested_page', 'landmark_inside_container', 'invalid_wrapper_children', 'nested_remove', 'invalid_element_array', 'invalid_landmark_section', 'invalid_pinned_child', 'invalid_pinned_placement', 'pinned_wrapper_props', 'section_in_viewport_layer', 'provider_in_remove', 'nested_provider'];
 /** What <PinnedToScreen> may hold: a section, a header or footer, or a page's reference to a global one. */
 const PINNABLE = [...SECTIONS, ...GLOBAL_SECTIONS, 'headerLandmark', 'footerLandmark'];
 export default defineRule({
@@ -42,6 +44,8 @@ export default defineRule({
                 const type = input.rulesApi.getType(input.node);
                 if (type === 'pinnedToScreen')
                     checkPinnedToScreen(input);
+                if (type === 'provider')
+                    checkProvider(input);
                 if (type !== 'remove')
                     return;
                 holdsOneElement(input);
@@ -227,7 +231,41 @@ function checkViewportLayerItems({ node, rulesApi, report }) {
         report({ check: 'section_in_viewport_layer', loc: getLoc(element, rulesApi), message: `${describeElement(element, rulesApi)} is in the viewportLayer of ${describeElement(node, rulesApi)}. A pinned section, header or footer stays in its <Page> slot, wrapped in <PinnedToScreen>.` });
     }
 }
+/** A context provider: one element held, outside <Remove>, not inside a tag of the same provider. */
+function checkProvider(input) {
+    holdsOneElement(input);
+    checkProviderOutsideRemove(input);
+    checkNoProviderInSameProvider(input);
+}
+/** Reports a provider right inside a <Remove> (CONV-parseJsx.ts:1237): <Remove> wraps the component itself. Compared with the element right around it, as the import does. */
+function checkProviderOutsideRemove({ node, rulesApi, report }) {
+    const outer = getAncestors(node)[0];
+    if (!outer || rulesApi.getType(outer) !== 'remove')
+        return;
+    report({ check: 'provider_in_remove', loc: node.openingElement.name.loc, message: `<${rulesApi.getTagName(node)}> is inside <${rulesApi.getTagName(outer)}>. <Remove> wraps the component itself: put the context provider outside it.` });
+}
+/** Reports a provider inside a tag of the same provider, among the wrappers around the same component (CONV-parseJsx.ts:1176): its context is already there. */
+function checkNoProviderInSameProvider({ node, rulesApi, report }) {
+    const entry = rulesApi.getComponentCatalogEntry(node);
+    const outer = getWrappersAround(node, rulesApi).find((wrapper) => {
+        const outerEntry = rulesApi.getComponentCatalogEntry(wrapper);
+        return outerEntry !== null && entry !== null && outerEntry.app === entry.app && outerEntry.name === entry.name;
+    });
+    if (!outer)
+        return;
+    report({ check: 'nested_provider', loc: node.openingElement.name.loc, message: `<${rulesApi.getTagName(node)}> is inside <${rulesApi.getTagName(outer)}>, the same context provider: the component it wraps already has that context. Remove the inner one.` });
+}
 // ── reading the tree ──
+/** The wrappers right around an element, closest first, up to the first component. */
+function getWrappersAround(element, rulesApi) {
+    const wrappers = [];
+    for (const ancestor of getAncestors(element)) {
+        if (!isWrapper(ancestor, rulesApi))
+            break;
+        wrappers.push(ancestor);
+    }
+    return wrappers;
+}
 /** A section, header or footer, which <PinnedToScreen> may hold. */
 const isPinnable = (element, rulesApi) => {
     const type = rulesApi.getType(element);
@@ -249,7 +287,7 @@ function headerOrFooter(type) {
         return 'footer';
     return null;
 }
-/** <Remove>, <Interaction>: a tag that wraps one component and isn't one. */
+/** <Remove>, <Interaction>, <PinnedToScreen>, a context provider: a tag that wraps one component and isn't one. */
 function isWrapper(element, rulesApi) {
     const type = rulesApi.getType(element);
     return type !== null && WRAPPERS.includes(type);

package/dist/rules-api/component-catalog.js

@@ -0,0 +1,31 @@
+// The site component catalog the export writes (site-component-catalog.json): the site's apps, and the components, context
+// providers and function libraries each one has. Read once per site and held as it is; rulesApi.getComponentCatalogEntry asks
+// about one tag at a time, and getCatalogEntry looks that tag up in it.
+import { readJsonFile } from "../shared/paths.js";
+import { COMPONENT_CATALOG_FILE } from "../shared/site-files-tree-mapping.js";
+/** An app's wrapper, as the export imports it: `@origami-wrappers/<app>/<folder>`, the folder its name lowercased (wrapperImport, origami-transforms). */
+const WRAPPER_IMPORT = /^@origami-wrappers\/([^/]+)\/[^/]+$/;
+/** The catalog's entry of a name imported from an app's wrapper, by its app and the name it's imported under:
+ * `import { CmsProvider_books } from '@origami-wrappers/WixCMS/cmsprovider_books'` → WixCMS's contextProviders.CmsProvider_books.
+ * null for an import from anywhere else, or a name the catalog doesn't list. */
+export function getCatalogEntry(catalog, source, imported) {
+    const app = WRAPPER_IMPORT.exec(source)?.[1];
+    const entries = app === undefined ? undefined : catalog?.[app]?.entries;
+    if (app === undefined || !entries)
+        return null;
+    if (Object.hasOwn(entries.components ?? {}, imported))
+        return { app, name: imported, kind: 'component' };
+    if (Object.hasOwn(entries.contextProviders ?? {}, imported))
+        return { app, name: imported, kind: 'contextProvider' };
+    if (Object.hasOwn(entries.functionLibraries ?? {}, imported))
+        return { app, name: imported, kind: 'functionLibrary' };
+    return null;
+}
+const catalogs = new Map();
+/** The catalog of the site at root, read on the first call for that site; undefined when it has none. The lint stops before any
+ * page when the site has no catalog it can read (checkStartedAtSiteRoot). */
+export function readComponentCatalog(root) {
+    if (!catalogs.has(root))
+        catalogs.set(root, readJsonFile(root, COMPONENT_CATALOG_FILE));
+    return catalogs.get(root);
+}

package/dist/rules-api/rules-api.js

@@ -1,7 +1,9 @@
 // The rules API of one linted file: its page, and the functions over it that the lint tool can't provide (mostly CSS),
 // and reading the file's own code that more than one rule needs (what type a tag is, its name, its id, its slot, its children, the elements in its attributes, where a name is imported from, the name an import is exported under, what is TypeScript, the props an arrow destructures).
-// One per file, shared by every rule on it. Only building its page reads from disk, once per file.
+// One per file, shared by every rule on it. Only building its page reads from disk, once per file; and the site's component catalog,
+// once per site, when a rule first asks what a tag from an app's wrapper is.
 import path from 'node:path';
+import { getCatalogEntry, readComponentCatalog } from "./component-catalog.js";
 import { GLOBAL_COMPONENTS_FOLDER } from "../shared/site-files-tree-mapping.js";
 import { isCollectingStats, models, pageId } from "../bi/stats.js";
 import { readPage } from "../page-model/index.js";
@@ -11,13 +13,18 @@ import { LAYER_ATTRIBUTES, WRAPPERS } from "../shared/constants.js";
 import { getEnclosingAtRules, isBaseDeclaration } from "./utils.js";
 /** Theme lines come from @apply inside style.css, so style.css's own lines usually come after them. */
 const CASCADE_ORDER = ['layout', 'theme', 'style'];
-/** The rules API over a page already built. */
-export function createRulesApi(page) {
+/** The rules API over a page already built. readCatalog: the site's component catalog, read when a rule first asks about a tag from an app's wrapper. */
+export function createRulesApi(page, readCatalog = () => undefined) {
     const componentsBySourceStart = new Map(Object.values(page.components).map((component) => [component.sourceStart, component]));
     const getParent = (component) => (component.parentKey ? (page.components[component.parentKey] ?? null) : null);
     const getCss = (component, property) => CASCADE_ORDER.flatMap((kind) => component.css[kind][property] ?? []);
+    const getComponentCatalogEntry = (element) => {
+        const found = getImport(getTagName(element).split('.')[0], getProgram(element));
+        return found?.kind === 'wrapper' ? getCatalogEntry(readCatalog(), found.source, found.imported) : null;
+    };
+    const getElementType = (element) => getType(element, getProgram(element)) ?? (getComponentCatalogEntry(element)?.kind === 'contextProvider' ? 'provider' : null);
     const isWrapper = (element) => {
-        const type = getType(element, getProgram(element));
+        const type = getElementType(element);
         return type !== null && WRAPPERS.includes(type);
     };
     const getChildElements = (node) => getChildren(node).flatMap((child) => {
@@ -44,8 +51,9 @@ export function createRulesApi(page) {
         getCustomMedia: (kind) => readCustomMedia(page.css.files[kind]),
         getBreakpointName: readBreakpointName,
         getEnclosingAtRules,
-        getType: (node) => getType(node, getProgram(node)),
+        getType: getElementType,
         isWrapper,
+        getComponentCatalogEntry,
         getTagName,
         getId,
         getChildren,
@@ -70,7 +78,7 @@ export function getOrCreateRulesApi(file) {
         const started = performance.now();
         let errorName;
         try {
-            rulesApi = createRulesApi(readPage(file.cwd, { jsxFile: getRelativeJsxPath(file), text: file.text, program: file.program }));
+            rulesApi = createRulesApi(readPage(file.cwd, { jsxFile: getRelativeJsxPath(file), text: file.text, program: file.program }), () => readComponentCatalog(file.cwd));
             rulesApis.set(file.filename, rulesApi);
         }
         catch (error) {

package/dist/shared/constants.js

@@ -6,8 +6,9 @@ export const CATALOG_FONTS = new Map(fonts.map((font) => [font.id, font]));
 export const SECTIONS = ['section', 'header', 'footer'];
 /** A page's reference to a global component (`<HeaderSection_x sharedCompId="…" />`). */
 export const GLOBAL_SECTIONS = ['globalHeader', 'globalFooter', 'globalSection'];
-/** A tag that wraps one component and isn't one itself: `<Remove when={…}>`, `<Interaction interactKey="…">`, `<PinnedToScreen>` (the import drops it). */
-export const WRAPPERS = ['remove', 'interaction', 'pinnedToScreen'];
+/** A tag that wraps one component and isn't one itself: `<Remove when={…}>`, `<Interaction interactKey="…">`, `<PinnedToScreen>` (the import drops it),
+ * and a context provider (`<CmsProvider_books>`: the import makes it a context of the component it wraps). */
+export const WRAPPERS = ['remove', 'interaction', 'pinnedToScreen', 'provider'];
 /** The interactions packages, which the import reserves: structure.jsx imports nothing from them. Matched by source, not by name: `Interact` from @site/site-code is the site's own. */
 export const INTERACTIONS_PACKAGES = ['interactReact', 'interact', 'motionPresets'];
 /** The name a structure file exports its tree under: `export const Structure = () => (…)`. */

package/dist/shared/paths.js

@@ -1,5 +1,6 @@
 import { existsSync, readFileSync } from 'node:fs';
 import path from 'node:path';
+import { COMPONENT_CATALOG_FILE } from "./site-files-tree-mapping.js";
 /** The site: the folder the lint was started from (`yarn lint` at the site's root). */
 export const ROOT = process.cwd();
 export const LINT_DIR = path.join(ROOT, '.lint');
@@ -7,7 +8,8 @@ export const LINT_DIR = path.join(ROOT, '.lint');
 export const LINT_PACKAGE_FILE = path.resolve(import.meta.dirname, '../../package.json');
 const LINT_PACKAGE = 'origami-lint';
 const LINT_PACKAGE_NAME = `@wix/${LINT_PACKAGE}`;
-/** The lint runs only from the folder whose package.json adds it, which holds the site's git repository. */
+/** The lint runs only from the folder whose package.json adds it, which holds the site's git repository and the component catalog the export
+ * wrote (what each imported tag is: a component, or a context provider). */
 export function checkStartedAtSiteRoot() {
     const problem = siteRootProblem();
     if (!problem)
@@ -23,6 +25,36 @@ function siteRootProblem() {
     if (!existsSync(path.join(ROOT, '.git'))) {
         return { error_name: 'no_git', message: `no git repository in ${ROOT}. The lint keeps the last passing version in the site's repository: run git init here.` };
     }
+    const catalog = readTextFile(ROOT, COMPONENT_CATALOG_FILE);
+    if (catalog === undefined) {
+        return { error_name: 'no_component_catalog', message: `${COMPONENT_CATALOG_FILE} not found: export the site again.` };
+    }
+    if (!isJson(catalog)) {
+        return { error_name: 'invalid_component_catalog', message: `${COMPONENT_CATALOG_FILE} isn't valid JSON: export the site again.` };
+    }
     return null;
 }
+function isJson(text) {
+    try {
+        JSON.parse(text);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
 const addsTheLint = ({ dependencies, devDependencies }) => LINT_PACKAGE_NAME in { ...dependencies, ...devDependencies };
+/** A site file's text, by its path from the site's root; undefined when it doesn't exist. */
+export function readTextFile(root, file) {
+    try {
+        return readFileSync(path.join(root, file), 'utf8');
+    }
+    catch {
+        return undefined;
+    }
+}
+/** A site JSON file, parsed, by its path from the site's root; undefined when it doesn't exist. Throws on a file that isn't JSON. */
+export function readJsonFile(root, file) {
+    const text = readTextFile(root, file);
+    return text === undefined ? undefined : JSON.parse(text);
+}

package/dist/shared/site-files-tree-mapping.js

@@ -12,3 +12,5 @@ export const GLOBAL_COMPONENTS_FOLDER = `${SITE_SRC}/${GLOBAL_COMPONENTS}`;
 /** Inside src/: one file per menu. A page imports a menu from here (`global/menus/<menu id>`). */
 export const GLOBAL_MENUS = 'global/menus';
 export const THEME_FILE = `${GLOBAL_FOLDER}/themes/theme.css`;
+/** The site component catalog the export writes: the components, context providers and function libraries of the site's apps. */
+export const COMPONENT_CATALOG_FILE = 'packages/site-app/site-component-catalog.json';

package/dist/shared/utils.js

@@ -32,7 +32,8 @@ const KIND_BY_IMPORT_SOURCE = [
     [/^@origami-wrappers\//, 'wrapper'],
     [/^@site\/site-code\/[^/]+$/, 'siteCode'],
 ];
-/** <Band> with `import { Section as Band } from '@wix/origami-system-components/Section'` → 'section'. `<Band.Item>` is Band's. A wrapper is the named export: `<Show>` from the runtime is null. */
+/** <Band> with `import { Section as Band } from '@wix/origami-system-components/Section'` → 'section'. `<Band.Item>` is Band's. A wrapper is the named export: `<Show>` from the runtime is null.
+ * A context provider ('provider') is known from the site's component catalog: rulesApi.getType adds it. */
 export function getType(element, program) {
     const found = getImport(getTagName(element).split('.')[0], program);
     const entry = found && TYPE_BY_IMPORT_SOURCE.find(([pattern]) => pattern.test(found.source));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.40",
+  "version": "1.34.41",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -26,7 +26,7 @@
     "eslint": "^10.12.0",
     "postcss": "^8.5.3",
     "typescript": "^5.8.3 || ~6.0.3",
-    "@wix/origami-bi": "0.16.0"
+    "@wix/origami-bi": "0.17.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -54,5 +54,5 @@
       ]
     }
   },
-  "falconPackageHash": "9c6ab750e32b2a94bd49882a2a34c6242fba5eb6ba4bd879b9eced82"
+  "falconPackageHash": "cd79205599adab600f2e5287c59ffd8f71d60a92c28f544cf5fe719f"
 }