kenwebb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Transform ReactJS to Xholon

In this Xholon workbook I explore how to transform ReactJS JSX to Xholon format.
The gist includes several additional Javascript files.
TODO

Provide a sustantial example of a Xholon implementation that matches an existing reactjs app.
For example:
https://react.dev/learn/tutorial-tic-tac-toe

  
## index3.js
/**
ChatGPT dialog
User
Another correction. I want to use recast, acorn, and acorn-jsx, to transform something like <Thumbnail video={video} /> into something like <Thumbnail video="${video}" />. Provide Javascript code.

ChatGPT
To transform JSX using Recast, Acorn, and Acorn-JSX into the desired format ("<Thumbnail video="${video}" />"), you can follow these steps:
Install the necessary dependencies: npm install recast acorn acorn-jsx
Create a JavaScript file (e.g., jsx-transform.js) with the following code:
*/

/*
Ken Webb
22 Sept 2023
~/nodespace/jsx2xh/chatgptex03/index3.js
- it works!
- I have changed most of the code and added to it. ChatGPT helped me to get started.

TODO
- convert <> ... </> to Xholon <_-.frag> ,,, </_-.frag>
- embed each XML string within a pair of back ticks ex: `<div>...</div>`
*/

const recast = require('recast');
const acorn = require('acorn');
const jsxParser = require('acorn-jsx');

// Your JSX code
const code1 = '<Thumbnail video={video} />'; // OK
const code2 = `function Video({video}) {return (<><div><Thumbnail video={video} /><a href={video.url}><h3>{video.title}</h3><p>{video.description}</p></a><LikeButton video={video} /></div></>);}`; // OK  from ksw12.js
const code3 = `function Video({video}) {return (<div><Thumbnail video={video} /><a href={video.url}><h3>{video.title}</h3><p>{video.description}</p></a><LikeButton video={video} /></div>);}`; // OK

// https://react.dev/learn#writing-markup-with-jsx
// React components are JavaScript functions that return markup:
const code4 = `function MyButton() {
  return (
    <button>I'm a button</button>
  );
}`;

// Now that you’ve declared MyButton, you can nest it into another component:
const code5 = `export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}`;

// Notice that <MyButton /> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
// Have a look at the result:
const code6 = `function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
`;

//
const code7 = `function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}`;

// You can put more complex expressions inside the JSX curly braces too, for example, string concatenation:
// TODO KSW this example has a few difficulties
const code8 = `const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}`;

// In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code. For example, you can use an if statement to conditionally include JSX:
const code9 = `let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);`;
// SyntaxError: 'return' outside of function (7:0)

// see: reactjs02.js for a manual Xholonic version
const code9b = `function MyButton() {
let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
)};`;
// TypeError: Cannot read property 'name' of undefined

const jsxCode = code3;
console.log(jsxCode + "\n");

// Parse the JSX code with Acorn and Acorn-JSX
const ast = acorn.Parser.extend(jsxParser()).parse(jsxCode, {
  sourceType: 'module',
  ecmaVersion: 2020,
  plugins: {
    jsx: true,
  },
});

// Transform JSX attributes
const transformedAst = transformJSXAttributes(ast, "");

// Generate the transformed code using Recast
const transformedCode = recast.print(transformedAst).code;
console.log("\n" + transformedCode); // result: <Thumbnail video="\"${video}\"" />;

// this function uses recursive descent
function transformJSXAttributes(node, indent) {
  const val = node.value ? node.value.toString() : node.value
  console.log(indent, node.type, node.name, val);
  if (node.type === 'JSXFragment') {
    //console.log(node);
    // TODO convert <> ... </> to Xholon <_-.frag> ,,, </_-.frag>
    //node.type = 'JSXElement';
    //node.name = '_-.frag'; // TODO do this in the correct way
    //console.log(node);
  }
  else if (node.type === 'JSXElement') {
    //console.log(node.children);
    for (const attr of node.openingElement.attributes) {
      if (attr.type === 'JSXAttribute') {
        const { name, value } = attr;
        //if (name.type === 'JSXIdentifier' && name.name === 'video' && value) { // from chatGPT
        if (name.type === 'JSXIdentifier' && value) {
          if (value.type === 'JSXExpressionContainer') {
            // Transform JSXExpressionContainer into a string with ${}
            value.type = 'Literal';
            //value.value = `"${'${' + recast.print(value.expression).code + '}"'}`; // from chatGPT  NO
            value.value = '${' + recast.print(value.expression).code + '}'; // YES
          }
        }
      }
    }
    const childarr = node.children;
    if (childarr) {
		  //console.log(childarr.length);
		  for (const child of childarr) {
		    //console.log(child.type);
		    if (child.type === 'JSXExpressionContainer') {
		      child.type = 'Literal';
		      child.value = '${' + child.expression.object.name + '.' + child.expression.property.name + '}';
		    }
		  }
    }
  }
  else if (node.type === 'FunctionDeclaration') {
    //console.log(indent + "@@@@@FunctionDeclaration");
  }

  for (const key in node) {
    if (node[key] && typeof node[key] === 'object') {
      transformJSXAttributes(node[key], indent + " ");
    }
    else if (node[key] && typeof node[key] === 'string') {
      //console.log(node[key]);
    }
  }

  return node;
}

/**
This code:
Parses the JSX code using Acorn with the Acorn-JSX plugin.
Transforms the JSX attributes as per your requirement (converting {video} to "${video}").
Generates the transformed code using Recast.
Replace the jsxCode variable with your actual JSX code, and when you run this script,
it will print the transformed JSX code to the console.
Make sure to adjust the code as needed for your specific use case,
including loading and saving JSX code from/to files if necessary.
*/

## reactjs01.js
/**
Explore similarities between Xholon and ReactJS.
Ken Webb
13 Sept 2023
reactjs01.js

TODO use babel to transform reactjs to Xholon ?
- Xholon workbook: Transform ReactJS to Xholon
 */

// https://react.dev/
/*
function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  );
}
*/

// a Xholonic version
((video) => {

const Video = (video) => {
  return (
    `<div>
      <Thumbnail video="${video}" />
      <a href="${video.url}">
        <h3>${video.title}</h3>
        <p>${video.description}</p>
      </a>
      <LikeButton video="${video}" />
    </div>`
  );
}

const xmlstr = Video(video);
xh.root().append(xmlstr);
return xmlstr;
})({
url: "https://www.primordion.com/choco",
title: "Choco Loco",
description: "Choco goes crazy."
})

