Configure local development for playground

apps/docs/components/playground-utils/files.js

@@ -16,7 +16,7 @@ const jsxSyntaxPlugin = require('@babel/plugin-syntax-jsx');
 
 module.exports = {
   plugins: [
-    tsSyntaxPlugin,
+    [tsSyntaxPlugin, { isTSX: true }],
     jsxSyntaxPlugin,
     [
       "@stylexjs/babel-plugin",
@@ -64,8 +64,12 @@ module.exports = {
 import * as React from 'react';
 import * as stylex from "@stylexjs/stylex";
 
-export default function Card({ onClick, children, em = false }) {
-  const props = stylex.props(styles.base, em && styles.emphasise);
+export default function Card({ children, em = false, ...props }) {
+  return (
+    <div {...props} {...stylex.props(styles.base, em && styles.emphasise)}>
+      {children}
+    </div>
+  );
 }
 
 const styles = stylex.create({

apps/docs/package.json

@@ -10,7 +10,7 @@
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
+    "serve": "serve ./build -c ../serve.json",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "ci": "yarn lint && yarn format:diff",
@@ -44,6 +44,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "mkdirp": "^1.0.4",
     "prettier": "^2.7.1",
+    "serve": "^14.2.1",
     "stylelint": "^14.9.1"
   },
   "browserslist": {

apps/docs/serve.json

@@ -0,0 +1,21 @@
+{
+  "headers": [
+    {
+      "source": "**/**",
+      "headers": [
+        {
+          "key": "Cross-Origin-Embedder-Policy",
+          "value": "require-corp"
+        },
+        {
+          "key": "Cross-Origin-Opener-Policy",
+          "value": "same-origin"
+        },
+        {
+          "key": "Cross-Origin-Resource-Policy",
+          "value": "same-site"
+        }
+      ]
+    }
+  ]
+}