DEV Community

Discussion on: How to avoid namespace pollution in Javascript

View post

Replies for: Perhaps using 'eval' ? But as you know it's not recommended.

 
peerreynders profile image
peerreynders • • Edited

1.) It is not uncommon for style guides to discourage the use of wildcard imports even when the language supports it. Example:

Wildcard imports should not be used

On the principle that clearer code is better code, you should explicitly import the things you want to use in a module. Using import * imports everything in the module, and runs the risk of confusing maintainers. Similarly, export * from "module"; imports and then re-exports everything in the module, and runs the risk of confusing not just maintainers but also users of the module.

Also keep in mind that in C/C++ include occurs at compile-time so there is no runtime cost to dumping a boatload of unused names into the code. In JavaScript import happens at run time so potential for "more work" comes with the potential for undesirable run time consequences.

Other than that, for example, Google's style guide with regards to imports.

2.) In your example it looks like you are trying to export functions that are only capable of creating a single type of HTML element

Prior art:

import { h } from 'preact';

h('div', { id: 'foo' }, 'Hello!');
// <div id="foo">Hello!</div>

h('div', { id: 'foo' }, 'Hello', null, ['Preact!']);
// <div id="foo">Hello Preact!</div>

h(
    'div',
    { id: 'foo' },
    h('span', null, 'Hello!')
);
// <div id="foo"><span>Hello!</span></div>
Enter fullscreen mode Exit fullscreen mode

For a while React also had react-dom-factories:

import { em, h1, span } from 'react-dom-factories';

h1({ id: 'my-heading' }, span(null, em(null, 'Hell'), 'o'), ' world!');
Enter fullscreen mode Exit fullscreen mode

However support was dropped as JSX is the accepted standard among React developers.
Other helper examples: hyperscript-helpers, react-hyperscript.

3.)

So, my question is: Does anybody know a way to create local variables or const dynamically in Javascript?

Basically strict mode which is the default in ES2015 modules makes that impossible.

However for the time being one can still pull a stunt like this:

// file: with-fn.js
// source: https://twitter.com/WebReflection/status/1411677706287255552
// caveat emptor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with#ambiguity_contra
//
const withFnCache = new WeakMap();

function cacheWithFn(fn) {
  const wrapped = Function(
    'with(arguments[0])return(' +
      fn +
      ').apply(this,[].slice.call(arguments,1))'
  );
  withFnCache.set(fn, wrapped);
  return wrapped;
}

function withFn(fn) {
  const w = withFnCache.get(fn);
  return w ? w : cacheWithFn(fn);
}

export { withFn };
Enter fullscreen mode Exit fullscreen mode 
// file: shared.js
const append = DocumentFragment.prototype.append;

function toFragment(children) {
  const fragment = document.createDocumentFragment();
  append.apply(fragment, Array.isArray(children) ? children : [children]);
  return fragment;
}

function createElement(tagName, children) {
  const element = document.createElement(tagName);
  element.appendChild(toFragment(children));
  return element;
}

export { createElement };
Enter fullscreen mode Exit fullscreen mode 
// file: libA.js
import { createElement } from './shared.js';

function h1(...children) {
  return createElement('h1', children);
}

export { h1 };
Enter fullscreen mode Exit fullscreen mode 
// file: libB.js
import { createElement } from './shared.js';

function em(...children) {
  return createElement('em', children);
}

export { em };
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<!-- index.html -->
<html>
  <head>
    <title>Faking implicit imports</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script type="module">
     import { withFn } from './with-fn.js';
     import * as libA from './libA.js';
     import * as libB from './libB.js';

     const imports = Object.assign({}, libA, libB);
     const app = withFn(appFn);

     document
       .querySelector('body')
       .appendChild(app(imports, 'Test ', 'this!'));

     function appFn(first, last) {
       // `h1` and `em` aren't declared anywhere
       return h1(first, em(last));
     }
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
// file: with-imports.js
function withImports(imports, fn) {
  const h = Function(
    'imports',
    'args',
    `with(imports)return(${fn}).apply(this, args)`
  );
  return invokeWithImports;

  function invokeWithImports(...args) {
    return h(imports, args);
  }
}

export { withImports };
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<!-- index.html -->
<html>
  <head>
    <title>Faking implicit imports</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script type="module">
     import { withImports } from './with-imports.js';
     import * as libA from './libA.js';
     import * as libB from './libB.js';

     const imports = Object.assign({}, libA, libB);
     const app = withImports(imports, appFn);

     document.querySelector('body').appendChild(app('Test ', 'this!'));

     function appFn(first, last) {
       // `h1` and `em` aren't declared anywhere
       return h1(first, em(last));
     }
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
efpage profile image
Eckehard •

I like any kind of dirty tricks, but 'eval' is really nasty. As this may cause serious security issues I would not try to use it. But I´m sure there will be a solution without.

Thread Thread
 
efpage profile image
Eckehard •

Andrea Giammarchi reminded me, that rollup.js might be perfect. That´s indeed a smart solution!

Thread Thread
 
artydev profile image
artydev • • Edited

Great, Andrea is an awesome guy
In fact I have published your TodoList using rollup and it's tree shaking feature :-)

Thread Thread
 
peerreynders profile image
peerreynders • • Edited

MDN: Function:

Calling the constructor directly can create functions dynamically but suffers from security and similar (but far less significant) performance issues to Global_Objects/eval. However, unlike eval, the Function constructor creates functions that execute in the global scope only.

Also functions created with Function don't default to strict mode so it is possible to use the with statement which has been not welcome for the last decade.

The suggested alternative leads us back to

<!DOCTYPE html>
<!-- index.html -->
<html>
  <head>
    <title>Giving up on faking implicit imports</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script type="module">
     import * as libA from './libA.js';
     import * as libB from './libB.js';
     const h = Object.assign({}, libA, libB);

     document.querySelector('body').appendChild(app('Test ', 'this!'));

     function app(first, last) {
       return h.h1(first, h.em(last));
     }
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

that rollup.js might be perfect.

It would let you work with smaller modules which are less prone to having a large number of exports that are then stitched together at build time - so wildcard imports would be much less problematic. In my judgement rollup.js is probably the most sane bundler solution at this time (even when esbuild is faster; Parcel is way too magical for my taste).