fix snippet imports

.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "es2015",
+      {
+        "modules": false
+      }
+    ],
+    "stage-0",
+    "react"
+  ],
+  "env": {
+    "commonjs": {
+      "plugins": [
+        "transform-es2015-modules-commonjs"
+      ]
+    }
+  }
+}

.prettierrc

@@ -1,11 +1,7 @@
 {
-  "trailingComma": "es5",
   "singleQuote": true,
-  "bracketSpacing": true,
+  "trailingComma": "all",
+  "bracketSpacing": false,
   "jsxBracketSameLine": true,
-  "parser": "babylon",
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false
+  "printWidth": 80
 }

package.json

@@ -6,7 +6,10 @@
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build:es": "babel -d es src --ignore __tests__",
+    "build:lib": "cross-env BABEL_ENV=commonjs babel -d lib src --ignore __tests__",
+    "build": "yarn build:es && yarn build:lib",
+    "release": "yarn build && npm publish"
   },
   "repository": {
     "type": "git",
@@ -26,14 +29,27 @@
     "url": "https://github.com/OneGraph/graphiql-code-exporter/issues"
   },
   "homepage": "https://github.com/OneGraph/graphiql-code-exporter#readme",
+  "peerDependencies": {
+    "react": "^15.6.0 || ^16.0.0"
+  },
   "dependencies": {
     "@onegraph/graphiql": "^0.11.12-1",
     "antd": "^3.12.4",
     "copy-to-clipboard": "^3.0.8",
     "graphql": "^14.1.1",
     "highlight.js": "^9.13.1",
     "prettier": "^1.16.0",
-    "react": "^16.7.0",
     "reason": "^3.3.4"
+  },
+  "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-cli": "^6.6.0",
+    "babel-core": "^6.6.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "cross-env": "^5.2.0",
+    "react": "^16.7.0"
   }
 }

src/index.js

@@ -1,2 +1,2 @@
-import CodeExporter from './CodeExporter'
-export default CodeExporter
+import CodeExporter from './CodeExporter';
+export default CodeExporter;

src/snippets/index.js

@@ -1,18 +1,18 @@
 // javascript
-import jsFetch from './javascript/fetch'
-import jsReactApollo from './javascript/reactApollo'
-import jsReactHooks from './javascript/reactHooks'
+import jsFetch from './javascript/fetch';
+import jsReactApollo from './javascript/reactApollo';
+import jsReactHooks from './javascript/reactHooks';
 
 // reason
-import reasonFetch from './reason/fetch'
-import reasonApollo from './reason/apollo'
+import reasonFetch from './reason/fetch';
+import reasonApollo from './reason/apollo';
 
 // ruby
-import rubyGraphqlClient from './ruby/graphqlClient'
+import rubyGraphqlClient from './ruby/graphqlClient';
 
 // python
-import pythonGraphqlclient from './python/graphqlclient'
-import pythonSgqlc from './python/sgqlc'
+import pythonGraphqlclient from './python/graphqlclient';
+import pythonSgqlc from './python/sgqlc';
 
 export default [
   jsFetch,
@@ -23,4 +23,4 @@ export default [
   rubyGraphqlClient,
   pythonGraphqlclient,
   pythonSgqlc,
-]
+];

src/snippets/javascript/fetch.js

