babel-plugin-transform-relay-hot - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

@@ -1,3 +0,1 @@
-'use strict';
-
 /**
@@ -9,5 +7,4 @@ * Returns a new Babel Transformer that uses the supplied schema to transform
 
-var getBabelRelayPlugin = require('babel-relay-plugin');
-var fs = require('fs');
-var path = require('path');
+const getBabelRelayPlugin = require('babel-relay-plugin');
+const fs = require('fs');
 
@@ -18,3 +15,3 @@
   try {
-    var stats = fs.statSync(schemaJsonFilepath);
+    const stats = fs.statSync(schemaJsonFilepath);
     if (stats) {
@@ -28,3 +25,3 @@ if (!prevMtime) prevMtime = stats.mtime;
     setTimeout(
-      function () {
+      () => {
         watcherFn(schemaJsonFilepath, watchInterval, reinitBabelRelayPlugin, prevMtime);
@@ -37,3 +34,3 @@ },
   }
-};
+}
 
@@ -43,4 +40,5 @@
 function initBabelRelayPlugin(pluginOptions, babel, ref) {
-  var schemaJsonFilepath = pluginOptions.schemaJsonFilepath || '';
-  var schema;
+  const schemaJsonFilepath = pluginOptions.schemaJsonFilepath || '';
+  let schema;
+
   try {
@@ -56,7 +54,7 @@ schema = JSON.parse(fs.readFileSync(schemaJsonFilepath, 'utf8'));
     console.log('[transform-relay-hot] GraphQL Schema loaded successfully from \''
-                 + schemaJsonFilepath + '\'')
+                 + schemaJsonFilepath + '\'');
     ref.babelRelayPlugin = getBabelRelayPlugin(schema.data, pluginOptions)(babel);
   } else {
     // empty Plugin
-    console.warn('[transform-relay-hot] Relay.QL will not be transformed, cause `schema.data` is empty.')
+    console.warn('[transform-relay-hot] Relay.QL will not be transformed, cause `schema.data` is empty.');
     ref.babelRelayPlugin = {
@@ -66,3 +64,3 @@ visitor: {
         TaggedTemplateExpression: function () {},
-      }
+      },
     };
@@ -74,4 +72,4 @@ }
 // babel plugin proxy
-module.exports = function(babel) {
-  var ref;
+module.exports = function (babel) {
+  let ref;
   return {
@@ -86,3 +84,3 @@ visitor: {
           ref = {};
-          var pluginOptions = state.opts || {};
+          const pluginOptions = state.opts || {};
           if (!pluginOptions.schemaJsonFilepath || pluginOptions.schemaJsonFilepath === '') {
@@ -101,11 +99,13 @@ console.warn(
           }
-          initBabelRelayPlugin(pluginOptions, babel, ref); // HACK obtain/update babelRelayPlugin by reference
 
-          var watchInterval = pluginOptions && pluginOptions.watchInterval
+          // HACK obtain/update babelRelayPlugin by reference
+          initBabelRelayPlugin(pluginOptions, babel, ref);
+
+          const watchInterval = pluginOptions && pluginOptions.watchInterval
             ? pluginOptions.watchInterval
             : 2000;
           if (watchInterval > 0 && pluginOptions.schemaJsonFilepath) {
-            function reinitBabelRelayPlugin() {
+            const reinitBabelRelayPlugin = () => {
               initBabelRelayPlugin(pluginOptions, babel, ref);
-            }
+            };
             watcherFn(pluginOptions.schemaJsonFilepath, watchInterval, reinitBabelRelayPlugin);
@@ -112,0 +112,0 @@ }

package.json

 {
   "name": "babel-plugin-transform-relay-hot",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Wrapper for babel-relay-plugin which track changes in the graphql schema file and hot swap them without restart dev server with babel",
@@ -19,3 +19,8 @@ "main": "index.js",
     "babel-relay-plugin": "^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0"
+  },
+  "devDependencies": {
+    "eslint": "^3.14.1",
+    "eslint-config-airbnb-base": "^11.0.1",
+    "eslint-plugin-import": "^2.2.0"
   }
 }

README.md

@@ -23,3 +23,3 @@ # babel-plugin-transform-relay-hot
     ["transform-relay-hot", {
-      "schemaJsonFilepath": "./path.to.your/schema.graphql.json",
+      "schemaJsonFilepath": "./build/schema.graphql.json",
       "watchInterval": 2000
@@ -42,8 +42,7 @@ }],
   - You may **disable watching** by setting `watchInterval: 0`.
-- **`babelRelayPlugin options`**
-  - Also you may define [additional options](https://facebook.github.io/relay/docs/guides-babel-plugin.html#additional-options) from `babelRelayPlugin`
+- Also you may define [additional options](https://facebook.github.io/relay/docs/guides-babel-plugin.html#additional-options) from **`babelRelayPlugin`**
 
 
 ## How to generate `graphql.schema.json` file
-
+You may use [webpack-plugin-graphql-schema-hot](https://github.com/nodkz/webpack-plugin-graphql-schema-hot) or do it manually:
 ```js
@@ -58,3 +57,3 @@ import fs from 'fs';
   fs.writeFileSync(
-    path.join(__dirname, './schema.graphql.json'),
+    path.join(__dirname, './build/schema.graphql.json'),
     JSON.stringify(result, null, 2)
@@ -67,5 +66,31 @@ );
 
+### [webpack-plugin-graphql-schema-hot](https://github.com/nodkz/webpack-plugin-graphql-schema-hot)
+
+Webpack plugin which track changes in your schema files and generate `json` and `txt` files. `webpack-plugin-graphql-schema-hot` can freeze Webpack, while this plugin catch changes from `json` file. For this you need set `waitOnStart` and `waitOnRebuild` options (in Webpack plugin) equal to `watchInterval` (from this babel plugin):
+```js
+import path from 'path';
+import WebpackPluginGraphqlSchemaHot from 'webpack-plugin-graphql-schema-hot';
+
+const config = {
+  // ...
+  plugins: [
+    new WebpackPluginGraphqlSchemaHot({
+      schemaPath: path.resolve(__dirname, '../schema/index.js'),
+      output: {
+        // json file path should be equal to `schemaJsonFilepath`
+        json: path.resolve(__dirname, '../build/schema.graphql.json'),
+        txt: path.resolve(__dirname, '../build/schema.graphql.txt'),
+      },
+      runOnStart: true,
+      waitOnStart: 2000, // <----- value from `watchInterval`
+      waitOnRebuild: 2000, // <----- value from `watchInterval`
+      verbose: true,
+    }),
+  ]
+}
+```
+
 ### [eslint-plugin-graphql](https://github.com/apollostack/eslint-plugin-graphql)
 
-For `eslint` checks of `Relay.QL` tagged templates you may use `eslint-plugin-graphql`. It also track changes of graphql schema json file with following config:
+For `eslint` checks of `Relay.QL` tagged templates you may use `eslint-plugin-graphql`. It also tracks changes of graphql schema json file with following config:
 ```js
@@ -80,3 +105,3 @@ // In a file called .eslintrc.js
       env: 'relay',
-      schemaJsonFilepath: path.resolve(__dirname, './graphql.schema.json'),
+      schemaJsonFilepath: path.resolve(__dirname, './build/schema.graphql.json'),
     }]
@@ -83,0 +108,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

40804

increased by373.8%

Number of package files

8

increased by33.33%

Number of lines in readme file

113

increased by28.41%

Worsened metrics

Dev dependency count

3

increased byInfinity%

Lines of code

103

decreased by-0.96%

No dependency changes