Close #466 : Add types

.gitignore

@@ -1,9 +1,9 @@
-/node_modules
+node_modules
 /.idea
 /*.iml
 /dist
 /public
-/package-lock.json
-/yarn.lock
-/yarn-error.log
+package-lock.json
+yarn.lock
+yarn-error.log
 /three-examples

docs/README.md

@@ -20,10 +20,23 @@ features:
 footer: Licensed under MIT License, documentation under CC BY 3.0
 ---
 
+<div style="display: flex">
+<div style="width: 50%">
+
 ::: tip New tiles support
-Improve the loading time of big panorams with the the [Tiles adapter](guide/adapters/tiles.md).
+Improve the loading time of big panoramas with the the [Tiles adapter](guide/adapters/tiles.md).
 :::
 
+</div>
+<div style="width: 50%">
+
+::: tip Typescript support
+Photo Sphere Viewer is now shipped with its own typings.
+:::
+
+</div>
+</div>
+
 <iframe style="width: 100%; height: 600px;" src="//jsfiddle.net/mistic100/5r684etx/embedded/result,js/dark" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ::: tip Thanks to Jéremy Heleine

docs/guide/adapters/README.md

@@ -38,7 +38,7 @@ new PhotoSphereViewer.Viewer({
 
 ::: tab ES import
 ```js
-import CubemapAdapter from 'photo-sphere-viewer/dist/adapters/cubemap';
+import { CubemapAdapter } from 'photo-sphere-viewer/dist/adapters/cubemap';
 
 new Viewer({
   adapter: [CubemapAdapter, {

docs/plugins/README.md

@@ -24,7 +24,7 @@ Official plugins (listed on the left menu) are available in the the main `photo-
 Import `photo-sphere-viewer/dist/plugins/markers.css` with the prefered way depending on your tooling.
 
 ```js
-import MarkersPlugins from 'photo-sphere-viewer/dist/plugins/markers';
+import { MarkersPlugins } from 'photo-sphere-viewer/dist/plugins/markers';
 ```
 :::
 

docs/plugins/writing-a-plugin.md

@@ -19,7 +19,7 @@ Your plugin is also an [`EventEmitter`](https://github.com/mistic100/uEvent) wit
 ```js
 import { AbstractPlugin } from 'photo-sphere-viewer';
 
-export default class PhotoSphereViewerCustomPlugin extends AbstractPlugin {
+export class PhotoSphereViewerCustomPlugin extends AbstractPlugin {
 
   static id = 'custom-plugin';
 
@@ -68,7 +68,8 @@ export default {
   ],
   plugins : [
     require('rollup-plugin-babel')({
-      exclude: 'node_modules/**',
+      exclude     : 'node_modules/**',
+      babelHelpers: 'bundled',
     }),
   ],
 };
@@ -192,7 +193,7 @@ A plugin can expose one or more settings to the viewer by using the [Settings pl
 This is done by requiring the settings plugin and calling the `addSetting` method. Consult the [Settings plugin](./plugin-settings.md) page for more information.
 
 ```js
-import SettingsPlugin from 'photo-sphere-viewer/plugins/settings';
+import { SettingsPlugin } from 'photo-sphere-viewer/dist/plugins/settings';
 
 export default class PhotoSphereViewerCustomPlugin extends AbstractPlugin {
 
@@ -227,6 +228,23 @@ export default class PhotoSphereViewerCustomPlugin extends AbstractPlugin {
 }
 ```
 
+For this two work you will need two modifications in your rollup configuration:
+
+```js
+// rollup.config.js
+
+export default {
+  output  : {
+    globals  : {
+      'photo-sphere-viewer/dist/plugins/settings': 'PhotoSphereViewer.SettingsPlugin',
+    },
+  },
+  external: [
+    'photo-sphere-viewer/dist/plugins/settings',
+  ],
+};
+```
+
 
 ## Naming and publishing
 

package.json

@@ -4,9 +4,11 @@
   "description": "A JavaScript library to display Photo Sphere panoramas",
   "homepage": "https://photo-sphere-viewer.js.org",
   "main": "dist/photo-sphere-viewer.js",
+  "types": "dist/photo-sphere-viewer.d.ts",
   "files": [
     "src/",
-    "dist/"
+    "dist/",
+    "types/"
   ],
   "authors": [
     {
@@ -32,7 +34,7 @@
   },
   "dependencies": {
     "three": "^0.131.2",
-    "uevent": "~2.0.0"
+    "uevent": "~2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
@@ -42,7 +44,6 @@
     "@babel/register": "^7.7.4",
     "@csstools/postcss-sass": "https://github.com/sinankeskin/postcss-sass#master",
     "@pixi/jsdoc-template": "^2.5.1",
-    "@rollup/plugin-alias": "^3.0.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-replace": "^3.0.0",
     "@vuepress/plugin-active-header-links": "^1.2.0",
@@ -68,12 +69,14 @@
     "promise-polyfill": "^8.1.3",
     "raw-loader": "^4.0.0",
     "rollup": "^2.36.2",
+    "rollup-plugin-dts": "^3.0.2",
     "rollup-plugin-local-resolve": "^1.0.7",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-string": "^3.0.0",
     "stylelint": "^13.0.0",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-scss": "^3.13.0",
+    "typescript": "^4.4.2",
     "vue-material": "^1.0.0-beta-11",
     "vue-slider-component": "^3.2.11",
     "vue-swatches": "^2.1.0",
@@ -93,6 +96,7 @@
     "test:mocha": "mocha --require @babel/register --recursive \"src/**/*.spec.js\"",
     "test:eslint": "eslint src --ignore-path .gitignore --ignore-pattern \"*.spec.js\"",
     "test:sasslint": "stylelint \"src/**/*.scss\"",
