<h2 dir="auto">Feature request</h2>
<p dir="auto">I am not 100% sure if this still fits the scope of the webpack project.</p>
<p dir="auto">I am working on the topic "Expanding Single Page Apps into multiple Browser Windows", which can look like this:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1177434/84753491-58b39580-afbf-11ea-83f4-fcd3b17bd768.png"><img src="https://user-images.githubusercontent.com/1177434/84753491-58b39580-afbf-11ea-83f4-fcd3b17bd768.png" alt="Screenshot 2020-06-15 at 09 03 42" style="max-width: 100%;"></a></p>
<p dir="auto">Quick background info:<br>
Apps we create using neo.mjs just import the main thread. The main thread creates the app, data &amp; vdom workers. The only important part here is the app worker: you define which app (entrypoint) you want to use and the app worker dynamically imports it.</p>
<p dir="auto">For the dist versions which rely on webpack, webpack has no chance to know what could get imported, so I created build specific entrypoints.<br>
Example:<br>
<a href="https://github.com/neomjs/neo/blob/master/buildScripts/webpack/entrypoints/myApps/Covid.mjs">https://github.com/neomjs/neo/blob/master/buildScripts/webpack/entrypoints/myApps/Covid.mjs</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import '../../../../src/worker/App.mjs';
import '../../../../apps/covid/app.mjs';"><pre class="notranslate"><code class="notranslate">import '../../../../src/worker/App.mjs';
import '../../../../apps/covid/app.mjs';
</code></pre></div>
<p dir="auto">This cheating a little bit, since inside the dist versions, the import is no longer dynamic.<br>
Works fine though.</p>
<p dir="auto">Now for the multi Browser Window apps, i needed to switch the App (,Data &amp; VDom) workers into SharedWorkers.<br>
It does work fine using webpack based builds as long as you use only 1 app:</p>
<p dir="auto">Online Demo: <a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/development/apps/sharedcovid/index.html#mainview=table" rel="nofollow">https://neomjs.github.io/pages/node_modules/neo.mjs/dist/development/apps/sharedcovid/index.html#mainview=table</a></p>
<p dir="auto">More background infos:<br>
<a href="https://medium.com/swlh/neo-mjs-v1-2-5-support-for-sharedworkers-including-firefox-b31f144cea3f?source=friends_link&amp;sk=6bd4d0beb0e095c388153ce8f06aa76f" rel="nofollow">https://medium.com/swlh/neo-mjs-v1-2-5-support-for-sharedworkers-including-firefox-b31f144cea3f?source=friends_link&amp;sk=6bd4d0beb0e095c388153ce8f06aa76f</a></p>
<p dir="auto">I got a version using multiple Apps running directly inside Chrome (using JS modules inside the browser) and it would be nice if it would be possible to achieve the same result with a webpack based build.</p>
<p dir="auto">Now this is the tricky part:</p>
<p dir="auto">SharedWorkers <strong>have</strong> to use the same file as an entry point (otherwise the browser will spawn new SW instances, which makes using them pointless).</p>
<p dir="auto">To make this happen, we need to use separate webpack based builds (Shared AppWorker VS apps), which can work in combination.</p>





<p dir="auto"><strong>What is the expected behavior?</strong><br>
<a href="https://www.youtube.com/watch?v=RslY-e-f_qc" rel="nofollow">https://www.youtube.com/watch?v=RslY-e-f_qc</a></p>
<p dir="auto">It would be nice if this app could run the same way it does in dev mode (without any builds).</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong><br>
SharedWorkers are a big deal, even the webkit team is finally thinking about supporting them:<br>
<a href="https://bugs.webkit.org/show_bug.cgi?id=149850" rel="nofollow">https://bugs.webkit.org/show_bug.cgi?id=149850</a></p>
<p dir="auto">This has a big potential to improve the way, UI development works in general.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong><br>
I have been thinking about this quite a bit.</p>
<p dir="auto">For the neo.mjs context, we should create a separate webpack based build just for sharedthe app worker (not including apps).</p>
<p dir="auto">Then, to build apps, we need separate builds (entry points for builds).</p>
<p dir="auto">I was thinking about something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import '../../../../src/worker/App.mjs';

