<commit_before>import { createComponent, mapToProps, observe } from 'frint';
// import { Observable } from 'rxjs';

import {
  incrementCounter,
  decrementCounter
} from '../actions/counter';

const Root = createComponent({
  render() {
    // const codeStyle = {
    //   color: this.props.color,
    //   backgroundColor: this.props.color
    // };

    return (
      <div>
        <h5>Widget: Counter</h5>

        <p>Counter value in <strong>WidgetCounter</strong>: <code>{this.props.counter}</code></p>

        <div>
          <button
            className="button button-primary"
            onClick={() => this.props.incrementCounter()}
          >
            +
          </button>

          <button
            className="button"
            onClick={() => this.props.decrementCounter()}
          >
            -
          </button>
        </div>

        <div>
          <p>Region Props:</p>

          <pre><code>{JSON.stringify(this.props.regionProps, null, 2)}</code></pre>
        </div>

        {/*<p>Color value from <strong>WidgetColor</strong>: <code style={codeStyle}>{this.props.color}</code></p>*/}
      </div>
    );
  }
});

export default observe(function (app) {
  const store = app.get('store');
  const region = app.get('region');

  // map state to this this Component's props
  const state$ = store.getState$()
    .map((state) => {
        return {
          counter: state.counter.value,
        };
      });

  // map Region's props to this Component's props
  const regionProps$ = region.getProps$()
    .map((regionProps) => {
      return {
        regionProps,
      };
    });

  // map dispatchable actions
  // const actions$ = Observable.of({
  //   incrementCounter(...args) { return store.dispatch(incrementCounter(...args)); },
  //   decrementCounter(...args) { return store.dispatch(decrementCounter(...args)); },
  // });

  // merge all props into a single object
  return state$
    .merge(regionProps$)
    // .merge(actions$)
    .scan((props, emitted) => {
      return {
        ...props,
        ...emitted,
      };
    }, {
      // default props to start with
      incrementCounter(...args) { return store.dispatch(incrementCounter(...args)); },
      decrementCounter(...args) { return store.dispatch(decrementCounter(...args)); },
    });
})(Root);<commit_msg>actions<commit_after>import { createComponent, mapToProps, observe } from 'frint';
import { Observable } from 'rxjs';

import {
  incrementCounter,
  decrementCounter
} from '../actions/counter';

const Root = createComponent({
  render() {
    // const codeStyle = {
    //   color: this.props.color,
    //   backgroundColor: this.props.color
    // };

    return (
      <div>
        <h5>Widget: Counter</h5>

        <p>Counter value in <strong>WidgetCounter</strong>: <code>{this.props.counter}</code></p>

        <div>
          <button
            className="button button-primary"
            onClick={() => this.props.incrementCounter()}
          >
            +
          </button>

          <button
            className="button"
            onClick={() => this.props.decrementCounter()}
          >
            -
          </button>
        </div>

        <div>
          <p>Region Props:</p>

          <pre><code>{JSON.stringify(this.props.regionProps, null, 2)}</code></pre>
        </div>

        {/*<p>Color value from <strong>WidgetColor</strong>: <code style={codeStyle}>{this.props.color}</code></p>*/}
      </div>
    );
  }
});

export default observe(function (app) {
  const store = app.get('store');
  const region = app.get('region');

  // map state to this this Component's props
  const state$ = store.getState$()
    .map((state) => {
        return {
          counter: state.counter.value,
        };
      });

  // map Region's props to this Component's props
  const regionProps$ = region.getProps$()
    .map((regionProps) => {
      return {
        regionProps,
      };
    });

  // map dispatchable actions
  const actions$ = Observable.of({
    incrementCounter(...args) {
      return store.dispatch(incrementCounter(...args));
    },
    decrementCounter(...args) {
      return store.dispatch(decrementCounter(...args));
    },
  });

  // merge all props into a single object
  return state$
    .merge(regionProps$)
    .merge(actions$)
    .scan((props, emitted) => {
      return {
        ...props,
        ...emitted,
      };
    });
})(Root);
{'fraction_non_alphanumeric': 0.16636568848758465, 'fraction_numerical': 0.0013544018058690745, 'mean_word_length': 2.0664359861591697, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 73, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7245306', 'n_tokens_mistral': 1314, 'n_tokens_neox': 1294, 'n_words': 264}