Skip to content

Commit 7f11a0b

Browse files
houtan-rockyPuruVJ
houtan-rocky
and
PuruVJ
authored
Add UMD configuration for vanilla demo (#152)
* Add UMD configuration for vanilla demo * Update UMD configuration for vanilla demo * Update UMD configuration for vanilla demo * Update UMD configuration for vanilla demo * Add fields for unpkg and jsdelivr to target the UMD version * Add usage documentation for the UMD version * Add changeset --------- Co-authored-by: Puru <awesomepuruvj@gmail.com>
1 parent ab527d3 commit 7f11a0b

File tree

13 files changed

+202
-2
lines changed

13 files changed

+202
-2
lines changed

‎.changeset/short-boats-drive.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@neodrag/vanilla": patch
3+
---
4+
5+
feat: Provide UMD

‎docs/src/pages/docs/vanilla.mdx

+30
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,36 @@ dragInstance.options = {
7575
};
7676
```
7777

78+
Using via CDN
79+
80+
For users who prefer not to install the package and instead use it directly in their projects via a CDN, you can include `@neodrag/vanilla` directly in your HTML files. This is particularly useful for quick prototyping or projects where you want to avoid a build step. Here’s how to include it using different CDNs:
81+
82+
Using Unpkg
83+
84+
Include the library in your HTML using the following `<script>` tag. This will load the latest version of `@neodrag/vanilla` directly from unpkg:
85+
86+
```html
87+
<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
88+
```
89+
90+
Using jsDelivr
91+
92+
Alternatively, you can use jsDelivr as a CDN to load `@neodrag/vanilla`. Include the following line in your HTML:
93+
94+
```html
95+
<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
96+
```
97+
98+
Usage with CDN
99+
100+
After including the library via a CDN, `@neodrag/vanilla` will be available as a global variable `NeoDrag`. Here’s how you can use it to make an element draggable:
101+
102+
```html
103+
<div id="drag">Drag me!</div> <script> var dragInstance = new NeoDrag.Draggable(document.getElementById('drag')); </script>
104+
```
105+
106+
This method allows you to use `@neodrag/vanilla` without any build tools or npm installations, directly in your browser.
107+
78108
## Options
79109

80110
<Options />

‎packages/config/index.ts

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Format } from "tsup"
12
import { defineConfig } from 'tsup';
23

3-
export const coreConfig = ({ dtsBanner }: { dtsBanner?: string } = { dtsBanner: '' }) =>
4+
export const coreConfig = ({ dtsBanner = '', includeUMD = false, globalName = 'neodrag' } = {}) =>
45
defineConfig([
56
{
67
entry: ['./src/index.ts'],
@@ -19,4 +20,18 @@ export const coreConfig = ({ dtsBanner }: { dtsBanner?: string } = { dtsBanner:
1920
outDir: 'dist/min',
2021
treeshake: 'smallest',
2122
},
23+
// UMD configuration
24+
...(includeUMD
25+
? [
26+
{
27+
entry: ['./src/index.ts'],
28+
format: 'umd' as Format,
29+
globalName,
30+
dts: { resolve: true, banner: dtsBanner },
31+
clean: true,
32+
outDir: 'dist/umd',
33+
treeshake: true,
34+
},
35+
]
36+
: []),
2237
]);

‎packages/vanilla/README.md

+30
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,36 @@ dragInstance.options = {
9393
};
9494
```
9595

96+
Using via CDN
97+
98+
For users who prefer not to install the package and instead use it directly in their projects via a CDN, you can include `@neodrag/vanilla` directly in your HTML files. This is particularly useful for quick prototyping or projects where you want to avoid a build step. Here’s how to include it using different CDNs:
99+
100+
Using Unpkg
101+
102+
Include the library in your HTML using the following `<script>` tag. This will load the latest version of `@neodrag/vanilla` directly from unpkg:
103+
104+
```html
105+
<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
106+
```
107+
108+
Using jsDelivr
109+
110+
Alternatively, you can use jsDelivr as a CDN to load `@neodrag/vanilla`. Include the following line in your HTML:
111+
112+
```html
113+
<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
114+
```
115+
116+
Usage with CDN
117+
118+
After including the library via a CDN, `@neodrag/vanilla` will be available as a global variable `NeoDrag`. Here’s how you can use it to make an element draggable:
119+
120+
```html
121+
<div id="drag">Drag me!</div> <script> var dragInstance = new NeoDrag.Draggable(document.getElementById('drag')); </script>
122+
```
123+
124+
This method allows you to use `@neodrag/vanilla` without any build tools or npm installations, directly in your browser.
125+
96126
<a href="https://www.neodrag.dev/docs/vanilla" style="font-size: 2rem">Read the docs</a>
97127

98128
## Credits

‎packages/vanilla/demo-umd/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎packages/vanilla/demo-umd/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="src/style.css">
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<div class="box">I am draggable</div>
12+
13+
X: <input type="range" min="0" max="300" value="0" id="x" />
14+
15+
Y: <input type="range" min="0" max="300" value="0" id="y" />
16+
</div>
17+
<script src='node_modules/@neodrag/vanilla/dist/umd/index.js'></script>
18+
<script type="module" src="./src/main.js"></script>
19+
</body>
20+
</html>

‎packages/vanilla/demo-umd/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "demo",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {},
6+
"devDependencies": {},
7+
"dependencies": {
8+
"@neodrag/vanilla": "workspace:*"
9+
}
10+
}

