fix(types): fix typescript definitions (#160)

.gitignore

@@ -10,3 +10,4 @@ compiled
 .awcache
 .rpt2_cache
 .cache/
+temp

api-extractor.json

@@ -0,0 +1,50 @@
+// this the shared base config for all packages.
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  "apiReport": {
+    "enabled": true,
+    "reportFolder": "<projectFolder>/temp/"
+  },
+
+  "docModel": {
+    "enabled": true
+  },
+
+  "dtsRollup": {
+    "enabled": true
+  },
+
+  "tsdocMetadata": {
+    "enabled": false
+  },
+
+  "messages": {
+    "compilerMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      }
+    },
+
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning",
+        "addToApiReportFile": true
+      },
+
+      "ae-missing-release-tag": {
+        "logLevel": "none"
+      }
+    },
+
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+      },
+
+      "tsdoc-undefined-tag": {
+        "logLevel": "none"
+      }
+    }
+  }
+}

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@ls-lint/ls-lint": "^1.9.0",
     "@rollup/plugin-commonjs": "^15.0.0",
+    "@microsoft/api-extractor": "^7.9.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.3",

packages/fluent-vue/__tests__/vue/messageOverride.spec.ts

@@ -5,8 +5,7 @@ import VueCompositionApi from '@vue/composition-api'
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
 
-import { createFluentVue } from '../../src'
-import { FluentVue } from '../../src/interfaces'
+import { createFluentVue, FluentVue } from '../../src'
 
 Vue.use(VueCompositionApi)
 

packages/fluent-vue/api-extractor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/packages/<unscopedPackageName>/src/index.d.ts",
+  "dtsRollup": {
+    "publicTrimmedFilePath": "./dist/<unscopedPackageName>.d.ts"
+  }
+}

packages/fluent-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fluent-vue",
   "version": "3.0.0-beta.0",
-  "description": "Fluent bindings for Vue.js",
+  "description": "Project Fluent bindings for Vue.js",
   "keywords": [
     "localization",
     "l10n",
@@ -16,11 +16,13 @@
     "format",
     "vue",
     "vuejs",
-    "vue.js"
+    "vue.js",
+    "ProjectFluent",
+    "Project Fluent"
   ],
   "main": "dist/fluent-vue.cjs.prod.js",
   "module": "dist/fluent-vue.esm.js",
