-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Embedding Repl for previews using UIDL (#74)
* Upgrading smooshpck to new package * Testing embedable version for preview * testing events * Some style changes for the embed preview * Updated yarn lock
- Loading branch information
1 parent
f06c2f8
commit 400077e
Showing
6 changed files
with
180 additions
and
111 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
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,43 @@ | ||
| import { useEffect, useState } from 'react' | ||
| import { SandpackFiles } from '@codesandbox/sandpack-react' | ||
| import { generate } from '../utils/helper' | ||
| import BrowserPreview from '../components/BrowserPreview' | ||
|
|
||
| const Embed = () => { | ||
| const [files, setFiles] = useState<SandpackFiles>({}) | ||
|
|
||
| const listener = async (event: MessageEvent) => { | ||
| const { data } = event | ||
| if (data?.type === 'teleport-render' && data?.uidl) { | ||
| const filesGenerated = await generate(data.uidl) | ||
| if (!filesGenerated) { | ||
| return | ||
| } | ||
| setFiles(filesGenerated) | ||
| } | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| if (!window) { | ||
| return | ||
| } | ||
|
|
||
| window.addEventListener('message', listener) | ||
| return () => window.removeEventListener('message', listener) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div className="preview"> | ||
| <BrowserPreview | ||
| options={{ files, displayFiles: false, theme: 'codesandbox-light' }} | ||
| /> | ||
| <style jsx>{` | ||
| .preview { | ||
| height: calc(100vh - 15px); | ||
| } | ||
| `}</style> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Embed |
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,58 @@ | ||
| import { GeneratedFolder } from '@teleporthq/teleport-types' | ||
| import { createReactProjectGenerator } from '@teleporthq/teleport-project-generator-react' | ||
| import { SandpackFiles } from '@codesandbox/sandpack-react' | ||
|
|
||
| /* Till this get's fixed. | ||
| Reference --> https://github.com/teleporthq/teleport-code-generators/issues/540 */ | ||
| export const fixPackageJSONForReact = (json: string) => { | ||
| const packageJSON = JSON.parse(json) | ||
| packageJSON.dependencies = { | ||
| ...packageJSON.dependencies, | ||
| ...{ | ||
| react: '^17.0.0', | ||
| 'react-dom': '^17.0.0', | ||
| 'react-scripts': '^4.0.0', | ||
| 'react-router-dom': '5.1.2', | ||
| }, | ||
| } | ||
| return packageJSON | ||
| } | ||
|
|
||
| export const generate = async (uidl: Record<string, unknown>) => { | ||
| try { | ||
| const generator = createReactProjectGenerator() | ||
| const { files: filesFromFolder, subFolders } = await generator.generateProject(uidl) | ||
| const packageJSON = filesFromFolder.find( | ||
| (file) => file.name === 'package' && file.fileType === 'json' | ||
| ) | ||
| if (!packageJSON) { | ||
| return | ||
| } | ||
| const mappedFiles = { | ||
| ['/package.json']: { | ||
| code: JSON.stringify(fixPackageJSONForReact(packageJSON.content), null, 2), | ||
| active: true, | ||
| }, | ||
| ...mapFiles(subFolders, ''), | ||
| } | ||
| return mappedFiles | ||
| } catch (e) { | ||
| throw new Error(e) | ||
| } | ||
| } | ||
|
|
||
| export const mapFiles = (folders: GeneratedFolder[], currentPath: string) => { | ||
| return folders.reduce((acc: SandpackFiles, folder) => { | ||
| const { files: subFiles, subFolders } = folder | ||
| subFiles.map( | ||
| (file) => | ||
| (acc[`${currentPath}/${folder.name}/${file.name}.${file.fileType}`] = { | ||
| code: file.content, | ||
| }) | ||
| ) | ||
| if (subFolders.length > 0) { | ||
| acc = { ...acc, ...mapFiles(subFolders, `/${folder.name}`) } | ||
| } | ||
| return acc | ||
| }, {}) | ||
| } |
Oops, something went wrong.
400077eThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: