TypeScript mithril.prop函數代碼示例

/**
 * Stores TreeNode MetaData which can be visualized in various ways, like for example a check mark and an 'X' representing boolean values.
 *
 * @private
 * @param {IMetaData} [metaData={}]
 * @returns {INodeMetaData}
 */
function createNodeMetaData(metaData: INodeMetaDataOptions = {}): INodeMetaData {
  return {
    id: m.prop(metaData.id || ''),
    type: m.prop(metaData.type || MetaDataTypes.STATUS),
    value: m.prop(metaData.value),
    tooltip: m.prop(metaData.tooltip || '')
  }
}

/**
 * Transforms an array of objects and all its children recursively into NodeData objects.
 *
 * @private
 * @param {ITreeDataGlobalOptions} globalConfig All given properties will be copied recursively into every newly created tree node.
 * @param {Array<INodeDataOptionsObject>} nodeList An array of option objects to bootstrap new tree nodes.
 * @param {INodeData} [parent] The parent NodeData object or undefined if it's a root node.
 * @param {number} [index] A tree node's index (number) inside of its parent's children array property.
 * @returns {Array<INodeData>}
 */
function createChildNodes(globalConfig: ITreeDataGlobalOptions, nodeList: Array<INodeDataOptionsObject>, parent?: INodeData, index?: number) {
  let childNodes = []

  if (nodeList && nodeList.length > 0) {
    for (let i = 0, iMax = nodeList.length; i < iMax; i++) {
      let nodeData = nodeList[i]
      nodeData.root = globalConfig.root // global TreeData object
      nodeData.state = globalConfig.state || {} // fetch the global state from the context
      nodeData.events = globalConfig.events || {} // fetch the global event handlers from the context

      let childNode: INodeData = createNodeData(nodeData)
      childNode.index(index || 0) // remember the index
      if (parent) {
        // memorize the node's parent
        childNode.parent(parent)
      }
      if (nodeData.children && nodeData.children.length > 0) {
        // Recursively wade through the dataset and convert all Children to NodeData objects.
        // But first inject the globalConfig object into the context of the createChildNodes function.
        childNode.children = m.prop(createChildNodes(globalConfig, nodeData.children, childNode, (i + 1)))
      }
      // wrap the NodeData objects into getters and setters through m.prop()
      childNodes.push(childNode)
    }
  }
  return childNodes
}

    const controller = function() {
        let messages = m.prop([]);
        let text = m.prop("");

        const pushMessage = function(msg: String) {
            messages().push(msg) // 破壊的変更死ね
            m.redraw.strategy("all")
        }

        const conn = new WebSocket('ws://localhost:9080/room/any?name=someone');

        conn.onopen = function(e) {
            console.log("socket open!");
        }

        conn.onerror = function(e) {
            console.log(e);
            // 何か再接続の処理とか取れば良いのかな
        }
        
        conn.onmessage = function(e) {
            console.log("receive message: " + e.data);
            pushMessage(e.data);
        };

        return {
            messages: messages,
            text: text,

            sendMessage: function() {
                let t = text();
                text("");

                console.log("message " + t + " is sent!")
                conn.send(t);
                pushMessage(t);
            }
        };
    }

 constructor(id: number = 0) {
     this.id = m.prop(id);
 }

export default function homeCtrl(vnode: Mithril.Vnode<{}>): void {

  const nbConnectedPlayers = m.prop<number>();
  const nbGamesInPlay = m.prop<number>();
  const dailyPuzzle = m.prop<any>();
  const weekTopPlayers = m.prop<Array<any>>([]);
  const timeline = m.prop<Array<any>>([]);

  function init() {
    if (isForeground()) {
      lobbyXhr(true).then(data => {
        socket.createLobby(data.lobby.version, noop, {
          n: (_: any, d: PongMessage) => {
            nbConnectedPlayers(d.d);
            nbGamesInPlay(d.r);
            redraw();
          }
        });
      });

      Promise.all([
        dailyPuzzleXhr(),
        topPlayersOfTheWeekXhr()
      ])
      .then(results => {
        const [dailyData, topPlayersData] = results;
        dailyPuzzle(dailyData.puzzle);
        weekTopPlayers(topPlayersData);
      })
      .catch(console.error.bind(console));

      timelineXhr()
      .then(data => {
        timeline(
          data.entries
          .filter((o: TimelineEntry) => supportedTimelineTypes.indexOf(o.type) !== -1)
          .slice(0, 10)
        );
      })
      .catch(console.error.bind(console));
    }
  }

  function onResume() {
    setForeground();
    init();
  }

  if (hasNetwork()) {
    init();
  }

  document.addEventListener('online', init);
  document.addEventListener('resume', onResume);

  vnode.state = {
    nbConnectedPlayers,
    nbGamesInPlay,
    dailyPuzzle,
    timeline,
    weekTopPlayers,
    init,
    onResume
  };
}

