kuy

'use strict';

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 5013 });

wss.on('connection', function connection(ws) {
  ws.on('message', function onMessage(message) {
    console.log(message);
  });
});

kuy

Steps to move from webpack v1 to v2

Target project: https://github.com/kuy/redux-saga-examples

• webpack@2.1.0-beta.25
• webpack-dev-server@2.1.0-beta.5

I updated above libraries manually.

kuy

kuyMBA% npm test

> lifegame-redux@ test /Users/kodama/Work/lifegame-redux
> mocha --compilers js:babel-register test/unit/utils.js

/Users/kodama/Work/lifegame-redux/test/unit/utils.js:4
import * as utils from '../../src/common/utils';
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)

kuy

import と require() の違い

CommonJSのモジュール内でrequire()を使ってESMを読み込むこと、 ESMのモジュール内からimportを使ってCommonJSを読み込むことは可能だけど、 CommonJSの中からimportを使うことはできない。 ESMの中であれば例えば import { require } from 'nodejs' とかやれば可能になる。

• CommonJSのモジュール内で require() を使ってESMを読み込むことは可能
• ESMのモジュール内から import を使ってCommonJSを読み込むことは可能
• ESMのモジュール内から require() を使うことは不可能ではない

kuy

redux-saga における Saga とは違うんだけど、興味あるので調べる。

資料

• Clarifying the Saga pattern
• Voice Application Call Flows: State Machine, Workflow, or Rules Engine
• Kangaroo Transactions
• Example of Sagas

ワークフローとステートマシン

kuy

import { put } from 'redux-saga/effects';
import { router, createHashHistory } from 'redux-saga-router';
import { changePage } from '../actions';

import Home from '../pages/home';
import SeriesNew from '../pages/series-new';

const history = createHashHistory();

const routes = {

kuy

class EditPage extends React.Component {
  handleUpdate() {
    const form = ...;
    this.props.dispatch(requestUpdate(form));
  }
  
  // ...
  
  render() {
    return <div>

kuy

class EditPage extends React.Component {
  handleUpdate() {
    const form = ...;
    this.props.dispatch(requestUpdate(form));
    this.props.dispatch(change('/posts/update'));
  }
  
  // ...
  
  render() {

kuy

// Borrowed from react-router exmample "Auth Flow"
// https://github.com/ReactTraining/react-router/tree/master/examples/auth-flow

render((
  <Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
      <Route path="logout" component={Logout} />
      <Route path="admin" onEnter={requireAuth}> // Route hook
        <Route path="about" component={About} onEnter={...} /> // Component hook

kuy

render((
  <Router history={...}>
    <Route path="/" component={App}>
      <Route path="A" component={PageA} onEnter={/* E-A */} onLeave={/* L-A */} />
      <Route path="B" component={PageB} onEnter={/* E-B */} onLeave={/* L-B */} />
      <Route path="C" onEnter={/* E-C */} onLeave={/* L-C */} />
    </Route>
  </Router>
), document.getElementById('...'))