IE11 Compatibility

[fuleinist]

Not an issue but just want to confirm there is no support to < IE 11 since this library is using proxy.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Browser_compatibility

And it's also not possible to be compiled or polyfilled by webpack or babel as per discussion below:
https://stackoverflow.com/questions/45285992/es6-proxy-polyfill-for-ie11?rq=1

Any advice would be appreciated!

[dai-shi]

I haven't tried it, but you should be able to use proxy-polyfill.
There's some limitations when using proxy-polyfill, but if one understands the limitations and can live with them, it should be usable.
Please see the comment in dai-shi/reactive-react-redux#30

If you would like to try this library with proxy-polyfill, I'm happy to help.

[andrewluetgers]

@dai-shi what do you think of a compatibility mode alternative where it falls back to just rendering everything?

[dai-shi]

@andrewluetgers Yeah, that should be one option, if it's OK with the app.
This doesn't need to modify the library, you could probably do this.

const useTrackedStateWithFallback =
  typeof Proxy !== 'undefined' ? () => useTrackedState() : () => useSelector(s => s);

[forstjiri]

I managed to use IE with fallback to Context.

First problem is that your library is published in ES6 and i couldnt add it to Babel transform, so i copied it to external.

Next i had to add fake pollyfills, without these, IE panicked.

window.Symbol = window.Symbol || (() => null);
window.Reflect = window.Reflect || {};

Then i added switch between tracked and untracked version to my store

/**
 * react-tracked does not support IE11  (no Proxy)
 * IE will still load library but wont use it
 * It will be slow but working
 * No extra libraries are loaded for modern browsers in this case
 */
const factory = window.Proxy ? trackedFactory : untrackedFactory;

export const {
  CheckoutStore,
  useTracked,
  useTrackedState,
  useUpdate,
  useSelector,
  memo,
  getUntrackedObject,
} = factory(reducer, initialState, asyncActionHandlers);

And lastly there are those two factories types

import * as React from 'react';

import { createContainer, memo, getUntrackedObject } from '_TS_/libs/external/react-tracked';

import useReducerAsync from '../useReducerAsync';

const trackedFactory = (reducer, initialState, asyncActionHandlers) => {
  /**
   * `react-tracked` takes care of unneeded rerenders
   */
  const {
    Provider,
    useTracked,
    useTrackedState,
    useUpdate,
    useSelector,
  }: {
    Provider;
    useTracked(any?): [CheckoutState, React.Dispatch<CheckoutAction>];
    useTrackedState(): CheckoutState;
    useUpdate(): React.Dispatch<CheckoutAction>;
    useSelector(selector: (state: CheckoutState) => unknown);
  } = createContainer(() => useReducerAsync(
    reducer,
    initialState,
    asyncActionHandlers,
  ));

  const CheckoutStore = (props: { children }): React.ReactElement => {
    const { children } = props;

    return (
      <Provider>
        {children}
      </Provider>
    );
  };

  return {
    CheckoutStore,
    useTracked,
    useTrackedState,
    useUpdate,
    useSelector,
    memo,
    getUntrackedObject,
  };
};

export default trackedFactory;

import * as React from 'react';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
import useReducerAsync from '../useReducerAsync';


const untrackedFactory = (reducer, initialState, asyncActionHandlers) => {
  const CheckoutStoreContext = React.createContext<[ CheckoutState, any ]>(null);

  const CheckoutStore = (props: {children}): React.ReactElement => {
    const { children } = props;

    const [state, dispatch] = useReducerAsync(reducer, initialState, asyncActionHandlers);

    return (
      <CheckoutStoreContext.Provider value={[state, dispatch]}>
        { children }
      </CheckoutStoreContext.Provider>
    );
  };

  const useTracked = (): [CheckoutState, React.Dispatch<CheckoutAction>] => (
    React.useContext(CheckoutStoreContext)
  );

  const useSelector = (selector: (state: CheckoutState) => unknown): unknown => {
    const [state] = React.useContext(CheckoutStoreContext);

    return selector(state);
  };

  const useUpdate = (): React.Dispatch<CheckoutAction> => {
    const [,dispatch] = React.useContext(CheckoutStoreContext);

    return dispatch;
  };

  const useTrackedState = (): CheckoutState => {
    const [state] = React.useContext(CheckoutStoreContext);

    return state;
  };

  return {
    CheckoutStore,
    useTracked,
    useTrackedState,
    useUpdate,
    useSelector,
    memo: React.memo,
    getUntrackedObject: (obj) => obj, // just return given
  };
};

export default untrackedFactory;

[dai-shi]

@aiphee Thanks sooooo much for your trial and those notes!

First problem is that your library is published in ES6 and i couldnt add it to Babel transform, so i copied it to external.

src/*.js is in ES6 with ES modules, and dist/*.js is babel transpiled, more or less in ES5.
The problem is probably in the package.json:

"main": "./dist/index.js",
"module": "./src/index.js",

However, I knew not all bundlers can configure it very well.

window.Symbol = window.Symbol || (() => null);
window.Reflect = window.Reflect || {};

OK, I didn't know this. This means that proxy-polyfill isn't enough for IE11 anyway.

const factory = window.Proxy ? trackedFactory : untrackedFactory;

Cool.

• IE will still load library but wont use it
• It will be slow but working

Are you interested in trying proxy-polyfill? If so, I can try working on resolving Symbol and Reflect.

[dai-shi]

Closing this. If someone is interested in it, I will reopen it.