transform to library and first pre-release

Author: Sascha Braun

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/build
 
 # local env files
 .env.local

.npmignore

@@ -0,0 +1,25 @@
+.vscode
+.github
+/node_modules
+/public
+/samples
+/build/tests
+/src
+/tests
+
+.prettierignore
+.editorconfig
+.postcssrc.js
+babel.config.js
+jest.config.js
+tsconfig.json
+tsconfig.prod.json
+tslint.json
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+yarn.lock
+package-lock.json

.prettierignore

@@ -0,0 +1,3 @@
+# package.json is formatted by package managers, so we ignore it here
+package.json
+**/*.md

README.md

@@ -1,29 +1,68 @@
 # Vue Three.js
 
-/!\ This module is still in development and not usable yet as a library.
+/!\ This module is still in development.
 
 Contains Vuejs bindings for creating and interacting with Threejs scenes and objects in a easy and reactive way.
 
 **Features:**
 
-- Only core features will be present in this package
-- Asset manager with preload possibility (loading events not done yet)
-- Scene manager with scene switching / loading
-- Reactive meshes, cameras and lights
-- Asynchronous asset and mesh loading
-- Custom factory functions to load (asynchronously) custom geometries, materials and textures
-- Input manager
-- Behaviour components for data manipulation
+Only core features will be present in this package: You will be able to extend this libraries classes and components to easily add your own required features.
+
+However, for now, there are still some shipped in features. Some features are bound to change as the library evolves.
+
+- Asset manager to automatically load and unload your assets.
+- Custom asset factory functions to load (asynchronously) custom geometries, materials and textures.
+
+- Scene manager able to handle multiple scenes. Only once scene at a time may be active however
+- Meshes, cameras and lights and groups with reactive property bindings
+- Behaviour components for data manipulation: Can be placed in the object, scene or application scope, depending on the seeked result.
+
+- Other default components such as fog.
+
+- First version of a input manager based on [pinput](https://github.com/ichub/pinput)
 
 **Todo:**
 
-- Add delta time ( for now it is equals to 0 all time )
-- Change project to library and add samples
-- Publish first pre-release on npm
+- Add delta time ( for now it is not set and is always equals to 0 )
+
+- Add scene loading events for tracking loading progress
+- Remove scene active prop (can be done with an v-if attribute)
+- Add scene preload nested assets handling
+- Add cube texture component
+
+- Add default materials and geometries
 
 ## Usage
 
-####Define your scenes
+###Installation
+
+1. Install THREE.js:
+
+`npm install three --save`
+
+2. Optionally, install THREE.js typings:
+
+`npm install @types/three --save-dev`
+
+3. Install this package:
+
+`npm install vue-threejs-composer --save`
+
+###Samples
+
+If you want to test out our samples, you can clone our repository and launch our samples with the following commands:
+
+1. Install dependencies
+
+`npm install`
+
+2. Launch development server
+
+`npm run serve`
+
+3. Play around with the files in */samples*. The demo scene is situated at */samples/views/Demo.vue*
+
+###Define your scenes
 
 ```html
 <div>
@@ -72,7 +111,7 @@ Contains Vuejs bindings for creating and interacting with Threejs scenes and obj
 </div>
 ```
 
