├── .eslintignore ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ ├── CI.yml │ └── release.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── commitlint.config.js ├── jest.config.js ├── package.json ├── postcss.config.js ├── public ├── favicon.png ├── global.css └── index.html ├── rollup.config.js ├── src ├── App.svelte ├── index.js └── main.js └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | public 2 | dist -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | node: true, 5 | es6: true, 6 | 'jest/globals': true, 7 | }, 8 | extends: ['eslint:recommended', 'plugin:jest/recommended', 'prettier'], 9 | overrides: [ 10 | { 11 | files: '*.svelte', 12 | processor: 'svelte3/svelte3', 13 | }, 14 | ], 15 | parserOptions: { 16 | ecmaVersion: 2019, 17 | sourceType: 'module', 18 | }, 19 | plugins: ['svelte3', 'jest'], 20 | }; 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/CI.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - master 7 | push: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v1 17 | - name: Use Node.js 10.x 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: 10.x 21 | - name: yarn install, build, and test 22 | run: | 23 | yarn install 24 | yarn run build 25 | yarn run lint 26 | yarn run prettier 27 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v1 14 | - name: Use Node.js 10.x 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: 10.x 18 | - name: yarn install, build, and release 19 | run: | 20 | yarn install 21 | yarn run build 22 | yarn run semantic-release 23 | env: 24 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 25 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 26 | GH_TOKEN: ${{ secrets.GH_TOKEN }} 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist 3 | node_modules 4 | public/bundle.* -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | The changelog is automatically updated using 4 | [semantic-release](https://github.com/semantic-release/semantic-release). You 5 | can see it on the [releases page](../../releases). 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Michael Dauner 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sveltejs-tippy 2 | 3 | ![npm](https://img.shields.io/npm/v/sveltejs-tippy) 4 | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/sveltejs-tippy) 5 | ![npm](https://img.shields.io/npm/dw/sveltejs-tippy) 6 | 7 | ![GitHub](https://img.shields.io/github/license/mdauner/sveltejs-tippy) 8 | ![Actions Status](https://github.com/mdauner/sveltejs-tippy/workflows/CI/badge.svg) 9 | 10 | Tippy.js for [Svelte](https://svelte.dev/). 11 | 12 | ## Install 13 | 14 | ```shell 15 | $ npm i sveltejs-tippy 16 | ``` 17 | 18 | or 19 | 20 | ```shell 21 | $ yarn add sveltejs-tippy 22 | ``` 23 | 24 | ## How to use 25 | 26 | ### Example 27 | 28 | [![Edit sveltejs-tippy](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/sveltejs-tippy-h2ns7?fontsize=14&module=%2FApp.svelte) 29 | 30 | ```html 31 | 39 | 40 | 46 | 47 | 50 | ``` 51 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | include: ['**/**/*.js', '**/**/*.mjs', '**/**/*.html', '**/**/*.svelte'], 3 | plugins: [ 4 | '@babel/plugin-syntax-dynamic-import', 5 | [ 6 | '@babel/plugin-transform-runtime', 7 | { 8 | useESModules: true, 9 | }, 10 | ], 11 | ], 12 | presets: ['@babel/preset-env'], 13 | ignore: ['node_modules/**'], 14 | }; 15 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transform: { 3 | '^.+\\.js$': 'babel-jest', 4 | '^.+\\.svelte$': 'svelte-jest', 5 | }, 6 | moduleFileExtensions: ['js', 'json', 'svelte'], 7 | bail: false, 8 | verbose: true, 9 | setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], 10 | }; 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sveltejs-tippy", 3 | "description": "Tippy.js for Svelte", 4 | "version": "0.0.0-semantically-released", 5 | "license": "MIT", 6 | "repository": "github:mdauner/sveltejs-tippy", 7 | "svelte": "src/index.js", 8 | "module": "dist/index.min.mjs", 9 | "main": "dist/index.min.js", 10 | "devDependencies": { 11 | "@babel/core": "~7.8.7", 12 | "@babel/plugin-syntax-dynamic-import": "~7.8.3", 13 | "@babel/plugin-transform-runtime": "~7.8.3", 14 | "@babel/preset-env": "~7.8.7", 15 | "@commitlint/cli": "~8.3.5", 16 | "@commitlint/config-conventional": "~8.3.4", 17 | "@testing-library/jest-dom": "~5.1.1", 18 | "@testing-library/svelte": "~1.11.0", 19 | "@types/jest": "~25.1.4", 20 | "autoprefixer": "~9.7.4", 21 | "babel-jest": "~25.1.0", 22 | "cz-conventional-changelog": "~3.1.0", 23 | "eslint": "~6.8.0", 24 | "eslint-config-prettier": "~6.10.0", 25 | "eslint-plugin-jest": "~23.8.2", 26 | "eslint-plugin-svelte3": "~2.7.3", 27 | "husky": "~4.2.3", 28 | "jest": "~25.1.0", 29 | "lint-staged": "~10.0.8", 30 | "npm-run-all": "~4.1.5", 31 | "postcss": "~7.0.27", 32 | "prettier": "~1.19.1", 33 | "prettier-plugin-svelte": "~0.7.0", 34 | "rollup": "~1.32.1", 35 | "rollup-plugin-babel": "~4.4.0", 36 | "rollup-plugin-commonjs": "~10.1.0", 37 | "rollup-plugin-livereload": "~1.0.4", 38 | "rollup-plugin-node-resolve": "~5.2.0", 39 | "rollup-plugin-postcss": "~2.4.0", 40 | "rollup-plugin-replace": "~2.2.0", 41 | "rollup-plugin-svelte": "~5.1.1", 42 | "rollup-plugin-terser": "~5.2.0", 43 | "semantic-release": "~17.0.4", 44 | "sirv-cli": "~0.4.5", 45 | "svelte": "~3.19.2", 46 | "svelte-jest": "~0.3.1", 47 | "svelte-preprocess": "~3.4.0" 48 | }, 49 | "dependencies": { 50 | "tippy.js": "~6.0.1" 51 | }, 52 | "scripts": { 53 | "prettier": "prettier --check '**/*.{svelte, html, css, scss, stylus, js, ts, json, yml, md}' --plugin-search-dir=.", 54 | "lint": "eslint --color './**/*.{js,svelte}'", 55 | "test": "jest", 56 | "autobuild": "rollup -c -w", 57 | "start:dev": "sirv public --single --dev", 58 | "dev": "run-p start:dev autobuild", 59 | "build": "rollup -c", 60 | "prepublishOnly": "npm run build", 61 | "semantic-release": "semantic-release" 62 | }, 63 | "browserslist": [ 64 | "defaults" 65 | ], 66 | "keywords": [ 67 | "svelte", 68 | "tooltip", 69 | "popover", 70 | "tippy", 71 | "tippy.js" 72 | ], 73 | "files": [ 74 | "src", 75 | "dist" 76 | ], 77 | "husky": { 78 | "hooks": { 79 | "pre-commit": "lint-staged", 80 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 81 | } 82 | }, 83 | "lint-staged": { 84 | "*.{js, svelte}": [ 85 | "eslint --fix", 86 | "git add" 87 | ], 88 | "*.{html, css, scss, stylus, js, ts, json, yml, md}": [ 89 | "prettier --write", 90 | "git add" 91 | ] 92 | }, 93 | "config": { 94 | "commitizen": { 95 | "path": "./node_modules/cz-conventional-changelog" 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')], 3 | }; 4 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdauner/sveltejs-tippy/07c1b58f776f72a44e2ad96bb2c04f5a52a87a84/public/favicon.png -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100vh; 3 | } 4 | 5 | body, #sapper { 6 | height: 100%; 7 | } 8 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte component 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import commonjs from 'rollup-plugin-commonjs'; 3 | import livereload from 'rollup-plugin-livereload'; 4 | import resolve from 'rollup-plugin-node-resolve'; 5 | import svelte from 'rollup-plugin-svelte'; 6 | import { terser } from 'rollup-plugin-terser'; 7 | import postcss from 'rollup-plugin-postcss'; 8 | import replace from 'rollup-plugin-replace'; 9 | import autoPreprocess from 'svelte-preprocess'; 10 | import pkg from './package.json'; 11 | 12 | const production = !process.env.ROLLUP_WATCH; 13 | const name = pkg.name 14 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') 15 | .replace(/^\w/, m => m.toUpperCase()) 16 | .replace(/-\w/g, m => m[1].toUpperCase()); 17 | 18 | export default { 19 | input: !production ? 'src/main.js' : 'src/index.js', 20 | output: !production 21 | ? { 22 | sourcemap: true, 23 | format: 'iife', 24 | name: 'app', 25 | file: 'public/bundle.js', 26 | } 27 | : [ 28 | { 29 | file: pkg.module, 30 | format: 'es', 31 | sourcemap: true, 32 | name, 33 | }, 34 | { 35 | file: pkg.main, 36 | format: 'umd', 37 | sourcemap: true, 38 | name, 39 | }, 40 | ], 41 | plugins: [ 42 | postcss({ 43 | plugins: [], 44 | }), 45 | replace({ 46 | 'process.env.NODE_ENV': JSON.stringify( 47 | production ? 'production' : 'development' 48 | ), 49 | }), 50 | babel({ 51 | runtimeHelpers: true, 52 | }), 53 | svelte({ 54 | // enable run-time checks when not in production 55 | dev: !production, 56 | // we'll extract any component CSS out into 57 | // a separate file — better for performance 58 | css: css => { 59 | css.write('public/bundle.css'); 60 | }, 61 | 62 | /** 63 | * Auto preprocess supported languages with 64 | * '