From ad9be11840a41ddf764c64cd949af84e35de1b05 Mon Sep 17 00:00:00 2001
From: Remus Mate <rmate@seek.com.au>
Date: Mon, 10 Jul 2023 10:52:36 +1000
Subject: [PATCH] add a TypeScript fixture

---
 cypress/e2e/smoke.cy.js                       |  8 +++++
 cypress/e2e/snippets.cy.js                    |  4 +--
 cypress/placeholder.ts                        |  1 -
 cypress/projects/basic/snippets.js            |  5 +++
 cypress/projects/typescript/components.ts     |  2 ++
 .../projects/typescript/components/Bar.tsx    | 13 ++++++++
 .../projects/typescript/components/Foo.tsx    | 13 ++++++++
 .../projects/typescript/components/styles.ts  |  4 +++
 .../projects/typescript/playroom.config.js    | 31 +++++++++++++++++++
 cypress/projects/typescript/snippets.ts       | 22 +++++++++++++
 cypress/projects/typescript/tsconfig.json     | 18 +++++++++++
 package.json                                  | 13 +++++---
 12 files changed, 126 insertions(+), 8 deletions(-)
 delete mode 100644 cypress/placeholder.ts
 create mode 100644 cypress/projects/typescript/components.ts
 create mode 100644 cypress/projects/typescript/components/Bar.tsx
 create mode 100644 cypress/projects/typescript/components/Foo.tsx
 create mode 100644 cypress/projects/typescript/components/styles.ts
 create mode 100644 cypress/projects/typescript/playroom.config.js
 create mode 100644 cypress/projects/typescript/snippets.ts
 create mode 100644 cypress/projects/typescript/tsconfig.json

diff --git a/cypress/e2e/smoke.cy.js b/cypress/e2e/smoke.cy.js
index 5a1581bd..f9ff3572 100644
--- a/cypress/e2e/smoke.cy.js
+++ b/cypress/e2e/smoke.cy.js
@@ -17,4 +17,12 @@ describe('Smoke', () => {
 
     assertPreviewContains('Foo\nFoo\nBar');
   });
+
+  it('preview mode works with TypeScript components', () => {
+    cy.visit(
+      'http://localhost:9002/preview#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
+    );
+
+    assertPreviewContains('Foo\nFoo\nBar');
+  });
 });
