kokopu-react 1.11.1 → 2.0.1

package/{graphic_test_src/13_movetext_simple.js → test/graphic_test_app/09_movetext_graphic/base.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,21 +17,21 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
+import * as React from 'react';
 import { Game, pgnRead } from 'kokopu';
-import testApp from './common/test_app';
-import { Movetext } from '../src/index';
+import { testApp } from '../common/test_app';
+import { Movetext } from '../../../dist/lib/index';
 
-import pgn from './common/games.pgn';
+import pgn from '../common/games.pgn';
 
-let game = new Game();
+const game = new Game();
 game.mainVariation().play('e4').play('e5').play('Bc4').play('Nc6').play('Qh5').play('Nf6').play('Qxf7#');
 game.result('1-0');
 
-let database = pgnRead(pgn);
+const database = pgnRead(pgn);
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Movetext game={game} />,

package/{graphic_test_src/14_movetext_error.js → test/graphic_test_app/09_movetext_graphic/error.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,23 +17,24 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
+import * as React from 'react';
 import { pgnRead } from 'kokopu';
-import testApp from './common/test_app';
-import { Movetext } from '../src/index';
+import { testApp } from '../common/test_app';
+import { Movetext } from '../../../dist/lib/index';
 
-import pgn from './common/games.pgn';
-import dummyPgn from './common/dummy.pgn';
+import pgn from '../common/games.pgn';
+import dummyPgn from '../common/dummy.pgn';
 
-let database = pgnRead(pgn);
+const database = pgnRead(pgn);
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Movetext game={pgn} gameIndex={99} />,
 	<Movetext game={database} gameIndex={99} />,
 	<Movetext game={dummyPgn} />,
 	<Movetext game={pgnRead(dummyPgn)} gameIndex={1} />,
-	<Movetext game={42} />,
+	<Movetext game={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+	<Movetext game={pgn} gameIndex={-1} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/{graphic_test_src/15_movetext_html.js → test/graphic_test_app/09_movetext_graphic/html.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,14 +17,14 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
-import testApp from './common/test_app';
-import { Movetext } from '../src/index';
+import * as React from 'react';
+import { testApp } from '../common/test_app';
+import { Movetext } from '../../../dist/lib/index';
 
-import pgn from './common/games.pgn';
+import pgn from '../common/games.pgn';
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Movetext game={pgn} gameIndex={4} />,
@@ -32,7 +32,7 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Movetext game={pgn} gameIndex={6} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */
 
-let customCSS = document.createElement('style');
+const customCSS = document.createElement('style');
 customCSS.innerText = `
 	.myClass { font-weight: bold; color: green; }
 	#myId { font-weight: bold; color: red; }

package/{graphic_test_src/16_movetext_options.js → test/graphic_test_app/09_movetext_graphic/options.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,14 +17,14 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
-import testApp from './common/test_app';
-import { Movetext, i18n } from '../src/index';
+import * as React from 'react';
+import { testApp } from '../common/test_app';
+import { Movetext, i18n } from '../../../dist/lib/index';
 
-import pgn from './common/games.pgn';
+import pgn from '../common/games.pgn';
 
 // Localization for French
 i18n.PIECE_SYMBOLS = { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' };
@@ -35,4 +35,7 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Movetext game={pgn} gameIndex={3} pieceSymbols="figurines" headerVisible={false}
 		diagramOptions={{ flipped: true, coordinateVisible: false, squareSize: 32, colorset: 'scid', pieceset: 'eyes' }} />,
 	<Movetext game={pgn} gameIndex={9} diagramVisible={false} />,
+	<Movetext game={pgn} gameIndex={3} diagramOptions={ /* eslint-disable @typescript-eslint/no-explicit-any */ null as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+	<Movetext game={pgn} gameIndex={3}
+		diagramOptions={ /* eslint-disable @typescript-eslint/no-explicit-any */ { squareSize: '32' }  as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/10_movetext_interaction/error.tsx

@@ -0,0 +1,31 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+import { testApp } from '../common/test_app';
+import { Movetext } from '../../../dist/lib/index';
+
+import pgn from '../common/games.pgn';
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Movetext game={pgn} gameIndex={7} interactionMode={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'whatever' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+], 'width-600'); /* eslint-enable react/jsx-key */

package/{graphic_test_src/17_movetext_interaction.js → test/graphic_test_app/10_movetext_interaction/select_moves.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,16 +17,16 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
-import testApp, { setSandbox } from './common/test_app';
-import { Movetext } from '../src/index';
+import * as React from 'react';
+import { testApp, setSandbox } from '../common/test_app';
+import { Movetext } from '../../../dist/lib/index';
 
-import pgn from './common/games.pgn';
+import pgn from '../common/games.pgn';
 
-function onMoveSelected(nodeId, evtOrigin) {
+function onMoveSelected(nodeId: string | undefined, evtOrigin: string) {
 	setSandbox(`move selected: ${nodeId}\norigin: ${evtOrigin}`);
 }
 

package/test/graphic_test_app/common/decs.d.ts

@@ -0,0 +1,26 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+declare module '*.pgn' {
+	const pgnText: string;
+	export default pgnText;
+}

package/{graphic_test_src → test/graphic_test_app}/common/games.pgn

@@ -110,7 +110,7 @@ Lists are supported:
 <li>1<sup>st</sup> point</li>
 <li>2<sup>nd</sup> point</li>
 </ul>
-... and so are images: <img src="../smiley.png" alt="smiley" />}
+... and so are images: <img src="../../smiley.png" alt="smiley" />}
 
 *
 

package/{graphic_test_src → test/graphic_test_app}/common/test_app.css

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,7 +17,7 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
 .test-item,
@@ -36,6 +36,15 @@ body {
 	background-color: white;
 }
 
+.test-item-error {
+	display: inline-block;
+	border: solid 1px #999;
+	background-color: #eee;
+	font-family: sans-serif;
+	font-size: 12px;
+	padding: 0.5em;
+}
+
 #sandbox {
 	padding: 3px;
 	background-color: lightgoldenrodyellow;

package/{graphic_test_src/common/test_app.js → test/graphic_test_app/common/test_app.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,40 +17,85 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
+
 import './test_app.css';
 
 
-function flattenMultiElements(elements, containerClassName) {
-	let items = [];
+// This global variable allows to freeze animations in an intermediate stage.
+declare global {
+	interface Window {
+		'__kokopu_debug_freeze_motion': number;
+	}
+}
+
+
+interface TestItemContainerProps {
+	index: number;
+	children: React.ReactNode;
+}
+
+
+interface TestItemContainerState {
+	hasError: boolean;
+}
+
+
+class TestItemContainer extends React.Component<TestItemContainerProps, TestItemContainerState> {
+
+	constructor(props: TestItemContainerProps) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+
+	render() {
+		return (
+			<div className="test-item-container">
+				<div className="test-item" id={'test-item-' + this.props.index}>{this.renderContent()}</div>
+			</div>
+		);
+	}
+
+	private renderContent() {
+		return this.state.hasError ? <span className="test-item-error">Exception thrown</span> : this.props.children;
+	}
+}
+
+
+function flattenMultiElements(elements: React.ReactNode[], containerClassName: string[]) {
+	const items = [];
 	for (let i = 0; i < elements.length; ++i) {
-		items.push(<div key={i} className="test-item-container"><div className="test-item" id={'test-item-' + i}>{elements[i]}</div></div>);
+		items.push(<TestItemContainer key={i} index={i}>{elements[i]}</TestItemContainer>);
 	}
-	return <div className={Array.isArray(containerClassName) ? containerClassName.join(' ') : containerClassName}>{items}</div>;
+	return <div className={containerClassName.join(' ')}>{items}</div>;
 }
 
 
 /**
  * Create an DIV element at the root of the current document, and render the given elements in it.
  */
-export default function(elements, containerClassName) {
+export function testApp(elements: React.ReactNode[], ...containerClassName: string[]) {
 
 	// Create the main anchor.
-	let anchor = document.createElement('div');
+	const anchor = document.createElement('div');
 	anchor.id = 'test-app';
 	document.body.appendChild(anchor);
 
 	// Render the content.
-	let root = createRoot(anchor);
-	let content = flattenMultiElements(elements, containerClassName);
+	const root = createRoot(anchor);
+	const content = flattenMultiElements(elements, containerClassName);
 	root.render(content);
 
 	// Append a text area
-	let sandbox = document.createElement('pre');
+	const sandbox = document.createElement('pre');
 	sandbox.id = 'sandbox';
 	document.body.appendChild(sandbox);
 }
@@ -59,7 +104,10 @@ export default function(elements, containerClassName) {
 /**
  * Set the content of the sandbox.
  */
-export function setSandbox(text) {
-	let sandbox = document.getElementById('sandbox');
+export function setSandbox(text: string) {
+	const sandbox = document.getElementById('sandbox');
+	if (sandbox === null) {
+		throw new Error('Cannot locate the sandbox...');
+	}
 	sandbox.innerText = text;
 }

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"include": [ "./src/**/*" ],
+	"compilerOptions": {
+		"sourceMap": true,
+		"declaration": true,
+		"module": "es2020",
+		"target": "es2020",
+		"jsx": "react",
+		"types": [],
+		"allowJs": false,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution": "node"
+	}
+}

package/.babelrc

@@ -1,3 +0,0 @@
-{
-	"presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/dist/lib/ArrowMarkerIcon.js

@@ -1,85 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-require("./css/arrow.css");
-var _ArrowTip = _interopRequireDefault(require("./impl/ArrowTip"));
-var _util = require("./impl/util");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var ARROW_THICKNESS_FACTOR = 0.2;
-
-/**
- * SVG icon representing an arrow marker.
- */
-var ArrowMarkerIcon = /*#__PURE__*/function (_React$Component) {
-  _inherits(ArrowMarkerIcon, _React$Component);
-  var _super = _createSuper(ArrowMarkerIcon);
-  function ArrowMarkerIcon(props) {
-    var _this;
-    _classCallCheck(this, ArrowMarkerIcon);
-    _this = _super.call(this, props);
-    _this.arrowTipId = (0, _util.generateRandomId)();
-    return _this;
-  }
-  _createClass(ArrowMarkerIcon, [{
-    key: "render",
-    value: function render() {
-      var size = (0, _util.sanitizeInteger)(this.props.size, _util.MIN_SQUARE_SIZE, _util.MAX_SQUARE_SIZE);
-      if (isNaN(size)) {
-        return undefined;
-      }
-      var halfThickness = size * ARROW_THICKNESS_FACTOR / 2;
-      var viewBox = "0 0 ".concat(size, " ").concat(size);
-      return /*#__PURE__*/_react["default"].createElement("svg", {
-        className: "kokopu-arrowMarkerIcon",
-        viewBox: viewBox,
-        width: size,
-        height: size
-      }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement(_ArrowTip["default"], {
-        id: this.arrowTipId,
-        color: this.props.color
-      })), /*#__PURE__*/_react["default"].createElement("line", {
-        className: "kokopu-arrow",
-        x1: halfThickness,
-        y1: size / 2,
-        x2: size - halfThickness * 3,
-        y2: size / 2,
-        stroke: this.props.color,
-        strokeWidth: halfThickness * 2,
-        markerEnd: "url(#".concat(this.arrowTipId, ")")
-      }));
-    }
-  }]);
-  return ArrowMarkerIcon;
-}(_react["default"].Component);
-exports["default"] = ArrowMarkerIcon;
-ArrowMarkerIcon.propTypes = {
-  /**
-   * Width and height (in pixels) of the icon.
-   */
-  size: _propTypes["default"].number.isRequired,
-  /**
-   * Color to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
-   */
-  color: _propTypes["default"].string
-};
-ArrowMarkerIcon.defaultProps = {
-  color: 'currentcolor'
-};