{"id":385502,"date":"2024-06-29T06:08:52","date_gmt":"2024-06-29T06:08:52","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=385502"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=385502","title":{"rendered":"\u041f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0430 $mol<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\"\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430
\u041d\u0430\u0447\u0430\u043b\u043e \u043f\u0443\u0442\u0438 \u043a\u0430\u043f\u0438\u0442\u0430\u043d\u0430 $mol’a!<\/em> \u0428\u0442\u0430?..<\/del><\/p>\n

<\/p>\n

\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435, \u043c\u0435\u043d\u044f \u043d\u0435<\/em> \u0437\u043e\u0432\u0443\u0442 \u0414\u043c\u0438\u0442\u0440\u0438\u0439 \u041a\u0430\u0440\u043b\u043e\u0432\u0441\u043a\u0438\u0439 \u0438 \u044f\u2026 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0430 $mol<\/a> \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439:<\/p>\n

<\/p>\n

    \n
  1. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u0441\u044f<\/a><\/li>\n
  2. \u0412\u043e\u0437\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442<\/a><\/li>\n
  3. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c\u0441\u044f<\/a><\/li>\n
  4. \u0428\u0430\u0440\u0438\u043c\u0441\u044f<\/a><\/li>\n
  5. \u041f\u0430\u043a\u0443\u0435\u043c\u0441\u044f<\/a><\/li>\n<\/ol>\n

    <\/a> <\/p>\n

    0. \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 MAM<\/a><\/h3>\n

    <\/p>\n

    \u043f\u0430\u0440\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434 \u2014 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u0434 \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b:<\/p>\n

    <\/p>\n

    git clone https:\/\/github.com\/hyoo-ru\/mam.git cd mam npm install<\/code><\/pre>\n
      <\/p>\n
    \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0434\u0435\u0432 \u0441\u0435\u0440\u0432\u0435\u0440:<\/p>\n
      <\/p>\n
    npm start<\/code><\/pre>\n
      <\/p>\n
    \u041e\u043d \u0437\u0430\u0438\u0433\u0440\u0430\u0435\u0442 \u043d\u0430 9080 \u043f\u043e\u0440\u0442\u0443 http:\/\/127.0.0.1:9080<\/a>, \u0430 \u043d\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0441\u043c\u043e\u043b\u0438\u0442\u044c..<\/p>\n
      <\/p>\n
    \u0412\u043e\u0437\u0432\u043e\u0434\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442<\/h3>\n
      <\/p>\n
    \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442: \u0432 \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 mam \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0438 habr\/notes<\/p>\n
      <\/p>\n
    \u0412 \u043d\u0451\u043c \u0441\u043e\u0437\u0434\u0451\u043c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 habr\/notes\/index.html:<\/p>\n
      <\/p>\n
    <!doctype html> <html mol_view_root>     <head>         <meta charset=\"utf-8\" \/>         <meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1\">     <\/head>     <body mol_view_root>         <div mol_view_root=\"$habr_notes\"><\/div>         <script src=\"web.js\" charset=\"utf-8\"><\/script>     <\/body> <\/html><\/code><\/pre>\n
      <\/p>\n
    \u0417\u0430\u043c\u0435\u0442\u0438\u043b\u0438 $habr_notes<\/code>? \u0422\u0443\u0442 \u0432\u0435\u0437\u0434\u0435 fqn<\/a> \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f (\u0438\u043c\u044f =<\/a> \u043f\u0443\u0442\u044c), \u0430 \u0432 mol_view_root<\/code> \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u043e\u0447\u043d\u0435\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0437\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u043f\u043e \u0441\u043c\u044b\u0441\u043b\u0443, \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 \u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/a>\/\u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/a>\/\u0445\u0430\u043a\u0430\u0442\u044c<\/a> \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a> \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n
      <\/p>\n
    \u0427\u0442\u043e \u0436\u0435, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 habr\/notes\/view.tree:<\/p>\n
      <\/p>\n
    - \u044d\u0442\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, \u0430\u0445 \u0434\u0430, \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0442\u0430\u0431\u0430\u043c\u0438 $habr_notes $mol_page<\/code><\/pre>\n
      <\/p>\n
    \u0428\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430<\/a> \u043f\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443 \u0438 \u0441\u0442\u0440\u0430\u0448\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u043e view.tree<\/a><\/p>\n
      <\/p>\n
    \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 http:\/\/127.0.0.1:9080\/habr\/notes<\/a> \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u0437\u0430\u0447\u0430\u0442\u043e\u043a \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
      <\/p>\n
    \"*\u0433\u0438\u0444\u043a\u0430*\"<\/p>\n
      <\/p>\n
    \u041f\u0440\u0438\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0443, \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0432 \u0444\u0430\u0439\u043b view.tree:<\/p>\n
      <\/p>\n
    - \u043c\u044b \u043e\u0442\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 $habr_notes \u043e\u0442 $mol_page $habr_notes $mol_page     - \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e body \u043c\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \/     body \/         - \u0432 \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u044b \u0432\u043b\u043e\u0436\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 $mol_textarea \u0438 \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u0435\u0433\u043e Input         <= Input $mol_textarea<\/code><\/pre>\n
      <\/p>\n
    \u041e, \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430:<\/p>\n
      <\/p>\n
    \"*\u0433\u0438\u0444\u043a\u0430*\"<\/p>\n
      <\/p>\n
    \u041d\u043e \u043d\u0430\u0448 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c.<\/p>\n
      <\/p>\n
    \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c\u0441\u044f…<\/h3>\n
      <\/p>\n
    \u0432 localStorage<\/p>\n
      <\/p>\n
    \u041f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0430\u0448 view.tree \u0444\u0430\u0439\u043b \u0434\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n
      <\/p>\n
    $habr_notes $mol_page     body \/         <= Input $mol_textarea             - \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u0448\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e value             value?val <=> text?val \\<\/code><\/pre>\n
      <\/p>\n
    \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 $mol_textarea \u0442\u0443\u0442\u044c<\/a><\/p><\/blockquote>\n
    \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0443\u0436\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u043a\u0430\u043a\u043e\u0433\u043e \u0447\u0435\u0440\u0442\u0430 \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438 \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u044b \u044d\u0442\u0438 view.tree \u0444\u0430\u0439\u043b\u044b.<\/p>\n
      <\/p>\n
    view.tree \u2014 \u044d\u0442\u043e DSL<\/a>, \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u0432 ts.<\/p>\n
      <\/p>\n
    \u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0448\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n
      <\/p>\n
    namespace $ {     export class $habr_notes extends $mol_page {          \/**          * ```tree          * body \/ <= input          * ```          *\/         body() {             return [                 this.Input()             ] as readonly any[]         }          \/**          * ```tree          * text?val \\          * ```          *\/         @ $mol_mem         text(val?: any) {             if ( val !== undefined ) return val as never             return \"\"         }          \/**          * ```tree          * Input $mol_textarea value?val <=> text?val          * ```          *\/         @ $mol_mem         Input() {             const obj = new this.$.$mol_textarea()              obj.value = (val?: any) => this.text(val)              return obj         }     }  } <\/code><\/pre>\n
      <\/p>\n
    \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>.<\/p>\n
      <\/p>\n
    \u0417\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d? \u0414\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0443\u0445 \u0438 \u043a\u043e\u0442\u043b\u0435\u0442.<\/p>\n
      <\/p>\n
    \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e view.tree<\/strong> \u043c\u044b \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e<\/strong> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/strong>.
      \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e view.tree.ts<\/strong> \u043c\u044b \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e<\/strong> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0430\u043c\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438<\/strong>.<\/p>\n
      <\/p>\n
    \u0418\u0437 view.tree \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b habr\/notes\/-view.tree\/view.tree.ts<\/code>.<\/p>\n
      <\/p>\n
    \u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 view.tree \u0444\u0430\u0439\u043b\u0430, \u0444\u0430\u0439\u043b \u0432\u044b\u0448\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c.<\/p>\n
      <\/p>\n
    \u0417\u0430\u0447\u0435\u043c \u043e\u043d \u043d\u0443\u0436\u0435\u043d? \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f!<\/p>\n
      <\/p>\n
    \u041c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u0434 \u0432\u044b\u0448\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0432 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u0435 $<\/code>.<\/p>\n
      <\/p>\n
    \u0421\u0432\u043e\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441\u0435 $.$$<\/code> \u2014 \u0442\u043e \u0435\u0441\u0442\u044c, «\u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044f» \u0441\u0432\u043e\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439.<\/p>\n
      <\/p>\n
    \u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u0436\u0435 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u0434\u0443.
      \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0444\u0430\u0439\u043b habr\/notes\/view.tree.ts:<\/p>\n
      <\/p>\n
    namespace $.$$ {     export class $habr_notes extends $.$habr_notes {         @ $mol_mem         text(val?: any) {             if ( val !== undefined ) return val as never             return \"\"         }     } } <\/code><\/pre>\n
      <\/p>\n
    \u0422\u0443\u0442 \u044f \u043f\u0435\u0440\u0435\u043d\u0451\u0441 text(val?: any)<\/code> \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0438\u0437 view.tree \u0444\u0430\u0439\u043b\u0430 \u0441 \u043d\u0430\u0432\u0435\u0448\u0435\u043d\u043d\u044b\u043c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c @ $mol_mem<\/code> (\u043e\u0442 memoization)<\/p>\n
      <\/p>\n
    \u042d\u0442\u043e \u043a\u0430\u043d\u0430\u043b<\/a> \u2014 \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0435\u0433\u043e \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u0430 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043e\u043d \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. <\/p>\n
      <\/p>\n
    \u041f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442?<\/p>\n
      <\/p>\n
    \u041c\u044b \u043e\u0442\u043a\u0440\u044b\u043b\u0438 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043b\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 text<\/code>, \u0444\u0443\u043d\u043a\u0446\u0438\u044f text<\/code> \u0432\u0435\u0440\u043d\u0443\u043b\u043e \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n
      <\/p>\n
    \u041c\u044b \u0432\u0432\u0435\u043b\u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e text<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0430\u0441\u044c \u043d\u0430\u0436\u0430\u0442\u0430\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0430, \u0444\u0443\u043d\u043a\u0446\u0438\u044f text<\/code> \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0430 \u0435\u0451.<\/p>\n
      <\/p>\n
    \u041c\u044b \u0432\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u043e\u043d\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 text<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430.<\/p>\n
      <\/p>\n
    \u0410\u0433\u0430, \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u044e\u0434\u0430 \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0432\u044f\u0437\u0430\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 localStorage.<\/p>\n
      <\/p>\n
    \u0412 $mol \u0435\u0441\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c $mol_state_local \u2014 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 localStorage \u2014 \u0435\u0439 \u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f:<\/p>\n
      <\/p>\n
    namespace $.$$ {     export class $habr_notes extends $.$habr_notes {         @ $mol_mem         text(val?: any) {             return $mol_state_local.value('note', val) || \"\"         }     } } <\/code><\/pre>\n
      <\/p>\n
    \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u2026 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430\u0448 \u0432\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n
      <\/p>\n
    \"**\u0433\u0438\u0444\u043a\u0430**\"<\/p>\n
      <\/p>\n
    \u042f \u0441\u043e\u0437\u0434\u0430\u043b \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0432\u0435\u0442\u043a\u043e\u0439 stage-1<\/a>, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u044b\u0448\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u044b \u0432 \u043d\u0451\u043c \u2014 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c\u0441\u044f. <\/p>\n
      <\/p>\n
    \u0427\u0442\u043e \u0436\u0435, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0448\u0430\u0440\u0438\u0442\u044c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438!<\/p>\n
      <\/p>\n
    \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e,<\/p>\n
      <\/p>\n
    \u0428\u0430\u0440\u0438\u043c\u0441\u044f<\/h3>\n
      <\/p>\n
    \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043a\u0440\u0438\u043f\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043d\u0443 \u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u0442
      \u00af\\(\u30c4)<\/em>\/\u00af<\/p>\n
      <\/p>\n
    \u041f\u043e\u043f\u0440\u0430\u0432\u0438\u043c view.tree \u0444\u0430\u0439\u043b:<\/p>\n
      <\/p>\n
    $habr_notes $mol_page     - \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u043d\u043a \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u044b \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0441\u0435\u0442\u0438     yard $hyoo_sync_client     tools \/         - \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u043d\u043b\u0430\u0439\u043d\u0430 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a \u043f\u0438\u0440\u0430\u043c \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u0441\u044f         <= Online $hyoo_sync_online             yard <= yard     body \/         <= Input $mol_textarea             value?val <=> text?val \\             enabled <= i_have_can_mod false <\/code><\/pre>\n
      <\/p>\n
    \u041e\u043f\u0438\u0448\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 view.tree.ts:<\/p>\n
      <\/p>\n
    namespace $.$$ {     export class $habr_notes extends $.$habr_notes {         @$mol_mem         text( val?: any ) {             return this.store().str( val ) || \"\"         }          @$mol_mem         store() {             \/\/ \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0443 (\u043c\u0438\u0440\u0443),             \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0438\u043f $hyoo_crowd_reg - \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0441\u0442\u0440\u043e\u043a\u0438, \u0447\u0438\u0441\u043b\u0430, \u0431\u0443\u043b\u044b)             \/\/ \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c id             return this.yard().world().Fund( $hyoo_crowd_reg ).Item( this.current_note_id() )         }          @$mol_mem         current_note_id() {             \/\/ \u043c\u044b \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c id \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0438\u0437 \u0443\u0440\u043b\u0430, \u0438\u043b\u0438, \u0435\u0441\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0439, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0441\u0432\u043e\u0439             const id = this.$.$mol_state_arg.value( '' ) || this.yard().land_grab().id()             \/\/ \u0437\u0430\u0434\u0430\u0451\u043c \u0432 \u0443\u0440\u043b \u0442\u0435\u043a\u0443\u0449\u0438\u0439 id - \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0435\u0433\u043e \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c             this.$.$mol_state_arg.value( '', id )             return id as $mol_int62_string         }          @$mol_mem         i_have_can_mod() {             \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043f\u0440\u0430\u0432 \u043d\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435             return this.yard().land( this.current_note_id() ).allowed_mod()         }     } } <\/code><\/pre>\n
      <\/p>\n
    \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n
      <\/p>\n
    \"\u043b\u044f,<\/p>\n
      <\/p>\n
    \u0414\u043b\u044f \u0441\u0432\u0435\u0440\u043a\u0438, \u0432\u0435\u0442\u043a\u0430 stage-2<\/a>.<\/p>\n
      <\/p>\n
    \u0410 \u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0440\u044e\u0448\u0435\u0447\u043a\u0438?<\/h4>\n
      <\/p>\n
    \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0442\u0435\u043c \u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430:<\/p>\n
      <\/p>\n
    $habr_notes $mol_page     plugins \/         - \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u043c\u0435\u043d\u044b \u0442\u0435\u043c         <= Theme $mol_theme_auto     yard $hyoo_sync_client     tools \/         <= Online $hyoo_sync_online             yard <= yard         - \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443-\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u043b\u043a\u0443         <= Lighter $mol_lights_toggle     body \/         <= Input $mol_textarea             value?val <=> text?val \\             enabled <= i_have_can_mod false <\/code><\/pre>\n
      <\/p>\n
    \u0412\u043e\u0442 \u0442\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n
      <\/p>\n
    <\/p>\n
      <\/p>\n
    \u0418\u043b\u0438 \u0435\u0445\u0430\u0442\u044c?<\/h4>\n
      <\/p>\n
    \u0410 \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0430\u0448\u0435 pwa offline-first?<\/p>\n
      <\/p>\n
    \u041f\u0444\u0444: \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u0442\u043e\u0439 \u0436\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0444\u0430\u0439\u043b view.meta.tree:<\/p>\n
      <\/p>\n
    include \\\/mol\/offline\/install<\/code><\/pre>\n
      <\/p>\n
    \u041e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 Service Worker<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0435\u043c\u0443 \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u0432.<\/p>\n
      <\/p>\n
    \u0417\u0430\u0447\u0435\u043c? CROWD<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u043c\u0438\u0440\u043e\u043c \u043f\u0440\u0438 \u043f\u043e\u0442\u0435\u0440\u0438 \u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430.<\/p>\n
      <\/p>\n
    \u0414\u043b\u044f \u0441\u0432\u0435\u0440\u043a\u0438, \u0432\u0435\u0442\u043a\u0430 stage-3<\/a>.<\/p>\n
      <\/p>\n
    \u041f\u0430\u043a\u0443\u0435\u043c\u0441\u044f<\/h3>\n
      <\/p>\n
    \u043c\u044b \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n
      <\/p>\n
    npm start habr\/notes<\/code><\/pre>\n
      <\/p>\n
    \u041d\u0430\u0448 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0431\u0430\u043d\u0434\u043b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 habr\/notes\/-\/<\/code> \u2014 \u0435\u0433\u043e \u0438 \u043c\u043e\u0436\u043d\u043e \u0445\u043e\u0441\u0442\u0438\u0442\u044c.<\/p>\n
      <\/p>\n
    \u0412 \u0445\u043e\u0434\u0435 \u0432\u0441\u0435\u0445 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u043f\u0430\u043f\u043a\u0438:<\/p>\n
      <\/p>\n