feat: migrate playground to typescript

gboutte · gboutte · commit c0253b549895 · 2025-06-28T17:21:16.000+02:00
diff --git a/playground/__tests__/import-on-boostrap.test.js b/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.
diff --git a/playground/config/admin.ts b/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/**',
-  ]
+  ],
 });
diff --git a/playground/config/api.ts b/playground/config/api.ts
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   rest: {
     defaultLimit: 25,
     maxLimit: 100,
diff --git a/playground/config/database.js b/playground/config/database.js
diff --git a/playground/config/database.ts b/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,
+    },
+  };
+
+};
diff --git a/playground/config/middlewares.ts b/playground/config/middlewares.ts
@@ -1,4 +1,4 @@
-module.exports = [
+export default [
   'strapi::logger',
   'strapi::errors',
   'strapi::security',
diff --git a/playground/config/plugins.ts b/playground/config/plugins.ts
@@ -1,9 +1,9 @@
-module.exports = {
+export default () => ({
   'config-sync': {
     enabled: true,
     config: {
       importOnBootstrap: false,
       minify: true,
     },
   },
-};
+});
diff --git a/playground/config/server.ts b/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: {
diff --git a/playground/package.json b/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": {
diff --git a/playground/src/admin/app.example.tsx b/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);
   },
 };
diff --git a/playground/src/admin/tsconfig.json b/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"]
+}
diff --git a/playground/src/admin/webpack.config.example.js b/playground/src/admin/webpack.config.example.js
diff --git a/playground/src/admin/webpack.config.example.ts b/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',
+      },
+    },
+  });
+};
diff --git a/playground/src/api/home/controllers/home.js b/playground/src/api/home/controllers/home.js
diff --git a/playground/src/api/home/controllers/home.ts b/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');
diff --git a/playground/src/api/home/routes/home.js b/playground/src/api/home/routes/home.js
diff --git a/playground/src/api/home/routes/home.ts b/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');
diff --git a/playground/src/api/home/services/home.js b/playground/src/api/home/services/home.js
diff --git a/playground/src/api/home/services/home.ts b/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');
diff --git a/playground/src/api/page/controllers/page.js b/playground/src/api/page/controllers/page.js
diff --git a/playground/src/api/page/controllers/page.ts b/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');
diff --git a/playground/src/api/page/routes/page.js b/playground/src/api/page/routes/page.js
diff --git a/playground/src/api/page/routes/page.ts b/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');
diff --git a/playground/src/api/page/services/page.js b/playground/src/api/page/services/page.js
diff --git a/playground/src/api/page/services/page.ts b/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');
diff --git a/playground/src/index.ts b/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 } */) {},
 };
diff --git a/playground/tsconfig.json b/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/**"
+  ]
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-module.exports = {`
	`1`	`+export default {`
`2`	`2`	`rest: {`
`3`	`3`	`defaultLimit: 25,`
`4`	`4`	`maxLimit: 100,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-module.exports = [`
	`1`	`+export default [`
`2`	`2`	`'strapi::logger',`
`3`	`3`	`'strapi::errors',`
`4`	`4`	`'strapi::security',`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-module.exports = ({ env }) => ({`
	`1`	`+export default ({ env }) => ({`
`2`	`2`	`host: env('HOST', '0.0.0.0'),`
`3`	`3`	`port: env.int('PORT', 1337),`
`4`	`4`	`app: {`