Feat/typescript support poc 2

packages/sui-bundler/.swcrc

@@ -0,0 +1,78 @@
+[
+  {
+    "test": ".tsx?$",
+    "minify": true,
+    "jsc": {
+      "parser": {
+        "syntax": "typescript",
+        "tsx": true,
+        "dynamicImport": true,
+        "privateMethod": true,
+        "functionBind": true,
+        "exportDefaultFrom": true,
+        "exportNamespaceFrom": true,
+        "decorators": true,
+        "decoratorsBeforeExport": true,
+        "topLevelAwait": true,
+        "importMeta": true
+      },
+      "transform": {
+        "legacyDecorator": true,
+        "react": {
+          "useBuiltins": true,
+          "runtime": "automatic"
+        }
+      },
+      "target": "es5",
+      "loose": true,
+      "externalHelpers": true
+    },
+    "env": {
+      "targets": {
+        "ie": "11"
+      },
+      "dynamicImport": true,
+      "loose": true,
+      "mode": "entry",
+      "coreJs": 3
+    }
+  },
+  {
+    "test": ".jsx?$",
+    "minify": true,
+    "jsc": {
+      "parser": {
+        "syntax": "ecmascript",
+        "jsx": true,
+        "dynamicImport": true,
+        "privateMethod": true,
+        "functionBind": true,
+        "exportDefaultFrom": true,
+        "exportNamespaceFrom": true,
+        "decorators": true,
+        "decoratorsBeforeExport": true,
+        "topLevelAwait": true,
+        "importMeta": true
+      },
+      "transform": {
+        "legacyDecorator": true,
+        "react": {
+          "useBuiltins": true,
+          "runtime": "automatic"
+        }
+      },
+      "target": "es5",
+      "loose": true,
+      "externalHelpers": true
+    },
+    "env": {
+      "targets": {
+        "ie": "11"
+      },
+      "dynamicImport": true,
+      "loose": true,
+      "mode": "entry",
+      "coreJs": 3
+    }
+  }
+]

packages/sui-bundler/bin/sui-bundler-dev.js

