@wix/origami-lint 1.34.29 → 1.34.30

package/dist/rules/index.js

@@ -7,6 +7,7 @@ import cssLayoutProperties from "./site-app/css-layout-properties.js";
 import cssSelectors from "./site-app/css-selectors.js";
 import dataValues from "./site-app/data-values.js";
 import globalStyles from "./site-app/global-styles.js";
+import knownTags from "./site-app/known-tags.js";
 import noAbsoluteSection from "./site-app/no-absolute-section.js";
 import pageStructure from "./site-app/page-structure.js";
 import slotAttributes from "./site-app/slot-attributes.js";
@@ -16,5 +17,5 @@ import themeFontKnown from "./site-app/theme-font-known.js";
 import themeRoot from "./site-app/theme-root.js";
 import noFreeCode from "./site-app/no-free-code.js";
 // Execution registries combine already-checked rules; only this boundary erases their individual key unions.
-export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement];
+export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags];
 export { defineRule } from "./site-app/define-rule.js";

package/dist/rules/site-app/allowed-imports.js

@@ -3,12 +3,10 @@
 // refuses a tag from them, parseJsx.ts:471, identity.ts:80; a call is free code, and fn() / ctx() refuse them as a source).
 import path from 'node:path';
 import { CSS_FILES, JSX_FILES } from "../../page-model/index.js";
-import { BUILDERS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE } from "../../rules-api/index.js";
+import { BUILDERS, INTERACTIONS_PACKAGES, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE } from "../../rules-api/index.js";
 import { GLOBAL_COMPONENTS, GLOBAL_COMPONENTS_FOLDER, GLOBAL_FOLDER, SITE_SRC } from "../../shared/site-files-tree-mapping.js";
 import { defineRule } from "./define-rule.js";
 const CHECKS = ['disallowed_import_source', 'interaction_import', 'missing_global_import_name', 'invalid_global_import_name', 'default_builder_import', 'aliased_builder_import', 'wrong_builder_source'];
