Use ts-node

.svgrrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  template({ template }, _, { componentName, jsx }) {
+    const typeScriptTpl = template.smart({ plugins: ['typescript'] })
+    return typeScriptTpl.ast`
+    import * as React from 'react';
+    const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => ${jsx};
+    export default ${componentName};
+  `
+  }
+}

package.json

@@ -22,29 +22,30 @@
     "en:hide-cards": "DEV_LOCALE=en next -p 9990",
     "dev": "rm -rf .next && concurrently \"yarn jp\" \"yarn en\" \"yarn contents:watch\" \"yarn twemoji:watch\"",
     "dev:hide-cards": "rm -rf .next && concurrently \"yarn jp:hide-cards\" \"yarn en:hide-cards\" \"yarn contents:watch\" \"yarn twemoji:watch\"",
-    "contents": "node ./scripts/generateContentsBundle.js",
-    "contents:watch": "node ./scripts/generateContentsBundle.js watch",
+    "contents": "ts-node --project tsconfig.scripts.json ./scripts/generateContentsBundle.ts",
+    "contents:watch": "ts-node --project tsconfig.scripts.json ./scripts/generateContentsBundle.ts watch",
     "tsc": "tsc",
     "eslint": "eslint --ext .js,.ts,.tsx .",
     "eslint:fix": "eslint --ext .js,.ts,.tsx --fix .",
     "build:en": "yarn tsc && yarn eslint && PRODUCTION_LOCALE=en next build && PRODUCTION_LOCALE=en next export",
     "build:jp": "yarn tsc && yarn eslint && PRODUCTION_LOCALE=jp next build && PRODUCTION_LOCALE=jp next export",
-    "twemoji": "mkdir -p .twemoji && rm -f src/components/Twemoji/* && rm -f .twemoji/* && cp `node ./scripts/copyUsedEmojis.js` .twemoji && svgr --no-svgo --filename-case kebab --no-dimensions -d src/components/Twemoji .twemoji && yarn twemoji:bundle",
-    "twemoji:bundle": "node ./scripts/generateEmojisBundle.js",
-    "twemoji:watch": "node ./scripts/generateEmojisBundle.js watch",
-    "svg": "rm -rf src/components/Svg && svgr -d src/components/Svg static/images/svg",
+    "twemoji": "mkdir -p .twemoji && rm -f src/components/Twemoji/* && rm -f .twemoji/* && cp `ts-node --project tsconfig.scripts.json ./scripts/copyUsedEmojis.ts` .twemoji && svgr --ext tsx --no-svgo --filename-case kebab --no-dimensions -d src/components/Twemoji .twemoji && eslint --ext .tsx --fix src/components/Twemoji && yarn twemoji:bundle",
+    "twemoji:bundle": "ts-node --project tsconfig.scripts.json ./scripts/generateEmojisBundle.ts",
+    "twemoji:watch": "ts-node --project tsconfig.scripts.json ./scripts/generateEmojisBundle.ts watch",
     "type-check": "tsc -w",
     "test": "jest"
   },
   "devDependencies": {
     "@svgr/cli": "^4.3.0",
     "@types/color": "^3.0.0",
+    "@types/glob": "^7.1.1",
     "@types/jest": "^24.0.13",
     "@types/lodash": "^4.14.134",
     "@types/luxon": "^1.15.1",
     "@types/material-ui": "^0.21.6",
     "@types/next": "^8.0.5",
     "@types/nprogress": "^0.2.0",
+    "@types/prettier": "^1.16.4",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/smoothscroll-polyfill": "^0.3.1",
@@ -67,6 +68,7 @@
     "jest": "^24.8.0",
     "prettier": "^1.18.2",
     "ts-jest": "^24.0.2",
+    "ts-node": "^8.3.0",
     "typescript": "^3.5.1"
   }
 }

scripts/copyUsedEmojis.js → scripts/copyUsedEmojis.ts

@@ -1,15 +1,16 @@
-const twemoji = require('twemoji')
-const uniq = require('lodash/uniq')
-const letterEmojis = Object.values(
+import twemoji from 'twemoji'
+import uniq from 'lodash/uniq'
+
+const letterEmojis = Object.values<string>(
   require('../src/lib/letterEmojiMappingJson.json')
 )
-const numberEmojis = Object.values(
+const numberEmojis = Object.values<string>(
   require('../src/lib/numberEmojiMappingJson.json')
 )
 
 // NOTE: Disabling svgo because it's causing
 // some emojis like 😍 to be rendered incorrectly.
-const allUsedEmojis = uniq([
+const allUsedEmojis = uniq<string>([
   ...letterEmojis,
   ...numberEmojis,
   '🤔',
@@ -110,13 +111,15 @@ const allUsedEmojis = uniq([
 // Copied from Twemoji
 const UFE0Fg = /\uFE0F/g
 const U200D = String.fromCharCode(0x200d)
-function grabTheRightIcon(rawText) {
+function grabTheRightIcon(rawText: string) {
   // if variant is present as \uFE0F
   return twemoji.convert.toCodePoint(
     rawText.indexOf(U200D) < 0 ? rawText.replace(UFE0Fg, '') : rawText
   )
 }
 
 console.log(
-  allUsedEmojis.map(x => `.twemoji_svg/${grabTheRightIcon(x)}.svg`).join(' ')
+  allUsedEmojis
+    .map((x: string) => `.twemoji_svg/${grabTheRightIcon(x)}.svg`)
+    .join(' ')
 )

scripts/generateContentsBundle.ts

@@ -0,0 +1,70 @@
+import chokidar from 'chokidar'
+import glob from 'glob'
+import fs from 'fs'
+import prettier from 'prettier'
+
+const regenerate = (path?: string) => {
+  glob(
+    './src/contents/**/*.+(en|jp).tsx',
+    (_: any, files: readonly string[]) => {
+      const uniqueNames = [
+        ...new Set(
+          files.map(x =>
+            x.replace('./src/contents/', '').replace(/\.(en|jp)\.tsx/, '')
+          )
+        )
+      ]
+
+      const importString = uniqueNames
+        .map(
+          name =>
+            `import Jp${name} from 'src/contents/${name}.jp'
+           import En${name} from 'src/contents/${name}.en'`
+        )
+        .join('\n')
+
+      const bundleObjectString = uniqueNames
+        .map(
+          name => `
+          '${name}': {
+            en: En${name},
+            jp: Jp${name}
+          }
+        `
+        )
+        .join(',\n')
+
+      const fileContents = prettier.format(
+        `// WARNING: Do not modify this file - it's generated automatically.
+      ${importString}
+
+      export default {
+        ${bundleObjectString}
+      }`,
+        { semi: false, singleQuote: true, parser: 'typescript' }
+      )
+
+      fs.writeFile('./src/lib/contentsBundle.tsx', fileContents, err => {
+        if (err) {
+          throw err
+        }
+        if (path) {
+          console.log(`${path} updated; Bundle regenerated`)
+        } else {
+          console.log('Bundle regenerated')
+        }
+      })
+    }
+  )
+}
+
+if (process.argv[2] === 'watch') {
+  chokidar
+    .watch('./src/contents/**/*.tsx', { ignoreInitial: true })
+    .on('add', path => regenerate(path))
+  chokidar
+    .watch('./src/contents/**/*.tsx')
+    .on('unlink', path => regenerate(path))
+} else {
+  regenerate()
+}

scripts/generateEmojisBundle.js → scripts/generateEmojisBundle.ts

@@ -1,20 +1,20 @@
-const chokidar = require('chokidar')
-const glob = require('glob')
-const fs = require('fs')
-const prettier = require('prettier')
-const { exec } = require('child_process')
+import chokidar from 'chokidar'
+import glob from 'glob'
+import fs from 'fs'
+import prettier from 'prettier'
+import { exec } from 'child_process'
 
 const regenerate = () => {
-  glob('./src/components/Twemoji/*.js', (err, files) => {
+  glob('./src/components/Twemoji/*.tsx', (_: any, files: readonly string[]) => {
     const uniqueNames = [
       ...new Set(
         files.map(x =>
-          x.replace('./src/components/Twemoji/', '').replace(/\.js/, '')
+          x.replace('./src/components/Twemoji/', '').replace(/\.tsx/, '')
         )
       )
     ]
 
-    const toComponentName = name => `Emoji${name.replace(/-/g, 'ZZ')}`
+    const toComponentName = (name: string) => `Emoji${name.replace(/-/g, 'ZZ')}`
 
     const importString = uniqueNames
       .map(
@@ -29,24 +29,13 @@ const regenerate = () => {
       .map(name => `'${name}': ${toComponentName(name)}`)
       .join(',\n')
 
-    const bundleInterfaceString = uniqueNames
-      .map(name => `'${name}': React.ComponentType<{}>`)
-      .join('\n')
-
     const fileContents = prettier.format(
       `// WARNING: Do not modify this file - it's generated automatically.
-      import React from 'react'
       ${importString}
 
-      export interface BundleTypes {
-        ${bundleInterfaceString}
-      }
-
-      const bundle: BundleTypes = {
+      export default {
         ${bundleObjectString}
-      }
-
-      export default bundle`,
+      }`,
       { semi: false, singleQuote: true, parser: 'typescript' }
     )
 
@@ -62,13 +51,13 @@ const regenerate = () => {
 if (process.argv[2] === 'watch') {
   chokidar
     .watch(
-      ['./src/lib/letterEmojiMappingJson.json', './scripts/copyUsedEmojis.js'],
+      ['./src/lib/letterEmojiMappingJson.json', './scripts/copyUsedEmojis.ts'],
       { ignoreInitial: true }
     )
     .on('change', path => {
       exec('yarn twemoji', err => {
         if (err) {
-          throw new Error(err)
+          throw new Error()
         }
         console.log(`${path} updated`)
       })

scripts/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.scripts.json"
+}

src/components/Content.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import bundle, { BundleTypes } from 'src/lib/contentsBundle'
+import bundle from 'src/lib/contentsBundle'
 import locale from 'src/lib/locale'
 
 export interface ContentProps {
-  name: keyof BundleTypes
+  name: keyof typeof bundle
 }
 
 const Content = ({ name }: ContentProps) => {

src/components/Twemoji/1f170.js → src/components/Twemoji/1f170.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 
-const Svg1F170 = props => (
+const Svg1F170 = (props: React.SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 36 36" {...props}>
     <path
       fill="#DD2E44"

src/components/Twemoji/1f171.js → src/components/Twemoji/1f171.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 
-const Svg1F171 = props => (
+const Svg1F171 = (props: React.SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 36 36" {...props}>
     <path
       fill="#DD2E44"

src/components/Twemoji/1f193.js → src/components/Twemoji/1f193.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 
-const Svg1F193 = props => (
+const Svg1F193 = (props: React.SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 36 36" {...props}>
     <path
       fill="#3B88C3"

src/components/Twemoji/1f195.js → src/components/Twemoji/1f195.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 
-const Svg1F195 = props => (
+const Svg1F195 = (props: React.SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 36 36" {...props}>
     <path
       fill="#3B88C3"

src/components/Twemoji/1f197.js → src/components/Twemoji/1f197.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 
-const Svg1F197 = props => (
+const Svg1F197 = (props: React.SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 36 36" {...props}>
     <path
       fill="#3B88C3"

src/components/Twemoji/1f19a.js → src/components/Twemoji/1f19a.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 
-const Svg1F19A = props => (
+const Svg1F19A = (props: React.SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 36 36" {...props}>
     <path
       fill="#F4900C"