🏗 Drop prebuild in favor of dynamic components

pencil-js · Nov 19, 2020 · 1a274b2 · 1a274b2
1 parent c36faa9
commit 1a274b2
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 .idea/
 dist/
 node_modules/
-src/components/generated/
diff --git a/build.js b/build.js
diff --git a/package.json b/package.json
@@ -10,9 +10,9 @@
  "unpkg": "dist/main.js",
  "jsdelivr": "dist/main.js",
  "scripts": {
- "build": "node ./build.js",
- "web": "webpack -p",
- "prepublishOnly": "npm run build && npm run web"
+ "dev": "webpack --mode=development --watch",
+ "build": "webpack --mode=production",
+ "prepublishOnly": "npm run build"
  },
  "eslintConfig": {
  "extends": "@gmartigny/eslint-config"

diff --git a/readme.md b/readme.md
@@ -74,7 +74,9 @@ new Vue({
 <body>
  <div id="app"></div>
  <!-- Vue script tag-->
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+ <script src="https://unpkg.com/vue"></script>
+ <!-- Pencil.js script tag-->
+ <script src="https://unpkg.com/pencil.js"></script>
  <!-- vue-pencil.js script tag-->
  <script src="https://unpkg.com/vue-pencil.js"></script>
  <script>

diff --git a/src/components/Component.js b/src/components/Component.js
@@ -1,6 +1,6 @@
 import PContainer from "./Container";
 
-export default (Pencil) => ({
+export default Pencil => ({
  extends: PContainer(Pencil),
  props: ["draggable"],
  mounted () {

diff --git a/src/components/Scene.js b/src/components/Scene.js
@@ -16,7 +16,7 @@ const methods = mirroredFunctions.reduce((obj, prop) => {
  return obj;
 }, {});
 
-export default (Pencil) => ({
+export default Pencil => ({
  extends: PContainer(Pencil),
  template: "<div><slot/></div>",
  watch: {

diff --git a/src/components/factory.js b/src/components/factory.js
@@ -0,0 +1,41 @@
+import PComponent from "./Component";
+
+const map = {
+ // Path: ["instructions", "isClosed"], // FIXME: find a way to declare instructions
+ Heart: ["radius"],
+ Line: ["points"],
+ Spline: ["points", "tension"],
+ Polygon: ["points"],
+ RegularPolygon: ["nbSides", "radius"],
+ Star: ["radius", "nbBranches", "bevelRatio"],
+ Triangle: ["radius"],
+ Rectangle: ["width", "height"],
+ Image: ["url"],
+ Square: ["size"],
+ Arc: ["width", "height", "startAngle", "endAngle"],
+ Ellipse: ["width", "height"],
+ Circle: ["radius"],
+ Text: ["text"],
+ Button: [],
+ Checkbox: [],
+ // Knob: [], // FIXME: draggable is not working
+ // Slider: [], // FIXME: same
+ ProgressBar: [],
+ ProgressPie: [],
+ Select: ["items"],
+};
+
+const classes = {};
+Object.keys(map).forEach((className) => {
+ const pName = `P${className}`;
+ classes[pName] = Pencil => ({
+ extends: PComponent(Pencil),
+ props: map[className],
+ beforeMount () {
+ const props = ["position", ...map[className], "options"].map(p => this[p]);
+ this.$pencil = new Pencil[className](...props);
+ },
+ });
+});
+
+export default classes;
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,8 +1,9 @@
 import PContainer from "./Container";
 import PScene from "./Scene";
+import components from "./factory";
 
-export {
+export default {
  PContainer,
  PScene,
+ ...components,
 };
-export * from "./generated";
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 // This should be resolved by the user's bundler
 import Pencil from "pencil.js";
-import * as ComponentsDefinition from "./components";
+import ComponentsDefinition from "./components";
 import install from "./install";
 
 const Components = {};

diff --git a/src/install.js b/src/install.js
@@ -1,4 +1,4 @@
-import * as ComponentsDefinition from "./components";
+import ComponentsDefinition from "./components";
 
 export default pencil => (Vue, { prefix } = {}) => {
  Object.keys(ComponentsDefinition).forEach((key) => {

diff --git a/src/web.js b/src/web.js
@@ -1,18 +1,21 @@
 import install from "./install";
 
+// eslint-disable-next-line no-restricted-globals
+const global = self;
+
 const errors = [];
-if (!window.Vue) {
+if (!global.Vue) {
  errors.push(`Vue.js should be installed before vue-pencil.js using a <script> tag like:
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>`);
 }
-if (!window.Pencil) {
+if (!global.Pencil) {
  errors.push(`Pencil.js should be installed before vue-pencil.js using a <script> tag like:
-<script src="https://unpkg.com/vue-pencil.js"></script>`);
+<script src="https://unpkg.com/pencil.js"></script>`);
 }
 
 if (errors.length) {
  errors.forEach(message => console.error(message));
 }
 else {
- install(window.Pencil)(window.Vue);
+ install(global.Pencil)(global.Vue);
 }