plugin typings

dist/types/v-snow/index.d.ts

@@ -0,0 +1,10 @@
+import { PluginObject } from "vue";
+import { DirectiveBinding } from "vue/types/options";
+import component from "./Component.vue";
+import Scene from "./Scene";
+export declare const directive: {
+    inserted(el: HTMLElement, binding: DirectiveBinding): void;
+    update(el: HTMLElement, binding: DirectiveBinding): void;
+};
+declare const plugin: PluginObject<any>;
+export { plugin as default, component as VSnowContainer, directive as VSnowDirective, Scene as VSnowFunction };

package.json

@@ -5,10 +5,10 @@
   "files": [
     "dist/v-snow.js",
     "dist/v-snow.min.js",
-    "dist/typings/v-snow"
+    "dist/types/v-snow"
   ],
-  "typings": "dist/typings",
-  "version": "1.0.1",
+  "typings": "dist/types/v-snow/index.d.ts",
+  "version": "1.0.33",
   "author": "Alexander Burkov <[email protected]>",
   "repository": {
     "type": "git",

src/v-snow/Scene.ts

@@ -5,7 +5,7 @@ import { _debounce } from "./utils";
 const defaultSceneConfig: SceneConfig = {
   color: "#FFFFFF",
   opacity: 1,
-  density: 100,
+  density: 50,
   fall_speed: 2,
   size: 10,
   zIndex: "999"

src/v-snow/index.ts

@@ -0,0 +1,39 @@
+import { PluginObject } from "vue";
+import { DirectiveBinding } from "vue/types/options";
+import component from "./Component.vue";
+import Scene from "./Scene";
+
+const statefulDirective = () => {
+  let scene: Scene;
+  return {
+    inserted(el: HTMLElement, binding: DirectiveBinding) {
+      scene = new Scene(el, binding.value);
+      scene.start();
+    },
+    update(el: HTMLElement, binding: DirectiveBinding) {
+      scene.updateConfig(binding.value);
+    }
+  };
+};
+
+export const directive = statefulDirective();
+
+const plugin: PluginObject<any> = {
+  install(Vue) {
+    Vue.directive("snow", directive);
+    Vue.component("VueSnow", component);
+  }
+};
+
+// auto install
+if (typeof window !== "undefined" && window.Vue) {
+  plugin.install(window.Vue, {});
+  (window as any).vsnow = plugin;
+}
+
+export {
+  plugin as default,
+  component as VSnowContainer,
+  directive as VSnowDirective,
+  Scene as VSnowFunction
+};

tsconfig.json

@@ -11,7 +11,8 @@
     "experimentalDecorators": true,
     "noImplicitAny": false,
     "declaration": true,
-    "declarationDir": "./dist/typings"
+    "declarationDir": "./dist/types"
   },
-  "include": ["./src/**/*"]
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules", "**/__tests__/*"]
 }

webpack.config.js

@@ -6,8 +6,8 @@ const TerserPlugin = require("terser-webpack-plugin");
 module.exports = {
   mode: "production",
   entry: {
-    "v-snow": "./src/v-snow/index.js",
-    "v-snow.min": "./src/v-snow/index.js",
+    "v-snow": "./src/v-snow/index.ts",
+    "v-snow.min": "./src/v-snow/index.ts",
     main: "./src/main.js"
   },
   output: {