feat: add vue-threejs demo & track mountNode resize, etc

coldemo · Apr 19, 2020 · ce81608 · ce81608
1 parent 48b0ee7
commit ce81608
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 4 deletions.
diff --git a/public/code/index.yml b/public/code/index.yml
@@ -1,4 +1,5 @@
 - hello-world.jsx
+- vue-threejs.js
 - react-at.jsx
 - vue-at.js
 - vue-render-h.js

diff --git a/public/code/vue-threejs.js b/public/code/vue-threejs.js
@@ -0,0 +1,63 @@
+// await loadJs('https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js')
+await loadJs('https://unpkg.com/[email protected]/dist/vue.min.js')
+
+// await loadJs('https://unpkg.com/[email protected]/build/three.min.js')
+await loadJs('https://unpkg.com/[email protected]/build/three.min.js')
+
+// await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.min.js')
+await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.js')
+
+appendCss(`
+#mountNode { overflow:hidden; background-color:black }
+`)
+
+Vue.use(VueThreejs)
+
+// Creating a scene - Three.js Documentation
+// https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
+let App = {
+  template: `
+    <div class="container">
+      <renderer :size="bg.size">
+        <scene>
+          <camera :position="{ z: 5 }"></camera>
+          <mesh name="Cube" :rotation="ui.rotation">
+            <geometry type="Box" :args="[1, 1, 1]"></geometry>
+            <material type="MeshBasic" :color="0x00ff00"></material>
+          </mesh>
+          <animation :fn="animate"></animation>
+        </scene>
+      </renderer>
+    </div>
+  `,
+  data() {
+    return {
+      bg: {
+        sysKey: 0,
+        // size: { w: window.innerWidth, h: window.innerHeight },
+        size: { w: mountNode.clientWidth, h: mountNode.clientHeight },
+      },
+      ui: {
+        rotation: { x: 0, y: 0, z: 0 },
+      }
+    }
+  },
+  created() {
+    this.handleResize = _.debounce(this.handleResize, 2000)
+  },
+  mounted() {
+    mountNode.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    mountNode.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    animate() {
+      this.ui.rotation.x += 0.01
+      this.ui.rotation.y += 0.01
+    },
+    handleResize() {
+      triggerPreview()
+    }
+  }
+}
diff --git a/public/code/vue-threejs.js.png b/public/code/vue-threejs.js.png
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>&lrm;</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/playground/Playground.tsx b/src/playground/Playground.tsx
@@ -131,9 +131,8 @@ export let Playground: React.FC = () => {
       setCompiling(true);
       try {
         let res = wrapCode(code);
-        if (file && file.endsWith('.jsx')) {
-          res = await babelTransform(res);
-        }
+        let hasJsx = file && ['.jsx', '.tsx'].some(ext => file.endsWith(ext));
+        if (hasJsx) res = await babelTransform(res);
         setPreview(res);
       } catch (err) {
         displayError(err);
@@ -158,6 +157,10 @@ export let Playground: React.FC = () => {
     doPreview,
     [codeBinding.value]
   );
+  window.triggerPreview = () => {
+    // doPreview(codeBinding.value);
+    doPreview(codeBinding.value + `\n\n/* ${new Date()} */`);
+  };
 
   // useTrigger(
   //   {
@@ -170,6 +173,18 @@ export let Playground: React.FC = () => {
   // keeping sync'd with styled.ts (medium=768px)
   let isGreaterThanMedium = useMedia({ minWidth: '768px' });
 
+  let handleSizingUpdate = useCallback(() => {
+    let event = new Event('resize');
+    window.mountNode.dispatchEvent(event);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleSizingUpdate);
+    return () => {
+      window.removeEventListener('resize', handleSizingUpdate);
+    };
+  }, [handleSizingUpdate]);
+
   return (
     <div className="page-playground">
       <Helmet>
@@ -185,6 +200,7 @@ export let Playground: React.FC = () => {
           </GentleSpin>
         </MainCol>
         <DragSizing
+          onUpdate={handleSizingUpdate}
           {...(isGreaterThanMedium
             ? {
                 border: 'left',

diff --git a/src/playground/types.d.ts b/src/playground/types.d.ts
@@ -1,4 +1,5 @@
 interface Window {
   assetsNode: HTMLDivElement;
   mountNode: HTMLDivElement;
+  triggerPreview: (code: string) => void;
 }