-/** 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. */
-const INTERACTIONS_PACKAGES = ['interactReact', 'interact', 'motionPresets'];
 const SOURCE_HINT = `Only packages, files in ${path.posix.basename(GLOBAL_FOLDER)}/, and ${CSS_FILES.map((file) => `'./${file}'`).join(' or ')} can be.`;
 export default defineRule({
     name: 'allowed-imports',

package/dist/rules/site-app/known-tags.js

@@ -0,0 +1,100 @@
+// How a structure file writes its tags, as the converter reads them (tagOf and validTagOrIssue, parseJsx.ts, converter 0.88):
+// - a tag is <Name> or <NS.Name>: no <svg:rect>, no <UI.Forms.Input> (tracker CONV-parseJsx.ts:401);
+// - a lowercase tag is an HTML element, which the import refuses: <div> (CONV-parseJsx.ts:379). page-structure already reports
+//   one at the top of the file or directly in a section, so this rule doesn't. <NS.Name> needs `import * as NS` (379);
+// - no component comes from a source that holds none: the runtime (except <Remove>), a menu, `document/…`, @wix/sdk (CONV-parseJsx.ts:351).
+//   The DM's own `document` holds the classic components (<ClassicSection>). allowed-imports reports @wix/interact and
+//   @wix/motion-presets on the import line;
+// - a tag's name is capitalized (CONV-parseJsx.ts:359). It reads the local name: the export imports a context provider as
+//   `import { cartContext as CartContext }`, and only the site's providers tell it apart from `import { image as Image }`.
+// A capitalized tag with no import, <NS.Name> with no NS, and a namespace written as <NS> are TypeScript's (#409): it reports a name not in scope.
+import { INTERACTIONS_PACKAGES, SECTIONS } from "../../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+const CHECKS = ['unsupported_tag_name', 'html_tag', 'named_import_as_namespace', 'tag_from_reserved_source', 'lowercase_tag'];
+/** The converter's TAG_PATTERN (identity.ts). */
+const TAG_PATTERN = /^[A-Z][A-Za-z0-9_$]*$/;
+/** The sources the converter reserves (isReservedRegistry, identity.ts) that allowed-imports doesn't already report. */
+const RESERVED_SOURCES = ['runtime', 'menu', 'document', 'sdk'];
+/** The one tag the runtime has: the <Remove> wrapper. */
+const RUNTIME_TAG = 'Remove';
+export default defineRule({
+    name: 'known-tags',
+    checks: CHECKS,
+    editors: ['studio2'],
+    callbacks: {
+        JSXElement: (input) => {
+            if (!input.rulesApi.getComponent(input.node))
+                return;
+            if (!checkTagNameShape(input))
+                return;
+            if (!checkTagNotHtml(input))
+                return;
+            if (!checkTagNamespaceImport(input))
+                return;
+            if (!checkTagSource(input))
+                return;
+            checkTagCapitalized(input);
+        },
+    },
+});
+// ── the steps: each reports its problem; one that returns false ends the steps for the tag, as the converter stops at its first ──
+/** Reports <svg:rect> and <UI.Forms.Input> (CONV-parseJsx.ts:401). */
+function checkTagNameShape({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    if (name.type === 'JSXIdentifier' || (name.type === 'JSXMemberExpression' && name.object.type === 'JSXIdentifier'))
+        return true;
+    report({ check: 'unsupported_tag_name', loc: name.loc, message: `<${rulesApi.getTagName(node)}> is not a supported tag name: write <Name> or <NS.Name> (one namespace import, one dot).` });
+    return false;
+}
+/** Reports a lowercase tag with no import: an HTML element (CONV-parseJsx.ts:379), unless page-structure reports it already. */
+function checkTagNotHtml({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    if (name.type !== 'JSXIdentifier' || !/^[a-z]/.test(name.name) || rulesApi.getImport(node))
+        return true;
+    if (!isReportedByPageStructure(node, rulesApi)) {
+        report({ check: 'html_tag', loc: name.loc, message: `<${name.name}> is an HTML tag, which the import refuses: use an imported component (import { Name } from '@origami-wrappers/<app>/<name>', then <Name>).` });
+    }
+    return false;
+}
+/** Reports <NS.Name> whose NS is imported by name, not as `import * as NS` (CONV-parseJsx.ts:379). With no import at all, it's TypeScript's; from an interactions package, allowed-imports'. */
+function checkTagNamespaceImport({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    const found = rulesApi.getImport(node);
+    if (name.type !== 'JSXMemberExpression' || name.object.type !== 'JSXIdentifier' || !found || found.imported === '*' || (found.kind && INTERACTIONS_PACKAGES.includes(found.kind)))
+        return true;
+    const namespace = name.object.name;
+    report({ check: 'named_import_as_namespace', loc: name.loc, message: `<${namespace}.${name.property.name}> reads \`${namespace}\` as a namespace, but \`${namespace}\` is imported by name: import it as \`import * as ${namespace} from '${found.source}'\`, or import ${name.property.name} by name and write <${name.property.name}>.` });
+    return false;
+}
+/** Reports a tag imported from a source that holds no components (CONV-parseJsx.ts:351). <Remove> from the runtime is a wrapper. */
+function checkTagSource({ node, rulesApi, report }) {
+    const found = rulesApi.getImport(node);
+    if (!found?.kind || !RESERVED_SOURCES.includes(found.kind) || (found.kind === 'runtime' && found.imported === RUNTIME_TAG))
+        return true;
+    const tag = rulesApi.getTagName(node);
+    const menuHint = found.kind === 'menu' ? `, and use the menu as a value (items: ${tag}.items)` : '';
+    report({ check: 'tag_from_reserved_source', loc: node.openingElement.name.loc, message: `<${tag}> is imported from '${found.source}', which holds no components (menus, runtime builders, document/…, @wix/sdk): import the component from its @origami-wrappers package${menuHint}.` });
+    return false;
+}
+/** Reports a tag whose name isn't capitalized (CONV-parseJsx.ts:359): its local name, and the name the converter reads (the imported name), both.
+ * A namespace as a tag is TypeScript's; a tag from an interactions package, allowed-imports'. */
+function checkTagCapitalized({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    const found = rulesApi.getImport(node);
+    if (name.type !== 'JSXIdentifier' || !found || found.imported === '*' || (found.kind && INTERACTIONS_PACKAGES.includes(found.kind)))
+        return;
+    if (TAG_PATTERN.test(name.name) || TAG_PATTERN.test(found.imported))
+        return;
+    report({ check: 'lowercase_tag', loc: name.loc, message: `<${name.name}> must be capitalized: import the component under its capitalized export name (import { Name } from '${found.source}') and write <Name>; a lowercase tag is an HTML element.` });
+}
+// ── reading the code ──
+/** page-structure reports an element at the top of the file, and one directly in a section: its closest holder, wrappers skipped, is none or a section. */
+function isReportedByPageStructure(node, rulesApi) {
+    for (let holder = node.parent; holder; holder = holder.parent) {
+        if (holder.type !== 'JSXElement' || rulesApi.isWrapper(holder))
+            continue;
+        const type = rulesApi.getType(holder);
+        return type !== null && SECTIONS.includes(type) && rulesApi.getChildElements(holder).includes(node);
+    }
+    return true;
+}

package/dist/rules-api/index.js

@@ -2,5 +2,5 @@
 export { createRulesApi, getOrCreateRulesApi } from "./rules-api.js";
 export { createCssFileReporter, describeAtRule, reportCssProblem } from "./report.js";
 export { bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getParamReadKind, getProperty, isBound, isOneEditAway, isRecord, isReservedAttribute, isStructure, isReadByImport, ownerOf, } from "../shared/utils.js";
-export { BUILDERS, CATALOG_FONTS, CALLBACK_PROP, DATA_KEY, ELEMENT_PROPS, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, WRAPPERS, } from "../shared/constants.js";
+export { BUILDERS, CATALOG_FONTS, CALLBACK_PROP, DATA_KEY, ELEMENT_PROPS, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, INTERACTIONS_PACKAGES, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, WRAPPERS, } from "../shared/constants.js";
 export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readSegment } from "../shared/css.js";

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

@@ -40,6 +40,7 @@ export function createRulesApi(page) {
         getBreakpointName: readBreakpointName,
         getEnclosingAtRules,
         getType: (node) => getType(node, getProgram(node)),
+        isWrapper,
         getTagName,
         getId,
         getChildren,

package/dist/shared/constants.js

@@ -8,6 +8,8 @@ export const SECTIONS = ['section', 'header', 'footer'];
 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'];
+/** 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 = () => (…)`. */
 export const STRUCTURE = 'Structure';
 /** The props a global component's Structure may take: its instance identity, `({ id, className })` (#300). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.29",
+  "version": "1.34.30",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -52,5 +52,5 @@
       ]
     }
   },
-  "falconPackageHash": "2c36ab85acce27a2dc10d53da990328e863a2935e38f2d82a6dd7467"
+  "falconPackageHash": "335c078a8c6afc26c556fcd6c71643e777664f3b26b63a3b7b9832a4"
 }