fix: ssr playground error (#56)

kmartinezmedia · May 21, 2024 · b889206 · b889206
1 parent 13464ad
commit b889206
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/apps/web-demo/src/app/converter/_preview.tsx b/apps/web-demo/src/app/converter/_preview.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as components from 'katcn';
+import { getStyles } from 'katcn/getStyles';
 import * as React from 'react';
 
 const componentNames = Object.keys(components).join(', ');
@@ -9,6 +10,7 @@ export function Preview({ code }: { code: string }) {
   const fnString = new Function(`
   return function ({
     React,
+    getStyles,
     ${componentNames}
   }) {
     ${code}
@@ -18,6 +20,7 @@ export function Preview({ code }: { code: string }) {
 
   const Comp = fnString({
     React,
+    getStyles,
     ...components,
   });
 

diff --git a/apps/web-demo/src/app/playground/[id]/preview/page.tsx b/apps/web-demo/src/app/playground/[id]/preview/page.tsx
@@ -1,29 +1,24 @@
 'use client';
 
 import { PlaygroundDataContext } from '@/lib/context';
-import {
-  Avatar,
-  Box,
-  HStack,
-  Icon,
-  Image,
-  Pressable,
-  Text,
-  TextInput,
-  VStack,
-} from 'katcn';
+import * as components from 'katcn';
 import { getStyles } from 'katcn/getStyles';
 import { useContext } from 'react';
+import * as React from 'react';
 import { jsxDEV } from 'react/jsx-dev-runtime';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const componentNames = Object.keys(components).join(', ');
 
 export default function Page() {
   const { css, js } = useContext(PlaygroundDataContext);
+
   if (!css || !js) {
     return null;
   }
+
   const fnString = new Function(`
-      function renderComp({ jsx, jsxDEV, getStyles, Box, HStack, VStack, Icon, Image, Pressable, Text, TextInput, Avatar }) {
+      function renderComp({ jsx, jsxDEV, jsxs, React, getStyles, ${componentNames} }) {
         ${js}
         return Example;
       }
@@ -33,17 +28,12 @@ export default function Page() {
   const Comp = fnString({
     jsx,
     jsxDEV,
+    jsxs,
+    React,
     getStyles,
-    Box,
-    HStack,
-    VStack,
-    Icon,
-    Image,
-    Pressable,
-    Text,
-    TextInput,
-    Avatar,
+    ...components,
   });
+
   return (
     <div>
       <style>{css}</style>

diff --git a/apps/web-demo/src/ui/slider.tsx b/apps/web-demo/src/ui/slider.tsx
@@ -271,7 +271,6 @@ function HueShade({
         .getPropertyValue('background-color');
 
       const oklchMatch = oklchRegex.exec(oklchString);
-      console.log('oklchMatch', oklchMatch);
       if (oklchMatch) {
         const lightness = Number.parseFloat(oklchMatch[1]);
         const chroma = Number.parseFloat(oklchMatch[2]);