[WIP] V5

.babelrc

@@ -1,11 +1,20 @@
 {
   "presets": ["@babel/env", "@babel/typescript"],
   "plugins": [
-    ["@babel/proposal-object-rest-spread", { "loose": true }, "unique"]
+    [
+      "@babel/plugin-transform-template-literals",
+      {
+        "loose": true
+      },
+      "unique"
+    ],
+    ["@babel/proposal-object-rest-spread", { "loose": true }, "unique"],
+    "dev-expression"
   ],
   "env": {
     "test": {
-      "presets": [["@babel/env", { "targets": { "node": "current" } }]]
+      "presets": [["@babel/env", { "targets": { "node": "current" } }]],
+      "plugins": ["dev-expression"]
     }
   }
 }

.eslintignore

@@ -1,5 +1,8 @@
-node_modules
-coverage
-esm
-umd
-website
+/node_modules
+/coverage
+/cjs
+/esm
+/iife
+/website
+/demo
+/addons

.eslintrc.js

@@ -5,6 +5,9 @@ module.exports = {
     jest: true,
     es6: true,
   },
+  globals: {
+    __DEV__: true,
+  },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',

.gitignore

@@ -3,7 +3,13 @@
 /coverage
 /.devserver
 node_modules
-/index.css
-/umd
+/tippy.css
+/cjs
+/iife
 /esm
-/themes
+/themes
+/animations
+/index.d.ts
+/addons/cjs
+/addons/esm
+/addons/iife

README.md

@@ -38,15 +38,15 @@ yarn add tippy.js
 
 ```html
 <script src="https://unpkg.com/popper.js@1"></script>
-<script src="https://unpkg.com/tippy.js@4"></script>
+<script src="https://unpkg.com/tippy.js@5"></script>
 ```
 
 ### Modern ES modules in the browser
 
 ```html
 <script type="module">
   // Uses latest popper.js (unminified code)
-  import tippy from 'https://unpkg.com/tippy.js@4?module'
+  import tippy from 'https://unpkg.com/tippy.js@5?module'
 </script>
 ```
 

addons/index.d.ts

@@ -0,0 +1,16 @@
+import { Instance, Targets, Props } from '..'
+
+export type Delegate = (
+  targets: Targets,
+  props: Partial<Props> & { target: string },
+) => Instance | Instance[]
+
+export type CreateSingleton = (
+  tippyInstances: Instance[],
+  optionalProps?: { delay: number | [number, number] },
+) => Instance
+
+declare const delegate: Delegate
+declare const createSingleton: CreateSingleton
+
+export { delegate, createSingleton }

addons/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "tippy-addons",
+  "private": true,
+  "main": "./cjs/tippy-addons.js",
+  "module": "./esm/tippy-addons.js",
+  "unpkg": "./iife/tippy-addons.min.js",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

build/addons-pure.js

@@ -0,0 +1,4 @@
+import delegate from '../src/addons/delegate.ts'
+import createSingleton from '../src/addons/createSingleton.ts'
+
+export { delegate, createSingleton }

build/addons.js

@@ -0,0 +1,15 @@
+/* eslint-disable no-undef */
+import delegate from '../src/addons/delegate.ts'
+import createSingleton from '../src/addons/createSingleton.ts'
+
+if (typeof tippy === 'function') {
+  tippy.delegate = delegate
+  tippy.createSingleton = createSingleton
+} else {
+  throw new Error(
+    '[tippy.js ERROR] `tippy` is not a global function. Make sure you have ' +
+      'included the tippy script before tippy-addons.',
+  )
+}
+
+export { delegate, createSingleton }

build/animations/perspective-extreme.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/perspective-extreme.scss'

build/animations/perspective-subtle.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/perspective-subtle.scss'

build/animations/perspective.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/perspective.scss'

build/animations/scale-extreme.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/scale-extreme.scss'

build/animations/scale-subtle.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/scale-subtle.scss'

build/animations/scale.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/scale.scss'

build/animations/shift-away-extreme.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/shift-away-extreme.scss'

build/animations/shift-away-subtle.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/shift-away-subtle.scss'

build/animations/shift-toward-extreme.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/shift-toward-extreme.scss'

build/animations/shift-toward-subtle.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/shift-toward-subtle.scss'

build/animations/shift-toward.js

@@ -0,0 +1 @@
+import '../../src/scss/animations/shift-toward.scss'

build/base.js

@@ -0,0 +1,2 @@
+import tippy from '../src'
+export default tippy

