diff --git a/packages/plugin-designer/.babelrc b/packages/plugin-designer/.babelrc
deleted file mode 100644
index 002b4aa0d58..00000000000
--- a/packages/plugin-designer/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["env"]
-}
diff --git a/packages/plugin-designer/LICENSE b/packages/plugin-designer/LICENSE
new file mode 100644
index 00000000000..cdbde67f034
--- /dev/null
+++ b/packages/plugin-designer/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Joost De Cock
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/plugin-designer/dist/module.js b/packages/plugin-designer/dist/module.js
index d16421ff8b6..fa0738aa938 100644
--- a/packages/plugin-designer/dist/module.js
+++ b/packages/plugin-designer/dist/module.js
@@ -70,161 +70,164 @@ var snippets = `
 var version = "0.3.0";
 
 var index = {
-  preRenderSvg: function(next) {
-    // Add style, script and snippets
-    this.style += style;
-    this.script += script;
-    this.defs += snippets;
+  hooks: {
+    preRenderSvg: function(next) {
+      // Add style, script and snippets
+      this.style += style;
+      this.script += script;
+      this.defs += snippets;
 
-    // Add SVG attributes
-    this.attributes.add(
-      "xmlns:freesewing",
-      "http://freesewing.org/namespaces/freesewing"
-    );
-    this.attributes.add("freesewing:theme-designer", version);
+      // Add SVG attributes
+      this.attributes.add("freesewing:theme-designer", version);
 
-    /** Decorares points with extra info */
-    var decoratePoints = function(svg) {
-      for (let partId in svg.pattern.parts) {
-        let part = svg.pattern.parts[partId];
-        if (part.render) {
-          for (let pointId in part.points) {
-            let point = part.points[pointId];
-            point.attributes.add("id", svg.getUid());
-            point.attributes.add("data-point", pointId);
-            point.attributes.add("data-part", partId);
-            let type = pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
-            let id = svg.getUid();
-            part.snippets[id] = new svg.pattern.snippet(
-              point,
-              type,
-              `Point ${pointId} in part ${partId}`
-            );
-            part.snippets[id].attributes.add("onmouseover", "pointHover(evt)");
-            part.snippets[id].attributes.add("id", id);
-            part.snippets[id].attributes.add("data-point", pointId);
-            part.snippets[id].attributes.add("data-part", partId);
-          }
-        }
-      }
-    };
-
-    /** Decorares path points with extra info */
-    var decoratePathPoint = function(
-      id,
-      Snippet,
-      snippets$$1,
-      point,
-      type,
-      pathId,
-      partId
-    ) {
-      snippets$$1[id] = new Snippet(
-        point,
-        `path-${type}-point`,
-        `Path ${pathId}: ${type}`
-      );
-      snippets$$1[id].attributes.add("onmouseover", "pointHover(evt)");
-      snippets$$1[id].attributes.add("id", id);
-      snippets$$1[id].attributes.add(
-        "data-point",
-        point.attributes.get("data-point")
-      );
-      snippets$$1[id].attributes.add("data-path", pathId);
-      snippets$$1[id].attributes.add("data-part", partId);
-    };
-
-    /** Draws curve control handles */
-    var decorateCurveHandles = function(
-      id,
-      Path,
-      paths,
-      from,
-      to,
-      pathId,
-      partId
-    ) {
-      let path = new Path().move(from).line(to);
-      path.attributes.add("class", "curve-control");
-      path.attributes.add("id", id);
-      path.attributes.add("data-path", pathId);
-      path.attributes.add("data-part", partId);
-      paths[id] = path;
-    };
-
-    /** Decorares paths with extra info */
-    var decoratePaths = function(svg) {
-      for (let partId in svg.pattern.parts) {
-        let part = svg.pattern.parts[partId];
-        if (part.render) {
-          for (let pathId in part.paths) {
-            let path = part.paths[pathId];
-            if (!path.render) return false;
-            for (let op of path.ops) {
-              if (op.type !== "close") {
-                decoratePathPoint(
-                  svg.getUid(),
-                  svg.pattern.snippet,
-                  part.snippets,
-                  op.to,
-                  op.type,
-                  pathId,
-                  partId
-                );
-              }
-              if (op.type === "curve") {
-                decoratePathPoint(
-                  svg.getUid(),
-                  svg.pattern.snippet,
-                  part.snippets,
-                  op.cp1,
-                  "handle",
-                  pathId,
-                  partId
-                );
-                decoratePathPoint(
-                  svg.getUid(),
-                  svg.pattern.snippet,
-                  part.snippets,
-                  op.cp2,
-                  "handle",
-                  pathId,
-                  partId
-                );
-                decorateCurveHandles(
-                  svg.getUid(),
-                  svg.pattern.path,
-                  part.paths,
-                  current,
-                  op.cp1,
-                  pathId,
-                  partId
-                );
-                decorateCurveHandles(
-                  svg.getUid(),
-                  svg.pattern.path,
-                  part.paths,
-                  op.to,
-                  op.cp2,
-                  pathId,
-                  partId
-                );
-              }
-              let current = op.to;
+      /** Decorares points with extra info */
+      var decoratePoints = function(svg) {
+        for (let partId in svg.pattern.parts) {
+          let part = svg.pattern.parts[partId];
+          if (part.render) {
+            for (let pointId in part.points) {
+              let point = part.points[pointId];
+              point.attributes.add("id", svg.getUid());
+              point.attributes.add("data-point", pointId);
+              point.attributes.add("data-part", partId);
+              let type =
+                pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
+              let id = svg.getUid();
+              part.snippets[id] = new svg.pattern.snippet(
+                type,
+                point,
+                `Point ${pointId} in part ${partId}`
+              );
+              part.snippets[id].attributes.add(
+                "onmouseover",
+                "pointHover(evt)"
+              );
+              part.snippets[id].attributes.add("id", id);
+              part.snippets[id].attributes.add("data-point", pointId);
+              part.snippets[id].attributes.add("data-part", partId);
             }
           }
         }
-      }
-    };
+      };
 
-    // Decorate pattern
-    decoratePoints(this);
-    decoratePaths(this);
-    console.log(
-      "Designer theme plugin: Here's the pattern object:",
-      this.pattern
-    );
-    next();
+      /** Decorares path points with extra info */
+      var decoratePathPoint = function(
+        id,
+        Snippet,
+        snippets$$1,
+        point,
+        type,
+        pathId,
+        partId
+      ) {
+        snippets$$1[id] = new Snippet(
+          `path-${type}-point`,
+          point,
+          `Path ${pathId}: ${type}`
+        );
+        snippets$$1[id].attributes.add("onmouseover", "pointHover(evt)");
+        snippets$$1[id].attributes.add("id", id);
+        snippets$$1[id].attributes.add(
+          "data-point",
+          point.attributes.get("data-point")
+        );
+        snippets$$1[id].attributes.add("data-path", pathId);
+        snippets$$1[id].attributes.add("data-part", partId);
+      };
+
+      /** Draws curve control handles */
+      var decorateCurveHandles = function(
+        id,
+        Path,
+        paths,
+        from,
+        to,
+        pathId,
+        partId
+      ) {
+        let path = new Path().move(from).line(to);
+        path.attributes.add("class", "curve-control");
+        path.attributes.add("id", id);
+        path.attributes.add("data-path", pathId);
+        path.attributes.add("data-part", partId);
+        paths[id] = path;
+      };
+
+      /** Decorares paths with extra info */
+      var decoratePaths = function(svg) {
+        for (let partId in svg.pattern.parts) {
+          let part = svg.pattern.parts[partId];
+          if (part.render) {
+            for (let pathId in part.paths) {
+              let path = part.paths[pathId];
+              if (!path.render) return false;
+              let current;
+              for (let op of path.ops) {
+                if (op.type !== "close") {
+                  decoratePathPoint(
+                    svg.getUid(),
+                    svg.pattern.snippet,
+                    part.snippets,
+                    op.to,
+                    op.type,
+                    pathId,
+                    partId
+                  );
+                }
+                if (op.type === "curve") {
+                  decoratePathPoint(
+                    svg.getUid(),
+                    svg.pattern.snippet,
+                    part.snippets,
+                    op.cp1,
+                    "handle",
+                    pathId,
+                    partId
+                  );
+                  decoratePathPoint(
+                    svg.getUid(),
+                    svg.pattern.snippet,
+                    part.snippets,
+                    op.cp2,
+                    "handle",
+                    pathId,
+                    partId
+                  );
+                  decorateCurveHandles(
+                    svg.getUid(),
+                    svg.pattern.path,
+                    part.paths,
+                    current,
+                    op.cp1,
+                    pathId,
+                    partId
+                  );
+                  decorateCurveHandles(
+                    svg.getUid(),
+                    svg.pattern.path,
+                    part.paths,
+                    op.to,
+                    op.cp2,
+                    pathId,
+                    partId
+                  );
+                }
+                current = op.to;
+              }
+            }
+          }
+        }
+      };
+
+      // Decorate pattern
+      decoratePoints(this);
+      decoratePaths(this);
+      console.log(
+        "Designer theme plugin: Here's the pattern object:",
+        this.pattern
+      );
+      next();
+    }
   }
 };
 
diff --git a/packages/plugin-designer/dist/theme.min.js b/packages/plugin-designer/dist/theme.min.js
index c1acba08f93..a61c5153238 100644
--- a/packages/plugin-designer/dist/theme.min.js
+++ b/packages/plugin-designer/dist/theme.min.js
@@ -1,125 +1,232 @@
-/**
- * @freesewing/theme-designer | v0.3.0
- * The designer theme for freesewing
- * (c) 2018 Joost De Cock <joost@decock.org> (https://github.com/joostdecock)
- * @license MIT
- */
-(this.freesewing = this.freesewing || {}),
-  (this.freesewing.plugins = this.freesewing.plugins || {}),
-  (this.freesewing.plugins.designer = (function() {
-    "use strict";
-    return {
-      preRenderSvg: function(t) {
-        (this.style +=
-          "\npath.curve-control{stroke:#f0ad4e;stroke-width: 0.2;}\npath.debug{stroke:#d9534f;stroke-opacity:0.4;stroke-width:2;}\n.point{fill:none;stroke-width:0.6;stroke:#f0ad4e;}\ntext.tooltip{font-size:3px;}\n"),
-          (this.script +=
-            "\nfunction pointHover(evt) {\n  var point = evt.target;\n  var id = point.id;\n  var cx = point.getAttribute('x');\n  var cy = point.getAttribute('y');\n  console.log('Point '+id+' ( '+cx+' , '+cy+' )');\n  var scale = 2;\n  cx = cx-scale*cx;\n  cy = cy-scale*cy;\n  point.setAttribute(\"transform\", 'matrix('+scale+', 0, 0, '+scale+', '+cx+', '+cy+')');\n  setTimeout(function(){\n    var point = document.getElementById(evt.target.id);\n    point.removeAttribute(\"transform\", '');\n  }, 1000);\n}\n"),
-          (this.defs +=
-            '\n<g id="point">\n  <circle cy="0" cx="0" r="2" class="stroke-hint stroke-sm" />\n  <circle cy="0" cx="0" r="0.8" class="fill-hint" />\n</g>\n<g id="point-hidden">\n  <circle cy="0" cx="0" r="1" class="stroke-canvas stroke-xs" />\n  <path d="M -0.5,-0.5 L 0.5,0.5 M 0.5,-0.5 L -0.5,0.5" class="stroke-canvas stroke-sm" />\n</g>\n<g id="path-move-point">\n  <circle cx="0" cy="0" r="2"  class="stroke-canvas stroke-lg" />\n  <circle cx="0" cy="0" r="0.8" class="fill-canvas" />\n</g>\n<g id="path-line-point">\n  <circle cx="0" cy="0" r="2"  class="stroke-note stroke-lg" />\n  <circle cx="0" cy="0" r="0.8" class="fill-note" />\n</g>\n<g id="path-curve-point"> <use xlink:href = "#path-line-point"/> </g>\n<g id="path-handle-point">\n  <circle cy="0" cx="0" r="2" class="stroke-mark stroke-lg no-fill" />\n  <circle cx="0" cy="0" r="0.8" class="fill-mark" />\n</g>\n<g id="point-focus">\n  <circle cx="0" cy="0" r="2"  class="stroke-mark stroke-lg" />\n  <circle cx="0" cy="0" r="0.8" class="fill-fabric" />\n</g>\n<g id="marked-point">\n  <circle cx="0" cy="0" r="3.6"  class="stroke-hint stroke-sm" />\n  <circle cx="0" cy="0" r="2.8"  class="stroke-hint stroke-sm" />\n  <circle cx="0" cy="0" r="2.0"  class="stroke-hint stroke-sm" />\n  <circle cx="0" cy="0" r="1.2"  class="stroke-hint stroke-sm" />\n  <circle cx="0" cy="0" r="0.8"  class="stroke-hint stroke-sm" />\n  <circle cx="0" cy="0" r="0.4" class="fill-hint" />\n</g>\n'),
-          this.attributes.add(
-            "xmlns:freesewing",
-            "http://freesewing.org/namespaces/freesewing"
-          ),
-          this.attributes.add("freesewing:theme-designer", "0.3.0");
-        var e = function(t, e, n, s, i, r, a) {
-            (n[t] = new e(s, `path-${i}-point`, `Path ${r}: ${i}`)),
-              n[t].attributes.add("onmouseover", "pointHover(evt)"),
-              n[t].attributes.add("id", t),
-              n[t].attributes.add("data-point", s.attributes.get("data-point")),
-              n[t].attributes.add("data-path", r),
-              n[t].attributes.add("data-part", a);
-          },
-          n = function(t, e, n, s, i, r, a) {
-            let c = new e().move(s).line(i);
-            c.attributes.add("class", "curve-control"),
-              c.attributes.add("id", t),
-              c.attributes.add("data-path", r),
-              c.attributes.add("data-part", a),
-              (n[t] = c);
-          };
-        !(function(t) {
-          for (let e in t.pattern.parts) {
-            let n = t.pattern.parts[e];
-            if (n.render)
-              for (let s in n.points) {
-                let i = n.points[s];
-                i.attributes.add("id", t.getUid()),
-                  i.attributes.add("data-point", s),
-                  i.attributes.add("data-part", e);
-                let r = "_" === s.substr(0, 1) ? "point-hidden" : "point",
-                  a = t.getUid();
-                (n.snippets[a] = new t.pattern.snippet(
-                  i,
-                  r,
-                  `Point ${s} in part ${e}`
-                )),
-                  n.snippets[a].attributes.add(
-                    "onmouseover",
-                    "pointHover(evt)"
-                  ),
-                  n.snippets[a].attributes.add("id", a),
-                  n.snippets[a].attributes.add("data-point", s),
-                  n.snippets[a].attributes.add("data-part", e);
+this.freesewing = this.freesewing || {};
+this.freesewing.plugins = this.freesewing.plugins || {};
+this.freesewing.plugins.designer = (function() {
+  "use strict";
+
+  var script = `
+function pointHover(evt) {
+  var point = evt.target;
+  var id = point.id;
+  var cx = point.getAttribute('x');
+  var cy = point.getAttribute('y');
+  console.log('Point '+id+' ( '+cx+' , '+cy+' )');
+  var scale = 2;
+  cx = cx-scale*cx;
+  cy = cy-scale*cy;
+  point.setAttribute("transform", 'matrix('+scale+', 0, 0, '+scale+', '+cx+', '+cy+')');
+  setTimeout(function(){
+    var point = document.getElementById(evt.target.id);
+    point.removeAttribute("transform", '');
+  }, 1000);
+}
+`;
+
+  var style = `
+path.curve-control{stroke:#f0ad4e;stroke-width: 0.2;}
+path.debug{stroke:#d9534f;stroke-opacity:0.4;stroke-width:2;}
+.point{fill:none;stroke-width:0.6;stroke:#f0ad4e;}
+text.tooltip{font-size:3px;}
+`;
+
+  var snippets = `
+<g id="point">
+  <circle cy="0" cx="0" r="2" class="stroke-hint stroke-sm" />
+  <circle cy="0" cx="0" r="0.8" class="fill-hint" />
+</g>
+<g id="point-hidden">
+  <circle cy="0" cx="0" r="1" class="stroke-canvas stroke-xs" />
+  <path d="M -0.5,-0.5 L 0.5,0.5 M 0.5,-0.5 L -0.5,0.5" class="stroke-canvas stroke-sm" />
+</g>
+<g id="path-move-point">
+  <circle cx="0" cy="0" r="2"  class="stroke-canvas stroke-lg" />
+  <circle cx="0" cy="0" r="0.8" class="fill-canvas" />
+</g>
+<g id="path-line-point">
+  <circle cx="0" cy="0" r="2"  class="stroke-note stroke-lg" />
+  <circle cx="0" cy="0" r="0.8" class="fill-note" />
+</g>
+<g id="path-curve-point"> <use xlink:href = "#path-line-point"/> </g>
+<g id="path-handle-point">
+  <circle cy="0" cx="0" r="2" class="stroke-mark stroke-lg no-fill" />
+  <circle cx="0" cy="0" r="0.8" class="fill-mark" />
+</g>
+<g id="point-focus">
+  <circle cx="0" cy="0" r="2"  class="stroke-mark stroke-lg" />
+  <circle cx="0" cy="0" r="0.8" class="fill-fabric" />
+</g>
+<g id="marked-point">
+  <circle cx="0" cy="0" r="3.6"  class="stroke-hint stroke-sm" />
+  <circle cx="0" cy="0" r="2.8"  class="stroke-hint stroke-sm" />
+  <circle cx="0" cy="0" r="2.0"  class="stroke-hint stroke-sm" />
+  <circle cx="0" cy="0" r="1.2"  class="stroke-hint stroke-sm" />
+  <circle cx="0" cy="0" r="0.8"  class="stroke-hint stroke-sm" />
+  <circle cx="0" cy="0" r="0.4" class="fill-hint" />
+</g>
+`;
+
+  var version = "0.3.0";
+
+  var index = {
+    hooks: {
+      preRenderSvg: function(next) {
+        // Add style, script and snippets
+        this.style += style;
+        this.script += script;
+        this.defs += snippets;
+
+        // Add SVG attributes
+        this.attributes.add("freesewing:theme-designer", version);
+
+        /** Decorares points with extra info */
+        var decoratePoints = function(svg) {
+          for (let partId in svg.pattern.parts) {
+            let part = svg.pattern.parts[partId];
+            if (part.render) {
+              for (let pointId in part.points) {
+                let point = part.points[pointId];
+                point.attributes.add("id", svg.getUid());
+                point.attributes.add("data-point", pointId);
+                point.attributes.add("data-part", partId);
+                let type =
+                  pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
+                let id = svg.getUid();
+                part.snippets[id] = new svg.pattern.snippet(
+                  type,
+                  point,
+                  `Point ${pointId} in part ${partId}`
+                );
+                part.snippets[id].attributes.add(
+                  "onmouseover",
+                  "pointHover(evt)"
+                );
+                part.snippets[id].attributes.add("id", id);
+                part.snippets[id].attributes.add("data-point", pointId);
+                part.snippets[id].attributes.add("data-part", partId);
               }
-          }
-        })(this),
-          (function(t) {
-            for (let s in t.pattern.parts) {
-              let i = t.pattern.parts[s];
-              if (i.render)
-                for (let r in i.paths) {
-                  let a = i.paths[r];
-                  if (!a.render) return !1;
-                  for (let c of a.ops) {
-                    "close" !== c.type &&
-                      e(
-                        t.getUid(),
-                        t.pattern.snippet,
-                        i.snippets,
-                        c.to,
-                        c.type,
-                        r,
-                        s
-                      ),
-                      "curve" === c.type &&
-                        (e(
-                          t.getUid(),
-                          t.pattern.snippet,
-                          i.snippets,
-                          c.cp1,
-                          "handle",
-                          r,
-                          s
-                        ),
-                        e(
-                          t.getUid(),
-                          t.pattern.snippet,
-                          i.snippets,
-                          c.cp2,
-                          "handle",
-                          r,
-                          s
-                        ),
-                        n(t.getUid(), t.pattern.path, i.paths, a, c.cp1, r, s),
-                        n(
-                          t.getUid(),
-                          t.pattern.path,
-                          i.paths,
-                          c.to,
-                          c.cp2,
-                          r,
-                          s
-                        ));
-                    let a = c.to;
-                  }
-                }
             }
-          })(this),
-          console.log(
-            "Designer theme plugin: Here's the pattern object:",
-            this.pattern
-          ),
-          t();
+          }
+        };
+
+        /** Decorares path points with extra info */
+        var decoratePathPoint = function(
+          id,
+          Snippet,
+          snippets$$1,
+          point,
+          type,
+          pathId,
+          partId
+        ) {
+          snippets$$1[id] = new Snippet(
+            `path-${type}-point`,
+            point,
+            `Path ${pathId}: ${type}`
+          );
+          snippets$$1[id].attributes.add("onmouseover", "pointHover(evt)");
+          snippets$$1[id].attributes.add("id", id);
+          snippets$$1[id].attributes.add(
+            "data-point",
+            point.attributes.get("data-point")
+          );
+          snippets$$1[id].attributes.add("data-path", pathId);
+          snippets$$1[id].attributes.add("data-part", partId);
+        };
+
+        /** Draws curve control handles */
+        var decorateCurveHandles = function(
+          id,
+          Path,
+          paths,
+          from,
+          to,
+          pathId,
+          partId
+        ) {
+          let path = new Path().move(from).line(to);
+          path.attributes.add("class", "curve-control");
+          path.attributes.add("id", id);
+          path.attributes.add("data-path", pathId);
+          path.attributes.add("data-part", partId);
+          paths[id] = path;
+        };
+
+        /** Decorares paths with extra info */
+        var decoratePaths = function(svg) {
+          for (let partId in svg.pattern.parts) {
+            let part = svg.pattern.parts[partId];
+            if (part.render) {
+              for (let pathId in part.paths) {
+                let path = part.paths[pathId];
+                if (!path.render) return false;
+                let current;
+                for (let op of path.ops) {
+                  if (op.type !== "close") {
+                    decoratePathPoint(
+                      svg.getUid(),
+                      svg.pattern.snippet,
+                      part.snippets,
+                      op.to,
+                      op.type,
+                      pathId,
+                      partId
+                    );
+                  }
+                  if (op.type === "curve") {
+                    decoratePathPoint(
+                      svg.getUid(),
+                      svg.pattern.snippet,
+                      part.snippets,
+                      op.cp1,
+                      "handle",
+                      pathId,
+                      partId
+                    );
+                    decoratePathPoint(
+                      svg.getUid(),
+                      svg.pattern.snippet,
+                      part.snippets,
+                      op.cp2,
+                      "handle",
+                      pathId,
+                      partId
+                    );
+                    decorateCurveHandles(
+                      svg.getUid(),
+                      svg.pattern.path,
+                      part.paths,
+                      current,
+                      op.cp1,
+                      pathId,
+                      partId
+                    );
+                    decorateCurveHandles(
+                      svg.getUid(),
+                      svg.pattern.path,
+                      part.paths,
+                      op.to,
+                      op.cp2,
+                      pathId,
+                      partId
+                    );
+                  }
+                  current = op.to;
+                }
+              }
+            }
+          }
+        };
+
+        // Decorate pattern
+        decoratePoints(this);
+        decoratePaths(this);
+        console.log(
+          "Designer theme plugin: Here's the pattern object:",
+          this.pattern
+        );
+        next();
       }
-    };
-  })());
+    }
+  };
+
+  return index;
+})();
diff --git a/packages/plugin-designer/package.json b/packages/plugin-designer/package.json
index f2f5a9827ec..48d87278d94 100644
--- a/packages/plugin-designer/package.json
+++ b/packages/plugin-designer/package.json
@@ -35,7 +35,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,json}": [
+    "src/*.{js,json}": [
       "prettier --write",
       "git add"
     ]
diff --git a/packages/plugin-designer/rollup.browser.js b/packages/plugin-designer/rollup.browser.js
index b34f00eab85..0137ec186df 100644
--- a/packages/plugin-designer/rollup.browser.js
+++ b/packages/plugin-designer/rollup.browser.js
@@ -20,15 +20,15 @@ export default {
     commonjs(),
     babel({
       exclude: "node_modules/**"
-    }),
-    terser({
-      output: {
-        preamble: `/**\n * ${meta.name} | v${meta.version}\n * ${
-          meta.description
-        }\n * (c) ${new Date().getFullYear()} ${meta.author}\n * @license ${
-          meta.license
-        }\n */`
-      }
     })
+    //terser({
+    //  output: {
+    //    preamble: `/**\n * ${meta.name} | v${meta.version}\n * ${
+    //      meta.description
+    //    }\n * (c) ${new Date().getFullYear()} ${meta.author}\n * @license ${
+    //      meta.license
+    //    }\n */`
+    //  }
+    //})
   ]
 };
diff --git a/packages/plugin-designer/src/index.js b/packages/plugin-designer/src/index.js
index 151a2529a79..b6fd448d8bc 100644
--- a/packages/plugin-designer/src/index.js
+++ b/packages/plugin-designer/src/index.js
@@ -4,160 +4,164 @@ import snippets from "./lib/snippets";
 import { version } from "../package.json";
 
 export default {
-  preRenderSvg: function(next) {
-    // Add style, script and snippets
-    this.style += style;
-    this.script += script;
-    this.defs += snippets;
+  hooks: {
+    preRenderSvg: function(next) {
+      // Add style, script and snippets
+      this.style += style;
+      this.script += script;
+      this.defs += snippets;
 
-    // Add SVG attributes
-    this.attributes.add(
-      "xmlns:freesewing",
-      "http://freesewing.org/namespaces/freesewing"
-    );
-    this.attributes.add("freesewing:theme-designer", version);
+      // Add SVG attributes
+      this.attributes.add("freesewing:theme-designer", version);
 
-    /** Decorares points with extra info */
-    var decoratePoints = function(svg) {
-      for (let partId in svg.pattern.parts) {
-        let part = svg.pattern.parts[partId];
-        if (part.render) {
-          for (let pointId in part.points) {
-            let point = part.points[pointId];
-            point.attributes.add("id", svg.getUid());
-            point.attributes.add("data-point", pointId);
-            point.attributes.add("data-part", partId);
-            let type = pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
-            let id = svg.getUid();
-            part.snippets[id] = new svg.pattern.snippet(
-              point,
-              type,
-              `Point ${pointId} in part ${partId}`
-            );
-            part.snippets[id].attributes.add("onmouseover", "pointHover(evt)");
-            part.snippets[id].attributes.add("id", id);
-            part.snippets[id].attributes.add("data-point", pointId);
-            part.snippets[id].attributes.add("data-part", partId);
+      /** Decorares points with extra info */
+      var decoratePoints = function(svg) {
+        for (let partId in svg.pattern.parts) {
+          let part = svg.pattern.parts[partId];
+          if (part.render) {
+            for (let pointId in part.points) {
+              let point = part.points[pointId];
+              point.attributes.add("id", svg.getUid());
+              point.attributes.add("data-point", pointId);
+              point.attributes.add("data-part", partId);
+              let type =
+                pointId.substr(0, 1) === "_" ? "point-hidden" : "point";
+              let id = svg.getUid();
+              part.snippets[id] = new svg.pattern.snippet(
+                type,
+                point,
+                `Point ${pointId} in part ${partId}`
+              );
+              part.snippets[id].attributes.add(
+                "onmouseover",
+                "pointHover(evt)"
+              );
+              part.snippets[id].attributes.add("id", id);
+              part.snippets[id].attributes.add("data-point", pointId);
+              part.snippets[id].attributes.add("data-part", partId);
+            }
           }
         }
-      }
-    };
+      };
 
-    /** Decorares path points with extra info */
-    var decoratePathPoint = function(
-      id,
-      Snippet,
-      snippets,
-      point,
-      type,
-      pathId,
-      partId
-    ) {
-      snippets[id] = new Snippet(
+      /** Decorares path points with extra info */
+      var decoratePathPoint = function(
+        id,
+        Snippet,
+        snippets,
         point,
-        `path-${type}-point`,
-        `Path ${pathId}: ${type}`
-      );
-      snippets[id].attributes.add("onmouseover", "pointHover(evt)");
-      snippets[id].attributes.add("id", id);
-      snippets[id].attributes.add(
-        "data-point",
-        point.attributes.get("data-point")
-      );
-      snippets[id].attributes.add("data-path", pathId);
-      snippets[id].attributes.add("data-part", partId);
-    };
+        type,
+        pathId,
+        partId
+      ) {
+        snippets[id] = new Snippet(
+          `path-${type}-point`,
+          point,
+          `Path ${pathId}: ${type}`
+        );
+        snippets[id].attributes.add("onmouseover", "pointHover(evt)");
+        snippets[id].attributes.add("id", id);
+        snippets[id].attributes.add(
+          "data-point",
+          point.attributes.get("data-point")
+        );
+        snippets[id].attributes.add("data-path", pathId);
+        snippets[id].attributes.add("data-part", partId);
+      };
 
-    /** Draws curve control handles */
-    var decorateCurveHandles = function(
-      id,
-      Path,
-      paths,
-      from,
-      to,
-      pathId,
-      partId
-    ) {
-      let path = new Path().move(from).line(to);
-      path.attributes.add("class", "curve-control");
-      path.attributes.add("id", id);
-      path.attributes.add("data-path", pathId);
-      path.attributes.add("data-part", partId);
-      paths[id] = path;
-    };
+      /** Draws curve control handles */
+      var decorateCurveHandles = function(
+        id,
+        Path,
+        paths,
+        from,
+        to,
+        pathId,
+        partId
+      ) {
+        let path = new Path().move(from).line(to);
+        path.attributes.add("class", "curve-control");
+        path.attributes.add("id", id);
+        path.attributes.add("data-path", pathId);
+        path.attributes.add("data-part", partId);
+        paths[id] = path;
+      };
 
-    /** Decorares paths with extra info */
-    var decoratePaths = function(svg) {
-      for (let partId in svg.pattern.parts) {
-        let part = svg.pattern.parts[partId];
-        if (part.render) {
-          for (let pathId in part.paths) {
-            let path = part.paths[pathId];
-            if (!path.render) return false;
-            let id;
-            for (let op of path.ops) {
-              if (op.type !== "close") {
-                decoratePathPoint(
-                  svg.getUid(),
-                  svg.pattern.snippet,
-                  part.snippets,
-                  op.to,
-                  op.type,
-                  pathId,
-                  partId
-                );
-              }
-              if (op.type === "curve") {
-                decoratePathPoint(
-                  svg.getUid(),
-                  svg.pattern.snippet,
-                  part.snippets,
-                  op.cp1,
-                  "handle",
-                  pathId,
-                  partId
-                );
-                decoratePathPoint(
-                  svg.getUid(),
-                  svg.pattern.snippet,
-                  part.snippets,
-                  op.cp2,
-                  "handle",
-                  pathId,
-                  partId
-                );
-                decorateCurveHandles(
-                  svg.getUid(),
-                  svg.pattern.path,
-                  part.paths,
-                  current,
-                  op.cp1,
-                  pathId,
-                  partId
-                );
-                decorateCurveHandles(
-                  svg.getUid(),
-                  svg.pattern.path,
-                  part.paths,
-                  op.to,
-                  op.cp2,
-                  pathId,
-                  partId
-                );
+      /** Decorares paths with extra info */
+      var decoratePaths = function(svg) {
+        for (let partId in svg.pattern.parts) {
+          let part = svg.pattern.parts[partId];
+          if (part.render) {
+            for (let pathId in part.paths) {
+              let path = part.paths[pathId];
+              if (!path.render) return false;
+              let id;
+              let current;
+              for (let op of path.ops) {
+                if (op.type !== "close") {
+                  decoratePathPoint(
+                    svg.getUid(),
+                    svg.pattern.snippet,
+                    part.snippets,
+                    op.to,
+                    op.type,
+                    pathId,
+                    partId
+                  );
+                }
+                if (op.type === "curve") {
+                  decoratePathPoint(
+                    svg.getUid(),
+                    svg.pattern.snippet,
+                    part.snippets,
+                    op.cp1,
+                    "handle",
+                    pathId,
+                    partId
+                  );
+                  decoratePathPoint(
+                    svg.getUid(),
+                    svg.pattern.snippet,
+                    part.snippets,
+                    op.cp2,
+                    "handle",
+                    pathId,
+                    partId
+                  );
+                  decorateCurveHandles(
+                    svg.getUid(),
+                    svg.pattern.path,
+                    part.paths,
+                    current,
+                    op.cp1,
+                    pathId,
+                    partId
+                  );
+                  decorateCurveHandles(
+                    svg.getUid(),
+                    svg.pattern.path,
+                    part.paths,
+                    op.to,
+                    op.cp2,
+                    pathId,
+                    partId
+                  );
+                }
+                current = op.to;
               }
             }
           }
         }
-      }
-    };
+      };
 
-    // Decorate pattern
-    decoratePoints(this);
-    decoratePaths(this);
-    console.log(
-      "Designer theme plugin: Here's the pattern object:",
-      this.pattern
-    );
-    next();
+      // Decorate pattern
+      decoratePoints(this);
+      decoratePaths(this);
+      console.log(
+        "Designer theme plugin: Here's the pattern object:",
+        this.pattern
+      );
+      next();
+    }
   }
 };