/* result
'<div>
      <Thumbnail video="[object Object]" />
      <a href="https://www.primordion.com/choco">
        <h3>Choco Loco</h3>
        <p>Choco goes crazy.</p>
      </a>
      <LikeButton video="[object Object]" />
    </div>'
*/

// this also works, 22 Sept 2023
// a Xholonic version
((video) => {

const Video = (video) => `<div><Thumbnail video="${video}" /><a href="${video.url}"><h3>${video.title}</h3><p>${video.description}</p></a><LikeButton video="${video}" /></div>`

const xmlstr = Video(video);
xh.root().append(xmlstr);
return xmlstr;
})({
url: "https://www.primordion.com/choco",
title: "Choco Loco",
description: "Choco goes crazy."
})

## reactjs02.js
/**
Explore similarities between Xholon and ReactJS.
Ken Webb
22 Sept 2023
reactjs02.js
 */

// https://react.dev/learn#writing-markup-with-jsx
/*
let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);
*/

// a Xholonic version
((isLoggedIn) => {

function MyButton() {
let content;
if (isLoggedIn) {
  content = "<AdminPanel />";
} else {
  content = "<LoginForm />";
}
return (
  `<div>
    ${content}
  </div>`
);
}

const xmlstr = MyButton();
return xmlstr;
})(true)

/* result
"<div>
    <AdminPanel />
  </div>"
*/

## xholonWorkbook.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Wed Sep 27 2023 11:53:30 GMT-0400 (Eastern Daylight Saving Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Transform ReactJS to Xholon
Description:
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 62ee0cfeb3584c95dae72d4960fcb7e0
Keywords:

My Notes
--------
13 Sept 2023

In this workbook I explore how to transform ReactJS JSX to Xholon format.

See my examples in: ~/nodespace/jsx2xh
chatgptex01
chatgptex02
recast01

### Export result as XML
- I used Export > Xml on board node
Xml
board
{"xhAttrStyle":1,"nameTemplate":"^^C^^^","xhAttrReturnAll":false,"writeStartDocument":false,"writeXholonId":false,"writeXholonRoleName":false,"writePorts":false,"writeAnnotations":false,"shouldPrettyPrint":true,"writeAttributes":false,"writeStandardAttributes":false,"shouldWriteVal":false,"shouldWriteAllPorts":false,"shouldWriteLinks":false,"showComments":false}

If I paste the resulting XML into the Xholon GUI HTML element <div id="xhappspecific"></div>
- it shows the 3 x 3 grid

### Event Handler
button is written to console as:
<button className="square" onClick="console.log('clicked ' + this.textContent)">
  1
</button>

If I paste this into the HTML in the browser, and click on that button, then "clicked N" is written to the Dev Tools console.

### Edit HTML
- paste or edit the following to appspecific element
<Board>
  <div>Winner: Human</div>
  <div>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">1</button>
    </Square>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">2</button>
    </Square>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">3</button>
    </Square>
  </div>
  <div>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">4</button>
    </Square>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">5</button>
    </Square>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">6</button>
    </Square>
  </div>
  <div>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">7</button>
    </Square>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">8</button>
    </Square>
    <Square>
      <button className="square" onClick="console.log('clicked ' + this.textContent)">9</button>
    </Square>
  </div>
</Board>

### TODO
27 Sept 2023
- the existing HtmlExporter is designed for Board
 - write a new HtmlExporter to handle Game
- work on Game and Board to get the final app working
- at this point, everything compiles and basically runs

### References
(1) https://react.dev/
    I am using the initial simple example as a first test.
    see: ~/gwtspace/Xholon/Xholon/script/javascript/reactjs01.js

(2) https://babeljs.io/
    I will follow the general instructions here.

(3) ChatGPT
    see: ~/A001_OpenAI/chatGPT48_babel.txt

(4) https://babeljs.io/videos/
    - maybe I should see some of these? But they are oldish.

(5) https://astexplorer.net/
    - has a good default example that reverses the names of Identifiers, using the followng visitor

export default function (babel) {
  const { types: t } = babel;

  return {
    name: "ast-transform", // not required
    visitor: {
      Identifier(path) {
        path.node.name = path.node.name.split('').reverse().join('');
      }
    }
  };
}

(5b) https://github.com/fkling/astexplorer/blob/master/README.md
    AST explorer
    Paste or drop code into the editor and inspect the generated AST on https://astexplorer.net/
    The AST explorer provides following code parsers:
      ...

(6) https://www.youtube.com/watch?v=VBscbcm2Mok&t=1253s
     Writing custom Babel and ESLint plugins with ASTs (Open West 2017), Kent C. Dodds

(7) https://github.com/babel/babel
    The compiler for writing next generation JavaScript.
    Babel (pronounced "babble") is a community-driven project used by many companies and projects,
    and is maintained by a group of volunteers.

(8) https://babel.dev/docs/babel-plugin-transform-react-jsx
    This plugin is included in @babel/preset-react
    - the page includes a bunch of examples

(9) https://github.com/jamiebuilds/babel-handbook/tree/master
    Babel Handbook, Written by Jamie Kyle
    A guided handbook on how to use Babel and how to create plugins for Babel.
  ) https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/user-handbook.md
    This document covers everything you ever wanted to know about using Babel and related tooling.

(10) https://babeljs.io/docs/babel-traverse
    We can use it alongside the babel parser to traverse and update nodes:

(11) https://dev.to/pulkitnagpal/transpile-jsx-using-your-own-custom-built-babel-plugin-4888
    pulkitnagpal, Posted on Aug 16, 2020
    Transpile JSX using your own custom built babel plugin
    Ever wondered how does react jsx code (<div>Hello World</div>) gets compiled to React.createElement("div", null, "Hello World").
    This blog is all about this compilation process by taking help from the source code of babel-preset-react and trying to build our own custom plugin.

(12) https://www.digitalocean.com/community/tutorials/js-traversing-ast
    // Tutorial //,  Read JavaScript Source Code, Using an AST, Published on February 8, 2019, Bart Ledoux
    The following example is small.
    Our mission, should you choose to accept it, will be to extract the names of all the functions exposed in the global scope.
    - has a list of parsers
    - the example is fairly detailed

(13) https://github.com/acornjs/acorn-jsx
   ) https://github.com/acornjs/acorn-jsx/blob/main/test/tests-jsx.js

