Migrate playroom internals to TypeScript

.changeset/strange-spies-train.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Migrate internals to Typescript. This moves all of the files under src/ to TypeScript.

cypress/tsconfig.json

@@ -4,6 +4,6 @@
     "isolatedModules": false,
     "types": ["cypress"]
   },
-  "include": ["**/*"], // override the include from the root tsconfig
+  "include": ["**/*", "../src/userDefinedModules.d.ts"], // override the include from the root tsconfig
   "exclude": [] // override the exclude from the root tsconfig
 }

lib/makeWebpackConfig.js

@@ -10,9 +10,12 @@ const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const playroomPath = path.resolve(__dirname, '..');
+
+// All of the paths containing files used internally by Playroom should be listed in this array
 const includePaths = [
   path.resolve(playroomPath, 'lib'),
   path.resolve(playroomPath, 'src'),
+  path.resolve(playroomPath, 'utils'),
 ];
 
 module.exports = async (playroomConfig, options) => {
@@ -40,9 +43,9 @@ module.exports = async (playroomConfig, options) => {
   const ourConfig = {
     mode: options.production ? 'production' : 'development',
     entry: {
-      index: [require.resolve('../src/index.js')],
-      frame: [require.resolve('../src/frame.js')],
-      preview: [require.resolve('../src/preview.js')],
+      index: [require.resolve('../src/index.tsx')],
+      frame: [require.resolve('../src/frame.tsx')],
+      preview: [require.resolve('../src/preview.tsx')],
     },
     output: {
       filename: '[name].[contenthash].js',

package.json

@@ -2,8 +2,8 @@
   "name": "playroom",
   "version": "0.34.1",
   "description": "Design with code, powered by your own component library",
-  "main": "utils/index.js",
-  "types": "utils/index.d.ts",
+  "main": "utils/index.ts",
+  "types": "utils/index.ts",
   "bin": {
     "playroom": "bin/cli.cjs"
   },
@@ -116,6 +116,7 @@
     "@changesets/cli": "^2.25.2",
     "@octokit/rest": "^19.0.5",
     "@types/jest": "^29.2.4",
+    "@types/webpack-env": "^1.18.4",
     "concurrently": "^7.6.0",
     "cypress": "^12.0.2",
     "eslint": "^8.44.0",

src/Playroom/CodeEditor/CodeMirror2.tsx

@@ -12,7 +12,7 @@
 
 /* eslint-disable */
 import * as React from 'react';
-import * as codemirror from 'codemirror';
+import codemirror from 'codemirror';
 
 declare let global: any;
 declare let require: any;
@@ -21,10 +21,7 @@ const SERVER_RENDERED =
   typeof navigator === 'undefined' ||
   (typeof global !== 'undefined' && global.PREVENT_CODEMIRROR_RENDER === true);
 
-let cm: typeof codemirror.default;
-if (!SERVER_RENDERED) {
-  cm = require('codemirror');
-}
+let cm = codemirror;
 
 export interface IDefineModeOptions {
   fn: () => codemirror.Mode<any>;

src/Playroom/Frame.tsx

@@ -1,19 +1,18 @@
-import type React from 'react';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { useParams } from '../utils/params';
 import CatchErrors from './CatchErrors/CatchErrors';
-// @ts-expect-error
 import RenderCode from './RenderCode/RenderCode';
 
 interface FrameProps {
   themes: Record<string, any>;
-  components: Array<any>;
-  FrameComponent: React.ComponentType<{
+  components: Record<string, ComponentType>;
+  FrameComponent: ComponentType<{
     themeName: string | null;
     theme: string;
     children?: ReactNode;
   }>;
 }
+
 export default function Frame({
   themes,
   components,

src/Playroom/Frames/frameSrc.ts

@@ -0,0 +1,17 @@
+import type { FrameSrcHandler } from '../../internalTypes';
+
+import frameConfig from '__PLAYROOM_ALIAS__FRAME_COMPONENT__';
+
+const defaultFrameSrc: FrameSrcHandler = (
+  { code, themeName },
+  { baseUrl, paramType }
+) =>
+  `${baseUrl}frame.html${
+    paramType === 'hash' ? '#' : ''
+  }?themeName=${encodeURIComponent(themeName)}&code=${encodeURIComponent(
+    code
+  )}`;
+
+export default (frameConfig.frameSrc
+  ? frameConfig.frameSrc
+  : defaultFrameSrc) as FrameSrcHandler;

src/Playroom/Preview.tsx

@@ -5,7 +5,6 @@ import { useParams } from '../utils/params';
 import { compileJsx } from '../utils/compileJsx';
 import SplashScreen from './SplashScreen/SplashScreen';
 import CatchErrors from './CatchErrors/CatchErrors';
-// @ts-expect-error
 import RenderCode from './RenderCode/RenderCode';
 
 import * as styles from './Preview.css';

src/Playroom/RenderCode/RenderCode.js → src/Playroom/RenderCode/RenderCode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentType } from 'react';
 import scopeEval from 'scope-eval';
 
 // eslint-disable-next-line import/no-unresolved
@@ -9,7 +9,13 @@ import {
   ReactFragmentPragma,
 } from '../../utils/compileJsx';
 
-export default function RenderCode({ code, scope }) {
+export default function RenderCode({
+  code,
+  scope,
+}: {
+  code: string | undefined;
+  scope: Record<string, ComponentType>;
+}) {
   const userScope = {
     ...(useScope() ?? {}),
     ...scope,

src/components.ts

@@ -0,0 +1,4 @@
+import * as components from '__PLAYROOM_ALIAS__COMPONENTS__';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+export default components as typeof import('__PLAYROOM_ALIAS__COMPONENTS__').default;

src/frame.tsx

@@ -0,0 +1,39 @@
+import { renderElement } from './render';
+import Frame from './Playroom/Frame';
+import { hmrAccept } from './utils/hmr';
+import playroomThemes from './themes';
+import playroomComponents from './components';
+import PlayroomFrameComponent from './frameComponent';
+
+const outlet = document.createElement('div');
+document.body.appendChild(outlet);
+
+const renderFrame = ({
+  themes = playroomThemes,
+  components = playroomComponents,
+  FrameComponent = PlayroomFrameComponent,
+} = {}) => {
+  renderElement(
+    <Frame
+      components={components}
+      themes={themes}
+      FrameComponent={FrameComponent}
+    />,
+    outlet
+  );
+};
+renderFrame();
+
+hmrAccept((accept) => {
+  accept('./components', () => {
+    renderFrame({ components: playroomComponents });
+  });
+
+  accept('./themes', () => {
+    renderFrame({ themes: playroomThemes });
+  });
+
+  accept('./frameComponent', () => {
+    renderFrame({ FrameComponent: PlayroomFrameComponent });
+  });
+});

src/frameComponent.ts

@@ -0,0 +1,3 @@
+import frameComponent from '__PLAYROOM_ALIAS__FRAME_COMPONENT__';
+
+export default frameComponent;

src/images.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: any;
+  export default value;
+}

src/index.js → src/index.tsx

@@ -4,6 +4,10 @@ import { StoreProvider } from './StoreContext/StoreContext';
 import playroomConfig from './config';
 import faviconPath from '../images/favicon.png';
 import faviconInvertedPath from '../images/favicon-inverted.png';
+import playroomThemes from './themes';
+import playroomComponents from './components';
+import playroomSnippets from './snippets';
+import { hmrAccept } from './utils/hmr';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -26,9 +30,9 @@ polyfillIntersectionObserver().then(() => {
   }
 
   const renderPlayroom = ({
-    themes = require('./themes'),
-    components = require('./components'),
-    snippets = require('./snippets'),
+    themes = playroomThemes,
+    components = playroomComponents,
+    snippets = playroomSnippets,
   } = {}) => {
     const themeNames = Object.keys(themes);
 
@@ -43,29 +47,25 @@ polyfillIntersectionObserver().then(() => {
           components={filteredComponents}
           widths={widths}
           themes={themeNames}
-          snippets={
-            typeof snippets.default !== 'undefined'
-              ? snippets.default
-              : snippets
-          }
+          snippets={snippets}
         />
       </StoreProvider>,
       outlet
     );
   };
   renderPlayroom();
 
-  if (module.hot) {
-    module.hot.accept('./components', () => {
-      renderPlayroom({ components: require('./components') });
+  hmrAccept((accept) => {
+    accept('./components', () => {
+      renderPlayroom({ components: playroomComponents });
     });
 
-    module.hot.accept('./themes', () => {
-      renderPlayroom({ themes: require('./themes') });
+    accept('./themes', () => {
+      renderPlayroom({ themes: playroomThemes });
     });
 
-    module.hot.accept('./snippets', () => {
-      renderPlayroom({ snippets: require('./snippets') });
+    accept('./snippets', () => {
+      renderPlayroom({ snippets: playroomSnippets });
     });
-  }
+  });
 });