diff --git a/public/code/index.yml b/public/code/index.yml index a818580..f691a42 100644 --- 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 new file mode 100644 index 0000000..e9e6e97 --- /dev/null +++ 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: ` +
+ + + + + + + + + + +
+ `, + 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 new file mode 100644 index 0000000..38f47a3 Binary files /dev/null and b/public/code/vue-threejs.js.png differ diff --git a/public/index.html b/public/index.html index dd1ccfd..91612cf 100644 --- 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`. --> - React App + ‎ diff --git a/src/playground/Playground.tsx b/src/playground/Playground.tsx index fd8cc84..64c5633 100644 --- 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 (
@@ -185,6 +200,7 @@ export let Playground: React.FC = () => { void; }