Reorganising demo

craigrileyuk · Sep 17, 2024 · b314207 · b314207
1 parent d4963a3
commit b314207
Show file tree

Hide file tree

Showing 17 changed files with 93 additions and 84 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<link rel="icon" href="/favicon.ico" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Vue3-MQ: Sandbox</title>
+</head>
+
+<body>
+	<div id="app"></div>
+	<script type="module" src="./src/main.js"></script>
+</body>
+
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,17 @@
+{
+	"name": "vue3-mq-demo",
+	"version": "1.0.0",
+	"description": "",
+	"type": "module",
+	"main": "index.js",
+	"scripts": {
+		"dev": "vite",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"vue3-mq": "link:.."
+	}
+}
diff --git a/postcss.config.js → demo/postcss.config.js b/postcss.config.js → demo/postcss.config.js
diff --git a/demo/App.vue → demo/src/App.vue b/demo/App.vue → demo/src/App.vue
@@ -43,25 +43,20 @@
 </template>
 
 <script setup>
-import {
-	useMq,
-	MqResponsive,
-	availableBreakpoints,
-	updateBreakpoints,
-} from "vue3-mq";
+import { useMq, availableBreakpoints, updateBreakpoints } from "vue3-mq";
 
 const mq = useMq();
 
 const changeToCustomBreakpoints = () => {
 	updateBreakpoints({
 		breakpoints: {
-			hellaSmall: 0,
+			tiny: 0,
 			prettySmall: 600,
 			mediocre: 1020,
-			sizable: 1280,
+			sizeable: 1280,
 			big: 1600,
-			phat: 1920,
-			awHellNo: 2400,
+			chonky: 1920,
+			colossal: 2400,
 		},
 	});
 };

diff --git a/demo/main.css → demo/src/main.css b/demo/main.css → demo/src/main.css
diff --git a/demo/main.js → demo/src/main.js b/demo/main.js → demo/src/main.js
@@ -5,6 +5,8 @@ import App from "./App.vue";
 import "./main.css";
 
 const app = createApp(App);
-app.use(Vue3Mq);
+app.use(Vue3Mq, {
+	global: true,
+});
 
 app.mount("#app");
