Merge pull request #1614 from SUI-Components/typescript-support

[FEAT] typescript support

.github/workflows/main.yml

@@ -0,0 +1,111 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  checks:
+    name: Checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Redundant Builds
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          registry-url: 'https://registry.npmjs.org'
+          node-version-file: '.nvmrc'
+
+      - name: Setup Chrome
+        uses: browser-actions/setup-chrome@latest
+
+      - name: Install
+        run: |
+          sudo apt-get install xvfb
+          npm install --no-save --no-fund --no-audit --legacy-peer-deps
+          npx -y ultra-runner --raw --recursive prepublishOnly
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Type Checking
+        run: npm run types:check
+
+      - name: Tests
+        run: |
+          npm run test:server:ci
+          xvfb-run --auto-servernum npm run test:client:ci
+
+  publish:
+    name: Publish
+    needs: checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          registry-url: 'https://registry.npmjs.org'
+          node-version-file: '.nvmrc'
+
+      - name: Publish Packages
+        if: github.ref == 'refs/heads/master'
+        run: |
+          npx -p ./packages/sui-mono sui-mono check
+          npx -p ./packages/sui-ci sui-ci release
+        env:
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          GITHUB_EMAIL: [email protected]
+          GITHUB_TOKEN: ${{ secrets.GH_ACTIONS_TOKEN }}
+          GITHUB_USER: sui-bot
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  publish-tagged-packages:
+    name: Publish Tagged Packages to NPM
+    needs: checks
+    if: github.ref != 'refs/heads/master' && contains(github.event.pull_request.labels.*.name, 'feature')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          registry-url: 'https://registry.npmjs.org'
+          node-version-file: '.nvmrc'
+
+      - name: Install
+        run: npm install -D commander execa prettier
+
+      - name: Get Files
+        id: files
+        uses: jitterbit/get-changed-files@v1
+        with:
+          format: 'json'
+
+      - name: Publish Packages
+        run: npm run publish-tagged-packages -- --tag '${{ github.event.pull_request.head.ref }}' --files '${{ steps.files.outputs.added_modified }}'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,25 +1,25 @@
-node_modules/
-lib/
-coverage/
 .DS_Store
-npm-debug.log
-.tern-port
-package-lock.json
+.idea/
 .python-version
+.tern-port
+.vscode/
+
+contract/logs/pact.log
+coverage/
 jsconfig.json
+lib/
+node_modules/
+npm-debug.log
+package-lock.json
+
+!packages/sui-sass-loader/test/server/fixtures/**/node_modules
 packages/sui-codemod/COMMANDS
-sui-components-dashboard-9350df448fcd.json
-.idea/
-.vscode/
 packages/sui-studio/test/server/integration/empty-studio/components/fake/**
+packages/sui-studio/test/server/integration/empty-studio/components/fake/componentnvim
 packages/sui-studio/test/server/integration/empty-studio/demo/fake/**
 packages/sui-studio/test/server/integration/empty-studio/test/fake/**
-packages/sui-studio/test/server/integration/sample-studio/node_modules/
 packages/sui-studio/test/server/integration/sample-studio/components/atom/button/node_modules/
+packages/sui-studio/test/server/integration/sample-studio/node_modules/
 packages/sui-studio/test/server/integration/sample-studio/public
-packages/sui-studio/test/server/integration/empty-studio/components/fake/componentnvim
 
-!packages/sui-sass-loader/test/server/fixtures/**/node_modules
-
-contract/logs/pact.log
-.npmrc
+sui-components-dashboard-9350df448fcd.json

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package.json

@@ -12,30 +12,33 @@
     "packages/*"
   ],
   "scripts": {
-    "phoenix": "npx @s-ui/mono phoenix && npx -y ultra-runner --raw --recursive prepublishOnly &>/dev/null",
+    "phoenix": "npx @s-ui/mono phoenix && npx -y ultra-runner --raw --recursive prepublishOnly --build &>/dev/null",
     "co": "npx @s-ui/mono commit",
     "lint": "sui-lint js && sui-lint sass",
     "test": "npm run test:client && npm run test:server",
     "test:client:ci": "npm run test:client",
     "test:server:ci": "npm run test:server",
     "test:client": "npx @s-ui/test browser -P 'packages/**/!(server)/*Spec.js'",
     "test:client:watch": "npm run test:client -- --watch",
-    "test:server": "npx @s-ui/test server -P './packages/sui-test-contract/test/server/setupSpec.js'",
+    "test:server": "npx @s-ui/test server -P 'packages/{sui-test-contract,sui-js-compiler}/**/server/*Spec.js'",
     "test:server:watch": "npm run test:server -- --watch",
     "test:e2e": "node ./packages/sui-studio/test/server/integration/static-server.js ./packages/sui-studio/test/server/integration/sample-studio/public && npx @s-ui/test-e2e --baseUrl=http://localhost:1234",
     "pre-commit": "sui-lint js --staged && sui-lint sass --staged",
-    "pre-push": "npm run test",
-    "commit-msg": "validate-commit-msg"
+    "pre-push": "npm run test && npm run types:check",
+    "publish-tagged-packages": "node ./scripts/publish-tagged-packages.mjs",
+    "commit-msg": "validate-commit-msg",
+    "types:check": "tsc"
   },
   "devDependencies": {
     "@babel/cli": "7",
     "@s-ui/lint": "4",
     "@s-ui/precommit": "3",
     "@s-ui/react-context": "1",
     "chai": "4.3.6",
+    "pino-pretty": "10.3.1",
     "react": "17",
     "sinon": "10.0.0",
-    "typescript": "4.3.2",
+    "typescript": "5.0.4",
     "validate-commit-msg": "2.14.0"
   },
   "config": {
@@ -79,4 +82,4 @@
   "stylelint": {
     "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
   }
-}
+}

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

