feat: add typings

Resolve #8

package.json

@@ -4,13 +4,15 @@
   "homepage": "https://github.com/Hokid/vue-loaders",
   "description": "Vue component wrappers for loaders.css (https://github.com/ConnorAtherton/loaders.css)",
   "author": "Kirill Khoroshilov <[email protected]>",
+  "types": "types/vue-loaders.d.ts",
   "license": "MIT",
   "scripts": {
-    "build": "rm -rf dist/ && rollup -c",
+    "build": "node scripts/build.js",
     "github-releaser": "conventional-github-releaser -p angular -d -t $1"
   },
   "files": [
     "dist/",
+    "types/",
     "README.md",
     "LICENSE.md"
   ],

scripts/build.js

@@ -0,0 +1,148 @@
+const fs = require("fs");
+const path = require("path");
+const rollup = require('rollup');
+const commonjs = require('@rollup/plugin-commonjs');
+const resolve = require('@rollup/plugin-node-resolve');
+const autoprefixer = require('autoprefixer');
+const csso = require('postcss-csso');
+const babel = require('rollup-plugin-babel');
+const postcss = require('rollup-plugin-postcss');
+const {uglify} = require('rollup-plugin-uglify');
+const pkg = require('../package.json');
+
+main()
+  .then(
+    () =>
+      console.info('Success!'),
+    error =>
+      console.error(error)
+  );
+
+async function main() {
+  console.info('Building...');
+  const requests = [];
+
+  const dist = path.join(__dirname, '../dist');
+
+  if (fs.existsSync(dist)) {
+    console.log('Removing existing dist dir...');
+    await fs.promises.rmdir(dist, {
+      recursive: true
+    });
+  }
+
+  console.log('Creating dist dir...');
+  await fs.promises.mkdir(path.join(dist, 'loaders'), {
+    recursive: true
+  });
+
+  requests.push(
+    rollup.rollup({
+      input: 'src/index.js',
+      external: ['vue'],
+      plugins: [
+        resolve(),
+        commonjs(),
+        postcss({
+          inject: false,
+          extract: pkg.style,
+          plugins: [
+            autoprefixer(),
+            csso()
+          ]
+        }),
+        babel({
+          exclude: ['node_modules/**'],
+          runtimeHelpers: true
+        }),
+        uglify()
+      ]
+    }).then(_ => _.write({
+      name: 'VueLoaders',
+      file: pkg.main,
+      format: 'umd',
+      exports: 'default',
+      esModule: true,
+      globals: {
+        'vue': 'Vue'
+      }
+    }))
+  );
+
+  requests.push(
+    rollup.rollup({
+      input: 'src/index.js',
+      external: ['vue'],
+      plugins: [
+        resolve(),
+        commonjs(),
+        postcss({
+          inject: false,
+          extract: false
+        })
+      ]
+    }).then(_ => _.write({
+      file: pkg.module,
+      format: 'es'
+    }))
+  );
+
+  const loadersList = fs.readdirSync('./src/loaders/');
+
+  requests.push(
+    ...createBundleGeneratorForEachLoader(loadersList)
+  );
+
+  requests.push(
+    ...createTypesGeneratorForEachLoader(loadersList)
+  );
+
+  await Promise.all(requests);
+}
+
+function createBundleGeneratorForEachLoader(loaders) {
+  return loaders.map(fileName => rollup.rollup({
+    input: `src/loaders/${fileName}`,
+    external: ['vue'],
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({
+        exclude: ['node_modules/**'],
+        runtimeHelpers: true
+      }),
+      uglify()
+    ]
+  }).then(_ => _.write({
+    name: formatLoaderName(fileName),
+    file: `./dist/loaders/${fileName}`,
+    format: 'umd',
+    esModule: true,
+    globals: {
+      'vue': 'Vue'
+    }
+  })));
+}
+
+const singleLoaderDTSContent =
+  `import {VueLoadersSingleComponentPlugin} from '../../types/vue-loaders';\n`
+  + `declare const plugin: VueLoadersSingleComponentPlugin;\n`
+  + `export default plugin;\n`;
+
+function createTypesGeneratorForEachLoader(loaders) {
+  return loaders.map(fileName => fs.promises.writeFile(
+    path.join(__dirname, '../dist/loaders/', path.basename(fileName, path.extname(fileName)) + '.d.ts'),
+    singleLoaderDTSContent
+  ))
+}
+
+function formatLoaderName(fileName) {
+  return 'VueLoaders' + fileName
+    .split(/-|\.js/)
+    .map(_ =>
+      _.charAt(0)
+        ? _.charAt(0).toUpperCase() + _.slice(1)
+        : _
+    )
+    .join('');
+}

types/vue-loaders.d.ts

@@ -0,0 +1,30 @@
+type Vue = {
+  component(name: string, component: any): any;
+}
+
+type Component = {
+  props: {
+    [key: string]: any;
+  };
+  render(createElement?: any): any;
+}
+
+type SingleComponent = Component & {
+  name: string;
+}
+
+export type VueLoadersPlugin = {
+  component: Component;
+  install(Vue: Vue): void;
+};
+
+export type VueLoadersSingleComponentPlugin = {
+  originName: string;
+  component: SingleComponent;
+  install(Vue: Vue): void;
+}
+
+declare const plugin: VueLoadersPlugin;
+
+export default plugin;
+