tokisakiyuu · August 12, 2023 16:01
diff --git a/README.md b/README.md
diff --git a/nano-require.js b/nano-require.js
 ((gloabl) => {
  /**
   * Like require function in the commonjs, but return a promise.
   * @param {string[]} urls An array of module url
   */
  function nanoRequire(urls) {
    // exclude already loaded modules
    urls = urls.filter(url => !gloabl.NR_MODULE_MAP[url] || gloabl.NR_MODULE_MAP[url] !== 'loaded')
    // hold current loading state of the module, so prevent others from fetch same module again.
    urls.forEach(url => { gloabl.NR_MODULE_MAP[url] = 'loading' })
    return Promise.allSettled(urls.map(url => fetchModule(url)))
      .then(replies => {
        replies.forEach((result, index) => {
          if (result.status == 'fulfilled') {
            gloabl.NR_MODULE_MAP[urls[index]] = 'loaded'
          } else {
            gloabl.NR_MODULE_MAP[urls[index]] = 'error'
            throw result.reason
          }
        })
      })
  }

  /**
   * @param {string} url module's url
   */
  function fetchModule(url) {
    return new Promise((resolve, reject) => {
      const script = gloabl.document.createElement('script')
      script.src = url
      script.onload = resolve
      script.onerror = () => reject(new Error(`fetch module "${url}" failed`))
      gloabl.document.head.appendChild(script)
    })
  }

  !gloabl.NR && (gloabl.NR = nanoRequire)
  // Hold loaded module and its state.
  !gloabl.NR_MODULE_MAP && (gloabl.NR_MODULE_MAP = [])
 })(window)
diff --git a/script-a.js b/script-a.js
 // all code in nano-require.js put here...

 function doSomethingA() {
  console.log('i am "script-a" using jq', jQuery)
 }

 NR(["https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"]).then(doSomethingA)
diff --git a/script-b.js b/script-b.js
 // all code in nano-require.js put here...

 function doSomethingB() {
  console.log('i am "script-b" using jq and react', jQuery, React)
 }

 NR([
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
  "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"
 ]).then(doSomethingB)
	((gloabl) => {
	/**
	* Like require function in the commonjs, but return a promise.
	* @param {string[]} urls An array of module url
	*/
	function nanoRequire(urls) {
	// exclude already loaded modules
	urls = urls.filter(url => !gloabl.NR_MODULE_MAP[url] \|\| gloabl.NR_MODULE_MAP[url] !== 'loaded')
	// hold current loading state of the module, so prevent others from fetch same module again.
	urls.forEach(url => { gloabl.NR_MODULE_MAP[url] = 'loading' })
	return Promise.allSettled(urls.map(url => fetchModule(url)))
	.then(replies => {
	replies.forEach((result, index) => {
	if (result.status == 'fulfilled') {
	gloabl.NR_MODULE_MAP[urls[index]] = 'loaded'
	} else {
	gloabl.NR_MODULE_MAP[urls[index]] = 'error'
	throw result.reason
	}
	})
	})
	}

	/**
	* @param {string} url module's url
	*/
	function fetchModule(url) {
	return new Promise((resolve, reject) => {
	const script = gloabl.document.createElement('script')
	script.src = url
	script.onload = resolve
	script.onerror = () => reject(new Error(`fetch module "${url}" failed`))
	gloabl.document.head.appendChild(script)
	})
	}

	!gloabl.NR && (gloabl.NR = nanoRequire)
	// Hold loaded module and its state.
	!gloabl.NR_MODULE_MAP && (gloabl.NR_MODULE_MAP = [])
	})(window)
	// all code in nano-require.js put here...

	function doSomethingA() {
	console.log('i am "script-a" using jq', jQuery)
	}

	NR(["https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"]).then(doSomethingA)
	// all code in nano-require.js put here...

	function doSomethingB() {
	console.log('i am "script-b" using jq and react', jQuery, React)
	}

	NR([
	"https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
	"https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"
	]).then(doSomethingB)