Finished server rendering of template using absurd, css next

package.json

@@ -27,6 +27,8 @@
   "author": "unimonkiez",
   "license": "ISC",
   "devDependencies": {
+    "absurd": "^0.3.6",
+    "absurd-loader": "0.0.2",
     "babel-eslint": "^6.0.2",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
@@ -39,6 +41,7 @@
     "json-loader": "^0.5.4",
     "node-sass": "^3.4.2",
     "path": "^0.12.7",
+    "raw-loader": "^0.5.1",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",

src/categories-icons/apple.css

@@ -37,9 +37,6 @@
 .cat-16:before {
     content: "\e905";
 }
-.cat-128:before {
-    content: "\e906";
-}
 .cat-64:before {
     content: "\e907";
 }

src/category-order.js

@@ -1,12 +1,11 @@
-import { CATEGORY } from './constant';
+const CATEGORY = require('./constant').CATEGORY;
 
-export default [
+module.exports = [
   CATEGORY.PEOPLE,
   CATEGORY.NATURE,
   CATEGORY.ACTIVITY,
   CATEGORY.PLACES,
   CATEGORY.OBJECTS,
   CATEGORY.SYMBOLS,
-  CATEGORY.FLAGS,
-  CATEGORY.OTHER
+  CATEGORY.FLAGS
 ];

src/constant.js

@@ -1,25 +1,26 @@
-export const IMAGE_SET = {
+const IMAGE_SET = {
   APPLE: 0,
   GOOGLE: 1,
   TWITTER: 2,
   EMOJIONE: 4
 };
 
-export const SIZE = {
+const SIZE = {
   16: 0,
   20: 1,
   32: 2,
   64: 4
 };
 
-export const CATEGORY = {
+const CATEGORY = {
   ACTIVITY: 0,
   FLAGS: 1,
   FOODS: 2,
   NATURE: 4,
   OBJECTS: 8,
   PEOPLE: 16,
   PLACES: 32,
-  SYMBOLS: 64,
-  OTHER: 128
+  SYMBOLS: 64
 };
+
+module.exports = { IMAGE_SET, SIZE, CATEGORY };

src/create-panel.js

@@ -1,10 +1,9 @@
-import getPanelTemplate from './get-panel-template';
+import panelTemplate from './template.ahtml';
 import setEventsForTemplate from './set-events-for-template';
 
 export default ({ imageSet, size, animationDuration } = {}) => {
   const panelEl = document.createElement('div');
   panelEl.setAttribute('class', 'ep-container');
-  const panelTemplate = getPanelTemplate({ imageSet, size });
   panelEl.innerHTML = panelTemplate;
   setEventsForTemplate(panelEl, { animationDuration });
 

src/emoji.data.js

@@ -0,0 +1,14 @@
+const emojiData = require('emoji-data');
+const categoryDataMap = require('./map').categoryDataMap;
+
+const sortedEmojiData = emojiData
+  .sort((emojiA, emojiB) => emojiA['sort_order'] - emojiB['sort_order'])
+  .reduce((obj, emoji, index) => {
+    const category = categoryDataMap[emoji.category];
+    const categoryArray = obj[category] || [];
+    return Object.assign(obj, {
+      [category]:  categoryArray.concat(Object.assign(emoji, { index }))
+    });
+  }, {});
+
+module.exports = sortedEmojiData;

src/map.js

@@ -1,32 +1,35 @@
-import { IMAGE_SET, SIZE, CATEGORY } from './constant';
+const Constant = require('./constant');
+const IMAGE_SET = Constant.IMAGE_SET;
+const SIZE = Constant.SIZE;
+const CATEGORY = Constant.CATEGORY;
 
-export const categoryDataMap = {
+const categoryDataMap = {
   Activity: CATEGORY.ACTIVITY,
   Flags: CATEGORY.FLAGS,
   Foods: CATEGORY.FOODS,
   Nature: CATEGORY.NATURE,
   Objects: CATEGORY.OBJECTS,
   People: CATEGORY.PEOPLE,
   Places: CATEGORY.PLACES,
-  Symbols: CATEGORY.SYMBOLS,
-  null: CATEGORY.OTHER
+  Symbols: CATEGORY.SYMBOLS
 };
 
-export const categoryNameMap = {
+const categoryNameMap = {
   [CATEGORY.ACTIVITY]: 'ACTIVITY',
   [CATEGORY.FLAGS]: 'FLAGS',
   [CATEGORY.FOODS]: 'FOOD & DRINK',
   [CATEGORY.NATURE]: 'ANIMALS & NATURE',
   [CATEGORY.OBJECTS]: 'OBJECTS',
   [CATEGORY.PEOPLE]: 'SMILEYS & PEOPLE',
   [CATEGORY.PLACES]: 'TRAVEL & PLACES',
-  [CATEGORY.SYMBOLS]: 'SYMBOLS',
-  [CATEGORY.OTHER]: 'OTHER'
+  [CATEGORY.SYMBOLS]: 'SYMBOLS'
 };
 
-export const sizeMap = {
+const sizeMap = {
   '0': 16,
   '1': 20,
   '2': 32,
   '4': 64
 };
+
+module.exports = { categoryDataMap, categoryNameMap, sizeMap };

src/template.ahtml.js

@@ -0,0 +1,72 @@
+const emojiData = require('./emoji.data');
+const categoryOrder = require('./category-order');
+const Constant = require('./constant');
+const Map = require('./map');
+const IMAGE_SET = Constant.IMAGE_SET;
+const SIZE = Constant.SIZE;
+const sizeMap = Map.sizeMap;
+const categoryDataMap = Map.categoryDataMap;
+const categoryNameMap = Map.categoryNameMap;
+
+const getBoolNameByImageSet = imageSet => {
+  switch (imageSet) {
+  case IMAGE_SET.APPLE:
+    return 'has_img_apple';
+  case IMAGE_SET.GOOGLE:
+    return 'has_img_google';
+  case IMAGE_SET.TWITTER:
+    return 'has_img_twitter';
+  case IMAGE_SET.EMOJIONE:
+    return 'has_img_emojione';
+  }
+};
+const getImageSetClassName = imageSet => {
+  switch (imageSet) {
+  case IMAGE_SET.APPLE:
+    return 'ep-a';
+  case IMAGE_SET.GOOGLE:
+    return 'ep-g';
+  case IMAGE_SET.TWITTER:
+    return 'ep-t';
+  case IMAGE_SET.EMOJIONE:
+    return 'ep-e';
+  }
+};
+
+const getSizeKeyByValue = size => {
+  return sizeMap[size];
+};
+
+const getEmojiClassName = emoji => {
+  const className = Object.keys(IMAGE_SET).reduce((_className, imageSetKey) => {
+    const imageSet = IMAGE_SET[imageSetKey];
+    const boolNameForImageSet = getBoolNameByImageSet(imageSet);
+    if (emoji[boolNameForImageSet]) {
+      const imageSetClassName = getImageSetClassName(imageSet);
+      return _className + ` ${imageSetClassName}`;
+    } else {
+      return _className;
+    }
+  }, '');
+  return className;
+};
+
+module.exports = api => {
+  api.morph('html').add({
+    'div[class="ep"]': {
+      'div[class="ep-categories"]': categoryOrder.reduce((obj, category) => Object.assign(obj, {
+        [`span[class="ep-c" data-category-id="${category}"]`]: {
+          [`span[class="cat cat-${category}"]`]: '',
+          'span[class="ep-c-text"]': categoryNameMap[category]
+        }
+      }), {}),
+      'div[class="ep-emojies"]': categoryOrder.reduce((catObj, category) => Object.assign(catObj, {
+        [`div[class="ep-emojies-c" data-category-id="${category}"]`]: {
+          'div': emojiData[category].reduce((emojiObj, emoji) => Object.assign(emojiObj, {
+            [`span[class="ep-emoji${getEmojiClassName(emoji)}" data-index="${emoji.index}"]`]: ''
+          }), {})
+        }
+      }), {})
+    }
+  });
+};

webpack.config.js

@@ -54,15 +54,19 @@ module.exports = {
     ],
     loaders: [
       {
-        test: /\.js$/,
+        test: /\.ahtml.js$/,
+        include: [
+          path.resolve(__dirname, 'src')
+        ],
+        loader: 'raw!absurd'
+      },
+      {
+        test: name => name.match(/\.js$/) && !name.match(/(\.ahtml|\.acss).js$/),
         include: [
           path.resolve(__dirname, 'src'),
           path.resolve(__dirname, 'example')
         ],
-        loader: 'babel',
-        query: {
-          presets: ['es2015']
-        }
+        loader: 'babel?presets[]=es2015'
       },
       {
         test: /\.scss$/,
@@ -72,6 +76,13 @@ module.exports = {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract('style', 'css')
       },
+      {
+        test: /\.acss.js$/,
+        include: [
+          path.resolve(__dirname, 'src')
+        ],
+        loader: ExtractTextPlugin.extract('style', 'css!absurd')
+      },
       {
         test: /\.(png|ttf)$/,
         loader: 'url?limit=20000&name=./asset/[hash].[ext]'