Javascript variables from html imports are inaccessible after becoming module imports (polymer redux example)

I’m trying to follow Rob’s Redux Polycast while using this loader.

Maybe this is WAI but the javascript variables exposed from within html-imports are not accessible after they are made into module-imports.

This will fail with ‘PolymerRedux’ is undefined:

<link rel="import" href="../bower_components/polymer-redux/polymer-redux.html">

<script type="text/javascript">
  const Redux = require('redux');

  const initial = {message: 'Hello, World!'};
  const reducer = state => state;
  const store = Redux.createStore(reducer, initial);

  const ReduxMixin = PolymerRedux(store);
</script>

And this would fail with ‘ReduxMixin’ is undefined:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="redux-store.html">

<dom-module id="app-main">
  <template>...</template>

  <script>
    class AppMain extends ReduxMixin(Polymer.Element) {

      static get is() { return 'app-main'; }

      static get properties() {
        return {};
      }
    }

    window.customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>

My example project with a few quick attempts to make this work: https://github.com/zszafran/polymer-redux-webpack/blob/master/src/redux-store.html

I was able to make part of this work by doing this:

<link rel="import" href="../bower_components/polymer-redux/polymer-redux.html">

<script type="text/javascript">
  const Redux = require('redux');
  const initial = {message: 'Hello, World!'};
  const reducer = state => state;
  const store = Redux.createStore(reducer, initial);

  export const ReduxMixin = (Parent) => Parent;  // <--- added 'export'
</script>

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="redux-store.html" imports="ReduxMixin">  <!-- added 'imports' attribute -->

<dom-module id="app-main">
  <template>...</template>

  <script>
    class AppMain extends ReduxMixin(Polymer.Element) {
      ...
    }

    window.customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>

After I modified the loader:

          if (ignoreLinks.indexOf(href) < 0 && ignoredFromPartial.length === 0) {
            var imports = (0, _dom.getAttribute)(linkNode, 'imports');
            var importStr = imports ? `{${imports}} from ` : '';
            source += `\nimport ${importStr}'${path.replace(/\\/g, '\\\\')}';\n`;
            lineCount += 2;
          }

But this hack only got me so far since I still need to modify polymer-redux to export the ‘PolymerRedux’ function. Maybe there is a FR in all this, but it seems like my best bet will be to load this all with <script> tags and somehow compile the polymer-redux source lib into it.

[NeilujD]

@ChadKillingsworth I am not sure about the provided solution. I think the issue is not about importing the ReduxMixin in the app-main.html element but importing the PolymerRedux mixin into the redux-store.html file. Am I right ?

[ChadKillingsworth]

I have not forgotten about this. Just have to find time to put together an example.