@@ -57,7 +57,7 @@ if (!module.parent) {
 const start = async ({config = webpackConfig, packagesToLink = program.opts().linkPackage || []} = {}) => {
   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.`)
     process.exit(1)
   }

packages/sui-bundler/loaders/linkLoaderConfigBuilder.js

@@ -43,7 +43,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

@@ -7,6 +7,7 @@
   },
   "main": "./bin/sui-bundler.js",
   "scripts": {
+    "postinstall": "node ./scripts/postinstall.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -21,11 +22,14 @@
   },
   "homepage": "https://github.com/SUI-Components/sui/tree/master/packages/sui-bundler#readme",
   "dependencies": {
-    "@babel/core": "7.18.10",
+    "@babel/core": "7.21.8",
     "@builder.io/react-hydration-overlay": "0.0.8",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
+    "@s-ui/compiler-config": "1",
     "@s-ui/helpers": "1",
     "@s-ui/sass-loader": "1",
+    "@swc/core": "1.3.14",
+    "@swc/helpers": "0.4.12",
     "address": "1.2.2",
     "autoprefixer": "10.4.8",
     "babel-loader": "8.3.0",
@@ -36,7 +40,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-inject-attributes-plugin": "1.0.6",
     "html-webpack-plugin": "5.5.0",
@@ -50,6 +54,7 @@
     "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-dev-server": "4.15.2",
     "webpack-manifest-plugin": "5.0.0",

packages/sui-bundler/scripts/postinstall.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+const crypto = require('crypto')
+const fs = require('fs-extra')
+const path = require('path')
+const {writeFile} = require('@s-ui/helpers/file.js')
+
+const {INIT_CWD} = process.env
+const tsConfigTemplate = `\
+{
+  "extends": "@s-ui/bundler/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./"
+  },
+  "include": ["src", "domain", "components"]
+}`
+
+const md5 = str => crypto.createHash('md5').update(str).digest('hex')
+const TS_CONFIG_PATH = path.join(INIT_CWD, 'tsconfig.json')
+const PACKAGE_JSON_CONFIG_PATH = path.join(INIT_CWD, 'package.json')
+
+const config = require(PACKAGE_JSON_CONFIG_PATH)?.config?.['sui-bundler'] || {}
+
+const shouldGenerateTSConfig = () => {
+  try {
+    if (!config?.type || config?.type !== 'typescript') return false
+
+    if (!fs.existsSync(TS_CONFIG_PATH)) return true
+
+    const tsConfigLocal = fs.readFileSync(TS_CONFIG_PATH, {encoding: 'utf8'})
+    return md5(tsConfigLocal) !== md5(tsConfigTemplate)
+  } catch (err) {
+    return true
+  }
+}
+
+async function main() {
+  console.log('🔍 [sui-bundler postinstall] Checking if tsconfig.json is up to date...')
+  if (!shouldGenerateTSConfig()) {
+    console.log('✅ [sui-bundler postinstall] tsconfig.json is up to date')
+    process.exit(0)
+  }
+  await writeFile(TS_CONFIG_PATH, tsConfigTemplate)
+  console.log('❌ [sui-bundler postinstall] tsconfig.json was not up to date, so we updated it')
+}
+
+main()

packages/sui-bundler/shared/define.js

@@ -6,10 +6,20 @@ if (process.platform === 'win32') {
   process.env.PWD = process.cwd()
 }
 
+const {MAGIC_STRINGS = '{}'} = process.env
+
+let magic
+try {
+  magic = JSON.parse(MAGIC_STRINGS)
+} catch (err) {
+  magic = {}
+}
+
 module.exports = (vars = {}) =>
   new webpack.DefinePlugin({
-    __MOCKS_API_PATH__: JSON.stringify(process.env.MOCKS_API_PATH || process.env.PWD + '/mocks/routes'),
     __DEV__: false,
     __BASE_DIR__: JSON.stringify(process.env.PWD),
-    ...vars
+    __MOCKS_API_PATH__: JSON.stringify(process.env.MOCKS_API_PATH || process.env.PWD + '/mocks/routes'),
+    ...vars,
+    ...Object.fromEntries(Object.entries(magic).map(([key, value]) => [key, JSON.stringify(value)]))
   })