Delegate types generation to extension package

programs/cli/__spec__/cli.spec.ts

@@ -6,6 +6,7 @@
 //  ╚═════╝╚══════╝╚═╝
 
 import path from 'path'
+import fs from 'fs'
 import {execFile} from 'child_process'
 import {promisify} from 'util'
 
@@ -31,4 +32,10 @@ describe('CLI Commands', () => {
     const {stdout} = await extensionProgram('--help')
     expect(stdout).toContain('Usage:')
   }, 30000)
+
+  it('should output the types/ folder by default', async () => {
+    const typesDirectory = path.join(__dirname, '..', 'dist', 'types')
+    console.log({typesDirectory})
+    expect(fs.existsSync(typesDirectory)).toBeTruthy()
+  })
 })

programs/cli/install_scripts.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+set -e
+
+echo '►►► Generating client types/ folder'
+static_files=(
+  "$(dirname "$0")/types"
+)
+
+for file in "${static_files[@]}"; do
+  if [ -e "$file" ]; then
+    # echo "Copying $file to $(dirname "$0")/dist/"
+    cp -r "$file" "$(dirname "$0")/dist/"
+  else
+    echo "File $file does not exist"
+  fi
+done
+
+echo '►►► All tasks completed'

programs/cli/package.json

@@ -27,11 +27,12 @@
   },
   "scripts": {
     "watch": "yarn compile --watch",
+    "compile:types": "bash install_scripts.sh",
     "compile:readme-files": "node ./scripts/copyMarkdownFilesToCli.js",
     "compile:tailwind-config": "node ./scripts/copyTailwindConfig.js",
     "compile:stylelint-config": "node ./scripts/copyStylelintConfig.js",
     "compile:cli": "tsup-node ./cli.ts --format cjs --dts --target=node18",
-    "compile": "yarn compile:readme-files && yarn compile:tailwind-config && yarn compile:stylelint-config &&yarn compile:cli",
+    "compile": "yarn compile:readme-files && yarn compile:tailwind-config && yarn compile:stylelint-config && yarn compile:cli && yarn compile:types",
     "clean": "rm -rf dist",
     "test": "echo \"Note: no test specified\" && exit 0",
     "test:cli": "jest __spec__/cli.spec.ts"

programs/create/create.spec.ts

@@ -11,7 +11,11 @@ import {ALL_TEMPLATES, DEFAULT_TEMPLATE} from '../../examples/data'
 import {extensionCreate} from './dist/module'
 
 function fileExists(templateName: string, filePath?: string): boolean {
-  const templatePath = path.resolve(__dirname, 'dist', 'test-template-' + templateName)
+  const templatePath = path.resolve(
+    __dirname,
+    'dist',
+    'test-template-' + templateName
+  )
   return fs.existsSync(path.join(templatePath, filePath || ''))
 }
 
@@ -24,7 +28,11 @@ async function removeDir(dirPath: string) {
 async function removeAllTemplateFolders() {
   await Promise.all(
     ALL_TEMPLATES.map(async (template) => {
-      const templatePath = path.resolve(__dirname, 'dist', 'test-template-' + template.name)
+      const templatePath = path.resolve(
+        __dirname,
+        'dist',
+        'test-template-' + template.name
+      )
 
       console.log('Removing template:', templatePath)
 
@@ -56,7 +64,11 @@ describe('extension create', () => {
     it.each(ALL_TEMPLATES)(
       `creates the "$name" extension template`,
       async (template) => {
-        const templatePath = path.join(__dirname, 'dist', 'test-template-' + template.name)
+        const templatePath = path.join(
+          __dirname,
+          'dist',
+          'test-template-' + template.name
+        )
 
         await extensionCreate(templatePath, {
           template: template.name,

programs/create/lib/utils.ts

@@ -73,13 +73,11 @@ export function isExternalTemplate(templateName: string) {
 }
 
 export function isTypeScriptTemplate(templateName: string) {
-  if (isExternalTemplate(templateName)) {
-    return false
-  }
-
   return (
-    templateName === 'typescript' ||
-    templateName.startsWith('typescript-') ||
-    templateName.endsWith('-typescript')
+    templateName.includes('typescript') ||
+    templateName.includes('react') ||
+    templateName.includes('preact') ||
+    templateName.includes('svelte') ||
+    templateName.includes('solid')
   )
 }

programs/create/steps/generate-extension-types.ts

@@ -16,15 +16,15 @@ export async function generateExtensionTypes(
   const extensionEnvFile = path.join(projectPath, 'extension-env.d.ts')
   const typePath =
     process.env.EXTENSION_ENV === 'development'
-      ? path.resolve(process.cwd(), 'programs/develop/types')
-      : 'extension-develop/dist/types'
+      ? path.resolve(process.cwd(), 'programs/cli/types')
+      : 'extension/dist/types'
 
   const fileContent = `\
 // Required Extension.js types for TypeScript projects.
-// This file auto-generated and should not be excluded.
-// If you need extra types, consider creating a new *.d.ts and
-// referencing it in the "include" array in your tsconfig.json file.
-// See https://www.typescriptlang.org/tsconfig#include for info.
+// This file is auto-generated and should not be excluded.
+// If you need additional types, consider creating a new *.d.ts file and
+// referencing it in the "include" array of your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for more information.
 /// <reference types="${typePath}/index.d.ts" />
 
 // Polyfill types for browser.* APIs.

programs/develop/commands/commands-lib/generate-extension-types.ts

@@ -9,22 +9,19 @@ import path from 'path'
 import fs from 'fs/promises'
 import * as messages from './messages'
 
-export default async function generateExtensionTypes(projectDir: string) {
-  const extensionEnvFile = path.join(projectDir, 'extension-env.d.ts')
-  const typesFolderPath = path.join(__dirname, 'types')
-  const relativeTypePath = path.relative(projectDir, typesFolderPath)
-
+export async function generateExtensionTypes(projectPath: string) {
+  const extensionEnvFile = path.join(projectPath, 'extension-env.d.ts')
   const typePath =
     process.env.EXTENSION_ENV === 'development'
-      ? relativeTypePath
-      : `extension-develop/dist/types`
+      ? path.resolve(process.cwd(), 'programs/cli/types')
+      : 'extension/dist/types'
 
   const fileContent = `\
 // Required Extension.js types for TypeScript projects.
 // This file is auto-generated and should not be excluded.
-// If you need extra types, consider creating a new *.d.ts and
+// If you need additional types, consider creating a new *.d.ts file and
 // referencing it in the "include" array of your tsconfig.json file.
-// See https://www.typescriptlang.org/tsconfig#include for info.
+// See https://www.typescriptlang.org/tsconfig#include for more information.
 /// <reference types="${typePath}/index.d.ts" />
 
 // Polyfill types for browser.* APIs.
@@ -34,14 +31,23 @@ export default async function generateExtensionTypes(projectDir: string) {
   try {
     // Check if the file exists
     await fs.access(extensionEnvFile)
+
+    // Read the file content
+    const existingContent = await fs.readFile(extensionEnvFile, 'utf8')
+
+    // Check if the file contains the "develop/dist/types" string
+    if (existingContent.includes('develop/dist/types')) {
+      // Rewrite previous path for versions < 2.0.0. See #162
+      await fs.writeFile(extensionEnvFile, fileContent)
+    }
   } catch (err) {
     // File does not exist, continue to write it
-    const manifest = require(path.join(projectDir, 'manifest.json'))
+    const manifest = require(path.join(projectPath, 'manifest.json'))
     console.log(messages.writingTypeDefinitions(manifest))
     try {
       await fs.writeFile(extensionEnvFile, fileContent)
     } catch (writeErr) {
-      console.log(messages.writeTypeDefinitionsError(writeErr))
+      console.log(messages.writingTypeDefinitionsError(writeErr))
     }
   }
 }

programs/develop/commands/commands-lib/messages.ts

@@ -240,7 +240,7 @@ export function writingTypeDefinitions(manifest: Manifest) {
   )
 }
 
-export function writeTypeDefinitionsError(error: any) {
+export function writingTypeDefinitionsError(error: any) {
   return `${getLoggingPrefix(
     'error'
   )} Failed to write the extension type definition. ${red(error)}`

programs/develop/commands/dev.ts

@@ -8,7 +8,7 @@
 import fs from 'fs'
 import path from 'path'
 import {devServer} from '../webpack/dev-server'
-import generateExtensionTypes from './commands-lib/generate-extension-types'
+import {generateExtensionTypes} from './commands-lib/generate-extension-types'
 import {isUsingTypeScript} from '../webpack/plugin-js-frameworks/js-tools/typescript'
 import {getProjectPath} from './commands-lib/get-project-path'
 import * as messages from './commands-lib/messages'

programs/develop/install_scripts.sh

@@ -90,7 +90,6 @@ echo '►►► Setting up client helper files'
 static_files=(
   "$(dirname "$0")/tailwind.config.js"
   "$(dirname "$0")/stylelint.config.json"
-  "$(dirname "$0")/types"
   "$(dirname "$0")/webpack/plugin-reload/extensions"
 )