From 269b1f99646876300e5aefc8efa74a8b2c67d27a Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 13:46:06 +0900 Subject: [PATCH 01/15] yarn --- yarn.lock | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 91 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index d289c5ce..a2c67dcd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1189,6 +1189,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.15.4": + version "7.16.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5" + integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.12.7", "@babel/template@^7.16.0", "@babel/template@^7.3.3": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6" @@ -1230,6 +1237,15 @@ "@babel/helper-validator-identifier" "^7.15.7" to-fast-properties "^2.0.0" +"@base-sdk-fp/auth@0.1.0-2": + version "0.1.0-2" + resolved "https://registry.yarnpkg.com/@base-sdk-fp/auth/-/auth-0.1.0-2.tgz#9932e76d4aa7b88c8eed23cfdf0e949b581d16d4" + integrity sha512-1cnAftih+EOfE+h7QqiMDCNZfSiRfVTKQPDPeSyCIxlJVKuKDJPCuGJOJfRlQ165u3pU61saeC7ni6Q8ARuWOA== + dependencies: + "@base-sdk/core" "0.1.0-1" + axios-retry "^3.1.9" + otplib "^12.0.1" + "@base-sdk/base@0.1.0-5", "@base-sdk/base@^0.1.0-5": version "0.1.0-5" resolved "https://registry.yarnpkg.com/@base-sdk/base/-/base-0.1.0-5.tgz#3a08c23586e61147075d4b214ecd1f7934cf1292" @@ -1259,6 +1275,14 @@ "@reflect-ui/core" "0.0.2-rc.7" axios "^0.21.0" +"@base-sdk/core@0.1.0-1": + version "0.1.0-1" + resolved "https://registry.yarnpkg.com/@base-sdk/core/-/core-0.1.0-1.tgz#0cc7102a658caa2e783586f7fb705574711f0072" + integrity sha512-FRI5tUq4fr3TU5b077O9gGXrZgAll71wtc+mBPN644xVsntnluMvrbLoCRJd8z5Zp98avkbxkulX8QVoiYFn4g== + dependencies: + "@reflect-ui/core" "0.0.2-rc.7" + axios "^0.21.0" + "@base-sdk/hosting@0.1.0-1": version "0.1.0-1" resolved "https://registry.yarnpkg.com/@base-sdk/hosting/-/hosting-0.1.0-1.tgz#bf16050cadd1c766f0813bc7bb14344b28e9910d" @@ -2151,6 +2175,44 @@ dependencies: "@octokit/openapi-types" "^11.2.0" +"@otplib/core@^12.0.1": + version "12.0.1" + resolved "https://registry.yarnpkg.com/@otplib/core/-/core-12.0.1.tgz#73720a8cedce211fe5b3f683cd5a9c098eaf0f8d" + integrity sha512-4sGntwbA/AC+SbPhbsziRiD+jNDdIzsZ3JUyfZwjtKyc/wufl1pnSIaG4Uqx8ymPagujub0o92kgBnB89cuAMA== + +"@otplib/plugin-crypto@^12.0.1": + version "12.0.1" + resolved "https://registry.yarnpkg.com/@otplib/plugin-crypto/-/plugin-crypto-12.0.1.tgz#2b42c624227f4f9303c1c041fca399eddcbae25e" + integrity sha512-qPuhN3QrT7ZZLcLCyKOSNhuijUi9G5guMRVrxq63r9YNOxxQjPm59gVxLM+7xGnHnM6cimY57tuKsjK7y9LM1g== + dependencies: + "@otplib/core" "^12.0.1" + +"@otplib/plugin-thirty-two@^12.0.1": + version "12.0.1" + resolved "https://registry.yarnpkg.com/@otplib/plugin-thirty-two/-/plugin-thirty-two-12.0.1.tgz#5cc9b56e6e89f2a1fe4a2b38900ca4e11c87aa9e" + integrity sha512-MtT+uqRso909UkbrrYpJ6XFjj9D+x2Py7KjTO9JDPhL0bJUYVu5kFP4TFZW4NFAywrAtFRxOVY261u0qwb93gA== + dependencies: + "@otplib/core" "^12.0.1" + thirty-two "^1.0.2" + +"@otplib/preset-default@^12.0.1": + version "12.0.1" + resolved "https://registry.yarnpkg.com/@otplib/preset-default/-/preset-default-12.0.1.tgz#cb596553c08251e71b187ada4a2246ad2a3165ba" + integrity sha512-xf1v9oOJRyXfluBhMdpOkr+bsE+Irt+0D5uHtvg6x1eosfmHCsCC6ej/m7FXiWqdo0+ZUI6xSKDhJwc8yfiOPQ== + dependencies: + "@otplib/core" "^12.0.1" + "@otplib/plugin-crypto" "^12.0.1" + "@otplib/plugin-thirty-two" "^12.0.1" + +"@otplib/preset-v11@^12.0.1": + version "12.0.1" + resolved "https://registry.yarnpkg.com/@otplib/preset-v11/-/preset-v11-12.0.1.tgz#4c7266712e7230500b421ba89252963c838fc96d" + integrity sha512-9hSetMI7ECqbFiKICrNa4w70deTUfArtwXykPUvSHWOdzOlfa9ajglu7mNCntlvxycTiOAXkQGwjQCzzDEMRMg== + dependencies: + "@otplib/core" "^12.0.1" + "@otplib/plugin-crypto" "^12.0.1" + "@otplib/plugin-thirty-two" "^12.0.1" + "@pmmmwh/react-refresh-webpack-plugin@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766" @@ -3793,7 +3855,7 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.32.tgz#2ca61c9ef8c77f6fa1733be9e623ceb0d372ad96" integrity sha512-JcII3D5/OapPGx+eJ+Ik1SQGyt6WvuqdRfh9jUwL6/iHGjmyOriBDciBUu7lEIBTL2ijxwrR70WUnw5AEDmFvQ== -"@types/node@^15.12.1": +"@types/node@^15.12.1", "@types/node@^15.6.0": version "15.14.9" resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa" integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A== @@ -3871,7 +3933,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^17.0.3": +"@types/react@*", "@types/react@^17.0.14", "@types/react@^17.0.3": version "17.0.34" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102" integrity sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg== @@ -4721,6 +4783,14 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== +axios-retry@^3.1.9: + version "3.2.4" + resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.2.4.tgz#f447a53c3456f5bfeca18f20c3a3272207d082ae" + integrity sha512-Co3UXiv4npi6lM963mfnuH90/YFLKWWDmoBYfxkHT5xtkSSWNqK9zdG3fw5/CP/dsoKB5aMMJCsgab+tp1OxLQ== + dependencies: + "@babel/runtime" "^7.15.4" + is-retry-allowed "^2.2.0" + axios@0.21.4, axios@^0.21.0: version "0.21.4" resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575" @@ -9598,6 +9668,11 @@ is-retry-allowed@^1.0.0: resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4" integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg== +is-retry-allowed@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz#88f34cbd236e043e71b6932d09b0c65fb7b4d71d" + integrity sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg== + is-root@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c" @@ -11967,6 +12042,15 @@ osenv@^0.1.4: os-homedir "^1.0.0" os-tmpdir "^1.0.0" +otplib@^12.0.1: + version "12.0.1" + resolved "https://registry.yarnpkg.com/otplib/-/otplib-12.0.1.tgz#c1d3060ab7aadf041ed2960302f27095777d1f73" + integrity sha512-xDGvUOQjop7RDgxTQ+o4pOol0/3xSZzawTiPKRrHnQWAy0WjhNs/5HdIDJCrqC4MBynmjXgULc6YfioaxZeFgg== + dependencies: + "@otplib/core" "^12.0.1" + "@otplib/preset-default" "^12.0.1" + "@otplib/preset-v11" "^12.0.1" + overlayscrollbars@^1.13.1: version "1.13.1" resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz#0b840a88737f43a946b9d87875a2f9e421d0338a" @@ -14881,6 +14965,11 @@ textextensions@^2.5.0: resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4" integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ== +thirty-two@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/thirty-two/-/thirty-two-1.0.2.tgz#4ca2fffc02a51290d2744b9e3f557693ca6b627a" + integrity sha1-TKL//AKlEpDSdEueP1V2k8prYno= + throat@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375" From b200ea0283f11a4ffb01996fd1a4e52d3efeb41e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 14:07:41 +0900 Subject: [PATCH 02/15] init `/embed/vscode/grida-explorer-preview` page --- .../vscode/grida-explorer-preview/README.md | 1 + .../vscode/grida-explorer-preview/index.tsx | 44 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 editor/pages/embed/vscode/grida-explorer-preview/README.md create mode 100644 editor/pages/embed/vscode/grida-explorer-preview/index.tsx diff --git a/editor/pages/embed/vscode/grida-explorer-preview/README.md b/editor/pages/embed/vscode/grida-explorer-preview/README.md new file mode 100644 index 00000000..abf472e8 --- /dev/null +++ b/editor/pages/embed/vscode/grida-explorer-preview/README.md @@ -0,0 +1 @@ +> grida-explorer-preview for gridaco/vscode/grida-explorer-preview diff --git a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx new file mode 100644 index 00000000..15d44241 --- /dev/null +++ b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx @@ -0,0 +1,44 @@ +import React, { useEffect, useState } from "react"; +import { useRouter } from "next/router"; +export default function VSCodeEmbedGridaExplorerPreview() { + const router = useRouter(); + const [isEmpty, setIsEmpty] = useState(true); + + useEffect(() => { + // subscribes to user's message + const listener = (event) => { + // + }; + + window.addEventListener("message", listener); + return () => { + window.removeEventListener("message", listener); + }; + }, []); + + if (isEmpty) { + return ; + } + + return
VSCodeEmbedGridaExplorerPreview
; +} + +function EmptyState() { + return
EmptyState
; +} + +interface EventFromClient { + __signature: "event-from-client"; + payload: T; +} + +interface UpdatePreviewCommand { + type: "update-preview"; + preview: { + srcDoc: string; + }; +} + +interface ClearPreviewCommand { + type: "clear-preview"; +} From f29df00f852db82153a1879a35a0cafa77b2ba39 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 15:21:14 +0900 Subject: [PATCH 03/15] initial vanilla-preview migration from assistant --- .../editor-preview-vanilla/LICENSE | 21 +++ .../editor-preview-vanilla/lib/index.ts | 2 + .../lib/responsive-container/index.tsx | 48 ++++++ .../lib/responsive-content-iframe/index.tsx | 145 ++++++++++++++++++ .../editor-preview-vanilla/package.json | 23 ++- .../editor-preview-vanilla/tsconfig.json | 20 +++ 6 files changed, 257 insertions(+), 2 deletions(-) create mode 100644 editor-packages/editor-preview-vanilla/LICENSE create mode 100644 editor-packages/editor-preview-vanilla/lib/index.ts create mode 100644 editor-packages/editor-preview-vanilla/lib/responsive-container/index.tsx create mode 100644 editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx create mode 100644 editor-packages/editor-preview-vanilla/tsconfig.json diff --git a/editor-packages/editor-preview-vanilla/LICENSE b/editor-packages/editor-preview-vanilla/LICENSE new file mode 100644 index 00000000..040bd9e7 --- /dev/null +++ b/editor-packages/editor-preview-vanilla/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2021 Grida Inc, softmarshmallow + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/editor-packages/editor-preview-vanilla/lib/index.ts b/editor-packages/editor-preview-vanilla/lib/index.ts new file mode 100644 index 00000000..d09012c2 --- /dev/null +++ b/editor-packages/editor-preview-vanilla/lib/index.ts @@ -0,0 +1,2 @@ +export * from "./responsive-container"; +export * from "./responsive-content-iframe"; diff --git a/editor-packages/editor-preview-vanilla/lib/responsive-container/index.tsx b/editor-packages/editor-preview-vanilla/lib/responsive-container/index.tsx new file mode 100644 index 00000000..00ba034a --- /dev/null +++ b/editor-packages/editor-preview-vanilla/lib/responsive-container/index.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import styled from "@emotion/styled"; +import { useComponentSize } from "react-use-size"; +import { + ResponsiveContentIframe, + ResponsiveContentIframeProps, +} from "../responsive-content-iframe"; + +export const Container = styled.div<{ heightscale: number }>` + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + justify-content: center; + flex: 0 1 0; + /* FIXME: this should be a height + // this should work, but the flex is making inner iframe height to shrink. + height: max(${(props) => props.heightscale * 100}%, 100%); + ref: + - https://stackoverflow.com/questions/51288769/scaling-a-flexbox-child-with-transform-leaves-empty-space + - https://www.reddit.com/r/css/comments/q5cvei/css_fitcontent_on_parent_wont_work_for_scaled_item/ + */ + min-height: 100%; +`; + +export function ResponsiveContainer(props: ResponsiveContentIframeProps) { + const { ref: sizingref, height, width } = useComponentSize(); + // TODO: do not remove comments here. these are required for below height calculation. + // DON'T REMOVE + // const [renderheightScaleFactor, setRenderheightScaleFactor] = useState(1); + + return ( + + {}} + // DON'T REMOVE + // onScaleChange={setRenderheightScaleFactor} + /> + + ); +} diff --git a/editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx b/editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx new file mode 100644 index 00000000..318d98f2 --- /dev/null +++ b/editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx @@ -0,0 +1,145 @@ +import React, { useEffect, useLayoutEffect, useRef, useState } from "react"; +import styled from "@emotion/styled"; + +const _DEFAULT_MARGIN = 0; +const _DEFAULT_SHADOW = "0px 0px 0px transparent"; +const _DEFAULT_BORDER_RADIUS = 0; + +export interface ResponsiveContentIframeProps { + type: "responsive"; + /** + * the vanilla html code or remote embeddable web url; + */ + data?: string; + /** + * show responsive view of. + */ + of?: string; + + id: string; + + /** + * the origin size of the design + */ + origin_size: { + width: number; + height: number; + }; + + /** + * margin for the iframe to be placed + * + * @default 12 + */ + margin: number; + + /** + * border radius of iframe container + * + * @default 4 + */ + borderRadius?: number; + + /** + * boxshadow css as string + * + * @default "0px 4px 64px rgba(160, 160, 160, 0.18)" + */ + boxShadow?: string; +} + +export function ResponsiveContentIframe({ + previewInfo, + parentSize, + onScaleChange, +}: { + onScaleChange: (scale: number) => void; + previewInfo: ResponsiveContentIframeProps; + parentSize: { width: number; height: number }; +}) { + const margin = allow_0(previewInfo.margin, _DEFAULT_MARGIN); + + const [scalefactor, setscalefactor] = useState(1); + const iframeRef = useRef(undefined); + + // dangerously remove scrolling for inner ifram html + // ask: @softmarshmallow + useLayoutEffect(() => { + if (iframeRef.current) { + __dangerously_disable_scroll_in_html_body(iframeRef.current); + } + }, [iframeRef, previewInfo.data]); + + useEffect(() => { + if (previewInfo && parentSize.width) { + const _s = + (parentSize.width - margin * 2) / previewInfo.origin_size.width; + const framescale = Math.min(_s, 1); + onScaleChange(framescale); + setscalefactor(framescale); + } + }, [parentSize.width, parentSize.height, previewInfo?.id]); + + return ( + + ); +} + +/** + * this is a explicit temporary solution to disable iframe content to be scrolling. we aleardy disable scrolling a root element inside the body, but when the element is big and the scale factor is not persice enough, the scrollbar will be shown. + * @ask: @softmarshmallow + * @param iframe + */ +function __dangerously_disable_scroll_in_html_body(iframe: HTMLIFrameElement) { + try { + iframe.contentDocument.getElementsByTagName("body")[0].style.overflow = + "hidden"; + } catch (_) { + if (process.env.NODE_ENV === "development") { + console.error("__dangerously_disable_scroll_in_html_body", _); + } + } +} + +/** + * allow falsy number `0` as a valid value, + use default value if `null` | `undefined` + * @returns + */ +function allow_0(i: number, defaultValue = 0): number { + return typeof i === "number" ? i : defaultValue; +} + +const PlainIframe = styled.iframe<{ + scale: number; + margin: number; + borderRadius: number; + boxShadow: string; + inner_view_ready: boolean; +}>` + background: ${(p) => (p.inner_view_ready ? "white" : "transparent")}; + box-shadow: ${(p) => p.boxShadow}; + outline: none; + overflow: hidden; + border-radius: ${(p) => p.borderRadius}px; + margin: ${(props) => props.margin}px; + border: none; + transform: ${(props) => `scale(${props.scale})`}; + /* when height smaller, center center */ + /* else, center top */ + /* TODO: the logic is incomplete */ + transform-origin: center top; + /* transform-origin: center ${(p) => (p.scale < 1 ? "center" : "top")}; */ +`; diff --git a/editor-packages/editor-preview-vanilla/package.json b/editor-packages/editor-preview-vanilla/package.json index 7c82ef55..65135036 100644 --- a/editor-packages/editor-preview-vanilla/package.json +++ b/editor-packages/editor-preview-vanilla/package.json @@ -1,5 +1,24 @@ { "name": "@code-editor/vanilla-preview", "version": "0.0.0", - "private": "false" -} \ No newline at end of file + "private": "false", + "scripts": { + "prepack": "tsc" + }, + "files": [ + "dist", + "LICENSE", + "README.md" + ], + "peerDependencies": { + "@emotion/styled": "^11.3.0", + "react": "^17.0.2" + }, + "devDependencies": { + "@types/node": "^16.11.7", + "typescript": "^4.4.4" + }, + "dependencies": { + "react-use-size": "^2.0.4" + } +} diff --git a/editor-packages/editor-preview-vanilla/tsconfig.json b/editor-packages/editor-preview-vanilla/tsconfig.json new file mode 100644 index 00000000..d049814f --- /dev/null +++ b/editor-packages/editor-preview-vanilla/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "lib": ["DOM", "DOM.Iterable", "ES2019"], + "target": "ES6", + "module": "commonjs", + "jsx": "react", + "esModuleInterop": true, + "declaration": true, + "outDir": "dist", + "experimentalDecorators": true, + "noUnusedLocals": false, + "sourceMap": false + }, + "exclude": [ + "node_modules", + "**/*.spec.ts", + "dist", + "index.ts" // index.ts is for monorepo use + ] +} From 9e8872e789e38412c629d2ae4a2472662c4f4eff Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 15:22:27 +0900 Subject: [PATCH 04/15] update scripts --- editor-packages/editor-preview-vanilla/package.json | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/editor-packages/editor-preview-vanilla/package.json b/editor-packages/editor-preview-vanilla/package.json index 65135036..f73e959f 100644 --- a/editor-packages/editor-preview-vanilla/package.json +++ b/editor-packages/editor-preview-vanilla/package.json @@ -1,9 +1,11 @@ { "name": "@code-editor/vanilla-preview", "version": "0.0.0", - "private": "false", + "private": false, + "main": "dist/index.js", "scripts": { - "prepack": "tsc" + "clean": "rimraf dist", + "prepack": "yarn clean && tsc" }, "files": [ "dist", @@ -20,5 +22,8 @@ }, "dependencies": { "react-use-size": "^2.0.4" + }, + "publishConfig": { + "access": "public" } -} +} \ No newline at end of file From 1716371dfe0850c898596414bb7f123236567694 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 15:27:37 +0900 Subject: [PATCH 05/15] v0.0.1 --- editor-packages/editor-preview-vanilla/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor-packages/editor-preview-vanilla/package.json b/editor-packages/editor-preview-vanilla/package.json index f73e959f..edc6c042 100644 --- a/editor-packages/editor-preview-vanilla/package.json +++ b/editor-packages/editor-preview-vanilla/package.json @@ -1,6 +1,6 @@ { "name": "@code-editor/vanilla-preview", - "version": "0.0.0", + "version": "0.0.1", "private": false, "main": "dist/index.js", "scripts": { @@ -26,4 +26,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +} From caedc936f3b5b0539c0d9c0b17d2f27b5ccc6320 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 15:28:10 +0900 Subject: [PATCH 06/15] add default export --- editor-packages/editor-preview-vanilla/README.md | 4 +++- editor-packages/editor-preview-vanilla/lib/index.ts | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/editor-packages/editor-preview-vanilla/README.md b/editor-packages/editor-preview-vanilla/README.md index 46f191d1..fe63d95f 100644 --- a/editor-packages/editor-preview-vanilla/README.md +++ b/editor-packages/editor-preview-vanilla/README.md @@ -1,5 +1,7 @@ # Vanilla preview +> Executable web view of the design (vanilla) + ![](./docs/assets/example-of-vanilla-preview-on-grida-assistant.png) ## Installation @@ -11,7 +13,7 @@ yarn add @code-editor/vanilla-preview ## Usage ```tsx -import { VanillaPreview } from "@code-editor/vanilla-preview"; +import VanillaPreview from "@code-editor/vanilla-preview"; export default function () { return ; diff --git a/editor-packages/editor-preview-vanilla/lib/index.ts b/editor-packages/editor-preview-vanilla/lib/index.ts index d09012c2..29f22129 100644 --- a/editor-packages/editor-preview-vanilla/lib/index.ts +++ b/editor-packages/editor-preview-vanilla/lib/index.ts @@ -1,2 +1,5 @@ export * from "./responsive-container"; export * from "./responsive-content-iframe"; + +import { ResponsiveContainer as VanillaPreview } from "./responsive-container"; +export default VanillaPreview; From 7d30674ccec4ba1a918a008d16995349f8ebe0b8 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 15:44:39 +0900 Subject: [PATCH 07/15] v0.0.2 --- editor-packages/editor-preview-vanilla/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/editor-packages/editor-preview-vanilla/package.json b/editor-packages/editor-preview-vanilla/package.json index edc6c042..6a5351e6 100644 --- a/editor-packages/editor-preview-vanilla/package.json +++ b/editor-packages/editor-preview-vanilla/package.json @@ -1,8 +1,9 @@ { "name": "@code-editor/vanilla-preview", - "version": "0.0.1", + "version": "0.0.2", "private": false, "main": "dist/index.js", + "repository": "https://github.com/gridaco/designto-code", "scripts": { "clean": "rimraf dist", "prepack": "yarn clean && tsc" From 99789cbb7cd9b9d5d88531e81ce21278376ca9ad Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 15:45:06 +0900 Subject: [PATCH 08/15] `@code-editor/vanilla-preview` 0.0.2 publish --- editor-packages/editor-preview-vanilla/README.md | 15 ++++++++++++++- .../lib/responsive-content-iframe/index.tsx | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/editor-packages/editor-preview-vanilla/README.md b/editor-packages/editor-preview-vanilla/README.md index fe63d95f..4d44d1c5 100644 --- a/editor-packages/editor-preview-vanilla/README.md +++ b/editor-packages/editor-preview-vanilla/README.md @@ -12,11 +12,24 @@ yarn add @code-editor/vanilla-preview ## Usage +See the [real example on assistant](https://github.com/gridaco/assistant/pull/181). + ```tsx import VanillaPreview from "@code-editor/vanilla-preview"; export default function () { - return ; + const _DEFAULT_MARGIN = 12; + const _DEFAULT_SHADOW = "0px 4px 64px rgba(160, 160, 160, 0.18)"; + const _DEFAULT_BORDER_RADIUS = 4; + + return ( + + ); } ``` diff --git a/editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx b/editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx index 318d98f2..2e80c09d 100644 --- a/editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx +++ b/editor-packages/editor-preview-vanilla/lib/responsive-content-iframe/index.tsx @@ -31,7 +31,7 @@ export interface ResponsiveContentIframeProps { * * @default 12 */ - margin: number; + margin?: number; /** * border radius of iframe container From 6fd26c56421da0bcd80f02a3378ad701041e32d2 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 16:00:07 +0900 Subject: [PATCH 09/15] initialized scaling vanilla preview page with `@code-editor/vanilla-preview` --- .../vscode/grida-explorer-preview/index.tsx | 27 +++++++++++++++---- yarn.lock | 10 +++++++ 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx index 15d44241..f24e6e5d 100644 --- a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx +++ b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx @@ -1,8 +1,9 @@ import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; +import VanillaPreview from "@code-editor/vanilla-preview"; export default function VSCodeEmbedGridaExplorerPreview() { - const router = useRouter(); - const [isEmpty, setIsEmpty] = useState(true); + const router = useRouter(); // use router only for loading initial params. + const [isEmpty, setIsEmpty] = useState(false); // TODO: set to false when publishing - true on only dev. useEffect(() => { // subscribes to user's message @@ -20,11 +21,27 @@ export default function VSCodeEmbedGridaExplorerPreview() { return ; } - return
VSCodeEmbedGridaExplorerPreview
; + return Hello`} />; } -function EmptyState() { - return
EmptyState
; +function EmptyState({ message = "Nothing is selected" }: { message?: string }) { + return
{message}
; +} + +function PreviewState({ srcDoc }: { srcDoc: string }) { + return ( + + ); } interface EventFromClient { diff --git a/yarn.lock b/yarn.lock index a2c67dcd..9f261fb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3860,6 +3860,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa" integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A== +"@types/node@^16.11.7": + version "16.11.7" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.7.tgz#36820945061326978c42a01e56b61cd223dfdc42" + integrity sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw== + "@types/normalize-package-data@^2.4.0": version "2.4.1" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" @@ -13343,6 +13348,11 @@ react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-use-size@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-use-size/-/react-use-size-2.0.4.tgz#14f513e310d8962a30919e64fdd746b8211a3f0d" + integrity sha512-vMfResvkZwkXngdbytZbDNkDySJqXrEdPa882kTqIQZylxHA6PSf2NC67wJJIMpmZjGyTwV7wyG5YY1SwId1xw== + react@17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" From eac319bd3da7cb91c3dd7fe3a84f2415e2068805 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 17:15:07 +0900 Subject: [PATCH 10/15] init `update-preview` command --- .../vscode/grida-explorer-preview/index.tsx | 111 +++++++++++++++--- 1 file changed, 95 insertions(+), 16 deletions(-) diff --git a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx index f24e6e5d..ee504878 100644 --- a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx +++ b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx @@ -1,13 +1,36 @@ import React, { useEffect, useState } from "react"; +import styled from "@emotion/styled"; import { useRouter } from "next/router"; import VanillaPreview from "@code-editor/vanilla-preview"; + export default function VSCodeEmbedGridaExplorerPreview() { const router = useRouter(); // use router only for loading initial params. - const [isEmpty, setIsEmpty] = useState(false); // TODO: set to false when publishing - true on only dev. + const [preview, setPreview] = useState(undefined); + + const isEmpty = preview === undefined; + + useEffect(() => { + __lifecycle_event_page_loaded(); + }, []); + // client-to-this-page message handling useEffect(() => { // subscribes to user's message - const listener = (event) => { + const listener = (e) => { + console.log("received message from client", e.data); + if (e.data.__signature === __eventfromclient__signature) { + const event = e.data as EventFromClient; + switch (event.payload.type) { + case "clear-preview": { + setPreview(undefined); + break; + } + case "update-preview": { + setPreview(event.payload.preview); + break; + } + } + } // }; @@ -21,41 +44,97 @@ export default function VSCodeEmbedGridaExplorerPreview() { return ; } - return Hello`} />; + return ; +} + +function __lifecycle_event_page_loaded() { + window.postMessage({ __signature: "event-from-page", type: "loaded" }); } function EmptyState({ message = "Nothing is selected" }: { message?: string }) { - return
{message}
; + return ( + + {message} + + ); } -function PreviewState({ srcDoc }: { srcDoc: string }) { +const EmptyStateContainer = styled.div` + /* disable text selection */ + -webkit-user-select: none; + -webkit-user-drag: none; + -webkit-app-region: no-drag; + cursor: default; + /* ---- */ + height: 100vh; + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + flex: none; + gap: 10px; + background-color: rgba(37, 37, 38, 1); + box-sizing: border-box; +`; + +const NothingIsSelected = styled.span` + color: rgba(212, 212, 212, 1); + text-overflow: ellipsis; + font-size: 11px; + font-family: "SF Pro Text", sans-serif; + font-weight: 700; + text-align: center; +`; + +interface MinimalPreviewProps { + id?: string; + srcDoc: string; + size: { + width: number; + height: number; + }; +} + +function PreviewState({ id, srcDoc, size }: MinimalPreviewProps) { return ( ); } -interface EventFromClient { - __signature: "event-from-client"; +const __eventfromclient__signature = "event-from-client"; +interface EventFromClient { + __signature: typeof __eventfromclient__signature; payload: T; } +type Commands = UpdatePreviewCommand | ClearPreviewCommand; + interface UpdatePreviewCommand { type: "update-preview"; - preview: { - srcDoc: string; - }; + preview: MinimalPreviewProps; } interface ClearPreviewCommand { type: "clear-preview"; } + +/// +/// development clips +/// on chrome debug console, paste this to trigger the command event. +/// ``` +/// window.postMessage({ +/// __signature: "event-from-client", +/// payload: { +/// type: "update-preview", +/// preview: { srcDoc: "your-html-content-here", size: { width: 375, height: 812 } }, +/// } +/// }, "*") +/// ``` +/// From 142ebb03e16181fd03d3205630dbd41244e9c8a1 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 10 Nov 2021 18:04:19 +0900 Subject: [PATCH 11/15] update event emit signature --- editor/pages/embed/vscode/grida-explorer-preview/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx index ee504878..75e53c16 100644 --- a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx +++ b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx @@ -17,7 +17,6 @@ export default function VSCodeEmbedGridaExplorerPreview() { useEffect(() => { // subscribes to user's message const listener = (e) => { - console.log("received message from client", e.data); if (e.data.__signature === __eventfromclient__signature) { const event = e.data as EventFromClient; switch (event.payload.type) { @@ -48,7 +47,7 @@ export default function VSCodeEmbedGridaExplorerPreview() { } function __lifecycle_event_page_loaded() { - window.postMessage({ __signature: "event-from-page", type: "loaded" }); + window.postMessage({ __signature: "event-from-host", type: "page-loaded" }); } function EmptyState({ message = "Nothing is selected" }: { message?: string }) { From 393737fe790de86dde22b1647c13d1d7f1bdc6ad Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 11 Nov 2021 04:21:57 +0900 Subject: [PATCH 12/15] add `@code-editor/vanilla-preview` to editor --- editor/package.json | 1 + yarn.lock | 14 +------------- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/editor/package.json b/editor/package.json index 8af6bee6..ed4671fa 100644 --- a/editor/package.json +++ b/editor/package.json @@ -11,6 +11,7 @@ "@babel/runtime": "^7.14.0", "@base-sdk/base": "^0.1.0-5", "@code-editor/preview-pip": "^0.0.2", + "@code-editor/vanilla-preview": "^0.0.2", "@design-sdk/figma-auth-store": "^0.0.2", "@designto/code": "0.0.1", "@emotion/core": "^11.0.0", diff --git a/yarn.lock b/yarn.lock index 8c5eb96b..39cf7521 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1189,13 +1189,6 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.15.4": - version "7.16.3" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5" - integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ== - dependencies: - regenerator-runtime "^0.13.4" - "@babel/template@^7.12.7", "@babel/template@^7.16.0", "@babel/template@^7.3.3": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6" @@ -3850,7 +3843,7 @@ "@types/node" "*" form-data "^3.0.0" -"@types/node@*", "@types/node@^16.10.3", "@types/node@^16.3.3": +"@types/node@*", "@types/node@^16.10.3", "@types/node@^16.11.7", "@types/node@^16.3.3": version "16.11.7" resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.7.tgz#36820945061326978c42a01e56b61cd223dfdc42" integrity sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw== @@ -3865,11 +3858,6 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa" integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A== -"@types/node@^16.11.7": - version "16.11.7" - resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.7.tgz#36820945061326978c42a01e56b61cd223dfdc42" - integrity sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw== - "@types/normalize-package-data@^2.4.0": version "2.4.1" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" From 9cb2fd59bccb3760e56a480365bad1ed157bbe26 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 11 Nov 2021 04:25:25 +0900 Subject: [PATCH 13/15] allow local use --- editor-packages/editor-preview-vanilla/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 editor-packages/editor-preview-vanilla/index.ts diff --git a/editor-packages/editor-preview-vanilla/index.ts b/editor-packages/editor-preview-vanilla/index.ts new file mode 100644 index 00000000..8cd5167d --- /dev/null +++ b/editor-packages/editor-preview-vanilla/index.ts @@ -0,0 +1 @@ +export * from "./lib"; From 7b34bf420347f914353c51dce9c9e4c12637debc Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 11 Nov 2021 04:28:35 +0900 Subject: [PATCH 14/15] ci fix --- editor-packages/editor-preview-vanilla/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/editor-packages/editor-preview-vanilla/index.ts b/editor-packages/editor-preview-vanilla/index.ts index 8cd5167d..ef99bf68 100644 --- a/editor-packages/editor-preview-vanilla/index.ts +++ b/editor-packages/editor-preview-vanilla/index.ts @@ -1 +1,2 @@ export * from "./lib"; +export { default as VanillaPreview } from "./lib"; From bbdba96ea2bd50a70afe1b2c8f1527f16a539aaa Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 11 Nov 2021 04:29:14 +0900 Subject: [PATCH 15/15] ci fix --- editor-packages/editor-preview-vanilla/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/editor-packages/editor-preview-vanilla/index.ts b/editor-packages/editor-preview-vanilla/index.ts index ef99bf68..5bfba136 100644 --- a/editor-packages/editor-preview-vanilla/index.ts +++ b/editor-packages/editor-preview-vanilla/index.ts @@ -1,2 +1,4 @@ export * from "./lib"; -export { default as VanillaPreview } from "./lib"; +// -------------------- +import { default as VanillaPreview } from "./lib"; +export default VanillaPreview;