diff --git a/cypress/e2e/snippets.cy.js b/cypress/e2e/snippets.cy.js
index c2227745..d76d8f8f 100644
--- a/cypress/e2e/snippets.cy.js
+++ b/cypress/e2e/snippets.cy.js
@@ -27,7 +27,7 @@ describe('Snippets', () => {
     assertCodePaneLineCount(8);
 
     // Browse snippetlist
-    assertSnippetCount(4);
+    assertSnippetCount(5);
     mouseOverSnippet(0);
     assertFirstFrameContains('Initial code\nFoo\nFoo');
     mouseOverSnippet(1);
@@ -78,7 +78,7 @@ describe('Snippets', () => {
     assertCodePaneLineCount(8);
 
     // Browse snippetlist
-    assertSnippetCount(4);
+    assertSnippetCount(5);
     filterSnippets('{downarrow}');
     assertFirstFrameContains('Initial code\nFoo\nFoo');
     filterSnippets('{downarrow}');
diff --git a/cypress/placeholder.ts b/cypress/placeholder.ts
deleted file mode 100644
index a19773d9..00000000
--- a/cypress/placeholder.ts
+++ /dev/null
@@ -1 +0,0 @@
-// This is a placeholder file that provides for at least one TypeScript file in the project
diff --git a/cypress/projects/basic/snippets.js b/cypress/projects/basic/snippets.js
index 51dcb7ab..10f82d7e 100644
--- a/cypress/projects/basic/snippets.js
+++ b/cypress/projects/basic/snippets.js
@@ -19,4 +19,9 @@ export default [
     name: 'Blue',
     code: '<Bar color="blue">Blue Bar</Bar>',
   },
+  {
+    group: 'Scope',
+    name: 'hello world',
+    code: '<Foo>{hello()} {world()}</Foo>',
+  },
 ];
diff --git a/cypress/projects/typescript/components.ts b/cypress/projects/typescript/components.ts
new file mode 100644
index 00000000..b113ca2a
--- /dev/null
+++ b/cypress/projects/typescript/components.ts
@@ -0,0 +1,2 @@
+export { Foo } from './components/Foo';
+export { Bar } from './components/Bar';
diff --git a/cypress/projects/typescript/components/Bar.tsx b/cypress/projects/typescript/components/Bar.tsx
new file mode 100644
index 00000000..bcfc62ea
--- /dev/null
+++ b/cypress/projects/typescript/components/Bar.tsx
@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue';
+  children: React.ReactNode;
+};
+
+export const Bar: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Bar{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);
diff --git a/cypress/projects/typescript/components/Foo.tsx b/cypress/projects/typescript/components/Foo.tsx
new file mode 100644
index 00000000..e6f2b4ea
--- /dev/null
+++ b/cypress/projects/typescript/components/Foo.tsx
@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue';
+  children: React.ReactNode;
+};
+
+export const Foo: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Foo{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);
diff --git a/cypress/projects/typescript/components/styles.ts b/cypress/projects/typescript/components/styles.ts
new file mode 100644
index 00000000..a8066f4b
--- /dev/null
+++ b/cypress/projects/typescript/components/styles.ts
@@ -0,0 +1,4 @@
+export const parent = {
+  border: '4px solid currentColor',
+  padding: '10px 10px 10px 15px',
+};
diff --git a/cypress/projects/typescript/playroom.config.js b/cypress/projects/typescript/playroom.config.js
new file mode 100644
index 00000000..2751d80c
--- /dev/null
+++ b/cypress/projects/typescript/playroom.config.js
@@ -0,0 +1,31 @@
+module.exports = {
+  components: './components.ts',
+  snippets: './snippets.ts',
+  outputPath: './dist',
+  openBrowser: false,
+  storageKey: 'playroom-example-typescript',
+  webpackConfig: () => ({
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: {
+                presets: [
+                  require.resolve('@babel/preset-env'),
+                  [
+                    require.resolve('@babel/preset-react'),
+                    { runtime: 'automatic' },
+                  ],
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+  }),
+};
diff --git a/cypress/projects/typescript/snippets.ts b/cypress/projects/typescript/snippets.ts
new file mode 100644
index 00000000..51dcb7ab
--- /dev/null
+++ b/cypress/projects/typescript/snippets.ts
@@ -0,0 +1,22 @@
+export default [
+  {
+    group: 'Foo',
+    name: 'Default',
+    code: '<Foo>Foo</Foo>',
+  },
+  {
+    group: 'Foo',
+    name: 'Red',
+    code: '<Foo color="red">Red Foo</Foo>',
+  },
+  {
+    group: 'Bar',
+    name: 'Default',
+    code: '<Bar>Bar</Bar>',
+  },
+  {
+    group: 'Bar',
+    name: 'Blue',
+    code: '<Bar color="blue">Blue Bar</Bar>',
+  },
+];
diff --git a/cypress/projects/typescript/tsconfig.json b/cypress/projects/typescript/tsconfig.json
new file mode 100644
index 00000000..a3d52d4e
--- /dev/null
+++ b/cypress/projects/typescript/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "module": "es2022",
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "es2022"],
+    "target": "es2022"
+  }
+}
diff --git a/package.json b/package.json
index 4c60da74..fa7e5e18 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
     "playroom": "bin/cli.js"
   },
   "scripts": {
-    "cypress": "start-server-and-test build-and-serve:all '9000|9001' 'cypress run'",
-    "cypress:dev": "start-server-and-test start:all '9000|9001' 'cypress open --browser chrome --e2e'",
+    "cypress": "start-server-and-test build-and-serve:all '9000|9001|9002' 'cypress run'",
+    "cypress:dev": "start-server-and-test start:all '9000|9001|9002' 'cypress open --browser chrome --e2e'",
     "cypress:verify": "cypress verify",
     "start:basic": "./bin/cli.js start --config cypress/projects/basic/playroom.config.js",
     "build:basic": "./bin/cli.js build --config cypress/projects/basic/playroom.config.js",
@@ -17,9 +17,12 @@
     "start:themed": "./bin/cli.js start --config cypress/projects/themed/playroom.config.js",
     "build:themed": "./bin/cli.js build --config cypress/projects/themed/playroom.config.js",
     "serve:themed": "PORT=9001 serve --config ../serve.json --no-request-logging cypress/projects/themed/dist",
-    "start:all": "concurrently 'npm:start:basic' 'npm:start:themed'",
-    "build:all": "concurrently 'npm:build:basic' 'npm:build:themed'",
-    "serve:all": "concurrently 'npm:serve:basic' 'npm:serve:themed'",
+    "start:typescript": "./bin/cli.js start --config cypress/projects/typescript/playroom.config.js",
+    "build:typescript": "./bin/cli.js build --config cypress/projects/typescript/playroom.config.js",
+    "serve:typescript": "PORT=9002 serve --no-request-logging cypress/projects/typescript/dist",
+    "start:all": "concurrently 'npm:start:*(!all)'",
+    "build:all": "concurrently 'npm:build:*(!all)'",
+    "serve:all": "concurrently 'npm:serve:*(!all)'",
     "build-and-serve:all": "pnpm build:all && pnpm serve:all",
     "lint": "concurrently 'npm:lint:*'",
     "lint:eslint": "eslint --cache .",