Merge pull request #280 from Tresjs/feature/blog-release-210

docs: blog entry for 2.1.0

docs/.vitepress/config.ts

@@ -6,6 +6,26 @@ export default defineConfig({
   description: 'Declarative ThreeJS using Vue Components',
   head: [
     ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
+    ['meta', { name: 'theme-color', content: '#82DBC5' }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
+    ['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:site_name', content: 'TresJS' }],
+    [
+      'meta',
+      {
+        property: 'og:image',
+        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'twitter:image',
+        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
+      },
+    ],
     ['script', { defer: 'true', 'data-domain': 'tresjs.org', src: 'https://plausible.io/js/script.js' }],
   ],
   themeConfig: {

docs/blog/announcing-v-2-1-0.md

@@ -0,0 +1,165 @@
+---
+sidebar: false
+---
+
+# Announcing v2.1.0 🎉
+
+We are excited to announce the release of **TresJS v2.1.0** 🎉 . First release since we open source the project an recieveing such a warm welcome from the vue community. We are so grateful for all the support and feedback we have received so far. More than 225 ⭐️ in the [github repo](https://github.com/Tresjs/tres) in just 2 weeks! 🤯.
+
+This new version comes with exciting new features and improvements in the ecosystem, let's dive in!
+
+## What's hot? 🔥
+
+### Export types and better intellisense 🦾
+
+We are now correctly exporting the types from the core package (thanks to [@userquin](https://github.com/userquin)), this means that you can use the types in your project and get better intellisense. Specially if you are using `moduleResolution: 'bundler'` in your `tsconfig.json`.
+
+#### Before 😨
+
+![Export types core 2.0.0](/blog/tres-core-2-0-0.png)
+
+[Source](https://arethetypeswrong.github.io/?p=%40tresjs%2Fcore%402..0.0)
+
+#### After 🥹
+
+![Export types core 2.1.1](/blog/tres-core-2-1-1.png)
+
+[Source](https://arethetypeswrong.github.io/?p=%40tresjs%2Fcore%402.1.1)
+
+Shoutout to the team behind this amazing tool [Are the types wrong](https://arethetypeswrong.github.io), a must-have for every library author.
+
+### Inherit types from THREE 🤓
+
+We are now inheriting the types from the `three` package instead of generating them on build time. That means that you no longer need to wait for a release of TresJS to get the latest types from ThreeJS which follows our goal of always being up to date with the latest ThreeJS features.
+
+::: tip
+Make sure you have the `@types/three` package installed in your project.
+:::
+
+We took serious inspiration from R3F v9 and how they are handling [the types](https://github.com/pmndrs/react-three-fiber/blob/v9/packages/fiber/src/three-types.ts), so thanks to [@CodyJasonBennett](https://github.com/CodyJasonBennett) from the Pmndrs team for pointing me in the right direction.
+
+```ts
+type ThreeExports = typeof THREE
+type ThreeInstancesImpl = {
+  [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation
+    ? ThreeElement<ThreeExports[K]>
+    : never
+}
+
+export interface ThreeInstances extends ThreeInstancesImpl {
+  primitive: Omit<ThreeElement<any>, 'args'> & { object: object }
+}
+
+type TresComponents = {
+  [K in keyof ThreeInstances as `Tres${Capitalize<string & K>}`]: DefineComponent<ThreeInstances[K]>
+}
+
+declare module 'vue' {
+  export type GlobalComponents = TresComponents
+}
+```
+
+This is a simplified version of the code, you can check the full implementation [here](https://github.com/Tresjs/tres/blob/main/src/types/index.ts)
+
+Why is this so great? For example now you get a better intellisense of the `args` property for the instance constructor parameters:
+
+![Args intellisense](/blog/args-intellisense.png)
+
+### Improved HMR
+
+We have improved the HMR experience, now you can update the code without reloading the page. This is a huge improvement for the development experience but still not perfect. For example `OrbitControls` is not working correctly with HMR, so you will have to reload the page to see the changes.
+
+![HMR](/blog/hmr.gif)
+
+### Updated to Vue 3.3.4
+
+We are now using the latest version of [Vue 3.3.4](https://blog.vuejs.org/posts/vue-3-3) "Rurouni Kenshin", this means that you get all the latest features and bug fixes from Vue.
+
+## Ecossystem updates 🌳
+
+### Cientos v2.1.0
+
+We have updated the `@tresjs/cientos` package to v2.1.0, this version comes with a lot of improvements and new features. Check out the [release notes](https://github.com/Tresjs/cientos/releases/tag/2.1.0)
+
+#### Enhanced `OrbitControls`
+
+The abstraction for `OrbitControls` has been improved adding all the properties and methods from the original ThreeJS class such as `enableDamping` and `autoRotate` as well as events like `change` and `start`.
+
+This was highly requested by the community, so thanks to everyone that contributed to this release.
+
+```vue
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000] />
+    <OrbitControls enable-damping :damping-factor="0.1" @start="onOrbitControlStart" />
+  </TresCanvas>
+</template>
+```
+
+#### Welcome `ContactShadows`
+
+![Contact Shadows](https://cientos.tresjs.org/cientos/contact-shadows.png)
+
+We have added support for [Contact Shadows](https://threejs.org/examples/?q=cont#webgl_shadow_contact). Is a technique used in 3D graphics to create shadows that appear where objects meet or "contact" each other. This is different from traditional shadowing techniques, which often only create shadows based on the position of a light source relative to an object.
+
+```html {11}
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Box ref="boxRef" :args="[0.4, 0.4, 0.4]" :position="[0, 1, 0]">
+      <TresMeshNormalMaterial />
+    </Box>
+    <Icosahedron ref="icoRef" :args="[0.3]" :position="[1, 1, 1]">
+      <TresMeshNormalMaterial />
+    </Icosahedron>
+    <ContactShadows :blur="0.5" :resolution="512" :opacity="0.2" />
+    <Plane :args="[10, 10, 10]" :position="[0, -0.02, 0]">
+      <TresMeshBasicMaterial :color="'#ffffff'" />
+    </Plane>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+
+### Precipitation abstraction
+
+A new abstraction has arrived, the `precipitation` component creates an infinite flow of particles, in combination with different props, this allow you to create, rain/snow/hail and many more effect. Unlock your creativity
+
+![Precipitation](https://cientos.tresjs.org/cientos/precipitation.gif)
+
+```vue
+<template>
+  <TresCanvas>
+    ...
+    <Precipitation :speed="1" :count="2500" :randomness="0.7" />
+    ...
+  </TresCanvas>
+</template>
+```
+
+You can read all the documentation [here](https://cientos.tresjs.org/guide/abstractions/precipitation.html)
+
+### Update parallax mouse abstraction
+
+We have added improvements to `MouseParallax` (previously called PamCameraMouse)
+
+1. No conflicts with controls
+2. New prop ease factor allows you to add smooth movement
+3. Change to a better name
+
+### Improvements in DX
+
+It's also worth mentioning, in cientos we're working hard on improving the developer experience, as we know the details matter, these are some of them:
+
+- Update Vue 3.3.4
+- start of migration to new destructure props
+- Export types and better intellisense
+- Refactor folder structure
+- Creation of feature/bug forms in github for better issues report
+
+## Share your work 🎨
+
+We want to see what you are creating with TresJS, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.
+
+Happy coding! 🚀

docs/package.json

@@ -9,8 +9,8 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "unocss": "^0.51.13",
+    "unocss": "^0.52.1",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-alpha.75"
+    "vitepress": "1.0.0-beta.1"
   }
 }

package.json

@@ -72,17 +72,16 @@
     "@stackblitz/sdk": "^1.9.0",
     "@tresjs/cientos": "2.0.0",
     "@types/three": "^0.152.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-c8": "^0.31.1",
     "@vitest/ui": "^0.31.1",
     "@vue/test-utils": "^2.3.2",
-    "eslint": "^8.40.0",
+    "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.13.0",
+    "eslint-plugin-vue": "^9.14.0",
     "gsap": "^3.11.5",
-    "happy-dom": "^9.18.3",
     "jsdom": "^22.0.0",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.0",
@@ -92,10 +91,10 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "three": "^0.152.2",
-    "unocss": "^0.51.13",
+    "unocss": "^0.52.1",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.7",
+    "vite": "^4.3.8",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.3.0",
     "vite-plugin-inspect": "^0.7.26",