(14) https://legacy.reactjs.org/docs/jsx-in-depth.html
    Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code:

    <MyButton color="blue" shadowSize={2}>
      Click Me
    </MyButton>

    compiles into:

    React.createElement(
      MyButton,
      {color: 'blue', shadowSize: 2},
      'Click Me'
    )
   ) https://react.dev/learn#writing-markup-with-jsx

(15) https://transform.tools/html-to-jsx
    - convert from HTML to JSX
    - this site has many similar transformers

(16) https://github.com/acornjs/acorn
    A tiny, fast JavaScript parser, written completely in JavaScript.
    This repository holds three packages:
    acorn: The main parser
    acorn-loose: The error-tolerant parser
    acorn-walk: The syntax tree walker

(17a) https://github.com/acornjs/acorn/tree/master/acorn/
(17b) https://github.com/acornjs/acorn/tree/master/acorn-loose/
(17c) https://github.com/acornjs/acorn/tree/master/acorn-walk/

(18) https://github.com/estree/estree
   ) https://github.com/estree/estree/blob/master/es5.md
    The ESTree Spec

    Once upon a time, an unsuspecting Mozilla engineer created an API in Firefox that exposed the SpiderMonkey engine's JavaScript parser as a JavaScript API.
    Said engineer documented the format it produced, and this format caught on as a lingua franca for tools that manipulate JavaScript source code.

    Meanwhile JavaScript is evolving.
    This site will serve as a community standard for people involved in building and using these tools to help evolve this format
    to keep up with the evolution of the JavaScript language.

(19) https://github.com/estree/formal
    ESTree machine-readable data (+generator)

(20) https://github.com/benjamn/recast
    JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator
    Recast exposes two essential interfaces, one for parsing JavaScript code (require("recast").parse)
    and the other for reprinting modified syntax trees (require("recast").print).
    - used in ref [12]

(21) https://esprima.org/
    Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript).
    Features
    - Full support for ECMAScript 2019 (ECMA-262 10th Edition)
    - Sensible syntax tree format, with optional node location info
    - Experimental support for JSX, a syntax extension for React
    - Heavily tested (~1600 tests with full code coverage)
   ) https://www.npmjs.com/package/esprima

(22) https://www.npmjs.com/search?q=keywords:ast
    - lots of interesting projects

(23) https://react.dev/learn/tutorial-tic-tac-toe
    Create a Xholonic version of this React tutorial.
    - use DefaultContent
    - perhaps use the GUI I created for my MeTTTa Xholon app.

(24) ~/gwtspace/Xholon/Xholon/script/javascript/reactjsUseState01.js
    - how to implement react useState in vanilla javascript
(24b) https://stackoverflow.com/questions/64744252/how-to-replicate-usestate-with-vanilla-js
    - I will implement some of what I found here
    - note that "count" in the example is a function rather than a constant value
(24c) https://codesandbox.io/s/usestate-implementation-in-vanilla-js-ff4rx
    - good example that runs in browser

]]></Notes>

<_-.XholonClass>
  <PhysicalSystem/>

  <Square superClass="Script"/>
  <Board superClass="Script"/>
  <Game superClass="Script"/>

  <TestUseState superClass="Script"/>

  <HtmlExporter superClass="Script"/>

</_-.XholonClass>

<xholonClassDetails>

  <!-- from ref[23]:
function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}
  -->
  <Square><DefaultContent><![CDATA[
var me, beh = {
postConfigure: function() {
  me = this.cnode;
  //$wnd.console.log(me.name());

function Square({ value, onSquareClick }) {
  return (
   `<button className="square" onClick="${onSquareClick}">
      ${value}
    </button>`
  );
}

var sq = Square({value: me.value, onSquareClick: "console.log('clicked ' + this.textContent); this.textContent = 'X';"});
//$wnd.console.log(sq);
me.append(sq);
}
}
//# sourceURL=SquareTest.js
]]></DefaultContent></Square>

  <!-- from ref[23]:
function Board({ xIsNext, squares, onPlay }) {
  function handleClick(i) {
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    onPlay(nextSquares);
  }

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}
  -->
  <Board><DefaultContent><![CDATA[
var me, beh = {
postConfigure: function() {
  me = this.cnode;

function calculateWinner(squares) {
  return "Human";
}

function Board({ xIsNext, squares, onPlay }) {
  function handleClick(i) {
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    onPlay(nextSquares);
  }

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  return (
    `<_-.board>
      <div className="status">${status}</div>
      <div className="board-row">
        <Square value="${squares[0]}" onSquareClick="${() => handleClick(0)}" />
        <Square value="${squares[1]}" onSquareClick="${() => handleClick(1)}" />
        <Square value="${squares[2]}" onSquareClick="${() => handleClick(2)}" />
      </div>
      <div className="board-row">
        <Square value="${squares[3]}" onSquareClick="${() => handleClick(3)}" />
        <Square value="${squares[4]}" onSquareClick="${() => handleClick(4)}" />
        <Square value="${squares[5]}" onSquareClick="${() => handleClick(5)}" />
      </div>
      <div className="board-row">
        <Square value="${squares[6]}" onSquareClick="${() => handleClick(6)}" />
        <Square value="${squares[7]}" onSquareClick="${() => handleClick(7)}" />
        <Square value="${squares[8]}" onSquareClick="${() => handleClick(8)}" />
      </div>
    </_-.board>`
  );
}

var brd = Board({xIsNext: true, squares: [1,2,3,4,5,6,7,8,9], onPlay: "play"});
//$wnd.console.log(brd);
me.append(brd);

// the following writes the resulting XML to a Xholon GUI tab:
//$wnd.xh.xport("Xml", me, '{"xhAttrStyle":1,"nameTemplate":"^^C^^^","xhAttrReturnAll":false,"writeStartDocument":false,"writeXholonId":false,"writeXholonRoleName":false,"writePorts":false,"writeAnnotations":false,"shouldPrettyPrint":true,"writeAttributes":false,"writeStandardAttributes":false,"shouldWriteVal":false,"shouldWriteAllPorts":false,"shouldWriteLinks":false,"showComments":false}');
}
}
//# sourceURL=BoardTest.js
]]></DefaultContent></Board>

  <!-- from ref[23]:
