Skip to content

Commit 938b1df

Browse files
FezVrastaFezVrasta
committed
release the 🐙
0 parents  commit 938b1df

File tree

13 files changed

+1117
-0
lines changed

13 files changed

+1117
-0
lines changed

‎.config/rollup-dev.config.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// this file will not afect the sandbox but will
2+
// afect the deployment and dowload
3+
4+
import svelte from 'rollup-plugin-svelte';
5+
import resolve from 'rollup-plugin-node-resolve';
6+
import commonjs from 'rollup-plugin-commonjs';
7+
import { terser } from 'rollup-plugin-terser';
8+
import replace from '@rollup/plugin-replace';
9+
10+
const production = !process.env.ROLLUP_WATCH;
11+
12+
export default {
13+
input: 'dev/index.js',
14+
output: {
15+
sourcemap: true,
16+
format: 'iife',
17+
name: 'app',
18+
file: 'public/bundle.js',
19+
},
20+
plugins: [
21+
svelte({
22+
// enable run-time checks when not in production
23+
dev: !production,
24+
// we'll extract any component CSS out into
25+
// a separate file — better for performance
26+
css: (css) => {
27+
css.write('public/bundle.css');
28+
},
29+
}),
30+
31+
// If you have external dependencies installed from
32+
// npm, you'll most likely need these plugins. In
33+
// some cases you'll need additional configuration —
34+
// consult the documentation for details:
35+
// https://github.com/rollup/rollup-plugin-commonjs
36+
resolve(),
37+
commonjs(),
38+
39+
// If we're building for production (npm run build
40+
// instead of npm run dev), minify
41+
production && terser(),
42+
43+
replace({
44+
'process.env.NODE_ENV': JSON.stringify('production'),
45+
include: '**/node_modules/**',
46+
}),
47+
],
48+
};

‎.config/rollup.config.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import svelte from 'rollup-plugin-svelte';
2+
import resolve from 'rollup-plugin-node-resolve';
3+
import commonjs from 'rollup-plugin-commonjs';
4+
import { terser } from 'rollup-plugin-terser';
5+
6+
export default {
7+
input: 'src/index.js',
8+
output: {
9+
sourcemap: true,
10+
format: 'umd',
11+
name: 'SveltePopper',
12+
file: 'dist/svelte-popper.js',
13+
},
14+
plugins: [
15+
svelte({
16+
dev: false,
17+
emitCss: false,
18+
}),
19+
resolve(),
20+
commonjs(),
21+
terser(),
22+
],
23+
};

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
public/bundle*
3+
*.log

‎README.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# @popperjs/svelte
2+
3+
Use Popper in your Svelte projects.
4+
5+
### Installation
6+
7+
```
8+
yarn add @popperjs/svelte
9+
# or
10+
npm i @popperjs/svelte
11+
```
12+
13+
### Usage
14+
15+
```svelte
16+
<script>
17+
import Popper from "@popperjs/svelte";
18+
19+
// super-simple CSS Object to string serializer
20+
const css = obj =>
21+
Object.entries(obj || {})
22+
.map(x => x.join(":"))
23+
.join(";");
24+
25+
// DOM references to the interested elements
26+
let referenceElement;
27+
let popperElement;
28+
let arrowElement;
29+
30+
// Popper options, reactive to update when arrowElement is set
31+
$: popperOptions = {
32+
modifiers: [
33+
{ name: "offset", options: { offset: [0, 5] } },
34+
{ name: "arrow", options: { element: arrowElement } }
35+
]
36+
};
37+
38+
// bound variables where Popper will store styles and attributes
39+
let styles = {};
40+
let attributes = {};
41+
42+
console.log(styles);
43+
</script>
44+
45+
<style>
46+
/* for some example styles, see `dev/App.svelte` */
47+
</style>
48+
49+
<Popper
50+
reference={referenceElement}
51+
popper={popperElement}
52+
options={popperOptions}
53+
bind:styles
54+
bind:attributes>
55+
<button bind:this={referenceElement}>Reference Element</button>
56+
<div
57+
bind:this={popperElement}
58+
class="tooltip"
59+
style={css(styles.popper)}
60+
{...attributes.popper}>
61+
Popper Element
62+
<div bind:this={arrowElement} class="arrow" style={css(styles.arrow)} />
63+
</div>
64+
</Popper>
65+
```

