Browse Source

docs: blog entry for 2.1.0

alvarosabu 2 years ago
parent
commit
2cea5f8774

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

@@ -0,0 +1,97 @@
+---
+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]()
+
+#### 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>
+```

+ 2 - 2
docs/package.json

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

BIN
docs/public/blog/args-intellisense.png


BIN
docs/public/blog/hmr.gif


BIN
docs/public/blog/tres-core-2-0-0.png


BIN
docs/public/blog/tres-core-2-1-1.png


+ 6 - 8
package.json

@@ -72,18 +72,16 @@
     "@stackblitz/sdk": "^1.9.0",
     "@stackblitz/sdk": "^1.9.0",
     "@tresjs/cientos": "2.0.0",
     "@tresjs/cientos": "2.0.0",
     "@types/three": "^0.152.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",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-c8": "^0.31.1",
     "@vitest/coverage-c8": "^0.31.1",
     "@vitest/ui": "^0.31.1",
     "@vitest/ui": "^0.31.1",
     "@vue/test-utils": "^2.3.2",
     "@vue/test-utils": "^2.3.2",
-    "eslint": "^8.40.0",
+    "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.13.0",
+    "eslint-plugin-vue": "^9.14.0",
     "gsap": "^3.11.5",
     "gsap": "^3.11.5",
-    "happy-dom": "^9.18.3",
-    "jsdom": "^22.0.0",
     "kolorist": "^1.8.0",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.0",
     "pathe": "^1.1.0",
     "prettier": "^2.8.8",
     "prettier": "^2.8.8",
@@ -92,10 +90,10 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "three": "^0.152.2",
     "three": "^0.152.2",
-    "unocss": "^0.51.13",
+    "unocss": "^0.52.1",
     "unplugin": "^1.3.1",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.24.1",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.7",
+    "vite": "^4.3.8",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.3.0",
     "vite-plugin-dts": "2.3.0",
     "vite-plugin-inspect": "^0.7.26",
     "vite-plugin-inspect": "^0.7.26",

File diff suppressed because it is too large
+ 220 - 314
pnpm-lock.yaml


Some files were not shown because too many files changed in this diff