export default function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const xIsNext = currentMove % 2 === 0;
  const currentSquares = history[currentMove];

  function handlePlay(nextSquares) {
    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
    setHistory(nextHistory);
    setCurrentMove(nextHistory.length - 1);
  }

  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
  }

  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;
    } else {
      description = 'Go to game start';
    }
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <ol>{moves}</ol>
      </div>
    </div>
  );
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
  -->

  <Game><DefaultContent><![CDATA[
var me, beh = {
postConfigure: function() {
  me = this.cnode;
  $wnd.console.log(me.name());

const useState = (defaultValue) => {
  let value = defaultValue;
  const getValue = () => value
  const setValue = newValue => value = newValue
  return [getValue, setValue]
}

function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const xIsNext = currentMove() % 2 === 0;
  const currentSquares = history()[currentMove()];
  console.log(history());
  console.log(currentMove());
  console.log(xIsNext);
  console.log(currentSquares);

  function handlePlay(nextSquares) {
    const nextHistory = [...history().slice(0, currentMove() + 1), nextSquares];
    setHistory(nextHistory);
    setCurrentMove(nextHistory.length - 1);
  }

  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
  }

  const moves = history().map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;
    } else {
      description = 'Go to game start';
    }
    return (
      `<li key="${move}">
        <button onClick="{() => jumpTo(move)}">${description}</button>
      </li>`
    );
  });
  console.log(moves);

  return (
    `<div className="game">
      <div className="game-board">
        <Board xIsNext="${xIsNext}" squares="${currentSquares}" onPlay="${handlePlay}" />
      </div>
      <div className="game-info">
        <ol>${moves}</ol>
      </div>
    </div>`
  );
} // end function Game()

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

var game = Game();
console.log(game);
me.append(game);

} // end postConfigure
}
//# sourceURL=GameTest.js
]]></DefaultContent></Game>

  <TestUseState><DefaultContent><![CDATA[
((initValues) => {
  const useState = (defaultValue) => {
    let value = defaultValue;
    const getValue = () => value
    const setValue = newValue => value = newValue
    return [getValue, setValue]
  }

  const test1 = (initValue) => {
    const [count, setCount] = useState(initValue);

    console.log(count());
    setCount(count() + 1);
    console.log(count());
    setCount(count() + 1);
    console.log(count());
    setCount(count() + 1);
    console.log(count());
  }

  const test2 = (initValue) => {
    const [history, setHistory] = useState(initValue);
    const [currentMove, setCurrentMove] = useState(0);
    console.log(history()[currentMove()]);
    console.log(history()[currentMove()][0]);
  }

  test1(initValues[0]);
  test1(initValues[1]);
  test2(initValues[2]);

})([13, "21", [Array(9).fill(null)]])

// works for integers (addition)
// and works for strings (concatenation)
// and works for history array
//# sourceURL=TestUseState.js
]]></DefaultContent></TestUseState>

  <HtmlExporter><DefaultContent><![CDATA[
(() => {
const board = this.xpath("../Board");

// write Board subtree as an HTML string
const asHtmlStr = (node, indent) => {
  let str = "";
  const nodename = node.xhc().name();
  if (node.first()) {
    str += `${indent}<${nodename}>\n`;
    str += asHtmlStr(node.first(), indent + "  ");
    str += `${indent}</${nodename}>\n`;
  }
  else {
    if (nodename === "button") {
      str += `${indent}<${nodename} className="square" onClick="${node.onClick};">${node.text()}</${nodename}>\n`;
    }
    else {
      str += `${indent}<${nodename}/>\n`;
    }
  }
  if (node.next()) {
    str += asHtmlStr(node.next(), indent);
  }
  return str;
}

const str = asHtmlStr(board, "");

// insert in the HTML page
const xhappspecific = $doc.querySelector("#xhappspecific");
xhappspecific.innerHTML = str;

})()
//# sourceURL=HtmlExporter.js
]]></DefaultContent></HtmlExporter>
</xholonClassDetails>

<PhysicalSystem>

  <!-- see Xml2Xholon - DefaultContent only works if I include RoomModel somewhere before I need to use DefaultContent -->
  <RoomModel/>

  <!-- put this node first, because a sequence of Script nodes is configured in reverse order -->
  <HtmlExporter/>

  <!-- simple test of a single Square -->
  <!--<Square/>-->

  <Board/>

  <!--<TestUseState/>-->

  <!--<Game/> this works, but HTML does not yet display -->

