Simplify create-figma-plugin CLI and templates

Author: yuanqing

packages/create-figma-plugin/package.json

@@ -36,9 +36,7 @@
   },
   "dependencies": {
     "@create-figma-plugin/common": "^1.2.0",
-    "degit": "^2.8.4",
     "fs-extra": "^10.0.0",
-    "git-user-name": "^2.0.0",
     "globby": "^11.0.4",
     "inquirer": "^8.1.1",
     "is-utf8": "^0.2.1",

packages/create-figma-plugin/plugin-templates/default/package.json

@@ -1,25 +1,4 @@
 {
-  "name": "{{{name}}}",
-{{#version}}
-  "version": "{{{version}}}",
-{{/version}}
-{{#description}}
-  "description": "{{{description}}}",
-{{/description}}
-  "keywords": [
-    "create-figma-plugin",
-    "figma",
-    "figma-plugin"
-  ],
-{{#license}}
-  "license": "{{{license}}}",
-{{/license}}
-{{#author}}
-  "author": "{{{author}}}",
-{{/author}}
-{{#repositoryUrl}}
-  "repository": "{{{repositoryUrl}}}",
-{{/repositoryUrl}}
   "dependencies": {
     "@create-figma-plugin/utilities": "^{{{versions.utilities}}}"
   },

packages/create-figma-plugin/plugin-templates/ui/package.json

@@ -1,25 +1,4 @@
 {
-  "name": "{{{name}}}",
-{{#version}}
-  "version": "{{{version}}}",
-{{/version}}
-{{#description}}
-  "description": "{{{description}}}",
-{{/description}}
-  "keywords": [
-    "create-figma-plugin",
-    "figma",
-    "figma-plugin"
-  ],
-{{#license}}
-  "license": "{{{license}}}",
-{{/license}}
-{{#author}}
-  "author": "{{{author}}}",
-{{/author}}
-{{#repositoryUrl}}
-  "repository": "{{{repositoryUrl}}}",
-{{/repositoryUrl}}
   "dependencies": {
     "@create-figma-plugin/ui": "^{{{versions.ui}}}",
     "@create-figma-plugin/utilities": "^{{{versions.utilities}}}",

packages/create-figma-plugin/src/cli.ts

@@ -9,12 +9,15 @@ sade('create-figma-plugin [name]', true)
     '-t, --template',
     'Pass in the URL of a GitHub repository to use as a template'
   )
-  .option('-y, --yes', 'Use defaults')
+  .option('-y, --yes', 'Use defaults', false)
   .action(async function (
     name: string,
     options: { yes: boolean; template: string }
   ): Promise<void> {
-    const { yes, template } = options
-    await createFigmaPluginAsync({ name, template }, yes)
+    await createFigmaPluginAsync({
+      name,
+      template: options.template,
+      useDefaults: options.yes
+    })
   })
   .parse(process.argv)

packages/create-figma-plugin/src/create-figma-plugin-async.ts

@@ -2,30 +2,31 @@ import { log } from '@create-figma-plugin/common'
 import fs from 'fs-extra'
 import { join } from 'path'
 
-import { Settings } from './types/settings.js'
-import { cloneFromTemplateAsync } from './utilities/clone-from-template-async.js'
+import { copyTemplateAsync } from './utilities/copy-template-async.js'
 import { installDependenciesAsync } from './utilities/install-dependencies-async.js'
 import { interpolateValuesIntoFilesAsync } from './utilities/interpolate-values-into-files-async.js'
 import { resolveLatestStableVersions } from './utilities/resolve-latest-stable-versions.js'
 import { createDefaultSettings } from './utilities/settings/create-default-settings.js'
 import { promptForUserInputAsync } from './utilities/settings/prompt-for-user-input-async.js'
 
-export async function createFigmaPluginAsync(
-  options: Settings,
+export async function createFigmaPluginAsync(options: {
+  name?: string
+  template?: string
   useDefaults: boolean
-): Promise<void> {
+}): Promise<void> {
+  const { name, template, useDefaults } = options
   try {
-    if (typeof options.name !== 'undefined') {
-      await throwIfDirectoryExistsAsync(join(process.cwd(), options.name))
+    if (typeof name !== 'undefined') {
+      await throwIfDirectoryExistsAsync(join(process.cwd(), name))
     }
     log.info('Scaffolding a new plugin...')
     const settings = useDefaults
-      ? createDefaultSettings(options)
-      : await promptForUserInputAsync(options)
+      ? createDefaultSettings({ name, template })
+      : await promptForUserInputAsync({ name, template })
     const pluginDirectoryPath = join(process.cwd(), settings.name)
     await throwIfDirectoryExistsAsync(pluginDirectoryPath)
-    log.info('Cloning template...')
-    await cloneFromTemplateAsync(pluginDirectoryPath, settings.template)
+    log.info('Copying template...')
+    await copyTemplateAsync(pluginDirectoryPath, settings.template)
     const versions = await resolveLatestStableVersions()
     await interpolateValuesIntoFilesAsync(pluginDirectoryPath, {
       ...settings,

packages/create-figma-plugin/src/types/settings.ts

@@ -2,7 +2,4 @@ export type Settings = {
   readonly name: string
   readonly displayName?: string
   readonly template: string
-  readonly version?: string
-  readonly author?: string
-  readonly license?: string
 }

packages/create-figma-plugin/src/utilities/clone-from-template-async.ts

@@ -0,0 +1,27 @@
+import fs from 'fs-extra'
+import { dirname, join, resolve } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export async function copyTemplateAsync(
+  pluginDirectoryPath: string,
+  template: string
+): Promise<void> {
+  const templateDirectory = resolve(
+    __dirname,
+    '..',
+    '..',
+    'plugin-templates',
+    template
+  )
+  await fs.ensureDir(pluginDirectoryPath, 0o2775)
+  await fs.copy(templateDirectory, pluginDirectoryPath)
+  const npmIgnoreFile = join(pluginDirectoryPath, '.npmignore')
+  if ((await fs.pathExists(npmIgnoreFile)) === true) {
+    // When running via npm/npx, the .gitignore file is renamed to .npmignore,
+    // so we need to rename it back
+    const gitIgnoreFile = join(pluginDirectoryPath, '.gitignore')
+    await fs.move(npmIgnoreFile, gitIgnoreFile)
+  }
+}

packages/create-figma-plugin/src/utilities/copy-template-async.ts

@@ -1,25 +1,23 @@
 import { constants } from '@create-figma-plugin/common'
-import gitUserName from 'git-user-name'
 
 import { Settings } from '../../types/settings.js'
 import { createPluginDisplayName } from './create-plugin-display-name.js'
 
-export function createDefaultSettings(options: Settings): Settings {
+export function createDefaultSettings(options: {
+  name?: string
+  template?: string
+}): Settings {
   const { name, template } = options
-  const author = gitUserName()
   return {
-    author: author === null ? undefined : author,
     displayName:
       typeof name === 'undefined'
         ? constants.packageJson.defaultPluginDisplayName
         : createPluginDisplayName(name),
-    license: constants.packageJson.defaultLicense,
     name:
       typeof name === 'undefined'
         ? constants.packageJson.defaultPluginName
         : name,
     template:
-      typeof template === 'undefined' ? constants.defaultTemplate : template,
-    version: constants.packageJson.defaultVersion
+      typeof template === 'undefined' ? constants.defaultTemplate : template
   }
 }

packages/create-figma-plugin/src/utilities/settings/create-default-settings.ts

@@ -1,87 +1,56 @@
 import { constants } from '@create-figma-plugin/common'
-import gitUserName from 'git-user-name'
 import inquirer from 'inquirer'
 
 import { Settings } from '../../types/settings.js'
 import { createPluginDisplayName } from './create-plugin-display-name.js'
 
-export async function promptForUserInputAsync(
-  options: Settings
-): Promise<Settings> {
+export async function promptForUserInputAsync(options: {
+  name?: string
+  template?: string
+}): Promise<Settings> {
   const { name, template } = options
   const questions = [
     typeof name === 'undefined'
-      ? false
-      : {
+      ? {
           filter,
-          message: 'name',
+          message: 'Name',
           name: 'name',
           type: 'input',
           validate
-        },
+        }
+      : false,
     {
-      default: function (values: { name: string }): undefined | string {
+      default: function (answers: { name: string }): undefined | string {
         if (typeof name !== 'undefined') {
           return createPluginDisplayName(name)
         }
-        if (typeof values.name !== 'undefined') {
-          return createPluginDisplayName(values.name)
+        if (typeof answers.name !== 'undefined') {
+          return createPluginDisplayName(answers.name)
         }
         return undefined
       },
       filter,
-      message: 'display name',
+      message: 'Display name',
       name: 'displayName',
       type: 'input',
       validate
     },
     typeof template === 'undefined'
-      ? false
-      : {
+      ? {
+          choices: [constants.defaultTemplate, 'ui'],
           default: constants.defaultTemplate,
           filter,
-          message: 'template',
+          message: 'Template',
           name: 'template',
-          type: 'input'
-        },
-    {
-      default: constants.packageJson.defaultVersion,
-      filter,
-      message: 'version',
-      name: 'version',
-      type: 'input'
-    },
-    {
-      filter,
-      message: 'description',
-      name: 'description',
-      type: 'input'
-    },
-    {
-      filter,
-      message: 'repository url',
-      name: 'repositoryUrl',
-      type: 'input'
-    },
-    {
-      default: gitUserName(),
-      filter,
-      message: 'author',
-      name: 'author',
-      type: 'input'
-    },
-    {
-      default: constants.packageJson.defaultLicense,
-      filter,
-      message: 'license',
-      name: 'license',
-      type: 'input'
-    }
+          type: 'list'
+        }
+      : false
   ].filter(Boolean)
+  const answers = await inquirer.prompt(questions)
   return {
-    ...(await inquirer.prompt(questions)),
-    name,
-    template
+    displayName: answers.displayName,
+    name: typeof name === 'undefined' ? answers.name : name,
+    template: typeof template === 'undefined' ? answers.template : template
   }
 }