build/all.js → build/bundle.js

@@ -1,5 +1,5 @@
-import css from '../index.css'
-import tippy from '../src/index.ts'
+import css from '../tippy.css'
+import tippy from '../src'
 import { injectCSS } from '../src/css'
 
 injectCSS(css)

build/themes/material.js

@@ -0,0 +1 @@
+import '../../src/scss/themes/material.scss'

demo/addons/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tippy Addons Dev</title>
+    <script src="./index.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+    <script>
+      process = { env: {} }
+    </script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        background: #96b5fd;
+        height: 1500px;
+      }
+
+      .container {
+        max-width: 1000px;
+        margin: 0 auto;
+        margin-bottom: 200px;
+      }
+
+      button {
+        background: #eee;
+        border: 1px solid #ddd;
+        font-size: 16px;
+        margin: 2px;
+        padding: 8px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="delegate">
+        <h1>delegate</h1>
+        <button data-tippy-content="one">One</button>
+        <button data-tippy-content="two">Two</button>
+        <button data-tippy-content="three">Three</button>
+      </div>
+
+      <div id="createSingleton">
+        <h1>createSingleton</h1>
+        <button class="createSingleton">One</button>
+        <button class="createSingleton">Two</button>
+        <button class="createSingleton">Three</button>
+      </div>
+    </div>
+    <!-- prettier-ignore -->
+    <script> </script>
+    <!-- Empty script tag fixes Chrome transition bug on page loads. -->
+  </body>
+</html>

demo/addons/index.js

@@ -0,0 +1,22 @@
+import tippy from '../../src'
+import '../../src/scss/index.scss'
+import createSingleton from '../../src/addons/createSingleton'
+import delegate from '../../src/addons/delegate'
+
+delegate('#delegate', {
+  target: 'button',
+})
+
+const instances = tippy('.createSingleton', {
+  content: 'tooltip',
+  updateDuration: 300,
+})
+
+const singleton = createSingleton(instances, {
+  delay: 500,
+})
+
+singleton.destroy(false)
+createSingleton(instances, {
+  delay: 500,
+})

demo/animations/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tippy Animations Dev</title>
+    <script src="./index.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+    <script>
+      process = { env: {} }
+    </script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        background: #96b5fd;
+        height: 1500px;
+      }
+
+      .container {
+        max-width: 1000px;
+        margin: 0 auto;
+        margin-bottom: 200px;
+      }
+
+      button {
+        background: #eee;
+        border: 1px solid #ddd;
+        font-size: 16px;
+        margin: 2px;
+        padding: 8px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container"></div>
+    <!-- prettier-ignore -->
+    <script> </script>
+    <!-- Empty script tag fixes Chrome transition bug on page loads. -->
+  </body>
+</html>

demo/animations/index.js

@@ -0,0 +1,52 @@
+import tippy from '../../src'
+import '../../src/scss/index.scss'
+import '../../src/scss/animations/shift-away-subtle.scss'
+import '../../src/scss/animations/shift-away-extreme.scss'
+import '../../src/scss/animations/shift-toward.scss'
+import '../../src/scss/animations/shift-toward-extreme.scss'
+import '../../src/scss/animations/shift-toward-subtle.scss'
+import '../../src/scss/animations/perspective.scss'
+import '../../src/scss/animations/perspective-extreme.scss'
+import '../../src/scss/animations/perspective-subtle.scss'
+import '../../src/scss/animations/scale.scss'
+import '../../src/scss/animations/scale-subtle.scss'
+import '../../src/scss/animations/scale-extreme.scss'
+
+const container = document.querySelector('.container')
+
+const animations = [
+  'fade',
+  'shift-away',
+  'shift-away-subtle',
+  'shift-away-extreme',
+  'shift-toward',
+  'shift-toward-extreme',
+  'shift-toward-subtle',
+  'perspective',
+  'perspective-extreme',
+  'perspective-subtle',
+  'scale',
+  'scale-subtle',
+  'scale-extreme',
+]
+const placements = ['top', 'bottom', 'left', 'right']
+
+animations.forEach(animation => {
+  const h1 = document.createElement('h1')
+  h1.textContent = animation
+  container.appendChild(h1)
+
+  placements.forEach(placement => {
+    const button = document.createElement('button')
+    button.textContent = placement
+    container.appendChild(button)
+
+    tippy(button, {
+      content: 'Tooltip',
+      animateFill: false,
+      duration: 2000,
+      animation,
+      placement,
+    })
+  })
+})