Merge pull request #364 from technote-space/release/next-v4.0.7

release: v4.1.0

Author: technote-space

README.ja.md

@@ -13,8 +13,6 @@
 
 蛍光ペンで塗るようなアニメーションを表示する機能を追加するプラグインです。
 
-[デモ](https://technote-space.github.io/marker-animation)
-
 [最新バージョン](https://github.com/technote-space/marker-animation/releases/latest/download/release.zip)
 
 ## Table of Contents

README.md

@@ -13,8 +13,6 @@
 
 This plugin will add the ability to display animations like painting with a highlighter.
 
-[Demonstration](https://technote-space.github.io/marker-animation)
-
 [Latest version](https://github.com/technote-space/marker-animation/releases/latest/download/release.zip)
 
 ## Table of Contents

_config.yml

@@ -0,0 +1,4 @@
+theme: jekyll-theme-cayman
+
+# Google Analytics
+google_analytics: UA-78163306-3

assets/js/__tests__/components/__snapshots__/text-control.js.snap

@@ -2,13 +2,13 @@
 
 exports[`MyTextControl should render text control: blur1 1`] = `
 <div
-  className="components-base-control"
+  className="components-base-control css-wdf2ti-Wrapper e1puf3u0"
 >
   <div
-    className="components-base-control__field"
+    className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
   >
     <label
-      className="components-base-control__label"
+      className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
       htmlFor="inspector-text-control-0"
     >
       test-label
@@ -27,13 +27,13 @@ exports[`MyTextControl should render text control: blur1 1`] = `
 
 exports[`MyTextControl should render text control: blur2 1`] = `
 <div
-  className="components-base-control"
+  className="components-base-control css-wdf2ti-Wrapper e1puf3u0"
 >
   <div
-    className="components-base-control__field"
+    className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
   >
     <label
-      className="components-base-control__label"
+      className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
       htmlFor="inspector-text-control-1"
     >
       test-label
@@ -52,13 +52,13 @@ exports[`MyTextControl should render text control: blur2 1`] = `
 
 exports[`MyTextControl should render text control: changed1 1`] = `
 <div
-  className="components-base-control"
+  className="components-base-control css-wdf2ti-Wrapper e1puf3u0"
 >
   <div
-    className="components-base-control__field"
+    className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
   >
     <label
-      className="components-base-control__label"
+      className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
       htmlFor="inspector-text-control-0"
     >
       test-label
@@ -77,13 +77,13 @@ exports[`MyTextControl should render text control: changed1 1`] = `
 
 exports[`MyTextControl should render text control: render1 1`] = `
 <div
-  className="components-base-control"
+  className="components-base-control css-wdf2ti-Wrapper e1puf3u0"
 >
   <div
-    className="components-base-control__field"
+    className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
   >
     <label
-      className="components-base-control__label"
+      className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
       htmlFor="inspector-text-control-0"
     >
       test-label
@@ -102,13 +102,13 @@ exports[`MyTextControl should render text control: render1 1`] = `
 
 exports[`MyTextControl should render text control: render2 1`] = `
 <div
-  className="components-base-control"
+  className="components-base-control css-wdf2ti-Wrapper e1puf3u0"
 >
   <div
-    className="components-base-control__field"
+    className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
   >
     <label
-      className="components-base-control__label"
+      className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
       htmlFor="inspector-text-control-1"
     >
       test-label

assets/js/gutenberg.config.js

@@ -1,6 +1,5 @@
 const SpeedMeasurePlugin            = require('speed-measure-webpack-plugin');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
-const HardSource                    = require('hard-source-webpack-plugin');
 const smp                           = new SpeedMeasurePlugin();
 const webpack                       = require('webpack');
 const pkg                           = require('./package');
@@ -31,15 +30,14 @@ const webpackConfig = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader?cacheDirectory',
+        loader: 'babel-loader',
       },
     ],
   },
   externals,
   plugins: [
     new webpack.BannerPlugin(banner),
     new DuplicatePackageCheckerPlugin(),
-    new HardSource(),
   ],
 };
 

assets/js/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  clearMocks: true,
   verbose: true,
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',

assets/js/marker-animation.config.js

@@ -1,6 +1,5 @@
 const SpeedMeasurePlugin            = require('speed-measure-webpack-plugin');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
-const HardSource                    = require('hard-source-webpack-plugin');
 const smp                           = new SpeedMeasurePlugin();
 const webpack                       = require('webpack');
 const pkg                           = require('./package');
@@ -20,7 +19,7 @@ const webpackConfig = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader?cacheDirectory',
+        loader: 'babel-loader',
       },
     ],
   },
@@ -30,7 +29,6 @@ const webpackConfig = {
   plugins: [
     new webpack.BannerPlugin(banner),
     new DuplicatePackageCheckerPlugin(),
-    new HardSource(),
   ],
 };
 

assets/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marker-animation",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "description": "marker animation for wordpress",
   "main": "marker-animation.min.js",
   "scripts": {
@@ -26,31 +26,30 @@
   },
   "license": "GPL-3.0",
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-transform-react-jsx": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@technote-space/gutenberg-test-helper": "^0.0.21",
-    "@technote-space/gutenberg-utils": "^2.2.13",
-    "@technote-space/register-grouped-format-type": "^2.0.11",
-    "@wordpress/components": "^10.2.0",
-    "@wordpress/compose": "^3.20.1",
-    "@wordpress/element": "^2.17.1",
-    "@wordpress/rich-text": "^3.21.1",
-    "babel-jest": "^26.3.0",
-    "babel-loader": "^8.1.0",
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-react-jsx": "^7.12.7",
+    "@babel/preset-env": "^7.12.7",
+    "@technote-space/gutenberg-test-helper": "^0.1.4",
+    "@technote-space/gutenberg-utils": "^2.3.0",
+    "@technote-space/register-grouped-format-type": "^2.2.0",
+    "@wordpress/components": "^11.1.3",
+    "@wordpress/compose": "^3.22.0",
+    "@wordpress/element": "^2.18.0",
+    "@wordpress/rich-text": "^3.23.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.5.0",
-    "eslint": "^7.9.0",
-    "eslint-plugin-react": "^7.21.1",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "jest": "^26.4.2",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.14.0",
+    "eslint-plugin-react": "^7.21.5",
+    "jest": "^26.6.3",
     "jest-extended": "^0.11.5",
     "jquery": "^3.5.1",
-    "jquery.marker-animation": "^1.4.29",
-    "react": "^16.13.1",
+    "jquery.marker-animation": "^1.5.2",
+    "lodash": "^4.17.20",
     "speed-measure-webpack-plugin": "^1.3.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "~3.3.12"
+    "webpack": "^5.9.0",
+    "webpack-cli": "~4.2.0"
   }
 }

assets/js/src/gutenberg/components/text-control.js

@@ -1,14 +1,9 @@
 import React from 'react';
 import { TextControl } from '@wordpress/components';
-import { compose, withState } from '@wordpress/compose';
-
-const { isEqual } = window.lodash;
+import { useState, useMemo, useCallback } from '@wordpress/element';
+import { isEqual } from 'lodash';
 
 /**
- * @param {object?} stateArgs state args
- * @param {string?} initialValue initial value
- * @param {string?} stateValue state value
- * @param {function} setState set state
  * @param {function} onChange on change
  * @param {object} args args
  * @param {string} id id
@@ -17,29 +12,30 @@ const { isEqual } = window.lodash;
  * @returns {Component} text control
  * @constructor
  */
-const MyTextControl = ({ stateArgs, initialValue, stateValue, setState, onChange, args, id, label, value }) => {
+const MyTextControl = ({ onChange, args, id, label, value }) => {
+  const [stateArgs, setStateArgs]       = useState(undefined);
+  const [stateValue, setStateValue]     = useState('');
+  const [initialValue, setInitialValue] = useState('');
+  const onBlur                          = useCallback(() => {
+    if (initialValue !== stateValue) {
+      onChange(stateValue);
+    }
+  });
+
+
   if (undefined === stateArgs || !isEqual([args.value.start, args.value.end, args.value.text], [stateArgs.value.start, stateArgs.value.end, stateArgs.value.text])) {
-    setState({ stateArgs: args });
-    setState({ initialValue: value });
-    setState({ stateValue: value });
+    setStateArgs(args);
+    setStateValue(value);
+    setInitialValue(value);
   }
-  return <TextControl
+
+  return useMemo(() => <TextControl
     id={id}
     label={label}
     value={stateValue}
-    onChange={value => setState({ stateValue: value })}
-    onBlur={() => {
-      if (initialValue !== stateValue) {
-        onChange(stateValue);
-      }
-    }}
-  />;
+    onChange={setStateValue}
+    onBlur={onBlur}
+  />, [id, stateValue]);
 };
 
-export default compose(
-  withState({
-    stateArgs: undefined,
-    stateValue: '',
-    initialValue: '',
-  }),
-)(MyTextControl);
+export default MyTextControl;

assets/js/src/gutenberg/utils/component.js

@@ -22,7 +22,7 @@ export const getPanelComponent = (setting, args, formatName, value, stripe) => {
   }
 
   // eslint-disable-next-line no-magic-numbers
-  if (stripe && ['duration', 'delay', 'function', 'repeat'].indexOf(setting.name) >= 0) {
+  if (stripe && ['duration', 'delay', 'function', 'repeat', 'rtl'].indexOf(setting.name) >= 0) {
     return null;
   }