From d72f4adea60421f6171e33f0d7e3337966fb309f Mon Sep 17 00:00:00 2001 From: Alvaro Date: Mon, 16 Jan 2023 09:49:27 +0100 Subject: [PATCH 1/4] feat(playground): astro playground --- apps/playground/.gitignore | 20 + apps/playground/.vscode/extensions.json | 4 + apps/playground/.vscode/launch.json | 11 + apps/playground/README.md | 50 + apps/playground/astro.config.mjs | 9 + apps/playground/netlify.toml | 5 + apps/playground/package.json | 32 + apps/playground/public/favicon.svg | 13 + apps/playground/src/components/Card.astro | 62 + apps/playground/src/components/GLTFModel.vue | 19 + .../src/components/TheExperience.vue | 115 + .../src/components/TransformControls.vue | 90 + apps/playground/src/components/TresBasic.vue | 38 + apps/playground/src/env.d.ts | 1 + apps/playground/src/layouts/Layout.astro | 38 + apps/playground/src/pages/_app.ts | 6 + apps/playground/src/pages/index.astro | 11 + .../playground/src/pages/vue/gltf-model.astro | 11 + .../src/pages/vue/transform-controls.astro | 11 + .../playground/src/pages/vue/tres-basic.astro | 11 + apps/playground/tsconfig.json | 10 + packages/tres/histoire.config.ts | 4 +- packages/tres/histoire.setup.ts | 10 +- packages/tres/package.json | 4 +- packages/tres/src/examples/Basic.story.vue | 10 +- packages/tres/src/playground/Basic.story.vue | 20 + pnpm-lock.yaml | 2771 +++++++++++++---- 27 files changed, 2831 insertions(+), 555 deletions(-) create mode 100644 apps/playground/.gitignore create mode 100644 apps/playground/.vscode/extensions.json create mode 100644 apps/playground/.vscode/launch.json create mode 100644 apps/playground/README.md create mode 100644 apps/playground/astro.config.mjs create mode 100644 apps/playground/netlify.toml create mode 100644 apps/playground/package.json create mode 100644 apps/playground/public/favicon.svg create mode 100644 apps/playground/src/components/Card.astro create mode 100644 apps/playground/src/components/GLTFModel.vue create mode 100644 apps/playground/src/components/TheExperience.vue create mode 100644 apps/playground/src/components/TransformControls.vue create mode 100644 apps/playground/src/components/TresBasic.vue create mode 100644 apps/playground/src/env.d.ts create mode 100644 apps/playground/src/layouts/Layout.astro create mode 100644 apps/playground/src/pages/_app.ts create mode 100644 apps/playground/src/pages/index.astro create mode 100644 apps/playground/src/pages/vue/gltf-model.astro create mode 100644 apps/playground/src/pages/vue/transform-controls.astro create mode 100644 apps/playground/src/pages/vue/tres-basic.astro create mode 100644 apps/playground/tsconfig.json create mode 100644 packages/tres/src/playground/Basic.story.vue diff --git a/apps/playground/.gitignore b/apps/playground/.gitignore new file mode 100644 index 000000000..7329a851d --- /dev/null +++ b/apps/playground/.gitignore @@ -0,0 +1,20 @@ +# build output +dist/ +.output/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/apps/playground/.vscode/extensions.json b/apps/playground/.vscode/extensions.json new file mode 100644 index 000000000..22a15055d --- /dev/null +++ b/apps/playground/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/apps/playground/.vscode/launch.json b/apps/playground/.vscode/launch.json new file mode 100644 index 000000000..d64220976 --- /dev/null +++ b/apps/playground/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] +} diff --git a/apps/playground/README.md b/apps/playground/README.md new file mode 100644 index 000000000..8252739a4 --- /dev/null +++ b/apps/playground/README.md @@ -0,0 +1,50 @@ +# Welcome to [Astro](https://astro.build) + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics) + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png) + + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +│ └── favicon.svg +├── src/ +│ ├── components/ +│ │ └── Card.astro +│ ├── layouts/ +│ │ └── Layout.astro +│ └── pages/ +│ └── index.astro +└── package.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :--------------------- | :------------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` | +| `npm run astro --help` | Get help using the Astro CLI | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/apps/playground/astro.config.mjs b/apps/playground/astro.config.mjs new file mode 100644 index 000000000..1f478b0cb --- /dev/null +++ b/apps/playground/astro.config.mjs @@ -0,0 +1,9 @@ +import { defineConfig } from 'astro/config' + +// https://astro.build/config +import vue from '@astrojs/vue' + +// https://astro.build/config +export default defineConfig({ + integrations: [vue({ appEntrypoint: '/src/pages/_app' })], +}) diff --git a/apps/playground/netlify.toml b/apps/playground/netlify.toml new file mode 100644 index 000000000..20a48353c --- /dev/null +++ b/apps/playground/netlify.toml @@ -0,0 +1,5 @@ +[build.environment] + NODE_VERSION = "16" +[build] + publish = "/dist" + command = "pnpm build" \ No newline at end of file diff --git a/apps/playground/package.json b/apps/playground/package.json new file mode 100644 index 000000000..33b539b74 --- /dev/null +++ b/apps/playground/package.json @@ -0,0 +1,32 @@ +{ + "name": "@tresjs/playground", + "description": "Playground for TresJS and R3F", + "author": "Alvaro Saburido (https://github.com/alvarosabu/)", + "type": "module", + "version": "1.0.0", + "license": "MIT", + "keywords": [ + "vue", + "3d", + "threejs", + "three", + "threejs-vue" + ], + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/vue": "^1.2.2", + "astro": "^1.9.2", + "vue": "^3.2.45" + }, + "devDependencies": { + "@tresjs/cientos": "workspace:^1.4.0", + "@tresjs/core": "workspace:^1.5.0", + "three": "^0.148.0" + } +} diff --git a/apps/playground/public/favicon.svg b/apps/playground/public/favicon.svg new file mode 100644 index 000000000..0f3906297 --- /dev/null +++ b/apps/playground/public/favicon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/apps/playground/src/components/Card.astro b/apps/playground/src/components/Card.astro new file mode 100644 index 000000000..ee57d4df4 --- /dev/null +++ b/apps/playground/src/components/Card.astro @@ -0,0 +1,62 @@ +--- +export interface Props { + title: string; + body: string; + href: string; +} + +const { href, title, body } = Astro.props; +--- + +
  • + +

    + {title} + → +

    +

    + {body} +

    +     +
    • + diff --git a/apps/playground/src/components/GLTFModel.vue b/apps/playground/src/components/GLTFModel.vue new file mode 100644 index 000000000..13a6a8cd3 --- /dev/null +++ b/apps/playground/src/components/GLTFModel.vue @@ -0,0 +1,19 @@ + + + diff --git a/apps/playground/src/components/TheExperience.vue b/apps/playground/src/components/TheExperience.vue new file mode 100644 index 000000000..36d3f3421 --- /dev/null +++ b/apps/playground/src/components/TheExperience.vue @@ -0,0 +1,115 @@ + + diff --git a/apps/playground/src/components/TransformControls.vue b/apps/playground/src/components/TransformControls.vue new file mode 100644 index 000000000..6b4cfa4e2 --- /dev/null +++ b/apps/playground/src/components/TransformControls.vue @@ -0,0 +1,90 @@ + + + diff --git a/apps/playground/src/components/TresBasic.vue b/apps/playground/src/components/TresBasic.vue new file mode 100644 index 000000000..8e1da2c04 --- /dev/null +++ b/apps/playground/src/components/TresBasic.vue @@ -0,0 +1,38 @@ + + + diff --git a/apps/playground/src/env.d.ts b/apps/playground/src/env.d.ts new file mode 100644 index 000000000..f964fe0cf --- /dev/null +++ b/apps/playground/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/apps/playground/src/layouts/Layout.astro b/apps/playground/src/layouts/Layout.astro new file mode 100644 index 000000000..81bbe1c8b --- /dev/null +++ b/apps/playground/src/layouts/Layout.astro @@ -0,0 +1,38 @@ +--- +export interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + {title} + + + + + + diff --git a/apps/playground/src/pages/_app.ts b/apps/playground/src/pages/_app.ts new file mode 100644 index 000000000..111a669d7 --- /dev/null +++ b/apps/playground/src/pages/_app.ts @@ -0,0 +1,6 @@ +import type { App } from 'vue' +import Tres from '@tresjs/core' + +export default (app: App) => { + app.use(Tres) +} diff --git a/apps/playground/src/pages/index.astro b/apps/playground/src/pages/index.astro new file mode 100644 index 000000000..9c9c2b191 --- /dev/null +++ b/apps/playground/src/pages/index.astro @@ -0,0 +1,11 @@ +--- +import TheExperience from '../components/TheExperience.vue'; +import Layout from '../layouts/Layout.astro'; +--- + + +
    + +
    +     + diff --git a/apps/playground/src/pages/vue/gltf-model.astro b/apps/playground/src/pages/vue/gltf-model.astro new file mode 100644 index 000000000..6d46bb526 --- /dev/null +++ b/apps/playground/src/pages/vue/gltf-model.astro @@ -0,0 +1,11 @@ +--- +import GLTFModel from '/@/components/GLTFModel.vue'; +import Layout from '/@/layouts/Layout.astro'; +--- + + +
    + +
    +     + diff --git a/apps/playground/src/pages/vue/transform-controls.astro b/apps/playground/src/pages/vue/transform-controls.astro new file mode 100644 index 000000000..1788c71e7 --- /dev/null +++ b/apps/playground/src/pages/vue/transform-controls.astro @@ -0,0 +1,11 @@ +--- +import TransformControls from '/@/components/TransformControls.vue'; +import Layout from '/@/layouts/Layout.astro'; +--- + + +
    + +
    +     + diff --git a/apps/playground/src/pages/vue/tres-basic.astro b/apps/playground/src/pages/vue/tres-basic.astro new file mode 100644 index 000000000..9831b5947 --- /dev/null +++ b/apps/playground/src/pages/vue/tres-basic.astro @@ -0,0 +1,11 @@ +--- +import TresBasic from '/@/components/TresBasic.vue'; +import Layout from '/@/layouts/Layout.astro'; +--- + + +
    + +
    +     + diff --git a/apps/playground/tsconfig.json b/apps/playground/tsconfig.json new file mode 100644 index 000000000..9e416ddd2 --- /dev/null +++ b/apps/playground/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "baseUrl": ".", + "jsx": "preserve", + "paths": { + "/@/*": ["src/*"] + } + } +} diff --git a/packages/tres/histoire.config.ts b/packages/tres/histoire.config.ts index 89be60975..441f4c2b8 100644 --- a/packages/tres/histoire.config.ts +++ b/packages/tres/histoire.config.ts @@ -11,10 +11,12 @@ export default defineConfig({ }, }, setupFile: './histoire.setup.ts', + storyMatch: ['src/playground/**/*.story.vue'], + collectMaxThreads: 1, plugins: [HstVue()], defaultStoryProps: { iconColor: '#00c5a5', - responsiveDisabled: true, + /* responsiveDisabled: true, */ autoPropsDisabled: true, }, }) diff --git a/packages/tres/histoire.setup.ts b/packages/tres/histoire.setup.ts index 9776cc801..955efe09b 100644 --- a/packages/tres/histoire.setup.ts +++ b/packages/tres/histoire.setup.ts @@ -1,13 +1,7 @@ import { defineSetupVue3 } from '@histoire/plugin-vue' -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' -import Tres from './src' +import Tres from '@tresjs/core' export const setupVue3 = defineSetupVue3(({ app }) => { - app.use(Tres, { - prefix: 'Tres', - extends: { - OrbitControls, - }, - }) + app.use(Tres) }) diff --git a/packages/tres/package.json b/packages/tres/package.json index 5fa765b36..0c25a6e85 100644 --- a/packages/tres/package.json +++ b/packages/tres/package.json @@ -52,7 +52,7 @@ }, "devDependencies": { "@alvarosabu/utils": "^2.2.0", - "@histoire/plugin-vue": "0.11.7", + "@histoire/plugin-vue": "0.12.4", "@tresjs/cientos": "workspace:^1.4.0", "@types/three": "^0.148.0", "@vitejs/plugin-vue": "^4.0.0", @@ -61,7 +61,7 @@ "@vueuse/core": "^9.7.0", "gl": "6.0.1", "happy-dom": "^8.1.0", - "histoire": "0.11.9", + "histoire": "0.12.4", "kolorist": "^1.6.0", "pathe": "^1.0.0", "release-it": "^15.5.1", diff --git a/packages/tres/src/examples/Basic.story.vue b/packages/tres/src/examples/Basic.story.vue index e9be7fd66..45ee610b8 100644 --- a/packages/tres/src/examples/Basic.story.vue +++ b/packages/tres/src/examples/Basic.story.vue @@ -1,17 +1,19 @@