@@ -67,12 +67,7 @@ const start = async ({
 } = {}) => {
   clearConsole()
   // Warn and crash if required files are missing
-  if (
-    !checkRequiredFiles([
-      path.join(config.context, 'index.html'),
-      path.join(config.context, 'app.js')
-    ])
-  ) {
+  if (!checkRequiredFiles([path.join(config.context, 'index.html')])) {
     log.error(
       `✖ Required files are missing, create and index.html and app.js inside your src folder.`
     )

packages/sui-bundler/loaders/linkLoaderConfigBuilder.js

@@ -49,7 +49,7 @@ module.exports = ({config, packagesToLink, linkAll}) => {
    * if neccesary
    */
   const linkLoader = {
-    test: /\.(jsx?|scss)$/,
+    test: /\.(jsx?|tsx?|scss)$/,
     enforce: 'pre', // this will ensure is execute before transformations
     use: {
       loader: require.resolve('./LinkLoader'),

packages/sui-bundler/package.json

@@ -50,6 +50,9 @@
     "webpack": "5.74.0",
     "webpack-dev-server": "4.10.0",
     "webpack-manifest-plugin": "5.0.0",
-    "webpack-node-externals": "3.0.0"
+    "webpack-node-externals": "3.0.0",
+    "@swc/core": "^1.2.189",
+    "@swc/helpers": "^0.3.15",
+    "swc-loader": "^0.2.1"
   }
-}
+}

packages/sui-bundler/shared/index.js

@@ -1,6 +1,6 @@
 const {config} = require('./config.js')
 
-exports.MAIN_ENTRY_POINT = './app.js'
+exports.MAIN_ENTRY_POINT = './app'
 exports.config = config
 
 exports.cleanList = list => list.filter(Boolean)

packages/sui-bundler/shared/module-rules-babel.js

@@ -1,32 +1,82 @@
 const path = require('path')
 const {config} = require('./index.js')
 
+const {TS: isTypeScript = false} = process.env
+
 const EXCLUDED_FOLDERS_REGEXP = new RegExp(
   `node_modules(?!${path.sep}@s-ui(${path.sep}studio)(${path.sep}workbench)?${path.sep}src)`
 )
 
-module.exports = ({isServer = false} = {}) => ({
-  test: /\.jsx?$/,
-  exclude: EXCLUDED_FOLDERS_REGEXP,
-  use: [
-    {
-      loader: require.resolve('babel-loader'),
-      options: {
-        cacheDirectory: true,
-        cacheCompression: false,
-        babelrc: false,
-        compact: true,
-        presets: [
-          [
-            require.resolve('babel-preset-sui'),
-            {
-              isServer,
-              supportLegacyBrowsers: true,
-              targets: config.targets
+module.exports = ({isServer = false} = {}) =>
+  isTypeScript
+    ? {
+        test: /\.(js|ts)x?$/,
+        exclude: EXCLUDED_FOLDERS_REGEXP,
+        use: [
+          {
+            loader: require.resolve('swc-loader'),
+            options: {
+              minify: true,
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                  dynamicImport: true,
+                  privateMethod: true,
+                  functionBind: true,
+                  exportDefaultFrom: true,
+                  exportNamespaceFrom: true,
+                  decorators: true,
+                  decoratorsBeforeExport: true,
+                  topLevelAwait: true,
+                  importMeta: true
+                },
+                transform: {
+                  legacyDecorator: true,
+                  react: {
+                    useBuiltins: true,
+                    runtime: 'automatic'
+                  }
+                },
+                target: 'es5',
+                loose: true,
+                externalHelpers: true
+              },
+              env: {
+                targets: {
+                  ie: '11'
+                },
+                dynamicImport: true,
+                loose: true,
+                mode: 'entry',
+                coreJs: 3
+              }
+            }
+          }
+        ]
+      }
+    : {
+        test: /\.jsx?$/,
+        exclude: EXCLUDED_FOLDERS_REGEXP,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              cacheDirectory: true,
+              cacheCompression: false,
+              babelrc: false,
+              compact: true,
+              presets: [
+                [
+                  require.resolve('babel-preset-sui'),
+                  {
+                    isServer,
+                    supportLegacyBrowsers: true,
+                    targets: config.targets
+                  }
+                ]
+              ]
             }
-          ]
+          }
         ]
       }
-    }
-  ]
-})

packages/sui-bundler/webpack.config.dev.js

@@ -43,7 +43,7 @@ const webpackConfig = {
       url: require.resolve('url/')
     },
     modules: ['node_modules', path.resolve(process.cwd())],
-    extensions: ['.js', '.json']
+    extensions: ['.js', '.tsx', '.ts', '.json']
   },
   stats: 'errors-only',
   entry: cleanList([

packages/sui-studio/bin/sui-studio-dev.js

@@ -5,8 +5,8 @@ const path = require('path')
 const fs = require('fs')
 const webpack = require('webpack')
 
-const config = require('@s-ui/bundler/webpack.config.dev')
-const startDevServer = require('@s-ui/bundler/bin/sui-bundler-dev')
+const config = require('../../sui-bundler/webpack.config.dev.js')
+const startDevServer = require('../../sui-bundler/bin/sui-bundler-dev.js')
 
 const {componentsFullPath} = require('./helpers/walker.js')
 

packages/sui-studio/src/components/tryRequire.js

@@ -62,8 +62,8 @@ export const importReactComponent = ({
     importFile: () => {
       return import(
         /* webpackChunkName: "src-[request]" */
-        /* webpackExclude: /\/node_modules\/(.*)\/src\/index.js$/ */
-        `${__BASE_DIR__}/components/${category}/${component}/src/index.js`
+        /* webpackExclude: /\/node_modules\/(.*)\/src\/index$/ */
+        `${__BASE_DIR__}/components/${category}/${component}/src/index`
       )
     }
   })
@@ -74,8 +74,8 @@ const importDemo = ({category, component}) =>
     importFile: () =>
       import(
         /* webpackChunkName: "demo-[request]" */
-        /* webpackExclude: /\/node_modules\/(.*)\/demo\/index.js$/ */
-        `${__BASE_DIR__}/components/${category}/${component}/demo/index.js`
+        /* webpackExclude: /\/node_modules\/(.*)\/demo\/index$/ */
+        `${__BASE_DIR__}/components/${category}/${component}/demo/index`
       )
   })
 

packages/sui-studio/workbench/src/components/Root/index.js

@@ -6,8 +6,8 @@ import Header from '../Header/index.js'
 import Select from '../Select/index.js'
 import Test from '../Suite/index.js'
 
-const importComponent = () => import('component/index.js')
-const importTest = () => import('test/index.test.js')
+const importComponent = () => import('component/index')
+const importTest = () => import('test/index.test')
 
 const getFromStorage = (key, defaultValue) =>
   window.sessionStorage[key] || defaultValue