build script changes, vue: from jsx to template

README.md

@@ -42,6 +42,7 @@ I've created this plugin because I hate ugly and space consuming scrollbars. Sim
  - RTL Direction support. (with normalization)
  - Simple and effective scrollbar-styling.
  - Rich extension system.
+ - TypeScript support.
 
 ## Sponsors
 <table>
@@ -138,7 +139,7 @@ I recommend setting these options in your **tsconfig.json**:
 {
     "compilerOptions": {
         "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true,
+        "esModuleInterop": true
     }
 }
 ```

build.js

@@ -1,8 +1,8 @@
-const sh = require('shelljs');
 const fs = require('fs');
+const sh = require('shelljs');
 const chalk = require('chalk');
 const gulp = require('gulp');
-const UglifyJS = require('uglify-js');
+const uglify = require('uglify-js');
 const csso = require('csso');
 
 const uglifyFiles = [
@@ -28,7 +28,7 @@ gulp.task('uglify', function (done) {
     uglifyFiles.forEach((file) => {
         if (sh.test('-f', file.src)) {
             sh.echo(chalk.yellowBright('uglify: ') + chalk.greenBright(`${file.src} → ${file.dest}`));
-            sh.ShellString(UglifyJS.minify(fs.readFileSync(file.src, 'utf-8'), {
+            sh.ShellString(uglify.minify(fs.readFileSync(file.src, 'utf-8'), {
                 ie8: true,
                 compress: {
                     ie8: true

packages/overlayscrollbars-ngx/build.js

@@ -10,7 +10,6 @@ const filesInfo = {
     tsconfigJsonPath: './tsconfig.json',
     packageJsonPath: './package.json',
     cache: [
-        '.rpt2_cache', // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
         './ngc'
     ]
 }
@@ -114,6 +113,8 @@ gulp.task('rollup', function (done) {
     (async function () {
         let rollupTsconfig = {
             useTsconfigDeclarationDir: true,
+            objectHashIgnoreUnknownHack: true,
+            clean: true,
             tsconfig: filesInfo.tsconfigJsonPath,
             tsconfigOverride: {
                 compilerOptions: {

packages/overlayscrollbars-ngx/package.json

@@ -51,6 +51,7 @@
         "overlayscrollbars": "^1.9.0"
     },
     "scripts": {
+        "setup": "npm i && cd example && npm i && cd ..",
         "build": "node build.js",
         "example": "cd example && npx ng serve",
         "test": "echo \"Error: no test specified\" && exit 1"

packages/overlayscrollbars-react/build.js

@@ -8,9 +8,7 @@ const filesInfo = {
     exampleFolder: './example',
     tsconfigJsonPath: './tsconfig.json',
     packageJsonPath: './package.json',
-    cache: [
+    cache: []
-        '.rpt2_cache' // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
-    ]
 }
 const packagePaths = {
     main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
@@ -93,6 +91,8 @@ gulp.task('rollup', function (done) {
     (async function () {
         let rollupTsconfig = {
             useTsconfigDeclarationDir: true,
+            objectHashIgnoreUnknownHack: true,
+            clean: true,
             tsconfig: filesInfo.tsconfigJsonPath,
             tsconfigOverride: {
                 compilerOptions: {

packages/overlayscrollbars-react/dist/overlayscrollbars-react.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n    children?: any;\r\n    options?: OverlayScrollbars.Options;\r\n    extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n    private _osInstance: OverlayScrollbars | null = null;\r\n    private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n    constructor(props: OverlayScrollbarsComponentProps) {\r\n        super(props);\r\n        this._osTargetRef = React.createRef();\r\n    }\r\n\r\n    osInstance(): OverlayScrollbars | null {\r\n        return this._osInstance;\r\n    }\r\n\r\n    osTarget(): HTMLDivElement | null {\r\n        return this._osTargetRef.current || null;\r\n    }\r\n\r\n    componentDidMount() {\r\n        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.destroy();\r\n            this._osInstance = null;\r\n        }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.options(this.props.options);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        let {\r\n            options,\r\n            extensions,\r\n            children,\r\n            ...divProps\r\n        } = this.props;\r\n\r\n        return (\r\n            <div {...divProps} ref={this._osTargetRef}>\r\n                {...this.props.children}\r\n            </div>\r\n        );\r\n    }\r\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAKU,EALV,AAIA,4DACU,CAAC;QAEf,QACI,6CAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;KACL;CACJ;;;;"}
+{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n    children?: any;\n    options?: OverlayScrollbars.Options;\n    extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n    private _osInstance: OverlayScrollbars | null = null;\n    private _osTargetRef: RefObject<HTMLDivElement>;\n\n    constructor(props: OverlayScrollbarsComponentProps) {\n        super(props);\n        this._osTargetRef = React.createRef();\n    }\n\n    osInstance(): OverlayScrollbars | null {\n        return this._osInstance;\n    }\n\n    osTarget(): HTMLDivElement | null {\n        return this._osTargetRef.current || null;\n    }\n\n    componentDidMount() {\n        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n    }\n\n    componentWillUnmount() {\n        if (OverlayScrollbars.valid(this._osInstance)) {\n            this._osInstance.destroy();\n            this._osInstance = null;\n        }\n    }\n\n    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n        if (OverlayScrollbars.valid(this._osInstance)) {\n            this._osInstance.options(this.props.options);\n        }\n    }\n\n    render() {\n        let {\n            options,\n            extensions,\n            children,\n            ...divProps\n        } = this.props;\n\n        return (\n            <div {...divProps} ref={this._osTargetRef}>\n                {...this.props.children}\n            </div>\n        );\n    }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAKU,EALV,AAIA,4DACU,CAAC;QAEf,QACI,6CAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;KACL;CACJ;;;;"}

packages/overlayscrollbars-react/dist/overlayscrollbars-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n    children?: any;\r\n    options?: OverlayScrollbars.Options;\r\n    extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n    private _osInstance: OverlayScrollbars | null = null;\r\n    private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n    constructor(props: OverlayScrollbarsComponentProps) {\r\n        super(props);\r\n        this._osTargetRef = React.createRef();\r\n    }\r\n\r\n    osInstance(): OverlayScrollbars | null {\r\n        return this._osInstance;\r\n    }\r\n\r\n    osTarget(): HTMLDivElement | null {\r\n        return this._osTargetRef.current || null;\r\n    }\r\n\r\n    componentDidMount() {\r\n        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.destroy();\r\n            this._osInstance = null;\r\n        }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n        if (OverlayScrollbars.valid(this._osInstance)) {\r\n            this._osInstance.options(this.props.options);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        let {\r\n            options,\r\n            extensions,\r\n            children,\r\n            ...divProps\r\n        } = this.props;\r\n\r\n        return (\r\n            <div {...divProps} ref={this._osTargetRef}>\r\n                {...this.props.children}\r\n            </div>\r\n        );\r\n    }\r\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAKU,EAJV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,4DACU,CAAC;YAEf,QACIA,iDAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;SACL;QACL,iCAAC;IAAD,CAhDA,CAAgDC,eAAS;;;;;;;;;;;;"}
+{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n    children?: any;\n    options?: OverlayScrollbars.Options;\n    extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n    private _osInstance: OverlayScrollbars | null = null;\n    private _osTargetRef: RefObject<HTMLDivElement>;\n\n    constructor(props: OverlayScrollbarsComponentProps) {\n        super(props);\n        this._osTargetRef = React.createRef();\n    }\n\n    osInstance(): OverlayScrollbars | null {\n        return this._osInstance;\n    }\n\n    osTarget(): HTMLDivElement | null {\n        return this._osTargetRef.current || null;\n    }\n\n    componentDidMount() {\n        this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n    }\n\n    componentWillUnmount() {\n        if (OverlayScrollbars.valid(this._osInstance)) {\n            this._osInstance.destroy();\n            this._osInstance = null;\n        }\n    }\n\n    componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n        if (OverlayScrollbars.valid(this._osInstance)) {\n            this._osInstance.options(this.props.options);\n        }\n    }\n\n    render() {\n        let {\n            options,\n            extensions,\n            children,\n            ...divProps\n        } = this.props;\n\n        return (\n            <div {...divProps} ref={this._osTargetRef}>\n                {...this.props.children}\n            </div>\n        );\n    }\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAKU,EAJV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,4DACU,CAAC;YAEf,QACIA,iDAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;SACL;QACL,iCAAC;IAAD,CAhDA,CAAgDC,eAAS;;;;;;;;;;;;"}

packages/overlayscrollbars-react/package.json

@@ -44,6 +44,7 @@
         "overlayscrollbars": "^1.9.0"
     },
     "scripts": {
+        "setup": "npm i && cd example && npm i && cd ..",
         "build": "node build.js",
         "example": "cd example && npm start",
         "test": "echo \"Error: no test specified\" && exit 1"

packages/overlayscrollbars-react/rollup.config.js

@@ -1,38 +0,0 @@
-import commonjs from 'rollup-plugin-commonjs';
-import typescript from 'rollup-plugin-typescript2';
-import resolve from 'rollup-plugin-node-resolve';
-import pkg from './package.json';
-
-const globals = { 
-    'react': 'React',
-    'overlayscrollbars': 'OverlayScrollbars'
-};
-const external = [...Object.keys(pkg.devDependencies), ...Object.keys(pkg.peerDependencies)];
-
-export default {
-    input: './src/index.ts',
-    output: [
-        {
-        name: 'OverlayScrollbarsReact',
-        globals: globals,
-            file: pkg.main,
-            format: 'umd',
-            exports: 'named',
-            sourcemap: true
-        },
-        {
-            file: pkg.module,
-            format: 'es',
-            exports: 'named',
-            sourcemap: true
-        }
-    ],
-    external: external,
-    plugins: [
-        typescript({
-            useTsconfigDeclarationDir : true
-        }),
-        resolve(),
-        commonjs()
-    ]
-};

packages/overlayscrollbars-vue/build.js

@@ -8,9 +8,7 @@ const filesInfo = {
     exampleFolder: './example',
     tsconfigJsonPath: './tsconfig.json',
     packageJsonPath: './package.json',
-    cache: [
+    cache: []
-        '.rpt2_cache' // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
-    ]
 }
 const packagePaths = {
     main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
@@ -32,12 +30,14 @@ const rollup = require('rollup');
 const rollupCommonJs = require('rollup-plugin-commonjs');
 const rollupTypeScript = require('rollup-plugin-typescript2');
 const rollupResolve = require('rollup-plugin-node-resolve');
+const rollupVue = require('rollup-plugin-vue');
 const rollupInputConfig = {
     input: `${filesInfo.srcFolder}/index.ts`,
     external: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
     plugins: [
         rollupResolve(),
-        rollupCommonJs()
+        rollupCommonJs(),
+        rollupVue({ defaultLang: 'ts' })
     ]
 };
 const rollupOutputConfig = {
@@ -93,6 +93,8 @@ gulp.task('rollup', function (done) {
     (async function () {
         let rollupTsconfig = {
             useTsconfigDeclarationDir: true,
+            objectHashIgnoreUnknownHack: true,
+            clean: true,
             tsconfig: filesInfo.tsconfigJsonPath,
             tsconfigOverride: {
                 compilerOptions: {

packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.esm.js

@@ -1,8 +1,8 @@
-import Vue from 'vue';
 import OverlayScrollbars from 'overlayscrollbars';
+import Vue from 'vue';
 
 class OverlayScrollbarsComponent extends Vue.extend({
-    name: 'overlay-scrollbars',
+    name: "overlay-scrollbars",
     props: {
         options: {
             type: Object
@@ -39,9 +39,6 @@ class OverlayScrollbarsComponent extends Vue.extend({
             osInstance.destroy();
             this._osInstace = null;
         }
-    },
-    render(createElement) {
-        return (createElement("div", null, this.$slots.default));
     }
 }) {
     constructor() {
@@ -50,14 +47,137 @@ class OverlayScrollbarsComponent extends Vue.extend({
     }
 }
 
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+/* server only */
+, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+  if (typeof shadowMode !== 'boolean') {
+    createInjectorSSR = createInjector;
+    createInjector = shadowMode;
+    shadowMode = false;
+  } // Vue.extend constructor export interop.
+
+
+  var options = typeof script === 'function' ? script.options : script; // render functions
+
+  if (template && template.render) {
+    options.render = template.render;
+    options.staticRenderFns = template.staticRenderFns;
+    options._compiled = true; // functional template
+
+    if (isFunctionalTemplate) {
+      options.functional = true;
+    }
+  } // scopedId
+
+
+  if (scopeId) {
+    options._scopeId = scopeId;
+  }
+
+  var hook;
+
+  if (moduleIdentifier) {
+    // server build
+    hook = function hook(context) {
+      // 2.3 injection
+      context = context || // cached call
+      this.$vnode && this.$vnode.ssrContext || // stateful
+      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+      // 2.2 with runInNewContext: true
+
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__;
+      } // inject component styles
+
+
+      if (style) {
+        style.call(this, createInjectorSSR(context));
+      } // register component module identifier for async chunk inference
+
+
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    }; // used by ssr in case component is cached and beforeCreate
+    // never gets called
+
+
+    options._ssrRegister = hook;
+  } else if (style) {
+    hook = shadowMode ? function () {
+      style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+    } : function (context) {
+      style.call(this, createInjector(context));
+    };
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // register for functional component in vue file
+      var originalRender = options.render;
+
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+
+  return script;
+}
+
+var normalizeComponent_1 = normalizeComponent;
+
+/* script */
+const __vue_script__ = OverlayScrollbarsComponent;
+
+/* template */
+var __vue_render__ = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", [_vm._t("default")], 2)
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+
+  
+  var OverlayScrollbarsComponent$1 = normalizeComponent_1(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    undefined,
+    undefined
+  );
+
 const OverlayScrollbarsPlugin = {
     install(vue, options) {
         if (options) {
             OverlayScrollbars.defaultOptions(options);
         }
-        vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
+        vue.component('overlay-scrollbars', OverlayScrollbarsComponent$1);
     }
 };
 
-export { OverlayScrollbarsComponent, OverlayScrollbarsPlugin };
+export { OverlayScrollbarsComponent$1 as OverlayScrollbarsComponent, OverlayScrollbarsPlugin };
 //# sourceMappingURL=overlayscrollbars-vue.esm.js.map

packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.js

@@ -1,11 +1,11 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('overlayscrollbars')) :
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('overlayscrollbars'), require('vue')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'vue', 'overlayscrollbars'], factory) :
+    typeof define === 'function' && define.amd ? define(['exports', 'overlayscrollbars', 'vue'], factory) :
-    (global = global || self, factory(global.OverlayScrollbarsVue = {}, global.Vue, global.OverlayScrollbars));
+    (global = global || self, factory(global.OverlayScrollbarsVue = {}, global.OverlayScrollbars, global.Vue));
-}(this, function (exports, Vue, OverlayScrollbars) { 'use strict';
+}(this, function (exports, OverlayScrollbars, Vue) { 'use strict';
 
-    Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
     OverlayScrollbars = OverlayScrollbars && OverlayScrollbars.hasOwnProperty('default') ? OverlayScrollbars['default'] : OverlayScrollbars;
+    Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -45,7 +45,7 @@
         }
         return OverlayScrollbarsComponent;
     }(Vue.extend({
-        name: 'overlay-scrollbars',
+        name: "overlay-scrollbars",
         props: {
             options: {
                 type: Object
@@ -82,22 +82,142 @@
                 osInstance.destroy();
                 this._osInstace = null;
             }
-        },
-        render: function (createElement) {
-            return (createElement("div", null, this.$slots.default));
         }
     })));
 
+    function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+    /* server only */
+    , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+      } // Vue.extend constructor export interop.
+
+
+      var options = typeof script === 'function' ? script.options : script; // render functions
+
+      if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true; // functional template
+
+        if (isFunctionalTemplate) {
+          options.functional = true;
+        }
+      } // scopedId
+
+
+      if (scopeId) {
+        options._scopeId = scopeId;
+      }
+
+      var hook;
+
+      if (moduleIdentifier) {
+        // server build
+        hook = function hook(context) {
+          // 2.3 injection
+          context = context || // cached call
+          this.$vnode && this.$vnode.ssrContext || // stateful
+          this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+          // 2.2 with runInNewContext: true
+
+          if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+            context = __VUE_SSR_CONTEXT__;
+          } // inject component styles
+
+
+          if (style) {
+            style.call(this, createInjectorSSR(context));
+          } // register component module identifier for async chunk inference
+
+
+          if (context && context._registeredComponents) {
+            context._registeredComponents.add(moduleIdentifier);
+          }
+        }; // used by ssr in case component is cached and beforeCreate
+        // never gets called
+
+
+        options._ssrRegister = hook;
+      } else if (style) {
+        hook = shadowMode ? function () {
+          style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+        } : function (context) {
+          style.call(this, createInjector(context));
+        };
+      }
+
+      if (hook) {
+        if (options.functional) {
+          // register for functional component in vue file
+          var originalRender = options.render;
+
+          options.render = function renderWithStyleInjection(h, context) {
+            hook.call(context);
+            return originalRender(h, context);
+          };
+        } else {
+          // inject component registration as beforeCreate hook
+          var existing = options.beforeCreate;
+          options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+      }
+
+      return script;
+    }
+
+    var normalizeComponent_1 = normalizeComponent;
+
+    /* script */
+    const __vue_script__ = OverlayScrollbarsComponent;
+
+    /* template */
+    var __vue_render__ = function() {
+      var _vm = this;
+      var _h = _vm.$createElement;
+      var _c = _vm._self._c || _h;
+      return _c("div", [_vm._t("default")], 2)
+    };
+    var __vue_staticRenderFns__ = [];
+    __vue_render__._withStripped = true;
+
+      /* style */
+      const __vue_inject_styles__ = undefined;
+      /* scoped */
+      const __vue_scope_id__ = undefined;
+      /* module identifier */
+      const __vue_module_identifier__ = undefined;
+      /* functional template */
+      const __vue_is_functional_template__ = false;
+      /* style inject */
+      
+      /* style inject SSR */
+      
+
+      
+      var OverlayScrollbarsComponent$1 = normalizeComponent_1(
+        { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+        __vue_inject_styles__,
+        __vue_script__,
+        __vue_scope_id__,
+        __vue_is_functional_template__,
+        __vue_module_identifier__,
+        undefined,
+        undefined
+      );
+
     var OverlayScrollbarsPlugin = {
         install: function (vue, options) {
             if (options) {
                 OverlayScrollbars.defaultOptions(options);
             }
-            vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
+            vue.component('overlay-scrollbars', OverlayScrollbarsComponent$1);
         }
     };
 
-    exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
+    exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent$1;
     exports.OverlayScrollbarsPlugin = OverlayScrollbarsPlugin;
 
     Object.defineProperty(exports, '__esModule', { value: true });

packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.d.ts

@@ -1,5 +1,4 @@
-import Vue, { VueConstructor } from 'vue';
+import OverlayScrollbars from "overlayscrollbars";
-import OverlayScrollbars from 'overlayscrollbars';
 export interface OverlayScrollbarsComponentData {
 }
 export interface OverlayScrollbarsComponentMethods {
@@ -12,8 +11,3 @@ export interface OverlayScrollbarsComponentProps {
     options: OverlayScrollbars.Options;
     extensions: OverlayScrollbars.Extensions;
 }
-declare const OverlayScrollbarsComponent_base: VueConstructor<OverlayScrollbarsComponentData & OverlayScrollbarsComponentMethods & OverlayScrollbarsComponentComputed & OverlayScrollbarsComponentProps & Vue>;
-export declare class OverlayScrollbarsComponent extends OverlayScrollbarsComponent_base {
-    private _osInstace;
-}
-export {};

packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.vue.d.ts

@@ -0,0 +1,7 @@
+import Vue, { VueConstructor } from "vue";
+import { OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps } from "./OverlayScrollbarsComponent";
+declare const OverlayScrollbarsComponent_base: VueConstructor<OverlayScrollbarsComponentData & OverlayScrollbarsComponentMethods & OverlayScrollbarsComponentComputed & OverlayScrollbarsComponentProps & Vue>;
+export default class OverlayScrollbarsComponent extends OverlayScrollbarsComponent_base {
+    private _osInstace;
+}
+export {};

packages/overlayscrollbars-vue/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './OverlayScrollbarsPlugin';
 export * from './OverlayScrollbarsComponent';
+export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';

packages/overlayscrollbars-vue/example/src/App.vue

@@ -84,11 +84,11 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import Vue, { VueConstructor } from "vue";
 import OverlayScrollbars from "overlayscrollbars";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 
-interface AppData {
+export interface AppData {
     framework: string;
     componentClass: string;
     loremIpsumLong: string;
@@ -97,7 +97,7 @@ interface AppData {
     componentContent: string;
     osComponentOptions: OverlayScrollbars.Options;
 }
-interface AppMethods {
+export interface AppMethods {
     onBtnScrollRandom(
         event: MouseEvent,
         refArray: Array<OverlayScrollbarsComponent>
@@ -106,8 +106,8 @@ interface AppMethods {
     onBtnChangeContent(): void;
     onBtnLog(): void;
 }
-interface AppComputed { }
+export interface AppComputed { }
-interface AppProps { }
+export interface AppProps { }
 
 export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
     name: "app",

packages/overlayscrollbars-vue/package.json

@@ -33,15 +33,18 @@
         "rollup-plugin-commonjs": "^10.0.1",
         "rollup-plugin-node-resolve": "^5.2.0",
         "rollup-plugin-typescript2": "^0.22.0",
+        "rollup-plugin-vue": "^5.0.1",
         "shelljs": "0.7.7",
         "typescript": "^3.0.3",
-        "vue": "^2.6.10"
+        "vue": "^2.6.10",
+        "vue-template-compiler": "^2.6.10"
     },
     "peerDependencies": {
         "vue": "^2.6.10",
         "overlayscrollbars": "^1.9.0"
     },
     "scripts": {
+        "setup": "npm i && cd example && npm i && cd ..",
         "build": "node build.js",
         "example": "cd example && npm run serve",
         "test": "echo \"Error: no test specified\" && exit 1"

packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.ts

@@ -0,0 +1,15 @@
+import OverlayScrollbars from "overlayscrollbars";
+
+export interface OverlayScrollbarsComponentData { }
+
+export interface OverlayScrollbarsComponentMethods {
+    osInstance(): OverlayScrollbars | null;
+    osTarget(): HTMLDivElement | null;
+}
+
+export interface OverlayScrollbarsComponentComputed { }
+
+export interface OverlayScrollbarsComponentProps {
+    options: OverlayScrollbars.Options;
+    extensions: OverlayScrollbars.Extensions;
+}

packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue, { VueConstructor, VNode, CreateElement, PropType } from "vue";
+import OverlayScrollbars from "overlayscrollbars";
+import {
+    OverlayScrollbarsComponentData,
+    OverlayScrollbarsComponentMethods,
+    OverlayScrollbarsComponentComputed,
+    OverlayScrollbarsComponentProps
+} from "./OverlayScrollbarsComponent";
+
+// https://github.com/vuejs/vue/issues/7060
+export default class OverlayScrollbarsComponent extends Vue.extend<
+    OverlayScrollbarsComponentData,
+    OverlayScrollbarsComponentMethods,
+    OverlayScrollbarsComponentComputed,
+    OverlayScrollbarsComponentProps
+    >({
+        name: "overlay-scrollbars", // https://vuejs.org/v2/guide/components-registration.html#Component-Names
+        props: {
+            options: {
+                type: Object as PropType<OverlayScrollbars.Options>
+            },
+            extensions: {
+                type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>
+            }
+        },
+        methods: {
+            osInstance(): OverlayScrollbars | null {
+                return (this as OverlayScrollbarsComponent)._osInstace;
+            },
+            osTarget(): HTMLDivElement | null {
+                return (this.$el as HTMLDivElement) || null;
+            }
+        },
+        watch: {
+            options(
+                currOptions: OverlayScrollbars.Options,
+                oldOptions: OverlayScrollbars.Options
+            ) {
+                let osInstance = (this as OverlayScrollbarsComponent)._osInstace;
+                if (OverlayScrollbars.valid(osInstance)) {
+                    osInstance.options(currOptions);
+                }
+            }
+        },
+
+        data() {
+            return {};
+        },
+
+        mounted() {
+            (this as OverlayScrollbarsComponent)._osInstace = OverlayScrollbars(
+                this.osTarget(),
+                this.options || {},
+                this.extensions
+            );
+        },
+
+        beforeDestroy() {
+            let osInstance = (this as OverlayScrollbarsComponent)._osInstace;
+            if (OverlayScrollbars.valid(osInstance)) {
+                osInstance.destroy();
+                (this as OverlayScrollbarsComponent)._osInstace = null;
+            }
+        }
+    }) {
+    private _osInstace: OverlayScrollbars | null = null;
+}
+</script>

packages/overlayscrollbars-vue/src/OverlayScrollbarsPlugin.ts

@@ -1,7 +1,6 @@
 import { VueConstructor, PluginObject } from 'vue';
-import { OverlayScrollbarsComponent } from './OverlayScrollbarsComponent';
 import OverlayScrollbars from 'overlayscrollbars';
-
+import OverlayScrollbarsComponent from './OverlayScrollbarsComponent.vue';
 
 export const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options> = {
     install(vue: VueConstructor, options?: OverlayScrollbars.Options) {

packages/overlayscrollbars-vue/src/index.ts

@@ -1,2 +1,3 @@
 export * from './OverlayScrollbarsPlugin';
 export * from './OverlayScrollbarsComponent';
+export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';

packages/overlayscrollbars-vue/src/shim.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}