Feat/typescript support poc 2

.github/CODEOWNERS

@@ -1,4 +1,4 @@
 # Each line is a file pattern followed by one or more owners.
 
 # These owners will be the default owners for everything in the repo.
-* @sui-bot @kikoruiz @andresz1
+* @sui-bot @kikoruiz @andresz1 @carlosvillu

.gitignore

@@ -21,4 +21,5 @@ packages/sui-studio/test/server/integration/empty-studio/components/fake/compone
 
 !packages/sui-sass-loader/test/server/fixtures/**/node_modules
 
-contract/logs/pact.log
+contract/logs/pact.log
+.npmrc

README.md

@@ -25,6 +25,7 @@ SUI is a set of packages which goal to ease development of SUI-based components
 | [sui-helpers](./packages/sui-helpers) | A set of internal helpers used by sui-related packages. |
 | [sui-hoc](./packages/sui-hoc) | React utility belt for function components and higher-order components |
 | [sui-i18n](./packages/sui-i18n) | Isomorphic i18n service for browser and node |
+| [sui-jest](./packages/sui-jest) | CLI to work with Jest |
 | [sui-js](./packages/sui-js) | Javascript utilities |
 | [sui-js-compiler](./packages/sui-js-compiler) | Javascript compiler |
 | [sui-lint](./packages/sui-lint) | CLI to lint your code and make it compliant to SUI official rules |

package.json

@@ -79,4 +79,4 @@
   "stylelint": {
     "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
   }
-}
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/bundler",
-  "version": "9.38.0",
+  "version": "9.39.0-typescript.6",
   "description": "Config-free bundler for ES6 React apps.",
   "bin": {
     "sui-bundler": "./bin/sui-bundler.js"
@@ -21,9 +21,11 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.18.10",
+    "@babel/core": "7.21.8",
     "@s-ui/helpers": "1",
     "@s-ui/sass-loader": "1",
+    "@swc/core": "1.3.14",
+    "@swc/helpers": "0.4.12",
     "address": "1.2.0",
     "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
@@ -34,7 +36,7 @@
     "css-minimizer-webpack-plugin": "4.0.0",
     "esbuild": "0.15.5",
     "escape-string-regexp": "4.0.0",
-    "fast-glob": "3.2.11",
+    "fast-glob": "3.2.12",
     "find-free-ports": "3.0.0",
     "html-webpack-plugin": "5.5.0",
     "https-browserify": "1.0.0",
@@ -46,8 +48,9 @@
     "stream-http": "3.2.0",
     "strip-ansi": "6.0.1",
     "style-loader": "3.3.1",
+    "swc-loader": "^0.2.1",
     "url": "0.11.0",
-    "webpack": "5.74.0",
+    "webpack": "5.82.1",
     "webpack-dev-server": "4.10.0",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-node-externals": "3.0.0"

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,93 @@
+/* eslint-disable no-console */
+const fs = require('fs-extra')
 const path = require('path')
 const {config} = require('./index.js')
 
+const tsConfigPath = path.join(process.cwd(), 'tsconfig.json')
+let isTypeScriptEnabled = false
+
+try {
+  if (fs.existsSync(tsConfigPath)) {
+    isTypeScriptEnabled = true
+  }
+} catch (err) {
+  console.error(err)
+}
+
 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, supportLegacyBrowsers = true} = {}) => ({
-  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,
-              isModern: !supportLegacyBrowsers,
-              targets: config.targets
+module.exports = ({isServer = false, supportLegacyBrowsers = true} = {}) =>
+  isTypeScriptEnabled
+    ? {
+        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,
+                    isModern: !supportLegacyBrowsers,
+                    targets: config.targets
+                  }
+                ]
+              ]
             }
-          ]
+          }
         ]
       }
-    }
-  ]
-})

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

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

packages/sui-i18n/CHANGELOG.md

@@ -1,5 +1,23 @@
 # CHANGELOG
 
