re-structure project environment (#380)

* chore: use pnpm

* chore: pass params to test:unit

* fix: re-structure e2e and example

* add todo memo

* add more task

* fix: use pnpm on github actions

Author: kazupon

.github/workflows/build.yml

@@ -26,12 +26,18 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
-      - name: Install
-        run: yarn --immutable
-      - name: Build
-        run: yarn build
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Building
+        run: pnpm build

.github/workflows/lint.yml

@@ -26,12 +26,18 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
-      - name: Install
-        run: yarn --immutable
-      - name: Lint
-        run: yarn lint
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Linting
+        run: pnpm lint

.github/workflows/test.yml

@@ -26,12 +26,35 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable
+
       - name: Setup Node.js ${{ matrix.node }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
-      - name: Install
-        run: yarn --immutable
-      - name: Test
-        run: yarn test
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      # https://github.com/vitejs/vite/blob/main/.github/workflows/ci.yml#L62
+      # Install playwright's binary under custom directory to cache
+      - name: Set Playwright path
+        run: echo "PLAYWRIGHT_BROWSERS_PATH=$HOME/.cache/playwright-bin" >> $GITHUB_ENV
+
+      - name: Cache Playwright's binary
+        uses: actions/cache@v4
+        with:
+          # Playwright removes unused browsers automatically
+          # So does not need to add playwright version to key
+          key: ${{ runner.os }}-playwright-bin-v1
+          path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
+
+      - name: Install Playwright
+        # does not need to explicitly set chromium after https://github.com/microsoft/playwright/issues/14862 is solved
+        run: pnpm playwright install chromium
+
+      - name: Testing
+        run: pnpm test

.yarn/releases/yarn-3.1.1.cjs

@@ -0,0 +1,4 @@
+# TODO
+- [ ] upgrade vitest 1.0 (need to fix `checkInstallPackage` issue in test env)
+- [ ] drop fully jest pupeeter for rollup-plugin-vue-i18n, vue-i18n-loader, and vite-plugin-vue-i18n
+- [ ] ESLint: migrate flat config style

TODO.md

@@ -0,0 +1,9 @@
+import type { Page } from 'playwright'
+
+export async function getText(
+  page: Page,
+  selector: string,
+  options?: Parameters<Page['locator']>[1]
+) {
+  return (await page.locator(selector, options).allTextContents())[0]
+}

e2e/helper.ts

@@ -0,0 +1,24 @@
+import { getRandomPort, waitForPort } from 'get-port-please'
+import { ChildProcess, spawn } from 'node:child_process'
+
+export type ServerContext = {
+  serverProcess: ChildProcess
+  url: (val: string) => string
+}
+export async function startServer(): Promise<ServerContext> {
+  const host = '127.0.0.1'
+  const port = await getRandomPort(host)
+
+  const serverProcess = spawn(
+    'pnpm',
+    ['play:vite', '--port', String(port), '--host', host],
+    { stdio: 'inherit', env: { ...process.env } }
+  )
+
+  await waitForPort(port, { retries: 32, host })
+
+  return {
+    serverProcess,
+    url: (val: string) => `http://${host}:${port}${val}`
+  }
+}

e2e/setup-server.ts

@@ -0,0 +1,45 @@
+import { startServer } from './setup-server'
+import { getText } from './helper'
+
+import type { ServerContext } from './setup-server'
+import type { Browser, Page } from 'playwright'
+
+// TODO: extract to shim.d.ts
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace global {
+  let browser: Browser
+  let page: Page
+}
+
+let ctx: ServerContext
+describe('vite', () => {
+  beforeAll(async () => {
+    ctx = await startServer()
+    await global.page.goto(ctx.url('/'))
+  })
+
+  afterAll(async () => {
+    ctx.serverProcess.kill()
+  })
+
+  test('initial rendering', async () => {
+    expect(await getText(global.page, '#lang label')).toMatch('言語')
+    expect(await getText(global.page, '#fruits label')).toMatch(
+      'バナナが欲しい？'
+    )
+    expect(await getText(global.page, '#msg')).toMatch('こんにちは、世界！')
+    expect(await getText(global.page, '#custom-directive')).toMatch('やあ！')
+  })
+
+  test('change locale', async () => {
+    await global.page.selectOption('#lang select', 'en')
+    expect(await getText(global.page, '#lang label')).toMatch('Language')
+    expect(await getText(global.page, '#msg')).toMatch('hello, world!')
+    expect(await getText(global.page, '#custom-directive')).toMatch('Hi!')
+  })
+
+  test('change banana select', async () => {
+    await global.page.selectOption('#fruits select', '3')
+    expect(await getText(global.page, '#banana')).toMatch('バナナ 3 個')
+  })
+})

e2e/vite.spec.ts

@@ -1,13 +1,13 @@
 <template>
-  <form>
+  <form id="lang">
     <label>{{ t('language') }}</label>
     <select v-model="locale">
       <option value="en">en</option>
       <option value="ja">ja</option>
     </select>
   </form>
-  <p>{{ t('hello') }}</p>
-  <p v-t="'hi'"></p>
+  <p id="msg">{{ t('hello') }}</p>
+  <p id="custom-directive" v-t="'hi'"></p>
   <Banana />
 </template>
 

packages/unplugin-vue-i18n/examples/vite/index.html renamed to examples/vite/index.html

@@ -8,7 +8,7 @@
       <option value="3">3</option>
     </select>
   </form>
-  <p>{{ t('fruits.banana', select, { n: select }) }}</p>
+  <p id="banana">{{ t('fruits.banana', select, { n: select }) }}</p>
 </template>
 
 <script setup lang="ts">

packages/unplugin-vue-i18n/examples/vite/src/App.vue renamed to examples/vite/src/App.vue

@@ -1,14 +1,14 @@
 import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueI18n from '../../src/vite'
+import vueI18n from '../../packages/unplugin-vue-i18n/src/vite'
 
 export default defineConfig({
   resolve: {
     alias: {
       vue: path.resolve(
         __dirname,
-        '../../../../node_modules/vue/dist/vue.esm-bundler.js'
+        '../../node_modules/vue/dist/vue.esm-bundler.js'
       )
     }
   },

packages/unplugin-vue-i18n/examples/vite/src/Banana.vue renamed to examples/vite/src/Banana.vue

@@ -1,6 +1,6 @@
 const path = require('path')
 const { VueLoaderPlugin } = require('vue-loader')
-const VueI18nPlugin = require('../../lib/webpack.cjs')
+const VueI18nPlugin = require('../../packages/unplugin-vue-i18n/lib/webpack.cjs')
 
 module.exports = {
   mode: 'development',
@@ -13,16 +13,16 @@ module.exports = {
   },
   resolve: {
     alias: {
-      // this isn't technically needed, since the default `vue` entry for bundlers
-      // is a simple `export * from '@vue/runtime-dom`. However having this
-      // extra re-export somehow causes webpack to always invalidate the module
-      // on the first HMR update and causes the page to reload.
-      vue: '@vue/runtime-dom'
+      vue: path.resolve(
+        __dirname,
+        '../../node_modules/vue/dist/vue.esm-bundler.js'
+      )
     }
   },
   devServer: {
-    stats: 'minimal',
-    contentBase: __dirname
+    static: {
+      directory: path.join(__dirname, './')
+    }
   },
   module: {
     rules: [

packages/unplugin-vue-i18n/examples/vite/src/locales/en.yaml renamed to examples/vite/src/locales/en.yaml

@@ -59,6 +59,7 @@
     "eslint-plugin-vue": "^9.26.0",
     "esno": "^0.17.0",
     "execa": "^5.1.1",
+    "get-port-please": "^3.1.2",
     "jest": "^27.2.3",
     "jest-puppeteer": "^6.0.0",
     "jest-watch-typeahead": "^0.6.4",
@@ -72,6 +73,7 @@
     "prettier": "^3.2.5",
     "prompts": "^2.4.1",
     "puppeteer": "^10.4.0",
+    "playwright": "^1.44.0",
     "rollup": "^2.53.1",
     "rollup-plugin-vue": "^6.0.0",
     "secretlint": "^3.2.0",
@@ -113,54 +115,55 @@
   },
   "scripts": {
     "prepare": "git config --local core.hooksPath .githooks",
-    "build": "npm-run-all -s \"build:utils\" \"build:unplugin\"",
-    "build:utils": "yarn workspace @intlify/bundle-utils build",
-    "build:rollup": "yarn workspace @intlify/rollup-plugin-vue-i18n build",
-    "build:vite": "yarn workspace @intlify/vite-plugin-vue-i18n build",
-    "build:webpack": "yarn workspace @intlify/vue-i18n-loader build",
-    "build:unplugin": "yarn workspace @intlify/unplugin-vue-i18n build",
-    "example:unplugin": "yarn workspace @intlify/unplugin-vue-i18n build:example",
-    "play:unplugin:vite": "yarn workspace @intlify/unplugin-vue-i18n dev:vite",
-    "play:unplugin:webpack": "yarn workspace @intlify/unplugin-vue-i18n dev:webpack",
-    "clean": "npm-run-all --parallel \"clean:*\"",
-    "clean:utils": "yarn workspace @intlify/bundle-utils clean",
-    "clean:rollup": "yarn workspace @intlify/rollup-plugin-vue-i18n clean",
-    "clean:vite": "yarn workspace @intlify/vite-plugin-vue-i18n clean",
-    "clean:webpack": "yarn workspace @intlify/vue-i18n-loader clean",
-    "clean:unplugin": "yarn workspace @intlify/unplugin-vue-i18n clean",
+    "build": "run-s \"build:utils\" \"build:unplugin\"",
+    "build:utils": "pnpm --filter @intlify/bundle-utils build",
+    "build:rollup": "pnpm --filter @intlify/rollup-plugin-vue-i18n build",
+    "build:vite": "pnpm --filter @intlify/vite-plugin-vue-i18n build",
+    "build:webpack": "pnpm --filter @intlify/vue-i18n-loader build",
+    "build:unplugin": "pnpm --filter @intlify/unplugin-vue-i18n build",
+    "build:example": "run-s \"build:example:vite {@}\" \"build:example:webpack\" --",
+    "build:example:vite": "cd examples/vite && vite build --config ./vite.config.ts --outDir ./dist",
+    "build:example:webpack": "pnpm build && webpack --config ./examples/webpack/webpack.config.js",
+    "play:vite": "vite examples/vite -c examples/vite/vite.config.ts",
+    "play:webpack": "pnpm run build:unplugin && webpack serve --config ./examples/webpack/webpack.config.js",
+    "preview:vite": "vite preview examples/vite --outDir dist",
+    "check-install": "jiti scripts/playwright.ts",
+    "clean": "run-p \"clean:*\"",
+    "clean:utils": "pnpm --filter @intlify/bundle-utils clean",
+    "clean:rollup": "pnpm --filter @intlify/rollup-plugin-vue-i18n clean",
+    "clean:vite": "pnpm --filter @intlify/vite-plugin-vue-i18n clean",
+    "clean:webpack": "pnpm --filter @intlify/vue-i18n-loader clean",
+    "clean:unplugin": "pnpm --filter @intlify/unplugin-vue-i18n clean",
     "coverage": "opener coverage/lcov-report/index.html",
-    "fix": "npm-run-all --parallel lint:eslint:fix format:fix",
+    "fix": "run-p lint:eslint:fix format:fix",
     "format": "prettier --config .prettierrc --ignore-path .prettierignore '**/*.{js,json,html}'",
-    "format:fix": "yarn format --write",
-    "lint": "npm-run-all --parallel lint:eslint lint:secret",
+    "format:fix": "pnpm format --write",
+    "lint": "run-p lint:eslint lint:secret",
     "lint:eslint": "eslint ./packages ./scripts --ext .ts",
-    "lint:eslint:fix": "yarn lint:eslint --fix",
+    "lint:eslint:fix": "pnpm lint:eslint --fix",
     "lint:secret": "npx secretlint \"**/*\"",
-    "test": "yarn test:unit && yarn test:e2e",
-    "test:e2e": "npm-run-all test:e2e:unplugin",
-    "test:e2e:rollup": "yarn workspace @intlify/rollup-plugin-vue-i18n test:e2e",
-    "test:e2e:vite": "yarn workspace @intlify/vite-plugin-vue-i18n test:e2e",
-    "test:e2e:webpack": "yarn workspace @intlify/vue-i18n-loader test:e2e",
-    "test:e2e:unplugin": "yarn workspace @intlify/unplugin-vue-i18n test:e2e",
-    "test:unit": "run-s \"test:unit:utils\" \"test:unit:unplugin\"",
-    "test:unit:utils": "yarn run build:utils && vitest run packages/bundle-utils",
+    "test": "pnpm test:unit && pnpm test:e2e",
+    "test:e2e": "pnpm check-install && vitest -c ./vitest.e2e.config.ts run",
+    "test:e2e:rollup": "pnpm --filter @intlify/rollup-plugin-vue-i18n test:e2e",
+    "test:e2e:vite": "pnpm --filter @intlify/vite-plugin-vue-i18n test:e2e",
+    "test:e2e:webpack": "pnpm --filter @intlify/vue-i18n-loader test:e2e",
+    "test:e2e:unplugin": "pnpm --filter @intlify/unplugin-vue-i18n test:e2e",
+    "test:unit": "run-s \"test:unit:utils {@}\" \"test:unit:unplugin {@}\" --",
+    "test:unit:utils": "vitest run packages/bundle-utils",
     "test:unit:rollup": "vitest run packages/rollup-plugin-vue-i18n/test",
     "test:unit:unplugin": "vitest run packages/unplugin-vue-i18n/test",
     "changelog": "jiti ./scripts/changelog.ts",
-    "changelog:utils": "yarn workspace @intlify/bundle-utils changelog",
-    "changelog:rollup": "yarn workspace @intlify/rollup-plugin-vue-i18n changelog",
-    "changelog:vite": "yarn workspace @intlify/vite-plugin-vue-i18n changelog",
-    "changelog:webpack": "yarn workspace @intlify/vue-i18n-loader changelog",
-    "changelog:unplugin": "yarn workspace @intlify/unplugin-vue-i18n changelog",
+    "changelog:utils": "pnpm --filter @intlify/bundle-utils changelog",
+    "changelog:rollup": "pnpm --filter @intlify/rollup-plugin-vue-i18n changelog",
+    "changelog:vite": "pnpm --filter @intlify/vite-plugin-vue-i18n changelog",
+    "changelog:webpack": "pnpm --filter @intlify/vue-i18n-loader changelog",
+    "changelog:unplugin": "pnpm --filter @intlify/unplugin-vue-i18n changelog",
     "release": "jiti ./scripts/release.ts",
-    "release:utils": "yarn workspace @intlify/bundle-utils release",
-    "release:rollup": "yarn workspace @intlify/rollup-plugin-vue-i18n release",
-    "release:vite": "yarn workspace @intlify/vite-plugin-vue-i18n release",
-    "release:webpack": "yarn workspace @intlify/vue-i18n-loader release",
-    "release:unplugin": "yarn workspace @intlify/unplugin-vue-i18n release"
+    "release:utils": "pnpm --filter @intlify/bundle-utils release",
+    "release:rollup": "pnpm --filter @intlify/rollup-plugin-vue-i18n release",
+    "release:vite": "pnpm --filter @intlify/vite-plugin-vue-i18n release",
+    "release:webpack": "pnpm --filter @intlify/vue-i18n-loader release",
+    "release:unplugin": "pnpm --filter @intlify/unplugin-vue-i18n release"
   },
-  "workspaces": [
-    "packages/bundle-utils",
-    "packages/unplugin-vue-i18n"
-  ]
+  "packageManager": "[email protected]+sha256.e1f9e8d1a16607a46dd3c158b5f7a7dc7945501d1c6222d454d63d033d1d918f"
 }

packages/unplugin-vue-i18n/examples/vite/src/locales/fruits/en.yaml renamed to examples/vite/src/locales/fruits/en.yaml

@@ -61,7 +61,7 @@
   },
   "scripts": {
     "build": "unbuild",
-    "clean": "npm-run-all \"clean:*\"",
+    "clean": "run-p \"clean:*\"",
     "clean:lib": "rm -rf ./lib",
     "changelog": "jiti ../../scripts/changelog.ts",
     "release": "jiti ../../scripts/release.ts"