Phoenix and brunch

Phoenix Forum Questions / Help
6

Babel hoists all imports to the top - so the assignment occurs too late to have the desired effect. Other problems:

  • The github version is more up to date than the one included in the npm package (which doesn’t support the conversion options properly).
  • The demo uses jQuery 2.1.3. Seems jQuery 3.x installs click handlers in a different way (i.e. delayed) so immediately triggering the installed click handler in the manner the demo performs it doesn’t work with 3.x.

Nevertheless:

web/static/js/app.js:

// web/static/js/app.js
import 'phoenix_html'
import jQuery from 'jquery';
import {run} from 'web/static/js/loadviewer';

document.addEventListener('DOMContentLoaded', () => {
  window.jQuery = jQuery;
  window.$ = jQuery;

  run();

  // Display JSON sample on load
  // -- setTimeout needed for jQuery 3.x
  setTimeout(function () {
    $('#btn-json-viewer').click();
  }, 0);
});

/* using Phoenix 1.2.1 
   $ mix phoenix.new --no-ecto json_view
   $ cd json_view 
   $ npm install --save jquery
   $ npm install --save jquery.json-viewer

   - copy "jquery.json-viewer.js" from github 
       over "node_modules/jquery.json-viewer/json-viewer/jquery.json-viewer.js"
   - create web/static/js/loadviewer.js
   - update web/static/js/app.js
   - update web/templates/page/index.html.eex
   - update brunch-config.js
   - - add npm: styles
 */

web/static/js/loadviewer.js:

// web/static/js/loadviewer.js

function transformToHtml () {
  let input, options;

  try {
    input = eval('(' + $('#json-input').val() + ')');

  } catch (error) {
    return alert("Cannot eval JSON: " + error);
  }

  options = {
    collapsed: $('#collapsed').is(':checked'),
    withQuotes: $('#with-quotes').is(':checked')
  };
  $('#json-renderer').jsonViewer(input, options);
} // end transformToHtml


export function run () {
  // force load of jquery.json-viewer
  let jsonViewer = require('jquery.json-viewer/json-viewer/jquery.json-viewer.js');

  /*  Note: jquery.json-viewer.js has been updated on github
      BUT NOT in the npm package - so the file hjas to be manually
      copies to support the "options" object properly 
   */

  $(function () { $('#btn-json-viewer').click(transformToHtml); });
}

web/templates/page/index.html.eex:

<!-- web/templates/page/index.html.eex -->
<div style=" margin: 0 100px; font-family: sans-serif;">
  <h1>
    <a href="https://github.com/abodelot/jquery.json-viewer">jQuery json-viewer</a>
  </h1>
  <textarea id="json-input" autocomplete="off" style="width: 100%; height: 200px;">
{
  "id": 1001,
  "type": "donut",
  "name": "Cake",
  "description": "http://en.wikipedia.org/wiki/Doughnut",
  "price": 2.55,
  "available": {
    store: 42,
    warehouse: 600
  },
  "topping": [
    { "id": 5001, "type": "None" },
    { "id": 5002, "type": "Glazed" },
    { "id": 5005, "type": "Sugar" },
    { "id": 5003, "type": "Chocolate" },
    { "id": 5004, "type": "Maple" }
  ]
}
  </textarea>
  <p>
    Options:
    <label><input type="checkbox" id="collapsed" />Collapse nodes</label>
    <label><input type="checkbox" id="with-quotes" />Keys with quotes</label>
  </p>
  <button id="btn-json-viewer" title="run jsonViewer()">Transform to HTML</button>
  <pre id="json-renderer" style="border: 1px solid #aaa; padding: 0.5em 1.5em;"></pre>
</div>

brunch-config.js:

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"

    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true,
    // --- ADD styles property MANUALLY ---
    styles: {
      'jquery.json-viewer': ['json-viewer/jquery.json-viewer.css']
    }
  }
};

Resulting package.json:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "jquery": "^3.1.1",
    "jquery.json-viewer": "^1.1.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html"
  },
  "devDependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "2.7.4",
    "clean-css-brunch": "~2.0.0",
    "css-brunch": "~2.0.0",
    "javascript-brunch": "~2.0.0",
    "uglify-js-brunch": "~2.0.1"
  }
}
2 Likes