Add a TypeScript fixture

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');
+  });
 });

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}');

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>',
+  },
 ];

cypress/projects/typescript/components.ts

@@ -0,0 +1,2 @@
+export { Foo } from './components/Foo';
+export { Bar } from './components/Bar';

cypress/projects/typescript/components/Bar.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue' | 'black';
+  children: React.ReactNode;
+};
+
+export const Bar: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Bar{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);

cypress/projects/typescript/components/Foo.tsx

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { parent } from './styles';
+
+type Props = {
+  color: 'red' | 'blue' | 'black';
+  children: React.ReactNode;
+};
+
+export const Foo: React.FC<Props> = ({ color = 'black', children }) => (
+  <div style={{ color }}>
+    Foo{children ? <div style={parent}>{children}</div> : null}
+  </div>
+);

cypress/projects/typescript/components/styles.ts

@@ -0,0 +1,4 @@
+export const parent = {
+  border: '4px solid currentColor',
+  padding: '10px 10px 10px 15px',
+};

cypress/projects/typescript/playroom.config.js

@@ -0,0 +1,33 @@
+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: {
+                babelrc: false,
+                presets: [
+                  require.resolve('@babel/preset-env'),
+                  [
+                    require.resolve('@babel/preset-react'),
+                    { runtime: 'automatic' },
+                  ],
+                  require.resolve('@babel/preset-typescript'),
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+  }),
+};

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>',
+  },
+];

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"
+  }
+}

package.json

@@ -8,18 +8,21 @@
     "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",
     "serve:basic": "PORT=9000 serve --no-request-logging cypress/projects/basic/dist",
     "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 .",