feat: migrate playground to typescript

playground/__tests__/import-on-boostrap.test.js

@@ -7,7 +7,7 @@ jest.setTimeout(20000);
 
 afterEach(async () => {
   // Disable importOnBootstrap
-  await exec('sed -i "s/importOnBootstrap: true/importOnBootstrap: false/g" config/plugins.js');
+  await exec('sed -i "s/importOnBootstrap: true/importOnBootstrap: false/g" config/plugins.ts');
 
   await cleanupStrapi();
   await exec('rm -rf config/sync');
@@ -19,8 +19,8 @@ describe('Test the importOnBootstrap feature', () => {
     await exec('yarn cs export -y');
     await exec('rm -rf .tmp');
 
-    // Manually change the plugins.js to enable importOnBoostrap.
-    await exec('sed -i "s/importOnBootstrap: false/importOnBootstrap: true/g" config/plugins.js');
+    // Manually change the plugins.ts to enable importOnBoostrap.
+    await exec('sed -i "s/importOnBootstrap: false/importOnBootstrap: true/g" config/plugins.ts');
 
     // Start up Strapi to initiate the importOnBootstrap function.
     await setupStrapi();
@@ -33,8 +33,8 @@ describe('Test the importOnBootstrap feature', () => {
     await exec('rm -rf .tmp');
     await exec('yarn cs export -y');
 
-    // Manually change the plugins.js to enable importOnBoostrap.
-    await exec('sed -i "s/importOnBootstrap: false/importOnBootstrap: true/g" config/plugins.js');
+    // Manually change the plugins.ts to enable importOnBoostrap.
+    await exec('sed -i "s/importOnBootstrap: false/importOnBootstrap: true/g" config/plugins.ts');
 
     // Remove a config file to make sure the importOnBoostrap
     // function actually attempts to import.

playground/config/admin.ts

@@ -1,4 +1,4 @@
-module.exports = ({ env }) => ({
+export default ({ env }) => ({
   auth: {
     secret: env('ADMIN_JWT_SECRET'),
   },
@@ -19,6 +19,5 @@ module.exports = ({ env }) => ({
   },
   watchIgnoreFiles: [
     '!**/.yalc/**/server/**',
-    '**/config/sync/**',
-  ]
+  ],
 });

playground/config/api.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   rest: {
     defaultLimit: 25,
     maxLimit: 100,

playground/config/database.js

@@ -1,11 +0,0 @@
-const path = require('path');
-
-module.exports = ({ env }) => ({
-  connection: {
-    client: 'sqlite',
-    connection: {
-      filename: path.join(__dirname, '..', env('DATABASE_FILENAME', '.tmp/data.db')),
-    },
-    useNullAsDefault: true,
-  },
-});

playground/config/database.ts

@@ -0,0 +1,15 @@
+import path from 'path';
+
+export default ({ env }) => {
+
+  return {
+    connection: {
+      client: 'sqlite',
+      connection: {
+        filename: path.join(__dirname, '..', '..', env('DATABASE_FILENAME', '.tmp/data.db')),
+      },
+      useNullAsDefault: true,
+    },
+  };
+
+};

playground/config/middlewares.ts

@@ -1,4 +1,4 @@
-module.exports = [
+export default [
   'strapi::logger',
   'strapi::errors',
   'strapi::security',

playground/config/plugins.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default () => ({
   'config-sync': {
     enabled: true,
     config: {
@@ -6,4 +6,4 @@ module.exports = {
       minify: true,
     },
   },
-};
+});

playground/config/server.ts

@@ -1,4 +1,4 @@
-module.exports = ({ env }) => ({
+export default ({ env }) => ({
   host: env('HOST', '0.0.0.0'),
   port: env.int('PORT', 1337),
   app: {

playground/package.json

@@ -11,9 +11,13 @@
     "cs": "config-sync"
   },
   "devDependencies": {
+    "@types/node": "^24.0.7",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "supertest": "^6.3.3",
+    "typescript": "^5.8.3",
     "yalc": "^1.0.0-pre.53"
   },
   "dependencies": {

playground/src/admin/app.example.tsx

@@ -1,3 +1,5 @@
+import type { StrapiApp } from '@strapi/strapi/admin';
+
 export default {
   config: {
     locales: [
@@ -29,7 +31,7 @@ export default {
       // 'zh',
     ],
   },
-  bootstrap(app) {
+  bootstrap(app: StrapiApp) {
     console.log(app);
   },
 };

playground/src/admin/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["../plugins/**/admin/src/**/*", "./"],
+  "exclude": ["node_modules/", "build/", "dist/", "**/*.test.ts"]
+}

playground/src/admin/webpack.config.example.js

@@ -1,9 +0,0 @@
-'use strict';
-
-/* eslint-disable no-unused-vars */
-module.exports = (config, webpack) => {
-  // Note: we provide webpack above so you should not `require` it
-  // Perform customizations to webpack config
-  // Important: return the modified config
-  return config;
-};

playground/src/admin/webpack.config.example.ts

@@ -0,0 +1,12 @@
+import { mergeConfig, type UserConfig } from 'vite';
+
+export default (config: UserConfig) => {
+  // Important: always return the modified config
+  return mergeConfig(config, {
+    resolve: {
+      alias: {
+        '@': '/src',
+      },
+    },
+  });
+};

playground/src/api/home/controllers/home.js

@@ -1,9 +0,0 @@
-'use strict';
-
-/**
- * home controller
- */
-
-const { createCoreController } = require('@strapi/strapi').factories;
-
-module.exports = createCoreController('api::home.home');

playground/src/api/home/controllers/home.ts

@@ -0,0 +1,7 @@
+/**
+ * home controller
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreController('api::home.home');

playground/src/api/home/routes/home.js

@@ -1,9 +0,0 @@
-'use strict';
-
-/**
- * home router
- */
-
-const { createCoreRouter } = require('@strapi/strapi').factories;
-
-module.exports = createCoreRouter('api::home.home');

playground/src/api/home/routes/home.ts

@@ -0,0 +1,8 @@
+
+/**
+ * home router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::home.home');

playground/src/api/home/services/home.js

@@ -1,9 +0,0 @@
-'use strict';
-
-/**
- * home service
- */
-
-const { createCoreService } = require('@strapi/strapi').factories;
-
-module.exports = createCoreService('api::home.home');

playground/src/api/home/services/home.ts

@@ -0,0 +1,7 @@
+/**
+ * home service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::home.home');

playground/src/api/page/controllers/page.js

@@ -1,9 +0,0 @@
-'use strict';
-
-/**
- * page controller
- */
-
-const { createCoreController } = require('@strapi/strapi').factories;
-
-module.exports = createCoreController('api::page.page');

playground/src/api/page/controllers/page.ts

@@ -0,0 +1,7 @@
+/**
+ * page controller
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreController('api::page.page');

playground/src/api/page/routes/page.js

@@ -1,9 +0,0 @@
-'use strict';
-
-/**
- * page router
- */
-
-const { createCoreRouter } = require('@strapi/strapi').factories;
-
-module.exports = createCoreRouter('api::page.page');

playground/src/api/page/routes/page.ts

@@ -0,0 +1,7 @@
+/**
+ * page router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::page.page');

playground/src/api/page/services/page.js

@@ -1,9 +0,0 @@
-'use strict';
-
-/**
- * page service
- */
-
-const { createCoreService } = require('@strapi/strapi').factories;
-
-module.exports = createCoreService('api::page.page');

playground/src/api/page/services/page.ts

@@ -0,0 +1,7 @@
+/**
+ * page service
+ */
+
+import { factories } from '@strapi/strapi';
+
+module.exports = factories.createCoreService('api::page.page');

playground/src/index.ts

@@ -1,13 +1,13 @@
-'use strict';
+// import type { Core } from '@strapi/strapi';
 
-module.exports = {
+export default {
   /**
    * An asynchronous register function that runs before
    * your application is initialized.
    *
    * This gives you an opportunity to extend code.
    */
-  register(/*{ strapi }*/) {},
+  register(/* { strapi }: { strapi: Core.Strapi } */) {},
 
   /**
    * An asynchronous bootstrap function that runs before
@@ -16,5 +16,5 @@ module.exports = {
    * This gives you an opportunity to set up your data model,
    * run jobs, or perform some special logic.
    */
-  bootstrap(/*{ strapi }*/) {},
+  bootstrap(/* { strapi }: { strapi: Core.Strapi } */) {},
 };

playground/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "lib": ["ES2020"],
+    "target": "ES2019",
+    "strict": false,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noEmitOnError": true,
+    "noImplicitThis": true,
+    "outDir": "dist",
+    "rootDir": ".",
+  },
+  "include": [
+    // Include root files
+    "./",
+    // Include all ts files
+    "./**/*.ts",
+    // Include all js files
+    "./**/*.js",
+    // Force the JSON files in the src folder to be included
+    "src/**/*.json"
+  ],
+
+  "exclude": [
+    "node_modules/",
+    "build/",
+    "dist/",
+    ".cache/",
+    ".tmp/",
+
+    // Do not include admin files in the server compilation
+    "src/admin/",
+    // Do not include test files
+    "**/*.test.*",
+    // Do not include plugins in the server compilation
+    "src/plugins/**"
+  ]
+}