@open-dy/vibecoding-sdk-taro 0.0.1 → 0.0.2

package/src/eslint/eslint-plugin-custom-navigation.mjs

@@ -0,0 +1,290 @@
+/**
+ * 强制小程序页面使用自定义导航栏：app config 必须声明 navigationStyle: 'custom'，
+ * page config 若声明 navigationStyle 也只能是 custom，每个页面必须显式声明导航前景色，
+ * 且每个页面入口必须接入顶部避让。
+ */
+import { createRequire } from 'node:module';
+
+const ts = createRequire(import.meta.url)('typescript');
+
+const CUSTOM = 'custom';
+const NAVIGATION_TEXT_STYLES = new Set(['black', 'white']);
+
+const CUSTOM_NAV_IMPORTS = new Set([
+  '@/components/custom-nav-space',
+  '@/hooks/use-custom-nav-layout',
+  '@/lib/custom-nav-layout',
+]);
+
+const FORBIDDEN_NAVIGATION_APIS = new Map([
+  ['setNavigationBarTitle', '禁止修改导航栏标题'],
+  ['setNavigationBarColor', '禁止修改导航栏颜色、前景色或状态栏样式'],
+  ['showNavigationBarLoading', '禁止显示导航栏 loading'],
+  ['hideNavigationBarLoading', '禁止隐藏导航栏 loading'],
+  ['hideHomeButton', '禁止隐藏左上角首页或 logo 按钮'],
+]);
+
+function getPropertyName(prop) {
+  if (!ts.isPropertyAssignment(prop)) return null;
+  if (ts.isIdentifier(prop.name)) return prop.name.text;
+  if (ts.isStringLiteral(prop.name)) return prop.name.text;
+  return null;
+}
+
+function getStringLiteral(node) {
+  if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+    return node.text;
+  }
+  return null;
+}
+
+function getStaticPropertyName(node) {
+  if (!node.computed && node.property.type === 'Identifier') {
+    return node.property.name;
+  }
+  if (
+    node.computed &&
+    node.property.type === 'Literal' &&
+    typeof node.property.value === 'string'
+  ) {
+    return node.property.value;
+  }
+  return null;
+}
+
+function getPropertyKeyName(node) {
+  if (!node.computed && node.key.type === 'Identifier') {
+    return node.key.name;
+  }
+  if (node.key.type === 'Literal' && typeof node.key.value === 'string') {
+    return node.key.value;
+  }
+  return null;
+}
+
+/**
+ * @returns {{ windowStyle: string | null, pageStyle: string | null, windowTextStyle: string | null, pageTextStyle: string | null, invalid: Array<{ kind: string, value: string | null }> } | null}
+ */
+function extractNavigationStyles(filePath, text) {
+  const sf = ts.createSourceFile(filePath, text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+  let result = null;
+
+  function fromObjectLiteral(obj) {
+    const out = {
+      windowStyle: null,
+      pageStyle: null,
+      windowTextStyle: null,
+      pageTextStyle: null,
+      invalid: [],
+    };
+
+    for (const prop of obj.properties) {
+      if (!ts.isPropertyAssignment(prop)) continue;
+      const key = getPropertyName(prop);
+
+      if (key === 'navigationStyle') {
+        const value = getStringLiteral(prop.initializer);
+        out.pageStyle = value;
+        if (value !== CUSTOM) {
+          out.invalid.push({ kind: 'page', value });
+        }
+      }
+
+      if (key === 'navigationBarTextStyle') {
+        out.pageTextStyle = getStringLiteral(prop.initializer);
+      }
+
+      if (key === 'window' && ts.isObjectLiteralExpression(prop.initializer)) {
+        for (const windowProp of prop.initializer.properties) {
+          if (!ts.isPropertyAssignment(windowProp)) continue;
+          const windowKey = getPropertyName(windowProp);
+          if (windowKey === 'navigationStyle') {
+            const value = getStringLiteral(windowProp.initializer);
+            out.windowStyle = value;
+            if (value !== CUSTOM) {
+              out.invalid.push({ kind: 'window', value });
+            }
+          }
+          if (windowKey === 'navigationBarTextStyle') {
+            out.windowTextStyle = getStringLiteral(windowProp.initializer);
+          }
+        }
+      }
+    }
+
+    return out;
+  }
+
+  function visit(node) {
+    if (result) return;
+    if (ts.isExportAssignment(node) && !node.isExportEquals && node.expression) {
+      const expr = node.expression;
+      if (
+        ts.isCallExpression(expr) &&
+        expr.arguments[0] &&
+        ts.isObjectLiteralExpression(expr.arguments[0])
+      ) {
+        result = fromObjectLiteral(expr.arguments[0]);
+      } else if (ts.isObjectLiteralExpression(expr)) {
+        result = fromObjectLiteral(expr);
+      }
+    }
+    ts.forEachChild(node, visit);
+  }
+
+  visit(sf);
+  return result;
+}
+
+const CONFIG_MESSAGE =
+  '小程序页面必须使用自定义导航栏：navigationStyle 只能是 "custom"，禁止改成 default 或其他值。' +
+  '页面顶部请用 <CustomNavSpace /> 或 useCustomNavLayout() 避让状态栏与胶囊。';
+
+const TEXT_STYLE_MESSAGE =
+  '请根据该页面首次进入时顶部区域的实际明暗，显式设置 navigationBarTextStyle：' +
+  '浅色顶部使用 "black"，深色顶部使用 "white"。';
+
+/** @type {import('eslint').Rule.RuleModule} */
+const requireCustomNavigationStyle = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '强制自定义导航，并要求 app fallback 与每个页面显式声明导航前景色',
+    },
+    schema: [],
+  },
+  create(context) {
+    const filePath = context.filename.replace(/\\/g, '/');
+    const isApp = filePath.endsWith('/src/app.config.ts') || filePath.endsWith('src/app.config.ts');
+    const isPageConfig = /\/src\/pages\/.+\.config\.ts$/.test(filePath);
+    if (!isApp && !isPageConfig) return {};
+
+    return {
+      Program(node) {
+        const sourceText = context.sourceCode.getText(node);
+        const parsed = extractNavigationStyles(filePath, sourceText);
+
+        if (!parsed) {
+          context.report({
+            node,
+            message: `无法解析 ${isApp ? 'defineAppConfig' : 'definePageConfig'}，请使用对象字面量声明。${CONFIG_MESSAGE}`,
+          });
+          return;
+        }
+
+        if (isApp && parsed.windowStyle !== CUSTOM) {
+          context.report({
+            node,
+            message:
+              `src/app.config.ts 的 window.navigationStyle 必须为 "custom"（当前：${parsed.windowStyle ?? '未设置'}）。${CONFIG_MESSAGE}`,
+          });
+        }
+
+        const textStyle = isApp ? parsed.windowTextStyle : parsed.pageTextStyle;
+        if (!NAVIGATION_TEXT_STYLES.has(textStyle)) {
+          context.report({
+            node,
+            message:
+              `${isApp ? 'src/app.config.ts 的 window' : '页面配置'}.navigationBarTextStyle ` +
+              `必须为 "black" 或 "white"（当前：${textStyle ?? '未设置'}）。${TEXT_STYLE_MESSAGE}`,
+          });
+        }
+
+        for (const item of parsed.invalid) {
+          if (isApp && item.kind === 'window') continue;
+          context.report({
+            node,
+            message:
+              `禁止将 ${item.kind === 'window' ? 'window.' : ''}navigationStyle 设为 ${JSON.stringify(item.value)}。${CONFIG_MESSAGE}`,
+          });
+        }
+      },
+    };
+  },
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const pagesMustUseCustomNavSpace = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '页面入口必须使用 CustomNavSpace 或 useCustomNavLayout 避让自定义导航栏区域',
+    },
+    schema: [],
+  },
+  create(context) {
+    const filePath = context.filename.replace(/\\/g, '/');
+    if (!/\/src\/pages\/.+\/index\.[jt]sx$/.test(filePath)) return {};
+
+    let used = false;
+
+    return {
+      ImportDeclaration(node) {
+        if (typeof node.source.value === 'string' && CUSTOM_NAV_IMPORTS.has(node.source.value)) {
+          used = true;
+        }
+      },
+      'Program:exit'(node) {
+        if (used) return;
+        context.report({
+          node,
+          message:
+            '小程序页面必须 import <CustomNavSpace /> 或 useCustomNavLayout() 做顶部避让，' +
+            '禁止改回原生导航，也禁止只用固定 pt-* / safe-area 代替。',
+        });
+      },
+    };
+  },
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noNavigationControlApis = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: '禁止小程序页面调用会修改宿主导航栏或左上角按钮的 API',
+    },
+    schema: [],
+  },
+  create(context) {
+    function report(node, apiName) {
+      const reason = FORBIDDEN_NAVIGATION_APIS.get(apiName);
+      if (!reason) return;
+
+      context.report({
+        node,
+        message:
+          `小程序页面禁止使用 ${apiName}：${reason}。` +
+          '导航栏和左上角按钮由宿主及自定义导航模板统一管理。',
+      });
+    }
+
+    return {
+      MemberExpression(node) {
+        report(node.property, getStaticPropertyName(node));
+      },
+      ImportSpecifier(node) {
+        const importedName = node.imported.type === 'Identifier'
+          ? node.imported.name
+          : node.imported.value;
+        report(node.imported, importedName);
+      },
+      Property(node) {
+        if (node.parent.type !== 'ObjectPattern') return;
+        report(node.key, getPropertyKeyName(node));
+      },
+      CallExpression(node) {
+        if (node.callee.type !== 'Identifier') return;
+        report(node.callee, node.callee.name);
+      },
+    };
+  },
+};
+
+export default {
+  rules: {
+    'require-custom-navigation-style': requireCustomNavigationStyle,
+    'pages-must-use-custom-nav-space': pagesMustUseCustomNavSpace,
+    'no-navigation-control-apis': noNavigationControlApis,
+  },
+};

