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

@@ -11,13 +11,5 @@ dist
 
 notivue-*.tgz
 
-cypress/downloads
-cypress/screenshots
-
-*.sublime-workspace
-*.sublime-project
-
 .nuxt
 pnpm-lock.yaml
-
-astro-dev

.husky/pre-commit

@@ -1,6 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged
-
-#

.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"
+         }
       }
    ]
 }

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

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'],
+      },
+   },
+})

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"
+   }
+}

astro-playground/src/components/AstroComponent.astro

@@ -0,0 +1,59 @@
+<div>
+   <h3>From a Script Tag</h3>
+
+   <button data-static>Push</button>
+   <button data-promise>Push Promise</button>
+   <button data-clear-all>Clear All</button>
+   <button data-destroy-all>Destroy All</button>
+</div>
+
+<script>
+   import { push } from 'notivue/astro'
+
+   function pushStatic() {
+      push.success({
+         title: 'Vue Notification',
+         message: 'Notification from a Script Tag!',
+      })
+   }
+
+   function pushPromise() {
+      const promise = push.promise({
+         title: 'Loading Notification...',
+         message: 'Loading notification from a Script Tag...',
+      })
+
+      setTimeout(() => {
+         promise.resolve({
+            title: 'Notification',
+            message: 'Loaded notification from a Script Tag!',
+         })
+      }, 2000)
+   }
+
+   const events = [
+      ['data-static', pushStatic],
+      ['data-promise', pushPromise],
+      ['data-clear-all', push.clearAll],
+      ['data-destroy-all', push.destroyAll],
+   ] as const
+
+   function addListeners() {
+      events.forEach(([e, fn]) => {
+         document.querySelector(`[${e}]`)?.addEventListener('click', fn)
+      })
+   }
+
+   function removeListeners() {
+      events.forEach(([e, fn]) => {
+         document.querySelector(`[${e}]`)?.removeEventListener('click', fn)
+      })
+   }
+
+   addListeners()
+
+   // Only needed if using View Transitions
+
+   document.addEventListener('astro:before-swap', removeListeners)
+   document.addEventListener('astro:after-swap', addListeners)
+</script>

astro-playground/src/components/Notivue.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Notivue, NotivueSwipe, Notification } from 'notivue/astro'
+</script>
+
+<template>
+   <Notivue v-slot="item">
+      <NotivueSwipe :item="item">
+         <Notification :item="item" />
+      </NotivueSwipe>
+   </Notivue>
+</template>

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 (
+      <div>
+         <h3>From React</h3>
+
+         <button onClick={pushStatic}>Push</button>
+         <button onClick={pushPromise}>Push Promise</button>
+         <button onClick={push.clearAll}>Clear All</button>
+         <button onClick={push.destroyAll}>Destroy All</button>
+      </div>
+   )
+}

astro-playground/src/components/VueComponent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { push } from 'notivue/astro'
+
+function pushStatic() {
+   push.success({
+      title: 'Vue Notification',
+      message: 'Notification from Vue!',
+   })
+}
+
+function pushPromise() {
+   const promise = push.promise({
+      title: 'Loading Vue Notification...',
+      message: 'Loading notification from Vue...',
+   })
+
+   setTimeout(() => {
+      promise.resolve({
+         title: 'Vue Notification',
+         message: 'Loaded notification from Vue!',
+      })
+   }, 2000)
+}
+</script>
+
+<template>
+   <div>
+      <h3>From Vue</h3>
+
+      <button @click="pushStatic">Push</button>
+      <button @click="pushPromise">Push Promise</button>
+      <button @click="push.clearAll">Clear All</button>
+      <button @click="push.destroyAll">Destroy All</button>
+   </div>
+</template>

astro-playground/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

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'
+---
+
+<html lang="en">
+   <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="icon" href="/favicon.svg" />
+
+      <ViewTransitions />
+   </head>
+
+   <body>
+      <slot />
+
+      <div id="notivue_teleport" transition:persist transition:persist-props>
+         <Notivue client:only="vue" />
+      </div>
+   </body>
+</html>

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)
+}

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'
+---
+
+<Layout>
+   <a href="/">Home</a>
+
+   <VueComponent client:load />
+   <ReactComponent client:load />
+   <AstroComponent />
+</Layout>

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'
+---
+
+<Layout>
+   <a href="/about">About</a>
+
+   <VueComponent client:load />
+   <ReactComponent client:load />
+   <AstroComponent />
+</Layout>