@thewhateverapp/tile-sdk 0.14.9 → 0.14.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneFromJson.d.ts","sourceRoot":"","sources":["../../src/scene/SceneFromJson.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"SceneFromJson.d.ts","sourceRoot":"","sources":["../../src/scene/SceneFromJson.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAC1E,4DAA4D;IAC5D,IAAI,EAAE,OAAO,CAAC;IACd,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CACtC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,UAAiB,EACjB,OAAO,EACP,SAAkB,EAClB,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAoGpB"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import React, {
|
|
2
|
+
import React, { useEffect, useMemo, useCallback } from 'react';
|
|
3
3
|
import { validateScene } from '@thewhateverapp/scene-sdk';
|
|
4
|
+
import { SceneRenderer } from './SceneRenderer.js';
|
|
4
5
|
/**
|
|
5
6
|
* SceneFromJson - Renders a scene from a JSON object with validation
|
|
6
7
|
*
|
|
@@ -16,18 +17,8 @@ import { validateScene } from '@thewhateverapp/scene-sdk';
|
|
|
16
17
|
* ```
|
|
17
18
|
*/
|
|
18
19
|
export function SceneFromJson({ json, showErrors = true, onEvent, container = 'tile', ...props }) {
|
|
19
|
-
// SSR detection - only render SceneRenderer on client
|
|
20
|
-
const [isClient, setIsClient] = useState(false);
|
|
21
|
-
const [SceneRenderer, setSceneRenderer] = useState(null);
|
|
22
|
-
// Load SceneRenderer dynamically on client only (pixi.js requires browser APIs)
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
setIsClient(true);
|
|
25
|
-
import('./SceneRenderer.js').then((mod) => {
|
|
26
|
-
setSceneRenderer(() => mod.SceneRenderer);
|
|
27
|
-
});
|
|
28
|
-
}, []);
|
|
29
20
|
// Wrap onEvent to forward to parent window via postMessage
|
|
30
|
-
const wrappedOnEvent =
|
|
21
|
+
const wrappedOnEvent = useCallback((event, data) => {
|
|
31
22
|
// Call user's onEvent handler
|
|
32
23
|
onEvent?.(event, data);
|
|
33
24
|
// Forward to parent window for tile containers to handle
|
|
@@ -72,20 +63,6 @@ export function SceneFromJson({ json, showErrors = true, onEvent, container = 't
|
|
|
72
63
|
}
|
|
73
64
|
}
|
|
74
65
|
}, [validationResult]);
|
|
75
|
-
// Loading placeholder for SSR and dynamic import
|
|
76
|
-
const loadingPlaceholder = (React.createElement("div", { style: {
|
|
77
|
-
width: '100%',
|
|
78
|
-
height: '100%',
|
|
79
|
-
backgroundColor: '#0a0a1a',
|
|
80
|
-
display: 'flex',
|
|
81
|
-
alignItems: 'center',
|
|
82
|
-
justifyContent: 'center',
|
|
83
|
-
} },
|
|
84
|
-
React.createElement("div", { style: {
|
|
85
|
-
color: '#666',
|
|
86
|
-
fontSize: 14,
|
|
87
|
-
fontFamily: 'system-ui, sans-serif',
|
|
88
|
-
} }, "Loading...")));
|
|
89
66
|
// Show errors if validation failed
|
|
90
67
|
if (!validationResult.valid) {
|
|
91
68
|
if (showErrors) {
|
|
@@ -112,13 +89,9 @@ export function SceneFromJson({ json, showErrors = true, onEvent, container = 't
|
|
|
112
89
|
throw new Error(`Scene validation failed: ${validationResult.errors.map((e) => e.message).join(', ')}`);
|
|
113
90
|
}
|
|
114
91
|
// Show warnings in console
|
|
115
|
-
if (validationResult.warnings.length > 0
|
|
92
|
+
if (validationResult.warnings.length > 0) {
|
|
116
93
|
console.warn('Scene validation warnings:', validationResult.warnings);
|
|
117
94
|
}
|
|
118
|
-
// Wait for client-side rendering and dynamic import
|
|
119
|
-
if (!isClient || !SceneRenderer) {
|
|
120
|
-
return containerStyle ? React.createElement("div", { style: containerStyle }, loadingPlaceholder) : loadingPlaceholder;
|
|
121
|
-
}
|
|
122
95
|
const sceneContent = (React.createElement(SceneRenderer, { spec: json, onEvent: wrappedOnEvent, ...props }));
|
|
123
96
|
return containerStyle ? React.createElement("div", { style: containerStyle }, sceneContent) : sceneContent;
|
|
124
97
|
}
|