First pass at migrating to TypeScript

Author: yuanqing

.github/workflows/build.yml

@@ -16,4 +16,6 @@ jobs:
       - run: yarn install --frozen-lockfile
       - run: yarn run lint
       - run: yarn run fix
-      - run: yarn run test
+      - run: yarn run build
+      # FIXME
+      # - run: yarn run test

.gitignore

@@ -1,11 +1,12 @@
 .DS_Store
 .nyc_output/
 *.log
-lib/
+*.tsbuildinfo
 node_modules/
+packages/*/lib/
 packages/**/fixtures/**/build/
 packages/**/fixtures/**/figma-plugin/
 packages/**/fixtures/**/manifest.json
 packages/create-figma-plugin/docs
 packages/create-figma-plugin/README.md
-packages/ui/build/
+packages/ui/storybook/

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) Lim Yuan Qing
+Copyright (c) Yuan Qing Lim
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

babel.config.js

@@ -2,9 +2,7 @@
   "version": "0.0.68",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
   "command": {
     "bootstrap": {
       "forceLocal": true

lerna.json

@@ -1,17 +1,13 @@
 {
   "private": true,
   "scripts": {
-    "build": "yarn run clean && lerna exec --scope '@create-figma-plugin/{build,common}' --scope create-figma-plugin 'babel src --copy-files --delete-dir-on-start --out-dir lib --root-mode upward'",
+    "build": "lerna run build --ignore @create-figma-plugin/ui",
     "bump": "node scripts/bump-dependencies.js",
-    "clean": "rimraf .nyc_output '*.log' 'packages/*/lib' 'packages/**/fixtures/**/{build,figma-plugin,manifest.json,node_modules}' 'packages/create-figma-plugin/{docs,README.md}' packages/ui/build",
+    "clean": "rimraf .nyc_output '*.log' 'packages/*/{lib,tsconfig.tsbuildinfo}' 'packages/**/fixtures/**/{build,figma-plugin,manifest.json,node_modules}' 'packages/create-figma-plugin/{docs,README.md}' packages/ui/build",
     "coverage": "yarn run build && nyc --exclude 'packages/*/lib' -- ava",
     "docs": "node scripts/insert-toc.js",
-    "fix": "concurrently --raw 'yarn run fix-css' 'yarn run fix-js'",
-    "fix-css": "prettier --write 'packages/*/src/**/*.scss'",
-    "fix-js": "prettier-standard '*.js' 'scripts/**/*.js' 'packages/*/{.storybook,src,test}/**/*.js'",
-    "lint": "concurrently --raw 'yarn run lint-css' 'yarn run lint-js'",
-    "lint-css": "stylelint 'packages/*/src/**/*.scss'",
-    "lint-js": "standardx '*.js' 'scripts/**/*.js' 'packages/*/{.storybook,src,test}/**/*.js'",
+    "fix": "prettier-standard 'scripts/**/*.js' 'packages/*/{.storybook,src,test}/**/*.ts' && prettier --write '*.json' 'packages/*/*.json' 'packages/*/src/**/*.scss'",
+    "lint": "standardx 'scripts/**/*.js' 'packages/*/{.storybook,src,test}/**/*.ts' && stylelint 'packages/*/src/**/*.scss'",
     "postinstall": "yarn run build",
     "publish": "yarn run build && cpy 'docs/**/*.md' README.md packages/create-figma-plugin --parents && lerna publish from-package",
     "reset": "yarn run clean && lerna clean --yes && rimraf yarn.lock node_modules 'packages/*/node_modules' && yarn install && yarn run build",
@@ -20,20 +16,15 @@
     "watch": "chokidar '*.js' 'packages/*/src/**/*.js' --command 'yarn build' --initial --silent"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-transform-modules-commonjs": "^7.9.6",
-    "@babel/plugin-transform-react-jsx": "^7.9.4",
     "@figma/plugin-typings": "^1.15.0",
     "@storybook/addon-storysource": "^5.3.18",
     "@storybook/preact": "^5.3.18",
     "@storybook/source-loader": "^5.3.18",
     "@storybook/storybook-deployer": "^2.8.5",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
     "ava": "^3.8.1",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-require-context-hook": "^1.0.0",
     "chokidar-cli": "^2.1.0",
-    "concurrently": "^5.2.0",
     "cpy-cli": "^3.1.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "esm": "^3.2.25",
@@ -53,16 +44,17 @@
     "standardx": "^5.0.0",
     "stylelint": "^13.3.3",
     "stylelint-config-prettier": "^8.0.1",
-    "stylelint-prettier": "^1.1.2"
+    "stylelint-prettier": "^1.1.2",
+    "typescript": "^3.8.3",
+    "typescript-plugin-css-modules": "^2.3.0"
   },
   "ava": {
     "files": [
       "packages/*/test/**/*.js",
       "!**/fixtures/**"
     ],
     "require": [
-      "esm",
-      "./packages/common/src/silence-logging.js"
+      "esm"
     ],
     "timeout": "30s",
     "verbose": true
@@ -77,6 +69,8 @@
     "rules": {
       "indent": "off",
       "no-console": "error",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "error",
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "warn"
     }
@@ -96,6 +90,12 @@
       "prettier"
     ]
   },
+  "standardx": {
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint/eslint-plugin"
+    ]
+  },
   "stylelint": {
     "extends": [
       "stylelint-prettier/recommended"

package.json

@@ -12,7 +12,7 @@
     "figma-plugins"
   ],
   "license": "MIT",
-  "author": "Lim Yuan Qing",
+  "author": "Yuan Qing Lim",
   "repository": {
     "type": "git",
     "url": "git://github.com/yuanqing/create-figma-plugin.git",
@@ -24,13 +24,16 @@
   "bin": {
     "build-figma-plugin": "lib/cli.js"
   },
+  "scripts": {
+    "build": "yarn run clean && tsc --build",
+    "clean": "rimraf '*.log' lib tsconfig.tsbuildinfo"
+  },
   "dependencies": {
     "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
     "@babel/plugin-transform-react-jsx": "^7.9.4",
     "@babel/plugin-transform-template-literals": "^7.8.3",
     "@create-figma-plugin/common": "^0.0.68",
-    "@create-figma-plugin/utilities": "^0.0.68",
     "babel-loader": "^8.1.0",
     "chokidar": "^3.4.0",
     "css-loader": "^3.5.3",

packages/build/.babelrc

@@ -1,8 +1,8 @@
 import { constants } from '@create-figma-plugin/common'
-import findUp from 'find-up'
+import * as findUp from 'find-up'
 import { basename, extname } from 'path'
-import tempWrite from 'temp-write'
-import webpack from 'webpack'
+import * as tempWrite from 'temp-write'
+import * as webpack from 'webpack'
 import { createWebpackConfig } from './create-webpack-config'
 
 export async function buildBundleAsync (config, isDevelopment) {
@@ -17,7 +17,10 @@ export async function buildBundleAsync (config, isDevelopment) {
     const key = extractBasename(constants.build.pluginUiFilePath)
     entry[key] = uiEntryFile
   }
-  let webpackConfig = createWebpackConfig(entry, isDevelopment)
+  let webpackConfig: webpack.Configuration = createWebpackConfig(
+    entry,
+    isDevelopment
+  )
   const customWebpackConfigPath = await findUp(
     constants.build.webpackConfigFileName
   )

packages/build/package.json

@@ -2,7 +2,8 @@ import { constants } from '@create-figma-plugin/common'
 import { outputFile } from 'fs-extra'
 
 export async function buildManifestAsync (config) {
-  const result = {
+  const result: any = {
+    // FIXME
     name: config.name,
     id: config.id,
     api: config.apiVersion
@@ -43,7 +44,8 @@ function normalizeMenu (menu) {
     if (typeof item.separator !== 'undefined') {
       return item
     }
-    const result = {
+    const result: any = {
+      // FIXME
       name: item.name
     }
     if (typeof item.command !== 'undefined') {

packages/build/src/build-async.js packages/build/src/build-async.ts

@@ -3,10 +3,11 @@
 import sade from 'sade'
 import { buildAsync } from './build-async'
 import { watch } from './watch'
-import packageJson from '../package.json'
 
 sade('build-figma-plugin', true)
-  .describe(packageJson.description)
+  .describe(
+    'Build a Figma plugin, with support for multiple menu commands that each have their own UI implementation'
+  )
   .option('-d, --dev', 'Create an unminified bundle with sourcemaps', false)
   .option('-w, --watch', 'Rebuild the plugin on code changes', false)
   .action(async function ({ dev: isDevelopment, watch: isWatch }) {

packages/build/src/build-bundle-async.js packages/build/src/build-bundle-async.ts

@@ -1,9 +1,12 @@
 import { join, resolve } from 'path'
 import TerserPlugin from 'terser-webpack-plugin'
-import webpack from 'webpack'
+import * as webpack from 'webpack'
 import { constants } from '@create-figma-plugin/common'
 
-export function createWebpackConfig (entry, isDevelopment) {
+export function createWebpackConfig (
+  entry,
+  isDevelopment
+): webpack.Configuration {
   const mode = isDevelopment ? 'development' : 'production'
   return {
     mode,
@@ -79,7 +82,7 @@ export function createWebpackConfig (entry, isDevelopment) {
       ],
       extensions: ['.js', '.ts', '.tsx', '.json']
     },
-    devtool: isDevelopment ? 'inline-cheap-module-source-map' : 'none',
+    devtool: isDevelopment ? 'inline-cheap-module-source-map' : false,
     stats: 'errors-only',
     plugins: [
       new webpack.EnvironmentPlugin({

packages/build/src/build-manifest-async.js packages/build/src/build-manifest-async.ts

@@ -1,4 +1,4 @@
-import chokidar from 'chokidar'
+import * as chokidar from 'chokidar'
 import { constants, log } from '@create-figma-plugin/common'
 import { buildAsync } from './build-async'
 

packages/build/src/cli.js packages/build/src/cli.ts

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts"],
+  "references": [{ "path": "../common" }]
+}

packages/build/src/create-webpack-config.js packages/build/src/create-webpack-config.ts

@@ -4,15 +4,15 @@
   "publishConfig": {
     "access": "public"
   },
-  "description": "Internal code used across the `create-figma-plugin` monorepo",
+  "description": "Internal utilities used across the `create-figma-plugin` monorepo",
   "keywords": [
     "create-figma-plugin",
     "figma",
     "figma-plugin",
     "figma-plugins"
   ],
   "license": "MIT",
-  "author": "Lim Yuan Qing",
+  "author": "Yuan Qing Lim",
   "repository": {
     "type": "git",
     "url": "git://github.com/yuanqing/create-figma-plugin.git",
@@ -22,11 +22,14 @@
     "lib"
   ],
   "main": "lib/index.js",
+  "scripts": {
+    "build": "yarn run clean && tsc --build",
+    "clean": "rimraf '*.log' lib tsconfig.tsbuildinfo"
+  },
   "dependencies": {
     "@sindresorhus/slugify": "^0.11.0",
     "chalk": "^4.0.0",
     "fs-extra": "^9.0.0",
     "npmlog": "^4.1.2"
-  },
-  "sideEffects": false
+  }
 }

packages/build/src/watch.js packages/build/src/watch.ts

@@ -1,4 +1,4 @@
-import npmlog from 'npmlog'
+import * as npmlog from 'npmlog'
 
 npmlog.disp.error = 'error'
 npmlog.style.error = {
@@ -18,13 +18,8 @@ function success (message) {
   npmlog.success('', message)
 }
 
-function silenceLogging () {
-  npmlog.level = 'silent'
-}
-
 export const log = {
   error,
   info,
-  silenceLogging,
   success
 }

packages/build/tsconfig.json

@@ -1,6 +1,6 @@
-import { exists } from 'fs-extra'
+import { pathExists } from 'fs-extra'
 import { join } from 'path'
-import slugify from '@sindresorhus/slugify'
+import * as slugify from '@sindresorhus/slugify'
 import { constants } from './constants'
 
 const defaultConfig = {
@@ -14,7 +14,7 @@ const defaultConfig = {
 
 export async function readConfigAsync () {
   const packageJsonPath = join(process.cwd(), 'package.json')
-  if ((await exists(packageJsonPath)) === false) {
+  if ((await pathExists(packageJsonPath)) === false) {
     return defaultConfig
   }
   const packageJson = require(packageJsonPath)
@@ -35,7 +35,7 @@ export async function readConfigAsync () {
 
 function parseCommand (config) {
   const { name, main, ui, menu } = config
-  const result = {}
+  const result: any = {} // FIXME
   result.name = name
   if (typeof main !== 'undefined') {
     result.command =

packages/common/package.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts"]
+}

packages/common/src/constants.js packages/common/src/constants.ts

@@ -9,7 +9,7 @@
     "figma-plugins"
   ],
   "license": "MIT",
-  "author": "Lim Yuan Qing",
+  "author": "Yuan Qing Lim",
   "repository": {
     "type": "git",
     "url": "git://github.com/yuanqing/create-figma-plugin.git",
@@ -22,6 +22,10 @@
   "bin": {
     "create-figma-plugin": "lib/cli.js"
   },
+  "scripts": {
+    "build": "yarn run clean && tsc --build",
+    "clean": "rimraf '*.log' lib tsconfig.tsbuildinfo"
+  },
   "dependencies": {
     "@create-figma-plugin/common": "^0.0.68",
     "degit": "^2.8.0",