Add testing of example projects (#10)

Author: Demivan

.github/workflows/test.yml

@@ -50,3 +50,24 @@ jobs:
 
       - name: Lint
         run: pnpm lint
+
+  test-examples:
+    runs-on: ubuntu-latest
+    name: Test build of example projects
+    steps:
+      - name: Checkout unplugin-fluent-vue
+        uses: actions/[email protected]
+      - name: Checkout examples
+        uses: actions/[email protected]
+        with:
+          repository: fluent-vue/examples
+          path: examples
+      - name: Setup Node.js
+        uses: actions/[email protected]
+      - uses: pnpm/[email protected]
+        with:
+          version: 7.x.x
+          run_install: true
+
+      - name: Test
+        run: node scripts/build-examples.mjs

__tests__/fixtures/blockType.vue

@@ -0,0 +1,7 @@
+<template>
+  {{ $t('test-key') }}
+</template>
+
+<i18n locale="en">
+test-key = test-value
+</i18n>

__tests__/frameworks/vite/.npmrc

@@ -1,10 +1,15 @@
 // Vitest Snapshot v1
 
 exports[`Vite external > works 1`] = `
-"import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/components/external.vue\\");import da_ftl from '/fixtures/ftl/da/components/external.vue.ftl?import';
+"=== /fixtures/components/external.vue ===
+import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/components/external.vue\\");import da_ftl from '/fixtures/ftl/da/components/external.vue.ftl?import';
 import en_ftl from '/fixtures/ftl/en/components/external.vue.ftl?import';
 const _sfc_main = {}
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"/@id/vue\\"
+const _toDisplayString = window['Vue'].toDisplayString
+const _createElementVNode = window['Vue'].createElementVNode
+const _openBlock = window['Vue'].openBlock
+const _createElementBlock = window['Vue'].createElementBlock
+
 
 function _sfc_render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"div\\", null, [
@@ -48,11 +53,24 @@ _sfc_main.fluent['da'] = da_ftl
     }
   })
 }
-export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',\\"/fixtures/components/external.vue\\"]])"
+export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',\\"/fixtures/components/external.vue\\"]])
+
+=== /fixtures/ftl/da/components/external.vue.ftl ===
+
+import { FluentResource } from '.vite-plugin-externals/@fluent/bundle.js'
+export default new FluentResource(\\"\\")
+
+
+=== /fixtures/ftl/en/components/external.vue.ftl ===
+
+import { FluentResource } from '.vite-plugin-externals/@fluent/bundle.js'
+export default new FluentResource(\\"# Simple things are simple.\\\\nhello-user = Hello, {$userName}!\\\\n\\\\n# Complex things are possible.\\\\nshared-photos =\\\\n  {$userName} {$photoCount ->\\\\n    [one] added one photo\\\\n   *[other] added {$photoCount} new photo\\\\n  }to {$userGender ->\\\\n    [male] his stream\\\\n    [female] her stream\\\\n   *[other] their stream\\\\n  }.\\\\n\\")
+"
 `;
 
 exports[`Vite external > works with script setup 1`] = `
-"import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/components/external.setup.vue\\");import en_ftl from '/fixtures/ftl/en/components/external.setup.vue.ftl?import';
+"=== /fixtures/components/external.setup.vue ===
+import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/components/external.setup.vue\\");import en_ftl from '/fixtures/ftl/en/components/external.setup.vue.ftl?import';
 const _sfc_main = {
   __name: 'external.setup',
   setup(__props, { expose }) {
@@ -66,7 +84,11 @@ return __returned__
 }
 
 }
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"/@id/vue\\"
+const _toDisplayString = window['Vue'].toDisplayString
+const _createElementVNode = window['Vue'].createElementVNode
+const _openBlock = window['Vue'].openBlock
+const _createElementBlock = window['Vue'].createElementBlock
+
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (_openBlock(), _createElementBlock(\\"div\\", null, [
@@ -108,5 +130,11 @@ if (__HOT_API__) {
     }
   })
 }
-export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',\\"/fixtures/components/external.setup.vue\\"]])"
+export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',\\"/fixtures/components/external.setup.vue\\"]])
+
+=== /fixtures/ftl/en/components/external.setup.vue.ftl ===
+
+import { FluentResource } from '.vite-plugin-externals/@fluent/bundle.js'
+export default new FluentResource(\\"# Simple things are simple.\\\\nhello-user = Hello, {$userName}!\\\\n\\\\n# Complex things are possible.\\\\nshared-photos =\\\\n  {$userName} {$photoCount ->\\\\n    [one] added one photo\\\\n   *[other] added {$photoCount} new photo\\\\n  } to {$userGender ->\\\\n    [male] his stream\\\\n    [female] her stream\\\\n   *[other] their stream\\\\n  }.\\\\n\\")
+"
 `;

__tests__/frameworks/vite/src/__snapshots__/external.spec.ts.snap renamed to __tests__/frameworks/vite/__snapshots__/external.spec.ts.snap

@@ -0,0 +1,87 @@
+// Vitest Snapshot v1
+
+exports[`Vite SFC > generates custom block code 1`] = `
+"=== /fixtures/test.vue ===
+import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/test.vue\\");const _sfc_main = {}
+const _toDisplayString = window['Vue'].toDisplayString
+const _createElementVNode = window['Vue'].createElementVNode
+const _openBlock = window['Vue'].openBlock
+const _createElementBlock = window['Vue'].createElementBlock
+
+
+function _sfc_render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    _createElementVNode(\\"div\\", null, _toDisplayString(_ctx.$t('hello-user', { userName: _ctx.userName })), 1 /* TEXT */),
+    _createElementVNode(\\"div\\", null, _toDisplayString(_ctx.$t('shared-photos', { userName: _ctx.userName, photoCount: _ctx.photoCount, userGender: _ctx.userGender })), 1 /* TEXT */)
+  ]))
+}
+
+import block0 from \\"/fixtures/test.vue?vue&type=fluent&index=0&locale=en&lang.fluent\\"
+if (typeof block0 === 'function') block0(_sfc_main)
+
+_sfc_main.__hmrId = \\"7e4b934c\\"
+typeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)
+import.meta.hot.accept(mod => {
+  if (!mod) return
+  const { default: updated, _rerender_only } = mod
+  if (_rerender_only) {
+    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)
+  } else {
+    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)
+  }
+})
+import _export_sfc from '/@id/__x00__plugin-vue:export-helper'
+export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',\\"/fixtures/test.vue\\"]])
+
+=== /fixtures/test.vue?vue&type=fluent&index=0&locale=en&lang.fluent ===
+
+const FluentResource = window['FluentBundle'].FluentResource
+
+
+export default function (Component) {
+  const target = Component.options || Component
+  target.fluent = target.fluent || {}
+  target.fluent['en'] = new FluentResource(\\"# Simple things are simple.\\\\nhello-user = Hello, {$userName}!\\\\n\\\\n# Complex things are possible.\\\\nshared-photos =\\\\n  {$userName} {$photoCount ->\\\\n     [one] added one photo\\\\n    *[other] added {$photoCount} new photos\\\\n  } to {$userGender ->\\\\n     [male] his stream\\\\n     [female] her stream\\\\n    *[other] their stream\\\\n  }.\\")
+}
+"
+`;
+
+exports[`Vite SFC > supports custom blockType 1`] = `
+"=== /fixtures/blockType.vue ===
+import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/blockType.vue\\");const _sfc_main = {}
+const _toDisplayString = window['Vue'].toDisplayString
+
+
+function _sfc_render(_ctx, _cache) {
+  return _toDisplayString(_ctx.$t('test-key'))
+}
+
+import block0 from \\"/fixtures/blockType.vue?vue&type=i18n&index=0&locale=en&lang.i18n\\"
+if (typeof block0 === 'function') block0(_sfc_main)
+
+_sfc_main.__hmrId = \\"8c542073\\"
+typeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)
+import.meta.hot.accept(mod => {
+  if (!mod) return
+  const { default: updated, _rerender_only } = mod
+  if (_rerender_only) {
+    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)
+  } else {
+    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)
+  }
+})
+import _export_sfc from '/@id/__x00__plugin-vue:export-helper'
+export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',\\"/fixtures/blockType.vue\\"]])
+
+=== /fixtures/blockType.vue?vue&type=i18n&index=0&locale=en&lang.i18n ===
+
+const FluentResource = window['FluentBundle'].FluentResource
+
+
+export default function (Component) {
+  const target = Component.options || Component
+  target.fluent = target.fluent || {}
+  target.fluent['en'] = new FluentResource(\\"test-key = test-value\\")
+}
+"
+`;

__tests__/frameworks/vite/__snapshots__/sfc.spec.ts.snap

@@ -4,14 +4,14 @@ import { describe, expect, it } from 'vitest'
 import vue3base from '@vitejs/plugin-vue'
 import compiler from '@vue/compiler-sfc'
 
-import { ExternalFluentPlugin } from '../../../../src/vite'
+import { ExternalFluentPlugin } from '../../../src/vite'
 import { compile } from './util'
 
 const vue3 = () => vue3base({
   compiler,
 })
 
-const baseDir = resolve(__dirname, '../../..')
+const baseDir = resolve(__dirname, '../..')
 
 describe('Vite external', () => {
   it('works', async () => {

__tests__/frameworks/vite/src/external.spec.ts renamed to __tests__/frameworks/vite/external.spec.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest'
 
 import vue3base from '@vitejs/plugin-vue'
-import compiler from '@vue/compiler-sfc'
 
-import { SFCFluentPlugin } from '../../../../src/vite'
+import compiler from '@vue/compiler-sfc'
+import { SFCFluentPlugin } from '../../../src/vite'
 import { compile } from './util'
 
 const vue3 = () => vue3base({
@@ -32,7 +32,7 @@ describe('Vite SFC', () => {
       plugins: [
         vue3(),
         SFCFluentPlugin({
-          blockType: 'custom',
+          blockType: 'i18n',
         }),
       ],
     }, '/fixtures/blockType.vue')

__tests__/frameworks/vite/package.json

@@ -0,0 +1,45 @@
+import { resolve, sep } from 'path'
+
+import type { InlineConfig, ModuleNode } from 'vite'
+import { createServer } from 'vite'
+
+import { viteExternalsPlugin } from 'vite-plugin-externals'
+
+const baseDir = resolve(__dirname, '../..')
+
+export async function compile(options: InlineConfig, file: string): Promise<string | undefined> {
+  const vite = await createServer({
+    root: baseDir,
+    ...options,
+    plugins: [
+      ...options.plugins,
+      viteExternalsPlugin({
+        'vue': 'Vue',
+        '@fluent/bundle': 'FluentBundle',
+      }),
+    ],
+  })
+
+  await vite.transformRequest(file)
+
+  const module = await vite.moduleGraph.getModuleByUrl(file)
+
+  const getAllModules = (module: ModuleNode): ModuleNode[] => [module].concat([...module.importedModules.values()].flatMap(getAllModules))
+
+  const modules = await Promise.all(getAllModules(module)
+    .map(async module => ({
+      transform: await vite.transformRequest(module.url),
+      module,
+    })))
+
+  const code = modules
+    .filter(module => module.transform)
+    .filter(module => !module.module.url.includes('node_modules'))
+    .map(module => `=== ${module.module.url} ===\n${module.transform.code}`).join('\n\n')
+
+  // normalize paths
+  return code
+    ?.replaceAll(baseDir.replaceAll(sep, '/'), '')
+    .replace(/\/@(fs|id).*?node_modules\//g, '')
+    .replaceAll('\\r\\n', '\\n')
+}

__tests__/frameworks/vite/src/sfc.spec.ts renamed to __tests__/frameworks/vite/sfc.spec.ts

@@ -4,12 +4,12 @@ import { Volume, createFsFromVolume } from 'memfs'
 
 import { VueLoaderPlugin } from 'vue-loader'
 
-import type { SFCPluginOptions } from '../../../../src/webpack'
-import { SFCFluentPlugin } from '../../../../src/webpack'
+import { SFCFluentPlugin } from '../../../src/webpack'
+import type { SFCPluginOptions } from '../../../src/webpack'
 
 export async function compile(fixture: string, options: Partial<SFCPluginOptions> = {}, hot = false): Promise<webpack.Stats> {
   const compilation = webpack({
-    context: path.resolve(__dirname, '../../..'),
+    context: path.resolve(__dirname, '../..'),
     entry: `./${fixture}`,
     externals: {
       'vue': 'Vue',