Skip to content

Commit 794250d

Browse files
softmarshmallowsoftmarshmallow
committed
update preview user (isolated mode, fullscreen view) with use editor state
1 parent 2cc5cf0 commit 794250d

2 files changed

Lines changed: 48 additions & 248 deletions

File tree

‎editor/scaffolds/canvas/isolate-mode.tsx‎

Lines changed: 26 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
11
import React, { useEffect, useState } from "react";
2-
import { preview_presets } from "@grida/builder-config-preset";
3-
import { designToCode, Result } from "@designto/code";
4-
import { config } from "@designto/config";
5-
import { MainImageRepository } from "@design-sdk/core/assets-repository";
6-
import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
72
import { IsolatedCanvas } from "components/canvas";
83
import { PreviewAndRunPanel } from "components/preview-and-run";
94
import { useEditorState } from "core/states";
10-
import { useTargetContainer } from "hooks";
11-
12-
import { VanillaESBuildAppRunner } from "components/app-runner";
13-
import bundler from "@code-editor/esbuild-services";
14-
import assert from "assert";
15-
16-
const esbuild_base_html_code = `<div id="root"></div>`;
5+
import { VanillaDedicatedPreviewRenderer } from "components/app-runner";
176

187
export function IsolateModeCanvas({
198
onClose,
@@ -23,147 +12,38 @@ export function IsolateModeCanvas({
2312
onEnterFullscreen: () => void;
2413
}) {
2514
const [state] = useEditorState();
26-
const [initialPreview, setInitialPreview] = useState<Result>();
27-
const [buildPreview, setBuildPreview] = useState<string>();
28-
const [isbuilding, setIsbuilding] = useState(false);
29-
30-
// const [fullscreen, setFullscreen] = useState(false);
3115

32-
const { target, root } = useTargetContainer();
33-
34-
const on_preview_result = (result: Result) => {
35-
//@ts-ignore
36-
// if (result.id == targetStateRef?.current?.id) {
37-
setInitialPreview(result);
38-
// }
16+
const {
17+
fallbackSource,
18+
loader,
19+
source,
20+
initialSize,
21+
isBuilding,
22+
widgetKey,
23+
componentName,
24+
} = state.currentPreview || {
25+
isBuilding: true,
3926
};
4027

41-
const isInitialPreviewFullyLoaded = initialPreview && !isbuilding;
42-
43-
useEffect(() => {
44-
const __target = target; // root.entry;
45-
46-
if (!__target) {
47-
return;
48-
}
49-
50-
const _input = {
51-
id: __target.id,
52-
name: __target.name,
53-
entry: __target,
54-
};
55-
const build_config = {
56-
...config.default_build_configuration,
57-
disable_components: true,
58-
};
59-
60-
// ----- for preview -----
61-
designToCode({
62-
input: _input,
63-
build_config: build_config,
64-
framework: preview_presets.default,
65-
asset_config: {
66-
skip_asset_replacement: false,
67-
asset_repository: MainImageRepository.instance,
68-
custom_asset_replacement: {
69-
type: "static",
70-
resource:
71-
"https://bridged-service-static.s3.us-west-1.amazonaws.com/placeholder-images/image-placeholder-bw-tile-100.png",
72-
},
73-
},
74-
})
75-
.then(on_preview_result)
76-
.catch(console.error);
77-
if (!MainImageRepository.instance.empty) {
78-
setIsbuilding(true); // i
79-
designToCode({
80-
input: root,
81-
build_config: build_config,
82-
framework: preview_presets.default,
83-
asset_config: { asset_repository: MainImageRepository.instance },
84-
})
85-
.then(on_preview_result)
86-
.catch(console.error)
87-
.finally(() => {
88-
setIsbuilding(false); // o
89-
});
90-
}
91-
}, [target?.id]);
92-
93-
// ------------------------
94-
// ------ for esbuild -----
95-
useEffect(() => {
96-
if (
97-
!isInitialPreviewFullyLoaded ||
98-
!state.editingModule ||
99-
// now only react is supported.
100-
state.editingModule.framework !== "react"
101-
) {
102-
return;
103-
}
104-
105-
assert(state.editingModule.componentName, "component name is required");
106-
assert(state.editingModule.raw, "raw input code is required");
107-
108-
setIsbuilding(true);
109-
bundler(
110-
transform(state.editingModule.raw, state.editingModule.componentName),
111-
"tsx"
112-
)
113-
.then((d) => {
114-
if (d.err == null) {
115-
if (d.code && d.code !== buildPreview) {
116-
setBuildPreview(d.code);
117-
}
118-
}
119-
})
120-
.finally(() => {
121-
setIsbuilding(false);
122-
});
123-
}, [state.editingModule?.framework, state.editingModule?.raw]);
124-
125-
// ------------------------
126-
12728
return (
128-
<>
129-
<IsolatedCanvas
130-
key={target?.id}
131-
building={isbuilding}
132-
onExit={onClose}
133-
onFullscreen={onEnterFullscreen}
134-
defaultSize={{
135-
width: target?.width ?? 375,
136-
height: target?.height ?? 812,
137-
}}
138-
>
139-
{initialPreview ? (
140-
<>
141-
{buildPreview ? (
142-
<VanillaESBuildAppRunner
143-
doc={{
144-
html: esbuild_base_html_code,
145-
javascript: buildPreview,
146-
}}
147-
/>
148-
) : (
149-
<VanillaRunner
150-
key={initialPreview.scaffold.raw}
151-
style={{
152-
borderRadius: 4,
153-
boxShadow: "0px 0px 48px #00000020",
154-
}}
155-
source={initialPreview.scaffold.raw}
156-
width="100%"
157-
height="100%"
158-
componentName={initialPreview.name}
159-
/>
160-
)}
161-
</>
29+
<IsolatedCanvas
30+
key={widgetKey?.id}
31+
building={isBuilding}
32+
onExit={onClose}
33+
onFullscreen={onEnterFullscreen}
34+
defaultSize={{
35+
width: initialSize?.width ?? 375,
36+
height: initialSize?.height ?? 812,
37+
}}
38+
>
39+
<>
40+
{source ? (
41+
<VanillaDedicatedPreviewRenderer {...state.currentPreview} />
16242
) : (
16343
<EditorCanvasSkeleton />
16444
)}
165-
</IsolatedCanvas>
166-
</>
45+
</>
46+
</IsolatedCanvas>
16747
);
16848
}
16949

@@ -186,10 +66,3 @@ const EditorCanvasSkeleton = () => {
18666
/>
18767
);
18868
};
189-
190-
const transform = (s, n) => {
191-
return `import React from 'react'; import ReactDOM from 'react-dom';
192-
${s}
193-
const App = () => <><${n}/></>
194-
ReactDOM.render(<App />, document.querySelector('#root'));`;
195-
};

‎editor/scaffolds/preview-full-screen/index.tsx‎

Lines changed: 22 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,34 @@
11
import React, { useEffect, useState } from "react";
22
import { useEditorState } from "core/states";
33
import styled from "@emotion/styled";
4-
import { preview_presets } from "@grida/builder-config-preset";
5-
import { designToCode, Result } from "@designto/code";
6-
import { config } from "@designto/config";
7-
import {
8-
ImageRepository,
9-
MainImageRepository,
10-
} from "@design-sdk/core/assets-repository";
11-
import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
12-
import { VanillaRunner } from "components/app-runner/vanilla-app-runner";
13-
import { useTargetContainer, useWindowSize } from "hooks";
4+
import { useWindowSize } from "hooks";
145
import Close from "@material-ui/icons/Close";
156
import ClientOnly from "components/client-only";
7+
import { VanillaDedicatedPreviewRenderer } from "components/app-runner";
168

179
export function FullScreenPreview({ onClose }: { onClose: () => void }) {
1810
const [state] = useEditorState();
19-
const [preview, setPreview] = useState<Result>();
2011
const windowsize = useWindowSize();
21-
const target = useTargetContainer();
2212

23-
const on_preview_result = (result: Result) => {
24-
setPreview(result);
13+
const {
14+
fallbackSource,
15+
loader,
16+
source,
17+
initialSize,
18+
isBuilding,
19+
widgetKey: key,
20+
componentName,
21+
} = state.currentPreview || {
22+
isBuilding: true,
2523
};
2624

2725
useEffect(() => {
28-
const __target = target?.target; // root.entry;
29-
if (__target) {
30-
if (!MainImageRepository.isReady) {
31-
// this is not the smartest way, but the image repo has a design flaw.
32-
// this happens when the target node is setted on the query param on first load, when the image repo is not set by the higher editor container.
33-
MainImageRepository.instance = new RemoteImageRepositories(
34-
state.design.key,
35-
{
36-
// setting this won't load any image btw. (just to prevent errors)
37-
authentication: { accessToken: "" },
38-
}
39-
);
40-
MainImageRepository.instance.register(
41-
new ImageRepository(
42-
"fill-later-assets",
43-
"grida://assets-reservation/images/"
44-
)
45-
);
46-
}
47-
48-
const _input = {
49-
id: __target.id,
50-
name: __target.name,
51-
entry: __target,
52-
};
53-
const build_config = {
54-
...config.default_build_configuration,
55-
disable_components: true,
56-
};
57-
58-
// ----- for preview -----
59-
designToCode({
60-
input: _input,
61-
build_config: build_config,
62-
framework: preview_presets.default,
63-
asset_config: {
64-
skip_asset_replacement: false,
65-
asset_repository: MainImageRepository.instance,
66-
custom_asset_replacement: {
67-
type: "static",
68-
resource:
69-
"https://bridged-service-static.s3.us-west-1.amazonaws.com/placeholder-images/image-placeholder-bw-tile-100.png",
70-
},
71-
},
72-
})
73-
.then(on_preview_result)
74-
.catch(console.error);
75-
76-
if (!MainImageRepository.instance.empty) {
77-
designToCode({
78-
input: target.root,
79-
build_config: build_config,
80-
framework: preview_presets.default,
81-
asset_config: { asset_repository: MainImageRepository.instance },
82-
})
83-
.then(on_preview_result)
84-
.catch(console.error);
85-
} else {
86-
console.error("MainImageRepository is empty");
87-
}
88-
}
89-
}, [target?.target?.id]);
26+
// logger
27+
console.log(
28+
"rendering fullscreen preview with existing preview data..",
29+
state.currentPreview
30+
);
31+
}, []);
9032

9133
//
9234
return (
@@ -101,25 +43,10 @@ export function FullScreenPreview({ onClose }: { onClose: () => void }) {
10143
</AppbarActionsSegment>
10244
</FullscreenPreviewAppbar>
10345
<Body>
104-
{preview && (
105-
<VanillaRunner
106-
key={preview.scaffold.raw}
107-
style={{
108-
alignSelf: "stretch",
109-
borderRadius: 0,
110-
// TODO: do not specify static bg color
111-
background: "white",
112-
flexGrow: 1,
113-
border: "none",
114-
margin: 0,
115-
padding: 0,
116-
}}
117-
enableInspector={false}
118-
source={preview.scaffold.raw}
119-
width="100%"
120-
height="100%"
121-
componentName={preview.name}
122-
/>
46+
{isBuilding ? (
47+
<>loading</>
48+
) : (
49+
<VanillaDedicatedPreviewRenderer {...state.currentPreview} />
12350
)}
12451
</Body>
12552
</RootWrapperFullScreenRunnerViewLayout>

0 commit comments

Comments
 (0)