Add basic routing skeleton with cycle.js and jsx

sarimarton · sarimarton · commit b6ddb7dba944 · 2018-10-23T10:22:44.000+02:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": "58"
+        },
+        "useBuiltIns": "entry"
+      }
+    ]
+  ],
+  "plugins": [
+    "syntax-jsx",
+    ["transform-react-jsx", {"pragma": "Snabbdom.createElement"}]
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,10 +21,24 @@
   },
   "homepage": "https://github.com/sarimarton/dazn-assignment-cyclejs#readme",
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@types/history": "^4.7.2",
+    "babel-loader": "^8.0.4",
     "clean-webpack-plugin": "^0.1.19",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.22.0",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.9"
+  },
+  "dependencies": {
+    "@cycle/dom": "^22.0.0",
+    "@cycle/history": "^7.0.0",
+    "@cycle/run": "^5.1.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "cyclic-router": "^5.1.7",
+    "snabbdom-pragma": "^2.7.0",
+    "switch-path": "^1.2.0",
+    "xstream": "^11.7.0"
   }
 }
diff --git a/src/home/home.js b/src/home/home.js
@@ -0,0 +1,17 @@
+import xs from 'xstream';
+import { run } from '@cycle/run';
+import { makeDOMDriver, div, input, p } from '@cycle/dom';
+import Snabbdom from 'snabbdom-pragma';
+import { routerify } from 'cyclic-router';
+import { makeHistoryDriver } from '@cycle/history';
+import switchPath from 'switch-path';
+
+export function HomeComponent(sources) {
+  return {
+    DOM: xs.of(
+      <div>
+        Home Page
+      </div>
+    )
+  };
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,42 @@
+import xs from 'xstream';
+import { run } from '@cycle/run';
+import { makeDOMDriver, div, input, p } from '@cycle/dom';
+import Snabbdom from 'snabbdom-pragma';
+import { routerify } from 'cyclic-router';
+import { makeHistoryDriver } from '@cycle/history';
+import switchPath from 'switch-path';
+
+import { HomeComponent } from './home/home.js';
+import { ItemComponent } from './item/item.js';
+
+function main(sources) {
+  const homePageClick$ = sources.DOM.select('.home').events('click');
+
+  const match$ = sources.router.define({
+    '/': HomeComponent,
+    '/item': ItemComponent
+  });
+
+  const page$ = match$.map(
+    ({ path, value: page }) =>
+      page({
+        ...sources,
+        router: sources.router.path(path)
+      })
+  );
+
+  return {
+    DOM: page$.map(c => c.DOM).flatten(),
+    router: xs.merge(
+      homePageClick$.mapTo('/')
+    )
+  };
+}
+
+const mainWithRouting = routerify(main, switchPath);
+const drivers = {
+  DOM: makeDOMDriver('#app'),
+  history: makeHistoryDriver()
+};
+
+run(mainWithRouting, drivers);
diff --git a/src/item/item.js b/src/item/item.js
@@ -0,0 +1,19 @@
+import xs from 'xstream';
+import { run } from '@cycle/run';
+import { makeDOMDriver, div, input, p } from '@cycle/dom';
+import Snabbdom from 'snabbdom-pragma';
+import { routerify } from 'cyclic-router';
+import { makeHistoryDriver } from '@cycle/history';
+import switchPath from 'switch-path';
+
+export function ItemComponent(sources) {
+  return {
+    DOM: xs.of(
+      <div>
+        <button className={'home'}>Go To Home</button>
+        <br />
+        Item
+      </div>
+    )
+  };
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -8,14 +8,27 @@ module.exports = {
   },
   devtool: 'inline-source-map',
   devServer: {
-    contentBase: './dist'
+    contentBase: './dist',
+    historyApiFallback: true
   },
   plugins: [
     new CleanWebpackPlugin(['dist']),
     new HtmlWebpackPlugin({
-      title: 'Development'
+      title: 'A simple TMDb UI',
+      template: './src/index.html'
     })
   ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      }
+    ]
+  },
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
