fix(app-vite&app-webpack): fix types feature flags (#17429)

* refactor: centralize types feature flags * fix: make feature flags work when using moduleResolution: bundler which is what's specified in the tsconfig-presets * feat: improve feature flag comments * refactor: make it sync and rename it doesn't use any async APIs, it used to a long time ago * fix: update store-flag.d.ts files in create-quasar too
quasarframework · Aug 12, 2024 · d2ec87d · d2ec87d
1 parent 6ea52eb
commit d2ec87d
Show file tree

Hide file tree

Showing 32 changed files with 164 additions and 226 deletions.
diff --git a/app-vite/lib/cmd/build.js b/app-vite/lib/cmd/build.js
@@ -132,8 +132,8 @@ await quasarConfFile.init()
 
 const quasarConf = await quasarConfFile.read()
 
-const { regenerateTypesFeatureFlags } = await import('../utils/types-feature-flags.js')
-await regenerateTypesFeatureFlags(quasarConf)
+const { ensureTypesFeatureFlags } = await import('../utils/types-feature-flags.js')
+ensureTypesFeatureFlags(quasarConf)
 
 const { QuasarModeBuilder } = await import(`../modes/${ argv.mode }/${ argv.mode }-builder.js`)
 const appBuilder = new QuasarModeBuilder({ argv, quasarConf })

diff --git a/app-vite/lib/cmd/dev.js b/app-vite/lib/cmd/dev.js
@@ -153,8 +153,8 @@ await quasarConfFile.init()
 
 const quasarConf = await quasarConfFile.read()
 
-import { regenerateTypesFeatureFlags } from '../utils/types-feature-flags.js'
-await regenerateTypesFeatureFlags(quasarConf)
+import { ensureTypesFeatureFlags } from '../utils/types-feature-flags.js'
+ensureTypesFeatureFlags(quasarConf)
 
 if (quasarConf.metaConf.vueDevtools !== false) {
   await startVueDevtools(ctx, quasarConf.metaConf.vueDevtools.port)

diff --git a/app-vite/lib/utils/types-feature-flags.js b/app-vite/lib/utils/types-feature-flags.js
@@ -1,10 +1,31 @@
 import { join, dirname } from 'node:path'
-import { existsSync } from 'node:fs'
-import fse from 'fs-extra'
+import { writeFileSync, existsSync } from 'node:fs'
 
 import { log } from './logger.js'
 
-export async function regenerateTypesFeatureFlags (quasarConf) {
+export function ensureTypesFeatureFlags (quasarConf) {
+  // We don't have a specific entry for the augmenting file in `package.json > exports`
+  // We rely on the wildcard entry, so we use a deep import, instead of let's say `quasar/feature-flags`
+  // When using TypeScript `moduleResolution: "bundler"`, it requires the file extension.
+  // This may sound unusual, but that's because it seems to treat wildcard entries differently.
+
+  // Keep in sync with `create-quasar/templates/**/store-flag.d.ts`
+  const template = `/* eslint-disable */
+/*
+  WARNING: DO NOT MODIFY OR DELETE
+  This file is auto-generated by Quasar CLI
+  It's recommended to NOT .gitignore it
+  You don't have to use TypeScript in your project, don't worry
+*/
+import "quasar/dist/types/feature-flag.d.ts";
+
+declare module "quasar/dist/types/feature-flag.d.ts" {
+  interface QuasarFeatureFlags {
+    __FEATURE_NAME__: true;
+  }
+}
+`
+
   // Flags must be available even in pure JS codebases,
   //    because boot and configure wrappers functions files will
   //    provide autocomplete based on them also to JS users
@@ -19,9 +40,9 @@ export async function regenerateTypesFeatureFlags (quasarConf) {
     )
 
     if (!existsSync(destFlagPath)) {
-      fse.copySync(
-        appPaths.resolve.cli('templates/store/store-flag.d.ts'),
-        destFlagPath
+      writeFileSync(
+        destFlagPath,
+        template.replace('__FEATURE_NAME__', 'store')
       )
       log('"store" feature flag was missing and has been regenerated')
     }
@@ -35,9 +56,9 @@ export async function regenerateTypesFeatureFlags (quasarConf) {
     const destFlagPath = appPaths.resolve[ modeName ](`${ modeName }-flag.d.ts`)
 
     if (!existsSync(destFlagPath)) {
-      fse.copySync(
-        appPaths.resolve.cli(`templates/${ modeName }/${ modeName }-flag.d.ts`),
-        destFlagPath
+      writeFileSync(
+        destFlagPath,
+        template.replace('__FEATURE_NAME__', modeName)
       )
       log(`"${ modeName }" feature flag was missing and has been regenerated`)
     }

diff --git a/app-vite/templates/bex/bex-flag.d.ts b/app-vite/templates/bex/bex-flag.d.ts
diff --git a/app-vite/templates/capacitor/capacitor-flag.d.ts b/app-vite/templates/capacitor/capacitor-flag.d.ts
diff --git a/app-vite/templates/cordova/cordova-flag.d.ts b/app-vite/templates/cordova/cordova-flag.d.ts
diff --git a/app-vite/templates/electron/electron-flag.d.ts b/app-vite/templates/electron/electron-flag.d.ts
diff --git a/app-vite/templates/pwa/pwa-flag.d.ts b/app-vite/templates/pwa/pwa-flag.d.ts
diff --git a/app-vite/templates/ssr/ssr-flag.d.ts b/app-vite/templates/ssr/ssr-flag.d.ts
diff --git a/app-vite/templates/store/store-flag.d.ts b/app-vite/templates/store/store-flag.d.ts
diff --git a/app-webpack/lib/cmd/build.js b/app-webpack/lib/cmd/build.js
@@ -130,8 +130,8 @@ async function runBuild () {
 
   const quasarConf = await quasarConfFile.read()
 
-  const { regenerateTypesFeatureFlags } = require('../utils/types-feature-flags.js')
-  await regenerateTypesFeatureFlags(quasarConf)
+  const { ensureTypesFeatureFlags } = require('../utils/types-feature-flags.js')
+  ensureTypesFeatureFlags(quasarConf)
 
   const { QuasarModeBuilder } = require(`../modes/${ argv.mode }/${ argv.mode }-builder.js`)
   const appBuilder = new QuasarModeBuilder({ argv, quasarConf })

diff --git a/app-webpack/lib/cmd/dev.js b/app-webpack/lib/cmd/dev.js
@@ -153,8 +153,8 @@ async function runDev () {
 
   const quasarConf = await quasarConfFile.read()
 
-  const { regenerateTypesFeatureFlags } = require('../utils/types-feature-flags.js')
-  await regenerateTypesFeatureFlags(quasarConf)
+  const { ensureTypesFeatureFlags } = require('../utils/types-feature-flags.js')
+  ensureTypesFeatureFlags(quasarConf)
 
   if (quasarConf.metaConf.vueDevtools !== false) {
     await startVueDevtools(ctx, quasarConf.metaConf.vueDevtools.port)

diff --git a/app-webpack/lib/utils/types-feature-flags.js b/app-webpack/lib/utils/types-feature-flags.js
@@ -1,10 +1,31 @@
 const { join, dirname } = require('node:path')
-const { existsSync } = require('node:fs')
-const fse = require('fs-extra')
+const { writeFileSync, existsSync } = require('node:fs')
 
 const { log } = require('./logger.js')
 
-module.exports.regenerateTypesFeatureFlags = async function regenerateTypesFeatureFlags (quasarConf) {
+module.exports.ensureTypesFeatureFlags = function ensureTypesFeatureFlags (quasarConf) {
+  // We don't have a specific entry for the augmenting file in `package.json > exports`
+  // We rely on the wildcard entry, so we use a deep import, instead of let's say `quasar/feature-flags`
+  // When using TypeScript `moduleResolution: "bundler"`, it requires the file extension.
+  // This may sound unusual, but that's because it seems to treat wildcard entries differently.
+
+  // Keep in sync with `create-quasar/templates/**/store-flag.d.ts`
+  const template = `/* eslint-disable */
+/*
+  WARNING: DO NOT MODIFY OR DELETE
+  This file is auto-generated by Quasar CLI
+  It's recommended to NOT .gitignore it
+  You don't have to use TypeScript in your project, don't worry
+*/
+import "quasar/dist/types/feature-flag.d.ts";
+
+declare module "quasar/dist/types/feature-flag.d.ts" {
+  interface QuasarFeatureFlags {
+    __FEATURE_NAME__: true;
+  }
+}
+`
+
   // Flags must be available even in pure JS codebases,
   //    because boot and configure wrappers functions files will
   //    provide autocomplete based on them also to JS users
@@ -19,9 +40,9 @@ module.exports.regenerateTypesFeatureFlags = async function regenerateTypesFeatu
     )
 
     if (!existsSync(destFlagPath)) {
-      fse.copySync(
-        appPaths.resolve.cli('templates/store/store-flag.d.ts'),
-        destFlagPath
+      writeFileSync(
+        destFlagPath,
+        template.replace('__FEATURE_NAME__', 'store')
       )
       log('"store" feature flag was missing and has been regenerated')
     }
@@ -35,9 +56,9 @@ module.exports.regenerateTypesFeatureFlags = async function regenerateTypesFeatu
     const destFlagPath = appPaths.resolve[ modeName ](`${ modeName }-flag.d.ts`)
 
     if (!existsSync(destFlagPath)) {
-      fse.copySync(
-        appPaths.resolve.cli(`templates/${ modeName }/${ modeName }-flag.d.ts`),
-        destFlagPath
+      writeFileSync(
+        destFlagPath,
+        template.replace('__FEATURE_NAME__', modeName)
       )
       log(`"${ modeName }" feature flag was missing and has been regenerated`)
     }

diff --git a/app-webpack/templates/bex/bex-flag.d.ts b/app-webpack/templates/bex/bex-flag.d.ts
diff --git a/app-webpack/templates/capacitor/capacitor-flag.d.ts b/app-webpack/templates/capacitor/capacitor-flag.d.ts
diff --git a/app-webpack/templates/cordova/cordova-flag.d.ts b/app-webpack/templates/cordova/cordova-flag.d.ts
diff --git a/app-webpack/templates/electron/electron-flag.d.ts b/app-webpack/templates/electron/electron-flag.d.ts
diff --git a/app-webpack/templates/pwa/pwa-flag.d.ts b/app-webpack/templates/pwa/pwa-flag.d.ts
diff --git a/app-webpack/templates/ssr/ssr-flag.d.ts b/app-webpack/templates/ssr/ssr-flag.d.ts
diff --git a/app-webpack/templates/store/store-flag.d.ts b/app-webpack/templates/store/store-flag.d.ts
diff --git a/create-quasar/templates/app/quasar-v2/js-vite-1/pinia/src/stores/store-flag.d.ts b/create-quasar/templates/app/quasar-v2/js-vite-1/pinia/src/stores/store-flag.d.ts
@@ -1,9 +1,12 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+/*
+  WARNING: DO NOT MODIFY OR DELETE
+  This file is auto-generated by Quasar CLI
+  It's recommended to NOT .gitignore it
+  You don't have to use TypeScript in your project, don't worry
+*/
+import "quasar/dist/types/feature-flag.d.ts";
 
-declare module "quasar/dist/types/feature-flag" {
+declare module "quasar/dist/types/feature-flag.d.ts" {
   interface QuasarFeatureFlags {
     store: true;
   }

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-1/vuex/src/store/store-flag.d.ts b/create-quasar/templates/app/quasar-v2/js-vite-1/vuex/src/store/store-flag.d.ts
@@ -1,9 +1,12 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+/*
+  WARNING: DO NOT MODIFY OR DELETE
+  This file is auto-generated by Quasar CLI
+  It's recommended to NOT .gitignore it
+  You don't have to use TypeScript in your project, don't worry
+*/
+import "quasar/dist/types/feature-flag.d.ts";
 
-declare module "quasar/dist/types/feature-flag" {
+declare module "quasar/dist/types/feature-flag.d.ts" {
   interface QuasarFeatureFlags {
     store: true;
   }

diff --git a/create-quasar/templates/app/quasar-v2/js-vite-2/pinia/src/stores/store-flag.d.ts b/create-quasar/templates/app/quasar-v2/js-vite-2/pinia/src/stores/store-flag.d.ts
@@ -1,9 +1,12 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+/*
+  WARNING: DO NOT MODIFY OR DELETE
+  This file is auto-generated by Quasar CLI
+  It's recommended to NOT .gitignore it
+  You don't have to use TypeScript in your project, don't worry
+*/
+import "quasar/dist/types/feature-flag.d.ts";
 
-declare module "quasar/dist/types/feature-flag" {
+declare module "quasar/dist/types/feature-flag.d.ts" {
   interface QuasarFeatureFlags {
     store: true;
   }

diff --git a/create-quasar/templates/app/quasar-v2/js-webpack-3/pinia/src/stores/store-flag.d.ts b/create-quasar/templates/app/quasar-v2/js-webpack-3/pinia/src/stores/store-flag.d.ts
@@ -1,9 +1,12 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+/*
+  WARNING: DO NOT MODIFY OR DELETE
+  This file is auto-generated by Quasar CLI
+  It's recommended to NOT .gitignore it
+  You don't have to use TypeScript in your project, don't worry
+*/
+import "quasar/dist/types/feature-flag.d.ts";
 
-declare module "quasar/dist/types/feature-flag" {
+declare module "quasar/dist/types/feature-flag.d.ts" {
   interface QuasarFeatureFlags {
     store: true;
   }