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"
}
}
