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

fritx · fritx · commit ce8160888c1b · 2020-04-19T16:14:49.000+08:00
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/vue@2.6.11/dist/vue.min.js')
+await loadJs('https://unpkg.com/vue@2.6.11/dist/vue.min.js')
+
+// await loadJs('https://unpkg.com/three@0.115.0/build/three.min.js')
+await loadJs('https://unpkg.com/three@0.81.2/build/three.min.js')
+
+// await loadJs('https://unpkg.com/vue-threejs@0.2.0-alpha.1/lib/VueThreejs.umd.min.js')
+await loadJs('https://unpkg.com/vue-threejs@0.2.0-alpha.1/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;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`- hello-world.jsx`
	`2`	`+- vue-threejs.js`
`2`	`3`	`- react-at.jsx`
`3`	`4`	`- vue-at.js`
`4`	`5`	`- vue-render-h.js`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`interface Window {`
`2`	`2`	`assetsNode: HTMLDivElement;`
`3`	`3`	`mountNode: HTMLDivElement;`
	`4`	`+ triggerPreview: (code: string) => void;`
`4`	`5`	`}`