+    "test:types": "cd tests && npm run test",
     "start": "npm-run-all --parallel dev:**",
     "start:doc": "vuepress dev docs",
     "start:remote": "ngrok http 8080",

rollup.config.js

@@ -1,19 +1,19 @@
-import alias from '@rollup/plugin-alias';
 import babel from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
 import fs from 'fs';
 import path from 'path';
 import localResolve from 'rollup-plugin-local-resolve';
 import postcss from 'rollup-plugin-postcss'
+import dts from 'rollup-plugin-dts';
 import { string } from 'rollup-plugin-string';
 
 import pkg from './package.json';
 
 const plugins = fs.readdirSync(path.join(__dirname, 'src/plugins'))
-  .filter(p => p !== 'AbstractPlugin.js');
+  .filter(p => fs.lstatSync(`src/plugins/${p}`).isDirectory());
 
 const adapters = fs.readdirSync(path.join(__dirname, 'src/adapters'))
-  .filter(p => p !== 'AbstractAdapter.js')
+  .filter(p => fs.lstatSync(`src/adapters/${p}`).isDirectory())
   .filter(p => p !== 'equirectangular');
 
 const banner = `/*!
@@ -49,8 +49,6 @@ const baseConfig = {
     'three',
     'uevent',
   ],
-  // wrapped in a function to ensure unique plugin instances for each entry-point
-  // https://github.com/egoist/rollup-plugin-postcss/issues/158
   plugins : () => [
     localResolve(),
     babel({
@@ -95,21 +93,46 @@ const secondaryConfig = {
     'photo-sphere-viewer',
     ...plugins.map(p => `photo-sphere-viewer/dist/plugins/${p}`),
   ],
-
   plugins: () => [
-    ...baseConfig.plugins(),
-    alias({
-      'photo-sphere-viewer': './src',
-      ...plugins.reduce((alias, p) => {
-        alias[`photo-sphere-viewer/dist/plugins/${p}`] = `./src/plugins/${p}`;
-        return alias;
-      }, {}),
-    }),
     replace({
-      // configuration to embed the examples files in PSV source
       delimiters                  : ['', ''],
+      preventAssignment           : true,
       [`from 'three/examples/jsm`]: `from '../../../three-examples`,
+      [`from '../..'`]            : `from 'photo-sphere-viewer'`,
+      ...plugins.reduce((replace, p) => {
+        replace[`from '../${p}'`] = `from 'photo-sphere-viewer/dist/plugins/${p}'`;
+        return replace;
+      }, {}),
     }),
+    ...baseConfig.plugins(),
+  ],
+};
+
+const baseConfigDTS = {
+  output : {
+    format: 'es',
+  },
+  plugins: () => [
+    dts(),
+  ],
+};
+
+const secondaryConfigDTS = {
+  ...baseConfigDTS,
+  external: [
+    ...secondaryConfig.external,
+  ],
+  plugins : () => [
+    replace({
+      delimiters       : ['', ''],
+      preventAssignment: true,
+      [`from '../..'`] : `from 'photo-sphere-viewer'`,
+      ...plugins.reduce((replace, p) => {
+        replace[`from '../${p}'`] = `from 'photo-sphere-viewer/dist/plugins/${p}'`;
+        return replace;
+      }, {}),
+    }),
+    ...baseConfigDTS.plugins(),
   ],
 };
 
@@ -134,8 +157,16 @@ export default [
     },
     plugins: secondaryConfig.plugins(),
   },
-].concat(
-  plugins.map(p => ({
+  {
+    ...baseConfigDTS,
+    input  : 'types/index.d.ts',
+    output : {
+      ...baseConfigDTS.output,
+      file: 'dist/photo-sphere-viewer.d.ts',
+    },
+    plugins: baseConfigDTS.plugins(),
+  },
+  ...plugins.map(p => ({
     ...secondaryConfig,
     input  : `src/plugins/${p}/index.js`,
     output : {
@@ -144,9 +175,8 @@ export default [
       name: `PhotoSphereViewer.${camelize(p)}Plugin`,
     },
     plugins: secondaryConfig.plugins(),
-  }))
-).concat(
-  adapters.map(p => ({
+  })),
+  ...adapters.map(p => ({
     ...secondaryConfig,
     input  : `src/adapters/${p}/index.js`,
     output : {
@@ -155,5 +185,23 @@ export default [
       name: `PhotoSphereViewer.${camelize(p)}Adapter`,
     },
     plugins: secondaryConfig.plugins(),
+  })),
+  ...plugins.map(p => ({
+    ...secondaryConfigDTS,
+    input  : `types/plugins/${p}/index.d.ts`,
+    output : {
+      ...secondaryConfigDTS.output,
+      file: `dist/plugins/${p}.d.ts`,
+    },
+    plugins: secondaryConfigDTS.plugins(),
+  })),
+  ...adapters.map(p => ({
+    ...secondaryConfigDTS,
+    input  : `types/adapters/${p}/index.d.ts`,
+    output : {
+      ...secondaryConfigDTS.output,
+      file: `dist/adapters/${p}.d.ts`,
+    },
+    plugins: secondaryConfigDTS.plugins(),
   }))
-);
+];

src/Viewer.js

@@ -10,6 +10,7 @@ import { CONFIG_PARSERS, DEFAULTS, DEPRECATED_OPTIONS, getConfig, READONLY_OPTIO
 import { CHANGE_EVENTS, EVENTS, IDS, SPHERE_RADIUS, VIEWER_DATA } from './data/constants';
 import { SYSTEM } from './data/system';
 import errorIcon from './icons/error.svg';
+import { AbstractPlugin } from './plugins/AbstractPlugin';
 import { PSVError } from './PSVError';
 import { DataHelper } from './services/DataHelper';
 import { EventsHandler } from './services/EventsHandler';
@@ -24,6 +25,7 @@ import {
   isExtendedPosition,
   isFullscreenEnabled,
   logWarn,
+  pluginInterop,
   requestFullscreen,
   throttle,
   toggleClass
@@ -359,7 +361,13 @@ export class Viewer extends EventEmitter {
    * @returns {PSV.plugins.AbstractPlugin}
    */
   getPlugin(pluginId) {
-    return pluginId ? this.plugins[typeof pluginId === 'function' ? pluginId.id : pluginId] : null;
+    if (typeof pluginId === 'string') {
+      return this.plugins[pluginId];
+    }
+    else {
+      const pluginCtor = pluginInterop(pluginId, AbstractPlugin);
+      return pluginCtor ? this.plugins[pluginCtor.id] : undefined;
+    }
   }
 
   /**

src/adapters/AbstractAdapter.js

@@ -40,7 +40,7 @@ export class AbstractAdapter {
   }
 
   /**
-   * @summary Destroys the service
+   * @summary Destroys the adapter
    */
   destroy() {
     delete this.psv;

src/adapters/cubemap/index.js

@@ -1,5 +1,5 @@
-import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from 'photo-sphere-viewer';
 import * as THREE from 'three';
+import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from '../..';
 
 /**
  * @typedef {Object} PSV.adapters.CubemapAdapter.Cubemap
@@ -20,7 +20,7 @@ const CUBE_HASHMAP = ['left', 'right', 'top', 'bottom', 'back', 'front'];
  * @summary Adapter for cubemaps
  * @memberof PSV.adapters
  */
-export default class CubemapAdapter extends AbstractAdapter {
+export class CubemapAdapter extends AbstractAdapter {
 
   static id = 'cubemap';
   static supportsTransition = true;

src/adapters/equirectangular-tiles/index.js

@@ -1,5 +1,5 @@
-import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from 'photo-sphere-viewer';
 import * as THREE from 'three';
+import { AbstractAdapter, CONSTANTS, PSVError, SYSTEM, utils } from '../..';
 import { Queue } from './Queue';
 import { Task } from './Task';
 
@@ -54,7 +54,7 @@ function powerOfTwo(x) {
  * @summary Adapter for tiled panoramas
  * @memberof PSV.adapters
  */
-export default class EquirectangularTilesAdapter extends AbstractAdapter {
+export class EquirectangularTilesAdapter extends AbstractAdapter {
 
   static id = 'equirectangular-tiles';
   static supportsTransition = false;

src/adapters/equirectangular/index.js

@@ -11,7 +11,7 @@ const SPHERE_SEGMENTS = 64;
  * @summary Adapter for equirectangular panoramas
  * @memberof PSV.adapters
  */
-export default class EquirectangularAdapter extends AbstractAdapter {
+export class EquirectangularAdapter extends AbstractAdapter {
 
   static id = 'equirectangular';
   static supportsTransition = true;