mirror of
https://github.com/cupcakearmy/svelte-hint.git
synced 2024-12-23 16:36:26 +00:00
1.1.0 - Stable svelte & fluent ui
This commit is contained in:
parent
7a217e2764
commit
c274bc553f
2
.gitignore
vendored
2
.gitignore
vendored
@ -6,3 +6,5 @@ node_modules
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
||||
17
README.md
17
README.md
@ -2,7 +2,7 @@
|
||||
|
||||
Svelte library for tooltips internally powered by the awesome [Fluent UI](https://floating-ui.com/) with sensible default values.
|
||||
|
||||
Check out the **[demo](https://svelte-hint.pages.dev/)** to see it in action.
|
||||
Check out the **[Demo](https://svelte-hint.pages.dev/)** to see it in action.
|
||||
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ npm install svelte-hint
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Hint } from 'svelte-hint'
|
||||
import Hint from 'svelte-hint'
|
||||
</script>
|
||||
|
||||
<Hint text="A tooltip!">
|
||||
@ -37,7 +37,7 @@ npm install svelte-hint
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Hint } from 'svelte-hint'
|
||||
import Hint from 'svelte-hint'
|
||||
</script>
|
||||
|
||||
<Hint>
|
||||
@ -46,17 +46,6 @@ npm install svelte-hint
|
||||
</Hint>
|
||||
```
|
||||
|
||||
## 🏗 Setup
|
||||
|
||||
Floating UI needs some additional setup. Below are a few examples (which are shamefully copied from the [carbon team](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte#set-up)).
|
||||
|
||||
- [SvelteKit](https://github.com/cupcakearmy/svelte-hint/blob/main/SETUP.md#sveltekit)
|
||||
- [Vite](https://github.com/cupcakearmy/svelte-hint/blob/main/SETUP.md#vite)
|
||||
- [Sapper](https://github.com/cupcakearmy/svelte-hint/blob/main/SETUP.md#sapper)
|
||||
- [Rollup](https://github.com/cupcakearmy/svelte-hint/blob/main/SETUP.md#rollup)
|
||||
- [Webpack](https://github.com/cupcakearmy/svelte-hint/blob/main/SETUP.md#webpack)
|
||||
- [Snowpack](https://github.com/cupcakearmy/svelte-hint/blob/main/SETUP.md#snowpack)
|
||||
|
||||
## 🗂 Docs
|
||||
|
||||
### Props
|
||||
|
||||
177
SETUP.md
177
SETUP.md
@ -1,177 +0,0 @@
|
||||
## SETUP
|
||||
|
||||
Shamefully copied from the [carbon team](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte#set-up)
|
||||
|
||||
### SvelteKit
|
||||
|
||||
[SvelteKit](https://github.com/sveltejs/kit) is fast becoming the de facto
|
||||
framework for building Svelte apps that supports both client-side rendering
|
||||
(CSR) and server-side rendering (SSR).
|
||||
|
||||
For set-ups powered by [vite](https://github.com/vitejs/vite), add
|
||||
`svelte-hint` to the list of dependencies for `vite` to optimize.
|
||||
|
||||
If using a [SvelteKit adapter](https://kit.svelte.dev/docs#adapters), instruct
|
||||
`vite` to avoid externalizing `svelte-hint` when building for production.
|
||||
|
||||
```js
|
||||
// svelte.config.js
|
||||
import adapter from '@sveltejs/adapter-node'
|
||||
|
||||
const production = process.env.NODE_ENV === 'production'
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
target: '#svelte',
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
include: ['svelte-hint'],
|
||||
},
|
||||
ssr: {
|
||||
noExternal: [production && 'svelte-hint'].filter(Boolean),
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
### Vite
|
||||
|
||||
[vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) is an
|
||||
alternative to using SvelteKit. Similarly, instruct `vite` to optimize
|
||||
`svelte-hint` in vite.config.js.
|
||||
|
||||
Note that `@sveltejs/vite-plugin-svelte` is the official vite/svelte integration
|
||||
not to be confused with [svite](https://github.com/svitejs/svite).
|
||||
|
||||
```js
|
||||
// vite.config.js
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
return {
|
||||
plugins: [svelte()],
|
||||
build: { minify: mode === 'production' },
|
||||
optimizeDeps: { include: ['svelte-hint'] },
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Sapper
|
||||
|
||||
[sapper](https://github.com/sveltejs/sapper) is another official Svelte
|
||||
framework that supports server-side rendering (SSR).
|
||||
|
||||
Take care to install `svelte-hint-svelte` as a development dependency.
|
||||
|
||||
No additional configuration should be necessary.
|
||||
|
||||
### Rollup
|
||||
|
||||
#### ReferenceError: process is not defined
|
||||
|
||||
Install and add
|
||||
[@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
|
||||
to the list of plugins in `rollup.config.js` to avoid the
|
||||
`process is not defined` runtime error.
|
||||
|
||||
This plugin statically replaces strings in bundled files with the specified
|
||||
value.
|
||||
|
||||
In the example below, all instances of `process.env.NODE_ENV` will be replaced
|
||||
with `"production"` while bundling.
|
||||
|
||||
```js
|
||||
// rollup.config.js
|
||||
import replace from '@rollup/plugin-replace'
|
||||
|
||||
export default {
|
||||
// ...
|
||||
plugins: [
|
||||
replace({
|
||||
preventAssignment: true,
|
||||
'process.env.NODE_ENV': JSON.stringify('production'),
|
||||
}),
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
#### `this` has been rewritten to `undefined`
|
||||
|
||||
Set [`context: "window"`](https://rollupjs.org/guide/en/#context) to address the
|
||||
`this has been rewritten to undefined` Rollup error.
|
||||
|
||||
```diff
|
||||
export default {
|
||||
+ context: "window",
|
||||
};
|
||||
```
|
||||
|
||||
#### Circular dependency warnings
|
||||
|
||||
You may see circular dependency warnings for `d3` and `svelte-hint` packages
|
||||
that can be safely ignored.
|
||||
|
||||
Use the `onwarn` option to selectively ignore these warnings.
|
||||
|
||||
```js
|
||||
// rollup.config.js
|
||||
export default {
|
||||
onwarn: (warning, warn) => {
|
||||
// omit circular dependency warnings emitted from
|
||||
// "d3-*" packages and "svelte-hint"
|
||||
if (warning.code === 'CIRCULAR_DEPENDENCY' && /^node_modules\/(d3-|svelte-hint)/.test(warning.importer)) {
|
||||
return
|
||||
}
|
||||
|
||||
// preserve all other warnings
|
||||
warn(warning)
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
#### Dynamic imports
|
||||
|
||||
If using [dynamic imports](https://rollupjs.org/guide/en/#dynamic-import), set
|
||||
`inlineDynamicImports: true` in `rollup.config.js` to enable code-splitting.
|
||||
|
||||
Otherwise, you may encounter the Rollup error
|
||||
`Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.`
|
||||
|
||||
```diff
|
||||
export default {
|
||||
+ inlineDynamicImports: true,
|
||||
};
|
||||
```
|
||||
|
||||
### Webpack
|
||||
|
||||
[webpack](https://github.com/webpack/webpack) is another popular application
|
||||
bundler used to build Svelte apps.
|
||||
|
||||
No additional configuration should be necessary.
|
||||
|
||||
### Snowpack
|
||||
|
||||
[snowpack](https://github.com/snowpackjs/snowpack) is an ESM-powered frontend
|
||||
build tool.
|
||||
|
||||
Ensure you have
|
||||
[@snowpack/plugin-svelte](https://yarnpkg.com/package/@snowpack/plugin-svelte)
|
||||
added as a plugin in `snowpack.config.js`.
|
||||
|
||||
No additional configuration should be necessary.
|
||||
|
||||
```js
|
||||
// snowpack.config.js
|
||||
|
||||
/** @type {import("snowpack").SnowpackUserConfig } */
|
||||
module.exports = {
|
||||
plugins: ['@snowpack/plugin-svelte'],
|
||||
}
|
||||
```
|
||||
39
package.json
39
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "svelte-hint",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"description": "Tooltip library for svelte",
|
||||
"author": {
|
||||
"name": "Niccolo Borgioli",
|
||||
@ -10,28 +10,27 @@
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "svelte-kit dev",
|
||||
"build": "svelte-kit build",
|
||||
"package": "svelte-kit package",
|
||||
"preview": "svelte-kit preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"publish": "rm -rf ./package && pnpm run check && pnpm run package && pnpm publish ./package"
|
||||
"dev": "vite dev",
|
||||
"build": "svelte-kit sync && svelte-package",
|
||||
"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"publish": "rm -rf ./package && pnpm run check && pnpm run build && pnpm publish ./package"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@floating-ui/core": "^0.6.2",
|
||||
"@sveltejs/adapter-auto": "^1.0.0-next.40",
|
||||
"@sveltejs/kit": "^1.0.0-next.326",
|
||||
"bulma": "^0.9.3",
|
||||
"interactjs": "^1.10.11",
|
||||
"svelte": "^3.48.0",
|
||||
"svelte-check": "^2.7.0",
|
||||
"svelte-preprocess": "^4.10.6",
|
||||
"svelte2tsx": "^0.5.9",
|
||||
"tslib": "^2.4.0",
|
||||
"typescript": "^4.6.4"
|
||||
"@floating-ui/core": "^1.0.5",
|
||||
"@sveltejs/adapter-auto": "^1.0.0",
|
||||
"@sveltejs/kit": "^1.0.1",
|
||||
"@sveltejs/package": "^1.0.1",
|
||||
"bulma": "^0.9.4",
|
||||
"interactjs": "^1.10.17",
|
||||
"svelte": "^3.55.0",
|
||||
"svelte-check": "^2.10.3",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^4.9.4",
|
||||
"vite": "^4.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^0.4.5"
|
||||
"@floating-ui/dom": "^1.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
901
pnpm-lock.yaml
generated
901
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
11
src/app.d.ts
vendored
Normal file
11
src/app.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
// and what to do when importing types
|
||||
declare namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
@ -6,9 +6,8 @@
|
||||
<link rel="icon" href="%svelte.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<style>
|
||||
@ -30,9 +29,9 @@
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
%svelte.head%
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body>
|
||||
<div id="svelte">%svelte.body%</div>
|
||||
<div id="svelte">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Hint from '../lib/Hint.svelte'
|
||||
import interact from 'interactjs'
|
||||
import { onMount } from 'svelte'
|
||||
import Hint from '../lib/Hint.svelte'
|
||||
|
||||
const directions = ['auto', 'left', 'top', 'bottom', 'right']
|
||||
const aligns = ['start', 'center', 'end']
|
||||
@ -83,7 +83,7 @@
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Positioning gets recalculated <b>when hovering</b>, not while moving the button around.
|
||||
Placements gets recalculated <b>when hovering</b>, not while moving the button around.
|
||||
</p>
|
||||
|
||||
<style>
|
||||
|
||||
1
src/global.d.ts
vendored
1
src/global.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
@ -1,9 +1,6 @@
|
||||
<script lang="ts" context="module">
|
||||
import type { Boundary, Placement } from '@floating-ui/dom'
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { computePosition, flip, shift, offset as offsetMiddleware, autoPlacement } from '@floating-ui/dom'
|
||||
import type { Boundary, Placement } from '@floating-ui/dom'
|
||||
import { autoPlacement, computePosition, flip, offset as offsetMiddleware, shift } from '@floating-ui/dom'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
export let placement: Placement | undefined = undefined
|
||||
@ -75,6 +72,7 @@
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.svelte-hint-tooltip {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
// import 'bulma/css/bulma.css'
|
||||
import Playground from '../components/Playground.svelte'
|
||||
</script>
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
import adapter from '@sveltejs/adapter-auto'
|
||||
import preprocess from 'svelte-preprocess'
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: preprocess(),
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
},
|
||||
}
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
|
||||
export default config
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@ -1,32 +1,17 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"module": "es2020",
|
||||
"lib": ["es2020", "DOM"],
|
||||
"target": "es2020",
|
||||
/**
|
||||
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
|
||||
to enforce using \`import type\` instead of \`import\` for Types.
|
||||
*/
|
||||
"importsNotUsedAsValues": "error",
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
To have warnings/errors of the Svelte compiler at the correct position,
|
||||
enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"paths": {
|
||||
"$lib": ["src/lib"],
|
||||
"$lib/*": ["src/lib/*"]
|
||||
},
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
|
||||
8
vite.config.js
Normal file
8
vite.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
|
||||
/** @type {import('vite').UserConfig} */
|
||||
const config = {
|
||||
plugins: [sveltekit()]
|
||||
};
|
||||
|
||||
export default config;
|
||||
Loading…
Reference in New Issue
Block a user