From a397aefe43c414940e86a25091f1ee28dce6d4d7 Mon Sep 17 00:00:00 2001 From: Simone Mastromattei Date: Sun, 1 Sep 2024 16:02:35 +0200 Subject: [PATCH] 2.4.5 (#63) * Core - Rename `useRepositioning` to `useSizes` * Core - Move `createInstance`, `createStore` and simbols to their own files * Core - Export `startInstance` and `stopInstance` from their file * Astro - Rework module by moving global state to Notivue * Astro - Create playground * x * Pkg - Up deps * Pkg - Edit prettier conf * Astro - Export `createNotivueAstro` * Core - Import symbols to `useStore` * Demo - Fix instance notice timeout clearing * Core - Edit gitignore * Pkg - Bump 2.4.5 * Core - Fix typo prettier conf * Pkg - Up root, demo, playground deps to latest * Astro - Add script tag example to playground * Core, Astro - Cleanup * rename /demo to /playground * Tests - Edit reduced motion test to match new Chrome version * Astro - Cleanup --- .gitignore | 8 -- .husky/pre-commit | 5 - .prettierrc | 6 ++ astro-playground/.gitignore | 20 ++++ astro-playground/astro.config.mjs | 19 ++++ astro-playground/package.json | 25 +++++ astro-playground/public/favicon.svg | 9 ++ .../src/components/AstroComponent.astro | 59 ++++++++++ astro-playground/src/components/Notivue.vue | 11 ++ .../src/components/ReactComponent.tsx | 35 ++++++ .../src/components/VueComponent.vue | 35 ++++++ astro-playground/src/env.d.ts | 2 + astro-playground/src/layouts/Layout.astro | 28 +++++ astro-playground/src/pages/_app.ts | 11 ++ astro-playground/src/pages/about.astro | 15 +++ astro-playground/src/pages/index.astro | 15 +++ astro-playground/src/styles/reset.css | 96 +++++++++++++++++ astro-playground/tsconfig.json | 10 ++ package.json | 14 +-- packages/notivue/Notivue/NotivueImpl.vue | 4 +- .../{useRepositioning.ts => useSizes.ts} | 2 +- packages/notivue/astro/Notivue.vue | 28 ++++- packages/notivue/astro/createNotivue.ts | 17 +++ packages/notivue/astro/push.ts | 4 +- packages/notivue/core/createInstance.ts | 53 +++++++++ packages/notivue/core/createNotivue.ts | 102 ++++-------------- packages/notivue/core/createStore.ts | 33 +++++- packages/notivue/core/symbols.ts | 5 + packages/notivue/core/useStore.ts | 2 +- packages/notivue/index.ts | 3 +- packages/notivue/nuxt/module.json | 2 +- packages/notivue/package.json | 10 +- packages/notivue/shared/exports.js | 2 +- packages/notivue/vite.config.ts | 3 +- {demo => playground}/.gitignore | 0 {demo => playground}/.npmrc | 0 {demo => playground}/app.vue | 0 .../assets/inter-v13-latin-500.woff2 | Bin .../assets/inter-v13-latin-700.woff2 | Bin .../assets/profile-picture.jpg | Bin .../assets/pt-sans-narrow-v17-latin-700.woff2 | Bin .../pt-sans-narrow-v17-latin-regular.woff2 | Bin {demo => playground}/assets/style.css | 0 .../FriendRequestNotification.vue | 0 .../SimpleNotification.vue | 0 .../UploadNotification.vue | 0 .../components/icons/ArrowIcon.vue | 0 .../components/icons/CloseIcon.vue | 0 .../components/icons/CustomIcon.vue | 0 .../components/icons/DestroyIcon.vue | 0 .../components/icons/DismissIcon.vue | 0 .../components/icons/InfoIcon.vue | 0 .../components/icons/PromiseIcon.vue | 0 .../components/icons/SuccessIcon.vue | 0 .../components/icons/VueIcon.vue | 0 .../components/icons/WarnIcon.vue | 0 {demo => playground}/components/nav/Nav.vue | 2 +- .../components/nav/NavActions.vue | 0 .../nav/NavNotificationsCustomization.vue | 0 .../components/nav/NavNotificationsThemes.vue | 0 .../components/nav/NavNotivueConfig.vue | 0 .../components/nav/NavNotivuePosition.vue | 0 .../components/nav/NavPushBuiltIn.vue | 0 .../components/nav/NavPushHeadless.vue | 0 .../components/shared/Background.server.vue | 0 .../components/shared/Button.vue | 0 .../components/shared/ButtonGroup.vue | 0 .../components/shared/QueueCount.vue | 0 .../middleware/push.global.ts | 0 {demo => playground}/nuxt.config.ts | 0 {demo => playground}/package.json | 12 +-- {demo => playground}/plugins/store.ts | 0 {demo => playground}/public/icon.svg | 0 {demo => playground}/public/og-image.jpg | Bin {demo => playground}/tsconfig.json | 0 {demo => playground}/utils/date.ts | 0 {demo => playground}/utils/head.ts | 0 {demo => playground}/utils/misc.ts | 0 {demo => playground}/utils/store.ts | 0 pnpm-workspace.yaml | 3 +- tests/Notivue/prefers-reduced-motion.cy.ts | 2 +- tests/package.json | 22 ++-- 82 files changed, 594 insertions(+), 140 deletions(-) create mode 100644 astro-playground/.gitignore create mode 100644 astro-playground/astro.config.mjs create mode 100644 astro-playground/package.json create mode 100644 astro-playground/public/favicon.svg create mode 100644 astro-playground/src/components/AstroComponent.astro create mode 100644 astro-playground/src/components/Notivue.vue create mode 100644 astro-playground/src/components/ReactComponent.tsx create mode 100644 astro-playground/src/components/VueComponent.vue create mode 100644 astro-playground/src/env.d.ts create mode 100644 astro-playground/src/layouts/Layout.astro create mode 100644 astro-playground/src/pages/_app.ts create mode 100644 astro-playground/src/pages/about.astro create mode 100644 astro-playground/src/pages/index.astro create mode 100644 astro-playground/src/styles/reset.css create mode 100644 astro-playground/tsconfig.json rename packages/notivue/Notivue/composables/{useRepositioning.ts => useSizes.ts} (90%) create mode 100644 packages/notivue/astro/createNotivue.ts create mode 100644 packages/notivue/core/createInstance.ts create mode 100644 packages/notivue/core/symbols.ts rename {demo => playground}/.gitignore (100%) rename {demo => playground}/.npmrc (100%) rename {demo => playground}/app.vue (100%) rename {demo => playground}/assets/inter-v13-latin-500.woff2 (100%) rename {demo => playground}/assets/inter-v13-latin-700.woff2 (100%) rename {demo => playground}/assets/profile-picture.jpg (100%) rename {demo => playground}/assets/pt-sans-narrow-v17-latin-700.woff2 (100%) rename {demo => playground}/assets/pt-sans-narrow-v17-latin-regular.woff2 (100%) rename {demo => playground}/assets/style.css (100%) rename {demo => playground}/components/custom-notifications/FriendRequestNotification.vue (100%) rename {demo => playground}/components/custom-notifications/SimpleNotification.vue (100%) rename {demo => playground}/components/custom-notifications/UploadNotification.vue (100%) rename {demo => playground}/components/icons/ArrowIcon.vue (100%) rename {demo => playground}/components/icons/CloseIcon.vue (100%) rename {demo => playground}/components/icons/CustomIcon.vue (100%) rename {demo => playground}/components/icons/DestroyIcon.vue (100%) rename {demo => playground}/components/icons/DismissIcon.vue (100%) rename {demo => playground}/components/icons/InfoIcon.vue (100%) rename {demo => playground}/components/icons/PromiseIcon.vue (100%) rename {demo => playground}/components/icons/SuccessIcon.vue (100%) rename {demo => playground}/components/icons/VueIcon.vue (100%) rename {demo => playground}/components/icons/WarnIcon.vue (100%) rename {demo => playground}/components/nav/Nav.vue (98%) rename {demo => playground}/components/nav/NavActions.vue (100%) rename {demo => playground}/components/nav/NavNotificationsCustomization.vue (100%) rename {demo => playground}/components/nav/NavNotificationsThemes.vue (100%) rename {demo => playground}/components/nav/NavNotivueConfig.vue (100%) rename {demo => playground}/components/nav/NavNotivuePosition.vue (100%) rename {demo => playground}/components/nav/NavPushBuiltIn.vue (100%) rename {demo => playground}/components/nav/NavPushHeadless.vue (100%) rename {demo => playground}/components/shared/Background.server.vue (100%) rename {demo => playground}/components/shared/Button.vue (100%) rename {demo => playground}/components/shared/ButtonGroup.vue (100%) rename {demo => playground}/components/shared/QueueCount.vue (100%) rename {demo => playground}/middleware/push.global.ts (100%) rename {demo => playground}/nuxt.config.ts (100%) rename {demo => playground}/package.json (67%) rename {demo => playground}/plugins/store.ts (100%) rename {demo => playground}/public/icon.svg (100%) rename {demo => playground}/public/og-image.jpg (100%) rename {demo => playground}/tsconfig.json (100%) rename {demo => playground}/utils/date.ts (100%) rename {demo => playground}/utils/head.ts (100%) rename {demo => playground}/utils/misc.ts (100%) rename {demo => playground}/utils/store.ts (100%) diff --git a/.gitignore b/.gitignore index 82fe8e7e..00e1d7a7 100644 --- a/.gitignore +++ b/.gitignore @@ -11,13 +11,5 @@ dist notivue-*.tgz -cypress/downloads -cypress/screenshots - -*.sublime-workspace -*.sublime-project - .nuxt pnpm-lock.yaml - -astro-dev diff --git a/.husky/pre-commit b/.husky/pre-commit index 17236687..2312dc58 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,6 +1 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - npx lint-staged - -# diff --git a/.prettierrc b/.prettierrc index f9ee1cb0..192e0d23 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,6 +5,7 @@ "tabWidth": 3, "trailingComma": "es5", "useTabs": false, + "plugins": ["prettier-plugin-astro"], "overrides": [ { "files": "README.md", @@ -13,6 +14,11 @@ "trailingComma": "none", "printWidth": 90 } + }, { + "files": "*.astro", + "options": { + "parser": "astro" + } } ] } diff --git a/astro-playground/.gitignore b/astro-playground/.gitignore new file mode 100644 index 00000000..aa210b11 --- /dev/null +++ b/astro-playground/.gitignore @@ -0,0 +1,20 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/astro-playground/astro.config.mjs b/astro-playground/astro.config.mjs new file mode 100644 index 00000000..c662b2b3 --- /dev/null +++ b/astro-playground/astro.config.mjs @@ -0,0 +1,19 @@ +import { defineConfig } from 'astro/config' + +import vue from '@astrojs/vue' +import react from '@astrojs/react' + +export default defineConfig({ + integrations: [ + vue({ + appEntrypoint: '/src/pages/_app.ts', + devtools: true, + }), + react(), + ], + vite: { + optimizeDeps: { + include: ['notivue'], + }, + }, +}) diff --git a/astro-playground/package.json b/astro-playground/package.json new file mode 100644 index 00000000..d6cf642c --- /dev/null +++ b/astro-playground/package.json @@ -0,0 +1,25 @@ +{ + "name": "notivue-astro-playground", + "type": "module", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/react": "^3.6.2", + "@astrojs/vue": "^4.5.0", + "astro": "^4.15.1", + "notivue": "workspace:*", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "vue": "^3.4.30" + }, + "devDependencies": { + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0" + } +} diff --git a/astro-playground/public/favicon.svg b/astro-playground/public/favicon.svg new file mode 100644 index 00000000..f157bd1c --- /dev/null +++ b/astro-playground/public/favicon.svg @@ -0,0 +1,9 @@ + + + + diff --git a/astro-playground/src/components/AstroComponent.astro b/astro-playground/src/components/AstroComponent.astro new file mode 100644 index 00000000..7e5ac845 --- /dev/null +++ b/astro-playground/src/components/AstroComponent.astro @@ -0,0 +1,59 @@ +
+

From a Script Tag

+ + + + + +
+ + diff --git a/astro-playground/src/components/Notivue.vue b/astro-playground/src/components/Notivue.vue new file mode 100644 index 00000000..29aadea4 --- /dev/null +++ b/astro-playground/src/components/Notivue.vue @@ -0,0 +1,11 @@ + + + diff --git a/astro-playground/src/components/ReactComponent.tsx b/astro-playground/src/components/ReactComponent.tsx new file mode 100644 index 00000000..540d0852 --- /dev/null +++ b/astro-playground/src/components/ReactComponent.tsx @@ -0,0 +1,35 @@ +import { push } from 'notivue/astro' + +function pushStatic() { + push.info({ + title: 'React Notification', + message: 'Notification from React!', + }) +} + +function pushPromise() { + const promise = push.promise({ + title: 'Loading React Notification...', + message: 'Loading notification from React...', + }) + + setTimeout(() => { + promise.resolve({ + title: 'React Notification', + message: 'Loaded notification from React!', + }) + }, 2000) +} + +export function ReactComponent() { + return ( +
+

From React

+ + + + + +
+ ) +} diff --git a/astro-playground/src/components/VueComponent.vue b/astro-playground/src/components/VueComponent.vue new file mode 100644 index 00000000..1cf8ebf5 --- /dev/null +++ b/astro-playground/src/components/VueComponent.vue @@ -0,0 +1,35 @@ + + + diff --git a/astro-playground/src/env.d.ts b/astro-playground/src/env.d.ts new file mode 100644 index 00000000..acef35f1 --- /dev/null +++ b/astro-playground/src/env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/astro-playground/src/layouts/Layout.astro b/astro-playground/src/layouts/Layout.astro new file mode 100644 index 00000000..7b1b79ec --- /dev/null +++ b/astro-playground/src/layouts/Layout.astro @@ -0,0 +1,28 @@ +--- +import { ViewTransitions } from 'astro:transitions' + +import Notivue from '@/components/Notivue.vue' + +import 'notivue/astro/notification.css' +import 'notivue/astro/animations.css' + +import '@/styles/reset.css' +--- + + + + + + + + + + + + + +
+ +
+ + diff --git a/astro-playground/src/pages/_app.ts b/astro-playground/src/pages/_app.ts new file mode 100644 index 00000000..2a74a271 --- /dev/null +++ b/astro-playground/src/pages/_app.ts @@ -0,0 +1,11 @@ +import { createNotivue } from 'notivue/astro' + +import type { App, Plugin } from 'vue' + +const notivue = createNotivue({ + teleportTo: '#notivue_teleport', +}) + +export default (app: App) => { + app.use(notivue as unknown as Plugin) +} diff --git a/astro-playground/src/pages/about.astro b/astro-playground/src/pages/about.astro new file mode 100644 index 00000000..4e4741c6 --- /dev/null +++ b/astro-playground/src/pages/about.astro @@ -0,0 +1,15 @@ +--- +import Layout from '@/layouts/Layout.astro' + +import VueComponent from '@/components/VueComponent.vue' +import AstroComponent from '@/components/AstroComponent.astro' +import { ReactComponent } from '@/components/ReactComponent' +--- + + + Home + + + + + diff --git a/astro-playground/src/pages/index.astro b/astro-playground/src/pages/index.astro new file mode 100644 index 00000000..18f02c9a --- /dev/null +++ b/astro-playground/src/pages/index.astro @@ -0,0 +1,15 @@ +--- +import Layout from '../layouts/Layout.astro' + +import VueComponent from '../components/VueComponent.vue' +import AstroComponent from '@/components/AstroComponent.astro' +import { ReactComponent } from '../components/ReactComponent' +--- + + + About + + + + + diff --git a/astro-playground/src/styles/reset.css b/astro-playground/src/styles/reset.css new file mode 100644 index 00000000..ded5d7de --- /dev/null +++ b/astro-playground/src/styles/reset.css @@ -0,0 +1,96 @@ +/* https://andy-bell.co.uk/a-more-modern-css-reset/ */ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji'; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; +} + +/* Balance text wrapping on headings */ +h1, +h2, +h3, +h4 { + text-wrap: balance; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + color: currentColor; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} diff --git a/astro-playground/tsconfig.json b/astro-playground/tsconfig.json new file mode 100644 index 00000000..51ddc129 --- /dev/null +++ b/astro-playground/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, + "jsx": "react-jsx" + } +} diff --git a/package.json b/package.json index 99d1ca2c..b7c6044c 100644 --- a/package.json +++ b/package.json @@ -6,19 +6,21 @@ "node": ">=20.0.0" }, "scripts": { - "dev": "pnpm build && concurrently \"pnpm -C packages/notivue run watch\" \"pnpm -C demo install && pnpm -C demo run dev --host\"", + "dev": "pnpm build && concurrently \"pnpm -C packages/notivue run watch\" \"pnpm -C playground install && pnpm -C playground run dev --host\"", + "dev:astro": "pnpm build && concurrently \"pnpm -C packages/notivue run watch\" \"pnpm -C astro-playground install && pnpm -C astro-playground run dev --host\"", "build": "pnpm -C packages/notivue run build", - "build:demo": "pnpm build && pnpm install && pnpm -C demo run build", + "build:playground": "pnpm build && pnpm install && pnpm -C playground run build", "test": "pnpm build && pnpm install && pnpm -C tests run test", "test:gui": "pnpm build && concurrently \"pnpm -C packages/notivue run watch\" \"pnpm -C tests install && pnpm -C tests run test:gui\"", "test:unit": "pnpm -C tests run test:unit", - "prepare": "husky install" + "prepare": "husky" }, "devDependencies": { "concurrently": "^8.2.2", - "husky": "^8.0.3", - "lint-staged": "^15.2.2", - "prettier": "^3.2.5" + "husky": "^9.1.5", + "lint-staged": "^15.2.9", + "prettier": "^3.3.3", + "prettier-plugin-astro": "^0.14.1" }, "lint-staged": { "*.{js,ts,vue,json,css,md}": "prettier --write" diff --git a/packages/notivue/Notivue/NotivueImpl.vue b/packages/notivue/Notivue/NotivueImpl.vue index b066f092..176c9c09 100644 --- a/packages/notivue/Notivue/NotivueImpl.vue +++ b/packages/notivue/Notivue/NotivueImpl.vue @@ -9,7 +9,7 @@ import { getSlotItem } from '@/core/utils' import { useMouseEvents } from './composables/useMouseEvents' import { useTouchEvents } from './composables/useTouchEvents' import { useNotivueStyles } from './composables/useNotivueStyles' -import { useRepositioning } from './composables/useRepositioning' +import { useSizes } from './composables/useSizes' import { useWindowFocus } from './composables/useWindowFocus' import { useReducedMotion } from './composables/useReducedMotion' @@ -36,7 +36,7 @@ const touchEvents = useTouchEvents() useReducedMotion() useWindowFocus() -useRepositioning() +useSizes()