‎dev/App.svelte

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<script>
2+
import Popper from "../src/Popper.svelte";
3+
4+
const css = obj =>
5+
Object.entries(obj || {})
6+
.map(x => x.join(":"))
7+
.join(";");
8+
9+
let referenceElement;
10+
let popperElement;
11+
let arrowElement;
12+
$: options = {
13+
modifiers: [
14+
{ name: "offset", options: { offset: [0, 5] } },
15+
{ name: "arrow", options: { element: arrowElement } }
16+
]
17+
};
18+
19+
let styles = {};
20+
let attributes = {};
21+
22+
console.log(styles);
23+
</script>
24+
25+
<style>
26+
.tooltip {
27+
background: #333;
28+
color: white;
29+
font-weight: bold;
30+
padding: 4px 8px;
31+
font-size: 13px;
32+
border-radius: 4px;
33+
}
34+
35+
.arrow,
36+
.arrow::before {
37+
position: absolute;
38+
width: 8px;
39+
height: 8px;
40+
z-index: -1;
41+
}
42+
43+
.arrow::before {
44+
content: "";
45+
transform: rotate(45deg);
46+
background: #333;
47+
}
48+
49+
.tooltip[data-popper-placement^="top"] > .arrow {
50+
bottom: -4px;
51+
}
52+
53+
.tooltip[data-popper-placement^="bottom"] > .arrow {
54+
top: -4px;
55+
}
56+
57+
.tooltip[data-popper-placement^="left"] > .arrow {
58+
right: -4px;
59+
}
60+
61+
.tooltip[data-popper-placement^="right"] > .arrow {
62+
left: -4px;
63+
}
64+
</style>
65+
66+
<Popper
67+
reference={referenceElement}
68+
popper={popperElement}
69+
{options}
70+
bind:styles
71+
bind:attributes>
72+
<button bind:this={referenceElement}>reference</button>
73+
<div
74+
bind:this={popperElement}
75+
class="tooltip"
76+
style={css(styles.popper)}
77+
{...attributes.popper}>
78+
popper
79+
<div bind:this={arrowElement} class="arrow" style={css(styles.arrow)} />
80+
</div>
81+
</Popper>

‎dev/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import App from "./App.svelte";
2+
3+
const app = new App({
4+
target: document.body
5+
});
6+
7+
export default app;

‎dist/svelte-popper.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/svelte-popper.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "@popperjs/svelte",
3+
"description": "Svelte wrapper for Popper - the positioning library",
4+
"version": "0.1.0",
5+
"main": "dist/svelte-popper.js",
6+
"svelte": "src/Popper.svelte",
7+
"scripts": {
8+
"build": "rollup --config .config/rollup.config.js",
9+
"build:dev": "rollup --config .config/rollup-dev.config.js",
10+
"dev": "run-p start:dev build:dev -w",
11+
"start": "sirv public",
12+
"start:dev": "sirv public --dev"
13+
},
14+
"peerDependencies": {
15+
"@popperjs/core": "^2.3.3",
16+
"svelte": "^3.18.1"
17+
},
18+
"devDependencies": {
19+
"@rollup/plugin-replace": "^2.3.2",
20+
"npm-run-all": "^4.1.5",
21+
"rollup": "^2.6.1",
22+
"rollup-plugin-commonjs": "^10.1.0",
23+
"rollup-plugin-node-resolve": "^5.2.0",
24+
"rollup-plugin-svelte": "^5.0.3",
25+
"rollup-plugin-terser": "^5.3.0",
26+
"sirv-cli": "^0.4.5"
27+
},
28+
"keywords": [
29+
"svelte",
30+
"popper",
31+
"popper.js",
32+
"tooltip",
33+
"popover",
34+
"dropdown",
35+
"positioning"
36+
]
37+
}

‎public/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset='utf8'>
5+
<meta name='viewport' content='width=device-width'>
6+
7+
<title>Svelte app</title>
8+
9+
<link rel='stylesheet' href='bundle.css'>
10+
</head>
11+
12+
<body>
13+
<div id="root"></div>
14+
<script src='bundle.js'></script>
15+
</body>
16+
</html>

‎src/Popper.svelte

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script>
2+
import { onDestroy } from "svelte";
3+
import { writable } from "svelte/store";
4+
import { createPopper } from "@popperjs/core";
5+
6+
let referenceElement;
7+
let popperElement;
8+
9+
// Input Props
10+
export { referenceElement as reference };
11+
export { popperElement as popper };
12+
export let options = {};
13+
14+
export const store = writable({});
15+
let previousReferenceElement;
16+
let previousPopperElement;
17+
let popperInstance;
18+
19+
const updateStateModifier = {
20+
name: "updateState",
21+
enabled: true,
22+
phase: "write",
23+
fn: ({ state }) => store.set(state)
24+
};
25+
26+
$: {
27+
if (
28+
previousPopperElement != popperElement ||
29+
previousReferenceElement != previousReferenceElement
30+
) {
31+
popperInstance && popperInstance.destroy();
32+
33+
if (referenceElement != null && popperElement != null) {
34+
popperInstance = createPopper(referenceElement, popperElement, {
35+
...options,
36+
modifiers: [
37+
...options.modifiers,
38+
updateStateModifier,
39+
{ name: "applyStyles", enabled: false }
40+
]
41+
});
42+
previousPopperElement = popperElement;
43+
previousReferenceElement = referenceElement;
44+
}
45+
}
46+
}
47+
48+
$: {
49+
if (popperInstance != null) {
50+
popperInstance.setOptions({
51+
...options,
52+
modifiers: [
53+
...options.modifiers,
54+
updateStateModifier,
55+
{ name: "applyStyles", enabled: false }
56+
]
57+
});
58+
}
59+
}
60+
61+
onDestroy(() => {
62+
popperInstance && popperInstance.destroy();
63+
popperInstance = null;
64+
});
65+
66+
let styles = {};
67+
let attributes = {};
68+
let state = {};
69+
70+
$: styles = $store.styles || {};
71+
$: attributes = $store.attributes || {};
72+
$: state = $store;
73+
74+
// Exported props (use with `bind:x`)
75+
export { styles, attributes, state };
76+
</script>
77+
78+
<slot />

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './Popper.svelte';

0 commit comments

Comments
 (0)