kokopu-react 1.11.0 → 2.0.0

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": {
+		"outDir": "./dist/lib",
+		"module": "es2020",
+		"target": "es2020",
+		"jsx": "react",
+		"sourceMap": true,
+		"declaration": true,
+		"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'
-};