How to use createAsyncPlaceholder method in Playwright Internal

1import {  isObject, isUndef, isTrue } from "../utils"
2import VNode from "./vnode";
3import { resolveAsyncComponent, createAsyncPlaceholder } from './helpers/index'
4import { createEmptyVNode } from './vnode'
5import { createElement } from './create-element'
6import { createFunctionalComponent } from "./create-functional-component";
7
8export function createComponent(context, tag, data, key, children, Ctor) {
9  // debugger
10  if (isUndef(Ctor)) {
11    return createElement(context, tag, data, children)
12  }
13
14  const baseCtor = context.$options._base
15  if (isObject(Ctor)) {
16    Ctor = baseCtor.exend(Ctor)
17  }
18
19  var asyncFactory
20  if (isUndef(Ctor.cid)) {
21
22    // console.log('Ctor.cid---', Ctor.toString())
23    // debugger
24    asyncFactory = Ctor
25    Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
26    // debugger
27    if (Ctor === undefined) {
28      return createAsyncPlaceholder(
29        asyncFactory,
30        data,
31        context,
32        children,
33        tag
34      )
35    }
36  }
37
38  if (isTrue(Ctor.options.functional)) {
39    // debugger
40    return createFunctionalComponent(Ctor, data, context, children)
41  }
42
43  // debugger
44  // data.hook = {
45  //   init(vnode) {
46  //     console.log('init----vnode---', vnode)
47  //     let child = vnode.componentInstance = new Ctor({_isComponent: true, parent: context, _parentVnode: vnode})
48
49  //     child.$mount()
50  //   }
51  // }
52  installComponentHooks(data)
53  console.log('createComponent---data---', data)
54
55  const vnode = new VNode(context, `vue-component-${tag}`, data, key, undefined, undefined, {Ctor, children})
56  return vnode
57}
58
59
60const componentVNodeHooks = {
61  init (vnode) {
62    if (vnode.componentInstance) {
63
64    } else {
65      const child = vnode.componentInstance = createComponentInstanceForVnode(vnode)
66      
67      child.$mount()
68    }
69  }
70}
71
72const hooksToMerge = Object.keys(componentVNodeHooks)
73
74function createComponentInstanceForVnode(vnode) {
75  const options = {
76    _isComponent: true,
77    _parentVnode: vnode,
78    parent: vnode.context
79  }
80
81  return new vnode.componentOptions.Ctor(options)
82}
83
84function installComponentHooks(data) {
85  const hooks = data.hook || (data.hook = {})
86  for (let i = 0; i < hooksToMerge.length; i++) {
87    const key = hooksToMerge[i]
88    const value = componentVNodeHooks[key]
89    hooks[key] = value
90  }
91}

Source: create-component.js

import {  isObject, isUndef, isTrue } from "../utils"
import VNode from "./vnode";
import { resolveAsyncComponent, createAsyncPlaceholder } from './helpers/index'
import { createEmptyVNode } from './vnode'
import { createElement } from './create-element'
import { createFunctionalComponent } from "./create-functional-component";

