mya-ake · mya-ake · Jan 13, 2023 · Jan 11, 2023 · Jan 11, 2023 · Jan 11, 2023
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -2,6 +2,7 @@ name: CI
 
 on:
   push:
+    branches: [master]
   pull_request:
     branches: [master]
 
@@ -10,16 +11,33 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.node-version'
+      - name: Enable corepack
+        run: corepack enable
+      - name: Setup Yarn
+        run: corepack prepare yarn@3.3.1 --activate
+      - name: Get yarn cache direcoty path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+      - name: Yarn Cache
+        id: yarn-cache
+        uses: actions/cache@v3
         with:
-          node-version: 16.15.1
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
       - name: Intall
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Check format
         run: yarn format:check
-      - name: Test
-        run: yarn test
+      - name: Unit Test
+        run: yarn workspace vue-window-size test:unit
+      - name: Integration Test
+        run: yarn workspace vue-window-size test:integration
       - name: Build
-        run: yarn build
+        run: yarn workspace vue-window-size build
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,13 @@
 .DS_Store
 node_modules
-dist/*
+dist
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # local env files
 .env.local

diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-v16.15.1
+v18.12.1
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: pnpm
diff --git a/examples/composition-api/.gitignore b/examples/composition-api/.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?
diff --git a/examples/composition-api/index.html b/examples/composition-api/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Composition API - Vue Window Size</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/composition-api/package.json b/examples/composition-api/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "composition-api",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.45",
+    "vue-window-size": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.11"
+  }
+}
diff --git a/examples/composition-api/src/App.vue b/examples/composition-api/src/App.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useWindowSize } from 'vue-window-size';
+
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+</script>
+
+<template>
+  <div>
+    <p>width: {{ windowWidth }}</p>
+    <p>height: {{ windowHeight }}</p>
+  </div>
+</template>
diff --git a/examples/composition-api/src/main.ts b/examples/composition-api/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/examples/composition-api/src/style.css b/examples/composition-api/src/style.css
@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/examples/composition-api/src/vite-env.d.ts b/examples/composition-api/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/composition-api/tsconfig.json b/examples/composition-api/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/composition-api/tsconfig.node.json b/examples/composition-api/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/composition-api/vite.config.ts b/examples/composition-api/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+});
diff --git a/examples/option-api/.gitignore b/examples/option-api/.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?
diff --git a/examples/option-api/index.html b/examples/option-api/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Option API - Vue Window Size</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/option-api/package.json b/examples/option-api/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "option-api",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.45",
+    "vue-window-size": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.11"
+  }
+}
diff --git a/examples/option-api/src/App.vue b/examples/option-api/src/App.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { vueWindowSizeMixin } from 'vue-window-size/option-api';
+
+export default defineComponent({
+  mixins: [vueWindowSizeMixin()],
+});
+</script>
+
+<template>
+  <div>
+    <p>width: {{ $windowWidth }}</p>
+    <p>height: {{ $windowHeight }}</p>
+  </div>
+</template>
diff --git a/examples/option-api/src/main.ts b/examples/option-api/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+
+createApp(App).mount('#app');