diff --git a/demo/tailwind.config.js b/demo/tailwind.config.js
@@ -0,0 +1,7 @@
+export default {
+	content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
diff --git a/demo/vite.config.js b/demo/vite.config.js
@@ -0,0 +1,6 @@
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+
+export default {
+	plugins: [vue()],
+};
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -35,10 +35,11 @@
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite",
-		"build": "vitest --run && vite build -c vite-build.config.js",
+		"build": "vitest --run && vite build",
 		"docs:dev": "pnpm --filter ./docs run dev",
 		"docs:build": "pnpm --filter ./docs run build",
 		"docs:preview": "pnpm --filter ./docs run preview",
+		"demo": "pnpm --filter ./demo run dev",
 		"test": "vitest",
 		"build:types": "vue-tsc && cp ./src/global.d.ts ./types/global.d.ts && npm run copy-ref",
 		"copy-ref": "echo '/// <reference path=\"./global.d.ts\" />\n' | cat - ./types/index.d.ts > temp && mv temp ./types/index.d.ts",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,2 +1,3 @@
 packages:
-  - docs
+    - docs
+    - demo
diff --git a/src/helpers.js b/src/helpers.js
@@ -6,9 +6,8 @@ import {
 import { ref } from "vue";
 
 /**
- * Remove all MediaMatch listeners from the window object and empty the listeners array
- *
- * @type {Function} - Sets the orientation to use when plugin executes in a non-browser context
+ * Remove all MediaMatch listeners from the window object and empties the listeners array
+ * @return { void }
  */
 export function removeListeners() {
 	while (listeners.length > 0) {
@@ -26,9 +25,7 @@ export function removeListeners() {
 
 /**
  * Convert available breakpoints in to media query strings
- *
- * @type {Function} - Sets the orientation to use when plugin executes in a non-browser context
- * @returns {string[]} - An array of media query strings
+ * @returns {string[]} An array of media query strings
  */
 export function createMediaQueries() {
 	const mediaQueries = availableBreakpoints.value.reduce(
@@ -83,9 +80,9 @@ export function subscribeToMediaQuery(mediaQuery, callback) {
 }
 
 /**
- * @constant {Function} validateBreakpoint - Checks that the given breakpoint matches against the given breakpoints in config
- * @param {string} bp - The breakpoint to validate
- * @returns {boolean} - The validity of the breakpoint
+ * Checks that the given breakpoint matches against the given breakpoints in config
+ * @param {string} bp The breakpoint to validate
+ * @returns {boolean} The validity of the breakpoint
  */
 const validateBreakpoint = (bp) => {
 	return availableBreakpoints.value.some(
@@ -94,7 +91,7 @@ const validateBreakpoint = (bp) => {
 };
 
 /**
- * @constant {Function} calculateBreakpointsToRender - Checks that the given breakpoint matches against the available breakpoints in config
+ * Calculate which breakpoints are currently active
  * @param {string} bp - The breakpoint to validate
  * @param {ref} available - A Vue REF holding an array of objects denoting breakpoints registered with the plugin
  * @returns {string[]} - An array of breakpoint keys that should be rendered based on the current breakpoint
@@ -159,10 +156,10 @@ export const calculateBreakpointsToRender = (bp, available) => {
 };
 
 /**
- * @constant {Function} calculateOrientationsToRender - Creates an array of the orientations that should be rendered
- * @param {boolean} landscape - Render only in landscape mode
- * @param {boolean} portrait - Render only in portrait mode
- * @returns {string[]} - An array of orientations that should be rendered based on the current value
+ * Creates an array of the orientations that should be rendered
+ * @param {boolean} landscape Render only in landscape mode
+ * @param {boolean} portrait Render only in portrait mode
+ * @returns {string[]} An array of orientations that should be rendered based on the current value
  */
 export const calculateOrientationsToRender = (landscape, portrait) => {
 	const arr = [];
@@ -173,10 +170,10 @@ export const calculateOrientationsToRender = (landscape, portrait) => {
 };
 
 /**
- * @constant {Function} calculateThemesToRender - Creates an array of the themes that should be rendered on
- * @param {boolean} dark - Render only in dark mode
- * @param {boolean} light - Render only in light mode
- * @returns {string[]} - The array of themes to render on based upon the current value
+ * Creates an array of the themes that should be rendered on
+ * @param {boolean} dark Render only in dark mode
+ * @param {boolean} light Render only in light mode
+ * @returns {string[]} The array of themes to render on based upon the current value
  */
 export const calculateThemesToRender = (dark, light) => {
 	const arr = [];

diff --git a/src/plugin.js b/src/plugin.js
@@ -65,5 +65,4 @@ const install = (
 
 export default {
 	install,
-	MqResponsive,
 };
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/vite-build.config.js b/vite-build.config.js
diff --git a/vite.config.js b/vite.config.js
@@ -2,14 +2,20 @@ import vue from "@vitejs/plugin-vue";
 import path from "path";
 
 export default {
-	plugins: [
-		vue({
-			reactivityTransform: true,
-		}),
-	],
-	resolve: {
-		alias: {
-			"vue3-mq": path.resolve(__dirname, "./src/index.js"),
+	plugins: [vue()],
+	build: {
+		lib: {
+			entry: path.resolve(__dirname, "src/index.js"),
+			name: "Vue3Mq",
+			formats: ["es", "umd", "cjs", "iife"],
+		},
+		rollupOptions: {
+			external: ["vue"],
+			output: {
+				globals: {
+					vue: "Vue",
+				},
+			},
 		},
 	},
 	test: {