-  "types": "src/types/index.d.ts",
+  "types": "dist/fluent-vue.d.ts",
   "sideEffects": false,
   "files": [
     "dist",

packages/fluent-vue/src/TranslationContext.ts

@@ -2,7 +2,7 @@ import { CachedSyncIterable } from 'cached-iterable'
 import { mapBundleSync } from '@fluent/sequence'
 import { warn } from './util/warn'
 import { FluentBundle, FluentVariable } from '@fluent/bundle'
-import { Pattern } from '@fluent/bundle/esm/ast'
+import { Message, Pattern } from '@fluent/bundle/esm/ast'
 import { computed, ComputedRef, Ref } from 'vue-demi'
 import { getOrderedBundles } from './getOrderedBundles'
 
@@ -23,7 +23,7 @@ export class TranslationContext {
     return mapBundleSync(this.bundlesIterable.value, key)
   }
 
-  getMessage(bundle: FluentBundle | null, key: string) {
+  getMessage(bundle: FluentBundle | null, key: string): Message | null {
     const message = bundle?.getMessage(key)
 
     if (message === undefined) {

packages/fluent-vue/src/index.ts

@@ -1,22 +1,41 @@
-import { isVue3, ref, provide } from 'vue-demi'
-import { FluentVueOptions } from './interfaces'
+import { isVue3, ref, provide, Ref } from 'vue-demi'
 import { TranslationContext } from './TranslationContext'
 import { createVue2Directive, createVue3Directive } from './vue/directive'
 import component from './vue/component'
 import { getContext } from './composition'
 import { RootContextSymbol } from './symbols'
-import { FluentVariable } from '@fluent/bundle'
+import { FluentBundle, FluentVariable } from '@fluent/bundle'
 
 export { useFluent } from './composition'
 
+export interface FluentVueOptions {
+  /** Currently selected locale */
+  locale: string | string[]
+  /** List of bundles used in application */
+  bundles: FluentBundle[]
+}
+
+export interface FluentVue {
+  /** Currently selected locale */
+  locale: string | string[]
+  /** List of bundles used in application */
+  bundles: FluentBundle[]
+
+  format(key: string, value?: Record<string, FluentVariable>): string
+
+  formatAttrs(key: string, value?: Record<string, FluentVariable>): Record<string, string>
+
+  install(vue: any): void
+}
+
 /**
  * Creates FluentVue instance that can bu used on a Vue app.
  *
  * @param options - {@link FluentVueOptions}
  */
-export function createFluentVue(options: FluentVueOptions) {
+export function createFluentVue(options: FluentVueOptions): FluentVue {
   const locale = ref(options.locale)
-  const bundles = ref(options.bundles)
+  const bundles: Ref<FluentBundle[]> = ref(options.bundles)
 
   const rootContext = new TranslationContext(locale, bundles)
 

scripts/build.js

@@ -29,6 +29,7 @@ const devOnly = args.devOnly || args.d
 const prodOnly = !devOnly && (args.prodOnly || args.p)
 const sourceMap = args.sourcemap || args.s
 const isRelease = args.release
+const buildTypes = args.t || args.types || isRelease
 const buildAllMatching = args.all || args.a
 const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
 
@@ -75,6 +76,7 @@ async function build(target) {
         `NODE_ENV:${env}`,
         `TARGET:${target}`,
         formats ? `FORMATS:${formats}` : ``,
+        buildTypes ? `TYPES:true` : ``,
         prodOnly ? `PROD_ONLY:true` : ``,
         sourceMap ? `SOURCE_MAP:true` : ``,
       ]
@@ -83,6 +85,44 @@ async function build(target) {
     ],
     { stdio: 'inherit' }
   )
+
+  if (buildTypes && pkg.types) {
+    console.log()
+    console.log(chalk.bold(chalk.yellow(`Rolling up type definitions for ${target}...`)))
+
+    // build types
+    const { Extractor, ExtractorConfig } = require('@microsoft/api-extractor')
+
+    const extractorConfigPath = path.resolve(pkgDir, `api-extractor.json`)
+    const extractorConfig = ExtractorConfig.loadFileAndPrepare(extractorConfigPath)
+    const result = Extractor.invoke(extractorConfig, {
+      localBuild: true,
+      showVerboseMessages: true,
+    })
+
+    if (result.succeeded) {
+      // concat additional d.ts to rolled-up dts (mostly for JSX)
+      if (pkg.buildOptions && pkg.buildOptions.dts) {
+        const dtsPath = path.resolve(pkgDir, pkg.types)
+        const existing = await fs.readFile(dtsPath, 'utf-8')
+        const toAdd = await Promise.all(
+          pkg.buildOptions.dts.map((file) => {
+            return fs.readFile(path.resolve(pkgDir, file), 'utf-8')
+          })
+        )
+        await fs.writeFile(dtsPath, existing + '\n' + toAdd.join('\n'))
+      }
+      console.log(chalk.bold(chalk.green(`API Extractor completed successfully.`)))
+    } else {
+      console.error(
+        `API Extractor completed with ${extractorResult.errorCount} errors` +
+          ` and ${extractorResult.warningCount} warnings`
+      )
+      process.exitCode = 1
+    }
+
+    await fs.remove(`${pkgDir}/dist/packages`)
+  }
 }
 
 function checkAllSizes(targets) {

tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "outDir": "dist",
     "sourceMap": false,
-    "target": "ES2019",
+    "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
     "allowJs": false,