package/src/eslint/taro.mjs

@@ -6,6 +6,7 @@ import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import importPlugin from 'eslint-plugin-import';
 import globals from 'globals';
 import microappPages from './eslint-plugin-microapp-pages.mjs';
+import customNavigation from './eslint-plugin-custom-navigation.mjs';
 
 const REMOTE_CSS_IMPORT_PATTERN =
   /@import\s+(?:url\(\s*['"]?((?:https?:)?\/\/[^'")\s]+)['"]?\s*\)|['"]((?:https?:)?\/\/[^'"\s]+)['"])/g;
@@ -69,7 +70,7 @@ function createLucideColorCheckPlugin(importSources = ['@open-dy/lucide-taro'])
 const cssImportGuardPlugin = {
   processors: {
     css: {
-      preprocess(text) {
+      preprocess(text, filename) {
         const lines = text.replace(/\/\*[\s\S]*?\*\//g, comment => {
           if (comment.includes('eslint-')) return comment;
           return comment.replace(/[^\n]/g, ' ');
@@ -101,6 +102,18 @@ const cssImportGuardPlugin = {
           ].join(' ');
         });
 
+        // Scope this guard to the SDK-based host app; OpenCard has its own CSS pipeline.
+        if (filename.replaceAll('\\', '/').endsWith('/src/app.css')) {
+          const css = lines.join('\n');
+          const imports = [...css.matchAll(/@import\s+(?:url\(\s*)?['"]([^'"]+)['"]/g)]
+            .map(match => match[1]);
+          const usesSdkTheme = imports.some(value => /^@[^/]+\/vibecoding-sdk-taro\/ui\/tailwind\.css$/.test(value));
+          const hasUtilities = imports.some(value => ['weapp-tailwindcss', 'tailwindcss', 'tailwindcss/utilities.css', 'weapp-tailwindcss/utilities.css'].includes(value))
+            || /@tailwind\s+utilities\s*;/.test(css);
+          if (usesSdkTheme && !hasUtilities) {
+            virtualLines[0] = `${virtualLines[0] ?? ''} __cssMissingTailwindEntry();`;
+          }
+        }
         return [virtualLines.join('\n')];
       },
       postprocess(messages) {
@@ -249,6 +262,16 @@ function collectStaticStrings(node, result = []) {
 
 const tailwindEnforcementPlugin = {
   rules: {
+    'require-utilities-entry': {
+      create(context) {
+        return {
+          CallExpression(node) {
+            if (node.callee?.name !== '__cssMissingTailwindEntry') return;
+            context.report({ node, message: 'src/app.css 缺少 Tailwind 工具类入口。请保留模板的 @import "weapp-tailwindcss";；SDK ui/tailwind.css 只提供主题和组件扫描，不能替代此入口。' });
+          },
+        };
+      },
+    },
     'no-arbitrary-font-size': {
       create(context) {
         function reportArbitraryFontSize(node, className) {
@@ -440,15 +463,25 @@ export function createMicroappTaroEslintConfig(options = {}) {
       'tailwindcss/no-custom-classname': 'off',
     },
   },
+  {
+    files: ['src/**/*.{js,jsx,ts,tsx}'],
+    plugins: { customNavigation },
+    rules: {
+      'customNavigation/no-navigation-control-apis': 'error',
+    },
+  },
   {
     files: ['src/**/*.{js,jsx,ts,tsx}'],
     ignores: ['src/network.ts'],
     plugins: {
       lucide: lucideColorCheckPlugin,
       microappPages,
+      customNavigation,
       tailwind: tailwindEnforcementPlugin,
     },
     rules: {
+      'customNavigation/require-custom-navigation-style': 'error',
+      'customNavigation/pages-must-use-custom-nav-space': 'error',
       'microappPages/nav-url-in-app-pages': 'error',
       // 'microappPages/page-dirs-in-app-pages': 'error',
       'microappPages/declared-pages-must-exist': 'error',
@@ -508,6 +541,7 @@ export function createMicroappTaroEslintConfig(options = {}) {
     },
     processor: 'local/css',
     rules: {
+      'tailwind/require-utilities-entry': 'error',
       'no-undef': 'off',
       'tailwind/no-arbitrary-font-size': 'error',
       'no-restricted-syntax': ['error', ...baseRestrictedSyntaxRules],