chore: make the @packages/scaffold-config an independent bundle without needed ts-node to register entrypoint. Both ESM and CJS distributions are built and types are used as source to be compatible with older styles of commonjs bundling. Types are not shipped with the package.

Author: AtofStryker

guides/esm-migration.md

@@ -10,6 +10,10 @@
 - Unit tests in package are written in TypeScript
 - Does not include scripts or system test migrations
 
+#### Notes
+
+When migrating some of these projects away from the `ts-node` entry [see `@packages/scaffold-config` example](https://github.com/cypress-io/cypress/blob/v15.2.0/packages/scaffold-config/index.js), it is somewhat difficult to make separate browser/node entries as the v8-snapshot [tsconfig.json](https://github.com/cypress-io/cypress/blob/v15.2.0/tooling/v8-snapshot/tsconfig.json) is using an older style of module resolution where the `exports` key inside a package's `package.json` is not well supported. Because of this, we need to find ways to bundle code that is needed internally in the browser vs in node without them being a part of the same bundle. This is a temporary work around until we are able to get every package being able to build as an ES Module, which as that point we can re assess how the Cypress binary is being built as well as v8-snapshots, and will allow us to reconfigure this packages to export content in a more proper fashion.
+
 #### Status
 
 ##### NPM Packages
@@ -58,7 +62,7 @@
 - [ ] packages/rewriter **PARTIAL** - entry point is JS
 - [ ] packages/root
 - [x] packages/runner ✅ **COMPLETED**
-- [ ] packages/scaffold-config **PARTIAL** - entry point is JS
+- [x] packages/scaffold-config ✅ **COMPLETED**
 - [ ] packages/server **PARTIAL** - many source/test files in JS. highest priority
 - [ ] packages/socket **PARTIAL** - entry point is JS. Tests are JS
 - [x] packages/stderr-filtering ✅ **COMPLETED**

packages/data-context/src/actions/WizardActions.ts

@@ -1,5 +1,5 @@
 import type { NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
-import { detectFramework, commandsFileBody, supportFileComponent, supportFileE2E, getBundler, CT_FRAMEWORKS, resolveComponentFrameworkDefinition, detectThirdPartyCTFrameworks } from '@packages/scaffold-config'
+import { detectFramework, commandsFileBody, supportFileComponent, supportFileE2E, getBundler, CT_FRAMEWORKS, resolveComponentFrameworkDefinition, detectThirdPartyCTFrameworks, componentIndexHtmlGenerator } from '@packages/scaffold-config'
 import assert from 'assert'
 import path from 'path'
 import Debug from 'debug'
@@ -9,7 +9,6 @@ const debug = Debug('cypress:data-context:wizard-actions')
 
 import type { DataContext } from '..'
 import { addTestingTypeToCypressConfig, AddTestingTypeToCypressConfigOptions } from '@packages/config'
-import componentIndexHtmlGenerator from '@packages/scaffold-config/src/component-index-template'
 
 export class WizardActions {
   constructor (private ctx: DataContext) {}

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Wizard.ts

@@ -1,7 +1,7 @@
 import type { Wizard, WizardBundler } from '../generated/test-graphql-types.gen'
-import * as wizardDeps from '@packages/scaffold-config/src/dependencies'
 import type { MaybeResolver } from './clientTestUtils'
 import { testNodeId } from './clientTestUtils'
+import { WIZARD_DEPENDENCY_REACT, WIZARD_DEPENDENCY_REACT_DOM, WIZARD_DEPENDENCY_TYPESCRIPT } from '@packages/scaffold-config/browser/dependencies'
 
 const testBundlerVite = {
   type: 'vite',
@@ -34,28 +34,28 @@ const testFrameworks = [
 
 export const stubWizard: MaybeResolver<Wizard> = {
   __typename: 'Wizard',
-  installDependenciesCommand: `npm install -D ${wizardDeps.WIZARD_DEPENDENCY_REACT.package} ${wizardDeps.WIZARD_DEPENDENCY_REACT_DOM.package} ${wizardDeps.WIZARD_DEPENDENCY_TYPESCRIPT.package}`,
+  installDependenciesCommand: `npm install -D ${WIZARD_DEPENDENCY_REACT.package} ${WIZARD_DEPENDENCY_REACT_DOM.package} ${WIZARD_DEPENDENCY_TYPESCRIPT.package}`,
   packagesToInstall: [
     {
       __typename: 'WizardNpmPackage',
       id: 'react',
       satisfied: true,
       detectedVersion: '18.3.1',
-      ...wizardDeps.WIZARD_DEPENDENCY_REACT,
+      ...WIZARD_DEPENDENCY_REACT,
     },
     {
       __typename: 'WizardNpmPackage',
       id: 'react-dom',
       satisfied: true,
       detectedVersion: '18.3.1',
-      ...wizardDeps.WIZARD_DEPENDENCY_REACT_DOM,
+      ...WIZARD_DEPENDENCY_REACT_DOM,
     },
     {
       __typename: 'WizardNpmPackage',
       id: 'typescript',
       satisfied: false,
       detectedVersion: '3.9.4',
-      ...wizardDeps.WIZARD_DEPENDENCY_TYPESCRIPT,
+      ...WIZARD_DEPENDENCY_TYPESCRIPT,
     },
   ],
   allBundlers,

packages/launchpad/src/setup/InstallDependencies.cy.tsx

@@ -2,7 +2,7 @@
 import { defaultMessages } from '@cy/i18n'
 import InstallDependencies from './InstallDependencies.vue'
 import { InstallDependenciesFragmentDoc } from '../generated/graphql-test'
-import * as wizardDeps from '@packages/scaffold-config/src/dependencies'
+import { WIZARD_DEPENDENCY_REACT, WIZARD_DEPENDENCY_REACT_DOM, WIZARD_DEPENDENCY_TYPESCRIPT } from '@packages/scaffold-config/browser/dependencies'
 
 describe('<InstallDependencies />', () => {
   beforeEach(function () {
@@ -73,21 +73,21 @@ describe('<InstallDependencies />', () => {
             id: 'react',
             satisfied: true,
             detectedVersion: '18.3.1',
-            ...wizardDeps.WIZARD_DEPENDENCY_REACT,
+            ...WIZARD_DEPENDENCY_REACT,
           },
           {
             __typename: 'WizardNpmPackage',
             id: 'react-dom',
             satisfied: true,
             detectedVersion: '18.3.1',
-            ...wizardDeps.WIZARD_DEPENDENCY_REACT_DOM,
+            ...WIZARD_DEPENDENCY_REACT_DOM,
           },
           {
             __typename: 'WizardNpmPackage',
             id: 'typescript',
             satisfied: true,
             detectedVersion: '2.0.1',
-            ...wizardDeps.WIZARD_DEPENDENCY_TYPESCRIPT,
+            ...WIZARD_DEPENDENCY_TYPESCRIPT,
           },
         ]
 

packages/launchpad/src/setup/ManualInstall.cy.tsx

@@ -1,10 +1,10 @@
 import sinon from 'sinon'
 import { ManualInstallFragmentDoc } from '../generated/graphql-test'
 import ManualInstall from './ManualInstall.vue'
-import * as deps from '@packages/scaffold-config/src/dependencies'
 // tslint:disable-next-line: no-implicit-dependencies - need to handle this
 import { defaultMessages } from '@cy/i18n'
 import { Clipboard_CopyToClipboardDocument } from '../generated/graphql'
+import { WIZARD_DEPENDENCY_REACT, WIZARD_DEPENDENCY_TYPESCRIPT } from '@packages/scaffold-config/browser/dependencies'
 
 describe('<ManualInstall />', () => {
   it('playground', () => {
@@ -18,8 +18,8 @@ describe('<ManualInstall />', () => {
   })
 
   it('lists packages and can copy install command to clipboard', { viewportWidth: 800, viewportHeight: 600 }, () => {
-    const framework = deps.WIZARD_DEPENDENCY_REACT
-    const language = deps.WIZARD_DEPENDENCY_TYPESCRIPT
+    const framework = WIZARD_DEPENDENCY_REACT
+    const language = WIZARD_DEPENDENCY_TYPESCRIPT
 
     const stubCopy = sinon.stub()
 

packages/scaffold-config/.gitignore

@@ -1 +1,3 @@
-src/**/*.js
+cjs/
+esm/
+browser/

packages/scaffold-config/README.md

@@ -29,3 +29,7 @@ The process for adding a new library/framework/bundler is as follows:
 3. Add a new project with the correct `cypress.config.js` and `package.json` to [system-tests/projects](../../system-tests/projects). It should be `<name>-configured`, which is a working example with some specs. Ensure it will run on CI by adding it to [`component_testing_spec.ts`](../../system-tests/test/component_testing_spec.ts).
 4. Add another project called `<name>-unconfigured`, which represents the project prior to having Cypress added. This will be used in step 5.
 5. Add a test to [`scaffold-component-testing.cy.ts`](../launchpad/cypress/e2e/scaffold-component-testing.cy.ts) to ensure your project has the correct `cypress.config.js` generated. Use an existing test as a template.
+
+### Internal testing
+
+`@packages/config/browser/dependencies` is NOT used in the production binary and therefore doesn't need to be included when the package bundles.

packages/scaffold-config/index.js

@@ -2,12 +2,15 @@
   "name": "@packages/scaffold-config",
   "version": "0.0.0-development",
   "description": "Logic related to scaffolding new projects using launchpad",
-  "main": "index.js",
-  "browser": "src/index.ts",
+  "main": "cjs/index.js",
   "scripts": {
-    "build-prod": "tsc || echo 'built, with errors'",
-    "check-ts": "tsc --noEmit && yarn -s tslint",
-    "clean": "rimraf --glob './src/*.js' './src/**/*.js' './src/**/**/*.js' './test/**/*.js' || echo 'cleaned'",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:browser",
+    "build-prod": "yarn build",
+    "build:browser": "rimraf browser && tsc -p tsconfig.browser.json",
+    "build:cjs": "rimraf cjs && tsc -p tsconfig.cjs.json",
+    "build:esm": "rimraf esm && tsc -p tsconfig.esm.json",
+    "check-ts": "tsc -p tsconfig.cjs.json --noEmit && yarn -s tslint -p tsconfig.cjs.json",
+    "clean": "rimraf esm cjs",
     "clean-deps": "rimraf node_modules",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
     "test": "yarn test-unit",
@@ -29,11 +32,14 @@
     "@packages/ts": "0.0.0-development",
     "@packages/types": "0.0.0-development",
     "chai": "4.2.0",
-    "mocha": "7.0.1"
+    "mocha": "7.0.1",
+    "rimraf": "^6.0.1"
   },
   "files": [
-    "src"
+    "cjs/*",
+    "esm/*"
   ],
   "types": "src/index.ts",
+  "module": "esm/index.js",
   "nx": {}
 }

packages/scaffold-config/package.json

@@ -1,6 +1,6 @@
 import dedent from 'dedent'
 
-const componentIndexHtmlGenerator = (headModifier: string = '') => {
+export const componentIndexHtmlGenerator = (headModifier: string = '') => {
   return () => {
     const template = dedent`
     <!DOCTYPE html>
@@ -23,5 +23,3 @@ const componentIndexHtmlGenerator = (headModifier: string = '') => {
     return template.replace(/\n {4}\n/g, '\n')
   }
 }
-
-export default componentIndexHtmlGenerator