{"id":484402,"date":"2026-06-20T21:30:14","date_gmt":"2026-06-20T21:30:14","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=484402"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=484402","title":{"rendered":"\u0417\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441 Cruzo. \u0427\u0430\u0441\u0442\u044c 1. RxBucket \u2013 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e, \u044f \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0432\u044b\u043b\u043e\u0436\u0438\u043b \u043d\u0430 github \u0441\u0432\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a cruzo \u2013 <a href=\"https:\/\/github.com\/MaratBektemirov\/cruzo\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/MaratBektemirov\/cruzo.<\/a> \u0421\u0430\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u0438\u0441\u0430\u043b\u0441\u044f \u0433\u0434\u0435-\u0442\u043e \u0441 2020\u0433, \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043e\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0440\u0435\u043c\u044f. \u041f\u0440\u0438\u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>\u042f \u0441\u0430\u043c \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441 2013 \u0433\u043e\u0434\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0441 \u0444\u0440\u043e\u043d\u0442\u0430. \u0415\u0449\u0435 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u044b\u043b\u043e angular.js, react &#8212; \u0432\u0441\u0435 \u0441\u0438\u0434\u0435\u043b\u0438 \u043d\u0430 jQuery, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u043e\u0432 \u0431\u044b\u043b\u0430 \u043d\u0435 \u043a\u0430\u043a single-page-application, \u0430 \u043f\u0440\u044f\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041f\u0435\u0440\u0432\u044b\u0439 \u043c\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a angularjs, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u043e\u043a\u0430\u0437\u0430\u043b \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 cruzo. \u041d\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0431\u044b\u043b\u043e: \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440, \u0440\u043e\u0443\u0442\u0435\u0440, \u0445\u0442\u043f\u043f-\u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0432\u0435\u0441\u0438\u043b \u043c\u0435\u043d\u044c\u0448\u0435.<\/p>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b LLM, \u043f\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0434\u043b\u044f UI-\u0442\u0435\u0441\u0442\u043e\u0432, \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0422.\u043a. \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432\u044b\u043f\u0430\u043b\u043e \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u043e LLM-\u044d\u0440\u044b \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438. ~80% \u043a\u043e\u0434\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043c\u043d\u043e\u0439. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u0430\u043a\u0436\u0435 LLM \u0434\u043b\u044f \u0440\u0443\u0442\u0438\u043d\u044b \u0432 vm.ts \u0441 \u043e\u043f\u043a\u043e\u0434\u0430\u043c\u0438. \u042d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u043b\u043e \u043c\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u043d\u0443 \u044f \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e LLM \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u0440\u0435\u0448\u0430\u0442\u044c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0435\u0435 \u0443\u0434\u0435\u043b, \u0440\u0443\u0442\u0438\u043d\u0430 \u0432 \u0442\u043e\u043c \u0438\u043b\u0438 \u0438\u043d\u043e\u043c \u0432\u0438\u0434\u0435.<\/p>\n<p>\u042f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439, \u043d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0432\u0437\u044f\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u0438\u0434\u0435\u0438 \u043e\u0442 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0438\u0434\u0435\u0439 &#8212; \u044d\u0442\u043e RxBucket &#8212; \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 (\u0433\u0434\u0435-\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0441\u0442\u043e\u0440\u043e\u043c), \u044f \u0445\u043e\u0442\u0435\u043b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u0438\u0434\u0435\u044e, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439.<\/p>\n<pre><code class=\"typescript\">import { AbstractComponent, componentsRegistryService, RxBucket } from \"cruzo\";import { InputComponent, InputConfig } from \"cruzo\/ui-components\/input\";import { ButtonGroupComponent, ButtonGroupConfig } from \"cruzo\/ui-components\/button-group\";export class DemoRxBucketComponent extends AbstractComponent {\u00a0\u00a0static selector = \"demo-rx-bucket-component\";\u00a0\u00a0dependencies = new Set([InputComponent.selector, ButtonGroupComponent.selector]);\u00a0\u00a0innerBucket = new RxBucket({    input: { config: InputConfig({ placeholder: \"Enter your name\" }) },    buttonGroup: {      config: ButtonGroupConfig({\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0items: [\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ label: \"Option A\", value: \"a\" },\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ label: \"Option B\", value: \"b\" },\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ label: \"Option C\", value: \"c\" }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0});\u00a0\u00a0currentInputValue$ = this.newRxValueFromBucket(this.innerBucket, \"input\");\u00a0\u00a0currentButtonGroupValue$ = this.newRxValueFromBucket(this.innerBucket, \"buttonGroup\");\u00a0\u00a0constructor() {\u00a0\u00a0\u00a0\u00a0super();\u00a0\u00a0}\u00a0\u00a0getHTML() {\u00a0\u00a0\u00a0\u00a0return `&lt;div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"mb_m\"&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input-component\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component-id=\"input\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bucket-id=\"${this.innerBucket.id}\"&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/input-component&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"mb_m\"&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button-group-component\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component-id=\"buttonGroup\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bucket-id=\"${this.innerBucket.id}\"&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button-group-component&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"mt_s\"&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;Input value: &lt;b&gt;{{ root.currentInputValue$::rx }}&lt;\/b&gt;&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"mt_xs\"&gt;Selected: &lt;b&gt;{{ root.currentButtonGroupValue$::rx }}&lt;\/b&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;`;\u00a0\u00a0}\u00a0\u00a0connectedCallback() {\u00a0\u00a0\u00a0\u00a0super.connectedCallback();\u00a0\u00a0}}componentsRegistryService.define(DemoRxBucketComponent);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0431\u0430\u043a\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (innerBucket). \u0411\u044b\u0432\u0430\u044e\u0442 \u0435\u0449\u0435 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 &#8212; outerBucket.<\/p>\n<p>innerBucket &#8212; \u044d\u0442\u043e \u0431\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. outerBucket &#8212; \u044d\u0442\u043e \u0431\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u0447\u0435\u0440\u0435\u0437 bucket-id. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435, DemoRxBucketComponent \u0441\u043e\u0437\u0434\u0430\u0435\u0442 innerBucket, \u0430 input-component \u0438 button-group-component \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043d\u0438\u043c \u043a\u0430\u043a \u0441 outerBucket.<\/p>\n<h2>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>\u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c id. \u0412\u043e\u043e\u0431\u0449\u0435, \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0442\u0430\u043c? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e: \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c, \u0438 \u0432\u0441\u0435 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u0435, \u0430 \u0437\u0434\u0435\u0441\u044c \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u043c\u0443\u0445 \u043e\u0442 \u043a\u043e\u0442\u043b\u0435\u0442.<\/p>\n<pre><code class=\"typescript\">{ config: InputConfig({ placeholder: \"Enter your name\" }) }<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c config. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0432 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440\u0435, \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e API, \u0434\u0430 \u0438 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 REST, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438, \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"typescript\">async connectedCallback() {  super.connectedCallback();  const profile = await this.getProfile();    this.innerBucket.setValuesAtIndex({    input: profile.name,    buttonGroup: profile.type  });}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<h2>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f AbstractComponent<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (value$), \u044d\u0442\u043e rx-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 AbstractComponent cruzo:<\/p>\n<pre><code class=\"typescript\">export abstract class AbstractComponent&lt;Config = any, ValueType = any, StateType = any&gt; {...public value$ = this.newRx&lt;ValueType&gt;();...public connectedCallback(params: ComponentConnectedParams = null) {  ...  this.setValue();    this.outerBucket.newRxValue(    this.id,    this.onUpdateValue,    this.rxList,    this.outerBucket.getValue(this.id, this.index),    this.index  );  \/\/ \u041e\u043d\u043e \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 outerBucket \u043f\u043e id \u0438 index \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.}...<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u0440\u043e\u0442\u043a\u043e, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a: \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 RxBucket, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 bucket-id \u0438 component-id, \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0441\u0432\u043e\u0439 outerBucket, \u0431\u0435\u0440\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e config, value \u0438 state.<\/p>\n<p>\u0412\u044b \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c value$ \u0447\u0435\u0440\u0435\u0437 ::rx \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430.<\/p>\n<pre><code class=\"typescript\">getHTML() {  return `&lt;div class=\"${UI_KIT}_button-group\"&gt;    &lt;button      repeat=\"{{root.config$::rx.items}}\"      class=\"${UI_KIT}_button-group-item {{this.value === root.value$::rx ? '${UI_KIT}_button-group-item-active' : ''}}\"      onclick=\"{{root.select(this.value)}}\"    &gt;      {{this.label}}    &lt;\/button&gt;  &lt;\/div&gt;`}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e \u044d\u0442\u043e\u043c\u0443 \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u0443 \u0441\u0434\u0435\u043b\u0430\u043d\u044b state$ \u0438 config$, \u043e\u043d\u0438 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u0443\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e, \u0434\u043b\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"typescript\">export abstract class AbstractComponent&lt;Config = any, ValueType = any, StateType = any&gt; {...public value$ = this.newRx&lt;ValueType&gt;();...public state$ = this.newRx&lt;StateType&gt;();...public config$ = this.newRx&lt;Config&gt;();...<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>config$ &#8212; \u044d\u0442\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: placeholder, type, items, required, name \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n<p>value$ &#8212; \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: \u0442\u0435\u043a\u0441\u0442 \u0432 input, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0432 button-group, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 item \u0432 select \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<p>state$ &#8212; \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, css-\u043a\u043b\u0430\u0441\u0441, \u043e\u0448\u0438\u0431\u043a\u0430, disabled, loading, opened\/closed \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 UI-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"typescript\">this.innerBucket.setState(\"input\", { cls: \"input-error\" });<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0410 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">`class=\"${UI_KIT}_input {{root.state$::rx?.cls}}\"`<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0415\u0449\u0435 \u0435\u0441\u0442\u044c component-index. \u041e\u043d \u043d\u0443\u0436\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043e\u0434\u043d\u0438\u043c component-id, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 repeat, \u0441\u043f\u0438\u0441\u043a\u0435 \u0438\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. config \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d, \u0430 value \u0438 state \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u043e index.<\/p>\n<pre><code class=\"typescript\">`&lt;input-componentcomponent-id=\"input\"component-index=\"0\"bucket-id=\"${this.innerBucket.id}\"&gt;&lt;\/input-component&gt;&lt;input-componentcomponent-id=\"input\"component-index=\"1\"bucket-id=\"${this.innerBucket.id}\"&gt;&lt;\/input-component&gt;`<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043e\u0434\u0438\u043d descriptor input, \u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435.<\/p>\n<p>\u0415\u0449\u0435 \u0432 RxBucket \u0435\u0441\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u041e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c value \u0438\u043b\u0438 state, \u0430 \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u043e \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438: \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438, \u0432\u044b\u0431\u043e\u0440, \u043a\u043b\u0438\u043a, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0435\u0440-\u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<pre><code class=\"typescript\">bucket.emitEvent(id, name, bucketEvent, index)<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437:<\/p>\n<pre><code class=\"typescript\">this.newRxEventFromBucket(...)<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0438\u043b\u0438:<\/p>\n<pre><code class=\"typescript\">this.newRxEventFromBucketByIndex(...)<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>RxBucket \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c props \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c config, value \u0438 state \u0432 \u043e\u0434\u043d\u0443 \u043a\u0430\u0448\u0443.<\/p>\n<p><em>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435 \u0438\u0437 Cruzo. \u0415\u0441\u043b\u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0437\u0430 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u0435\u043d\u044f \u043d\u0435 \u0443\u0431\u0435\u0434\u044f\u0442, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u043f\u0442\u0430 \u0438 \u0442\u0440\u0435\u0445 AI-\u0430\u0433\u0435\u043d\u0442\u043e\u0432&#8230; \u041d\u0443 \u0430 \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a <\/em><a href=\"https:\/\/github.com\/MaratBektemirov\/cruzo\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/MaratBektemirov\/cruzo<\/a>, \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0432\u0430\u0448\u0438\u043c \u0437\u0432\u0435\u0437\u0434\u0430\u043c)<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1050020\/\">https:\/\/habr.com\/ru\/articles\/1050020\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e, \u044f \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0432\u044b\u043b\u043e\u0436\u0438\u043b \u043d\u0430 github \u0441\u0432\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a cruzo \u2013 https:\/\/github.com\/MaratBektemirov\/cruzo. \u0421\u0430\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u0438\u0441\u0430\u043b\u0441\u044f \u0433\u0434\u0435-\u0442\u043e \u0441 2020\u0433, \u0432 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043e\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0440\u0435\u043c\u044f. \u041f\u0440\u0438\u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438.\u042f \u0441\u0430\u043c \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441 2013 \u0433\u043e\u0434\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u0441 \u0444\u0440\u043e\u043d\u0442\u0430. \u0415\u0449\u0435 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u044b\u043b\u043e angular.js, react &#8212; \u0432\u0441\u0435 \u0441\u0438\u0434\u0435\u043b\u0438 \u043d\u0430 jQuery, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u043e\u0432 \u0431\u044b\u043b\u0430 \u043d\u0435 \u043a\u0430\u043a single-page-application, \u0430 \u043f\u0440\u044f\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041f\u0435\u0440\u0432\u044b\u0439 \u043c\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a angularjs, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u043e\u043a\u0430\u0437\u0430\u043b \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 cruzo. \u041d\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0431\u044b\u043b\u043e: \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440, \u0440\u043e\u0443\u0442\u0435\u0440, \u0445\u0442\u043f\u043f-\u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0432\u0435\u0441\u0438\u043b \u043c\u0435\u043d\u044c\u0448\u0435.\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b LLM, \u043f\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0434\u043b\u044f UI-\u0442\u0435\u0441\u0442\u043e\u0432, \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0422.\u043a. \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432\u044b\u043f\u0430\u043b\u043e \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u043e LLM-\u044d\u0440\u044b \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438. ~80% \u043a\u043e\u0434\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043c\u043d\u043e\u0439. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u0430\u043a\u0436\u0435 LLM \u0434\u043b\u044f \u0440\u0443\u0442\u0438\u043d\u044b \u0432 vm.ts \u0441 \u043e\u043f\u043a\u043e\u0434\u0430\u043c\u0438. \u042d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u043b\u043e \u043c\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u043d\u0443 \u044f \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e LLM \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u0440\u0435\u0448\u0430\u0442\u044c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0435\u0435 \u0443\u0434\u0435\u043b, \u0440\u0443\u0442\u0438\u043d\u0430 \u0432 \u0442\u043e\u043c \u0438\u043b\u0438 \u0438\u043d\u043e\u043c \u0432\u0438\u0434\u0435.\u042f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439, \u043d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0432\u0437\u044f\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u0438\u0434\u0435\u0438 \u043e\u0442 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0438\u0434\u0435\u0439 &#8212; \u044d\u0442\u043e RxBucket &#8212; \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 (\u0433\u0434\u0435-\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0441\u0442\u043e\u0440\u043e\u043c), \u044f \u0445\u043e\u0442\u0435\u043b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u0438\u0434\u0435\u044e, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439.import { AbstractComponent, componentsRegistryService, RxBucket } from &#171;cruzo&#187;;import { InputComponent, InputConfig } from &#171;cruzo\/ui-components\/input&#187;;import { ButtonGroupComponent, ButtonGroupConfig } from &#171;cruzo\/ui-components\/button-group&#187;;export class DemoRxBucketComponent extends AbstractComponent {\u00a0\u00a0static selector = &#171;demo-rx-bucket-component&#187;;\u00a0\u00a0dependencies = new Set([InputComponent.selector, ButtonGroupComponent.selector]);\u00a0\u00a0innerBucket = new RxBucket({    input: { config: InputConfig({ placeholder: &#171;Enter your name&#187; }) },    buttonGroup: {      config: ButtonGroupConfig({\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0items: [\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ label: &#171;Option A&#187;, value: &#171;a&#187; },\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ label: &#171;Option B&#187;, value: &#171;b&#187; },\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{ label: &#171;Option C&#187;, value: &#171;c&#187; }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0});\u00a0\u00a0currentInputValue$ = this.newRxValueFromBucket(this.innerBucket, &#171;input&#187;);\u00a0\u00a0currentButtonGroupValue$ = this.newRxValueFromBucket(this.innerBucket, &#171;buttonGroup&#187;);\u00a0\u00a0constructor() {\u00a0\u00a0\u00a0\u00a0super();\u00a0\u00a0}\u00a0\u00a0getHTML() {\u00a0\u00a0\u00a0\u00a0return `&lt;div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#187;mb_m&#187;&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input-component\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component-id=&#187;input&#187;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bucket-id=&#187;${this.innerBucket.id}&#187;&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/input-component&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#187;mb_m&#187;&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button-group-component\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0component-id=&#187;buttonGroup&#187;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0bucket-id=&#187;${this.innerBucket.id}&#187;&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/button-group-component&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#187;mt_s&#187;&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;Input value: &lt;b&gt;{{ root.currentInputValue$::rx }}&lt;\/b&gt;&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=&#187;mt_xs&#187;&gt;Selected: &lt;b&gt;{{ root.currentButtonGroupValue$::rx }}&lt;\/b&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;`;\u00a0\u00a0}\u00a0\u00a0connectedCallback() {\u00a0\u00a0\u00a0\u00a0super.connectedCallback();\u00a0\u00a0}}componentsRegistryService.define(DemoRxBucketComponent);\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0431\u0430\u043a\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (innerBucket). \u0411\u044b\u0432\u0430\u044e\u0442 \u0435\u0449\u0435 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 &#8212; outerBucket.innerBucket &#8212; \u044d\u0442\u043e \u0431\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. outerBucket &#8212; \u044d\u0442\u043e \u0431\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u0447\u0435\u0440\u0435\u0437 bucket-id. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435, DemoRxBucketComponent \u0441\u043e\u0437\u0434\u0430\u0435\u0442 innerBucket, \u0430 input-component \u0438 button-group-component \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043d\u0438\u043c \u043a\u0430\u043a \u0441 outerBucket.\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c id. \u0412\u043e\u043e\u0431\u0449\u0435, \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u0435 \u0432\u044b, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0442\u0430\u043c? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e: \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c, \u0438 \u0432\u0441\u0435 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u0435, \u0430 \u0437\u0434\u0435\u0441\u044c \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u043c\u0443\u0445 \u043e\u0442 \u043a\u043e\u0442\u043b\u0435\u0442.{ config: InputConfig({ placeholder: &#171;Enter your name&#187; }) }\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c config. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0432 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440\u0435, \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e API, \u0434\u0430 \u0438 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 REST, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438, \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445:async connectedCallback() {  super.connectedCallback();  const profile = await this.getProfile();    this.innerBucket.setValuesAtIndex({    input: profile.name,    buttonGroup: profile.type  });}\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f AbstractComponent\u0415\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (value$), \u044d\u0442\u043e rx-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 AbstractComponent cruzo:export abstract class AbstractComponent&lt;Config = any, ValueType = any, StateType = any&gt; {&#8230;public value$ = this.newRx&lt;ValueType&gt;();&#8230;public connectedCallback(params: ComponentConnectedParams = null) {  &#8230;  this.setValue();    this.outerBucket.newRxValue(    this.id,    this.onUpdateValue,    this.rxList,    this.outerBucket.getValue(this.id, this.index),    this.index  );  \/\/ \u041e\u043d\u043e \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 outerBucket \u043f\u043e id \u0438 index \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.}&#8230;\u0415\u0441\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u0440\u043e\u0442\u043a\u043e, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a: \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 RxBucket, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 bucket-id \u0438 component-id, \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0441\u0432\u043e\u0439 outerBucket, \u0431\u0435\u0440\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e config, value \u0438 state.\u0412\u044b \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c value$ \u0447\u0435\u0440\u0435\u0437 ::rx \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430.getHTML() {  return `&lt;div class=&#187;${UI_KIT}_button-group&#187;&gt;    &lt;button      repeat=&#187;{{root.config$::rx.items}}&#187;      class=&#187;${UI_KIT}_button-group-item {{this.value === root.value$::rx ? &#8216;${UI_KIT}_button-group-item-active&#8217; : &#187;}}&#187;      onclick=&#187;{{root.select(this.value)}}&#187;    &gt;      {{this.label}}    &lt;\/button&gt;  &lt;\/div&gt;`}\u041f\u043e \u044d\u0442\u043e\u043c\u0443 \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u0443 \u0441\u0434\u0435\u043b\u0430\u043d\u044b state$ \u0438 config$, \u043e\u043d\u0438 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u0443\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e, \u0434\u043b\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f.export abstract class AbstractComponent&lt;Config = any, ValueType = any, StateType = any&gt; {&#8230;public value$ = this.newRx&lt;ValueType&gt;();&#8230;public state$ = this.newRx&lt;StateType&gt;();&#8230;public config$ = this.newRx&lt;Config&gt;();&#8230;config$ &#8212; \u044d\u0442\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: placeholder, type, items, required, name \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.value$ &#8212; \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: \u0442\u0435\u043a\u0441\u0442 \u0432 input, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0432 button-group, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 item \u0432 select \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.state$ &#8212; \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, css-\u043a\u043b\u0430\u0441\u0441, \u043e\u0448\u0438\u0431\u043a\u0430, disabled, loading, opened\/closed \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 UI-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:this.innerBucket.setState(&#171;input&#187;, { cls: &#171;input-error&#187; });\u0410 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a:`class=&#187;${UI_KIT}_input {{root.state$::rx?.cls}}&#187;`\u0415\u0449\u0435 \u0435\u0441\u0442\u044c component-index. \u041e\u043d \u043d\u0443\u0436\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u043e\u0434\u043d\u0438\u043c component-id, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 repeat, \u0441\u043f\u0438\u0441\u043a\u0435 \u0438\u043b\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. config \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d, \u0430 value \u0438 state \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u043e index.`&lt;input-componentcomponent-id=&#187;input&#187;component-index=&#187;0&#8243;bucket-id=&#187;${this.innerBucket.id}&#187;&gt;&lt;\/input-component&gt;&lt;input-componentcomponent-id=&#187;input&#187;component-index=&#187;1&#8243;bucket-id=&#187;${this.innerBucket.id}&#187;&gt;&lt;\/input-component&gt;`\u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043e\u0434\u0438\u043d descriptor input, \u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435.\u0415\u0449\u0435 \u0432 RxBucket \u0435\u0441\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u041e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c value \u0438\u043b\u0438 state, \u0430 \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u043e \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438: \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u043e\u0434\u0430\u043b\u043a\u0438, \u0432\u044b\u0431\u043e\u0440, \u043a\u043b\u0438\u043a, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0435\u0440-\u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.bucket.emitEvent(id, name, bucketEvent, index)\u041f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437:this.newRxEventFromBucket(&#8230;)\u0438\u043b\u0438:this.newRxEventFromBucketByIndex(&#8230;)RxBucket \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0435 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c props \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c config, value \u0438 state \u0432 \u043e\u0434\u043d\u0443 \u043a\u0430\u0448\u0443.\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435 \u0438\u0437 Cruzo. \u0415\u0441\u043b\u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0437\u0430 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u0435\u043d\u044f \u043d\u0435 \u0443\u0431\u0435\u0434\u044f\u0442, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u043f\u0442\u0430 \u0438 \u0442\u0440\u0435\u0445 AI-\u0430\u0433\u0435\u043d\u0442\u043e\u0432&#8230; \u041d\u0443 \u0430 \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a https:\/\/github.com\/MaratBektemirov\/cruzo, \u044f \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0432\u0430\u0448\u0438\u043c \u0437\u0432\u0435\u0437\u0434\u0430\u043c)\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1050020\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-484402","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/484402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=484402"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/484402\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=484402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=484402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=484402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}