export function createComponent(context, tag, data, key, children, Ctor) {
  // debugger
  if (isUndef(Ctor)) {
    return createElement(context, tag, data, children)
  }

  const baseCtor = context.$options._base
  if (isObject(Ctor)) {
    Ctor = baseCtor.exend(Ctor)
  }

  var asyncFactory
  if (isUndef(Ctor.cid)) {

    // console.log('Ctor.cid---', Ctor.toString())
    // debugger
    asyncFactory = Ctor
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
    // debugger
    if (Ctor === undefined) {
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

  if (isTrue(Ctor.options.functional)) {
    // debugger
    return createFunctionalComponent(Ctor, data, context, children)
  }

  // debugger
  // data.hook = {
  //   init(vnode) {
  //     console.log('init----vnode---', vnode)
  //     let child = vnode.componentInstance = new Ctor({_isComponent: true, parent: context, _parentVnode: vnode})

  //     child.$mount()
  //   }
  // }
  installComponentHooks(data)
  console.log('createComponent---data---', data)

  const vnode = new VNode(context, `vue-component-${tag}`, data, key, undefined, undefined, {Ctor, children})
  return vnode
}


const componentVNodeHooks = {
  init (vnode) {
    if (vnode.componentInstance) {

    } else {
      const child = vnode.componentInstance = createComponentInstanceForVnode(vnode)
      
      child.$mount()
    }
  }
}

const hooksToMerge = Object.keys(componentVNodeHooks)

function createComponentInstanceForVnode(vnode) {
  const options = {
    _isComponent: true,
    _parentVnode: vnode,
    parent: vnode.context
  }

  return new vnode.componentOptions.Ctor(options)
}

function installComponentHooks(data) {
  const hooks = data.hook || (data.hook = {})
  for (let i = 0; i < hooksToMerge.length; i++) {
    const key = hooksToMerge[i]
    const value = componentVNodeHooks[key]
    hooks[key] = value
  }
}

1(function (CATMAID) {
2
3  "use strict";
4
5  // Update volume list
6  let initVolumeList = function (options, newSelectedIds) {
7    return CATMAID.Volumes.listAll(project.id).then(function (json) {
8      let volumes = json.sort(function (a, b) {
9        return CATMAID.tools.compareStrings(a.name, b.name);
10      }).map(function (volume) {
11        return {
12          title: volume.name,
13          value: volume.id
14        };
15      });
16      if (options.mode === "radio") {
17        let selectedVolume = newSelectedIds || options.selectedVolumeIds;
18        if (selectedVolume.length > 1){
19          throw new CATMAID.ValueError("Radio select only takes one selected volume");
20        }
21        // Create actual element based on the returned data
22        let node = CATMAID.DOM.createRadioSelect('Volumes', volumes,
23          selectedVolume[0], true);
24        // Add a selection handler
25        node.onchange = function (e) {
26          let volumeId = e.target.value;
27          let selected = true;
28
29          if (CATMAID.tools.isFn(options.select)) {
30            options.select(volumeId, selected, e.target);
31          }
32        };
33        return node;
34      } else {
35        let selectedVolumes = newSelectedIds || options.selectedVolumeIds;
36        // Create actual element based on the returned data
37        let node = CATMAID.DOM.createCheckboxSelect('Volumes', volumes,
38          selectedVolumes, true, options.rowCallback);
39
40        // Add a selection handler
41        node.onchange = function (e) {
42          let selected = e.target.checked;
43          let volumeId = parseInt(e.target.value, 10);
44
45          if (CATMAID.tools.isFn(options.select)) {
46            options.select(volumeId, selected, e.target);
47          }
48        };
49        return node;
50      }
51    });
52  };
53
54  CATMAID.createVolumeSelector = function (options) {
55    var volumeSelectionWrapper = document.createElement('span');
56    volumeSelectionWrapper.setAttribute('data-role', 'volume-select');
57    if (options.autoUpdate) {
58      volumeSelectionWrapper.setAttribute('data-auto-update', 'true');
59    }
60    let volumeSelection;
61    if (options.label){
62      volumeSelection = CATMAID.DOM.createLabeledAsyncPlaceholder(options.label, initVolumeList(options), options.title, options.initCallback);
63    } else {
64      volumeSelection = CATMAID.DOM.createAsyncPlaceholder(initVolumeList(options), options.initCallback);
65    }
66    volumeSelectionWrapper.appendChild(volumeSelection);
67    volumeSelectionWrapper.refresh = function(newSelectedIds){
68      while (0 !== volumeSelectionWrapper.children.length) {
69        volumeSelectionWrapper.removeChild(volumeSelectionWrapper.children[0]);
70      }
71      var volumeSelection = CATMAID.DOM.createAsyncPlaceholder(initVolumeList(options, newSelectedIds));
72      volumeSelectionWrapper.appendChild(volumeSelection);
73    };
74    return volumeSelectionWrapper;
75  };
76
77
78})(CATMAID);

Source: volumes.js

(function (CATMAID) {

  "use strict";

  // Update volume list
  let initVolumeList = function (options, newSelectedIds) {
    return CATMAID.Volumes.listAll(project.id).then(function (json) {
      let volumes = json.sort(function (a, b) {
        return CATMAID.tools.compareStrings(a.name, b.name);
      }).map(function (volume) {
        return {
          title: volume.name,
          value: volume.id
        };
      });
      if (options.mode === "radio") {
        let selectedVolume = newSelectedIds || options.selectedVolumeIds;
        if (selectedVolume.length > 1){
          throw new CATMAID.ValueError("Radio select only takes one selected volume");
        }
        // Create actual element based on the returned data
        let node = CATMAID.DOM.createRadioSelect('Volumes', volumes,
          selectedVolume[0], true);
        // Add a selection handler
        node.onchange = function (e) {
          let volumeId = e.target.value;
          let selected = true;

          if (CATMAID.tools.isFn(options.select)) {
            options.select(volumeId, selected, e.target);
          }
        };
        return node;
      } else {
        let selectedVolumes = newSelectedIds || options.selectedVolumeIds;
        // Create actual element based on the returned data
        let node = CATMAID.DOM.createCheckboxSelect('Volumes', volumes,
          selectedVolumes, true, options.rowCallback);

        // Add a selection handler
        node.onchange = function (e) {
          let selected = e.target.checked;
          let volumeId = parseInt(e.target.value, 10);

          if (CATMAID.tools.isFn(options.select)) {
            options.select(volumeId, selected, e.target);
          }
        };
        return node;
      }
    });
  };

  CATMAID.createVolumeSelector = function (options) {
    var volumeSelectionWrapper = document.createElement('span');
    volumeSelectionWrapper.setAttribute('data-role', 'volume-select');
    if (options.autoUpdate) {
      volumeSelectionWrapper.setAttribute('data-auto-update', 'true');
    }
    let volumeSelection;
    if (options.label){
      volumeSelection = CATMAID.DOM.createLabeledAsyncPlaceholder(options.label, initVolumeList(options), options.title, options.initCallback);
    } else {
      volumeSelection = CATMAID.DOM.createAsyncPlaceholder(initVolumeList(options), options.initCallback);
    }
    volumeSelectionWrapper.appendChild(volumeSelection);
    volumeSelectionWrapper.refresh = function(newSelectedIds){
      while (0 !== volumeSelectionWrapper.children.length) {
        volumeSelectionWrapper.removeChild(volumeSelectionWrapper.children[0]);
      }
      var volumeSelection = CATMAID.DOM.createAsyncPlaceholder(initVolumeList(options, newSelectedIds));
      volumeSelectionWrapper.appendChild(volumeSelection);
    };
    return volumeSelectionWrapper;
  };


})(CATMAID);