code-ai-installer 2.5.0 → 4.0.0

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/SKILL.md

@@ -0,0 +1,466 @@
+---
+name: react-15-3-wix-iframe-reference
+description: Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов.
+type: reference
+domain: development
+owners:
+  - architect
+  - senior_full_stack
+gates:
+  - ARCH
+  - DEV
+tech:
+  - react
+  - wix
+topic:
+  - architecture
+  - general
+triggers:
+  - React 15.3 class lifecycle template
+  - WixWidget init events пример
+  - withLoadingState wrapper
+  - ref callback React 15.3
+  - Wix.Data.Public set
+  - PropTypes shape oneOf isRequired
+related:
+  - react-15-3-wix-iframe
+  - wix-iframe-sdk
+  - wix-self-hosted-embedded-script
+  - wix-self-hosted-embedded-script-reference
+  - security-baseline-dev
+  - threat-model-baseline
+  - architecture-doc-reference
+budget_lines: 500
+schema_version: 1
+---
+
+
+# Skill: React 15.3 + Wix iFrame — Reference
+
+Канонические JSX-шаблоны для React 15.3 + Wix iFrame. Workflow rules + comparison table «Чего нельзя» + Output Template → `$react-15-3-wix-iframe`.
+
+**Разделы:**
+1. [Класс-компоненты: lifecycle + memo](#1-классы)
+2. [PropTypes / defaultProps](#2-proptypes)
+3. [setState: 3 patterns](#3-setstate)
+4. [WixWidget: init + events + data + navigation](#4-wix-widget)
+5. [Loading/error: withLoadingState wrapper](#5-loading)
+6. [ref callback + callback prop](#6-refs-callbacks)
+7. [Growing library](#7-growing)
+
+---
+
+## 1. Класс-компоненты
+
+### 1.1 Полный lifecycle с защитой от анмаунта
+
+```jsx
+class UserProfile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      user: null,
+      error: null,
+    };
+    // ✅ Биндинг в конструкторе — один раз, не в render
+    this.handleRefresh = this.handleRefresh.bind(this);
+  }
+
+  componentDidMount() {
+    this._isMounted = true; // ✅ флаг защиты от утечки
+    this.loadUser();
+  }
+
+  componentDidUpdate(prevProps) {
+    // ✅ Сравнивай пропсы вручную, аналог useEffect([userId])
+    if (prevProps.userId !== this.props.userId) {
+      this.loadUser();
+    }
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false; // ✅ предотвращаем setState после анмаунта
+  }
+
+  loadUser() {
+    this.setState({ loading: true, error: null });
+
+    fetchUser(this.props.userId)
+      .then(user => {
+        if (!this._isMounted) return; // ✅ проверка перед setState
+        this.setState({ loading: false, user });
+      })
+      .catch(err => {
+        if (!this._isMounted) return;
+        this.setState({ loading: false, error: err.message });
+      });
+  }
+
+  handleRefresh() {
+    this.loadUser();
+  }
+
+  render() {
+    const { loading, user, error } = this.state;
+
+    if (loading) return React.createElement("div", null, "Loading…");
+    if (error) return React.createElement(
+      "div", { role: "alert" },
+      error,
+      React.createElement("button", { onClick: this.handleRefresh }, "Retry")
+    );
+
+    return React.createElement(
+      "div", { className: "profile" },
+      React.createElement("h1", null, user.name),
+      React.createElement("p", null, user.email)
+    );
+  }
+}
+```
+
+### 1.2 shouldComponentUpdate для оптимизации
+
+```jsx
+// Аналог React.memo — предотвращает лишние рендеры
+shouldComponentUpdate(nextProps, nextState) {
+  return (
+    nextProps.userId !== this.props.userId ||
+    nextState.user   !== this.state.user   ||
+    nextState.loading !== this.state.loading
+  );
+}
+```
+
+### 1.3 PureComponent для простых случаев
+
+```jsx
+// ✅ PureComponent делает shallow compare автоматически
+class UserCard extends React.PureComponent {
+  render() {
+    return React.createElement("div", null, this.props.name);
+  }
+}
+```
+
+---
+
+## 2. PropTypes / defaultProps
+
+```jsx
+// ✅ PropTypes — документация + runtime-предупреждения в development
+UserProfile.propTypes = {
+  userId:   React.PropTypes.string.isRequired,
+  onUpdate: React.PropTypes.func,
+  theme:    React.PropTypes.oneOf(["light", "dark"]),
+  config:   React.PropTypes.shape({
+    showAvatar: React.PropTypes.bool,
+    maxItems:   React.PropTypes.number,
+  }),
+};
+
+UserProfile.defaultProps = {
+  onUpdate: function() {}, // ✅ no-op вместо проверки if(onUpdate)
+  theme: "light",
+  config: {
+    showAvatar: true,
+    maxItems: 10,
+  },
+};
+```
+
+---
+
+## 3. setState: 3 patterns
+
+### 3.1 Функциональный setState
+
+```jsx
+// ✅ Безопасно: React может батчить обновления, функция всегда получает актуальный state
+this.setState(function(prevState) {
+  return { count: prevState.count + 1 };
+});
+
+// ❌ Небезопасно: this.state.count может быть устаревшим в батче
+this.setState({ count: this.state.count + 1 });
+```
+
+### 3.2 Callback после обновления
+
+```jsx
+// ✅ callback вызывается ПОСЛЕ того как state обновлён и компонент перерисован
+this.setState({ step: 2 }, function() {
+  // this.state.step === 2 гарантировано
+  this.props.onStepChange(this.state.step);
+});
+```
+
+### 3.3 Сброс при смене ключевого пропса
+
+```jsx
+componentDidUpdate(prevProps) {
+  if (prevProps.formId !== this.props.formId) {
+    // ✅ Сброс формы при переходе к другой записи
+    this.setState({
+      values: this.getInitialValues(),
+      errors: {},
+      dirty: false,
+    });
+  }
+}
+```
+
+---
+
+## 4. WixWidget
+
+### 4.1 Инициализация + базовая коммуникация
+
+```jsx
+// ✅ Wix SDK доступен глобально через window.Wix
+class WixWidget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { settings: {}, ready: false };
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+
+    // ✅ Слушаем события от Wix
+    Wix.addEventListener(Wix.Events.SETTINGS_UPDATED, this.handleSettingsUpdate.bind(this));
+    Wix.addEventListener(Wix.Events.SITE_PUBLISHED,   this.handlePublish.bind(this));
+
+    // ✅ Получаем начальные данные
+    Wix.getSiteInfo(function(siteInfo) {
+      if (!this._isMounted) return;
+      this.setState({ siteInfo, ready: true });
+    }.bind(this));
+
+    // ✅ Подстраиваем высоту виджета
+    this.updateHeight();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    // ✅ Убираем слушатели
+    Wix.removeEventListener(Wix.Events.SETTINGS_UPDATED, this.handleSettingsUpdate);
+  }
+
+  handleSettingsUpdate(settings) {
+    if (!this._isMounted) return;
+    this.setState({ settings });
+    this.updateHeight();
+  }
+
+  handlePublish() {
+    // публикация сайта — можно сохранить данные
+  }
+
+  updateHeight() {
+    // ✅ Сообщаем Wix актуальную высоту iFrame
+    var height = document.body.scrollHeight;
+    Wix.resizeWindow(undefined, height);
+  }
+
+  render() {
+    if (!this.state.ready) return React.createElement("div", null, "Loading…");
+    return React.createElement("div", { id: "widget" }, /* контент */);
+  }
+}
+```
+
+### 4.2 Получить настройки из панели редактора
+
+```jsx
+componentDidMount() {
+  this._isMounted = true;
+
+  // ✅ Получаем сохранённые настройки компонента
+  Wix.Settings.getExternalId(function(externalId) {
+    if (!this._isMounted) return;
+    this.setState({ externalId });
+  }.bind(this));
+
+  // ✅ Читаем публичные данные (видны и в editor, и в live)
+  Wix.Data.Public.get("userPreferences", { scope: "COMPONENT" }, function(value) {
+    if (!this._isMounted) return;
+    this.setState({ preferences: value || {} });
+  }.bind(this));
+}
+```
+
+### 4.3 Сохранить данные из виджета
+
+```jsx
+handleSave(data) {
+  // ✅ Сохраняем данные компонента
+  Wix.Data.Public.set(
+    "userPreferences",
+    data,
+    { scope: "COMPONENT" },
+    function() {
+      // callback после успешного сохранения
+      this.setState({ saved: true });
+    }.bind(this)
+  );
+}
+```
+
+### 4.4 navigateTo для переходов внутри Wix
+
+```jsx
+handleNavigation(pageId) {
+  Wix.Utils.navigateToSection({
+    sectionIdentifier: Wix.Styles.getStyleParams().sectionIdentifier,
+    state: pageId,
+  });
+}
+```
+
+### 4.5 ❌ Anti-pattern: прямые DOM-манипуляции
+
+```jsx
+// ❌ Плохо: React не знает об этих изменениях → рассинхрон при ре-рендере
+document.getElementById("title").innerHTML = this.state.title;
+
+// ✅ Правильно: через state → render
+this.setState({ title: newTitle });
+```
+
+---
+
+## 5. Loading / error: withLoadingState wrapper
+
+### 5.1 Единый паттерн для async операций
+
+```jsx
+// ✅ Обёртка для всех async вызовов — исключает дублирование
+function withLoadingState(component, asyncFn) {
+  return function() {
+    var self = component;
+    self.setState({ loading: true, error: null });
+    asyncFn()
+      .then(function(result) {
+        if (!self._isMounted) return;
+        self.setState({ loading: false, data: result });
+      })
+      .catch(function(err) {
+        if (!self._isMounted) return;
+        self.setState({ loading: false, error: err.message || "Unknown error" });
+      });
+  };
+}
+
+// Использование в конструкторе:
+this.loadData = withLoadingState(this, function() {
+  return fetchData(self.props.id);
+});
+```
+
+### 5.2 Render с явными состояниями
+
+```jsx
+render() {
+  var state = this.state;
+
+  if (state.loading) {
+    return React.createElement("div", { className: "loader" }, "Loading…");
+  }
+
+  if (state.error) {
+    return React.createElement(
+      "div", { className: "error", role: "alert" },
+      state.error,
+      React.createElement("button", { onClick: this.handleRetry }, "Try again")
+    );
+  }
+
+  if (!state.data) {
+    return React.createElement("div", { className: "empty" }, "No data yet");
+  }
+
+  return this.renderContent(state.data);
+}
+```
+
+---
+
+## 6. ref callback + callback prop
+
+### 6.1 ref через callback (React 15.3 не имеет createRef)
+
+```jsx
+class TextInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.focusInput = this.focusInput.bind(this);
+  }
+
+  focusInput() {
+    if (this.inputEl) this.inputEl.focus();
+  }
+
+  render() {
+    return React.createElement("input", {
+      ref: function(el) { this.inputEl = el; }.bind(this), // ✅ callback ref
+      type: "text",
+    });
+  }
+}
+```
+
+### 6.2 Передача данных вверх через callback prop
+
+```jsx
+// В React 15.3 нет Context — передаём callback через props
+class ChildForm extends React.Component {
+  handleChange(field, value) {
+    // ✅ Сообщаем родителю об изменении
+    this.props.onChange(field, value);
+  }
+
+  render() {
+    return React.createElement("input", {
+      value: this.props.value,
+      onChange: function(e) {
+        this.handleChange(this.props.field, e.target.value);
+      }.bind(this),
+    });
+  }
+}
+
+ChildForm.propTypes = {
+  field:    React.PropTypes.string.isRequired,
+  value:    React.PropTypes.string.isRequired,
+  onChange: React.PropTypes.func.isRequired,
+};
+```
+
+---
+
+## 7. Growing library
+
+Канонические шаблоны добавляются через `update_skill` MCP-инструмент по мере появления потребности. Кандидаты:
+
+- **Wix Editor SDK extensions** — Wix.Settings.openModal, Wix.Theme.* helpers
+- **Worker iframe variant** — серверный iframe + postMessage protocol
+- **postMessage protocol patterns** — origin check, message schema, request/response
+- **BX widget patterns** — Wix Blocks integration
+- **Wix.Data Schema variants** — scope APP / SITE / VISITOR
+- **ref-controller patterns** — imperative API через ref + методы инстанса
+- **react-15.3 testing patterns** — enzyme + mocha/jest legacy setup
+- **Custom Hook-like helpers (manual)** — composition через mixin или HOC
+- **Inline styles patterns** — без CSS Modules в legacy окружении
+- **Performance profiling** — react-addons-perf (deprecated, но работает в 15.3)
+
+---
+
+## См. также
+- `$react-15-3-wix-iframe` — workflow rules + comparison table «Чего нельзя» + Output Template
+- `$wix-iframe-sdk` — raw Wix iFrame SDK reference
+- `$wix-self-hosted-embedded-script` — embedded-script вариант (НЕ iframe)
+- `$security-baseline-dev` — postMessage origin checks, iframe sandboxing
+- `$threat-model-baseline` — iframe security model
+- `$architecture-doc-reference` — canonical разделы architecture doc

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/agents/claude.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-15-3-wix-iframe-reference",
+  "display_name": "React 15.3 и Wix iFrame",
+  "description": "Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов.",
+  "default_prompt": "Используй $react-15-3-wix-iframe-reference, когда задача относится к навыку \"Справочник шаблонов React 15.3 + Wix iFrame\".",
+  "triggers": [
+    "react-15-3-wix-iframe-reference",
+    "react 15 3 wix iframe reference",
+    "React 15.3 и Wix iFrame",
+    "Legacy-разработка для Wix iFrame приложений на React 15"
+  ],
+  "capabilities": [
+    "react",
+    "15",
+    "3",
+    "wix",
+    "iframe"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/agents/copilot.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-15-3-wix-iframe-reference",
+  "display_name": "React 15.3 и Wix iFrame",
+  "description": "Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов.",
+  "default_prompt": "Используй $react-15-3-wix-iframe-reference, когда задача относится к навыку \"Справочник шаблонов React 15.3 + Wix iFrame\".",
+  "triggers": [
+    "react-15-3-wix-iframe-reference",
+    "react 15 3 wix iframe reference",
+    "React 15.3 и Wix iFrame",
+    "Legacy-разработка для Wix iFrame приложений на React 15"
+  ],
+  "capabilities": [
+    "react",
+    "15",
+    "3",
+    "wix",
+    "iframe"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/agents/gemini.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-15-3-wix-iframe-reference",
+  "display_name": "React 15.3 и Wix iFrame",
+  "description": "Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов.",
+  "default_prompt": "Используй $react-15-3-wix-iframe-reference, когда задача относится к навыку \"Справочник шаблонов React 15.3 + Wix iFrame\".",
+  "triggers": [
+    "react-15-3-wix-iframe-reference",
+    "react 15 3 wix iframe reference",
+    "React 15.3 и Wix iFrame",
+    "Legacy-разработка для Wix iFrame приложений на React 15"
+  ],
+  "capabilities": [
+    "react",
+    "15",
+    "3",
+    "wix",
+    "iframe"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/agents/kimi.yaml

@@ -0,0 +1,17 @@
+name: "react-15-3-wix-iframe-reference"
+display_name: "React 15.3 и Wix iFrame"
+description: "Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов."
+default_prompt: "Используй $react-15-3-wix-iframe-reference, когда задача относится к навыку \"Справочник шаблонов React 15.3 + Wix iFrame\"."
+triggers:
+  - "react-15-3-wix-iframe-reference"
+  - "react 15 3 wix iframe reference"
+  - "React 15.3 и Wix iFrame"
+  - "Legacy-разработка для Wix iFrame приложений на React 15"
+capabilities:
+  - "react"
+  - "15"
+  - "3"
+  - "wix"
+  - "iframe"
+tools: []
+implicit_invocation: true

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "React 15.3 и Wix iFrame"
+  short_description: "Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов."
+  default_prompt: "Используй $react-15-3-wix-iframe-reference, когда задача относится к навыку \"Справочник шаблонов React 15.3 + Wix iFrame\"."
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/agents/qwen.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-15-3-wix-iframe-reference",
+  "display_name": "React 15.3 и Wix iFrame",
+  "description": "Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов.",
+  "default_prompt": "Используй $react-15-3-wix-iframe-reference, когда задача относится к навыку \"Справочник шаблонов React 15.3 + Wix iFrame\".",
+  "triggers": [
+    "react-15-3-wix-iframe-reference",
+    "react 15 3 wix iframe reference",
+    "React 15.3 и Wix iFrame",
+    "Legacy-разработка для Wix iFrame приложений на React 15"
+  ],
+  "capabilities": [
+    "react",
+    "15",
+    "3",
+    "wix",
+    "iframe"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/development/.agents/skills/react-15-3-wix-iframe-reference/agents/skill.yaml

@@ -0,0 +1,25 @@
+version: 1
+name: "react-15-3-wix-iframe-reference"
+display_name: "React 15.3 и Wix iFrame"
+description: "Канонический справочник JSX-шаблонов для React 15.3 + Wix iFrame — UserProfile lifecycle, PropTypes/defaultProps, setState patterns, WixWidget init+events, withLoadingState wrapper, ref callback, callback prop. Растущая библиотека reference templates для ARCH+DEV гейтов."
+default_prompt: "Используй $react-15-3-wix-iframe-reference, когда задача относится к навыку \"Справочник шаблонов React 15.3 + Wix iFrame\"."
+triggers:
+  - "react-15-3-wix-iframe-reference"
+  - "react 15 3 wix iframe reference"
+  - "React 15.3 и Wix iFrame"
+  - "Legacy-разработка для Wix iFrame приложений на React 15"
+capabilities:
+  - "react"
+  - "15"
+  - "3"
+  - "wix"
+  - "iframe"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "ru"
+  available_locales:
+    - "ru"
+    - "en"