‎packages/vanilla/demo-umd/src/main.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const Draggable = NeoDrag.Draggable
2+
3+
const draggableEl = document.querySelector('.box');
4+
const xSlider = document.querySelector('#x');
5+
const ySlider = document.querySelector('#y');
6+
7+
let position = { x: 0, y: 0 };
8+
9+
const dragInstance = new Draggable(draggableEl, {
10+
position,
11+
onDrag: ({ offsetX, offsetY }) => {
12+
position = { x: offsetX, y: offsetY };
13+
14+
xSlider.value = offsetX.toString();
15+
ySlider.value = offsetY.toString();
16+
},
17+
});
18+
19+
xSlider.addEventListener('input', (e) => {
20+
position.x = +e.target.value;
21+
dragInstance.updateOptions({ position });
22+
});
23+
24+
ySlider.addEventListener('input', (e) => {
25+
position.y = +e.target.value;
26+
dragInstance.updateOptions({ position });
27+
});

‎packages/vanilla/demo-umd/src/style.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#app {
2+
font-family: Avenir, Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
text-align: center;
6+
color: #2c3e50;
7+
margin-top: 60px;
8+
}

‎packages/vanilla/demo-umd/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"lib": ["ESNext", "DOM"],
7+
"moduleResolution": "Node",
8+
"strict": true,
9+
"sourceMap": true,
10+
"resolveJsonModule": true,
11+
"isolatedModules": true,
12+
"esModuleInterop": true,
13+
"noEmit": true,
14+
"noUnusedLocals": true,
15+
"noUnusedParameters": true,
16+
"noImplicitReturns": true,
17+
"skipLibCheck": true
18+
},
19+
"include": ["src"]
20+
}

‎packages/vanilla/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"version": "2.0.4",
44
"description": "JS library to add dragging to your apps 😉",
55
"main": "./dist/index.js",
6+
"unpkg": "./dist/umd/index.js",
7+
"jsdelivr": "./dist/umd/index.js",
68
"module": "./dist/index.js",
79
"type": "module",
810
"types": "./dist/index.d.ts",

‎packages/vanilla/tsup.config.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
import { coreConfig } from '../config';
22

3-
export default coreConfig({});
3+
export default coreConfig({
4+
includeUMD: true,
5+
globalName: 'NeoDrag',
6+
});

‎pnpm-lock.yaml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)