Merge remote-tracking branch 'origin/ts-migration'

.eslintrc.json

@@ -0,0 +1,58 @@
+{
+    "extends": "@scandipwa",
+    "parserOptions": {
+        "requireConfigFile": false,
+        "project": [
+            "./packages/**/tsconfig.json",
+            "./build-packages/**/tsconfig.json"
+        ],
+        "babelOptions": {
+            "presets": ["@babel/preset-react"]
+        }
+    },
+    "ignorePatterns": [
+        "*.d.ts",
+        "**/test/**",
+        "*.test.*",
+        "**/dist/**",
+        "**/out/**",
+        "**/bin/**",
+        "**/node_modules/**",
+        "**/Magento_Theme/**",
+        "**/build/**",
+        "**/runtime-packages/**",
+        "**/tilework-packages/**"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "**/build*/**/*"
+            ],
+            "rules": {
+                "no-magic-numbers": "off",
+                "import/no-dynamic-require": "off",
+                "fp/no-let": "off",
+                "fp/no-loops": "off",
+                "global-require": "off",
+                "max-len": "off",
+                "max-lines": "off",
+                "default-param-last": "off",
+                "@typescript-eslint/default-param-last": "off",
+                "@typescript-eslint/naming-convention": "off",
+                "import/prefer-default-export": "off",
+                "import/no-extraneous-dependencies": "off",
+                "import/no-cycle": "off"
+            }
+        }, {
+            "files": [
+                "**/templates/**",
+                "**/template/**",
+                "**/examples/**",
+                "**/example/**"
+            ],
+            "rules": {
+                "no-unused-vars": "off"
+            }
+        }
+    ]
+}

build-packages/create-scandipwa-app/index.js

@@ -11,7 +11,7 @@ const googleAnalytics = require('@scandipwa/scandipwa-dev-utils/analytics');
 const templateMap = {
     theme: require('@scandipwa/csa-generator-theme'),
     blank: require('@scandipwa/csa-generator-blank'),
-    cra: require('@scandipwa/csa-generator-cra')
+    cra: require('@scandipwa/csa-generator-cra'),
 };
 
 const createApp = async (options) => {
@@ -24,6 +24,7 @@ const createApp = async (options) => {
         if (generator) {
             // Run generator if it is available
             generator(options);
+
             return;
         }
 
@@ -99,7 +100,7 @@ yargs.command(
                 describe: 'Template to create ScandiPWA app from.',
                 type: 'string',
                 default: 'theme',
-                nargs: 1
+                nargs: 1,
             }
         );
     },
@@ -129,7 +130,7 @@ yargs.command(
              * it should return '@scandipwa/test' as name as 'projects/test' as path.
              */
             name: packageName,
-            path: pathToDist
+            path: pathToDist,
         };
 
         await init(options);

build-packages/csa-generator-blank/index.js

@@ -10,13 +10,14 @@ const getPackagePath = require('@scandipwa/scandipwa-dev-utils/package-path');
 const eslintFix = (destination) => {
     const eslintPath = getPackagePath('eslint', destination);
     const binPath = path.join(eslintPath, 'bin', 'eslint.js');
+
     return execCommandAsync('node', [
         binPath,
         'src',
         '--resolve-plugins-relative-to', '.',
         '--no-error-on-unmatched-pattern',
         '--ext', '.js',
-        '--fix'
+        '--fix',
     ], destination);
 };
 
@@ -92,7 +93,7 @@ const fileSystemCreator = (templateOptions) => (
 const run = async (options) => {
     const {
         name,
-        path: pathname
+        path: pathname,
     } = options;
 
     const destination = path.join(process.cwd(), pathname);
@@ -131,7 +132,7 @@ const run = async (options) => {
         scandipwaScriptsVersion,
         mosaicVersion,
         name,
-        eslintConfigVersion
+        eslintConfigVersion,
     };
 
     // create filesystem from template

build-packages/csa-generator-blank/template/src/component/WelcomePage/WelcomePage.component.js

@@ -1,10 +1,12 @@
+/* eslint-disable react/forbid-elements */
+/* eslint-disable react/forbid-dom-props */
 import { PureComponent } from 'react';
 
 import logo from './logo.svg';
 
 import './WelcomePage.style.scss';
 
-/** @namespace Placeholder/Component/WelcomePage/Component/WelcomePageComponent */
+/** @namespace Placeholder/Component/WelcomePage/Component */
 export class WelcomePageComponent extends PureComponent {
     typeMap = {};
 

build-packages/csa-generator-blank/template/src/plugin/WelcomePageRoute.plugin.js

@@ -18,14 +18,14 @@ const addWelcomePageRoute = (member) => [
     {
         position: 1000,
         path: '/',
-        render: (props) => createElement(WelcomePage, props)
-    }
+        render: (props) => createElement(WelcomePage, props),
+    },
 ];
 
 export default {
     'Router/Component/Router/Component/RouterComponent': {
         'member-property': {
-            switchRoutesList: addWelcomePageRoute
-        }
-    }
+            switchRoutesList: addWelcomePageRoute,
+        },
+    },
 };

build-packages/csa-generator-cra/index.js

@@ -10,13 +10,14 @@ const getPackagePath = require('@scandipwa/scandipwa-dev-utils/package-path');
 const eslintFix = (destination) => {
     const eslintPath = getPackagePath('eslint', destination);
     const binPath = path.join(eslintPath, 'bin', 'eslint.js');
+
     return execCommandAsync('node', [
         binPath,
         'src',
         '--resolve-plugins-relative-to', '.',
         '--no-error-on-unmatched-pattern',
         '--ext', '.js',
-        '--fix'
+        '--fix',
     ], destination);
 };
 
