feat: intro demo example

Aslemammad · Aug 5, 2021 · 43d226f · 43d226f
1 parent a3b193b
commit 43d226f
Show file tree

Hide file tree

Showing 14 changed files with 389 additions and 0 deletions.
diff --git a/packages/examples/intro/components/Component.tsx b/packages/examples/intro/components/Component.tsx
@@ -0,0 +1,5 @@
+const Component = () => {
+  return <>loaded</>;
+};
+
+export default Component;
diff --git a/packages/examples/intro/components/Layout.tsx b/packages/examples/intro/components/Layout.tsx
@@ -0,0 +1,15 @@
+export default function Layout({ children }) {
+  return (
+    <main className="bg-black text-gray-300 h-full px-4 py-10 text-center">
+      <a
+        className="bg-red-600 p-1 cursor-pointer rounded-sm outline-none"
+        href={`/`}
+      >
+        Home
+      </a>
+
+      <div className="mt-8">{children}</div>
+
+    </main>
+  );
+}
diff --git a/packages/examples/intro/components/Model.tsx b/packages/examples/intro/components/Model.tsx
@@ -0,0 +1,27 @@
+// export default function Model(props) {
+//   const { scene } = useGLTF(
+//     'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/ruby/model.gltf'
+//   );
+//   return <primitive object={scene} {...props} />;
+// }
+//
+
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF } from '@react-three/drei'
+
+export default function Model(props) {
+  const group = useRef()
+  const { nodes, materials } = useGLTF(
+    'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/ruby/model.gltf'
+  )
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <mesh geometry={nodes.Ruby.geometry} material={materials.Material} />
+    </group>
+  )
+}
+
diff --git a/packages/examples/intro/declare.d.ts b/packages/examples/intro/declare.d.ts
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+declare module '*.module.css';
+
+declare module 'react'  {
+  interface SuspenseProps {
+    children?: ReactNode | undefined;
+    progressive?: boolean;
+    server?: boolean;
+
+    /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
+    fallback: NonNullable<ReactNode> | null;
+  }
+}
diff --git a/packages/examples/intro/index.html b/packages/examples/intro/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body class="h-full bg-black">
+    <div id="root"><!--vitext--></div>
+    <script type="module" src="/@vitext/index.js"></script>
+    <!-- github.com/aslemammad/vitext/issues for issues -->
+  </body>
+</html>
diff --git a/packages/examples/intro/package.json b/packages/examples/intro/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "intro",
+  "private": true,
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vitext dev",
+    "build": "vitext build",
+    "start": "vitext serve"
+  },
+  "dependencies": {
+    "@react-three/drei": "^7.3.1",
+    "@react-three/fiber": "^7.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "three": "^0.131.3",
+    "vitext": "0.0.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.3.3",
+    "@tailwindcss/typography": "^0.4.1",
+    "@types/react": "^17.0.3",
+    "autoprefixer": "^10.3.1",
+    "postcss-windicss": "^1.0.0",
+    "tailwindcss": "^2.2.7",
+    "vite-plugin-windicss": "^1.2.7",
+    "windicss": "^3.1.6"
+  }
+}
diff --git a/packages/examples/intro/pages/_app.tsx b/packages/examples/intro/pages/_app.tsx
@@ -0,0 +1,17 @@
+import '/@windicss/windi.css'
+import '../styles/main.css'
+import Layout from '../components/Layout';
+
+export default function App({
+  Component,
+  props,
+}: {
+  Component: React.ComponentType<any>;
+  props: React.PropsWithChildren<any>;
+}) {
+  return (
+    <Layout>
+      <Component {...props} />
+    </Layout>
+  );
+}
diff --git a/packages/examples/intro/pages/index.tsx b/packages/examples/intro/pages/index.tsx
@@ -0,0 +1,82 @@
+import { OrbitControls, Stage } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import { lazy, Suspense, useRef, useState } from 'react';
+
+const Model = lazy(() => import('../components/Model'));
+
+const Loading = () => <p>Loading the Ruby 💎</p>;
+
+const IndexPage = () => {
+  const ref = useRef();
+  const [number, setNumber] = useState(0);
+  return (
+    <div>
+      <p className="text-4xl">⚡🚀</p>
+      <p>
+        <a
+          className="text-2xl font-bold text-red-600 font-display"
+          rel="noreferrer"
+          href="https://github.com/aslemammad/vitext"
+          target="_blank"
+        >
+          Vitext
+        </a>
+      </p>
+
+      <p>The Next.js like React framework for Speed</p>
+
+      <ul className="m-4">
+        <li>💡 Instant Server Start</li>
+        <li>💥 Suspense support</li>
+        <li>⚫ Next.js like API</li>
+        <li>📦 Optimized Build</li>
+        <li>💎 Build & Export on fly</li>
+        <li>🚀 Lightning SSG/SSR</li>
+        <li>🔑 Vite & Rollup Compatible</li>
+      </ul>
+
+      <p
+        id="input"
+        className="w-full sm:w-2/4 px-4 py-2 text-center bg-transparent rounded-sm border-white m-auto text-gray-500"
+      >
+        How many rubies do you want?
+      </p>
+      <span className="text-3xl block">{number}</span>
+      <div className="flex flex-row justify-center align-middle">
+        <button
+          className="w-24 bg-gray-600 p-1 mr-4 rounded-sm"
+          onClick={() => setNumber((prevNum) => prevNum + 1)}
+        >
+          increase
+        </button>
+        <a className="w-24 bg-red-600 p-1 cursor-pointer rounded-sm outline-none" href={`/ruby/${number}`}>return</a>
+        <button
+          className="w-24 ml-4 bg-gray-600 p-1 rounded-sm"
+          onClick={() => setNumber((prevNum) => prevNum - 1)}
+        >
+          decrease
+        </button>
+      </div>
+
+      <div className="mt-8">
+        <Suspense fallback={<Loading />}>
+          <Canvas shadows dpr={[1, 2]} camera={{ fov: 30 }}>
+            <Suspense fallback={null}>
+              <Stage
+                controls={ref}
+                preset="rembrandt"
+                intensity={1}
+                environment="city"
+              >
+                <Model />
+              </Stage>
+            </Suspense>
+            <OrbitControls ref={ref} autoRotate />
+          </Canvas>
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+export default IndexPage;
diff --git a/packages/examples/intro/pages/ruby/[slug].tsx b/packages/examples/intro/pages/ruby/[slug].tsx
@@ -0,0 +1,51 @@
+import { OrbitControls, Stage } from '@react-three/drei';
+import { Canvas, PrimitiveProps } from '@react-three/fiber';
+import { ComponentType, lazy, Suspense, useRef } from 'react';
+
+const Model: ComponentType<PrimitiveProps> = lazy(
+  () => import('../../components/Model')
+);
+
+const Loading = () => <p>Loading the Ruby 💎</p>;
+
+const Ruby = ({ id }) => {
+  const ref = useRef();
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Canvas shadows dpr={[1, 2]} camera={{ fov: 30 }}>
+        <Suspense fallback={null}>
+          <Stage
+            controls={ref}
+            preset="rembrandt"
+            intensity={1}
+            environment="city"
+          >
+            <Model />
+          </Stage>
+        </Suspense>
+        <OrbitControls ref={ref} autoRotate />
+      </Canvas>
+    </Suspense>
+  );
+};
+
+export default function ({ slug }) {
+  // const
+  const Rubies = [];
+
+  for (let i = 0; i < (Math.abs(Number(slug)) || 1); i++) {
+    Rubies.push(<Ruby id={i} key={i} />);
+  }
+  return (
+    <>
+      <p>Dynamicly loaded using React.lazy & Suspense</p>
+
+      <div>{...Rubies}</div>
+    </>
+  );
+}
+
+export function getProps({ params }) {
+  return { props: params };
+}
diff --git a/packages/examples/intro/styles/main.css b/packages/examples/intro/styles/main.css
@@ -0,0 +1,9 @@
+html {
+  height: 100vh;
+}
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
diff --git a/packages/examples/intro/tailwind.config.js b/packages/examples/intro/tailwind.config.js
@@ -0,0 +1,89 @@
+// module.exports = {
+//   mode: 'jit',
+//   purge: {
+//     content: ['./pages/**/*.tsx', './components/**/*.tsx'],
+//   },
+//   darkMode: 'class',
+//   theme: {
+//     extend: {
+//       colors: {
+//         'black': '#181a1b',
+//       },
+//     },
+//
+//     fontSize: {
+//       '4xs': ['0.375rem'],
+//       '3xs': ['0.5rem'],
+//       '2xs': ['0.625rem'],
+//       xs: ['0.75rem'],
+//       sm: ['0.875rem'],
+//       base: ['1rem'],
+//       lg: ['1.125rem'],
+//       xl: ['1.25rem'],
+//       '2xl': ['1.5rem'],
+//       '3xl': ['1.875rem'],
+//       '4xl': ['2.25rem'],
+//       '5xl': ['3rem'],
+//       '6xl': ['3.75rem'],
+//       '7xl': ['4.5rem'],
+//       '8xl': ['6rem'],
+//       '9xl': ['8rem'],
+//       '10xl': ['10rem'],
+//     },
+//   },
+//   // plugins: [require('@tailwindcss/forms')],
+// };
+//
+
+// tailwind.config.ts
+import { defineConfig } from 'windicss/helpers'
+// import formsPlugin from 'windicss/plugin/forms'
+
+export default defineConfig({
+
+  mode: 'jit',
+  purge: {
+    content: ['./pages/**/*.tsx', './components/**/*.tsx'],
+  },
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        'black': '#181a1b',
+      },
+    },
+
+    fontSize: {
+      '4xs': ['0.375rem'],
+      '3xs': ['0.5rem'],
+      '2xs': ['0.625rem'],
+      xs: ['0.75rem'],
+      sm: ['0.875rem'],
+      base: ['1rem'],
+      lg: ['1.125rem'],
+      xl: ['1.25rem'],
+      '2xl': ['1.5rem'],
+      '3xl': ['1.875rem'],
+      '4xl': ['2.25rem'],
+      '5xl': ['3rem'],
+      '6xl': ['3.75rem'],
+      '7xl': ['4.5rem'],
+      '8xl': ['6rem'],
+      '9xl': ['8rem'],
+      '10xl': ['10rem'],
+    },
+  },
+
+  // darkMode: 'class',
+  // safelist: 'p-3 p-4 p-5',
+  // theme: {
+  //   extend: {
+  //     colors: {
+  //       teal: {
+  //         100: '#096',
+  //       },
+  //     },
+  //   },
+  // },
+  // plugins: [formsPlugin],
+})
diff --git a/packages/examples/intro/tsconfig.json b/packages/examples/intro/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "include": ["."],
+  "exclude": ["**/dist/**"],
+  "compilerOptions": {
+    "target": "es2019",
+    "outDir": "dist",
+    "allowJs": true,
+    "module":"esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "ES2020.String", "ES2020", "DOM"],
+    "types": ["vitext/client", "jest", "node", "vitext"]
+  }
+}
diff --git a/packages/examples/intro/vitext.config.ts b/packages/examples/intro/vitext.config.ts
@@ -0,0 +1,15 @@
+import { UserConfig } from 'vite';
+import WindiCSS from 'vite-plugin-windicss';
+
+import pkg from './package.json';
+
+export default {
+  plugins: [
+    WindiCSS()
+  ],
+  optimizeDeps: {
+    include: Object.keys(pkg.dependencies).filter((id) => id !== 'vitext') as [
+
+    ],
+  },
+} as UserConfig;