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 <[email protected]>

.changeset/short-boats-drive.md

@@ -0,0 +1,5 @@
+---
+"@neodrag/vanilla": patch
+---
+
+feat: Provide UMD

docs/src/pages/docs/vanilla.mdx

@@ -75,6 +75,36 @@ dragInstance.options = {
 };
 ```
 
+Using via CDN
+
+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:
+
+Using Unpkg
+
+Include the library in your HTML using the following `<script>` tag. This will load the latest version of `@neodrag/vanilla` directly from unpkg:
+
+```html
+<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+```
+
+Using jsDelivr
+
+Alternatively, you can use jsDelivr as a CDN to load `@neodrag/vanilla`. Include the following line in your HTML:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+```
+
+Usage with CDN
+
+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:
+
+```html
+<div id="drag">Drag me!</div> <script>   var dragInstance = new NeoDrag.Draggable(document.getElementById('drag')); </script>
+```
+
+This method allows you to use `@neodrag/vanilla` without any build tools or npm installations, directly in your browser.
+
 ## Options
 
 <Options />

packages/config/index.ts

@@ -1,6 +1,7 @@
+import { Format } from "tsup"
 import { defineConfig } from 'tsup';
 
-export const coreConfig = ({ dtsBanner }: { dtsBanner?: string } = { dtsBanner: '' }) =>
+export const coreConfig = ({ dtsBanner = '', includeUMD = false, globalName = 'neodrag' } = {}) =>
 	defineConfig([
 		{
 			entry: ['./src/index.ts'],
@@ -19,4 +20,18 @@ export const coreConfig = ({ dtsBanner }: { dtsBanner?: string } = { dtsBanner:
 			outDir: 'dist/min',
 			treeshake: 'smallest',
 		},
+		// UMD configuration
+		...(includeUMD
+			? [
+					{
+						entry: ['./src/index.ts'],
+						format: 'umd' as Format,
+						globalName,
+						dts: { resolve: true, banner: dtsBanner },
+						clean: true,
+						outDir: 'dist/umd',
+						treeshake: true,
+					},
+				]
+			: []),
 	]);

packages/vanilla/README.md

@@ -93,6 +93,36 @@ dragInstance.options = {
 };
 ```
 
+Using via CDN
+
+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:
+
+Using Unpkg
+
+Include the library in your HTML using the following `<script>` tag. This will load the latest version of `@neodrag/vanilla` directly from unpkg:
+
+```html
+<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+```
+
+Using jsDelivr
+
+Alternatively, you can use jsDelivr as a CDN to load `@neodrag/vanilla`. Include the following line in your HTML:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+```
+
+Usage with CDN
+
+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:
+
+```html
+<div id="drag">Drag me!</div> <script>   var dragInstance = new NeoDrag.Draggable(document.getElementById('drag')); </script>
+```
+
+This method allows you to use `@neodrag/vanilla` without any build tools or npm installations, directly in your browser.
+
 <a href="https://www.neodrag.dev/docs/vanilla" style="font-size: 2rem">Read the docs</a>
 
 ## Credits

packages/vanilla/demo-umd/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/vanilla/demo-umd/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="src/style.css">
+		<title>Vite App</title>
+	</head>
+	<body>
+		<div id="app">
+			<div class="box">I am draggable</div>
+
+			X: <input type="range" min="0" max="300" value="0" id="x" />
+
+			Y: <input type="range" min="0" max="300" value="0" id="y" />
+		</div>
+		<script src='node_modules/@neodrag/vanilla/dist/umd/index.js'></script>
+		<script type="module" src="./src/main.js"></script>
+	</body>
+</html>

packages/vanilla/demo-umd/package.json

@@ -0,0 +1,10 @@
+{
+	"name": "demo",
+	"private": true,
+	"version": "0.0.0",
+	"scripts": {},
+	"devDependencies": {},
+	"dependencies": {
+		"@neodrag/vanilla": "workspace:*"
+	}
+}

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

@@ -0,0 +1,27 @@
+const Draggable = NeoDrag.Draggable
+
+const draggableEl = document.querySelector('.box');
+const xSlider = document.querySelector('#x');
+const ySlider = document.querySelector('#y');
+
+let position = { x: 0, y: 0 };
+
+const dragInstance = new Draggable(draggableEl, {
+	position,
+	onDrag: ({ offsetX, offsetY }) => {
+		position = { x: offsetX, y: offsetY };
+
+		xSlider.value = offsetX.toString();
+		ySlider.value = offsetY.toString();
+	},
+});
+
+xSlider.addEventListener('input', (e) => {
+	position.x = +e.target.value;
+	dragInstance.updateOptions({ position });
+});
+
+ySlider.addEventListener('input', (e) => {
+	position.y = +e.target.value;
+	dragInstance.updateOptions({ position });
+});

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

@@ -0,0 +1,8 @@
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}

packages/vanilla/demo-umd/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

packages/vanilla/package.json

@@ -3,6 +3,8 @@
 	"version": "2.0.4",
 	"description": "JS library to add dragging to your apps 😉",
 	"main": "./dist/index.js",
+	"unpkg": "./dist/umd/index.js",
+	"jsdelivr": "./dist/umd/index.js",
 	"module": "./dist/index.js",
 	"type": "module",
 	"types": "./dist/index.d.ts",

packages/vanilla/tsup.config.ts

@@ -1,3 +1,6 @@
 import { coreConfig } from '../config';
 
-export default coreConfig({});
+export default coreConfig({
+  includeUMD: true,
+  globalName: 'NeoDrag',
+});