<h2 dir="auto">Feature request</h2>
<p dir="auto">add "hot module introspection"<br>
as a feedback channel from browser to editor</p>
<p dir="auto"><strong>situation in my code editor</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Class1 {constructor() {this.key1 = 'val1'}};
class Class2 {constructor() {this.key2 = 'val2'}};
obj1 = new Class1();
obj2 = new Class2();

obj1.k
//    ^
//    at this point i want &quot;hot code completion&quot; in my code editor
//    so only &quot;key1&quot; is suggested, but not &quot;key2&quot;

// code introspection at runtime
Object.keys(obj1)
// = [ 'key1' ]

// the node.js shell can do it
obj1.k
//    ^
//    the tab-key does the right completion to &quot;key1&quot;"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Class1</span> <span class="pl-kos">{</span><span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">key1</span> <span class="pl-c1">=</span> <span class="pl-s">'val1'</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">class</span> <span class="pl-v">Class2</span> <span class="pl-kos">{</span><span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">key2</span> <span class="pl-c1">=</span> <span class="pl-s">'val2'</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s1">obj1</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Class1</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">obj2</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Class2</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">obj1</span><span class="pl-kos">.</span><span class="pl-c1">k</span>
<span class="pl-c">//    ^</span>
<span class="pl-c">//    at this point i want "hot code completion" in my code editor</span>
<span class="pl-c">//    so only "key1" is suggested, but not "key2"</span>

<span class="pl-c">// code introspection at runtime</span>
<span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-s1">obj1</span><span class="pl-kos">)</span>
<span class="pl-c">// = [ 'key1' ]</span>

