It is a bit unclear that possibleValues are constraints. limitedToValues will help clear it up.

Variable.clone() mistakenly uses initialValue for clone and doesn't set current selectedValue.

New collapsable menu container.

Allows:

• Enable/Disable remote controller
• Provides clickable link to remote controller url

Adds variable key to localStorage schema as follows:

__remixer__:
    variables: {
        key1: ...
        key2: ...
    }

This will allow adding preferences and firebase remoteId to the same __remixer__ key as needed.

Refactor the list of variable controls in the overlay in order to better control the layout. There are too many overrides to wrangle both mdl-list and mdl-list-item to the styling we need for controls.

Provide a reference to the MDL component, and call required methods as needed to update their state. This happens when a component is updated programmatically rather then physically via UI.

investigate further the comments from @appsforartists in #19.

Remixer has a few dependencies in the iframe overlay, such as Firebase, MDL, and React. They are pulled in via running npm install. However this makes using remixer in online tools such as codepen difficult, as you cannot simply import remixer by itself, and instead need to include all the dependencies.

As a suggestion, lets consider instead pulling in these dependencies via their recommended hosted CDNs from within the iframe.

We don't need to worry about performance here, as the iframe loads in background not needed immediately at page startup.

For reference, the iframe calling code is here.

Suggested CDNs:

Firebase
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-database.js"></script>

MDL
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

React
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

I think this library is built for browser only(React). I would like to use it in ReactNative. I've tried to use this in ReactNative. I'm getting Can't find variable: self. When I turn on "Debug JS Remotely" I'm getting document is not defined. If possible add support for React Native.

I'm leaving my architecture notes from #8 in this issue, but it could probably be broken into smaller issues.

In React, components should be small/single responsibility and only affect themselves (through configuration, their children).

For instance, DOMController currently does a bunch of things:

• Draws the UI scaffolding
• Determines which route to show
• Toggles the visibility of its parent element
• Sets up keybindings

These could be broken into separate elements:

class RemixerRouter extends React.Component {
  state = {
    showOptions: false,
  }

  // Use an arrow function to get correct `this` binding
  toggleOptions = () => {
    this.setState(
      {
        showOptions: !this.state.showOptions,
      }
    );
  }

  render() {
    return (
      <RemixerPanel
        toggleOptions = { this.toggleOptions }
      >
        {
          this.state.showOptions
            ? <Options />
            : <VariableConfigurator />
        }
      </RemixerPanel>
    )
  }
}

function RemixerPanel(props) {
  return (
    <div className = "rmx-card-wide mdl-card mdl-shadow--6dp">
      <div className = "mdl-card__title">
        <h2 className = "mdl-card__title-text">
          Remixer
        </h2>
      </div>

      <div className = "mdl-card__menu">
        <button 
          className = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"
          onClick = { props.toggleOptions }
        >
            <i className = "material-icons">
              menu
            </i>
        </button>
      </div>

      <div className = "mdl-card__supporting-text mdl-card__actions mdl-card--border">
        { children }
      </div>
    </div>
  );
}

function Cloak(props) {
  return props.hide
    ? null
    : props.children;
}

I'm going to move the global event listening out of a component and into the top level. This is a common pattern in React: to have all your shared state at the top-level, passed down via props.

let state = {
  showRemixer: false,
};

function toggleVisibility() {
  state = Object.assign(
    {}
    state,
    {
      showRemixer: !state.showRemixer
    }
  );

  rerender();
}

function rerender() {
  ReactDOM.render(
    <Cloak
      hide = { !state.showRemixer }
    >
      <RemixerRouter/>
    </Cloak>,
    container
  );
}

rerender();

function onKeyDown(event) {
  switch (event.keyCode) {
    case KeyCode.ESC:
      toggleVisibility();
      break;
  }
}

function onMessage(event) {
  switch (event.data) {
    case MessageType.TOGGLE_VISIBILITY:
      toggleVisibility();
      break;
  }
}

document.addEventListener(KeyboardEventType.DOWN, onKeyDown);
Messaging.register(onMessage);

For such a simple example, this is probably fine. However, as the app grows, you might find you want more order. That's where Redux comes in. It's this same pattern, but organized:

Redux is conceptually really simple. You have a high-level state atom (effectively just a tree of data you want to keep track of). Yours might be {showRemixer: true, showOptions: false}. Then, you have reducers that operate on that state. You might have this:

export function toggleVisibility(oldState = {showRemixer: false}, action) {
  switch (action.type) {
    case MessageType.TOGGLE_VISIBILITY:
      return (
        {
          ...oldState,
          showRemixer: !oldState.showRemixer
        }
      );
  }
}

The messages you are currently sending are called "actions" in Redux parlance. Every time it receives one, it calls the reducer to get an updated state. It then passes that updated state into your component tree (Cloak in our example above) to trigger a rerender. As you can see, this is the same thing I've done in the top-level of the example, just a bit more structured.

Imagine you wanted to add a keybinding to toggle the options. You could do so with a reducer that looked like this:

export function toggleOptions(oldState = {showOptions: false}, action) {
  switch (action.type) {
    case MessageType.TOGGLE_OPTIONS:
      return (
        {
          ...oldState,
          showOptions: !oldState.showOptions
        }
      );
  }
}

Your router simplifies to just this:

function RemixerRouter(props) {
  return (
    <RemixerPanel>
      {
        props.showOptions
          ? <Options />
          : <VariableConfigurator />
      }
    </RemixerPanel>
  );
}

RemixerPanel uses the toggleOptionsAction to handle clicks on the menu button, and your key listener calls it whenever someone hits the ? key. Redux would pass showOptions into RemixerRouter as a prop.

Redux is a 7K dependency. Since this is a developer tool, that's probably not an impactful number. For cleanliness/maintainability, it may be worth adopting.

I'd split your constants into areas of responsibility and use named export to move them between files. For instance, in constants.ts:

export const KeyCode = {
  ESC: 27,
};

Then, you'd use KeyboardEventType.DOWN and KeyCode.ESC.

e.g.

remixer.addRangeVariable({
  label: "Box opacity",
  defaultValue: 1,
  from: 0,
  to: 1,
  incrementSize: .1,
  onChange(nextValue) {
    box.style.opacity = nextValue;
  }
});

from #25 (comment)

Remixer has very strong opinions about how it's hosted: It must be served from a folder called node_modules, with its dependencies (e.g. ./node_modules/react-dom/dist/react-dom.min.js) as peers. It is also written as a global on window.

This makes it hard for experienced JavaScript developers to use. Even though it's written in TypeScript, I have to declare const remixer: any to use the global name, which loses all type information.

As a JavaScript developer, I expect to be able to all my dependencies to be imported with import statements. <script> tags with hardcoded URLs being injected isn't cool - it circumvents my bundler and potentially duplicates dependencies like React that are already in my bundle.

I suspect you tried to expose everything in a single script tag to make life easy for newcomers, but as a newcomer, it's actually made it a lot harder for me to try Remixer. I've probably spent half an hour trying to get it to work, and I'm giving up. Even after making a package.json in the root of my static site folder and running yarn add material-remixer, I'm getting errors about node_modules/material-overlay being mis-served, and I can't even find that folder.

Remixer seems like a really nice way to be able to quickly add a console to a UI. Unfortunately, its workflow is so foreign that I can't use it.

It looks like GitHub supports SVGs:

Can you update the logo in the README to use one? The current one looks awful on high-res screens.

See also material-foundation/material-remixer-ios#61 and material-foundation/material-remixer-android#41

https://github.com/material-foundation/material-remixer-web/