@@ -94,7 +95,7 @@ const fileSystemCreator = (templateOptions) => (
 const run = async (options) => {
     const {
         name,
-        path: pathname
+        path: pathname,
     } = options;
 
     const destination = path.join(process.cwd(), pathname);
@@ -156,7 +157,7 @@ const run = async (options) => {
         scandipwaScriptsVersion,
         mosaicVersion,
         eslintConfigVersion,
-        name
+        name,
     };
 
     // create filesystem from template

build-packages/csa-generator-cra/template/src/component/App/App.component.js

@@ -1,10 +1,12 @@
+/* eslint-disable react/forbid-elements */
+/* eslint-disable react/forbid-dom-props */
 import { PureComponent } from 'react';
 
 import logo from './logo.svg';
 
 import './App.style.scss';
 
-/** @namespace Placeholder/Component/App/Component/AppComponent */
+/** @namespace Placeholder/Component/App/Component */
 export class AppComponent extends PureComponent {
     renderLogo() {
         return (

build-packages/csa-generator-extension/index.js

@@ -29,11 +29,11 @@ const fileSystemCreator = (templateOptions) => (
 const run = async (options) => {
     const {
         name,
-        path: pathname
+        path: pathname,
     } = options;
 
     const templateOptions = {
-        name
+        name,
     };
 
     // create filesystem from template

build-packages/csa-generator-theme/index.js

@@ -63,6 +63,18 @@ const fileSystemCreator = (templateOptions) => (
             templateOptions
         );
 
+        filesystem.copyTpl(
+            templatePath('tsconfig.json'),
+            destinationPath('tsconfig.json'),
+            templateOptions
+        );
+
+        filesystem.copyTpl(
+            templatePath('.eslintrc.js'),
+            destinationPath('.eslintrc.js'),
+            templateOptions
+        );
+
         filesystem.copyTpl(
             templatePath('yarn.lock.cached'),
             destinationPath('yarn.lock'),
@@ -114,7 +126,7 @@ const fileSystemCreator = (templateOptions) => (
 const run = async (options) => {
     const {
         name,
-        path: pathname
+        path: pathname,
     } = options;
 
     const destination = path.join(process.cwd(), pathname);
@@ -124,7 +136,10 @@ const run = async (options) => {
     let mosaicVersion = '0.0.0';
     let eslintConfigVersion = '0.0.0';
     let mosaicCracoVersion = '0.0.0';
+    let tsServerPluginVersion = '0.0.0';
     const postcssVersion = '8.4.5';
+    const reactTypesVersion = '18.0.17';
+    const reactReduxVersion = '8.0.2';
 
     try {
         scandipwaVersion = await getLatestVersion('@scandipwa/scandipwa');
@@ -142,6 +157,14 @@ const run = async (options) => {
         );
     }
 
+    try {
+        tsServerPluginVersion = await getLatestVersion('@scandipwa/ts-server-plugin');
+    } catch (e) {
+        logger.warn(
+            `Package ${ logger.style.misc('@scandipwa/ts-server-plugin') } is not yet published.`
+        );
+    }
+
     try {
         mosaicVersion = await getLatestVersion('@tilework/mosaic');
     } catch (e) {
@@ -169,12 +192,15 @@ const run = async (options) => {
     const templateOptions = {
         scandipwaVersion,
         scandipwaScriptsVersion,
+        tsServerPluginVersion,
         name,
         mosaicVersion,
         mosaicCracoVersion,
         postcssVersion,
+        reactTypesVersion,
+        reactReduxVersion,
         proxy: DEFAULT_PROXY,
-        eslintConfigVersion
+        eslintConfigVersion,
     };
 
     // create filesystem from template

build-packages/csa-generator-theme/template/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+    extends: [
+        '@scandipwa',
+    ],
+    parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: './tsconfig.json',
+        requireConfigFile: false,
+    },
+    rules: {
+        // TODO: disable or enable rules here
+    },
+};

build-packages/csa-generator-theme/template/package.json

@@ -6,17 +6,22 @@
         "@scandipwa/scandipwa": "<%= scandipwaVersion %>",
         "@scandipwa/scandipwa-scripts": "<%= scandipwaScriptsVersion %>",
         "@scandipwa/eslint-config": "<%= eslintConfigVersion %>",
+        "@scandipwa/ts-server-plugin": "<%= tsServerPluginVersion %>",
         "@tilework/mosaic": "<%= mosaicVersion %>",
         "@tilework/mosaic-craco": "<%= mosaicCracoVersion %>",
-        "postcss": "<%= postcssVersion %>"
+        "@types/react": "<%= reactTypesVersion %>",
+        "postcss": "<%= postcssVersion %>",
+        "react-redux": "<%= reactReduxVersion %>"
     },
     "scandipwa": {
         "type": "theme",
         "locales": {
             "en_US": true
         },
         "parentTheme": "@scandipwa/scandipwa",
-        "extensions": {}
+        "extensions": {
+            "@scandipwa/ts-server-plugin": true
+        }
     },
     "scripts": {
         "start": "scandipwa-scripts start",
@@ -34,8 +39,5 @@
             "last 1 safari version"
         ]
     },
-    "eslintConfig": {
-        "extends": "@scandipwa"
-    },
     "proxy": "<%= proxy %>"
 }

build-packages/csa-generator-theme/template/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "./mosaic.jsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "./node_modules/@scandipwa/scandipwa/src/**/*",
+    "./src/**/*"
+  ],
+  "exclude": []
+}

build-packages/csa-generator-theme/template/yarn.lock.cached

@@ -11659,10 +11659,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.0.3:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
-  integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
+typescript@4.8.2:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.2.tgz#e3b33d5ccfb5914e4eeab6699cf208adee3fd790"
+  integrity sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"