import(/* webpackChunkName: 'apps/sharedcovid/app' */       '../../../../apps/sharedcovid/app.mjs');
import(/* webpackChunkName: 'apps/sharedcovid_chart/app' */ '../../../../apps/sharedcovid_chart/app.mjs');
import(/* webpackChunkName: 'apps/sharedcovid_helix/app' */ '../../../../apps/sharedcovid_helix/app.mjs');
import(/* webpackChunkName: 'apps/sharedcovid_map/app' */ '../../../../apps/sharedcovid_map/app.mjs');"><pre class="notranslate"><code class="notranslate">import '../../../../src/worker/App.mjs';

import(/* webpackChunkName: 'apps/sharedcovid/app' */       '../../../../apps/sharedcovid/app.mjs');
import(/* webpackChunkName: 'apps/sharedcovid_chart/app' */ '../../../../apps/sharedcovid_chart/app.mjs');
import(/* webpackChunkName: 'apps/sharedcovid_helix/app' */ '../../../../apps/sharedcovid_helix/app.mjs');
import(/* webpackChunkName: 'apps/sharedcovid_map/app' */ '../../../../apps/sharedcovid_map/app.mjs');
</code></pre></div>
<p dir="auto">This way, the app worker will get parsed as well for each app build to ensure that we don't duplicate modules inside the app worker and apps (especially duplicating the IdGenerator would break a lot).</p>
<p dir="auto">We can adjust output: {filename: chunkData =&gt; {}}</p>
<p dir="auto">to save the app worker output itself for an app build into a not used dummy chunk (e.g. 0.js or tmp.js).</p>
<p dir="auto">we can use split chunks for app related code this way (multiple dynamic imports which are supposed to not duplicate code).</p>
<p dir="auto">I tried this approach, but am getting errors. E.g. since we are not using the "real" entry point, the build app worker output is not able to pick up the app chunks (<strong>webpack_require</strong>.e is undefined, since the separate app worker output is no longer exposing dynamic imports to webpack).</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
I don't have much time at the moment (still polishing the content of the first shared workers demo to expand SPAs into multiple browser windows), but am willing to help a bit and can definitely provide more input if needed.</p>
<h2 dir="auto">Feature request</h2>





<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">For TypeScript's new <code class="notranslate">nodenext</code> module resolution (which is still in nightly build), we are required to write a full file name including extension like:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {foo} from './foo.js';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">foo</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./foo.js'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Even though we have a source code <code class="notranslate">foo.ts</code> or <code class="notranslate">foo.tsx</code>, the file extension on import statement is <code class="notranslate">.js</code>, this results webpack to fail with errors like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="error  in ./src/index.tsx

Module not found: Error: Can't resolve './Boundary.js' in '/Users/otakustay/Develop/react-suspense-boundary/src'"><pre class="notranslate"><code class="notranslate">error  in ./src/index.tsx

Module not found: Error: Can't resolve './Boundary.js' in '/Users/otakustay/Develop/react-suspense-boundary/src'
</code></pre></div>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong></p>
<p dir="auto">We need to satisfy TypeScript's coming <code class="notranslate">nodenext</code> module resolution and be compatible with pure ESM resolve rules</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong></p>
<p dir="auto">Make <code class="notranslate">.js</code> a special case that on resolve webpack could remove the <code class="notranslate">.js</code> part and then do a normal resolve</p>
<p dir="auto">Another solution is to make <code class="notranslate">resolve.fallback</code> a function so that we can remove <code class="notranslate">.js</code> part before webpack do it's resolve</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong></p>
<p dir="auto">not familiar with this</p>