JS module blocks addressable as fragments

js-module-url-fragments.js

/* 
This is an idea I had for allowing multiple modules within a single file, each of
which is addressable via URL fragment. Something like this could simplify bundling,
especially if used in conjunction with Import Maps. It could also be a nice way
to run blocks of code in web workers, where those blocks don't require a separate
file and can themselves import other modules in the same file or other files.
*/

// File_A.js

module 'innerModule1' {
  export const export1 = 'value1'
}

module 'innerModule2' {
  import {export1} from '#innerModule1' //'value1'
  export const export2 = 'value2'
}


// File_B.js

module 'workerModule' {
  import {export2} from 'File_A.js#innerModule2'
  
  self.onMessage = e => {
    console.log(export2) //logs 'value2'
  }
}

const worker = new Worker('#workerModule', {type 'module'})
worker.postMessage({})



// Resolution to inline modules using import maps:
// import-map.json
{
  "imports": {
    "react": "/libsBundle.js#react",
    "react-dom": "/libsBundle.js#react-dom",
    "three": "/libsBundle.js#three
  }
}