Update sandpack data

Fix #50

data/mdxData.ts

@@ -1,15 +1,15 @@
 import { hello } from 'data/sandpack/hello-world';
 import {
-  main,
-  main2,
-  styles,
+  firstScene,
+  loadBackground,
+  resetStyles,
 } from 'data/sandpack/how-to-load-a-background-with-threejs';
+import { Button, Input } from './sandpack';
 import {
   genericApp,
   genericChild,
   hookApp,
 } from './sandpack/generic-component-encapsulate-reusable-component';
-import { Button, Input } from './sandpack';
 import {
   store,
   useDeferredValue,
@@ -21,17 +21,23 @@ import {
 
 const data = {
   sandpack: {
-    'hello-world': hello,
-    'load-background-main': main,
-    'load-background-main2': main2,
-    'load-background-styles': styles,
-    'generic-app': genericApp,
-    'generic-child': genericChild,
-    'generic-hookApp': hookApp,
     common: {
       Button,
       Input,
     },
+    'hello-world': {
+      hello,
+    },
+    'how-to-load-a-background-with-threejs': {
+      firstScene,
+      loadBackground,
+      resetStyles,
+    },
+    'generic-component-encapsulate-reusable-component': {
+      genericApp,
+      genericChild,
+      hookApp,
+    },
     'react18-new-hooks': {
       useTransition,
       useDeferredValue,

data/posts/generic-component-encapsulate-reusable-component.mdx

@@ -25,7 +25,8 @@ React Hook Forms 对 TypeScript 支持良好，有了 TypeScript 我们就可以
 <RUASandpack
   template="react-ts"
   files={{
-    '/App.tsx': sandpack['generic-hookApp'],
+    '/App.tsx':
+      sandpack['generic-component-encapsulate-reusable-component'].hookApp,
   }}
   customSetup={{
     dependencies: {
@@ -209,8 +210,10 @@ const sayIt = <T extends number | string>(p: Person<T>) => {
 <RUASandpack
   template="react-ts"
   files={{
-    '/App.tsx': sandpack['generic-app'],
-    '/Child.tsx': sandpack['generic-child'],
+    '/App.tsx':
+      sandpack['generic-component-encapsulate-reusable-component'].genericApp,
+    '/Child.tsx':
+      sandpack['generic-component-encapsulate-reusable-component'].genericChild,
   }}
 />
 

data/posts/hello-world.mdx

@@ -17,6 +17,6 @@ console.log('Hello world');
 <RUASandpack
   template="react"
   files={{
-    '/App.js': sandpack['hello-world'],
+    '/App.js': sandpack['hello-world'].hello,
   }}
 />

data/posts/how-to-load-a-background-with-threejs.mdx

@@ -48,11 +48,9 @@ Now, we can get a black canvas in our document.
 <RUASandpack
   template="react"
   files={{
-    '/App.js': sandpack['load-background-main'],
-    '/styles.css': sandpack['load-background-styles'],
-  }}
-  options={{
-    autorun: false,
+    '/App.js': sandpack['how-to-load-a-background-with-threejs'].firstScene,
+    '/styles.css':
+      sandpack['how-to-load-a-background-with-threejs'].resetStyles,
   }}
   customSetup={{
     dependencies: {
@@ -130,11 +128,9 @@ controls.update();
 <RUASandpack
   template="react"
   files={{
-    '/App.js': sandpack['load-background-main2'],
-    '/styles.css': sandpack['load-background-styles'],
-  }}
-  options={{
-    autorun: false,
+    '/App.js': sandpack['how-to-load-a-background-with-threejs'].loadBackground,
+    '/styles.css':
+      sandpack['how-to-load-a-background-with-threejs'].resetStyles,
   }}
   customSetup={{
     dependencies: {

data/sandpack/how-to-load-a-background-with-threejs.ts

@@ -1,4 +1,4 @@
-export const main = `import { useEffect, useRef } from 'react';
+export const firstScene = `import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 export default function App() {
@@ -10,6 +10,7 @@ export default function App() {
     0.1,
     1000
   );
+
   useEffect(() => {
     const renderer = new THREE.WebGLRenderer({
       canvas: ref.current,
@@ -32,6 +33,7 @@ export default function App() {
       window.removeEventListener('resize', onWindowResize);
     };
   }, []);
+
   return (
     <>
       <canvas ref={ref}></canvas>
@@ -39,9 +41,10 @@ export default function App() {
   )
 }`;
 
-export const main2 = `import { useEffect, useRef } from "react";
+export const loadBackground = `import { useEffect, useRef } from "react";
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
 const manager = new THREE.LoadingManager();
 manager.onProgress = (item, loaded, total) => {
   console.log(loaded, total);
@@ -49,26 +52,29 @@ manager.onProgress = (item, loaded, total) => {
 
 export default function App() {
   const ref = useRef(null);
-  const scene = new THREE.Scene();
-  const sky = new THREE.CubeTextureLoader(manager).load([
-    "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_ft.png",
-    "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_bk.png",
-    "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_up.png",
-    "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_dn.png",
-    "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_rt.png",
-    "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/first-project/skybox/corona_lf.png"
-  ]);
-  scene.background = sky;
-  const camera = new THREE.PerspectiveCamera(
-    75,
-    window.innerWidth / window.innerHeight,
-    0.1,
-    1000
-  );
-  camera.position.set(0, 1, 0);
-  camera.up.set(0, 0, 1);
-  scene.add(camera);
+
   useEffect(() => {
+    const scene = new THREE.Scene();
+    const sky = new THREE.CubeTextureLoader(manager).load([
+      "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/images/corona/corona_ft.png",
+      "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/images/corona/corona_bk.png",
+      "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/images/corona/corona_up.png",
+      "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/images/corona/corona_dn.png",
+      "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/images/corona/corona_rt.png",
+      "https://raw.githubusercontent.com/DefectingCat/three-playground/master/src/assets/images/corona/corona_lf.png"
+    ]);
+    scene.background = sky;
+
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    camera.position.set(0, 1, 0);
+    camera.up.set(0, 0, 1);
+    scene.add(camera);
+
     const renderer = new THREE.WebGLRenderer({
       canvas: ref.current
     });
@@ -82,6 +88,7 @@ export default function App() {
       renderer.render(scene, camera);
       requestAnimationFrame(render);
     };
+
     requestAnimationFrame(render);
     function onWindowResize() {
       camera.aspect = window.innerWidth / window.innerHeight;
@@ -90,6 +97,7 @@ export default function App() {
       render(0);
     }
     window.addEventListener("resize", onWindowResize);
+
     return () => {
       window.removeEventListener("resize", onWindowResize);
     };
@@ -102,7 +110,7 @@ export default function App() {
 }
 `;
 
-export const styles = `* {
+export const resetStyles = `* {
   padding: 0;
   margin: 0;
 }`;