Migrate claycss.com to electric 3 | Fixes #617

package.json

@@ -15,7 +15,7 @@
     "soy": "lerna run soy",
     "start": "http-server . -p 4000",
     "test": "npm run build && npm run jest && npm run a11y",
-    "electric": "npm run soy && npm run compile && cd packages/claycss.com && el",
+    "electric": "npm run soy && npm run compile && cd packages/claycss.com && ../../node_modules/electric-cli/bin/electric.js",
     "web": "npm run electric -- run",
     "deploy": "npm run electric -- deploy"
   },

packages/clay-alert/src/ClayAlertBase.js

@@ -4,6 +4,7 @@ import Component from 'metal-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
+import {isServerSide} from 'metal';
 
 import templates from './ClayAlertBase.soy.js';
 
@@ -22,6 +23,10 @@ class ClayAlertBase extends Component {
 	 * @inheritDoc
 	 */
 	rendered() {
+		if (isServerSide()) {
+			return;
+		}
+
 		if (
 			this.autoClose &&
 			(this.type === 'stripe' || this.type === 'toast')

packages/clay-charts/src/ChartBase.js

@@ -1,5 +1,6 @@
 import {bb, d3} from 'billboard.js';
 import {Config} from 'metal-state';
+import {isServerSide} from 'metal';
 import types from './utils/types';
 
 const PROP_NAME_MAP = {
@@ -70,6 +71,10 @@ const ChartBase = {
 	 * @inheritDoc
 	 */
 	attached() {
+		if (isServerSide()) {
+			return;
+		}
+
 		const config = this._constructChartConfig();
 
 		this.bbChart = bb.generate(config);
@@ -85,6 +90,19 @@ const ChartBase = {
 		this._loading = false;
 	},
 
+	/**
+	 * @inheritDoc
+	 */
+	disposed() {
+		if (isServerSide()) {
+			return;
+		}
+
+		if (this.bbChart) {
+			this.bbChart.destroy();
+		}
+	},
+
 	/**
 	 * @inheritDoc
 	 */

packages/clay-charts/src/Geomap.js

@@ -1,6 +1,7 @@
 import Component from 'metal-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
+import {isServerSide} from 'metal';
 import * as d3 from 'd3';
 
 import templates from './Geomap.soy.js';
@@ -13,6 +14,10 @@ class Geomap extends Component {
 	 * @inheritDoc
 	 */
 	attached() {
+		if (isServerSide()) {
+			return;
+		}
+
 		const w =
 			typeof this._width === 'string' ? this._width : `${this._width}px`;
 		const h =
@@ -50,6 +55,19 @@ class Geomap extends Component {
 		d3.json(this.data, this._onDataLoad.bind(this));
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	disposed() {
+		if (isServerSide()) {
+			return;
+		}
+
+		if (this.svg) {
+			this.svg.remove();
+		}
+	}
+
 	/**
 	 * Fill function
 	 * @param {Object} d

packages/clay-component/src/ClayComponent.js

@@ -1,6 +1,7 @@
 import Component from 'metal-component';
 import {Config} from 'metal-state';
 import {domData} from 'metal-dom';
+import {isServerSide} from 'metal';
 
 /**
  * Clay Component.
@@ -12,6 +13,10 @@ class ClayComponent extends Component {
 	attached() {
 		super.attached();
 
+		if (isServerSide()) {
+			return;
+		}
+
 		let getAttribute = this.element.getAttribute.bind(this.element);
 
 		this.element.getAttribute = attributeName => {

packages/claycss.com/package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "concurrently": "^3.5.0",
     "countries-list": "^2.0.0",
+    "electric-cli": "^3.0.1",
     "electric-quartz-components": "alpha",
     "gulp": "^3.9.1",
     "gulp-sass": "^3.1.0",

packages/claycss.com/src/components/DocsList.soy

@@ -1,9 +1,10 @@
 {namespace DocsList}
 
 /**
- * @param section
  */
 {template .render}
+	{@param section: ?}
+
 	{if $section.children}
 		<div class="docs-list row">
 			{foreach $childId in $section.childIds}
@@ -22,9 +23,10 @@
 {/template}
 
 /**
- * @param page
  */
 {template .anchor}
+	{@param page: ?}
+
 	<div class="docs-item">
 		<a href="{$page.url}">
 			<span>{$page.title}</span>

packages/claycss.com/src/components/MainNavigation.js

@@ -4,7 +4,7 @@ import Component from 'metal-component';
 import dom from 'metal-dom';
 import Soy from 'metal-soy';
 
-import templates from './MainNavigation.soy';
+import templates from './MainNavigation.soy.js';
 
 class MainNavigation extends Component {
 	handleCollapseClick_(event) {

packages/claycss.com/src/components/MainNavigation.soy

@@ -1,11 +1,12 @@
 {namespace MainNavigation}
 
 /**
- * @param section
- * @param? currentDepth
- * @param? depth
  */
 {template .render}
+	{@param section: ?}
+	{@param? currentDepth: number}
+	{@param? depth: number}
+
 	{let $localCurrentDepth: $currentDepth ?: 0 /}
 
 	{if $section.children}
@@ -34,9 +35,10 @@
 {/template}
 
 /**
- * @param page
  */
 {template .anchor}
+	{@param page: ?}
+
 	{if $page.icon}
 		<svg class="clay-icon icon-monospaced">
 			<use xlink:href="/images/icons/lexicon-site-icons.svg#{$page.icon}" />

packages/claycss.com/src/components/Sidebar.js

@@ -1,13 +1,18 @@
 'use strict';
 
+import {isServerSide} from 'metal';
 import Component from 'metal-component';
 import Soy from 'metal-soy';
 import Toggler from 'metal-toggler';
 
-import templates from './Sidebar.soy';
+import templates from './Sidebar.soy.js';
 
 class Sidebar extends Component {
 	attached() {
+		if (isServerSide()) {
+			return;
+		}
+
 		Toggler.CSS_EXPANDED = 'open';
 
 	    this._toggler = new Toggler({
@@ -17,6 +22,10 @@ class Sidebar extends Component {
 	}
 
 	disposed() {
+		if (isServerSide()) {
+			return;
+		}
+
 		this._toggler.dispose();
 	}
 

packages/claycss.com/src/components/Sidebar.soy

@@ -1,10 +1,11 @@
 {namespace Sidebar}
 
 /**
- * @param section
- * @param site
  */
 {template .render}
+	{@param section: ?}
+	{@param site: ?}
+
 	<div>
 		<div class="navbar navbar-mobile navbar-expand-lg navbar-header">
 			<a class="navbar-brand d-flex" href="/">

packages/claycss.com/src/layouts/base.soy

@@ -1,51 +1,51 @@
 {namespace base}
 
 /**
- * @param content
- * @param page
- * @param serialized
- * @param site
  */
 {template .render private="true"}
-<!DOCTYPE html>
-<html lang="en" class="{$page.title}">
-	<head>
-		<meta charset="UTF-8">
-		<meta content="minimum-scale=1.0, width=device-width" name="viewport">
-		<meta name="description" content="{$page.description ?: ''}">
+	{@param content: ?}
+	{@param page: ?}
+	{@param serialized: ?}
+	{@param site: ?}
 
-		<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="16x16 32x32" />
+	<html lang="en" class="{$page.title}">
+		<head>
+			<meta charset="UTF-8">
+			<meta content="minimum-scale=1.0, width=device-width" name="viewport">
+			<meta name="description" content="{$page.description ?: ''}">
 
-		<title>{$page.title} - {$site.title}</title>
+			<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="16x16 32x32" />
 
-		<!-- inject:css -->
-		<!-- endinject -->
+			<title>{$page.title} - {$site.title}</title>
 
-		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet">
+			<!-- inject:css -->
+			<!-- endinject -->
 
-		<script src="/scripts/jquery.min.js"></script>
-		<script src="/scripts/popper.js"></script>
+			<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet">
 
-		<!-- inject:js -->
-		<!-- endinject -->
+			<script src="/scripts/jquery.min.js"></script>
+			<script src="/scripts/popper.js"></script>
 
-		<script>svg4everybody();</script>
+			<!-- inject:js -->
+			<!-- endinject -->
 
-		<link id="mainCssLink" rel="stylesheet" href="/styles/main.css">
-	</head>
-	<body data-senna>
-		<div data-senna-surface id="wrapper">
-			<div class="senna-loading-bar"></div>
+			<script>svg4everybody();</script>
 
-			<!-- inject:metal:js -->
-				<div>
-					{$content}
-				</div>
-			<!-- endinject -->
-		</div>
+			<link id="mainCssLink" rel="stylesheet" href="/styles/main.css">
+		</head>
+		<body data-senna>
+			<div data-senna-surface id="wrapper">
+				<div class="senna-loading-bar"></div>
 
-		<!-- inject:vendor:js -->
-		<!-- endinject -->
-	</body>
-</html>
+				<!-- inject:metal:js -->
+					<div>
+						{$content}
+					</div>
+				<!-- endinject -->
+			</div>
+
+			<!-- inject:vendor:js -->
+			<!-- endinject -->
+		</body>
+	</html>
 {/template}

packages/claycss.com/src/layouts/guide.soy

@@ -1,10 +1,11 @@
 {namespace guide}
 
 /**
- * @param page
- * @param site
  */
 {template .render}
+	{@param page: ?}
+	{@param site: ?}
+
 	{call main.render data="all"}
 		{param elementClasses: 'docs' /}
 		{param content kind="html"}
@@ -18,10 +19,11 @@
 {/template}
 
 /**
- * @param page
- * @param content
  */
 {template .guide}
+	{@param page: ?}
+	{@param content: ?}
+
 	<div class="sidebar-offset">
 		<header>
 			<div class="clay-site-container container-fluid">