Initial Commit

trivago · Oct 25, 2017 · 612a142 · 612a142
commit 612a142
Show file tree

Hide file tree

Showing 11 changed files with 3,566 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,17 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "melody-template",
+  "version": "0.1.0",
+  "description": "Melody starter template",
+  "main": "src/index.js",
+  "repository": "https://github.com/trivago/melody-template",
+  "author": "trivago",
+  "license": "Apache-2.0",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --progress --colors --display-chunks"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.3"
+  },
+  "dependencies": {
+    "melody-component": "^1.0.0",
+    "melody-hoc": "^1.0.0",
+    "melody-idom": "^1.0.0",
+    "melody-loader": "^1.0.0",
+    "melody-parser": "^1.0.0",
+    "melody-plugin-idom": "^1.0.0",
+    "melody-traverse": "^1.0.0",
+    "melody-types": "^1.0.0"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Melody App</title>
+    <link rel="stylesheet" type="text/css" href="/main.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/javascript" src="/main.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/public/main.css b/public/main.css
@@ -0,0 +1,22 @@
+body {
+  background-color: #424383;
+}
+
+.home {
+  text-align: center;
+  color: #fff;
+}
+
+.logo {
+  margin: 20px 0;
+}
+
+.title {
+  padding: 0;
+  margin: 20px 0;
+}
+
+.counter h3 {
+  margin: 0;
+  padding: 10px 0;
+}
diff --git a/src/counter/index.js b/src/counter/index.js
@@ -0,0 +1,50 @@
+import { createComponent, RECEIVE_PROPS } from 'melody-component';
+import { bindEvents } from 'melody-hoc';
+import template from './index.twig';
+
+const initialState = { count: 0 };
+
+const INC = 'INC';
+const DEC = 'DEC';
+
+const increaseCounter = () => ({ type: INC });
+const decreaseCounter = () => ({ type: DEC });
+
+const stateReducer = (state = initialState, action) => {
+  switch(action.type) {
+    case RECEIVE_PROPS:
+      return {
+        ...state,
+        ...action.payload
+      };
+    case INC:
+      return {
+        ...state,
+        count: state.count + 1
+      };
+
+    case DEC:
+      return {
+        ...state,
+        count: state.count - 1
+      };
+  }
+  return state;
+}
+
+const withClickHandlers = bindEvents({
+  incrementButton: {
+    click(event, {dispatch}) {
+      dispatch(increaseCounter());
+    }
+  },
+  decrementButton: {
+    click(event, {dispatch}) {
+      dispatch(decreaseCounter());
+    }
+  }
+});
+
+const component = createComponent(template, stateReducer);
+
+export default withClickHandlers(component);
diff --git a/src/counter/index.twig b/src/counter/index.twig
@@ -0,0 +1,5 @@
+<div class="counter">
+  <h3>Counter: {{ count }}</h3>
+  <button ref="{{ incrementButton }}"> + </button>
+  <button ref="{{ decrementButton }}"> - </button>
+</div>
diff --git a/src/home/index.js b/src/home/index.js
@@ -0,0 +1,4 @@
+import { createComponent } from 'melody-component';
+import template from './index.twig';
+
+export default createComponent(template);
diff --git a/src/home/index.twig b/src/home/index.twig
@@ -0,0 +1,17 @@
+<div class="home">
+    <div class="logo">
+        <svg xmlns="http://www.w3.org/2000/svg" width="270" height="270" viewBox="0 0 270 270">
+            <circle cx="135" cy="135" r="135" fill="#272361"></circle>
+            <path d="M146.14 87.94a45 45 0 0 0-53.24 53.23L48.08 186a9 9 0 1 0 3.38 3l42.79-42.79a45 45 0 0 0 9.34 16l-24.05 24.03a9 9 0 1 0 3.19 3.18l24.05-24.05a45 45 0 0 0 16 9.34l-11.43 11.43a9 9 0 1 0 3.26 3.1l13.18-13.18a45 45 0 0 0 18.35-88.12z" fill="#6eceb2"></path>
+            <circle cx="152.46" cy="100.5" r="13.5" fill="#fff"></circle>
+            <circle cx="150.46" cy="102.5" r="4.5" fill="#272361"></circle>
+            <circle cx="173.96" cy="117" r="9" fill="#fff"></circle>
+            <circle cx="171.96" cy="117" r="3" fill="#272361"></circle>
+            <path d="M140.2 34.39a4.45 4.45 0 0 1 0 6.36 4.62 4.62 0 0 1-6.47 0 4.45 4.45 0 0 1 0-6.36 4.62 4.62 0 0 1 6.47 0zM73.94 62.38a4.45 4.45 0 0 1 0 6.36 4.62 4.62 0 0 1-6.47 0 4.45 4.45 0 0 1 0-6.36 4.62 4.62 0 0 1 6.47 0zM206.45 62.38a4.45 4.45 0 0 1 0 6.36 4.62 4.62 0 0 1-6.47 0 4.45 4.45 0 0 1 0-6.36 4.62 4.62 0 0 1 6.47 0zM234.45 128.64a4.45 4.45 0 0 1 0 6.36 4.62 4.62 0 0 1-6.47 0 4.45 4.45 0 0 1 0-6.36 4.62 4.62 0 0 1 6.47 0zM200 201.62a4.45 4.45 0 0 1 0-6.36 4.62 4.62 0 0 1 6.47 0 4.45 4.45 0 0 1 0 6.36 4.62 4.62 0 0 1-6.47 0z" fill="#6eceb2"></path>
+        </svg>
+    </div>
+    <h1 class="title">
+        {{ message }}
+    </h1>
+    {% mount '../counter' with { count: 5 } %}
+</div>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+import { render } from 'melody-component';
+import home from './home';
+
+const documentRoot = document.getElementById('root');
+render(documentRoot, home, {
+    message: 'Welcome to Melody!'
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,44 @@
+var webpack = require('webpack');
+var path = require('path');
+
+module.exports = {
+    entry: {
+        'main': path.join(__dirname, 'src/index.js')
+    },
+    output: {
+        path: path.join(__dirname, 'public'),
+        filename: '[name].js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        plugins: [require('babel-plugin-transform-object-rest-spread')]
+                    }
+                }
+            },
+            {
+                test: /\.twig$/,
+                use: [
+                    'babel-loader', 
+                    {
+                        loader: 'melody-loader',
+                        options: {
+                            plugins: ['idom']
+                        }
+                    }
+                ]
+            },
+        ]
+    },
+    devServer: {
+      contentBase: path.join(__dirname, 'public'),
+      watchOptions: {
+        ignored: /node_modules/,
+      },
+      overlay: false,
+    }
+};