✨ Add web build

GMartigny · GMartigny · commit e748b5453ec6 · 2020-04-21T14:14:33.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .idea/
+dist/
 example/dist/main.js
 node_modules/
 src/components/generated/
diff --git a/build.js b/build.js
@@ -2,7 +2,7 @@ const { writeFile } = require("fs").promises;
 const { promise: clean } = require("delete");
 
 const component = (pencil, props) => `import Pencil from "pencil.js";
-import Component from "../Component.vue";
+import Component from "../Component.js";
 
 export default {
     extends: Component,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,12 @@
     "version": "0.4.0",
     "description": "Pencil.js ❤️ Vue - Build reactive 2D graphics scene in your Vue project",
     "main": "src/index.js",
+    "unpkg": "dist/main.js",
+    "jsdelivr": "dist/main.js",
     "scripts": {
         "build": "node ./build.js",
-        "prepublishOnly": "npm run build"
+        "web": "webpack -p",
+        "prepublishOnly": "npm run build && npm run web"
     },
     "eslintConfig": {
         "extends": "@gmartigny/eslint-config"
@@ -30,6 +33,9 @@
     "devDependencies": {
         "@gmartigny/eslint-config": "^1.4.2",
         "delete": "^1.1.0",
-        "eslint": "^6.8.0"
+        "eslint": "^6.8.0",
+        "pencil.js": "^1.16.0",
+        "webpack": "^4.42.1",
+        "webpack-cli": "^3.3.11"
     }
 }
diff --git a/readme.md b/readme.md
@@ -11,9 +11,10 @@ Pencil.js ❤️ Vue - Build reactive 2D graphics scene in your Vue project
 
 ## Usage
 
-You have 2 choices.
+You have 3 choices:
  1. Install `vue-pencil.js` globally and use it wherever you want in your `Vuejs` app.
- 2. Or, import only components you need in your `Vuejs` components.
+ 2. Import only components you need in your `Vuejs` components.
+ 3. Use a direct `<script>` tag to include from a CDN.
 
 ### 1. Global install
 
@@ -30,7 +31,7 @@ new Vue({
     el: "#app",
     template: `
         <p-scene>
-            <p-circle :radius="100" />
+            <p-circle :radius="100" :position="[100, 100]" />
         </p-scene>
     `,
 });
@@ -41,7 +42,7 @@ new Vue({
 ```vue
 <template>
     <PScene>
-        <PCircle :radius="100" />
+        <PCircle :radius="100" :position="[100, 100]" />
     </PScene>
 </template>
 
@@ -58,6 +59,35 @@ import { PScene, PCircle } from "vue-pencil.js";
 </script>
 ```
 
+### 3. Direct `<script>` tag
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Example</title>
+</head>
+<body>
+    <div id="app"></div>
+    <!-- Vue script tag-->
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <!-- vue-pencil.js script tag-->
+    <script src="https://unpkg.com/vue-pencil.js"></script>
+    <script>
+        new Vue({
+            el: "#app",
+            template: `
+                <p-scene>
+                    <p-circle :radius="100" :position="[100, 100]" />
+                </p-scene>
+            `,
+        });
+    </script>
+</body>
+</html>
+```
+
 
 ## Example
 
diff --git a/src/components/Component.js b/src/components/Component.js
@@ -0,0 +1,15 @@
+import PContainer from "./Container.js";
+
+export default {
+    extends: PContainer,
+    props: ["draggable"],
+    mounted () {
+        if (!this.$pencil) {
+            throw new Error("Component should not be instantiated by itself.")
+        }
+
+        if (this.draggable !== undefined) {
+            this.$pencil.draggable();
+        }
+    },
+};
diff --git a/src/components/Component.vue b/src/components/Component.vue
diff --git a/src/components/Container.js b/src/components/Container.js
@@ -0,0 +1,39 @@
+import { MouseEvent } from "pencil.js";
+
+export default {
+    template: "<div><slot/></div>",
+    props: ["position", "options"],
+    watch: {
+        position () {
+            this.$pencil.position.set(this.position);
+        },
+        options () {
+            this.$pencil.setOptions(this.options);
+        },
+    },
+    computed: {
+        frameCount () {
+            return this.$pencil.frameCount;
+        },
+    },
+    mounted () {
+        if (this.$parent.$pencil) {
+            this.$parent.$pencil.add(this.$pencil);
+        }
+
+        [
+            ...Object.values(MouseEvent.events),
+            ...Object.values(this.$pencil.constructor.events),
+        ].forEach((event) => {
+            this.$pencil.on(event, (...args) => this.$emit(event, ...args));
+        });
+    },
+    updated () {
+        console.log("Update", this.$vnode.tag);
+    },
+    destroyed () {
+        if (this.$parent.$pencil) {
+            this.$parent.$pencil.remove(this.$pencil);
+        }
+    },
+};
diff --git a/src/components/Container.vue b/src/components/Container.vue
diff --git a/src/components/Scene.js b/src/components/Scene.js
@@ -0,0 +1,52 @@
+import { MouseEvent, Scene } from "pencil.js";
+
+const mirroredProps = ["cursorPosition", "fps", "width", "height", "center", "size", "frameCount"];
+const computed = mirroredProps.reduce((obj, prop) => {
+    obj[prop] = function () {
+        return this.$pencil[prop];
+    };
+    return obj;
+}, {});
+
+const mirroredFunction = ["setImageSmoothing", "getRandomPosition", "getImageData", "toImage"];
+const methods = mirroredFunction.reduce((obj, prop) => {
+    obj[prop] = function (...args) {
+        return this.$pencil[prop](...args);
+    };
+    return obj;
+}, {});
+
+export default {
+    template: "<div><slot/></div>",
+    props: ["options"],
+    watch: {
+        options () {
+            this.$pencil.setOptions(this.options);
+        },
+    },
+    computed,
+    methods,
+    beforeMount () {
+        // Temporary scene to host children
+        const container = document.createElement("div");
+        this.$pencil = new Scene(container, this.options);
+    },
+    mounted () {
+        const oldScene = this.$pencil;
+        const container = this.$el.parentNode;
+        this.$pencil = new Scene(container, this.options);
+        container.replaceChild(this.$pencil.ctx.canvas, this.$el);
+
+        // Transfer children from old to new scene
+        oldScene.children.forEach(child => this.$pencil.add(child));
+
+        [
+            ...Object.values(MouseEvent.events),
+            ...Object.values(this.$pencil.constructor.events),
+        ].forEach((event) => {
+            this.$pencil.on(event, (...args) => this.$emit(event, ...args));
+        });
+
+        this.$pencil.startLoop();
+    },
+};
diff --git a/src/components/Scene.vue b/src/components/Scene.vue
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,5 +1,5 @@
-import Container from "./Container.vue";
-import Scene from "./Scene.vue";
+import Container from "./Container.js";
+import Scene from "./Scene.js";
 
 export {
     Container,
