1.1.0 - Stable svelte & fluent ui

.gitignore

@@ -6,3 +6,5 @@ node_modules
 .env
 .env.*
 !.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

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.
 
 ![Screenshot](.github/screen.png)
 
@@ -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

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'],
-}
-```

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",
+    "dev": "vite dev",
-    "build": "svelte-kit build",
+    "build": "svelte-kit sync && svelte-package",
-    "package": "svelte-kit package",
+    "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
-    "preview": "svelte-kit preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "publish": "rm -rf ./package && pnpm run check && pnpm run build && pnpm publish ./package"
-    "publish": "rm -rf ./package && pnpm run check && pnpm run package && pnpm publish ./package"
   },
   "devDependencies": {
-    "@floating-ui/core": "^0.6.2",
+    "@floating-ui/core": "^1.0.5",
-    "@sveltejs/adapter-auto": "^1.0.0-next.40",
+    "@sveltejs/adapter-auto": "^1.0.0",
-    "@sveltejs/kit": "^1.0.0-next.326",
+    "@sveltejs/kit": "^1.0.1",
-    "bulma": "^0.9.3",
+    "@sveltejs/package": "^1.0.1",
-    "interactjs": "^1.10.11",
+    "bulma": "^0.9.4",
-    "svelte": "^3.48.0",
+    "interactjs": "^1.10.17",
-    "svelte-check": "^2.7.0",
+    "svelte": "^3.55.0",
-    "svelte-preprocess": "^4.10.6",
+    "svelte-check": "^2.10.3",
-    "svelte2tsx": "^0.5.9",
+    "tslib": "^2.4.1",
-    "tslib": "^2.4.0",
+    "typescript": "^4.9.4",
-    "typescript": "^4.6.4"
+    "vite": "^4.0.3"
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.4.5"
+    "@floating-ui/dom": "^1.1.0"
   }
 }

src/app.d.ts

@@ -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 {}
+}

src/app.html

@@ -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>

src/components/Playground.svelte

@@ -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>

src/global.d.ts

@@ -1 +0,0 @@
-/// <reference types="@sveltejs/kit" />

src/lib/Hint.svelte

@@ -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;

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  // import 'bulma/css/bulma.css'
   import Playground from '../components/Playground.svelte'
 </script>
 

svelte.config.js

@@ -1,12 +1,15 @@
-import adapter from '@sveltejs/adapter-auto'
+import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess'
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  preprocess: preprocess(),
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-  kit: {
+	// for more information about preprocessors
-    adapter: adapter(),
+	preprocess: vitePreprocess(),
-  },
-}
 
-export default config
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

tsconfig.json

@@ -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": {
+		"esModuleInterop": true,
-      "$lib": ["src/lib"],
+		"forceConsistentCasingInFileNames": true,
-      "$lib/*": ["src/lib/*"]
+		"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
 }

vite.config.js

@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;