</PhysicalSystem>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Board</title>
    <rect id="PhysicalSystem/Board" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Square</title>
      <rect id="PhysicalSystem/Square" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>
	/**
	ChatGPT dialog
	User
	Another correction. I want to use recast, acorn, and acorn-jsx, to transform something like <Thumbnail video={video} /> into something like <Thumbnail video="${video}" />. Provide Javascript code.

	ChatGPT
	To transform JSX using Recast, Acorn, and Acorn-JSX into the desired format ("<Thumbnail video="${video}" />"), you can follow these steps:
	Install the necessary dependencies: npm install recast acorn acorn-jsx
	Create a JavaScript file (e.g., jsx-transform.js) with the following code:
	*/

	/*
	Ken Webb
	22 Sept 2023
	~/nodespace/jsx2xh/chatgptex03/index3.js
	- it works!
	- I have changed most of the code and added to it. ChatGPT helped me to get started.

	TODO
	- convert <> ... </> to Xholon <_-.frag> ,,, </_-.frag>
	- embed each XML string within a pair of back ticks ex: `<div>...</div>`
	*/

	const recast = require('recast');
	const acorn = require('acorn');
	const jsxParser = require('acorn-jsx');

	// Your JSX code
	const code1 = '<Thumbnail video={video} />'; // OK
	const code2 = `function Video({video}) {return (<><div><Thumbnail video={video} /><a href={video.url}><h3>{video.title}</h3><p>{video.description}</p></a><LikeButton video={video} /></div></>);}`; // OK from ksw12.js
	const code3 = `function Video({video}) {return (<div><Thumbnail video={video} /><a href={video.url}><h3>{video.title}</h3><p>{video.description}</p></a><LikeButton video={video} /></div>);}`; // OK

	// https://react.dev/learn#writing-markup-with-jsx
	// React components are JavaScript functions that return markup:
	const code4 = `function MyButton() {
	return (
	<button>I'm a button</button>
	);
	}`;

	// Now that you’ve declared MyButton, you can nest it into another component:
	const code5 = `export default function MyApp() {
	return (
	<div>
	<h1>Welcome to my app</h1>
	<MyButton />
	</div>
	);
	}`;

	// Notice that <MyButton /> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
	// Have a look at the result:
	const code6 = `function MyButton() {
	return (
	<button>
	I'm a button
	</button>
	);
	}

	export default function MyApp() {
	return (
	<div>
	<h1>Welcome to my app</h1>
	<MyButton />
	</div>
	);
	}
	`;

	//
	const code7 = `function AboutPage() {
	return (
	<>
	<h1>About</h1>
	<p>Hello there.<br />How do you do?</p>
	</>
	);
	}`;

	// You can put more complex expressions inside the JSX curly braces too, for example, string concatenation:
	// TODO KSW this example has a few difficulties
	const code8 = `const user = {
	name: 'Hedy Lamarr',
	imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
	imageSize: 90,
	};

	export default function Profile() {
	return (
	<>
	<h1>{user.name}</h1>
	<img
	className="avatar"
	src={user.imageUrl}
	alt={'Photo of ' + user.name}
	style={{
	width: user.imageSize,
	height: user.imageSize
	}}
	/>
	</>
	);
	}`;

	// In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code. For example, you can use an if statement to conditionally include JSX:
	const code9 = `let content;
	if (isLoggedIn) {
	content = <AdminPanel />;
	} else {
	content = <LoginForm />;
	}
	return (
	<div>
	{content}
	</div>
	);`;
	// SyntaxError: 'return' outside of function (7:0)

	// see: reactjs02.js for a manual Xholonic version
	const code9b = `function MyButton() {
	let content;
	if (isLoggedIn) {
	content = <AdminPanel />;
	} else {
	content = <LoginForm />;
	}
	return (
	<div>
	{content}
	</div>
	)};`;
	// TypeError: Cannot read property 'name' of undefined

	const jsxCode = code3;
	console.log(jsxCode + "\n");

	// Parse the JSX code with Acorn and Acorn-JSX
	const ast = acorn.Parser.extend(jsxParser()).parse(jsxCode, {
	sourceType: 'module',
	ecmaVersion: 2020,
	plugins: {
	jsx: true,
	},
	});

	// Transform JSX attributes
	const transformedAst = transformJSXAttributes(ast, "");

	// Generate the transformed code using Recast
	const transformedCode = recast.print(transformedAst).code;
	console.log("\n" + transformedCode); // result: <Thumbnail video="\"${video}\"" />;

	// this function uses recursive descent
	function transformJSXAttributes(node, indent) {
	const val = node.value ? node.value.toString() : node.value
	console.log(indent, node.type, node.name, val);
	if (node.type === 'JSXFragment') {
	//console.log(node);
	// TODO convert <> ... </> to Xholon <_-.frag> ,,, </_-.frag>
	//node.type = 'JSXElement';
	//node.name = '_-.frag'; // TODO do this in the correct way
	//console.log(node);
	}
	else if (node.type === 'JSXElement') {
	//console.log(node.children);
	for (const attr of node.openingElement.attributes) {
	if (attr.type === 'JSXAttribute') {
	const { name, value } = attr;
	//if (name.type === 'JSXIdentifier' && name.name === 'video' && value) { // from chatGPT
	if (name.type === 'JSXIdentifier' && value) {
	if (value.type === 'JSXExpressionContainer') {
	// Transform JSXExpressionContainer into a string with ${}
	value.type = 'Literal';
	//value.value = `"${'${' + recast.print(value.expression).code + '}"'}`; // from chatGPT NO
	value.value = '${' + recast.print(value.expression).code + '}'; // YES
	}
	}
	}
	}
	const childarr = node.children;
	if (childarr) {
	//console.log(childarr.length);
	for (const child of childarr) {
	//console.log(child.type);
	if (child.type === 'JSXExpressionContainer') {
	child.type = 'Literal';
	child.value = '${' + child.expression.object.name + '.' + child.expression.property.name + '}';
	}
	}
	}
	}
	else if (node.type === 'FunctionDeclaration') {
	//console.log(indent + "@@@@@FunctionDeclaration");
	}

	for (const key in node) {
	if (node[key] && typeof node[key] === 'object') {
	transformJSXAttributes(node[key], indent + " ");
	}
	else if (node[key] && typeof node[key] === 'string') {
	//console.log(node[key]);
	}
	}

	return node;
	}

	/**
	This code:
	Parses the JSX code using Acorn with the Acorn-JSX plugin.
	Transforms the JSX attributes as per your requirement (converting {video} to "${video}").
	Generates the transformed code using Recast.
	Replace the jsxCode variable with your actual JSX code, and when you run this script,
	it will print the transformed JSX code to the console.
	Make sure to adjust the code as needed for your specific use case,
	including loading and saving JSX code from/to files if necessary.
	*/
	/**
	Explore similarities between Xholon and ReactJS.
	Ken Webb
	13 Sept 2023
	reactjs01.js

	TODO use babel to transform reactjs to Xholon ?
	- Xholon workbook: Transform ReactJS to Xholon
	*/

	// https://react.dev/
	/*
	function Video({ video }) {
	return (
	<div>
	<Thumbnail video={video} />
	<a href={video.url}>
	<h3>{video.title}</h3>
	<p>{video.description}</p>
	</a>
	<LikeButton video={video} />
	</div>
	);
	}
	*/

	// a Xholonic version
	((video) => {

	const Video = (video) => {
	return (
	`<div>
	<Thumbnail video="${video}" />
	<a href="${video.url}">
	<h3>${video.title}</h3>
	<p>${video.description}</p>
	</a>
	<LikeButton video="${video}" />
	</div>`
	);
	}

	const xmlstr = Video(video);
	xh.root().append(xmlstr);
	return xmlstr;
	})({
	url: "https://www.primordion.com/choco",
	title: "Choco Loco",
	description: "Choco goes crazy."
	})

	/* result
	'<div>
	<Thumbnail video="[object Object]" />
	<a href="https://www.primordion.com/choco">
	<h3>Choco Loco</h3>
	<p>Choco goes crazy.</p>
	</a>
	<LikeButton video="[object Object]" />
	</div>'
	*/

	// this also works, 22 Sept 2023
	// a Xholonic version
	((video) => {

	const Video = (video) => `<div><Thumbnail video="${video}" /><a href="${video.url}"><h3>${video.title}</h3><p>${video.description}</p></a><LikeButton video="${video}" /></div>`

	const xmlstr = Video(video);
	xh.root().append(xmlstr);
	return xmlstr;
	})({
	url: "https://www.primordion.com/choco",
	title: "Choco Loco",
	description: "Choco goes crazy."
	})
	<?xml version="1.0" encoding="UTF-8"?>
	<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Wed Sep 27 2023 11:53:30 GMT-0400 (Eastern Daylight Saving Time)-->
	<XholonWorkbook>

	<Notes><![CDATA[
	Xholon
	------
	Title: Transform ReactJS to Xholon
	Description:
	Url: http://www.primordion.com/Xholon/gwt/
	InternalName: 62ee0cfeb3584c95dae72d4960fcb7e0
	Keywords:

	My Notes
	--------
	13 Sept 2023

	In this workbook I explore how to transform ReactJS JSX to Xholon format.

	See my examples in: ~/nodespace/jsx2xh
	chatgptex01
	chatgptex02
	recast01

	### Export result as XML
	- I used Export > Xml on board node
	Xml
	board
	{"xhAttrStyle":1,"nameTemplate":"^^C^^^","xhAttrReturnAll":false,"writeStartDocument":false,"writeXholonId":false,"writeXholonRoleName":false,"writePorts":false,"writeAnnotations":false,"shouldPrettyPrint":true,"writeAttributes":false,"writeStandardAttributes":false,"shouldWriteVal":false,"shouldWriteAllPorts":false,"shouldWriteLinks":false,"showComments":false}

	If I paste the resulting XML into the Xholon GUI HTML element <div id="xhappspecific"></div>
	- it shows the 3 x 3 grid

	### Event Handler
	button is written to console as:
	<button className="square" onClick="console.log('clicked ' + this.textContent)">
	1
	</button>

	If I paste this into the HTML in the browser, and click on that button, then "clicked N" is written to the Dev Tools console.

	### Edit HTML
	- paste or edit the following to appspecific element
	<Board>
	<div>Winner: Human</div>
	<div>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">1</button>
	</Square>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">2</button>
	</Square>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">3</button>
	</Square>
	</div>
	<div>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">4</button>
	</Square>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">5</button>
	</Square>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">6</button>
	</Square>
	</div>
	<div>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">7</button>
	</Square>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">8</button>
	</Square>
	<Square>
	<button className="square" onClick="console.log('clicked ' + this.textContent)">9</button>
	</Square>
	</div>
	</Board>

	### TODO
	27 Sept 2023
	- the existing HtmlExporter is designed for Board
	- write a new HtmlExporter to handle Game
	- work on Game and Board to get the final app working
	- at this point, everything compiles and basically runs

	### References
	(1) https://react.dev/
	I am using the initial simple example as a first test.
	see: ~/gwtspace/Xholon/Xholon/script/javascript/reactjs01.js

	(2) https://babeljs.io/
	I will follow the general instructions here.

	(3) ChatGPT
	see: ~/A001_OpenAI/chatGPT48_babel.txt

	(4) https://babeljs.io/videos/
	- maybe I should see some of these? But they are oldish.

	(5) https://astexplorer.net/
	- has a good default example that reverses the names of Identifiers, using the followng visitor

	export default function (babel) {
	const { types: t } = babel;

	return {
	name: "ast-transform", // not required
	visitor: {
	Identifier(path) {
	path.node.name = path.node.name.split('').reverse().join('');
	}
	}
	};
	}

	(5b) https://github.com/fkling/astexplorer/blob/master/README.md
	AST explorer
	Paste or drop code into the editor and inspect the generated AST on https://astexplorer.net/
	The AST explorer provides following code parsers:
	...

	(6) https://www.youtube.com/watch?v=VBscbcm2Mok&t=1253s
	Writing custom Babel and ESLint plugins with ASTs (Open West 2017), Kent C. Dodds

	(7) https://github.com/babel/babel
	The compiler for writing next generation JavaScript.
	Babel (pronounced "babble") is a community-driven project used by many companies and projects,
	and is maintained by a group of volunteers.

	(8) https://babel.dev/docs/babel-plugin-transform-react-jsx
	This plugin is included in @babel/preset-react
	- the page includes a bunch of examples

	(9) https://github.com/jamiebuilds/babel-handbook/tree/master
	Babel Handbook, Written by Jamie Kyle
	A guided handbook on how to use Babel and how to create plugins for Babel.
	) https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/user-handbook.md
	This document covers everything you ever wanted to know about using Babel and related tooling.

	(10) https://babeljs.io/docs/babel-traverse
	We can use it alongside the babel parser to traverse and update nodes:

	(11) https://dev.to/pulkitnagpal/transpile-jsx-using-your-own-custom-built-babel-plugin-4888
	pulkitnagpal, Posted on Aug 16, 2020
	Transpile JSX using your own custom built babel plugin
	Ever wondered how does react jsx code (<div>Hello World</div>) gets compiled to React.createElement("div", null, "Hello World").
	This blog is all about this compilation process by taking help from the source code of babel-preset-react and trying to build our own custom plugin.

	(12) https://www.digitalocean.com/community/tutorials/js-traversing-ast
	// Tutorial //, Read JavaScript Source Code, Using an AST, Published on February 8, 2019, Bart Ledoux
	The following example is small.
	Our mission, should you choose to accept it, will be to extract the names of all the functions exposed in the global scope.
	- has a list of parsers
	- the example is fairly detailed

	(13) https://github.com/acornjs/acorn-jsx
	) https://github.com/acornjs/acorn-jsx/blob/main/test/tests-jsx.js

	(14) https://legacy.reactjs.org/docs/jsx-in-depth.html
	Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code:

	<MyButton color="blue" shadowSize={2}>
	Click Me
	</MyButton>

	compiles into:

	React.createElement(
	MyButton,
	{color: 'blue', shadowSize: 2},
	'Click Me'
	)
	) https://react.dev/learn#writing-markup-with-jsx

	(15) https://transform.tools/html-to-jsx
	- convert from HTML to JSX
	- this site has many similar transformers

	(16) https://github.com/acornjs/acorn
	A tiny, fast JavaScript parser, written completely in JavaScript.
	This repository holds three packages:
	acorn: The main parser
	acorn-loose: The error-tolerant parser
	acorn-walk: The syntax tree walker

	(17a) https://github.com/acornjs/acorn/tree/master/acorn/
	(17b) https://github.com/acornjs/acorn/tree/master/acorn-loose/
	(17c) https://github.com/acornjs/acorn/tree/master/acorn-walk/

	(18) https://github.com/estree/estree
	) https://github.com/estree/estree/blob/master/es5.md
	The ESTree Spec

	Once upon a time, an unsuspecting Mozilla engineer created an API in Firefox that exposed the SpiderMonkey engine's JavaScript parser as a JavaScript API.
	Said engineer documented the format it produced, and this format caught on as a lingua franca for tools that manipulate JavaScript source code.

	Meanwhile JavaScript is evolving.
	This site will serve as a community standard for people involved in building and using these tools to help evolve this format
	to keep up with the evolution of the JavaScript language.

	(19) https://github.com/estree/formal
	ESTree machine-readable data (+generator)

	(20) https://github.com/benjamn/recast
	JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator
	Recast exposes two essential interfaces, one for parsing JavaScript code (require("recast").parse)
	and the other for reprinting modified syntax trees (require("recast").print).
	- used in ref [12]

	(21) https://esprima.org/
	Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript).
	Features
	- Full support for ECMAScript 2019 (ECMA-262 10th Edition)
	- Sensible syntax tree format, with optional node location info
	- Experimental support for JSX, a syntax extension for React
	- Heavily tested (~1600 tests with full code coverage)
	) https://www.npmjs.com/package/esprima

	(22) https://www.npmjs.com/search?q=keywords:ast
	- lots of interesting projects

	(23) https://react.dev/learn/tutorial-tic-tac-toe
	Create a Xholonic version of this React tutorial.
	- use DefaultContent
	- perhaps use the GUI I created for my MeTTTa Xholon app.

	(24) ~/gwtspace/Xholon/Xholon/script/javascript/reactjsUseState01.js
	- how to implement react useState in vanilla javascript
	(24b) https://stackoverflow.com/questions/64744252/how-to-replicate-usestate-with-vanilla-js
	- I will implement some of what I found here
	- note that "count" in the example is a function rather than a constant value
	(24c) https://codesandbox.io/s/usestate-implementation-in-vanilla-js-ff4rx
	- good example that runs in browser

	]]></Notes>

	<_-.XholonClass>
	<PhysicalSystem/>

	<Square superClass="Script"/>
	<Board superClass="Script"/>
	<Game superClass="Script"/>

	<TestUseState superClass="Script"/>

	<HtmlExporter superClass="Script"/>

	</_-.XholonClass>

	<xholonClassDetails>

	<!-- from ref[23]:
	function Square({ value, onSquareClick }) {
	return (
	<button className="square" onClick={onSquareClick}>
	{value}
	</button>
	);
	}
	-->
	<Square><DefaultContent><![CDATA[
	var me, beh = {
	postConfigure: function() {
	me = this.cnode;
	//$wnd.console.log(me.name());

	function Square({ value, onSquareClick }) {
	return (
	`<button className="square" onClick="${onSquareClick}">
	${value}
	</button>`
	);
	}

	var sq = Square({value: me.value, onSquareClick: "console.log('clicked ' + this.textContent); this.textContent = 'X';"});
	//$wnd.console.log(sq);
	me.append(sq);
	}
	}
	//# sourceURL=SquareTest.js
	]]></DefaultContent></Square>

	<!-- from ref[23]:
	function Board({ xIsNext, squares, onPlay }) {
	function handleClick(i) {
	if (calculateWinner(squares) \|\| squares[i]) {
	return;
	}
	const nextSquares = squares.slice();
	if (xIsNext) {
	nextSquares[i] = 'X';
	} else {
	nextSquares[i] = 'O';
	}
	onPlay(nextSquares);
	}

	const winner = calculateWinner(squares);
	let status;
	if (winner) {
	status = 'Winner: ' + winner;
	} else {
	status = 'Next player: ' + (xIsNext ? 'X' : 'O');
	}

	return (
	<>
	<div className="status">{status}</div>
	<div className="board-row">
	<Square value={squares[0]} onSquareClick={() => handleClick(0)} />
	<Square value={squares[1]} onSquareClick={() => handleClick(1)} />
	<Square value={squares[2]} onSquareClick={() => handleClick(2)} />
	</div>
	<div className="board-row">
	<Square value={squares[3]} onSquareClick={() => handleClick(3)} />
	<Square value={squares[4]} onSquareClick={() => handleClick(4)} />
	<Square value={squares[5]} onSquareClick={() => handleClick(5)} />
	</div>
	<div className="board-row">
	<Square value={squares[6]} onSquareClick={() => handleClick(6)} />
	<Square value={squares[7]} onSquareClick={() => handleClick(7)} />
	<Square value={squares[8]} onSquareClick={() => handleClick(8)} />
	</div>
	</>
	);
	}
	-->
	<Board><DefaultContent><![CDATA[
	var me, beh = {
	postConfigure: function() {
	me = this.cnode;

	function calculateWinner(squares) {
	return "Human";
	}

	function Board({ xIsNext, squares, onPlay }) {
	function handleClick(i) {
	if (calculateWinner(squares) \|\| squares[i]) {
	return;
	}
	const nextSquares = squares.slice();
	if (xIsNext) {
	nextSquares[i] = 'X';
	} else {
	nextSquares[i] = 'O';
	}
	onPlay(nextSquares);
	}

	const winner = calculateWinner(squares);
	let status;
	if (winner) {
	status = 'Winner: ' + winner;
	} else {
	status = 'Next player: ' + (xIsNext ? 'X' : 'O');
	}

	return (
	`<_-.board>
	<div className="status">${status}</div>
	<div className="board-row">
	<Square value="${squares[0]}" onSquareClick="${() => handleClick(0)}" />
	<Square value="${squares[1]}" onSquareClick="${() => handleClick(1)}" />
	<Square value="${squares[2]}" onSquareClick="${() => handleClick(2)}" />
	</div>
	<div className="board-row">
	<Square value="${squares[3]}" onSquareClick="${() => handleClick(3)}" />
	<Square value="${squares[4]}" onSquareClick="${() => handleClick(4)}" />
	<Square value="${squares[5]}" onSquareClick="${() => handleClick(5)}" />
	</div>
	<div className="board-row">
	<Square value="${squares[6]}" onSquareClick="${() => handleClick(6)}" />
	<Square value="${squares[7]}" onSquareClick="${() => handleClick(7)}" />
	<Square value="${squares[8]}" onSquareClick="${() => handleClick(8)}" />
	</div>
	</_-.board>`
	);
	}

	var brd = Board({xIsNext: true, squares: [1,2,3,4,5,6,7,8,9], onPlay: "play"});
	//$wnd.console.log(brd);
	me.append(brd);

	// the following writes the resulting XML to a Xholon GUI tab:
	//$wnd.xh.xport("Xml", me, '{"xhAttrStyle":1,"nameTemplate":"^^C^^^","xhAttrReturnAll":false,"writeStartDocument":false,"writeXholonId":false,"writeXholonRoleName":false,"writePorts":false,"writeAnnotations":false,"shouldPrettyPrint":true,"writeAttributes":false,"writeStandardAttributes":false,"shouldWriteVal":false,"shouldWriteAllPorts":false,"shouldWriteLinks":false,"showComments":false}');
	}
	}
	//# sourceURL=BoardTest.js
	]]></DefaultContent></Board>

	<!-- from ref[23]:
	export default function Game() {
	const [history, setHistory] = useState([Array(9).fill(null)]);
	const [currentMove, setCurrentMove] = useState(0);
	const xIsNext = currentMove % 2 === 0;
	const currentSquares = history[currentMove];

	function handlePlay(nextSquares) {
	const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
	setHistory(nextHistory);
	setCurrentMove(nextHistory.length - 1);
	}

	function jumpTo(nextMove) {
	setCurrentMove(nextMove);
	}

	const moves = history.map((squares, move) => {
	let description;
	if (move > 0) {
	description = 'Go to move #' + move;
	} else {
	description = 'Go to game start';
	}
	return (
	<li key={move}>
	<button onClick={() => jumpTo(move)}>{description}</button>
	</li>
	);
	});

	return (
	<div className="game">
	<div className="game-board">
	<Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
	</div>
	<div className="game-info">
	<ol>{moves}</ol>
	</div>
	</div>
	);
	}

	function calculateWinner(squares) {
	const lines = [
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8],
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8],
	[0, 4, 8],
	[2, 4, 6],
	];
	for (let i = 0; i < lines.length; i++) {
	const [a, b, c] = lines[i];
	if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
	return squares[a];
	}
	}
	return null;
	}
	-->

	<Game><DefaultContent><![CDATA[
	var me, beh = {
	postConfigure: function() {
	me = this.cnode;
	$wnd.console.log(me.name());

	const useState = (defaultValue) => {
	let value = defaultValue;
	const getValue = () => value
	const setValue = newValue => value = newValue
	return [getValue, setValue]
	}

	function Game() {
	const [history, setHistory] = useState([Array(9).fill(null)]);
	const [currentMove, setCurrentMove] = useState(0);
	const xIsNext = currentMove() % 2 === 0;
	const currentSquares = history()[currentMove()];
	console.log(history());
	console.log(currentMove());
	console.log(xIsNext);
	console.log(currentSquares);

	function handlePlay(nextSquares) {
	const nextHistory = [...history().slice(0, currentMove() + 1), nextSquares];
	setHistory(nextHistory);
	setCurrentMove(nextHistory.length - 1);
	}

	function jumpTo(nextMove) {
	setCurrentMove(nextMove);
	}

	const moves = history().map((squares, move) => {
	let description;
	if (move > 0) {
	description = 'Go to move #' + move;
	} else {
	description = 'Go to game start';
	}
	return (
	`<li key="${move}">
	<button onClick="{() => jumpTo(move)}">${description}</button>
	</li>`
	);
	});
	console.log(moves);

	return (
	`<div className="game">
	<div className="game-board">
	<Board xIsNext="${xIsNext}" squares="${currentSquares}" onPlay="${handlePlay}" />
	</div>
	<div className="game-info">
	<ol>${moves}</ol>
	</div>
	</div>`
	);
	} // end function Game()

	function calculateWinner(squares) {
	const lines = [
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8],
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8],
	[0, 4, 8],
	[2, 4, 6],
	];
	for (let i = 0; i < lines.length; i++) {
	const [a, b, c] = lines[i];
	if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
	return squares[a];
	}
	}
	return null;
	}

	var game = Game();
	console.log(game);
	me.append(game);

	} // end postConfigure
	}
	//# sourceURL=GameTest.js
	]]></DefaultContent></Game>

	<TestUseState><DefaultContent><![CDATA[
	((initValues) => {
	const useState = (defaultValue) => {
	let value = defaultValue;
	const getValue = () => value
	const setValue = newValue => value = newValue
	return [getValue, setValue]
	}

	const test1 = (initValue) => {
	const [count, setCount] = useState(initValue);

	console.log(count());
	setCount(count() + 1);
	console.log(count());
	setCount(count() + 1);
	console.log(count());
	setCount(count() + 1);
	console.log(count());
	}

	const test2 = (initValue) => {
	const [history, setHistory] = useState(initValue);
	const [currentMove, setCurrentMove] = useState(0);
	console.log(history()[currentMove()]);
	console.log(history()[currentMove()][0]);
	}

	test1(initValues[0]);
	test1(initValues[1]);
	test2(initValues[2]);

	})([13, "21", [Array(9).fill(null)]])

	// works for integers (addition)
	// and works for strings (concatenation)
	// and works for history array
	//# sourceURL=TestUseState.js
	]]></DefaultContent></TestUseState>

	<HtmlExporter><DefaultContent><![CDATA[
	(() => {
	const board = this.xpath("../Board");

	// write Board subtree as an HTML string
	const asHtmlStr = (node, indent) => {
	let str = "";
	const nodename = node.xhc().name();
	if (node.first()) {
	str += `${indent}<${nodename}>\n`;
	str += asHtmlStr(node.first(), indent + " ");
	str += `${indent}</${nodename}>\n`;
	}
	else {
	if (nodename === "button") {
	str += `${indent}<${nodename} className="square" onClick="${node.onClick};">${node.text()}</${nodename}>\n`;
	}
	else {
	str += `${indent}<${nodename}/>\n`;
	}
	}
	if (node.next()) {
	str += asHtmlStr(node.next(), indent);
	}
	return str;
	}

	const str = asHtmlStr(board, "");

	// insert in the HTML page
	const xhappspecific = $doc.querySelector("#xhappspecific");
	xhappspecific.innerHTML = str;

	})()
	//# sourceURL=HtmlExporter.js
	]]></DefaultContent></HtmlExporter>
	</xholonClassDetails>

	<PhysicalSystem>

	<!-- see Xml2Xholon - DefaultContent only works if I include RoomModel somewhere before I need to use DefaultContent -->
	<RoomModel/>

	<!-- put this node first, because a sequence of Script nodes is configured in reverse order -->
	<HtmlExporter/>

	<!-- simple test of a single Square -->
	<!--<Square/>-->

	<Board/>

	<!--<TestUseState/>-->

	<!--<Game/> this works, but HTML does not yet display -->

	</PhysicalSystem>

	<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
	<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
	<g>
	<title>Board</title>
	<rect id="PhysicalSystem/Board" fill="#98FB98" height="50" width="50" x="25" y="0"/>
	<g>
	<title>Square</title>
	<rect id="PhysicalSystem/Square" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
	</g>
	</g>
	</svg>
	]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

	</XholonWorkbook>