ci: Fix build script (#2985)

Fix canary and release builds that broke with TypeScript 5.0: cevek/ttypescript#140 Switched build compiler to `ts-patch` instead. [category:Infrastructure]
Workday · Oct 14, 2024 · c8e8caf · c8e8caf
1 parent c1e0252
commit c8e8caf
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 42 deletions.
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
@@ -24,8 +24,8 @@
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
-    "build:cjs": "ttsc -p tsconfig.cjs.json",
-    "build:es6": "ttsc -p tsconfig.es6.json",
+    "build:cjs": "tspc -p tsconfig.cjs.json",
+    "build:es6": "tspc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
     "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre labs-react",

diff --git a/modules/labs-react/tsconfig.json b/modules/labs-react/tsconfig.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "plugins": [
       {
-        "transform": "../styling-transform/lib/styleTransform.ts"
+        "transform": "../styling-transform"
       }
     ]
   }

diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
@@ -24,8 +24,8 @@
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
-    "build:cjs": "ttsc -p tsconfig.cjs.json",
-    "build:es6": "ttsc -p tsconfig.es6.json",
+    "build:cjs": "tspc -p tsconfig.cjs.json",
+    "build:es6": "tspc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
     "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre preview-react",

diff --git a/modules/preview-react/tsconfig.json b/modules/preview-react/tsconfig.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "plugins": [
       {
-        "transform": "../styling-transform/lib/styleTransform.ts"
+        "transform": "../styling-transform"
       }
     ]
   }

diff --git a/modules/react/package.json b/modules/react/package.json
@@ -24,8 +24,8 @@
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
-    "build:cjs": "ttsc -p tsconfig.cjs.json",
-    "build:es6": "ttsc -p tsconfig.es6.json",
+    "build:cjs": "tspc -p tsconfig.cjs.json",
+    "build:es6": "tspc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
     "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre react",

diff --git a/modules/react/tsconfig.json b/modules/react/tsconfig.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "plugins": [
       {
-        "transform": "../styling-transform/lib/styleTransform.ts"
+        "transform": "../styling-transform"
       }
     ]
   }

diff --git a/modules/styling-transform/index.ts → modules/styling-transform/index.d.ts b/modules/styling-transform/index.ts → modules/styling-transform/index.d.ts
@@ -1,5 +1,6 @@
 import styleTransformer from './lib/styleTransform';
-export {Config} from './lib/utils/types';
+import {type Config} from './lib/utils/types';
+export {type Config};
 export {parseNodeToStaticValue} from './lib/utils/parseNodeToStaticValue';
 export {parseObjectToStaticValue} from './lib/utils/parseObjectToStaticValue';
 export {createObjectTransform} from './lib/createObjectTransform';
@@ -8,5 +9,7 @@ export {styleTransformer};
 export {withDefaultContext} from './lib/styleTransform';
 export {getClassName} from './lib/utils/handleCreateStencil';
 
-// be compatible with ttypescript which expects a default export
+// be compatible with ts-patch which expects a default export
 export default styleTransformer;