@@ -1,12 +1,12 @@
-import formatJavaScript from '../utils/formatJavaScript'
-import commentsFactory from '../utils/commentsFactory'
+import formatJavaScript from '../../utils/formatJavaScript';
+import commentsFactory from '../../utils/commentsFactory';
 
 const comments = {
   nodeFetch: `Node doesn't implement fetch so we have to import it`,
   graphqlError: `handle OneGraph errors`,
   graphqlData: `do something with data`,
   fetchError: `handle fetch error`,
-}
+};
 
 export default {
   language: 'JavaScript',
@@ -36,18 +36,18 @@ export default {
     operation,
     options,
   }) => {
-    const getComment = commentsFactory(options.comments, comments)
+    const getComment = commentsFactory(options.comments, comments);
 
-    const serverComment = options.server ? getComment('nodeFetch') : ''
+    const serverComment = options.server ? getComment('nodeFetch') : '';
     const serverImport = options.server
       ? `import fetch from "node-fetch"\n`
-      : ''
+      : '';
 
     const graphqlQuery = `const ${variableName} = \`
-  ${operation}\``
-    const urlVariable = `const serverUrl = "${serverUrl}"`
+  ${operation}\``;
+    const urlVariable = `const serverUrl = "${serverUrl}"`;
 
-    let fetchBody
+    let fetchBody;
     if (options.asyncAwait) {
       fetchBody = `
 const res = await fetch(serverUrl, {
@@ -63,7 +63,7 @@ if (errors) {
 
 ${getComment('graphqlData')}
 console.log(data)
-`
+`;
     } else {
       fetchBody = `fetch(serverUrl, {
     method: 'POST',
@@ -83,7 +83,7 @@ console.log(data)
       ${getComment('fetchError')}
       console.error(err)
     })
-  `
+  `;
     }
 
     const snippet = `
@@ -93,8 +93,8 @@ ${graphqlQuery}
 
 ${urlVariable}
 
-${fetchBody}`
+${fetchBody}`;
 
-    return formatJavaScript(snippet)
+    return formatJavaScript(snippet);
   },
-}
+};

src/snippets/javascript/reactApollo.js

@@ -1,5 +1,5 @@
-import formatJavaScript from '../utils/formatJavaScript';
-import capitalizeFirstLetter from '../utils/capitalizeFirstLetter';
+import formatJavaScript from '../../utils/formatJavaScript';
+import capitalizeFirstLetter from '../../utils/capitalizeFirstLetter';
 
 export default {
   language: 'JavaScript',

src/snippets/javascript/reactHooks.js

@@ -1,6 +1,6 @@
-import formatJavaScript from '../utils/formatJavaScript';
-import commentsFactory from '../utils/commentsFactory';
-import capitalizeFirstLetter from '../utils/capitalizeFirstLetter';
+import formatJavaScript from '../../utils/formatJavaScript';
+import commentsFactory from '../../utils/commentsFactory';
+import capitalizeFirstLetter from '../../utils/capitalizeFirstLetter';
 
 const comments = {
   effectEmptyArray: `empty array to only fetch on did mount\n`,

src/snippets/reason/apollo.js

@@ -1,6 +1,6 @@
-import refmt from 'reason'
+import refmt from 'reason';
 
-import capitalizeFirstLetter from '../utils/capitalizeFirstLetter'
+import capitalizeFirstLetter from '../../utils/capitalizeFirstLetter';
 
 export default {
   language: 'ReasonML',
@@ -20,8 +20,8 @@ export default {
     operation,
     options,
   }) => {
-    const queryName = capitalizeFirstLetter(operationName)
-    const componentName = queryName + capitalizeFirstLetter(operationType)
+    const queryName = capitalizeFirstLetter(operationName);
+    const componentName = queryName + capitalizeFirstLetter(operationType);
 
     const apolloClient = options.client
       ? `
@@ -35,7 +35,7 @@ export default {
     let instance =
       ReasonApollo.createApolloClient(~link=httpLink, ~cache=inMemoryCache, ());
       `
-      : ''
+      : '';
 
     return refmt.printRE(
       refmt.parseRE(`   
@@ -68,7 +68,7 @@ let make = _children => {
     </${componentName}>
     ${options.client ? '</ReasonApollo.Provider>' : ''}
   }
-};`)
-    )
+};`),
+    );
   },
-}
+};

src/snippets/ruby/graphqlClient.js

@@ -1,4 +1,4 @@
-import capitalizeFirstLetter from '../utils/capitalizeFirstLetter';
+import capitalizeFirstLetter from '../../utils/capitalizeFirstLetter';
 
 export default {
   language: 'Ruby',