Intergrate Custom Element

shystruk · Aug 7, 2018 · 67cd442 · 67cd442
1 parent 53026a2
commit 67cd442
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 10 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,9 @@
 {
-  "presets": ["react", "env", "stage-0"],
+  "presets": [
+    "react", "env", "stage-0"
+  ],
   "plugins": [
-    "transform-async-to-generator"
+    "transform-async-to-generator",
+    "transform-custom-element-classes"
   ]
 }
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -20,6 +20,12 @@ module.exports = function(grunt) {
                 file: './build/vendor.js',
                 cleanup: true
             },
+            web_components_vendorJs: {
+                replace: ['./index.html'],
+                replacement: 'web_components_vendor.js',
+                file: './build/web_components_vendor.js',
+                cleanup: true
+            },
             indexJs: {
                 replace: ['./index.html'],
                 replacement: 'index.js',

diff --git a/app/index.html b/app/index.html
@@ -19,6 +19,7 @@
 
     <!-- build:js -->
     <script type="text/javascript" src="build/vendor.js"></script>
+    <script type="text/javascript" src="build/web_components_vendor.js"></script>
     <script type="text/javascript" src="build/libs.js"></script>
     <script type="text/javascript" src="build/index.js"></script>
     <!-- endbuild -->

diff --git a/app/pages/App.jsx b/app/pages/App.jsx
@@ -3,6 +3,8 @@ import { Route, Link, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import store from './../store';
+import 'notification-service-js';
+import CustomEvent from 'custom-event-js';
 
 import noInternet from 'no-internet';
 import isEmpty from 'lodash/isEmpty';
@@ -41,6 +43,11 @@ class App extends React.Component {
                 store.dispatch(removeNotification());
             }
         }});
+
+        CustomEvent.DISPATCH('WEB_COMP_SHOW_NOTIFICATION', {
+            type: 'success',
+            message: 'Welcome! I\'m notification-service based on Custom Element'
+        });
     }
 
     render() {
@@ -65,6 +72,7 @@ class App extends React.Component {
                 <Alert alert={alertStore} />
 
                 <Notification notification={notificationStore} />
+                <notification-service></notification-service>
             </div>
         );
     }

diff --git a/app/pages/Home/Home.jsx b/app/pages/Home/Home.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import store from './../../store';
-
 import { removeWeatherFromList } from './../../actions/weather_list';
-
 import Open_Weather_Search from './../../components/Open_Weather_Search/Open_Weather_Search';
 import Weather_View from './../../components/dumb/Weather_View';
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -31,6 +31,7 @@ gulp.task('html-build', function() {
             'css': `${config[TARGET].assetHost}/build/styles.min.css`,
             'js': [
                 `${config[TARGET].assetHost}/build/vendor.js`,
+                `${config[TARGET].assetHost}/build/web_components_vendor.js`,
                 `${config[TARGET].assetHost}/build/libs.js`,
                 `${config[TARGET].assetHost}/build/index.js`
             ]
@@ -52,6 +53,17 @@ gulp.task('jquery', function() {
     .pipe(gulp.dest(config.PATHS.build));
 });
 
+// Web Components vendor
+gulp.task('web_components_vendor', function() {
+    return gulp.src([
+        'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js'
+    ])
+    .pipe(concat('web_components_vendor.js'))
+    .pipe(uglify())
+    .on('error', err => { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
+    .pipe(gulp.dest(config.PATHS.build));
+});
+
 // CSS
 gulp.task('css', function () {
     return gulp.src(config.PATHS.sass_index)
@@ -70,6 +82,6 @@ gulp.task('watch', function() {
     gulp.watch(config.PATHS.external, ['jquery']);
 });
 
-gulp.task('default', ['html-build', 'watch', 'css', 'jquery']);
-gulp.task('prod', ['html-build', 'css', 'jquery']);
+gulp.task('default', ['html-build', 'watch', 'css', 'jquery', 'web_components_vendor']);
+gulp.task('prod', ['html-build', 'css', 'jquery', 'web_components_vendor']);
 gulp.task('clean-build', ['clean']);
diff --git a/package.json b/package.json
@@ -67,17 +67,20 @@
     }
   },
   "dependencies": {
+    "@webcomponents/webcomponentsjs": "^2.0.4",
     "chalk": "^1.1.3",
     "commander": "^2.12.2",
     "cors": "^2.8.4",
     "cross-spawn": "^5.1.0",
+    "custom-event-js": "^0.1.2",
     "express": "^4.16.2",
     "famulus": "^1.2.3",
     "intl": "^1.2.5",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "no-internet": "^1.3.0",
     "node-fetch": "^1.7.3",
+    "notification-service-js": "^0.2.2",
     "publish-subscribe-js": "^1.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -93,13 +96,15 @@
   },
   "devDependencies": {
     "autoprefixer": "^7.1.3",
-    "babel-core": "^6.25.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.0.2",
     "babel-jest": "^21.2.0",
-    "babel-loader": "^7.1.0",
+    "babel-loader": "^7.1.5",
     "babel-plugin-transform-async-to-generator": "^6.24.1",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "codecov.io": "^0.1.6",

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,7 +7,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const TARGET = process.env.npm_lifecycle_event;
 const PATHS = {
     app: path.join(__dirname, 'app'),
-    build: path.join(__dirname, 'build'),
+    build: path.join(__dirname, 'build')
 };
 
 const common = {