Ensures Typekit works on server-rendered and non-server-rendered applications.

Author: coreyleelarson

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["latest", "react"],
+  "presets": ["env", "react"],
 }

.eslintrc

@@ -1,15 +1,17 @@
 {
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "env": {
-    "mocha": true,
-    "node": true
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
   },
-  "rules": {
-    "global-require": 0,
-    "import/no-extraneous-dependencies": 0,
-    "no-unused-vars": 1,
-    "react/jsx-filename-extension": 0,
-    "react/forbid-prop-types": 0
+  "plugins": [
+    "react"
+  ],
+  "env": {
+    "browser": true,
+    "mocha": true  
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-typekit",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React component that generates Typekit script",
   "author": "Corey Larson <[email protected]> (http://github.com/coreyleelarson)",
   "license": "MIT",
@@ -21,12 +21,12 @@
     "clean": "rimraf lib",
     "lint": "eslint ./src/**",
     "prepublish": "npm run clean && npm run build",
-    "test": "mocha ./src/**/*.spec.js --compilers js:babel-register"
+    "test": "mocha --require test/setup.js ./src/**/*.spec.js --compilers js:babel-register"
   },
   "devDependencies": {
     "babel-cli": "^6.18.0",
     "babel-eslint": "^7.1.1",
-    "babel-preset-latest": "^6.16.0",
+    "babel-preset-env": "^1.2.1",
     "babel-preset-react": "^6.16.0",
     "babel-register": "^6.18.0",
     "chai": "^3.5.0",
@@ -35,7 +35,9 @@
     "eslint-config-airbnb": "^13.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.8.0",
+    "eslint-plugin-react": "^6.10.0",
+    "jsdom": "^9.11.0",
+    "lodash": "^4.17.4",
     "mocha": "^3.2.0",
     "react": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",

src/Typekit.js

@@ -1,11 +1,23 @@
-/* eslint react/no-danger: 0 */
-import React, { PropTypes } from 'react';
+import { Component, PropTypes } from 'react';
 import buildScript from './utilities/buildScript';
 
-const Typekit = ({ kitId }) => {
-  const script = buildScript(kitId);
-  return kitId ? (<script dangerouslySetInnerHTML={{ __html: script }} />) : false;
-};
+class Typekit extends Component {
+  componentDidMount() {
+    const is_rendered = document.querySelectorAll('.react-typekit').length > 0;
+    if (!is_rendered) {
+      const { kitId } = this.props;
+      const script = document.createElement('script');
+      script.className = 'react-typekit';
+      script.async = true;
+      script.innerHTML = buildScript(kitId);
+      document.body.appendChild(script);
+    }
+  }
+
+  render() {
+    return false;
+  }
+}
 
 Typekit.propTypes = {
   kitId: PropTypes.string,

src/Typekit.spec.js

@@ -1,19 +1,20 @@
-/* eslint no-underscore-dangle: 0 */
+import { filter } from 'lodash';
 import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import Typekit from './Typekit';
 import buildScript from './utilities/buildScript';
 
 describe('<Typekit />', () => {
   it('should output typekit script when kitId prop is present', () => {
     const kitId = 'abc123';
-    const wrapper = shallow(<Typekit kitId={kitId} />);
-    expect(wrapper.find('script').node.props.dangerouslySetInnerHTML.__html).to.equal(buildScript(kitId));
+    mount(<Typekit kitId={kitId} />);
+    const matches = filter(document.querySelectorAll('script'), (script) => script.innerHTML === buildScript(kitId));
+    expect(matches).to.have.length(1);
   });
 
   it('should output nothing when kitId prop is not present', () => {
-    const wrapper = shallow(<Typekit />);
+    const wrapper = mount(<Typekit />);
     expect(wrapper.html()).to.equal(null);
   });
 });

test/setup.js

@@ -0,0 +1,13 @@
+import { jsdom } from 'jsdom';
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};