export default function(root: AnalyseCtrlInterface, allow: boolean): ExplorerCtrlInterface {

  const allowed = m.prop(allow);
  const enabled = m.prop(false);
  const loading = m.prop(true);
  const failing = m.prop(false);
  const current: Mithril.Property<ExplorerData> = m.prop({
    moves: []
  });

  function open() {
    backbutton.stack.push(close);
    helper.analyticsTrackView('Analysis Explorer');
    enabled(true);
  }

  function close(fromBB?: string) {
    if (fromBB !== 'backbutton' && enabled()) backbutton.stack.pop();
    enabled(false);
    setTimeout(() => root && root.debouncedScroll(), 200);
  }

  let cache: {[index: string]: ExplorerData} = {};

  function setResult(fen: string, data: ExplorerData) {
    cache[fen] = data;
    current(data);
  }

  function onConfigClose(changed: boolean) {
    if (changed) {
      cache = {};
      setStep();
    }
  }

  const withGames = isSynthetic(root.data) || gameApi.replayable(root.data) || !!root.data.opponent.ai;
  const effectiveVariant: VariantKey = root.data.game.variant.key === 'fromPosition' ? 'standard' : root.data.game.variant.key;

  const config = explorerConfig.controller(root.data.game.variant, onConfigClose);
  const debouncedScroll = debounce(() => {
    const table = document.getElementById('explorerTable');
    if (table) table.scrollTop = 0;
  }, 200);

  function handleFetchError() {
    loading(false);
    failing(true);
    redraw();
  }

  const fetchOpening = debounce((fen: string) => {
    return openingXhr(effectiveVariant, fen, config.data, withGames)
    .then((res: ExplorerData) => {
      res.opening = true;
      res.fen = fen;
      setResult(fen, res);
      loading(false);
      failing(false);
      redraw();
    })
    .catch(handleFetchError);
  }, 1000);

  const fetchTablebase = debounce((fen: string) => {
    return tablebaseXhr(root.vm.step.fen)
    .then((res: ExplorerData) => {
      res.tablebase = true;
      res.fen = fen;
      setResult(fen, res);
      loading(false);
      failing(false);
      redraw();
    })
    .catch(handleFetchError);
  }, 500);

  function fetch(fen: string) {
    const hasTablebase = effectiveVariant === 'standard' || effectiveVariant === 'chess960';
    if (hasTablebase && withGames && tablebaseRelevant(fen)) return fetchTablebase(fen);
    else return fetchOpening(fen);
  }

  const empty: ExplorerData = {
    opening: true,
    moves: []
  };

  function setStep() {
    if (!enabled()) return;
    const step = root.vm.step;
    if (step.ply > 50 && !tablebaseRelevant(step.fen)) {
      setResult(step.fen, empty);
    }
    const fromCache = cache[step.fen];
    if (!fromCache) {
      loading(true);
      fetch(step.fen);
    } else {
      current(fromCache);
//.........這裏部分代碼省略.........

 constructor() {
     this.vm = new SampleModel();
     this.message = m.prop("");
 }

export function createNodeData(dataset: INodeDataOptionsObject): INodeData {
  if (!dataset) {
    throw new Error('[Initialization Error] Dataset is empty! Given dataset: ' + (dataset.toString() || 'undefined'))
  }

  /**
   * @private
   * @type {TreeData}
   */
  let root = dataset.root
  dataset.state = dataset.state || {} // ensure that state is defined
  /**
   * @private
   * @type {string}
   */
  let newId = (!dataset.id) ? createId(dataset.title) : dataset.id

  let nodeData: INodeData = {
    /**
     * Getter/setter for the parent node object or undefined if it is a root node.
     *
     * @function
     * @param {NodeData} [parent] Parent node.
     * @returns {NodeData} Parent node.
     */
    parent: m.prop(dataset.parent),
    /**
     * Getter/setter for the node's unique identifier.
     *
     * @function
     * @param {string} id The node's unique identifier.
     * @returns {string} The node's unique identifier.
     */
    id: m.prop(newId),
    /**
     * Getter/setter for the node's title.
     *
     * @function
     * @param {string} [title] The node's title.
     * @returns {string} The node's title.
     */
    title: ((initialValue) => {
      let cachedTitle = initialValue
      return (title) => {
        if (title) {
          m.startComputation()
          cachedTitle = title
          radio(PubSubTopics.TREE_STRUCTURE_CHANGED).broadcast()
          m.endComputation()
        }
        return cachedTitle
      }
    })(dataset.title || 'New Node'),
    /**
     * Getter/setter to indicate if this node cannont have child nodes.
     *
     * @function
     * @param {boolean} [isLeaf=false] Indicates if this node cannont have child nodes.
     * @returns {boolean} Indicates if this node cannont have child nodes.
     */
    isLeaf: m.prop(dataset.isLeaf || false),
    /**
     * Getter/setter for an array of the node's child nodes.
     *
     * @function
     * @param {Array<NodeData>} [children=[]] The node's child nodes
     * @returns {Array<NodeData>} The node's child nodes
     */
    children: m.prop(dataset.children || []),
    /**
     * Getter/setter for the node's index inside of its parent's array of child nodes ("children").
     *
     * @function
     * @param {number} [index=0] Index inside of parent node's children array.
     * @returns {number} Index inside of parent node's children array.
     */
    index: m.prop(dataset.index || 0),
    /**
     * Getter/setter for the node's expanded state.
     * This adds a CSS class to permanantly change the way the node (the whole row) looks. Collapsing a node will restore the old looks.
     *
     * @function
     * @param {boolean} [expanded=false] Indicates wether the node is in expanded state.
     * @returns {boolean} Indicates wether the node is in expanded state.
     */
    expanded: m.prop(dataset.state.expanded || false),
    /**
     * Getter/setter for the node's highlighted state.
     * This adds a CSS class to make the node very easy to spot.
     *
     * @function
     * @param {boolean} [highlighted=false] Indicates wether the node is in highlighted state.
     * @returns {boolean} Indicates wether the node is in highlighted state.
     */
    highlighted: m.prop(dataset.state.highlighted || false),
    /**
     * Getter/setter for the node's blurred state.
     * This adds a CSS class to make the node a bit more difficult to see.
     *
     * @function
//.........這裏部分代碼省略.........