Add sourcemap support to SFCFluentPlugin (#103)

* Remove not used files

* Enable and fix TS errors

* Include map in ExternalFluentPlugin

* Add support for sourcemaps to SFCFluentPlugin

* Add automatic publish script

* Don't tranform file is not needed

.github/workflows/test.yml

@@ -49,6 +49,23 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish test build to pkg.pr.new
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+      - name: Setup Node.js
+        uses: actions/setup-node@v4.1.0
+      - uses: pnpm/action-setup@v4.0.0
+        with:
+          run_install: true
+
+      - name: Build
+        run: pnpm build
+      - name: Publish
+        run: pnpx pkg-pr-new publish
+
   test-examples:
     runs-on: ubuntu-latest
     name: Test build of example projects

package.json

@@ -83,13 +83,13 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "*.d.ts",
     "dist"
   ],
   "scripts": {
     "test": "vitest",
     "test:coverage": "vitest  --coverage",
     "build": "tsup",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "prepare": "husky",
     "release": "dotenv release-it"

src/plugins/external-plugin.ts

@@ -46,19 +46,20 @@ export const unplugin = createUnplugin((options: ExternalPluginOptions) => {
     ...options,
   }
 
+  let getFtlPath
   if ('getFtlPath' in options) {
-    resolvedOptions.getFtlPath = options.getFtlPath
+    getFtlPath = options.getFtlPath
   }
   else {
-    resolvedOptions.getFtlPath = (locale: string, vuePath: string) => {
+    getFtlPath = (locale: string, vuePath: string) => {
       return join(options.ftlDir, locale, `${relative(options.baseDir, vuePath)}.ftl`)
     }
   }
 
   const getTranslationsForFile = async (id: string) => {
     const dependencies: Dependency[] = []
     for (const locale of options.locales) {
-      const ftlPath = normalizePath(resolvedOptions.getFtlPath(locale, id))
+      const ftlPath = normalizePath(getFtlPath(locale, id))
       const ftlExists = await fileExists(ftlPath)
       let relativeFtlPath = normalizePath(relative(dirname(id), ftlPath))
       if (!relativeFtlPath.startsWith('.'))
@@ -125,7 +126,7 @@ export const unplugin = createUnplugin((options: ExternalPluginOptions) => {
 
         return {
           code: magic.toString(),
-          map: { mappings: '' },
+          map: magic.generateMap(),
         }
       }
 

src/plugins/sfc-plugin.ts

@@ -1,6 +1,7 @@
 import type { VitePlugin } from 'unplugin'
 import type { SFCPluginOptions } from '../types'
 
+import MagicString from 'magic-string'
 import { createUnplugin } from 'unplugin'
 import { isCustomBlock, parseVueRequest } from '../loader-query'
 import { getSyntaxErrors } from './ftl/parse'
@@ -23,41 +24,50 @@ export const unplugin = createUnplugin((options: SFCPluginOptions, meta) => {
       const { query } = parseVueRequest(id)
 
       if (isCustomBlock(query, resolvedOptions)) {
-        const data = source
-          // vue-loader pads SFC file sections with newlines - trim those
-          .replace(/^(\n|\r\n)+|(\n|\r\n)+$/g, '')
-          // normalise newlines
-          .replace(/\r\n/g, '\n')
+        const originalSource = source
+
+        const magic = new MagicString(source, { filename: id })
+
+        source = source.replace(/\r\n/g, '\n').trim()
 
         if (query.locale == null)
           this.error('Custom block does not have locale attribute')
 
         // I have no idea why webpack processes this file multiple times
         if (source.includes('FluentResource') || source.includes('unplugin-fluent-vue-sfc'))
-          return source
+          return undefined
 
         if (resolvedOptions.checkSyntax) {
-          const errorsText = getSyntaxErrors(data)
+          const errorsText = getSyntaxErrors(source)
           if (errorsText)
             this.error(errorsText)
         }
 
-        return `
+        if (originalSource.length > 0)
+          magic.update(0, originalSource.length, JSON.stringify(source))
+        else
+          magic.append('""')
+
+        magic.prepend(`
 import { FluentResource } from '@fluent/bundle'
 
 export default function (Component) {
   const target = Component.options || Component
   target.fluent = target.fluent || {}
-  target.fluent['${query.locale}'] = new FluentResource(${JSON.stringify(data)})
-}
-`
+  target.fluent['${query.locale}'] = new FluentResource(`)
+        magic.append(')\n}\n')
+
+        return {
+          code: magic.toString(),
+          map: magic.generateMap(),
+        }
       }
 
       return undefined
     },
   }
 })
 
-export const vitePlugin: (options?: SFCPluginOptions) => VitePlugin = unplugin.vite
+export const vitePlugin = unplugin.vite as (options?: SFCPluginOptions) => VitePlugin
 export const rollupPlugin = unplugin.rollup
 export const webpackPlugin = unplugin.webpack

tsconfig.json

@@ -4,8 +4,10 @@
     "baseUrl": ".",
     "moduleResolution": "node",
     "types": ["node"],
+    "strict": true,
     "sourceMap": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "skipLibCheck": true
   },
   "exclude": [
     "node_modules"