{"id":281977,"date":"2016-12-05T08:00:05","date_gmt":"2016-12-05T05:00:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=281977"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=281977","title":{"rendered":"React, Web Components, Angular \u0438 jQuery \u2014 \u0434\u0440\u0443\u0437\u044c\u044f \u043d\u0430\u0432\u0435\u043a\u0438. \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 JavaScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b"},"content":{"rendered":"<p><a href=\"https:\/\/habrahabr.ru\/company\/devexpress\/blog\/316358\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/550\/fe6\/2a5\/550fe62a59dd41769e8fc72e66cf3a80.png\" alt=\"image\"\/><\/a><br \/>  \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 JavaScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043a\u0430\u043a React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/li>\n<li>\u043a\u0430\u043a Preact-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/li>\n<li>\u043a\u0430\u043a Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/li>\n<li>\u043a\u0430\u043a Web Component;<\/li>\n<li>\u043a\u0430\u043a jQuery \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 DOMElement;<\/li>\n<li>\u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 DOMElement.<\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"zachem-i-komu-eto-nuzhno\">\u0417\u0430\u0447\u0435\u043c \u0438 \u043a\u043e\u043c\u0443 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/h1>\n<p>  <\/p>\n<p>\u041c\u0438\u0440 JavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d. \u0415\u0441\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0430 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 JavaScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0432\u044b\u0431\u0438\u0440\u0430\u044f \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442. \u042d\u0442\u043e \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h1 id=\"kak-vse-budet-realizovano\">\u041a\u0430\u043a \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e<\/h1>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0430\u043f\u0438\u0448\u0435\u043c React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. <\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f JavaScript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/github.com\/developit\/preact\">preact<\/a> \u0438 <a href=\"https:\/\/github.com\/developit\/preact-compat\">preact-compat<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a React \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0435\u0441\u044f\u0442 \u0436\u0430\u043b\u043a\u0438\u0435 20 \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442, \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e.<\/li>\n<li>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack-\u0430.<\/li>\n<\/ol>\n<p>  <\/p>\n<h1 id=\"pishem-kod-komponenta\">\u041f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h1>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c Donut Chart \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/4df\/a97\/65d\/4dfa9765ddd149b797c2b04142b81532.png\" alt=\"Donut Chart\"\/><\/p>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u044b \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u043c \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u0434. <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React from 'react';  export default class DonutChart extends React.Component {     render() {         const { radius, holeSize, text, value, total, backgroundColor, valueColor } = this.props;         const r = radius * (1 - (1 - holeSize)\/2);         const width = radius * (1 - holeSize);         const circumference = 2 * Math.PI * r;         const strokeDasharray = ((value * circumference) \/ total) + ' ' + circumference;         const transform = 'rotate(-90 ' + radius + ',' + radius + ')';         const fontSize = r * holeSize * 0.6;         return (             &lt;div style = {{ textAlign: 'center', fontFamily: 'sans-serif' }}&gt;                 &lt;svg width = {radius * 2 + 'px'} height = {radius * 2 + 'px'}&gt;                     &lt;circle                          r = {r + 'px'} cx = {radius + 'px'} cy = {radius + 'px'}                         transform = {transform} fill = 'none'                         stroke = {backgroundColor} strokeWidth = {width}                     \/&gt;                     &lt;circle                         r = {r + 'px'} cx = {radius + 'px'} cy = {radius + 'px'}                         transform = {transform} fill = 'none'                         stroke = {valueColor} strokeWidth = {width}                         strokeDasharray = {strokeDasharray}                     \/&gt;                     &lt;text                         x = {radius + 'px'} y = {radius + 'px' }dy = {fontSize\/3 + 'px'}                         textAnchor = 'middle' fill = {valueColor} fontSize = {fontSize + 'px'}                     &gt;                         {~~(value * 1000 \/ total) \/ 10}%                     &lt;\/text&gt;                 &lt;\/svg&gt;                 &lt;div style = {{ marginTop: '10px' }}&gt;                     {text}                 &lt;\/div&gt;             &lt;\/div&gt;         );     } }  DonutChart.defaultProps = {     holeSize : 0.8,     radius : 65,     backgroundColor : '#d1d8e7',     valueColor : '#49649f' };<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"chto-dolzhno-poluchitsya-v-itoge\">\u0427\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u0435<\/h1>\n<p>  <\/p>\n<p><a href=\"http:\/\/codepen.io\/collection\/nkeWod\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/18c\/d6e\/f95\/18cd6ef958b64ee3a64e3926284673bf.png\" alt=\"Codepen Collection\"\/><\/a><\/p>\n<p>  <\/p>\n<h1 id=\"nastraivaem-sborku-webpack-om\">\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 Webpack-\u043e\u043c<\/h1>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439 Webpack-\u043a\u043e\u043d\u0444\u0438\u0433<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var webpack = require('webpack');  module.exports = {     output: {         path: '.\/dist'     },     resolve: {         extensions: ['', '.js'],     },     module: {         loaders: [             {                 test: \/\\.js$\/,                 exclude: \/node_modules\/,                 loader: 'babel-loader',                 query: {                     presets: [                         'latest',                         'stage-0',                         'react'                     ],                     plugins: [                         'transform-react-remove-prop-types',                         'transform-react-constant-elements'                     ]                 }             }         ]     },     plugins: [         new webpack.DefinePlugin({             'process.env.NODE_ENV': &quot;'production'&quot;         }),         new webpack.optimize.DedupePlugin(),         new webpack.optimize.OccurrenceOrderPlugin(),         new webpack.optimize.AggressiveMergingPlugin(),         new webpack.optimize.UglifyJsPlugin({             compress: { warnings: false },             comments: false,             sourceMap: true,             mangle: true,             minimize: true         })     ] };<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h5 id=\"dobavlyaem-v-packagejson-skripty-dlya-sborki-proekta\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 package.json \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h5>\n<p>  <\/p>\n<pre><code>&quot;scripts&quot;: {     &quot;build:preact&quot;: &quot;node .\/scripts\/build-as-preact-component.js&quot;,     &quot;build:react&quot;: &quot;node .\/scripts\/build-as-react-component.js&quot;,     &quot;build:webcomponent&quot;: &quot;node .\/scripts\/build-as-web-component.js&quot;,     &quot;build:vanila&quot;: &quot;node .\/scripts\/build-as-vanila-component.js&quot;,     &quot;build:jquery&quot;: &quot;node .\/scripts\/build-as-jquery-component&quot;,     &quot;build:angular&quot;: &quot;node .\/scripts\/build-as-angular-component&quot;,     &quot;build&quot;: &quot;npm run build:preact &amp;&amp; npm run build:react &amp;&amp; npm run build:webcomponent &amp;&amp; npm run build:vanila &amp;&amp; npm run build:jquery &amp;&amp; npm run build:angular&quot;   }<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"sborka-webpack-om-i-obertka-dlya-web-components\">\u0421\u0431\u043e\u0440\u043a\u0430 Webpack-\u043e\u043c \u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f Web Components<\/h1>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e Webpack-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var webpack = require('webpack'); var config = require('.\/webpack.config'); var statsConfig = require('.\/statsConfig');  config.resolve.alias = {     'react': 'preact-compat',     'react-dom': 'preact-compat' }; config.entry = '.\/src\/DonutChartWebComponent.js'; config.output.filename = 'DonutChartWebComponent.js';  webpack(config).run(function (err, stats) {     console.log(stats.toString(statsConfig)); });<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"obertka\">\u041e\u0431\u0435\u0440\u0442\u043a\u0430<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React from 'react'; import ReactDOM from 'react-dom'; import DonutChart from '.\/DonutChart';  const proto = Object.create(HTMLElement.prototype, {     attachedCallback: {         value: function() {             const mountPoint = document.createElement('span');             this.createShadowRoot().appendChild(mountPoint);             const props = {                 radius          : +this.getAttribute('radius') || undefined,                 holeSize        : +this.getAttribute('hole-size') || undefined,                 text            : this.getAttribute('text') || undefined,                 value           : +this.getAttribute('value') || undefined,                 total           : +this.getAttribute('total') || undefined,                 backgroundColor : this.getAttribute('background-color') || undefined,                 valueColor      : this.getAttribute('value-color') || undefined             };             ReactDOM.render((                 &lt;DonutChart {...props}\/&gt;             ), mountPoint);         }     } }); document.registerElement('donut-chart', {prototype: proto});<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"primer-ispolzovaniya\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;donut-chart value=&quot;39.6&quot; total=&quot;100&quot; text=&quot;Hello Web Components&quot;&gt;&lt;\/donut-chart&gt;<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"rezultat\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h4>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/MrCheater\/embed\/preview\/VmMzPg?height=300&amp;amp;slug-hash=VmMzPg&amp;amp;default-tabs=html,result&amp;amp;host=http%3A%2F%2Fcodepen.io&amp;amp;embed-version=2\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h1 id=\"sborka-webpack-om-i-obertka-dlya-angular\">\u0421\u0431\u043e\u0440\u043a\u0430 Webpack-\u043e\u043c \u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f Angular<\/h1>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e Webpack-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var webpack = require('webpack'); var config = require('.\/webpack.config'); var statsConfig = require('.\/statsConfig');  config.resolve.alias = {     'react': 'preact-compat',     'react-dom': 'preact-compat' }; config.entry = '.\/src\/DonutChartAngularComponent.js'; config.output.filename = 'DonutChartAngularComponent.js'; config.output.library = 'DonutChart'; config.output.libraryTarget = 'umd';  webpack(config).run(function (err, stats) {     console.log(stats.toString(statsConfig)); });<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"obertka-1\">\u041e\u0431\u0435\u0440\u0442\u043a\u0430<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React from 'react'; import ReactDOM from 'react-dom'; import DonutChart from '.\/DonutChart';  const module = angular.module('future-charts-example', []);  module.directive('donutChart', function() {     return {         restrict: 'E',         link: function(scope, element, attrs) {             const props = {                 radius          : +attrs['radius'] || undefined,                 holeSize        : +attrs['hole-size'] || undefined,                 text            : attrs['text'] || undefined,                 value           : +attrs['value'] || undefined,                 total           : +attrs['total'] || undefined,                 backgroundColor : attrs['background-color'] || undefined,                 valueColor      : attrs['value-color'] || undefined             };             ReactDOM.render((                 &lt;DonutChart {...props}\/&gt;             ), element[0]);         }     }; });<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"primer-ispolzovaniya-1\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;body ng-app=&quot;future-charts-example&quot;&gt;     &lt;donut-chart value=&quot;89.6&quot; total=&quot;100&quot; text=&quot;Hello Angular&quot;&gt;&lt;\/donut-chart&gt; &lt;\/body&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"rezultat-1\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h3>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/MrCheater\/embed\/preview\/xRPQbb?height=300&amp;amp;slug-hash=xRPQbb&amp;amp;default-tabs=html,result&amp;amp;host=http%3A%2F%2Fcodepen.io&amp;amp;embed-version=2\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h1 id=\"sborka-webpack-om-i-obertka-dlya-jquery\">\u0421\u0431\u043e\u0440\u043a\u0430 Webpack-\u043e\u043c \u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f jQuery<\/h1>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e Webpack-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var webpack = require('webpack'); var config = require('.\/webpack.config'); var statsConfig = require('.\/statsConfig');  config.resolve.alias = {     'react': 'preact-compat',     'react-dom': 'preact-compat' }; config.entry = '.\/src\/DonutChartJQueryComponent.js'; config.output.filename = 'DonutChartJQueryComponent.js'; config.output.library = 'DonutChart'; config.output.libraryTarget = 'umd';  webpack(config).run(function (err, stats) {     console.log(stats.toString(statsConfig)); });<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"obertka-2\">\u041e\u0431\u0435\u0440\u0442\u043a\u0430<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React from 'react'; import ReactDOM from 'react-dom'; import DonutChart from '.\/DonutChart';  jQuery.fn.extend({     DonutChart: function(props) {         this.each(             function () {                 ReactDOM.render((                     &lt;DonutChart {...props}\/&gt;                 ), this);             }         );     } });<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"primer-ispolzovaniya-2\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">$('#app').DonutChart({     value : 42.1,     total : 100,     text : 'Hello jQuery' });<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"rezultat-2\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h3>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/MrCheater\/embed\/preview\/jVaepz?height=300&amp;amp;slug-hash=jVaepz&amp;amp;default-tabs=html,result&amp;amp;host=http%3A%2F%2Fcodepen.io&amp;amp;embed-version=2\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h1 id=\"sborka-webpack-om-i-obertka-dlya-vanilajs-ispolzovanie-iz-nativnoy-funkcii\">\u0421\u0431\u043e\u0440\u043a\u0430 Webpack-\u043e\u043c \u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0434\u043b\u044f VanilaJS (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438)<\/h1>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e Webpack-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var webpack = require('webpack'); var config = require('.\/webpack.config'); var statsConfig = require('.\/statsConfig');  config.resolve.alias = {     'react': 'preact-compat',     'react-dom': 'preact-compat' }; config.entry = '.\/src\/DonutChartVanilaComponent.js'; config.output.filename = 'DonutChartVanilaComponent.js'; config.output.library = 'DonutChart'; config.output.libraryTarget = 'umd';  webpack(config).run(function (err, stats) {     console.log(stats.toString(statsConfig)); });<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"obertka-3\">\u041e\u0431\u0435\u0440\u0442\u043a\u0430<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">import React from 'react'; import ReactDOM from 'react-dom'; import DonutChart from '.\/DonutChart';  module.exports = function DonutChartVanilaComponent(mountPoint, props) {     ReactDOM.render((         &lt;DonutChart {...props}\/&gt;     ), mountPoint); };<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"primer-ispolzovaniya-3\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">DonutChart(document.getElementById('app'), {     value : 57.4,     total : 100,     text : 'Hello Vanila' });<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"rezultat-3\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h3>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/MrCheater\/embed\/preview\/jVavaq?height=300&amp;amp;slug-hash=jVavaq&amp;amp;default-tabs=html,result&amp;amp;host=http%3A%2F%2Fcodepen.io&amp;amp;embed-version=2\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h1 id=\"sborka-webpack-om-dlya-react\">\u0421\u0431\u043e\u0440\u043a\u0430 Webpack-\u043e\u043c \u0434\u043b\u044f React<\/h1>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e Webpack-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var webpack = require('webpack'); var config = require('.\/webpack.config'); var statsConfig = require('.\/statsConfig');  var react = {     root: 'React',     commonjs2: 'react',     commonjs: 'react' };  var reactDom = {     root: 'ReactDOM',     commonjs2: 'react-dom',     commonjs: 'react-dom' };  config.externals = {     'react': react,     'react-dom': reactDom }; config.entry = '.\/src\/DonutChartUMD.js'; config.output.filename = 'DonutChartReact.js'; config.output.library = 'DonutChart'; config.output.libraryTarget = 'umd';  webpack(config).run(function (err, stats) {     console.log(stats.toString(statsConfig)); });<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h4 id=\"rezultat-4\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h4>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/MrCheater\/embed\/preview\/GNMvZb?height=300&amp;amp;slug-hash=GNMvZb&amp;amp;default-tabs=html,result&amp;amp;host=http%3A%2F%2Fcodepen.io&amp;amp;embed-version=2\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h1 id=\"sborka-webpack-om-dlya-preact\">\u0421\u0431\u043e\u0440\u043a\u0430 Webpack-\u043e\u043c \u0434\u043b\u044f Preact<\/h1>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e Webpack-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0441\u0431\u043e\u0440\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var webpack = require('webpack'); var config = require('.\/webpack.config'); var statsConfig = require('.\/statsConfig');  var preactCompat = {     root: 'preactCompat',     commonjs2: 'preact-compat',     commonjs: 'preact-compat' };  config.externals = {     'react': preactCompat,     'react-dom': preactCompat }; config.entry = '.\/src\/DonutChartUMD.js'; config.output.filename = 'DonutChartPreact.js'; config.output.library = 'DonutChart'; config.output.libraryTarget = 'umd';  webpack(config).run(function (err, stats) {     console.log(stats.toString(statsConfig)); });<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"rezultat-5\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/h3>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/MrCheater\/embed\/preview\/QGqdbo?height=300&amp;amp;slug-hash=QGqdbo&amp;amp;default-tabs=html,result&amp;amp;host=http%3A%2F%2Fcodepen.io&amp;amp;embed-version=2\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h1 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h1>\n<p>  <\/p>\n<p>\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432: <\/p>\n<p>  <\/p>\n<table>\n<thead>\n<tr>\n<th>React<\/th>\n<th>Preact<\/th>\n<th>VanilaJS<\/th>\n<th>jQuery<\/th>\n<th>Angular<\/th>\n<th>Web Components<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (3\u043a\u0431)<\/td>\n<td>\u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (3\u043a\u0431)<\/td>\n<td>\u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (3\u043a\u0431)<\/td>\n<td>\u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (3\u043a\u0431)<\/td>\n<td>\u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (3\u043a\u0431)<\/td>\n<td>\u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (3\u043a\u0431)<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><\/td>\n<td>\u041e\u0431\u0435\u0440\u0442\u043a\u0430 (1\u043a\u0431)<\/td>\n<td>\u041e\u0431\u0435\u0440\u0442\u043a\u0430(1\u043a\u0431)<\/td>\n<td>\u041e\u0431\u0435\u0440\u0442\u043a\u0430(1\u043a\u0431)<\/td>\n<td>\u041e\u0431\u0435\u0440\u0442\u043a\u0430 (1\u043a\u0431)<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><\/td>\n<td>preact.min.js (3\u043a\u0431)<\/td>\n<td>preact.min.js (3\u043a\u0431)<\/td>\n<td>preact.min.js (3\u043a\u0431)<\/td>\n<td>preact.min.js (3\u043a\u0431)<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><\/td>\n<td>preact-compat.min.js (18\u043a\u0431)<\/td>\n<td>preact-compat.min.js (18\u043a\u0431)<\/td>\n<td>preact-compat.min.js (18\u043a\u0431)<\/td>\n<td>preact-compat.min.js (18\u043a\u0431)<\/td>\n<\/tr>\n<tr>\n<td><strong>3\u043a\u0431<\/strong><\/td>\n<td><strong>3\u043a\u0431<\/strong><\/td>\n<td><strong>25\u043a\u0431<\/strong><\/td>\n<td><strong>25\u043a\u0431<\/strong><\/td>\n<td><strong>25\u043a\u0431<\/strong><\/td>\n<td><strong>25\u043a\u0431<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>  <\/p>\n<p>\u041e\u0432\u0435\u0440\u0445\u0435\u0434 \u0432 20 \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442 \u0437\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043b\u044e\u0431\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u0438\u043b\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 Web Components \u2014 \u044d\u0442\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0437\u043d\u0430\u0439\u0442\u0435 \u2014 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0432\u0441\u0435\u043c \u0438 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u2014 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u0440 \u0445\u043e\u0442\u044f \u0431\u044b \u0447\u0443\u0442\u043e\u0447\u043a\u0443 \u043b\u0443\u0447\u0448\u0435 \u0438 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442 \u0441\u0442\u0440\u0430\u0448\u043d\u0443\u044e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0432\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439 JavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438: <a href=\"https:\/\/github.com\/MrCheater\/habrahabr-universal-component\">Github<\/a>, <a href=\"http:\/\/codepen.io\/collection\/nkeWod\/\">Codepen<\/a>, <a href=\"https:\/\/www.npmjs.com\/package\/habrahabr-universal-component\">NPM<\/a><\/p>\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:\/\/habrahabr.ru\/post\/316358\/\"> https:\/\/habrahabr.ru\/post\/316358\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"https:\/\/habrahabr.ru\/company\/devexpress\/blog\/316358\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/550\/fe6\/2a5\/550fe62a59dd41769e8fc72e66cf3a80.png\" alt=\"image\"\/><\/a><br \/>  \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 JavaScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043a\u0430\u043a React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/li>\n<li>\u043a\u0430\u043a Preact-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/li>\n<li>\u043a\u0430\u043a Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;<\/li>\n<li>\u043a\u0430\u043a Web Component;<\/li>\n<li>\u043a\u0430\u043a jQuery \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 DOMElement;<\/li>\n<li>\u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 DOMElement.<\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"zachem-i-komu-eto-nuzhno\">\u0417\u0430\u0447\u0435\u043c \u0438 \u043a\u043e\u043c\u0443 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/h1>\n<p>  <\/p>\n<p>\u041c\u0438\u0440 JavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d. \u0415\u0441\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0430 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 JavaScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0432\u044b\u0431\u0438\u0440\u0430\u044f \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442. \u042d\u0442\u043e \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-281977","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281977","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=281977"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281977\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=281977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=281977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=281977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}