fix(cli): extension template (#3512)

platform/cli/templates/extension/babel.config.js

@@ -1,5 +1,26 @@
+// https://babeljs.io/docs/en/options#babelrcroots
+const { extendDefaultPlugins } = require('svgo');
+
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: [
+    [
+      'inline-react-svg',
+      {
+        svgo: {
+          plugins: extendDefaultPlugins([
+            {
+              name: 'removeViewBox',
+              active: false,
+            },
+          ]),
+        },
+      },
+    ],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    '@babel/plugin-transform-typescript',
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+  ],
   env: {
     test: {
       presets: [
@@ -10,15 +31,16 @@ module.exports = {
             modules: 'commonjs',
             debug: false,
           },
-          "@babel/preset-typescript",
         ],
         '@babel/preset-react',
+        '@babel/preset-typescript',
       ],
       plugins: [
         '@babel/plugin-proposal-object-rest-spread',
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-transform-regenerator',
         '@babel/plugin-transform-runtime',
+        '@babel/plugin-transform-typescript',
       ],
     },
     production: {
@@ -26,7 +48,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
@@ -35,7 +57,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       plugins: ['react-hot-loader/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],

platform/cli/templates/extension/dependencies.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
-    "dev:dicom-pdf": "yarn run dev",
+    "dev:my-extension": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
     "start": "yarn run dev"
@@ -40,14 +40,14 @@
     "@babel/plugin-transform-arrow-functions": "^7.16.7",
     "@babel/plugin-transform-regenerator": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.17.0",
-    "babel-plugin-inline-react-svg": "^2.0.1",
     "@babel/plugin-transform-typescript": "^7.13.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.13.0",
-
-    "babel-eslint": "^8.0.3",
-    "babel-loader": "^8.0.0-beta.4",
+    "babel-eslint": "9.x",
+    "babel-loader": "^8.2.4",
+    "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-module-resolver": "^5.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",