-####Define custom behaviours
+###Define custom behaviours
 
 ```ts
 import { Component, Mixins, Prop } from "vue-property-decorator";

jest.config.js

@@ -1,25 +1,17 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue',
-    'ts',
-    'tsx'
-  ],
+  moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
   transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.tsx?$': 'ts-jest'
+    "^.+\\.vue$": "vue-jest",
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+    "^.+\\.tsx?$": "ts-jest"
   },
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
+    "^@/(.*)$": "<rootDir>/src/$1"
   },
-  snapshotSerializers: [
-    'jest-serializer-vue'
-  ],
+  snapshotSerializers: ["jest-serializer-vue"],
   testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
   ],
-  testURL: 'http://localhost/'
-}
+  testURL: "http://localhost/"
+};

package.json

@@ -1,34 +1,43 @@
 {
-  "name": "vue-three-composer",
+  "name": "vue-threejs-composer",
   "version": "0.1.0",
-  "private": true,
+  "main": "build/src/index.js",
+  "typings": "build/src/index.d.ts",
+  "repository": "https://github.com/sascha245/vue-threejs-composer",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "threejs"
+  ],
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve ./samples/main.ts",
+    "build": "tsc -p tsconfig.prod.json",
     "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "validate": "npm run build && npm run test:unit && npm pack --dry-run"
   },
   "dependencies": {
-    "@types/three": "^0.92.24",
-    "three": "^0.97.0",
-    "vue": "^2.5.17",
+    "events": "^3.0.0",
     "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^7.0.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vue-property-decorator": "^7.0.0"
   },
   "devDependencies": {
+    "@types/events": "^1.2.0",
     "@types/jest": "^23.1.4",
+    "@types/three": "^0.92.24",
     "@vue/cli-plugin-babel": "^3.0.4",
     "@vue/cli-plugin-typescript": "^3.0.4",
     "@vue/cli-plugin-unit-jest": "^3.0.4",
     "@vue/cli-service": "^3.0.4",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",
     "lint-staged": "^7.2.2",
+    "three": "^0.97.0",
     "ts-jest": "^23.0.0",
     "tslint-config-prettier": "^1.15.0",
     "typescript": "^3.0.0",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.17"
   },
   "browserslist": [
@@ -48,5 +57,9 @@
       "vue-cli-service lint",
       "git add"
     ]
+  },
+  "peerDependencies": {
+    "three": "^0.97.0",
+    "vue": "^2.5.17"
   }
 }

src/App.vue renamed to samples/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/demo">Demo</router-link>
     </div>
     <router-view/>
   </div>

samples/main.ts

@@ -0,0 +1,11 @@
+import Vue from "vue";
+
+import App from "./App.vue";
+import router from "./router";
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount("#app");

src/router.ts renamed to samples/router.ts

@@ -1,9 +1,9 @@
-import Vue from 'vue';
-import Router from 'vue-router';
+import Vue from "vue";
+import Router from "vue-router";
 
-import Home from './views/Home';
+import Home from "./views/Home";
 
-const About = () => import(/* webpackChunkName: "about" */ "./views/About");
+const Demo = () => import(/* webpackChunkName: "about" */ "./views/Demo");
 
 Vue.use(Router);
 
@@ -15,12 +15,12 @@ export default new Router({
       component: Home
     },
     {
-      path: "/about",
-      name: "about",
+      path: "/demo",
+      name: "demo",
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: About
+      component: Demo
     }
   ]
 });

src/shims-vue.d.ts renamed to samples/shims-vue.d.ts

@@ -3,7 +3,7 @@ import { Component, Vue } from "vue-property-decorator";
 
 import {
     CameraFactory, components, GeometryFactory, LightFactory, MaterialFactory
-} from "@/vue-three";
+} from "../../src";
 
 import { MyBehaviour } from "./MyBehaviour";
 

src/views/About.ts renamed to samples/views/Demo.ts

@@ -1,4 +1,4 @@
-<script lang="ts" src="./About.ts"></script>
+<script lang="ts" src="./Demo.ts"></script>
 
 <template>
   <div class="about">

src/views/About.vue renamed to samples/views/Demo.vue

@@ -1,10 +1,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
-
 @Component({
   components: {
-    HelloWorld
   }
 })
 export default class Home extends Vue {}

src/views/Home.ts renamed to samples/views/Home.ts

@@ -2,8 +2,7 @@
 
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    Home
   </div>
 </template>
 

src/views/Home.vue renamed to samples/views/Home.vue

@@ -1,8 +1,7 @@
 import * as THREE from "three";
 import { Component, Mixins, Prop } from "vue-property-decorator";
 
-import { Behaviour } from "@/vue-three";
-
+import { Behaviour } from "../../src";
 import { OrbitControls } from "./OrbitControls";
 
 interface Vec3 {

src/views/MyBehaviour.ts renamed to samples/views/MyBehaviour.ts

@@ -0,0 +1,21 @@
+import * as tslib_1 from "tslib";
+import { Component, Mixins } from "vue-property-decorator";
+import { ThreeComponent, ThreeObjectComponent, ThreeSceneComponent } from "./base";
+let Behaviour = class Behaviour extends Mixins(ThreeComponent, ThreeSceneComponent, ThreeObjectComponent) {
+    ready() {
+        if (this.update) {
+            this.app().on("update", this.update);
+        }
+    }
+    beforeDestroy() {
+        console.log("before destroy behaviour");
+        if (this.update) {
+            this.app().off("update", this.update);
+        }
+    }
+};
+Behaviour = tslib_1.__decorate([
+    Component
+], Behaviour);
+export { Behaviour };
+//# sourceMappingURL=Behaviour.jsx.map