-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Polaris sandbox implementation based on playroom.
- Loading branch information
1 parent
da094b9
commit 6030387
Showing
36 changed files
with
3,248 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,4 @@ dist | |
| node_modules | ||
| /polaris-react/build | ||
| /polaris-react/build-internal | ||
| /polaris.shopify.com/public/sandbox | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| diff --git a/node_modules/playroom/README.md b/node_modules/playroom/README.md | ||
| index 6c82bbe..f05b80b 100644 | ||
| --- a/node_modules/playroom/README.md | ||
| +++ b/node_modules/playroom/README.md | ||
| @@ -160,6 +160,12 @@ export { themeB } from './themeB'; | ||
| // etc... | ||
| ``` | ||
|
|
||
| +## Additional Code Transformations | ||
| + | ||
| +A hook into the internal processing of code is available via the `processCode` option, which is a path to a file that exports a function that receives the code as entered into the editor, and returns the new code to be rendered. | ||
| + | ||
| +One example is [wrapping code in an IIFE for state support](https://github.com/seek-oss/playroom/issues/66). | ||
| + | ||
| ## TypeScript Support | ||
|
|
||
| If a `tsconfig.json` file is present in your project, static prop types are parsed using [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) to provide better autocompletion in the Playroom editor. | ||
| diff --git a/node_modules/playroom/lib/defaultModules/processCode.js b/node_modules/playroom/lib/defaultModules/processCode.js | ||
| new file mode 100644 | ||
| index 0000000..36a436c | ||
| --- /dev/null | ||
| +++ b/node_modules/playroom/lib/defaultModules/processCode.js | ||
| @@ -0,0 +1 @@ | ||
| +export default code => code; | ||
| diff --git a/node_modules/playroom/lib/makeWebpackConfig.js b/node_modules/playroom/lib/makeWebpackConfig.js | ||
| index 56defa7..1e7cf3b 100644 | ||
| --- a/node_modules/playroom/lib/makeWebpackConfig.js | ||
| +++ b/node_modules/playroom/lib/makeWebpackConfig.js | ||
| @@ -54,6 +54,9 @@ module.exports = async (playroomConfig, options) => { | ||
| __PLAYROOM_ALIAS__USE_SCOPE__: playroomConfig.scope | ||
| ? relativeResolve(playroomConfig.scope) | ||
| : require.resolve('./defaultModules/useScope'), | ||
| + __PLAYROOM_ALIAS__PROCESS_CODE__: playroomConfig.processCode | ||
| + ? relativeResolve(playroomConfig.processCode) | ||
| + : require.resolve('./defaultModules/processCode'), | ||
| }, | ||
| }, | ||
| module: { | ||
| diff --git a/node_modules/playroom/src/utils/compileJsx.ts b/node_modules/playroom/src/utils/compileJsx.ts | ||
| index dadea77..82d080c 100644 | ||
| --- a/node_modules/playroom/src/utils/compileJsx.ts | ||
| +++ b/node_modules/playroom/src/utils/compileJsx.ts | ||
| @@ -1,9 +1,18 @@ | ||
| import { transform } from '@babel/standalone'; | ||
| +/* eslint-disable-next-line import/no-unresolved */ | ||
| +import processCode from '__PLAYROOM_ALIAS__PROCESS_CODE__'; | ||
|
|
||
| -export const compileJsx = (code: string) => | ||
| - transform(`<React.Fragment>${code.trim() || ''}</React.Fragment>`, { | ||
| +export const compileJsx = (code: string) => { | ||
| + const processedCode = processCode(code); | ||
| + | ||
| + if (typeof processedCode !== 'string') { | ||
| + throw new Error('processCode function must return a string of code.'); | ||
| + } | ||
| + | ||
| + return transform(`<React.Fragment>${processedCode.trim()}</React.Fragment>`, { | ||
| presets: ['react'], | ||
| }).code; | ||
| +} | ||
|
|
||
| export const validateCode = (code: string) => { | ||
| try { | ||
| diff --git a/node_modules/playroom/src/utils/formatting.ts b/node_modules/playroom/src/utils/formatting.ts | ||
| index a1819bf..70ac15c 100644 | ||
| --- a/node_modules/playroom/src/utils/formatting.ts | ||
| +++ b/node_modules/playroom/src/utils/formatting.ts | ||
| @@ -133,10 +133,10 @@ export const formatAndInsert = ({ | ||
| snippet, | ||
| }); | ||
|
|
||
| - return formatCode({ | ||
| + return { | ||
| code: newCode, | ||
| cursor: updatedCursor, | ||
| - }); | ||
| + }; | ||
| }; | ||
|
|
||
| export const formatForInsertion = ({ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| module.exports = { | ||
| root: true, | ||
| extends: ['next/core-web-vitals'], | ||
| ignorePatterns: ['public/sandbox'], | ||
| rules: {}, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| // Not a TS file because our playroom.config.js needs to access it also, and can't understand ts imports. | ||
| module.exports = { | ||
| playroom: { | ||
| baseUrl: '/playroom/', | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import SandboxHeader from '../src/components/SandboxHeader'; | ||
| import useDarkMode from 'use-dark-mode'; | ||
| import {useEffect, useRef} from 'react'; | ||
| import {useRouter} from 'next/router'; | ||
| import type {InferGetServerSidePropsType, GetServerSideProps} from 'next'; | ||
|
|
||
| export const getServerSideProps: GetServerSideProps = async ({query}) => { | ||
| // We need to pass initial query param to our nested iframe | ||
| const initialSearchParams = new URLSearchParams( | ||
| query as Record<string, string>, | ||
| ).toString(); | ||
| return { | ||
| props: { | ||
| initialSearchParams: `?${initialSearchParams}`, | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| export default function Sandbox({ | ||
| initialSearchParams, | ||
| }: InferGetServerSidePropsType<typeof getServerSideProps>) { | ||
| const darkMode = useDarkMode(false); | ||
| const iframeRef = useRef<HTMLIFrameElement>(null); | ||
| const router = useRouter(); | ||
| const searchValue = useRef(''); | ||
|
|
||
| useEffect(() => { | ||
| /** | ||
| * We want to mirror the iframes url in the parent (aka browser) to support URL sharing. | ||
| * the iframes onload handler isn't invoked when the iframes url changes so we're polling here instead. | ||
| */ | ||
| const iframeUrlPoll = setInterval(() => { | ||
| if ( | ||
| iframeRef?.current?.contentWindow && | ||
| iframeRef.current.contentWindow.location.search !== searchValue.current | ||
| ) { | ||
| searchValue.current = iframeRef.current.contentWindow.location.search; | ||
| const iframeQueryObj = Object.fromEntries( | ||
| new URLSearchParams(searchValue.current), | ||
| ); | ||
|
|
||
| router.replace( | ||
| { | ||
| query: iframeQueryObj, | ||
| }, | ||
| undefined, | ||
| { | ||
| shallow: true, | ||
| }, | ||
| ); | ||
| } | ||
| }, 200); | ||
| return () => clearInterval(iframeUrlPoll); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div | ||
| className="styles-for-site-but-not-polaris-examples" | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| width: '100%', | ||
| height: '100vh', | ||
| margin: 0, | ||
| padding: 0, | ||
| }} | ||
| > | ||
| <SandboxHeader | ||
| darkMode={darkMode} | ||
| url={typeof window !== 'undefined' ? window.location.href : ''} | ||
| /> | ||
| <iframe | ||
| id="main" | ||
| ref={iframeRef} | ||
| style={{ | ||
| border: 0, | ||
| padding: 0, | ||
| margin: 0, | ||
| }} | ||
| src={`/playroom${initialSearchParams}`} | ||
| width="100%" | ||
| height="100%" | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.