var dom = document.getElementById('app');
dom.innerHTML  // ""

var vApp = {
    tagName: "div",
    attrs: {
        id: "app"
    },
    childrens: []
}

// render.js
function createElement(vNode) {
	const $el = document.createElement(vNode.tagName);
	
	// 处理属性
	for (const [k, v] of Object.entries(vNode.attrs)) {
		$el.setAttribute(k, v);
	}
	
	// 处理子元素
	for (const child of vNode.childrens) {
		$el.appendChild(render(child));
	}
	
	return $el;
}

const render = (vNode) => {
	// 生成文字节点
	if (typeof vNode === "string") {
		return document.createText(vNode);
	}
	
	// 生成元素节点
	return createElement(vNode);
};

export default render;

export default ($node, $target) => {
	$target.replaceWith($node);
	return $node;
};

$rootEl = mount(render(createVApp(count)), $rootEl);

  if (newVTree === undefined) {
    return $node => {
      $node.remove();
      return undefined
    }
  }

  if (typeof newVTree === "string" || typeof oldVTree === "string") {
    if (newVTree !== oldVTree) {
      return $node => {
        const $newNode = render(newVTree)
        $node.replaceWith($newNode);
        return $node
      }
    } else {
      return $node => $node
    }
  }
  
  if (newVTree.tagName !== oldVTree.tagName) {
    return $node => {
      const $newNode = render(newVTree)
      $node.replaceWith($newNode);
      return $node
    }
  }

const diffAttrs = (oldAttrs, newAttrs) => {
  const patches = [];

  for (const [k, v] of Object.entries(newAttrs)) {
    if(!(k in oldAttrs)) {
      patches.push($node => {
        $node.setAttribute(k, v)
        return $node
      })
    }
  }

  for (const k in oldAttrs) {
    if (!(k in newAttrs)) {
      patches.push($node => {
        $node.removeAttribute(k);
        return $node;
      });
    }
  }

  return $node => {
    for (const patch of patches) {
      patch($node);
    }
    return $node;
  };
}

export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>
 // 1. 函数初始化
  const onlyGetter = isFunction(getterOrOptions)
  if (onlyGetter) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
 // 2. computed对象
  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter)

  if (__DEV__ && debugOptions) {
    cRef.effect.onTrack = debugOptions.onTrack
    cRef.effect.onTrigger = debugOptions.onTrigger
  }

  return cRef as any
}

export class ReactiveEffect<T = any> {
  active = true
  deps: Dep[] = []

  // can be attached after creation
  computed?: boolean
  allowRecurse?: boolean
  onStop?: () => void

  // ...


  constructor(
    public fn: () => T,
    public scheduler: EffectScheduler | null = null,
    scope?: EffectScope | null
  ) {
    recordEffectScope(this, scope)
  }

  run() {
	// ...
  }

  stop() {
    if (this.active) {
      cleanupEffect(this)
      if (this.onStop) {
        this.onStop()
      }
      this.active = false
    }
  }
}

  run() {
    if (!this.active) {
      return this.fn()
    }
    if (!effectStack.includes(this)) {
      try {
        effectStack.push((activeEffect = this))
        enableTracking()

        trackOpBit = 1 << ++effectTrackDepth

        if (effectTrackDepth <= maxMarkerBits) {
          initDepMarkers(this)
        } else {
          cleanupEffect(this)
        }
        return this.fn()
      } finally {
        if (effectTrackDepth <= maxMarkerBits) {
          finalizeDepMarkers(this)
        }

        trackOpBit = 1 << --effectTrackDepth

        resetTracking()
        effectStack.pop()
        const n = effectStack.length
        activeEffect = n > 0 ? effectStack[n - 1] : undefined
      }
    }

  get value() {
    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
    const self = toRaw(this)
    trackRefValue(self)
    if (self._dirty) {
      self._dirty = false
      self._value = self.effect.run()!
    }
    return self._value
  }

// import
const doSomething = require("./doSomething.js")

// export
module.exports = function doSomething() {}

define(['dep1', 'dep2'], function (dep1, dep2) {
    //Define the module value by returning a value.
    return function () {};
});
// or
define(function (require) {
    var dep1 = require('dep1'),
        dep2 = require('dep2');
    return function () {};
});

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["jquery", "underscore"], factory);
    } else if (typeof exports === "object") {
        module.exports = factory(require("jquery"), require("underscore"));
    } else {
        root.Requester = factory(root.$, root._);
    }
}(this, function ($, _) {
    // this is where I defined my module implementation

    var Requester = { // ... };

    return Requester;
}));

// import
import someThing from "./something.js"
import { a, b } from "./someModule.js"

// export
export default function doSomething () {}