+
+export function createConfig(config: Config): Config;
diff --git a/modules/styling-transform/index.js b/modules/styling-transform/index.js
@@ -0,0 +1,22 @@
+// allow transforms to use TypeScript without any additional configuration
+require('ts-node').register({
+  /* options */
+});
+
+const myExport = require('./lib/styleTransform');
+
+myExport.parseNodeToStaticValue =
+  require('./lib/utils/parseNodeToStaticValue').parseNodeToStaticValue;
+myExport.parseObjectToStaticValue =
+  require('./lib/utils/parseObjectToStaticValue').parseObjectToStaticValue;
+myExport.createObjectTransform = require('./lib/createObjectTransform').createObjectTransform;
+myExport.createPropertyTransform = require('./lib/createPropertyTransform').createPropertyTransform;
+myExport.withDefaultContext = require('./lib/styleTransform').withDefaultContext;
+myExport.getClassName = require('./lib/utils/handleCreateStencil').getClassName;
+myExport.styleTransformer = myExport;
+
+module.exports = myExport;
+
+myExport.createConfig = function createConfig(config) {
+  return config;
+};
diff --git a/modules/styling-transform/lib/styleTransform.ts b/modules/styling-transform/lib/styleTransform.ts
@@ -149,7 +149,7 @@ export function withDefaultContext(
 
 /**
  * This function is useful for tests or a custom build. The `styleTransformer` function is used by
- * the https://www.npmjs.com/package/ttypescript package.
+ * the https://www.npmjs.com/package/ts-patch package.
  */
 export function transform(
   program: ts.Program,

diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
@@ -4,10 +4,10 @@
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/es6/index.js",
+  "main": "index.js",
+  "module": "index.js",
   "sideEffects": false,
-  "types": "dist/es6/index.d.ts",
+  "types": "index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/workday/canvas-kit.git",
@@ -37,6 +37,7 @@
     "@workday/canvas-kit-styling": "^11.1.17",
     "@workday/canvas-tokens-web": "^2.0.1",
     "stylis": "4.0.13",
+    "ts-node": "^10.9.1",
     "typescript": "5.0"
   },
   "devDependencies": {

diff --git a/modules/styling/stories/mdx/GettingStarted.mdx b/modules/styling/stories/mdx/GettingStarted.mdx
@@ -54,13 +54,13 @@ package. Add the following to your project's `tsconfig.json` file:
 ```
 
 This adds a list of plugins to use when transforming TypeScript files into JavaScript files. The
-[ttypescript](https://www.npmjs.com/package/ttypescript) projects uses the `plugins` when running
+[ts-patch](https://www.npmjs.com/package/ts-patch) projects uses the `plugins` when running
 transforms.
 
 ### Webpack
 
-You will need to transform TypeScript files using the `ttypescript` (note the extra `t`) which is
-the same as the TypeScript tanspiler except it uses TypeScript's
+You will need to transform TypeScript files using the `ts-patch` which is the same as the TypeScript
+tanspiler except it uses TypeScript's
 [transform API](https://levelup.gitconnected.com/writing-a-custom-typescript-ast-transformer-731e2b0b66e6)
 to transform code during compilation.
 
@@ -77,7 +77,7 @@ In your webpack config, you add the following:
         {
           loader: require.resolve('ts-loader'),
           options: {
-            compiler: 'ttypescript',
+            compiler: 'ts-patch/compiler',
           },
         },
         // OR awesome-typescript-loader

diff --git a/package.json b/package.json
@@ -88,7 +88,7 @@
     "storybook": "7.6.17",
     "string-replace-loader": "^3.1.0",
     "ts-loader": "^9.5.1",
-    "ttypescript": "^1.5.15",
+    "ts-patch": "^3.2.1",
     "typescript": "5.0",
     "yargs": "^16.2.0"
   },

diff --git a/styling.config.ts b/styling.config.ts
@@ -1,8 +1,8 @@
-import {Config} from '@workday/canvas-kit-styling-transform';
+import {createConfig} from '@workday/canvas-kit-styling-transform';
 
 import {handleFocusRing} from './utils/style-transform/handleFocusRing';
 
-const config: Config = {
+const config = createConfig({
   prefix: 'cnvs',
   getPrefix(path) {
     const match = path.match(/.+modules\/(preview|labs)-react\/([^/]+)\/.+/);
@@ -27,6 +27,6 @@ const config: Config = {
     '@workday/canvas-tokens-web/css/system/_variables.css',
   ],
   objectTransforms: [handleFocusRing],
-};
+});
 
 export default config;
diff --git a/tsconfig.json b/tsconfig.json
@@ -22,7 +22,7 @@
     "skipLibCheck": true,
     "plugins": [
       {
-        "transform": "./modules/styling-transform/lib/styleTransform.ts"
+        "transform": "./modules/styling-transform"
       }
     ]
   },

diff --git a/yarn.lock b/yarn.lock
@@ -10059,6 +10059,15 @@ global-dirs@^3.0.0:
   dependencies:
     ini "2.0.0"
 
+global-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
+  dependencies:
+    ini "^1.3.5"
+    kind-of "^6.0.2"
+    which "^1.3.1"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -10538,6 +10547,11 @@ ini@^1.3.2, ini@^1.3.4:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
   integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
 
+ini@^1.3.5:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
 init-package-json@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/init-package-json/-/init-package-json-3.0.2.tgz#f5bc9bac93f2bdc005778bc2271be642fecfcd69"
@@ -14515,15 +14529,6 @@ resolve.exports@^2.0.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@>=1.9.0:
-  version "1.22.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
-  integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
-  dependencies:
-    is-core-module "^2.13.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.1, resolve@^1.15.1, resolve@^1.5.0, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
@@ -14548,7 +14553,7 @@ resolve@^1.20.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.22.1:
+resolve@^1.22.1, resolve@^1.22.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -15703,6 +15708,18 @@ ts-node@^10.9.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
+ts-patch@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ts-patch/-/ts-patch-3.2.1.tgz#0c1ecfcb6b6633bf23e533016ffda4d566518628"
+  integrity sha512-hlR43v+GUIUy8/ZGFP1DquEqPh7PFKQdDMTAmYt671kCCA6AkDQMoeFaFmZ7ObPLYOmpMgyKUqL1C+coFMf30w==
+  dependencies:
+    chalk "^4.1.2"
+    global-prefix "^3.0.0"
+    minimist "^1.2.8"
+    resolve "^1.22.2"
+    semver "^7.5.4"
+    strip-ansi "^6.0.1"
+
 tsconfig-paths@^4.1.2:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"
@@ -15749,13 +15766,6 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
-ttypescript@^1.5.15:
-  version "1.5.15"
-  resolved "https://registry.yarnpkg.com/ttypescript/-/ttypescript-1.5.15.tgz#e45550ad69289d06d3bc3fd4a3c87e7c1ef3eba7"
-  integrity sha512-48ykDNHzFnPMnv4hYX1P8Q84TvCZyL1QlFxeuxsuZ48X2+ameBgPenvmCkHJtoOSxpoWTWi8NcgNrRnVDOmfSg==
-  dependencies:
-    resolve ">=1.9.0"
-
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
@@ -16362,7 +16372,7 @@ which-typed-array@^1.1.14, which-typed-array@^1.1.2:
     gopd "^1.0.1"
     has-tostringtag "^1.0.2"
 
-which@^1.2.9:
+which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==