<span class="pl-c">// the node.js shell can do it</span>
<span class="pl-s1">obj1</span><span class="pl-kos">.</span><span class="pl-c1">k</span>
<span class="pl-c">//    ^</span>
<span class="pl-c">//    the tab-key does the right completion to "key1"</span></pre></div>
<p dir="auto"><strong>Ideal?</strong></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="obj1.k
//    ^
//    at this point i want &quot;hot code completion&quot; in my code editor
//    so only &quot;key1&quot; is suggested, but not &quot;key2&quot;"><pre class="notranslate"><span class="pl-s1">obj1</span><span class="pl-kos">.</span><span class="pl-c1">k</span>
<span class="pl-c">//    ^</span>
<span class="pl-c">//    at this point i want "hot code completion" in my code editor</span>
<span class="pl-c">//    so only "key1" is suggested, but not "key2"</span></pre></div>
<p dir="auto">as far as i know<br>
all code editors fail at this point of "dynamic code analysis"<br>
the best they can offer is: <code class="notranslate">key1</code> or <code class="notranslate">key2</code></p>
<p dir="auto">vscode and eclipse do this by default<br>
vscode calls this "intellisense text suggestions"</p>
<p dir="auto">but i dont want to be limited by "static code analysis"<br>
when the program is started anyway, after every file change</p>
<p dir="auto"><strong>Solution?</strong></p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong></p>
<p dir="auto">extend the "hot module replacement" system<br>
to feed back "hot module introspection" data to the editor</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/12958815/70218504-613f2f80-1743-11ea-9d66-a725eb8b558f.jpg"><img src="https://user-images.githubusercontent.com/12958815/70218504-613f2f80-1743-11ea-9d66-a725eb8b558f.jpg" alt="js-webpack-hmr--hot-module-introspection-feedback" style="max-width: 100%;"></a></p>
<p dir="auto">this introspection-data can be sent over http<br>
so the editor has a keep-alive connection<br>
and is waiting for the server to push new introspection data</p>
<p dir="auto">.... or use the browser as code editor, using <a href="https://codemirror.net/demo/tern.html" rel="nofollow">CodeMirror</a><br>
and show the program inside a frame, like on jsfiddle.net<br>
[ the code completion function of codemirror seems broken to me ]</p>
<p dir="auto">the data format should be optimized for machine-readability<br>
for example by using length-prefixed lists and strings,<br>
like in BSON, messagepack, python-pickle, EXI, flatbuffers, ....</p>
<p dir="auto">in an ideal world, the javascript runtime does offer a fast way<br>
to access the "internal representation" of the running program</p>
<p dir="auto"><strong>limits</strong></p>
<p dir="auto">introspection requires a valid program,<br>
so you must have a running "last version"<br>
to provide introspection data for your not-running "current version"</p>
<p dir="auto"><strong>potential problems</strong></p>
<p dir="auto">circular references must be detected and handled<br>
like <code class="notranslate">object.child.parent.child.parent.child</code>....</p>
<p dir="auto"><strong>related</strong></p>
<p dir="auto"><a href="https://stackoverflow.com/questions/15690706/recursively-looping-through-an-object-to-build-a-property-list" rel="nofollow">recursive introspection in javascript</a></p>
<p dir="auto"><a href="https://stackoverflow.com/questions/8024149/is-it-possible-to-get-the-non-enumerable-inherited-property-names-of-an-object" rel="nofollow">get inherited properties of javascript objects</a></p>
<p dir="auto"><a href="https://news.ycombinator.com/item?id=16289698" rel="nofollow">VS Code to autocomplete JavaScript class 'this' properties automatically</a><br>
-- "doesn't work too well if you bind things to the class at runtime"</p>
<p dir="auto"><a href="https://www.youtube.com/watch?v=j-kj2qwJa_E&amp;t=228s" rel="nofollow">the ahaa moment of hot reloading in clojurescript/figwheel, by bruce hauman</a></p>
<p dir="auto"><strong>Why?</strong></p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong></p>
<p dir="auto">this allows for "zero knowledge programming"</p>
<p dir="auto">let the machine do the boring-precise part of<br>
"how did i call this property? where is it hidden?"<br>
and focus on the creative-fuzzy part of<br>
"let me just add something like ...."</p>
<p dir="auto">this also makes it much easier to learn new libraries.<br>
instead of depending on good documentation,<br>
you can make full use of the existing introspection functions.</p>
<p dir="auto">for "distant properties" who are hidden in child/parent objects,<br>
you can browse a "map of properties", like a mind-map.</p>
<p dir="auto">also, why not? : P</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong></p>
<p dir="auto">no, not today.<br>
i hope that the "insider people" can solve this much faster than me<br>
and i can avoid digging into unfamiliar projects</p>
<p dir="auto"><strong>more keywords</strong></p>
<p dir="auto">code hinting, runtime analysis, dynamic analysis, runtime introspection, live object introspection, hierarchy of variable names, javascript object graph</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Many modules published to npm are using "auto" exports (<a href="https://rollupjs.org/guide/en#output-exports-exports" rel="nofollow">https://rollupjs.org/guide/en#output-exports-exports</a>, but there is also a popular babel plugin which adds this behaviour <a href="https://github.com/59naga/babel-plugin-add-module-exports#readme">https://github.com/59naga/babel-plugin-add-module-exports#readme</a>) which is supposed to ease interop with node (removing "pesky" <code class="notranslate">.default</code> for CJS consumers when there is only a default export in the module).</p>
<p dir="auto">And with that depending on a package authored <strong>solely</strong> in CJS (which still is really common) which depends on a package authored using the mentioned "auto" mode is dangerous and broken.</p>
<p dir="auto">Why? Because webpack is using the "module" entry from package.json (thus using real default export) without checking the requester module type (which is cjs here). CJS requester did not use a <code class="notranslate">.default</code> when requiring the package with auto mode, because from its perspective there was no such thing.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto"><a href="https://github.com/Andarist/webpack-module-entry-from-cjs-issue">https://github.com/Andarist/webpack-module-entry-from-cjs-issue</a> . Exported value should be <code class="notranslate">"foobar42"</code> instead of <code class="notranslate">"foo[object Module]42"</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Webpack should deopt (ignoring .mjs &amp; "module") its requiring behaviour based on the requester type.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  latest<br>
Node.js version: irrelevant<br>
Operating System: irrelevant<br>
Additional tools: irrelevant</p>
<p dir="auto">Mentioning rollup team as probably its the tool outputting the most auto mode libraries ( <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/lukastaegert/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/lukastaegert">@lukastaegert</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/guybedford/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/guybedford">@guybedford</a> ) and <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/developit/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/developit">@developit</a> (who I think might be interested in the discussion).</p>