Hola mundo 🍩🪐

Tresjs · Nov 28, 2022 · 286ac4c · 286ac4c
1 parent 52dea4e
commit 286ac4c
Show file tree

Hide file tree

Showing 111 changed files with 18,578 additions and 3 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,6 @@
+packages/**/dist
+**.spec.js
+**.test.ts
+**.test.js
+**.cy.js
+**/cypress/**
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+    es6: true,
+  },
+  parser: 'vue-eslint-parser',
+  plugins: ['vue', '@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'prettier',
+  ],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    allowImportExportEverywhere: true,
+  },
+  ignorePatterns: ['**/*.test.ts', 'packages/**/dist', 'package.json'],
+  rules: {
+    'arrow-parens': ['error', 'as-needed'],
+    'comma-dangle': 'off',
+    'space-before-function-paren': 'off',
+    'max-len': [1, { code: 120 }],
+    'require-jsdoc': 0,
+    'no-invalid-this': 0,
+    'import/no-absolute-path': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/no-deprecated-slot-attribute': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/html-self-closing': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multi-word-component-names': 0,
+    'vue/no-multiple-template-root': 'off',
+    'vue/first-attribute-linebreak': 'off',
+  },
+}
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+github: [alvarosabu]
+ko_fi: alvarosaburido
diff --git a/.github/workflows/actions/pnpm/action.yml b/.github/workflows/actions/pnpm/action.yml
@@ -0,0 +1,27 @@
+# From https://github.com/remirror/template/blob/4f8c5f5629a081217672a8cce1df085510f43913/.github/actions/pnpm/action.yml
+name: 'pnpm installation'
+description: 'Install and audit dependencies for pnpm'
+inputs:
+  cache: # id of input
+    description: 'The location of the pnpm cache'
+    required: true
+    default: '.pnpm-store'
+  version: # id of input
+    description: 'The version to use'
+    required: false
+    default: 6.10.0
+
+runs:
+  using: 'composite'
+  steps:
+    - name: install pnpm
+      run: npm install pnpm@${{ inputs.version }} -g
+      shell: bash
+
+    - name: setup pnpm config
+      run: pnpm config set store-dir ${{ inputs.cache }}
+      shell: bash
+
+    - name: install dependencies
+      run: pnpm install --shamefully-hoist
+      shell: bash
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,41 @@
+name: Run linters
+on: [push]
+
+env:
+  PNPM_CACHE_FOLDER: .pnpm-store
+  HUSKY: 0 # Bypass husky commit hook for CI
+
+jobs:
+  lint:
+    name: Lint all projects
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: setup caching
+        uses: actions/cache@v2
+        with:
+          path: ${{ env.PNPM_CACHE_FOLDER }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7
+
+      - name: setup node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: 'pnpm'
+
+      - name: setup pnpm config
+        run: pnpm config set store-dir $PNPM_CACHE_FOLDER
+
+      - run: pnpm install --no-frozen-lockfile --shamefully-hoist
+
+      - name: Run Lint
+        run: pnpm run lint
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+apps/.DS_Store
+packages/.DS_Store
+.pnpm-store/
+# Local Netlify folder
+.netlify
+apps/lunchbox-demo
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@alvarosabu/prettier-config'),
+  printWidth: 120,
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,17 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Current Test File",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal"
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+  "eslint.codeAction.showDocumentation": {
+    "enable": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "scss.lint.unknownAtRules": "ignore",
+  "css.lint.unknownAtRules": "ignore",
+  "eslint.workingDirectories": ["apps/", "packages/"],
+  "testing.automaticallyOpenPeekView": "never"
+}
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Tres
+Copyright (c) 2022-present, (alvarosabu) Alvaro Saburido and Tres contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,2 +1,39 @@
-# tres
-Declarative ThreeJS using Vue Components
+![repository-banner.png](/public/github-banner.png)
+
+# Tres ▲ ■ ●
+
+> Declarative ThreeJS using Vue Components
+
+- 💡 Build 3D scene as they were Vue components
+- ⚡️ Powered by Vite
+- 🥰 It brings all the updated features of ThreeJS right awayregardless the version
+- 🦾 Fully Typed
+
+Tres (Spanish word for "three", pronounced `/tres/` ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion. Think of it as a [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) or [Lunchbox](https://github.com/breakfast-studio/lunchboxjs) but without the need of a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html).
+
+## Packages
+
+| Package               | Version (click for changelogs)                                                                         |
+| --------------------- | :----------------------------------------------------------------------------------------------------- |
+| [Tres](packages/tres) | [![tres version](https://img.shields.io/npm/v/@tresjs/core.svg?label=%20)](packages/tres/CHANGELOG.md) |
+| [Cientos](packages/cientos) | [![tres version](https://img.shields.io/npm/v/@tresjs/cientos.svg?label=%20)](packages/cientos/CHANGELOG.md) |
+
+## Docs
+
+To check the docs
+
+```
+pnpm run docs:dev
+```
+
+## Contribution
+
+Soon
+
+## License
+
+[MIT](/LICENSE)
+
+## Sponsors
+
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  title: 'TresJS',
+  description: 'Autogenerated wrappers based on THREE instances',
+  head: [['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }]],
+  themeConfig: {
+    logo: '/logo.svg',
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Introduction', link: '/guide/' },
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Your first Scene', link: '/guide/your-first-scene' },
+        ],
+      },
+    ],
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/alvarosabu/tres' },
+      { icon: 'twitter', link: 'https://twitter.com/alvarosabu' },
+    ],
+  },
+})
diff --git a/docs/.vitepress/theme/components/FirstScene.vue b/docs/.vitepress/theme/components/FirstScene.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+
+const styles = {
+  width: '100%',
+  height: '550px',
+  border: '1px solid #e2e2e2',
+  borderRadius: '8px',
+  overflow: 'hidden',
+}
+</script>
+<template>
+  <ClientOnly>
+    <TresCanvas shadows clear-color="#fff" :style="styles">
+      <TresPerspectiveCamera :position="[0, 2, 4]" />
+      <OrbitControls />
+      <TresScene>
+        <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
+          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+          <TresMeshBasicMaterial color="#FBB03B" />
+        </TresMesh>
+      </TresScene>
+    </TresCanvas>
+  </ClientOnly>
+</template>
diff --git a/docs/.vitepress/theme/components/FirstSceneLightToon.vue b/docs/.vitepress/theme/components/FirstSceneLightToon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+
+const styles = {
+  width: '100%',
+  height: '550px',
+  border: '1px solid #e2e2e2',
+  borderRadius: '8px',
+  overflow: 'hidden',
+}
+</script>
+<template>
+  <ClientOnly>
+    <TresCanvas shadows clear-color="#fff" :style="styles">
+      <TresPerspectiveCamera :position="[0, 2, 4]" />
+      <OrbitControls />
+      <TresScene>
+        <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+        <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
+          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
+          <TresMeshToonMaterial color="#FBB03B" />
+        </TresMesh>
+      </TresScene>
+    </TresCanvas>
+  </ClientOnly>
+</template>
diff --git a/docs/.vitepress/theme/config.css b/docs/.vitepress/theme/config.css
@@ -0,0 +1,44 @@
+:root {
+  --vp-home-hero-name-color: #82dbc5;
+  --vp-c-brand: #82dbc5;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+
+  --vp-button-alt-border: var(--vp-c-gray-light-3);
+  --vp-button-alt-text: var(--vp-c-text-light-1);
+  --vp-button-alt-bg: var(--vp-c-gray-light-5);
+  --vp-button-alt-hover-border: var(--vp-c-gray-light-3);
+  --vp-button-alt-hover-text: var(--vp-c-text-light-1);
+  --vp-button-alt-hover-bg: var(--vp-c-gray-light-4);
+  --vp-button-alt-active-border: var(--vp-c-gray-light-3);
+  --vp-button-alt-active-text: var(--vp-c-text-light-1);
+  --vp-button-alt-active-bg: var(--vp-c-gray-light-3);
+
+  --vp-button-sponsor-border: var(--vp-c-gray-light-3);
+  --vp-button-sponsor-text: var(--vp-c-text-light-2);
+  --vp-button-sponsor-bg: transparent;
+  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-bg: transparent;
+  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-bg: transparent;
+}
+
+a {
+  text-decoration: dashed;
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,15 @@
+import Tres from '@tresjs/core'
+// .vitepress/theme/index.ts
+import DefaultTheme from 'vitepress/theme'
+import './config.css'
+import FirstScene from './components/FirstScene.vue'
+import FirstSceneLightToon from './components/FirstSceneLightToon.vue'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    ctx.app.component('FirstScene', FirstScene)
+    ctx.app.component('FirstSceneLightToon', FirstSceneLightToon)
+    ctx.app.use(Tres)
+  },
+}
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -0,0 +1,29 @@
+# Instalation
+
+Learn how to install TresJS
+
+```
+pnpm i @tresjs/core three
+```
+
+> Better use with Vue 3.x and composition API
+
+## Getting started
+
+You can install TresJS as any other Vue plugin
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import Tres from '@tresjs/core'
+
+export const app = createApp(App)
+
+app.use(Tres)
+app.mount('#app')
+```
+
+### Nuxt
+
+Soon.