Skip to content

Instantly share code, notes, and snippets.

@qur2

qur2/raphael-loader.js

Last active May 20, 2016 11:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save qur2/d70becace1003ddd9a2911750309ce85 to your computer and use it in GitHub Desktop.
Save qur2/d70becace1003ddd9a2911750309ce85 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
raphael-loader.js
var fs = require('fs');
var path = require('path');
var jsdom = require('jsdom');
function template (js) {
return (
`<!DOCTYPE html>
<html>
<head>
<script>${fs.readFileSync(require.resolve('raphael'))}</script>
<meta charset="utf-8">
</head>
<body>
<div id="surface"></div>
<script>
// @see https://www.smashingmagazine.com/2014/05/love-generating-svg-javascript-move-to-server/
window.Raphael.prototype.renderfix = function () {};
${js}
</script>
</body>
</html>`
);
}
module.exports = function(source) {
// this.cacheable && this.cacheable();
var callback = this.async();
var toRender = template(source)
// fs.writeFileSync('./test.html', toRender)
jsdom.env({
html: toRender,
features: { QuerySelector: true },
done: function (err, window) {
if (err) {
throw err
callback(err)
}
var svg = window.document.body.children[0].innerHTML;
// fs.writeFileSync('./uest.html', svg)
callback(null, svg)
},
})
};
Raw
rect.raph.js
// Here is the raphael code to be executed by the loader to create the SVG
var w = 320, h = 330;
var paper = new Raphael("surface", w, h)
paper.canvas.setAttribute('height', '100%')
paper.canvas.setAttribute('width', '100%')
paper.setViewBox(0, 0, w+5, h+5)
paper.canvas.setAttribute('preserveAspectRatio', 'none');
paper.drawnRect(10, 10, w-10, h-10, 6)
Raw
webpack.conf.js
// An example module loader for webpack
{
test: /\.raph\.js$/,
loaders: ['file?name=static/[name].svg', path.join(__dirname, './raphael-loader')],
exclude: /node_modules/
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment