TypeScript Support

.gitignore

@@ -1,4 +1,7 @@
 .DS_Store
 node_modules
+configs/tsconfig/tsconfig.json
+configs/tsconfig/tsconfig-*.json
+!configs/tsconfig/tsconfig-source.json
 example-site/**/dist
 example-site/**/inc/asset-settings.php

configs/eslint.js

@@ -14,17 +14,20 @@ module.exports = (projectConfig) => {
       es2021: true,
       node: true,
     },
-    extends: ['airbnb', 'prettier'],
+    extends: ['airbnb', 'prettier', 'plugin:@typescript-eslint/recommended'],
     parser: '@babel/eslint-parser',
     parserOptions: {
       requireConfigFile: false,
       babelOptions: {
         ...babelConfig,
       },
     },
-    plugins: ['@babel', 'react', 'prettier', 'jsdoc'],
+    plugins: ['@babel', 'react', 'prettier', 'jsdoc', 'import', '@typescript-eslint/eslint-plugin'],
     settings: {
-      'import/resolver': eslintResolver(projectConfig.paths.src),
+      'import/resolver': eslintResolver(projectConfig.paths),
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.tsx'],
+      },
     },
     rules: {
       complexity: ['error', 10],
@@ -37,7 +40,7 @@ module.exports = (projectConfig) => {
       ],
       'react/jsx-uses-react': 'error',
       'react/jsx-uses-vars': 'error',
-      'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+      'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
       'react/react-in-jsx-scope': 0,
       'react/prop-types': 0,
       'react/forbid-prop-types': 0,

configs/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "checkJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "noUncheckedIndexedAccess": true,
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "typeRoots": [
+      "./types"
+    ]
+  },
+  "include": [
+    "typescript/images.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}

configs/typescript/images.d.ts

@@ -0,0 +1,13 @@
+declare module '*.png';
+declare module '*.jpeg';
+declare module '*.jpg';
+
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}
+
+declare module '*.svg?url' {
+  const content: string;
+  export default content;
+}

example-site/client-mu-plugins/test-client-plugin/package.json

@@ -1,3 +1,3 @@
 {
-    "name": "test-client-plugin"
+    "name": "@namespace/test-client-plugin"
 }