Skip to content

Commit

Permalink
feat(theme): provide bare components (#590)
Browse files Browse the repository at this point in the history
danilowoz authored Oct 6, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent d4d3b07 commit 158fd8c
Showing 6 changed files with 52 additions and 35 deletions.
38 changes: 6 additions & 32 deletions sandpack-react/src/Issues.stories.tsx
Original file line number Diff line number Diff line change
@@ -13,39 +13,13 @@ export default {
title: "Bug reports/Issues",
};

export const PackageJsonDep = (): JSX.Element => {
export const FlushServerVsClient = (): JSX.Element => {
return (
<Sandpack
files={{
"/App.js": {
code: `export default function App() {
return <h1>Hello World</h1>
}
`,
},
"/index.js": {
code: `import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);`,
},
"/package.json": JSON.stringify({
main: "/index.js",
dependencies: {
react: "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^4.0.0",
},
}),
}}
/>
<SandpackProvider>
<div style={{ border: "1px solid black" }}>
<SandpackCodeEditor />
</div>
</SandpackProvider>
);
};

Original file line number Diff line number Diff line change
@@ -531,6 +531,9 @@ Array [
>
&gt;
</span>,
"
",
]
`;
@@ -1590,6 +1593,9 @@ Array [
>
$EXAMPLE
</span>,
"
",
]
`;
10 changes: 10 additions & 0 deletions sandpack-react/src/components/CodeEditor/useSyntaxHighlight.ts
Original file line number Diff line number Diff line change
@@ -40,5 +40,15 @@ export const useSyntaxHighlight = ({
addElement(to, className);
});

/**
* The language parse doesn't look consistent.
* The final syntax highlight used by CodeMirror
* includes an end empty line, and the parse here doesn't,
* so let's add it manually.
*/
if (offSet < code.length) {
codeElementsRender.push("\n\n");
}

return codeElementsRender;
};
11 changes: 8 additions & 3 deletions sandpack-react/src/styles/index.ts
Original file line number Diff line number Diff line change
@@ -4,6 +4,8 @@ import { defaultLight, defaultDark, SANDPACK_THEMES } from "../themes";
import type { SandpackTheme, SandpackThemeProp } from "../types";
import { isDarkColor } from "../utils/stringUtils";

import { createStitchesMock } from "./stitches-mock";

/**
* @category Theme
*/
@@ -12,9 +14,12 @@ export const THEME_PREFIX = "sp";
/**
* @category Theme
*/
export const { createTheme, css, getCssText, keyframes } = createStitches({
prefix: THEME_PREFIX,
});
export const { createTheme, css, getCssText, keyframes } = process?.env
?.SANDPACK_BARE_COMPONENTS
? createStitchesMock
: createStitches({
prefix: THEME_PREFIX,
});

const defaultVariables = {
space: new Array(11).fill(" ").reduce((acc, _, index) => {
16 changes: 16 additions & 0 deletions sandpack-react/src/styles/stitches-mock.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type Stitches from "@stitches/core/types/stitches";

const toString = (): string => "";
const doubleToString = (): typeof toString => toString;

const defineProperty = Object.getOwnPropertyDescriptors({ toString });

Object.defineProperties(toString, defineProperty);
Object.defineProperties(doubleToString, defineProperty);

export const createStitchesMock = {
createTheme: toString,
css: doubleToString,
getCssText: toString,
keyframes: doubleToString,
} as unknown as Stitches;
6 changes: 6 additions & 0 deletions website/docs/docs/getting-started/custom-ui.md
Original file line number Diff line number Diff line change
@@ -37,6 +37,12 @@ While inspecting your Sandpack instance, notice that our components have classes
This pattern is compatible with most modern styling systems, including Tailwind, styled-components and emotion.
:::

## Bare components and remove runtime styling

Sandpack-React relies on [stitchesjs/stitches](https://github.com/stitchesjs/stitches) to style its component, which is almost zero-runtime CSS-in-JS framework. However, if you want to get rid of any runtime script or create your own style on top of Sandpack components, we provide a way to return bare components, which will eliminate all Sandpack CSS style.

To do it, you need to pass `SANDPACK_BARE_COMPONENTS` environment variable as `true`, which will remove the Stitches dependency, its execution and return only the HTML of the components.

## Visual Options

Some of the internal components of sandpack can be configured via the `options` prop.

0 comments on commit 158fd8c

Please sign in to comment.