+# 1.34.0 (2023-06-13)
+
+
+### Bug Fixes
+
+* **packages/sui-i18n:** restore slash when token is validated in i18n.url ([316c987](https://github.com/SUI-Components/sui/commit/316c987e3b5c06a068e0edf493520c139b07cdfa))
+
+
+
+# 1.33.0 (2023-06-12)
+
+
+### Bug Fixes
+
+* **packages/sui-i18n:** fix missed key warning when i18n.url ([a851c59](https://github.com/SUI-Components/sui/commit/a851c59bc0ef53e466a79a45c250b46ee1a3deb6))
+
+
+
 # 1.32.0 (2023-03-03)
 
 

packages/sui-i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/i18n",
-  "version": "1.32.0",
+  "version": "1.34.0",
   "type": "module",
   "main": "lib/index.js",
   "description": "> Isomorphic i18n service for browser and node.",

packages/sui-i18n/src/i18n.js

@@ -193,7 +193,7 @@ export default class Rosetta {
   url(urlPattern, allowQueryParams) {
     return urlPattern
       .split('/')
-      .map(token => slugify(this.t(token), allowQueryParams))
+      .map(token => token && slugify(this.t(token), allowQueryParams))
       .join('/')
   }
 

packages/sui-i18n/test/fixtures/languages.js

@@ -1,15 +1,21 @@
 export const LANGUAGES = {
   'es-ES': {
     literalOne: 'TranslateOneEsES',
-    withPlural: 'uno  |||| varios'
+    withPlural: 'uno  |||| varios',
+    profilePathSegment: 'mi-perfil',
+    privacyPathSegment: 'privacidad'
   },
   'en-GB': {
     literalOne: 'TranslateOneEnGB',
-    withPlural: 'one  |||| many'
+    withPlural: 'one  |||| many',
+    profilePathSegment: 'my-profile',
+    privacyPathSegment: 'privacy'
   },
   'ca-ES': {
     literalOne: 'TranslateOneCaES',
-    withPlural: 'un  |||| varis'
+    withPlural: 'un  |||| varis',
+    profilePathSegment: 'meu-perfil',
+    privacyPathSegment: 'privacitat'
   }
 }
 

packages/sui-i18n/test/i18nSpec.js

@@ -79,6 +79,12 @@ describe('I18N', () => {
         expect(i18n.n(1000000)).to.eql('1,000,000')
       })
 
+      it('generate url properly', () => {
+        expect(i18n.url('/profilePathSegment/privacyPathSegment')).to.eql(
+          '/my-profile/privacy'
+        )
+      })
+
       describe('with pound sterling (GBP) as currency type', () => {
         beforeEach(() => {
           i18n.currency = 'GBP'

packages/sui-jest/.npmignore

@@ -0,0 +1,2 @@
+src
+test

packages/sui-jest/CHANGELOG.md

@@ -0,0 +1,11 @@
+# CHANGELOG
+
+# 1.1.0 (2023-06-12)
+
+
+### Features
+
+* **packages/sui-jest:** add wrapper for jest ([f15be4c](https://github.com/SUI-Components/sui/commit/f15be4c48d8b1ade07a407c0781c79b181b4a52b))
+
+
+

packages/sui-jest/README.md

@@ -0,0 +1,70 @@
+# sui-jest
+
+This is a CLI that abstracts away all configuration for [Jest](https://jestjs.io/).
+
+## Installation
+
+```sh
+npm install -D @s-ui/jest
+```
+
+## Usage
+
+This CLI exposes a bin called `sui-jest` with all options that [Jest CLI Options](https://jestjs.io/docs/cli) supports.
+
+**From node**
+
+```sh
+node ./node_modules/.bin/sui-jest [Jest CLI Options]
+```
+
+**From npm script**
+
+```json
+// package.json
+{
+    scripts: {
+        "test:jest": "sui-jest",
+    }
+}
+```
+```sh
+npm run test:jest -- [Jest CLI Options]
+```
+
+### Overriding Config
+
+`sui-jest` allows you to specify your own configuration. There are various ways that it works, but basically if you want to have your own config for something, just add the configuration and `sui-jest` will use it instead of its own internal config.
+
+**Specific**
+
+From CLI using the `--config` flag with the path of the specific jest config file.
+
+```sh
+node ./node_modules/.bin/sui-jest --config jest.config.[*]
+```
+
+**Automatic**
+
+Create a `jest.config.[*]` config file in your root project or within the `packages/*`, and `sui-jest` will use the jest config file closest to where it has been executed.
+
+```js
+// jest.config.js
+
+module.exports = {
+  testEnvironment: 'jsdom',
+  testMatch: ['**/__tests__/**/*.test.js'],
+  // ...
+}
+```
+
+*In construction*
+
+In addition, `sui-jest` will expose its basic configuration so you can use it and override only the parts of the config you need to.
+
+
+## Inspiration
+
+This is inspired by [kcd-scripts](https://github.com/kentcdodds/kcd-scripts).
+
+

packages/sui-jest/bin/config.js

@@ -0,0 +1,4 @@
+// TODO: add sui jest common config
+const jestConfig = {}
+
+module.exports = jestConfig